@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.1

package/dist/components/vertex-resizable.js

@@ -0,0 +1,445 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, readTask } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const resizableCss = ":host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=\"\"])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}";
+
+const WINDOW_RESIZE_DEBOUNCE_THRESHOLD = 200;
+const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.resizeStart = createEvent(this, "resizeStart", 7);
+    this.resizeEnd = createEvent(this, "resizeEnd", 7);
+    this.containerTop = 0;
+    this.containerLeft = 0;
+    this.horizontalDirection = 'both';
+    this.verticalDirection = 'both';
+    this.initialHorizontalScale = undefined;
+    this.initialVerticalScale = undefined;
+    this.initializeWithOffset = false;
+    this.parentSelector = undefined;
+    this.verticalSiblingSelector = undefined;
+    this.horizontalSiblingSelector = undefined;
+    this.contentSelector = undefined;
+    this.position = 'relative';
+    this.dimensionsComputed = false;
+    this.width = -1;
+    this.minWidth = undefined;
+    this.maxWidth = undefined;
+    this.height = -1;
+    this.minHeight = undefined;
+    this.maxHeight = undefined;
+    this.left = 0;
+    this.top = 0;
+    this.hoveredLocation = undefined;
+    this.dragStartLocation = undefined;
+    this.handleDrag = this.handleDrag.bind(this);
+    this.handleDragBottom = this.handleDragBottom.bind(this);
+    this.handleDragTop = this.handleDragTop.bind(this);
+    this.handleDragLeft = this.handleDragLeft.bind(this);
+    this.handleDragRight = this.handleDragRight.bind(this);
+    this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
+    this.recomputeDimensions = this.recomputeDimensions.bind(this);
+    this.mutationObserver = new MutationObserver(this.recomputeDimensions);
+    this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
+  }
+  componentDidLoad() {
+    this.computeDimensions();
+    window.addEventListener('resize', this.recomputeDimensions);
+    this.mutationObserver.observe(this.hostElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    if (this.parentSelector != null) {
+      const parent = document.querySelector(this.parentSelector);
+      if (parent != null) {
+        this.resizeObserver.observe(parent);
+      }
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
+  disconnectedCallback() {
+    this.dimensionsComputed = false;
+    window.removeEventListener('resize', this.recomputeDimensions);
+    this.mutationObserver.disconnect();
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    const width = this.width < 0 || this.horizontalDirection === 'none'
+      ? '100%'
+      : `${this.width}px`;
+    const height = this.height < 0 || this.verticalDirection === 'none'
+      ? '100%'
+      : `${this.height}px`;
+    return (h(Host, { style: {
+        width,
+        height,
+        left: this.position === 'relative' ? `${this.left}px` : undefined,
+        top: this.position === 'relative' ? `${this.top}px` : undefined,
+      } }, h("div", { class: classnames('container', {
+        hidden: this.width <= 0 && this.height <= 0,
+      }) }, h("div", { class: classnames('shadow', `hovered-location-${this.dragStartLocation || this.hoveredLocation}`) }), h("div", { class: classnames('handle', 'left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'left'), onPointerEnter: () => this.handlePointerEnter('left'), onPointerLeave: () => this.handlePointerLeave('left') }), h("div", { class: classnames('handle', 'right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'right'), onPointerEnter: () => this.handlePointerEnter('right'), onPointerLeave: () => this.handlePointerLeave('right') }), h("div", { class: classnames('handle', 'top-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top'), onPointerEnter: () => this.handlePointerEnter('top'), onPointerLeave: () => this.handlePointerLeave('top') }), h("div", { class: classnames('handle', 'bottom-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom'), onPointerEnter: () => this.handlePointerEnter('bottom'), onPointerLeave: () => this.handlePointerLeave('bottom') }), h("div", { class: classnames('handle', 'bottom-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-right'), onPointerEnter: () => this.handlePointerEnter('bottom-right'), onPointerLeave: () => this.handlePointerLeave('bottom-right') }), h("div", { class: classnames('handle', 'bottom-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-left'), onPointerEnter: () => this.handlePointerEnter('bottom-left'), onPointerLeave: () => this.handlePointerLeave('bottom-left') }), h("div", { class: classnames('handle', 'top-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-right'), onPointerEnter: () => this.handlePointerEnter('top-right'), onPointerLeave: () => this.handlePointerLeave('top-right') }), h("div", { class: classnames('handle', 'top-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-left'), onPointerEnter: () => this.handlePointerEnter('top-left'), onPointerLeave: () => this.handlePointerLeave('top-left') }), h("slot", null))));
+  }
+  /**
+   * @private
+   *
+   * Used for internals or testing.
+   */
+  async updateDimensions(bounds, isRecompute = false) {
+    var _a, _b;
+    const { host, slotted, parent, minWidth, maxWidth, minHeight, maxHeight } = bounds;
+    // Calculate the horizontal bounds of the component, where baseMaxWidth is the
+    // maximum width of the container and this.maxWidth is the maximum width of the
+    // component when taking siblings into account
+    const baseMaxWidth = this.fromComputedStyle(maxWidth, (parent === null || parent === void 0 ? void 0 : parent.width) || host.width || slotted.width);
+    this.maxWidth =
+      baseMaxWidth != null
+        ? baseMaxWidth -
+          this.getSiblingMinWidth((parent === null || parent === void 0 ? void 0 : parent.width) || host.width || slotted.width)
+        : undefined;
+    this.minWidth = this.fromComputedStyle(minWidth, (parent === null || parent === void 0 ? void 0 : parent.width) || host.width || slotted.width);
+    // Calculate the vertical bounds of the component, where baseMaxHeight is the
+    // maximum height of the container and this.maxHeight is the maximum height of
+    // the component when taking siblings into account
+    const baseMaxHeight = this.fromComputedStyle(maxHeight, (parent === null || parent === void 0 ? void 0 : parent.height) || host.height || slotted.height);
+    this.maxHeight =
+      baseMaxHeight != null
+        ? baseMaxHeight -
+          this.getSiblingMinHeight((parent === null || parent === void 0 ? void 0 : parent.height) || host.height || slotted.height)
+        : undefined;
+    this.minHeight = this.fromComputedStyle(minHeight, (parent === null || parent === void 0 ? void 0 : parent.height) || host.height || slotted.height);
+    // Initialize the component's height and width if it was previously hidden
+    if (!isRecompute || this.height <= 0) {
+      const initialWidth = this.maxWidth != null && this.initialHorizontalScale != null
+        ? this.maxWidth * this.initialHorizontalScale
+        : this.minWidth;
+      const initialHeight = this.maxHeight != null && this.initialVerticalScale != null
+        ? this.maxHeight * this.initialVerticalScale
+        : this.minHeight;
+      this.width = initialWidth || slotted.width || this.width;
+      this.height = initialHeight || slotted.height || this.height;
+    }
+    else {
+      this.height = this.toBoundedValue(this.height, this.minHeight || 0, this.maxHeight);
+      this.width = this.toBoundedValue(this.width, this.minWidth || 0, this.maxWidth);
+    }
+    this.containerTop = (_a = parent === null || parent === void 0 ? void 0 : parent.top) !== null && _a !== void 0 ? _a : host.top;
+    this.containerLeft = (_b = parent === null || parent === void 0 ? void 0 : parent.left) !== null && _b !== void 0 ? _b : host.left;
+    // this.left and this.top are only used internally, and in the case of absolute positioning, we only update
+    // the width/height, so we want to reset left & top to 0 to take into consideration the difference between
+    // it's parent container to the left/top position.
+    this.top =
+      baseMaxHeight != null &&
+        this.initializeWithOffset &&
+        this.position !== 'absolute'
+        ? baseMaxHeight - this.height
+        : 0;
+    this.left =
+      baseMaxWidth != null &&
+        this.initializeWithOffset &&
+        this.position !== 'absolute'
+        ? baseMaxWidth - this.width
+        : 0;
+  }
+  computeDimensions() {
+    readTask(() => {
+      var _a;
+      const slotted = this.getSlottedElement();
+      if (typeof window !== 'undefined' && slotted != null) {
+        const computedStyles = window.getComputedStyle(this.hostElement);
+        this.updateDimensions({
+          host: this.hostElement.getBoundingClientRect(),
+          slotted: slotted.getBoundingClientRect(),
+          parent: this.parentSelector != null
+            ? (_a = document
+              .querySelector(this.parentSelector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()
+            : undefined,
+          minWidth: computedStyles.minWidth,
+          maxWidth: computedStyles.maxWidth,
+          minHeight: computedStyles.minHeight,
+          maxHeight: computedStyles.maxHeight,
+        });
+        this.dimensionsComputed = true;
+      }
+    });
+  }
+  recomputeDimensions() {
+    if (this.resizeTimeout != null) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = undefined;
+    }
+    this.resizeTimeout = setTimeout(() => {
+      this.resizeTimeout = undefined;
+      readTask(() => {
+        var _a;
+        const slotted = this.getSlottedElement();
+        if (typeof window !== 'undefined' && slotted != null) {
+          const computedStyles = window.getComputedStyle(this.hostElement);
+          this.updateDimensions({
+            host: this.hostElement.getBoundingClientRect(),
+            slotted: slotted.getBoundingClientRect(),
+            parent: this.parentSelector != null
+              ? (_a = document
+                .querySelector(this.parentSelector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()
+              : undefined,
+            minWidth: computedStyles.minWidth,
+            maxWidth: computedStyles.maxWidth,
+            minHeight: computedStyles.minHeight,
+            maxHeight: computedStyles.maxHeight,
+          }, true);
+        }
+      });
+    }, WINDOW_RESIZE_DEBOUNCE_THRESHOLD);
+  }
+  handlePointerEnter(location) {
+    this.hoveredLocation = location;
+  }
+  handlePointerLeave(location) {
+    if (location === this.hoveredLocation) {
+      this.hoveredLocation = undefined;
+    }
+  }
+  handlePointerDown(e, location) {
+    this.setStartPosition(e, location);
+    this.emitResizeStart(location);
+    window.addEventListener('pointermove', this.handleDrag);
+    window.addEventListener('pointerup', this.handleWindowPointerUp);
+  }
+  handleDrag(e) {
+    if (this.lastPointerPosition != null) {
+      const difference = {
+        x: this.lastPointerPosition.x - e.clientX,
+        y: this.lastPointerPosition.y - e.clientY,
+      };
+      this.lastPointerPosition = { x: e.clientX, y: e.clientY };
+      switch (this.dragStartLocation) {
+        case 'bottom':
+          this.ifValidDragBottom(e, difference, this.handleDragBottom);
+          break;
+        case 'top':
+          this.ifValidDragTop(e, difference, this.handleDragTop);
+          break;
+        case 'right':
+          this.ifValidDragRight(e, difference, this.handleDragRight);
+          break;
+        case 'left':
+          this.ifValidDragLeft(e, difference, this.handleDragLeft);
+          break;
+        case 'bottom-right':
+          this.ifValidDragBottom(e, difference, this.handleDragBottom);
+          this.ifValidDragRight(e, difference, this.handleDragRight);
+          break;
+        case 'bottom-left':
+          this.ifValidDragBottom(e, difference, this.handleDragBottom);
+          this.ifValidDragLeft(e, difference, this.handleDragLeft);
+          break;
+        case 'top-right':
+          this.ifValidDragTop(e, difference, this.handleDragTop);
+          this.ifValidDragRight(e, difference, this.handleDragRight);
+          break;
+        case 'top-left':
+          this.ifValidDragTop(e, difference, this.handleDragTop);
+          this.ifValidDragLeft(e, difference, this.handleDragLeft);
+          break;
+      }
+    }
+  }
+  handleWindowPointerUp() {
+    if (this.dragStartLocation != null) {
+      this.emitResizeEnd(this.dragStartLocation);
+    }
+    this.lastPointerPosition = undefined;
+    this.dragStartLocation = undefined;
+    window.removeEventListener('pointermove', this.handleDrag);
+    window.removeEventListener('pointerup', this.handleWindowPointerUp);
+  }
+  ifValidDragTop(e, difference, fn) {
+    const isReducingSize = difference.y < 0;
+    const isValid = isReducingSize
+      ? e.clientY - this.containerTop > this.top
+      : e.clientY - this.containerTop <= this.top;
+    if (isValid) {
+      fn(difference);
+    }
+  }
+  ifValidDragBottom(e, difference, fn) {
+    const isReducingSize = difference.y > 0;
+    const isValid = isReducingSize
+      ? e.clientY < this.top + this.containerTop + this.height
+      : e.clientY >= this.top + this.containerTop + this.height;
+    if (isValid) {
+      fn(difference);
+    }
+  }
+  ifValidDragLeft(e, difference, fn) {
+    const isReducingSize = difference.x < 0;
+    const isValid = isReducingSize
+      ? e.clientX - this.containerLeft > this.left
+      : e.clientX - this.containerLeft <= this.left;
+    if (isValid) {
+      fn(difference);
+    }
+  }
+  ifValidDragRight(e, difference, fn) {
+    const isReducingSize = difference.x > 0;
+    const isValid = isReducingSize
+      ? e.clientX < this.left + this.containerLeft + this.width
+      : e.clientX >= this.left + this.containerLeft + this.width;
+    if (isValid) {
+      fn(difference);
+    }
+  }
+  handleDragTop(difference) {
+    const initialHeight = this.height;
+    this.height = this.toBoundedValue(this.height + difference.y, this.minHeight || 0, this.maxHeight);
+    const heightDifference = this.height - initialHeight;
+    this.top -= heightDifference;
+  }
+  handleDragBottom(difference) {
+    this.height = this.toBoundedValue(this.height - difference.y, this.minHeight || 0, this.maxHeight);
+  }
+  handleDragLeft(difference) {
+    const initialWidth = this.width;
+    this.width = this.toBoundedValue(this.width + difference.x, this.minWidth || 0, this.maxWidth);
+    const widthDifference = this.width - initialWidth;
+    this.left -= widthDifference;
+  }
+  handleDragRight(difference) {
+    this.width = this.toBoundedValue(this.width - difference.x, this.minWidth || 0, this.maxWidth);
+  }
+  setStartPosition(e, location) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.lastPointerPosition = { x: e.clientX, y: e.clientY };
+    this.dragStartLocation = location;
+  }
+  getSlottedElement() {
+    var _a, _b, _c;
+    if (this.contentSelector != null) {
+      return (((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.contentSelector)) ||
+        this.hostElement.querySelector(this.contentSelector) ||
+        undefined);
+    }
+    else {
+      const contentSlot = ((_b = this.hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot')) || undefined;
+      if (((_c = contentSlot === null || contentSlot === void 0 ? void 0 : contentSlot.assignedElements) === null || _c === void 0 ? void 0 : _c.call(contentSlot).length) || 0 > 0) {
+        return contentSlot === null || contentSlot === void 0 ? void 0 : contentSlot.assignedElements()[0];
+      }
+    }
+  }
+  getMinBounds() {
+    const boundedMinHeight = this.minHeight != null ? this.height - this.minHeight : this.height;
+    const boundedMinWidth = this.minWidth != null ? this.width - this.minWidth : this.width;
+    return {
+      x: boundedMinWidth,
+      y: boundedMinHeight,
+    };
+  }
+  fromComputedStyle(value, base) {
+    const parsed = parseFloat(value);
+    if (isNaN(parsed) || parsed <= 0) {
+      return undefined;
+    }
+    else if (value.includes('%')) {
+      return (parsed / 100) * base;
+    }
+    else {
+      return parsed;
+    }
+  }
+  toBoundedValue(value, min, max) {
+    return Math.max(Math.min(value, max !== null && max !== void 0 ? max : value), min);
+  }
+  getSiblingMinWidth(base) {
+    var _a;
+    const sibling = this.horizontalSiblingSelector != null
+      ? document.querySelector(this.horizontalSiblingSelector)
+      : undefined;
+    if (typeof window !== 'undefined' && sibling) {
+      const siblingComputedStyles = window.getComputedStyle(sibling);
+      return (_a = this.fromComputedStyle(siblingComputedStyles.minWidth, base)) !== null && _a !== void 0 ? _a : 0;
+    }
+    return 0;
+  }
+  getSiblingMinHeight(base) {
+    var _a;
+    const sibling = this.verticalSiblingSelector != null
+      ? document.querySelector(this.verticalSiblingSelector)
+      : undefined;
+    if (typeof window !== 'undefined' && sibling) {
+      const siblingComputedStyles = window.getComputedStyle(sibling);
+      return (_a = this.fromComputedStyle(siblingComputedStyles.minHeight, base)) !== null && _a !== void 0 ? _a : 0;
+    }
+    return 0;
+  }
+  emitResizeStart(location) {
+    readTask(() => {
+      this.resizeStart.emit(this.computeResizeEventDetails(location));
+    });
+  }
+  emitResizeEnd(location) {
+    readTask(() => {
+      this.resizeEnd.emit(this.computeResizeEventDetails(location));
+    });
+  }
+  computeResizeEventDetails(location) {
+    var _a, _b, _c, _d, _e;
+    const parentBounds = this.parentSelector != null
+      ? (_a = document.querySelector(this.parentSelector)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()
+      : undefined;
+    return {
+      location,
+      width: this.width,
+      height: this.height,
+      widthPercentage: this.width /
+        ((_c = (_b = this.maxWidth) !== null && _b !== void 0 ? _b : parentBounds === null || parentBounds === void 0 ? void 0 : parentBounds.width) !== null && _c !== void 0 ? _c : window.innerWidth),
+      heightPercentage: this.height /
+        ((_e = (_d = this.maxHeight) !== null && _d !== void 0 ? _d : parentBounds === null || parentBounds === void 0 ? void 0 : parentBounds.height) !== null && _e !== void 0 ? _e : window.innerHeight),
+    };
+  }
+  get hostElement() { return this; }
+  static get style() { return resizableCss; }
+}, [1, "vertex-resizable", {
+    "horizontalDirection": [1, "horizontal-direction"],
+    "verticalDirection": [1, "vertical-direction"],
+    "initialHorizontalScale": [2, "initial-horizontal-scale"],
+    "initialVerticalScale": [2, "initial-vertical-scale"],
+    "initializeWithOffset": [4, "initialize-with-offset"],
+    "parentSelector": [1, "parent-selector"],
+    "verticalSiblingSelector": [1, "vertical-sibling-selector"],
+    "horizontalSiblingSelector": [1, "horizontal-sibling-selector"],
+    "contentSelector": [1, "content-selector"],
+    "position": [1],
+    "dimensionsComputed": [1540, "dimensions-computed"],
+    "width": [32],
+    "minWidth": [32],
+    "maxWidth": [32],
+    "height": [32],
+    "minHeight": [32],
+    "maxHeight": [32],
+    "left": [32],
+    "top": [32],
+    "hoveredLocation": [32],
+    "dragStartLocation": [32],
+    "updateDimensions": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-resizable"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-resizable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Resizable);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexResizable = Resizable;
+const defineCustomElement = defineCustomElement$1;
+
+export { Resizable as R, VertexResizable, defineCustomElement };

package/dist/components/vertex-result-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexResultList extends Components.VertexResultList, HTMLElement {}
+export const VertexResultList: {
+  prototype: VertexResultList;
+  new (): VertexResultList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { R as ResultList, d as defineCustomElement$1 } from './result-list.js';
+
+const VertexResultList = ResultList;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexResultList, defineCustomElement };

package/dist/components/vertex-search-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexSearchBar extends Components.VertexSearchBar, HTMLElement {}
+export const VertexSearchBar: {
+  prototype: VertexSearchBar;
+  new (): VertexSearchBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;