@vertexvis/ui 0.0.15 → 0.1.0-canary.0

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

@@ -1,14 +1,18 @@
-import { createPopper } from '@popperjs/core';
+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.opened = false;
+    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;
@@ -16,10 +20,12 @@ export class Popover {
     this.resizeBehavior = 'dynamic';
     this.overflowBehavior = undefined;
     this.flipBehavior = undefined;
+    this.offsetBehavior = undefined;
     this.updateOnResize = false;
-    this.popperRendered = false;
-    this.contentResizeObserverFactory = (cb) => new ResizeObserver(cb);
-    this.attemptCreatePopper = this.attemptCreatePopper.bind(this);
+    this.opened = false;
+    this.computedPlacement = this.placement;
+    this.updateListener = this.updateListener.bind(this);
+    this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.setWindow = this.setWindow.bind(this);
   }
@@ -27,45 +33,54 @@ export class Popover {
     this.updatePosition(this.position);
   }
   componentDidUpdate() {
-    this.attemptCreatePopper();
+    if (this.shouldUpdatePosition) {
+      this.shouldUpdatePosition = false;
+      if (this.updateDispose != null) {
+        this.handlePositionUpdate();
+      }
+      else {
+        this.updateListener();
+      }
+    }
   }
   componentDidLoad() {
-    this.contentResizeObserver = this.contentResizeObserverFactory(() => {
-      var _a;
-      if (this.updateOnResize) {
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
-      }
-    });
     this.updateViewport();
-    this.attemptCreatePopper();
+    this.handleMiddlewareChange();
+    this.updateListener();
     if (this.resizeBehavior === 'dynamic') {
       window.addEventListener('resize', this.handleResize);
     }
   }
   disconnectedCallback() {
-    var _a;
     this.viewportWidth = undefined;
     this.viewportHeight = undefined;
     this.opened = false;
     if (this.resizeBehavior === 'dynamic') {
       window.removeEventListener('resize', this.handleResize);
     }
-    (_a = this.contentResizeObserver) === 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;
     }
   }
+  updatePlacement() {
+    this.updatePosition(this.position);
+  }
   updateOpened(open) {
     if (open) {
       this.opened = true;
     }
+    this.updateListener();
   }
   updateAnimated() {
     this.opened = this.open;
   }
+  updateMiddleware() {
+    this.handleMiddlewareChange();
+  }
   /**
    * @private Used for internals or testing.
    */
@@ -81,72 +96,47 @@ export class Popover {
         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 || !this.popperRendered,
+        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()) }, h("slot", null)))));
+      }, this.getTransformClass()), onAnimationEnd: () => {
+        this.opened = this.open;
+      } }, h("slot", null)))));
   }
-  attemptCreatePopper() {
-    var _a, _b;
-    (_a = this.contentResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    if (this.wrapperRef != null) {
-      const anchorSlotElement = this.getSlottedAnchorElement();
-      if (anchorSlotElement != null) {
-        this.createPopper(anchorSlotElement, this.wrapperRef, 'absolute', true);
-      }
-      else if (this.anchorPointRef != null) {
-        this.createPopper(this.anchorPointRef, this.wrapperRef, 'fixed', false);
-      }
-      (_b = this.contentResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.wrapperRef);
+  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);
     }
   }
-  createPopper(anchor, popper, strategy, offset = false) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (this.open) {
-      const boundary = this.boundarySelector != null
-        ? document.querySelector(this.boundarySelector)
-        : undefined;
-      const baseModifiers = [
-        {
-          name: 'computeStyles',
-          options: {
-            gpuAcceleration: false,
-          },
-        },
-        {
-          name: 'preventOverflow',
-          enabled: (_b = (_a = this.overflowBehavior) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true,
-          options: Object.assign({ boundary }, (_c = this.overflowBehavior) === null || _c === void 0 ? void 0 : _c.options),
-        },
-        {
-          name: 'flip',
-          enabled: (_e = (_d = this.flipBehavior) === null || _d === void 0 ? void 0 : _d.enabled) !== null && _e !== void 0 ? _e : boundary == null,
-          options: Object.assign({}, (_f = this.flipBehavior) === null || _f === void 0 ? void 0 : _f.options),
-        },
-      ];
-      (_g = this.popper) === null || _g === void 0 ? void 0 : _g.destroy();
-      this.popper = createPopper(anchor, popper, {
-        placement: this.placement,
-        strategy,
-        modifiers: offset
-          ? [
-            ...baseModifiers,
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 4],
-              },
-            },
-          ]
-          : [...baseModifiers],
-        onFirstUpdate: () => {
-          this.popperRendered = true;
-        },
-      });
+  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;`);
     }
   }
+  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) {
@@ -162,6 +152,15 @@ export class Popover {
       }
     }
   }
+  getAnchorBoundsVirtualElement() {
+    if (this.anchorBounds != null) {
+      return {
+        getBoundingClientRect: () => {
+          return DOMRect.fromRect(this.anchorBounds);
+        },
+      };
+    }
+  }
   handleResize() {
     if (this.resizeTimeout != null) {
       clearTimeout(this.resizeTimeout);
@@ -189,15 +188,12 @@ export class Popover {
   }
   getTransformClass() {
     if (this.animated) {
-      switch (this.placement) {
+      switch (this.computedPlacement) {
         case 'top':
-        case 'auto':
           return 'center-bottom';
         case 'top-start':
-        case 'auto-start':
           return 'left-bottom';
         case 'top-end':
-        case 'auto-end':
           return 'right-bottom';
         case 'bottom':
           return 'center-top';
@@ -257,7 +253,7 @@ export class Popover {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "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"
@@ -268,7 +264,7 @@ export class Popover {
         "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',\n'auto', 'auto-start', or 'auto-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."
+          "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,
@@ -296,6 +292,28 @@ export class Popover {
         "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."
+        }
+      },
       "backdrop": {
         "type": "boolean",
         "mutable": false,
@@ -392,11 +410,12 @@ export class Popover {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "PopoverOverflowBehavior",
-          "resolved": "undefined | { enabled?: boolean | undefined; options?: Partial<Options> | undefined; }",
+          "original": "DetectOverflowOptions",
+          "resolved": "undefined | { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; }",
           "references": {
-            "PopoverOverflowBehavior": {
-              "location": "local"
+            "DetectOverflowOptions": {
+              "location": "import",
+              "path": "@floating-ui/dom"
             }
           }
         },
@@ -404,18 +423,19 @@ export class Popover {
         "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 PopperJS.\nSee https://popper.js.org/docs/v2/modifiers/prevent-overflow\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, it will be automatically\nadded to the set of options."
+          "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": "PopoverFlipBehavior",
-          "resolved": "undefined | { enabled?: boolean | undefined; options?: Partial<Options> | undefined; }",
+          "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": {
-            "PopoverFlipBehavior": {
-              "location": "local"
+            "FlipOptions": {
+              "location": "import",
+              "path": "@floating-ui/dom"
             }
           }
         },
@@ -423,9 +443,31 @@ export class Popover {
         "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 PopperJS.\nSee https://popper.js.org/docs/v2/modifiers/flip\nfor info on what properties can be specified.\n\nIf a `boundarySelector` is provided, `flip` behavior will\nautomatically be disabled."
+          "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."
         }
       },
+      "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"
+            }
+          }
+        },
+        "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,
@@ -443,38 +485,13 @@ export class Popover {
         "attribute": "update-on-resize",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "contentResizeObserverFactory": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
-          "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
-          "references": {
-            "ResizeObserverEntry": {
-              "location": "global"
-            },
-            "ResizeObserver": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "defaultValue": "(cb) => new ResizeObserver(cb)"
       }
     };
   }
   static get states() {
     return {
-      "popperRendered": {}
+      "opened": {},
+      "computedPlacement": {}
     };
   }
   static get events() {
@@ -500,12 +517,27 @@ export class Popover {
     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"
       }];
   }
 }

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

@@ -0,0 +1,9 @@
+import { computePosition, } from '@floating-ui/dom';
+export async function computeUpdatedPosition(referenceElement, contentElement, placement, middleware) {
+  const position = await computePosition(referenceElement, contentElement, {
+    placement,
+    middleware,
+    strategy: 'fixed',
+  });
+  return position;
+}

package/dist/collection/components/result-list/result-list.js

@@ -294,7 +294,7 @@ export class ResultList {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "PopoverPlacement": {
               "location": "import",

package/dist/collection/components/search-bar/search-bar.js

@@ -396,7 +396,7 @@ export class SearchBar {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "PopoverPlacement": {
               "location": "import",

package/dist/collection/components/tooltip/tooltip.css

@@ -23,6 +23,10 @@
   display: flex;
 }
 
+.content-hidden {
+  display: none;
+}
+
 .tooltip {
   display: flex;
   justify-content: center;

package/dist/collection/components/tooltip/tooltip.js

@@ -1,5 +1,8 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import { UUID } from '@vertexvis/utils';
 import classNames from 'classnames';
+import { getBoundingClientRect } from '../../util/components/dom';
+import { getSlottedContent } from '../../util/components/slots';
 const TOOLTIP_OPEN_DELAY = 500;
 export class Tooltip {
   constructor() {
@@ -11,21 +14,73 @@ export class Tooltip {
     this.open = false;
     this.handlePointerEnter = this.handlePointerEnter.bind(this);
     this.handlePointerLeave = this.handlePointerLeave.bind(this);
+    this.tooltipId = `vertex-tooltip-${UUID.create()}`;
+  }
+  disconnectedCallback() {
+    this.removeElement();
+    this.clearOpenTimeout();
   }
   render() {
+    return (h(Host, null, h("div", { class: "target", ref: (el) => {
+        this.targetElement = el;
+      }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
+        this.contentElement = el;
+      } }, h("slot", { name: "content" }))));
+  }
+  addElement() {
     var _a;
-    return (h("vertex-popover", { class: "popover", open: this.open, resizeBehavior: "fixed", backdrop: false, placement: this.placement, animated: this.animated }, h("div", { slot: "anchor", class: "target", onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: classNames('tooltip', { hidden: !this.open || this.disabled }) }, (_a = this.content) !== null && _a !== void 0 ? _a : h("slot", { name: "content" }))));
+    if (this.targetElement != null) {
+      const popover = this.createPopoverElement(this.targetElement);
+      const content = this.createContentElement();
+      this.displayedSlottedContent =
+        (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+      if (this.content != null) {
+        content.innerText = this.content;
+      }
+      else if (this.displayedSlottedContent != null) {
+        content.appendChild(this.displayedSlottedContent);
+      }
+      popover.appendChild(content);
+      this.hostElement.ownerDocument.body.appendChild(popover);
+    }
+  }
+  removeElement() {
+    const popover = this.hostElement.ownerDocument.getElementById(this.tooltipId);
+    if (popover != null) {
+      popover.remove();
+    }
+  }
+  createPopoverElement(anchorElement) {
+    const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
+    popover.id = this.tooltipId;
+    popover.setAttribute('class', 'vertex-tooltip-popover');
+    popover.open = this.open;
+    popover.resizeBehavior = 'fixed';
+    popover.backdrop = false;
+    popover.placement = this.placement;
+    popover.animated = this.animated;
+    popover.anchorBounds = getBoundingClientRect(anchorElement);
+    return popover;
+  }
+  createContentElement() {
+    const content = this.hostElement.ownerDocument.createElement('div');
+    content.setAttribute('class', classNames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+    return content;
   }
   handlePointerEnter() {
-    if (this.openTimeout == null) {
+    if (this.openTimeout == null && !this.disabled) {
       this.openTimeout = setTimeout(() => {
         this.open = true;
         this.openTimeout = undefined;
+        this.addElement();
       }, this.delay);
     }
   }
   handlePointerLeave() {
     this.clearOpenTimeout();
+    this.removeElement();
     this.open = false;
   }
   clearOpenTimeout() {
@@ -87,7 +142,7 @@ export class Tooltip {
         "mutable": false,
         "complexType": {
           "original": "PopoverPlacement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
             "PopoverPlacement": {
               "location": "import",
@@ -148,4 +203,5 @@ export class Tooltip {
       "open": {}
     };
   }
+  static get elementRef() { return "hostElement"; }
 }

package/dist/collection/util/components/dom.js

@@ -0,0 +1,10 @@
+import { readTask } from '@stencil/core';
+export function readDOM(callback) {
+  readTask(callback);
+}
+export function getBoundingClientRect(el) {
+  return el.getBoundingClientRect();
+}
+export function getComputedStyle(el) {
+  return window.getComputedStyle(el);
+}

package/dist/collection/util/components/slots.js

@@ -10,3 +10,15 @@ export function getFirstSlottedElement({ hostElement, slotName, selector, }) {
     }
   }
 }
+export function getSlottedContent(slotOrParentElement) {
+  const slot = isSlotElement(slotOrParentElement)
+    ? slotOrParentElement
+    : slotOrParentElement === null || slotOrParentElement === void 0 ? void 0 : slotOrParentElement.querySelector('slot');
+  if (slot != null) {
+    return slot.assignedElements()[0];
+  }
+  return undefined;
+}
+function isSlotElement(element) {
+  return (element === null || element === void 0 ? void 0 : element.tagName) === 'SLOT';
+}

package/dist/components/components.css

@@ -1,2 +1,2 @@
-.sc-vertex-textfield-h{display:block}.txt-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);line-height:1.4}.txt-slot{padding-bottom:1px}.txt{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);line-height:1.4;text-overflow:ellipsis}.txt-textarea{overflow:hidden;outline:none;box-shadow:none;resize:none}.txt:focus{outline:none}@keyframes onAutoFillStart{from{}to{}}@keyframes onAutoFillCancel{from{}to{}}.txt:-webkit-autofill{animation-name:onAutoFillStart}.txt:not(.txt:-webkit-autofill){animation-name:onAutoFillCancel}.txt-standard{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.txt-standard .txt::placeholder{color:var(--vertex-ui-neutral-500)}.txt-standard:hover:not(.disabled),.txt-standard:focus{border-color:var(--vertex-ui-neutral-500)}.txt-standard.disabled{border-color:var(--vertex-ui-neutral-200)}.txt-standard.disabled,.txt-standard.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-blank{color:var(--vertex-ui-neutral-800)}.txt-blank:not(:hover) .txt:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.txt-blank .txt::placeholder{color:var(--vertex-ui-neutral-500)}.txt-blank:hover:not(.disabled) .txt{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.txt-filled{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.txt-filled.disabled,.txt-filled.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-filled .txt::placeholder{color:var(--vertex-ui-neutral-700)}.txt-filled:hover:not(.disabled),.txt-filled:focus{border-bottom-color:var(--vertex-ui-blue-600)}.txt-filled.disabled{border-color:var(--vertex-ui-neutral-100)}.txt-filled.disabled,.txt-filled.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.txt-underlined.disabled,.txt-underlined.disabled::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined::placeholder{color:var(--vertex-ui-neutral-700)}.txt-underlined:hover:not(.disabled),.txt-underlined:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.txt-underlined.disabled{border-bottom-color:var(--vertex-ui-neutral-200)}.txt-underlined.disabled,.txt-underlined.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined.has-error{border-bottom-color:var(--vertex-ui-red-600)}.txt-filled.has-error,.txt-blank.has-error,.txt-standard.has-error{border-color:var(--vertex-ui-red-600)}.txt-size-standard{font-size:var(--vertex-ui-text-base)}.txt-size-sm{font-size:var(--vertex-ui-text-sm)}.txt-size-md{font-size:var(--vertex-ui-text-md)}.txt-size-lg{font-size:var(--vertex-ui-text-lg)}.txt-size-xl{font-size:var(--vertex-ui-text-xl)}.txt-size-xxl{font-size:var(--vertex-ui-text-xxl)}.click-to-edit{display:flex;flex-direction:row}.click-to-edit-text{width:100%}.icon-visibility{display:none}.click-to-edit:not(.disabled):hover .icon-visibility{display:block}.click-to-edit-icon-wrapper{display:flex;align-items:center;flex-shrink:0;vertical-align:middle;margin-left:5px}.hover-icon slot::slotted(*){height:1rem;width:1rem;padding-left:0.5rem}.click-to-edit-button{border-radius:4px;background-color:var(--neutral-200);color:var(--green-700)}.click-to-edit-button:hover{background-color:var(--neutral-300);color:var(--green-800)}:root{--vertex-ui-white:#ffffff;--vertex-ui-black:#000000}:root{--vertex-ui-neutral-050:#fafafa;--vertex-ui-neutral-100:#f5f5f5;--vertex-ui-neutral-200:#eeeeee;--vertex-ui-neutral-300:#e0e0e0;--vertex-ui-neutral-400:#bdbdbd;--vertex-ui-neutral-500:#9e9e9e;--vertex-ui-neutral-600:#757575;--vertex-ui-neutral-700:#616161;--vertex-ui-neutral-800:#444444;--vertex-ui-neutral-900:#212121}:root{--vertex-ui-red-050:#fff7f7;--vertex-ui-red-100:#ffefef;--vertex-ui-red-200:#ffe0e0;--vertex-ui-red-300:#ffb3b3;--vertex-ui-red-400:#ff4d4d;--vertex-ui-red-500:#ff0000;--vertex-ui-red-600:#eb0000;--vertex-ui-red-700:#d90000;--vertex-ui-red-800:#c40000;--vertex-ui-red-900:#990000}:root{--vertex-ui-orange-050:#fffcf7;--vertex-ui-orange-100:#fff9ef;--vertex-ui-orange-200:#fff3e0;--vertex-ui-orange-300:#ffe0b3;--vertex-ui-orange-400:#ffb84d;--vertex-ui-orange-500:#ff9900;--vertex-ui-orange-600:#ff8400;--vertex-ui-orange-700:#ff7300;--vertex-ui-orange-800:#e05d00;--vertex-ui-orange-900:#993b00}:root{--vertex-ui-yellow-050:#fffef7;--vertex-ui-yellow-100:#fffdef;--vertex-ui-yellow-200:#fffbe0;--vertex-ui-yellow-300:#fff5b3;--vertex-ui-yellow-400:#ffee6e;--vertex-ui-yellow-500:#ffe600;--vertex-ui-yellow-600:#ffd300;--vertex-ui-yellow-700:#ffc500;--vertex-ui-yellow-800:#cc8f00;--vertex-ui-yellow-900:#995c00}:root{--vertex-ui-green-050:#f7fdf7;--vertex-ui-green-100:#effcef;--vertex-ui-green-200:#e0f9e0;--vertex-ui-green-300:#b3f0b3;--vertex-ui-green-400:#4ddb4d;--vertex-ui-green-500:#00cc00;--vertex-ui-green-600:#00c000;--vertex-ui-green-700:#00ad00;--vertex-ui-green-800:#008000;--vertex-ui-green-900:#004d00}:root{--vertex-ui-teal-050:#f8fdfc;--vertex-ui-teal-100:#f1fbfa;--vertex-ui-teal-200:#e4f7f5;--vertex-ui-teal-300:#bcece7;--vertex-ui-teal-400:#62d2c7;--vertex-ui-teal-500:#1fbeaf;--vertex-ui-teal-600:#17af9f;--vertex-ui-teal-700:#0a9986;--vertex-ui-teal-800:#07705f;--vertex-ui-teal-900:#054d43}:root{--vertex-ui-blue-050:#f7fcfd;--vertex-ui-blue-100:#eff9fc;--vertex-ui-blue-200:#e0f3f9;--vertex-ui-blue-300:#b3e0f0;--vertex-ui-blue-400:#4db8db;--vertex-ui-blue-500:#0099cc;--vertex-ui-blue-600:#0086c0;--vertex-ui-blue-700:#006bad;--vertex-ui-blue-800:#004f80;--vertex-ui-blue-900:#002f4d}:root{--vertex-ui-purple-050:#fdf9fc;--vertex-ui-purple-100:#faf2f8;--vertex-ui-purple-200:#f6e6f2;--vertex-ui-purple-300:#e9c2e0;--vertex-ui-purple-400:#cb70b6;--vertex-ui-purple-500:#b43296;--vertex-ui-purple-600:#a42683;--vertex-ui-purple-700:#8c1368;--vertex-ui-purple-800:#66124b;--vertex-ui-purple-900:#4d0b39}:root{--vertex-ui-text-t:0.5625rem;--vertex-ui-text-xxs:0.625rem;--vertex-ui-text-xs:0.75rem;--vertex-ui-text-sm:0.8125rem;--vertex-ui-text-base:0.875rem;--vertex-ui-text-md:0.9375rem;--vertex-ui-text-lg:1rem;--vertex-ui-text-xl:1.125rem;--vertex-ui-text-xxl:1.25rem}:root{--vertex-ui-font-weight-light:300;--vertex-ui-font-weight-base:400;--vertex-ui-font-weight-medium:500;--vertex-ui-font-weight-bold:700}:root{--vertex-ui-font-family:'Roboto', 'Helvetica Neue', Helvetica, sans-serif}:root{--vertex-ui-popover-layer:2000;--vertex-ui-context-menu-layer:11000;--vertex-ui-dialog-layer:15000}:root{--vertex-ui-overlay-shadow:-1px 0 2px rgba(0, 0, 0, 0.12),
+.sc-vertex-textfield-h{display:block}.txt-wrapper{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);line-height:1.4}.txt-slot{padding-bottom:1px}.txt{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);line-height:1.4;text-overflow:ellipsis}.txt-textarea{overflow:hidden;outline:none;box-shadow:none;resize:none}.txt:focus{outline:none}@keyframes onAutoFillStart{from{}to{}}@keyframes onAutoFillCancel{from{}to{}}.txt:-webkit-autofill{animation-name:onAutoFillStart}.txt:not(.txt:-webkit-autofill){animation-name:onAutoFillCancel}.txt-standard{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.txt-standard .txt::placeholder{color:var(--vertex-ui-neutral-500)}.txt-standard:hover:not(.disabled),.txt-standard:focus{border-color:var(--vertex-ui-neutral-500)}.txt-standard.disabled{border-color:var(--vertex-ui-neutral-200)}.txt-standard.disabled,.txt-standard.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-blank{color:var(--vertex-ui-neutral-800)}.txt-blank:not(:hover) .txt:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.txt-blank .txt::placeholder{color:var(--vertex-ui-neutral-500)}.txt-blank:hover:not(.disabled) .txt{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.txt-filled{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.txt-filled.disabled,.txt-filled.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-filled .txt::placeholder{color:var(--vertex-ui-neutral-700)}.txt-filled:hover:not(.disabled),.txt-filled:focus{border-bottom-color:var(--vertex-ui-blue-600)}.txt-filled.disabled{border-color:var(--vertex-ui-neutral-100)}.txt-filled.disabled,.txt-filled.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.txt-underlined.disabled,.txt-underlined.disabled::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined::placeholder{color:var(--vertex-ui-neutral-700)}.txt-underlined:hover:not(.disabled),.txt-underlined:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.txt-underlined.disabled{border-bottom-color:var(--vertex-ui-neutral-200)}.txt-underlined.disabled,.txt-underlined.disabled .txt::placeholder{color:var(--vertex-ui-neutral-400)}.txt-underlined.has-error{border-bottom-color:var(--vertex-ui-red-600)}.txt-filled.has-error,.txt-blank.has-error,.txt-standard.has-error{border-color:var(--vertex-ui-red-600)}.txt-size-standard{font-size:var(--vertex-ui-text-base)}.txt-size-sm{font-size:var(--vertex-ui-text-sm)}.txt-size-md{font-size:var(--vertex-ui-text-md)}.txt-size-lg{font-size:var(--vertex-ui-text-lg)}.txt-size-xl{font-size:var(--vertex-ui-text-xl)}.txt-size-xxl{font-size:var(--vertex-ui-text-xxl)}.click-to-edit{display:flex;flex-direction:row}.click-to-edit-text{width:100%}.icon-visibility{display:none}.click-to-edit:not(.disabled):hover .icon-visibility{display:block}.click-to-edit-icon-wrapper{display:flex;align-items:center;flex-shrink:0;vertical-align:middle;margin-left:5px}.hover-icon slot::slotted(*){height:1rem;width:1rem;padding-left:0.5rem}.click-to-edit-button{border-radius:4px;background-color:var(--neutral-200);color:var(--green-700)}.click-to-edit-button:hover{background-color:var(--neutral-300);color:var(--green-800)}vertex-tooltip:not(.hydrated){display:none}.vertex-tooltip-popover{width:100%;height:100%}.vertex-tooltip-content{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}:root{--vertex-ui-white:#ffffff;--vertex-ui-black:#000000}:root{--vertex-ui-neutral-050:#fafafa;--vertex-ui-neutral-100:#f5f5f5;--vertex-ui-neutral-200:#eeeeee;--vertex-ui-neutral-300:#e0e0e0;--vertex-ui-neutral-400:#bdbdbd;--vertex-ui-neutral-500:#9e9e9e;--vertex-ui-neutral-600:#757575;--vertex-ui-neutral-700:#616161;--vertex-ui-neutral-800:#444444;--vertex-ui-neutral-900:#212121}:root{--vertex-ui-red-050:#fff7f7;--vertex-ui-red-100:#ffefef;--vertex-ui-red-200:#ffe0e0;--vertex-ui-red-300:#ffb3b3;--vertex-ui-red-400:#ff4d4d;--vertex-ui-red-500:#ff0000;--vertex-ui-red-600:#eb0000;--vertex-ui-red-700:#d90000;--vertex-ui-red-800:#c40000;--vertex-ui-red-900:#990000}:root{--vertex-ui-orange-050:#fffcf7;--vertex-ui-orange-100:#fff9ef;--vertex-ui-orange-200:#fff3e0;--vertex-ui-orange-300:#ffe0b3;--vertex-ui-orange-400:#ffb84d;--vertex-ui-orange-500:#ff9900;--vertex-ui-orange-600:#ff8400;--vertex-ui-orange-700:#ff7300;--vertex-ui-orange-800:#e05d00;--vertex-ui-orange-900:#993b00}:root{--vertex-ui-yellow-050:#fffef7;--vertex-ui-yellow-100:#fffdef;--vertex-ui-yellow-200:#fffbe0;--vertex-ui-yellow-300:#fff5b3;--vertex-ui-yellow-400:#ffee6e;--vertex-ui-yellow-500:#ffe600;--vertex-ui-yellow-600:#ffd300;--vertex-ui-yellow-700:#ffc500;--vertex-ui-yellow-800:#cc8f00;--vertex-ui-yellow-900:#995c00}:root{--vertex-ui-green-050:#f7fdf7;--vertex-ui-green-100:#effcef;--vertex-ui-green-200:#e0f9e0;--vertex-ui-green-300:#b3f0b3;--vertex-ui-green-400:#4ddb4d;--vertex-ui-green-500:#00cc00;--vertex-ui-green-600:#00c000;--vertex-ui-green-700:#00ad00;--vertex-ui-green-800:#008000;--vertex-ui-green-900:#004d00}:root{--vertex-ui-teal-050:#f8fdfc;--vertex-ui-teal-100:#f1fbfa;--vertex-ui-teal-200:#e4f7f5;--vertex-ui-teal-300:#bcece7;--vertex-ui-teal-400:#62d2c7;--vertex-ui-teal-500:#1fbeaf;--vertex-ui-teal-600:#17af9f;--vertex-ui-teal-700:#0a9986;--vertex-ui-teal-800:#07705f;--vertex-ui-teal-900:#054d43}:root{--vertex-ui-blue-050:#f7fcfd;--vertex-ui-blue-100:#eff9fc;--vertex-ui-blue-200:#e0f3f9;--vertex-ui-blue-300:#b3e0f0;--vertex-ui-blue-400:#4db8db;--vertex-ui-blue-500:#0099cc;--vertex-ui-blue-600:#0086c0;--vertex-ui-blue-700:#006bad;--vertex-ui-blue-800:#004f80;--vertex-ui-blue-900:#002f4d}:root{--vertex-ui-purple-050:#fdf9fc;--vertex-ui-purple-100:#faf2f8;--vertex-ui-purple-200:#f6e6f2;--vertex-ui-purple-300:#e9c2e0;--vertex-ui-purple-400:#cb70b6;--vertex-ui-purple-500:#b43296;--vertex-ui-purple-600:#a42683;--vertex-ui-purple-700:#8c1368;--vertex-ui-purple-800:#66124b;--vertex-ui-purple-900:#4d0b39}:root{--vertex-ui-text-t:0.5625rem;--vertex-ui-text-xxs:0.625rem;--vertex-ui-text-xs:0.75rem;--vertex-ui-text-sm:0.8125rem;--vertex-ui-text-base:0.875rem;--vertex-ui-text-md:0.9375rem;--vertex-ui-text-lg:1rem;--vertex-ui-text-xl:1.125rem;--vertex-ui-text-xxl:1.25rem}:root{--vertex-ui-font-weight-light:300;--vertex-ui-font-weight-base:400;--vertex-ui-font-weight-medium:500;--vertex-ui-font-weight-bold:700}:root{--vertex-ui-font-family:'Roboto', 'Helvetica Neue', Helvetica, sans-serif}:root{--vertex-ui-popover-layer:2000;--vertex-ui-context-menu-layer:11000;--vertex-ui-dialog-layer:15000}:root{--vertex-ui-overlay-shadow:-1px 0 2px rgba(0, 0, 0, 0.12),
     1px 0 2px rgba(0, 0, 0, 0.13)}@media (min-width: 812px){:root{--vertex-ui-min-dialog-width:700px;--vertex-ui-min-dialog-height:500px}}