@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/collection/components/popover/popover.js

@@ -1,594 +1,681 @@
-import { autoUpdate, } from '@floating-ui/dom';
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
-import { getDefaultMiddleware } from './middleware';
-import { computeUpdatedPosition } from './util';
+import { autoUpdate, } from "@floating-ui/dom";
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
+import { getDefaultMiddleware } from "./middleware";
+import { computeUpdatedPosition } from "./util";
 const WINDOW_RESIZE_DEBOUNCE_THRESHOLD = 200;
 export class Popover {
-  constructor() {
-    this.shouldUpdatePosition = false;
-    this.middleware = [];
-    this.partialWindow = window;
-    this.open = false;
-    this.placement = 'bottom-start';
-    this.position = undefined;
-    this.anchorBounds = undefined;
-    this.backdrop = true;
-    this.animated = false;
-    this.anchorSelector = undefined;
-    this.boundarySelector = undefined;
-    this.resizeBehavior = 'dynamic';
-    this.overflowBehavior = undefined;
-    this.flipBehavior = undefined;
-    this.offsetBehavior = undefined;
-    this.updateOnResize = false;
-    this.opened = false;
-    this.computedPlacement = this.placement;
-    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
-    this.updateListener = this.updateListener.bind(this);
-    this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
-    this.handleResize = this.handleResize.bind(this);
-    this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
-    this.setWindow = this.setWindow.bind(this);
-    this.updateResizeObserver = this.updateResizeObserver.bind(this);
-  }
-  connectedCallback() {
-    this.updatePosition(this.position);
-    this.updateResizeObserver();
-  }
-  componentDidUpdate() {
-    if (this.shouldUpdatePosition) {
-      this.shouldUpdatePosition = false;
-      if (this.updateDispose != null) {
-        this.handlePositionUpdate();
-      }
-      else {
-        this.updateListener();
-      }
+    constructor() {
+        /**
+         * Whether this popover's content is visible.
+         */
+        this.open = false;
+        /**
+         * The placement of the popover at the clicked point.
+         * This can be any of the following values:
+         *
+         * 'top', 'top-start', 'top-end',
+         * 'bottom', 'bottom-start', 'bottom-end',
+         * 'right', 'right-start', 'right-end',
+         * 'left', 'left-start', 'left-end', and
+         * defaults to 'bottom-start'.
+         *
+         * Note: placement will adjust based on the amount
+         * of available space, so popovers close to screen
+         * edges may appear in a different location.
+         */
+        this.placement = 'bottom-start';
+        /**
+         * Whether to show a backdrop that dismisses this popover.
+         * Defaults to true, and is invisible, but can be styled.
+         */
+        this.backdrop = true;
+        /**
+         * Whether this popover should animate its contents it is opened.
+         * Defaults to false, and the animation can be overridden using
+         * the `var(--open-animation)` and `var(--close-animation)` CSS
+         * variables. The `transform-origin` will update relative to the
+         * `position` property provided.
+         */
+        this.animated = false;
+        /**
+         * The behavior that this popover will have when the window
+         * is resized. Can be either 'dynamic' or 'fixed', and defaults
+         * to 'dynamic'.
+         *
+         * 'dynamic' will cause a position-based popover to adjust its
+         * position relative to the window resize to keep it in the same
+         * relative position.
+         * 'fixed' will keep the popover in the same position even if
+         * that means it would disappear off-screen.
+         */
+        this.resizeBehavior = 'dynamic';
+        /**
+         * Indicates if the position of the popover should be updated when the
+         * popover's content size changes.
+         */
+        this.updateOnResize = false;
+        this.opened = false;
+        this.computedPlacement = this.placement;
+        this.shouldUpdatePosition = false;
+        this.middleware = [];
+        this.partialWindow = window;
+        /**
+         * @internal
+         */
+        this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
+        this.updateListener = this.updateListener.bind(this);
+        this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+        this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
+        this.setWindow = this.setWindow.bind(this);
+        this.updateResizeObserver = this.updateResizeObserver.bind(this);
     }
-  }
-  componentDidLoad() {
-    this.updateViewport();
-    this.handleMiddlewareChange();
-    this.updateListener();
-    if (this.resizeBehavior === 'dynamic') {
-      window.addEventListener('resize', this.handleResize);
+    connectedCallback() {
+        this.updatePosition(this.position);
+        this.updateResizeObserver();
     }
-  }
-  disconnectedCallback() {
-    var _a;
-    this.viewportWidth = undefined;
-    this.viewportHeight = undefined;
-    this.opened = false;
-    if (this.resizeBehavior === 'dynamic') {
-      window.removeEventListener('resize', this.handleResize);
+    componentDidUpdate() {
+        if (this.shouldUpdatePosition) {
+            this.shouldUpdatePosition = false;
+            if (this.updateDispose != null) {
+                this.handlePositionUpdate();
+            }
+            else {
+                this.updateListener();
+            }
+        }
     }
-    (_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  updatePosition(position) {
-    if (position != null) {
-      this.anchorPosition =
-        typeof position === 'object' ? position : JSON.parse(position);
-      this.shouldUpdatePosition = true;
+    componentDidLoad() {
+        this.updateViewport();
+        this.handleMiddlewareChange();
+        this.updateListener();
+        if (this.resizeBehavior === 'dynamic') {
+            window.addEventListener('resize', this.handleResize);
+        }
     }
-  }
-  updatePlacement() {
-    this.updatePosition(this.position);
-  }
-  updateOpened(open) {
-    if (open) {
-      this.opened = true;
+    disconnectedCallback() {
+        var _a;
+        this.viewportWidth = undefined;
+        this.viewportHeight = undefined;
+        this.opened = false;
+        if (this.resizeBehavior === 'dynamic') {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        (_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    this.updateListener();
-  }
-  updateAnimated() {
-    this.opened = this.open;
-  }
-  updateMiddleware() {
-    this.handleMiddlewareChange();
-  }
-  updateResizeObserver() {
-    const observer = this.getOrCreateResizeObserver();
-    observer.disconnect();
-    if (this.boundarySelector != null) {
-      const element = document.querySelector(this.boundarySelector);
-      if (element != null) {
-        observer.observe(element);
-      }
+    updatePosition(position) {
+        if (position != null) {
+            this.anchorPosition =
+                typeof position === 'object' ? position : JSON.parse(position);
+            this.shouldUpdatePosition = true;
+        }
     }
-  }
-  /**
-   * @private Used for internals or testing.
-   */
-  setWindow(partialWindow) {
-    this.partialWindow = partialWindow;
-  }
-  render() {
-    var _a, _b;
-    return (h(Host, null, this.open && this.backdrop && (h("div", { class: "backdrop", onPointerDown: () => {
-        this.open = false;
-        this.dismissed.emit();
-      } })), this.anchorPosition && (h("div", { ref: (element) => (this.anchorPointRef = element), class: "anchor", style: {
-        left: `${((_a = this.anchorPosition) === null || _a === void 0 ? void 0 : _a.x) || 0}px`,
-        top: `${((_b = this.anchorPosition) === null || _b === void 0 ? void 0 : _b.y) || 0}px`,
-      } })), h("slot", { name: "anchor" }), h("div", { ref: (element) => (this.wrapperRef = element), class: classNames('popper', {
-        hidden: !this.open,
-        open: this.open,
-      }) }, h("div", { class: classNames('content', {
-        'hidden-animated': !this.open && this.opened && this.animated,
-        'open-animated': this.open && this.animated,
-      }, this.getTransformClass()), onAnimationEnd: () => {
-        this.opened = this.open;
-      } }, h("slot", null)))));
-  }
-  updateListener() {
-    var _a, _b, _c, _d;
-    const referenceElement = (_b = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.anchorPointRef) !== null && _b !== void 0 ? _b : this.getAnchorBoundsVirtualElement();
-    if (this.open && referenceElement != null && this.wrapperRef != null) {
-      (_c = this.updateDispose) === null || _c === void 0 ? void 0 : _c.call(this);
-      this.updateDispose = autoUpdate(referenceElement, this.wrapperRef, this.handlePositionUpdate);
-      this.handlePositionUpdate();
+    updatePlacement() {
+        this.updatePosition(this.position);
     }
-    else {
-      (_d = this.updateDispose) === null || _d === void 0 ? void 0 : _d.call(this);
+    updateOpened(open) {
+        if (open) {
+            this.opened = true;
+        }
+        this.updateListener();
     }
-  }
-  async handlePositionUpdate() {
-    var _a, _b, _c;
-    const referenceElement = (_b = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.anchorPointRef) !== null && _b !== void 0 ? _b : this.getAnchorBoundsVirtualElement();
-    if (referenceElement != null && this.wrapperRef != null) {
-      const position = await computeUpdatedPosition(referenceElement, this.wrapperRef, this.placement, this.middleware);
-      this.computedPlacement = position.placement;
-      (_c = this.wrapperRef) === null || _c === void 0 ? void 0 : _c.setAttribute('style', `left: ${position.x}px; top: ${position.y}px;`);
+    updateAnimated() {
+        this.opened = this.open;
     }
-  }
-  handleMiddlewareChange() {
-    var _a, _b, _c;
-    const anchorSlotElement = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.getAnchorBoundsVirtualElement();
-    const offset = anchorSlotElement != null ? 4 : 0;
-    const boundary = this.boundarySelector != null
-      ? (_b = document.querySelector(this.boundarySelector)) !== null && _b !== void 0 ? _b : undefined
-      : undefined;
-    this.middleware = getDefaultMiddleware((_c = this.offsetBehavior) !== null && _c !== void 0 ? _c : offset, boundary != null
-      ? Object.assign({ boundary }, this.overflowBehavior) : this.overflowBehavior, this.flipBehavior);
-    this.updateListener();
-  }
-  getSlottedAnchorElement() {
-    var _a, _b, _c;
-    if (this.anchorSelector != null) {
-      return (((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.anchorSelector)) ||
-        this.hostElement.querySelector(this.anchorSelector) ||
-        undefined);
+    updateMiddleware() {
+        this.handleMiddlewareChange();
     }
-    else {
-      const anchorSlot = ((_b = this.hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="anchor"]')) ||
-        undefined;
-      if (((_c = anchorSlot === null || anchorSlot === void 0 ? void 0 : anchorSlot.assignedElements) === null || _c === void 0 ? void 0 : _c.call(anchorSlot).length) || 0 > 0) {
-        return anchorSlot === null || anchorSlot === void 0 ? void 0 : anchorSlot.assignedElements()[0];
-      }
+    updateResizeObserver() {
+        const observer = this.getOrCreateResizeObserver();
+        observer.disconnect();
+        if (this.boundarySelector != null) {
+            const element = document.querySelector(this.boundarySelector);
+            if (element != null) {
+                observer.observe(element);
+            }
+        }
     }
-  }
-  getAnchorBoundsVirtualElement() {
-    if (this.anchorBounds != null) {
-      return {
-        getBoundingClientRect: () => {
-          return DOMRect.fromRect(this.anchorBounds);
-        },
-      };
+    /**
+     * @private Used for internals or testing.
+     */
+    setWindow(partialWindow) {
+        this.partialWindow = partialWindow;
     }
-  }
-  handleResize() {
-    if (this.resizeTimeout != null) {
-      clearTimeout(this.resizeTimeout);
+    render() {
+        var _a, _b;
+        return (h(Host, { key: 'dac6fddc73d5a5e84b46a0f3f98bdcb027535859' }, this.open && this.backdrop && (h("div", { key: '63ae8150fb738a142d206af25add705b27bb825c', class: "backdrop", onPointerDown: () => {
+                this.open = false;
+                this.dismissed.emit();
+            } })), this.anchorPosition && (h("div", { key: '148cea536e94dbdcd14cc495406b23cc63835aba', ref: (element) => (this.anchorPointRef = element), class: "anchor", style: {
+                left: `${((_a = this.anchorPosition) === null || _a === void 0 ? void 0 : _a.x) || 0}px`,
+                top: `${((_b = this.anchorPosition) === null || _b === void 0 ? void 0 : _b.y) || 0}px`,
+            } })), h("slot", { key: '350776528927625987a29301f0723cb5d5171b3e', name: "anchor" }), h("div", { key: '25141e224afc06546816136873c49cae7d0e7aaa', ref: (element) => (this.wrapperRef = element), class: classNames('popper', {
+                hidden: !this.open,
+                open: this.open,
+            }) }, h("div", { key: '5ea57501baa48d579941d274c2d139207289c45a', class: classNames('content', {
+                'hidden-animated': !this.open && this.opened && this.animated,
+                'open-animated': this.open && this.animated,
+            }, this.getTransformClass()), onAnimationEnd: () => {
+                this.opened = this.open;
+            } }, h("slot", { key: 'a2cec0930f7c5c4a505a4bcc1432e9dec095c587' })))));
     }
-    if (this.open) {
-      this.resizeTimeout = setTimeout(() => {
-        this.resizeTimeout = undefined;
-        if (this.anchorPosition != null &&
-          this.viewportWidth != null &&
-          this.viewportHeight != null) {
-          const relativeWidth = this.anchorPosition.x / this.viewportWidth;
-          const relativeHeight = this.anchorPosition.y / this.viewportHeight;
-          this.position = {
-            x: this.partialWindow.innerWidth * relativeWidth,
-            y: this.partialWindow.innerHeight * relativeHeight,
-          };
+    updateListener() {
+        var _a, _b, _c, _d;
+        const referenceElement = (_b = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.anchorPointRef) !== null && _b !== void 0 ? _b : this.getAnchorBoundsVirtualElement();
+        if (this.open && referenceElement != null && this.wrapperRef != null) {
+            (_c = this.updateDispose) === null || _c === void 0 ? void 0 : _c.call(this);
+            this.updateDispose = autoUpdate(referenceElement, this.wrapperRef, this.handlePositionUpdate);
+            this.handlePositionUpdate();
+        }
+        else {
+            (_d = this.updateDispose) === null || _d === void 0 ? void 0 : _d.call(this);
         }
-        this.updateViewport();
-      }, WINDOW_RESIZE_DEBOUNCE_THRESHOLD);
-    }
-  }
-  updateViewport() {
-    this.viewportWidth = this.partialWindow.innerWidth;
-    this.viewportHeight = this.partialWindow.innerHeight;
-  }
-  getOrCreateResizeObserver() {
-    if (this.boundaryResizeObserver == null) {
-      this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
     }
-    return this.boundaryResizeObserver;
-  }
-  getTransformClass() {
-    if (this.animated) {
-      switch (this.computedPlacement) {
-        case 'top':
-          return 'center-bottom';
-        case 'top-start':
-          return 'left-bottom';
-        case 'top-end':
-          return 'right-bottom';
-        case 'bottom':
-          return 'center-top';
-        case 'bottom-start':
-          return 'left-top';
-        case 'bottom-end':
-          return 'right-top';
-        case 'right':
-          return 'left-center';
-        case 'right-start':
-          return 'left-top';
-        case 'right-end':
-          return 'left-bottom';
-        case 'left':
-          return 'right-center';
-        case 'left-start':
-          return 'right-top';
-        case 'left-end':
-          return 'right-bottom';
-      }
+    async handlePositionUpdate() {
+        var _a, _b, _c;
+        const referenceElement = (_b = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.anchorPointRef) !== null && _b !== void 0 ? _b : this.getAnchorBoundsVirtualElement();
+        if (referenceElement != null && this.wrapperRef != null) {
+            const position = await computeUpdatedPosition(referenceElement, this.wrapperRef, this.placement, this.middleware);
+            this.computedPlacement = position.placement;
+            (_c = this.wrapperRef) === null || _c === void 0 ? void 0 : _c.setAttribute('style', `left: ${position.x}px; top: ${position.y}px;`);
+        }
     }
-  }
-  static get is() { return "vertex-popover"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["popover.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["popover.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this popover's content is visible."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "PopoverPlacement": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the popover at the clicked point.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end', and\ndefaults to 'bottom-start'.\n\nNote: placement will adjust based on the amount\nof available space, so popovers close to screen\nedges may appear in a different location."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom-start'"
-      },
-      "position": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "Point | string",
-          "resolved": "Point | string | undefined",
-          "references": {
-            "Point": {
-              "location": "import",
-              "path": "../../types/point"
+    handleMiddlewareChange() {
+        var _a, _b, _c;
+        const anchorSlotElement = (_a = this.getSlottedAnchorElement()) !== null && _a !== void 0 ? _a : this.getAnchorBoundsVirtualElement();
+        const offset = anchorSlotElement != null ? 4 : 0;
+        const boundary = this.boundarySelector != null
+            ? ((_b = document.querySelector(this.boundarySelector)) !== null && _b !== void 0 ? _b : undefined)
+            : undefined;
+        this.middleware = getDefaultMiddleware((_c = this.offsetBehavior) !== null && _c !== void 0 ? _c : offset, boundary != null
+            ? {
+                boundary,
+                ...this.overflowBehavior,
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The position of the popover anchor."
-        },
-        "attribute": "position",
-        "reflect": false
-      },
-      "anchorBounds": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>",
-          "resolved": "undefined | { height: number; width: number; x: number; y: number; }",
-          "references": {
-            "Pick": {
-              "location": "global"
-            },
-            "DOMRect": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An optional DOMRect that represents the virtual location of the\nanchor element. When provided, the popover will position based\non the specified bounds to give a similar behavior to the\n`anchorSelector` or `anchor` slot based popovers without needing\nto provide the element itself."
+            : this.overflowBehavior, this.flipBehavior);
+        this.updateListener();
+    }
+    getSlottedAnchorElement() {
+        var _a, _b, _c;
+        if (this.anchorSelector != null) {
+            return (((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.anchorSelector)) ||
+                this.hostElement.querySelector(this.anchorSelector) ||
+                undefined);
         }
-      },
-      "backdrop": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether to show a backdrop that dismisses this popover.\nDefaults to true, and is invisible, but can be styled."
-        },
-        "attribute": "backdrop",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "animated": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this popover should animate its contents it is opened.\nDefaults to false, and the animation can be overridden using\nthe `var(--open-animation)` and `var(--close-animation)` CSS\nvariables. The `transform-origin` will update relative to the\n`position` property provided."
-        },
-        "attribute": "animated",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "anchorSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An optional selector to retrieve the anchor element.\nIf a selector is not provided, this popover will attempt\nto use HTMLSlotElement.assignedElements() to retrieve\nthe anchor element."
-        },
-        "attribute": "anchor-selector",
-        "reflect": false
-      },
-      "boundarySelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An optional selector for the boundary of this popover.\nIf not specified, this will default to `clippingParents`.\nSee https://popper.js.org/docs/v2/utils/detect-overflow/#boundary\nfor additional details."
-        },
-        "attribute": "boundary-selector",
-        "reflect": false
-      },
-      "resizeBehavior": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverResizeBehavior",
-          "resolved": "\"dynamic\" | \"fixed\"",
-          "references": {
-            "PopoverResizeBehavior": {
-              "location": "local"
+        else {
+            const anchorSlot = ((_b = this.hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="anchor"]')) ||
+                undefined;
+            if (((_c = anchorSlot === null || anchorSlot === void 0 ? void 0 : anchorSlot.assignedElements) === null || _c === void 0 ? void 0 : _c.call(anchorSlot).length) || 0 > 0) {
+                return anchorSlot === null || anchorSlot === void 0 ? void 0 : anchorSlot.assignedElements()[0];
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The behavior that this popover will have when the window\nis resized. Can be either 'dynamic' or 'fixed', and defaults\nto 'dynamic'.\n\n'dynamic' will cause a position-based popover to adjust its\nposition relative to the window resize to keep it in the same\nrelative position.\n'fixed' will keep the popover in the same position even if\nthat means it would disappear off-screen."
-        },
-        "attribute": "resize-behavior",
-        "reflect": false,
-        "defaultValue": "'dynamic'"
-      },
-      "overflowBehavior": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DetectOverflowOptions",
-          "resolved": "undefined | { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; }",
-          "references": {
-            "DetectOverflowOptions": {
-              "location": "import",
-              "path": "@floating-ui/dom"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The `overflowBehavior` prop can be provided to customize the\npopover's behavior when approaching its boundary. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/detectOverflow#options\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, it will be automatically\nadded to the set of options."
         }
-      },
-      "flipBehavior": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "FlipOptions",
-          "resolved": "undefined | { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; }",
-          "references": {
-            "FlipOptions": {
-              "location": "import",
-              "path": "@floating-ui/dom"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The `flipBehavior` prop can be provided to customize the\npopover's behavior when approaching its boundary. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/flip#options\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, `flip` behavior will\nautomatically be disabled."
+    }
+    getAnchorBoundsVirtualElement() {
+        if (this.anchorBounds != null) {
+            return {
+                getBoundingClientRect: () => {
+                    return DOMRect.fromRect(this.anchorBounds);
+                },
+            };
         }
-      },
-      "offsetBehavior": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "OffsetOptions",
-          "resolved": "((state: { x: number; y: number; initialPlacement: Placement; platform: Platform; placement: Placement; strategy: Strategy; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => OffsetValue) | number | undefined | { mainAxis?: number | undefined; crossAxis?: number | undefined; alignmentAxis?: number | null | undefined; }",
-          "references": {
-            "OffsetOptions": {
-              "location": "import",
-              "path": "@floating-ui/dom"
+    }
+    handleResize() {
+        if (this.resizeTimeout != null) {
+            clearTimeout(this.resizeTimeout);
+        }
+        if (this.open) {
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = undefined;
+                if (this.anchorPosition != null &&
+                    this.viewportWidth != null &&
+                    this.viewportHeight != null) {
+                    const relativeWidth = this.anchorPosition.x / this.viewportWidth;
+                    const relativeHeight = this.anchorPosition.y / this.viewportHeight;
+                    this.position = {
+                        x: this.partialWindow.innerWidth * relativeWidth,
+                        y: this.partialWindow.innerHeight * relativeHeight,
+                    };
+                }
+                this.updateViewport();
+            }, WINDOW_RESIZE_DEBOUNCE_THRESHOLD);
+        }
+    }
+    updateViewport() {
+        this.viewportWidth = this.partialWindow.innerWidth;
+        this.viewportHeight = this.partialWindow.innerHeight;
+    }
+    getOrCreateResizeObserver() {
+        if (this.boundaryResizeObserver == null) {
+            this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
+        }
+        return this.boundaryResizeObserver;
+    }
+    getTransformClass() {
+        if (this.animated) {
+            switch (this.computedPlacement) {
+                case 'top':
+                    return 'center-bottom';
+                case 'top-start':
+                    return 'left-bottom';
+                case 'top-end':
+                    return 'right-bottom';
+                case 'bottom':
+                    return 'center-top';
+                case 'bottom-start':
+                    return 'left-top';
+                case 'bottom-end':
+                    return 'right-top';
+                case 'right':
+                    return 'left-center';
+                case 'right-start':
+                    return 'left-top';
+                case 'right-end':
+                    return 'left-bottom';
+                case 'left':
+                    return 'right-center';
+                case 'left-start':
+                    return 'right-top';
+                case 'left-end':
+                    return 'right-bottom';
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The `offsetBehavior` prop can be provided to customize the\npopover's visual offset from the anchor. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/offset#options\nfor info on what properties can be specified.\n\nIf no offset is specified, a default of 4px will be used\nfor popovers anchored to an element and no offset will be\napplied for popovers anchored to a point."
-        },
-        "attribute": "offset-behavior",
-        "reflect": false
-      },
-      "updateOnResize": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates if the position of the popover should be updated when the\npopover's content size changes."
-        },
-        "attribute": "update-on-resize",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "resizeObserverFactory": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
-          "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
-          "references": {
-            "ResizeObserverEntry": {
-              "location": "global"
+        }
+    }
+    static get is() { return "vertex-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this popover's content is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PopoverPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/popover/popover.tsx",
+                            "id": "src/components/popover/popover.tsx::PopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the popover at the clicked point.\nThis can be any of the following values:\n\n'top', 'top-start', 'top-end',\n'bottom', 'bottom-start', 'bottom-end',\n'right', 'right-start', 'right-end',\n'left', 'left-start', 'left-end', and\ndefaults to 'bottom-start'.\n\nNote: placement will adjust based on the amount\nof available space, so popovers close to screen\nedges may appear in a different location."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Point | string",
+                    "resolved": "Point | string | undefined",
+                    "references": {
+                        "Point": {
+                            "location": "import",
+                            "path": "../../types/point",
+                            "id": "src/types/point.ts::Point",
+                            "referenceLocation": "Point"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the popover anchor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position"
+            },
+            "anchorBounds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>",
+                    "resolved": "\"height\" | \"width\" | \"x\" | \"y\" | DOMRect | undefined",
+                    "references": {
+                        "Pick": {
+                            "location": "global",
+                            "id": "global::Pick"
+                        },
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional DOMRect that represents the virtual location of the\nanchor element. When provided, the popover will position based\non the specified bounds to give a similar behavior to the\n`anchorSelector` or `anchor` slot based popovers without needing\nto provide the element itself."
+                },
+                "getter": false,
+                "setter": false
             },
-            "ResizeObserver": {
-              "location": "global"
+            "backdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a backdrop that dismisses this popover.\nDefaults to true, and is invisible, but can be styled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop",
+                "defaultValue": "true"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this popover should animate its contents it is opened.\nDefaults to false, and the animation can be overridden using\nthe `var(--open-animation)` and `var(--close-animation)` CSS\nvariables. The `transform-origin` will update relative to the\n`position` property provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "anchorSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional selector to retrieve the anchor element.\nIf a selector is not provided, this popover will attempt\nto use HTMLSlotElement.assignedElements() to retrieve\nthe anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-selector"
+            },
+            "boundarySelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional selector for the boundary of this popover.\nIf not specified, this will default to `clippingParents`.\nSee https://popper.js.org/docs/v2/utils/detect-overflow/#boundary\nfor additional details."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "boundary-selector"
+            },
+            "resizeBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverResizeBehavior",
+                    "resolved": "\"dynamic\" | \"fixed\"",
+                    "references": {
+                        "PopoverResizeBehavior": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/popover/popover.tsx",
+                            "id": "src/components/popover/popover.tsx::PopoverResizeBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The behavior that this popover will have when the window\nis resized. Can be either 'dynamic' or 'fixed', and defaults\nto 'dynamic'.\n\n'dynamic' will cause a position-based popover to adjust its\nposition relative to the window resize to keep it in the same\nrelative position.\n'fixed' will keep the popover in the same position even if\nthat means it would disappear off-screen."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize-behavior",
+                "defaultValue": "'dynamic'"
+            },
+            "overflowBehavior": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DetectOverflowOptions",
+                    "resolved": "undefined | { padding?: Padding | undefined; rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; boundary?: Boundary | undefined; }",
+                    "references": {
+                        "DetectOverflowOptions": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::DetectOverflowOptions",
+                            "referenceLocation": "DetectOverflowOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `overflowBehavior` prop can be provided to customize the\npopover's behavior when approaching its boundary. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/detectOverflow#options\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, it will be automatically\nadded to the set of options."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "flipBehavior": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FlipOptions",
+                    "resolved": "undefined | { fallbackPlacements?: Placement[] | undefined; crossAxis?: boolean | \"alignment\" | undefined; mainAxis?: boolean | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; padding?: Padding | undefined; rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; boundary?: Boundary | undefined; }",
+                    "references": {
+                        "FlipOptions": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::FlipOptions",
+                            "referenceLocation": "FlipOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `flipBehavior` prop can be provided to customize the\npopover's behavior when approaching its boundary. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/flip#options\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, `flip` behavior will\nautomatically be disabled."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "offsetBehavior": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "OffsetOptions",
+                    "resolved": "number | undefined | { mainAxis?: number | undefined; crossAxis?: number | undefined; alignmentAxis?: number | null | undefined; }",
+                    "references": {
+                        "OffsetOptions": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::OffsetOptions",
+                            "referenceLocation": "OffsetOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `offsetBehavior` prop can be provided to customize the\npopover's visual offset from the anchor. This maps\nto the behavior used internally with FloatingUI.\nSee https://floating-ui.com/docs/offset#options\nfor info on what properties can be specified.\n\nIf no offset is specified, a default of 4px will be used\nfor popovers anchored to an element and no offset will be\napplied for popovers anchored to a point."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-behavior"
+            },
+            "updateOnResize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the position of the popover should be updated when the\npopover's content size changes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "update-on-resize",
+                "defaultValue": "false"
+            },
+            "resizeObserverFactory": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
+                    "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
+                    "references": {
+                        "ResizeObserverEntry": {
+                            "location": "global",
+                            "id": "global::ResizeObserverEntry"
+                        },
+                        "ResizeObserver": {
+                            "location": "global",
+                            "id": "global::ResizeObserver"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(cb) => new ResizeObserver(cb)"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "defaultValue": "(cb) => new ResizeObserver(cb)"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "opened": {},
-      "computedPlacement": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dismissed",
-        "name": "dismissed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted whenever the popover is dismissed."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "position",
-        "methodName": "updatePosition"
-      }, {
-        "propName": "placement",
-        "methodName": "updatePlacement"
-      }, {
-        "propName": "open",
-        "methodName": "updateOpened"
-      }, {
-        "propName": "animated",
-        "methodName": "updateAnimated"
-      }, {
-        "propName": "boundarySelector",
-        "methodName": "updateMiddleware"
-      }, {
-        "propName": "overflowBehavior",
-        "methodName": "updateMiddleware"
-      }, {
-        "propName": "flipBehavior",
-        "methodName": "updateMiddleware"
-      }, {
-        "propName": "offsetBehavior",
-        "methodName": "updateMiddleware"
-      }, {
-        "propName": "boundarySelector",
-        "methodName": "updateResizeObserver"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "opened": {},
+            "computedPlacement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismissed",
+                "name": "dismissed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the popover is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "position",
+                "methodName": "updatePosition"
+            }, {
+                "propName": "placement",
+                "methodName": "updatePlacement"
+            }, {
+                "propName": "open",
+                "methodName": "updateOpened"
+            }, {
+                "propName": "animated",
+                "methodName": "updateAnimated"
+            }, {
+                "propName": "boundarySelector",
+                "methodName": "updateMiddleware"
+            }, {
+                "propName": "overflowBehavior",
+                "methodName": "updateMiddleware"
+            }, {
+                "propName": "flipBehavior",
+                "methodName": "updateMiddleware"
+            }, {
+                "propName": "offsetBehavior",
+                "methodName": "updateMiddleware"
+            }, {
+                "propName": "boundarySelector",
+                "methodName": "updateResizeObserver"
+            }];
+    }
 }