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

package/dist/collection/components/resizable/resizable.js

@@ -1,715 +1,771 @@
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
-import { readDOM } from '../../util/components/dom';
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
+import { readDOM } from "../../util/components/dom";
 const WINDOW_RESIZE_DEBOUNCE_THRESHOLD = 200;
 export class Resizable {
-  constructor() {
-    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.updateDimensions = this.updateDimensions.bind(this);
-    this.recomputeDimensions = this.recomputeDimensions.bind(this);
-    this.computeDimensions = this.computeDimensions.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();
-  }
-  connectedCallback() {
-    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);
-  }
-  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() {
-    readDOM(() => {
-      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,
+    constructor() {
+        /**
+         * The horizontal direction that this component can be resized in.
+         *
+         * Supports `left`, `right`, `both`, or `none`, and defaults to `both`.
+         */
+        this.horizontalDirection = 'both';
+        /**
+         * The vertical direction that this component can be resized in.
+         *
+         * Supports `top`, `bottom`, `both`, or `none`, and defaults to `both`.
+         */
+        this.verticalDirection = 'both';
+        /**
+         * Indicates whether this resizable should set its `top` property to the
+         * difference between its initial height and max height, and its `left`
+         * property to the difference between its initial width and max width.
+         *
+         * Setting this is useful when using the `verticalDirection` of `top`
+         * or `horizontalDirection` of `left`, and positioning it to the
+         * bottom of the parent container or right of the parent container
+         * respectively.
+         */
+        this.initializeWithOffset = false;
+        /**
+         * A prop to tell the component that it is absolutely positioned.
+         *
+         * If this prop is passed, it is expected that this component is anchored, and would only be
+         * draggable in one direction. It could have adverse affects if it is positioned absolutely, but then
+         * dragged in the opposite position from it's anchor point.
+         */
+        this.position = 'relative';
+        /**
+         * Indicates whether the component has computed its initial dimensions.
+         * This can be used to hide a resizable element that has both a `min-width` or `min-height`
+         * and an initial horizontal or vertical scale factor prior to the actual initial width
+         * or height being computed.
+         */
+        this.dimensionsComputed = false;
+        this.width = -1;
+        this.height = -1;
+        this.left = 0;
+        this.top = 0;
+        this.containerTop = 0;
+        this.containerLeft = 0;
+        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.updateDimensions = this.updateDimensions.bind(this);
+        this.recomputeDimensions = this.recomputeDimensions.bind(this);
+        this.computeDimensions = this.computeDimensions.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'],
         });
-        this.dimensionsComputed = true;
-      }
-    });
-  }
-  recomputeDimensions() {
-    if (this.resizeTimeout != null) {
-      clearTimeout(this.resizeTimeout);
-      this.resizeTimeout = undefined;
-    }
-    this.resizeTimeout = setTimeout(() => {
-      this.resizeTimeout = undefined;
-      readDOM(() => {
-        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);
+        if (this.parentSelector != null) {
+            const parent = document.querySelector(this.parentSelector);
+            if (parent != null) {
+                this.resizeObserver.observe(parent);
+            }
         }
-      });
-    }, 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) {
-    readDOM(() => {
-      this.resizeStart.emit(this.computeResizeEventDetails(location));
-    });
-  }
-  emitResizeEnd(location) {
-    readDOM(() => {
-      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),
-    };
-  }
-  static get is() { return "vertex-resizable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["resizable.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["resizable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "horizontalDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HorizontalDragDirection",
-          "resolved": "\"both\" | \"left\" | \"none\" | \"right\"",
-          "references": {
-            "HorizontalDragDirection": {
-              "location": "local"
+        this.resizeObserver.observe(this.hostElement);
+    }
+    disconnectedCallback() {
+        this.dimensionsComputed = false;
+        window.removeEventListener('resize', this.recomputeDimensions);
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+    }
+    connectedCallback() {
+        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);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The horizontal direction that this component can be resized in.\n\nSupports `left`, `right`, `both`, or `none`, and defaults to `both`."
-        },
-        "attribute": "horizontal-direction",
-        "reflect": false,
-        "defaultValue": "'both'"
-      },
-      "verticalDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "VerticalDragDirection",
-          "resolved": "\"both\" | \"bottom\" | \"none\" | \"top\"",
-          "references": {
-            "VerticalDragDirection": {
-              "location": "local"
+        }
+        this.resizeObserver.observe(this.hostElement);
+    }
+    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, { key: 'df1cfd4b5cff53a97e023bd28b38a895c231d698', style: {
+                width,
+                height,
+                left: this.position === 'relative' ? `${this.left}px` : undefined,
+                top: this.position === 'relative' ? `${this.top}px` : undefined,
+            } }, h("div", { key: '98db17c90104701e449ad69b501da48f8e45828a', class: classNames('container', {
+                hidden: this.width <= 0 && this.height <= 0,
+            }) }, h("div", { key: '1315d54ec1e08bad9a9518093b18f829a6905f0e', class: classNames('shadow', `hovered-location-${this.dragStartLocation || this.hoveredLocation}`) }), h("div", { key: '214344a03339451443a232c5b27dfbbe9a606db0', 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", { key: '1d115a65f83ceb9b9ed042e456b228f7fb5f27ab', 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", { key: '2498a3983eb1421ab05ca91b85188a5d2f2e54cd', 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", { key: 'dfcd9fabf34fdc0ffd03ad473113a89990ff2bb3', 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", { key: 'fec489510c12be6dd41a482daace2bed04d6f7fe', 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", { key: 'cefd4f2534559032ed262ccab9d3bd022b0f7bd5', 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", { key: '5a890cb805443ca20252b851ac1e593f440c2337', 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", { key: '6d9eb463dc5e53399547139ac8048f31fb016d93', 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", { key: '78a828ad95fe83e09adf708380b769aeabf8f553' }))));
+    }
+    /**
+     * @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() {
+        readDOM(() => {
+            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;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The vertical direction that this component can be resized in.\n\nSupports `top`, `bottom`, `both`, or `none`, and defaults to `both`."
-        },
-        "attribute": "vertical-direction",
-        "reflect": false,
-        "defaultValue": "'both'"
-      },
-      "initialHorizontalScale": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The initial horizontal scale for this component. This value will be\nmultiplied by the range between max width and min width (if provided)\nto determine the starting width of this resizable container.\n\nIf not provided, this will default to the minimum width\n(or component with if that is not provided)."
-        },
-        "attribute": "initial-horizontal-scale",
-        "reflect": false
-      },
-      "initialVerticalScale": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The initial vertical scale for this component. This value will be\nmultiplied by the range between max height and min height (if provided)\nto determine the starting height of this resizable container.\n\nIf not provided, this will default to the minimum height\n(or component with if that is not provided)."
-        },
-        "attribute": "initial-vertical-scale",
-        "reflect": false
-      },
-      "initializeWithOffset": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether this resizable should set its `top` property to the\ndifference between its initial height and max height, and its `left`\nproperty to the difference between its initial width and max width.\n\nSetting this is useful when using the `verticalDirection` of `top`\nor `horizontalDirection` of `left`, and positioning it to the\nbottom of the parent container or right of the parent container\nrespectively."
-        },
-        "attribute": "initialize-with-offset",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "parentSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A CSS selector for the parent element of this component.\n\nProviding this selector allows for computation of percentage-based\nminimum and maximum heights and widths relative to a parent element."
-        },
-        "attribute": "parent-selector",
-        "reflect": false
-      },
-      "verticalSiblingSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A CSS selector for a vertically constraining sibling element.\n\nProviding this selector will constrain the max height of this resizable\nbased on the minimum height of the sibling."
-        },
-        "attribute": "vertical-sibling-selector",
-        "reflect": false
-      },
-      "horizontalSiblingSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A CSS selector for a horizontally constraining sibling element.\n\nProviding this selector will constrain the max width of this resizable\nbased on the minimum width of the sibling."
-        },
-        "attribute": "horizontal-sibling-selector",
-        "reflect": false
-      },
-      "contentSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A CSS selector for the child element of this component.\n\nProviding this selector allows for retrieval of the slotted element\nwithout using the `HTMLSlotElement.assignedElements` experimental API."
-        },
-        "attribute": "content-selector",
-        "reflect": false
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'relative' | 'absolute'",
-          "resolved": "\"absolute\" | \"relative\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A prop to tell the component that it is absolutely positioned.\n\nIf this prop is passed, it is expected that this component is anchored, and would only be\ndraggable in one direction. It could have adverse affects if it is positioned absolutely, but then\ndragged in the opposite position from it's anchor point."
-        },
-        "attribute": "position",
-        "reflect": false,
-        "defaultValue": "'relative'"
-      },
-      "dimensionsComputed": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether the component has computed its initial dimensions.\nThis can be used to hide a resizable element that has both a `min-width` or `min-height`\nand an initial horizontal or vertical scale factor prior to the actual initial width\nor height being computed."
-        },
-        "attribute": "dimensions-computed",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "width": {},
-      "minWidth": {},
-      "maxWidth": {},
-      "height": {},
-      "minHeight": {},
-      "maxHeight": {},
-      "left": {},
-      "top": {},
-      "hoveredLocation": {},
-      "dragStartLocation": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "resizeStart",
-        "name": "resizeStart",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "An event that is emitted whenever a `pointerdown` occurs on a handle for this element.\nThis event will contain the `DragStartLocation` of the handle, as well as the current\nwidth and height of the element as pixel values and percentages."
-        },
-        "complexType": {
-          "original": "ResizeEventDetails",
-          "resolved": "ResizeEventDetails",
-          "references": {
-            "ResizeEventDetails": {
-              "location": "local"
+        });
+    }
+    recomputeDimensions() {
+        if (this.resizeTimeout != null) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        this.resizeTimeout = setTimeout(() => {
+            this.resizeTimeout = undefined;
+            readDOM(() => {
+                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;
             }
-          }
         }
-      }, {
-        "method": "resizeEnd",
-        "name": "resizeEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "An event that is emitted whenever a `pointerup` occurs after a `resizeStart` occurs.\nThis event will contain the `DragStartLocation` of the handle, as well as the current\nwidth and height of the element as pixel values and percentages."
-        },
-        "complexType": {
-          "original": "ResizeEventDetails",
-          "resolved": "ResizeEventDetails",
-          "references": {
-            "ResizeEventDetails": {
-              "location": "local"
+    }
+    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];
             }
-          }
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "updateDimensions": {
-        "complexType": {
-          "signature": "(bounds: ResizableBoundsUpdate, isRecompute?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    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) {
+        readDOM(() => {
+            this.resizeStart.emit(this.computeResizeEventDetails(location));
+        });
+    }
+    emitResizeEnd(location) {
+        readDOM(() => {
+            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),
+        };
+    }
+    static get is() { return "vertex-resizable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["resizable.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["resizable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "horizontalDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HorizontalDragDirection",
+                    "resolved": "\"both\" | \"left\" | \"none\" | \"right\"",
+                    "references": {
+                        "HorizontalDragDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/resizable/resizable.tsx",
+                            "id": "src/components/resizable/resizable.tsx::HorizontalDragDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The horizontal direction that this component can be resized in.\n\nSupports `left`, `right`, `both`, or `none`, and defaults to `both`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "horizontal-direction",
+                "defaultValue": "'both'"
+            },
+            "verticalDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerticalDragDirection",
+                    "resolved": "\"both\" | \"bottom\" | \"none\" | \"top\"",
+                    "references": {
+                        "VerticalDragDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/resizable/resizable.tsx",
+                            "id": "src/components/resizable/resizable.tsx::VerticalDragDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The vertical direction that this component can be resized in.\n\nSupports `top`, `bottom`, `both`, or `none`, and defaults to `both`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical-direction",
+                "defaultValue": "'both'"
+            },
+            "initialHorizontalScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial horizontal scale for this component. This value will be\nmultiplied by the range between max width and min width (if provided)\nto determine the starting width of this resizable container.\n\nIf not provided, this will default to the minimum width\n(or component with if that is not provided)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-horizontal-scale"
+            },
+            "initialVerticalScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial vertical scale for this component. This value will be\nmultiplied by the range between max height and min height (if provided)\nto determine the starting height of this resizable container.\n\nIf not provided, this will default to the minimum height\n(or component with if that is not provided)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-vertical-scale"
+            },
+            "initializeWithOffset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether this resizable should set its `top` property to the\ndifference between its initial height and max height, and its `left`\nproperty to the difference between its initial width and max width.\n\nSetting this is useful when using the `verticalDirection` of `top`\nor `horizontalDirection` of `left`, and positioning it to the\nbottom of the parent container or right of the parent container\nrespectively."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initialize-with-offset",
+                "defaultValue": "false"
+            },
+            "parentSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A CSS selector for the parent element of this component.\n\nProviding this selector allows for computation of percentage-based\nminimum and maximum heights and widths relative to a parent element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-selector"
+            },
+            "verticalSiblingSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A CSS selector for a vertically constraining sibling element.\n\nProviding this selector will constrain the max height of this resizable\nbased on the minimum height of the sibling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical-sibling-selector"
+            },
+            "horizontalSiblingSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A CSS selector for a horizontally constraining sibling element.\n\nProviding this selector will constrain the max width of this resizable\nbased on the minimum width of the sibling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "horizontal-sibling-selector"
             },
-            "ResizableBoundsUpdate": {
-              "location": "local"
+            "contentSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A CSS selector for the child element of this component.\n\nProviding this selector allows for retrieval of the slotted element\nwithout using the `HTMLSlotElement.assignedElements` experimental API."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content-selector"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'relative' | 'absolute'",
+                    "resolved": "\"absolute\" | \"relative\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A prop to tell the component that it is absolutely positioned.\n\nIf this prop is passed, it is expected that this component is anchored, and would only be\ndraggable in one direction. It could have adverse affects if it is positioned absolutely, but then\ndragged in the opposite position from it's anchor point."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'relative'"
+            },
+            "dimensionsComputed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the component has computed its initial dimensions.\nThis can be used to hide a resizable element that has both a `min-width` or `min-height`\nand an initial horizontal or vertical scale factor prior to the actual initial width\nor height being computed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dimensions-computed",
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "private",
-              "text": "Used for internals or testing."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
+        };
+    }
+    static get states() {
+        return {
+            "width": {},
+            "minWidth": {},
+            "maxWidth": {},
+            "height": {},
+            "minHeight": {},
+            "maxHeight": {},
+            "left": {},
+            "top": {},
+            "hoveredLocation": {},
+            "dragStartLocation": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "resizeStart",
+                "name": "resizeStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event that is emitted whenever a `pointerdown` occurs on a handle for this element.\nThis event will contain the `DragStartLocation` of the handle, as well as the current\nwidth and height of the element as pixel values and percentages."
+                },
+                "complexType": {
+                    "original": "ResizeEventDetails",
+                    "resolved": "ResizeEventDetails",
+                    "references": {
+                        "ResizeEventDetails": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/resizable/resizable.tsx",
+                            "id": "src/components/resizable/resizable.tsx::ResizeEventDetails"
+                        }
+                    }
+                }
+            }, {
+                "method": "resizeEnd",
+                "name": "resizeEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event that is emitted whenever a `pointerup` occurs after a `resizeStart` occurs.\nThis event will contain the `DragStartLocation` of the handle, as well as the current\nwidth and height of the element as pixel values and percentages."
+                },
+                "complexType": {
+                    "original": "ResizeEventDetails",
+                    "resolved": "ResizeEventDetails",
+                    "references": {
+                        "ResizeEventDetails": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/resizable/resizable.tsx",
+                            "id": "src/components/resizable/resizable.tsx::ResizeEventDetails"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "updateDimensions": {
+                "complexType": {
+                    "signature": "(bounds: ResizableBoundsUpdate, isRecompute?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "bounds",
+                            "type": "ResizableBoundsUpdate",
+                            "docs": ""
+                        }, {
+                            "name": "isRecompute",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ResizableBoundsUpdate": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/resizable/resizable.tsx",
+                            "id": "src/components/resizable/resizable.tsx::ResizableBoundsUpdate"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "private",
+                            "text": "Used for internals or testing."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
 }