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

package/dist/esm/radio-39c11ba4.js

@@ -1,32 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const radioCss = ".radio.sc-vertex-radio{display:inline-flex;position:relative;font-family:var(--vertex-ui-font-family);color:var( --vertex-ui-neutral-700);margin:4px 0px;white-space:nowrap}.radio.sc-vertex-radio:not(.disabled):hover{color:var( --vertex-ui-neutral-800)}.radio.sc-vertex-radio input.sc-vertex-radio{position:absolute;opacity:0;cursor:pointer}.radio.sc-vertex-radio:not(.disabled){cursor:pointer}.radio.disabled.sc-vertex-radio input.sc-vertex-radio{cursor:not-allowed}.checkmark.sc-vertex-radio{display:flex;position:relative;margin:auto;margin-right:0.75rem;height:16px;width:16px;background-color:var(--vertex-ui-white);border-radius:50%;border:1px solid var(--vertex-ui-neutral-400)}.checkmark.disabled.sc-vertex-radio{cursor:not-allowed}.radio.sc-vertex-radio:not(.disabled):hover input.sc-vertex-radio~.checkmark.sc-vertex-radio{border:1px solid var(--vertex-ui-neutral-500);cursor:pointer}.radio.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid  var(--vertex-ui-blue-700)}.radio.disabled.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid var( --vertex-ui-neutral-400)}.radio.sc-vertex-radio:not(.disabled):hover input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio{border:1px solid  var(--vertex-ui-blue-500);cursor:pointer}.checkmark.sc-vertex-radio:after{content:\"\";position:absolute;display:none}.radio.sc-vertex-radio input.sc-vertex-radio:checked~.checkmark.sc-vertex-radio:after{display:flex}.radio.sc-vertex-radio .checkmark.sc-vertex-radio:after{position:relative;margin:auto;width:12px;height:12px;border-radius:50%;background:var(--vertex-ui-blue-700)}.radio.sc-vertex-radio:hover .checkmark.sc-vertex-radio:after{background:var(--vertex-ui-blue-500);cursor:pointer}.radio.disabled.sc-vertex-radio .checkmark.sc-vertex-radio:after{background:var( --vertex-ui-neutral-400)}.disabled.sc-vertex-radio{color:var( --vertex-ui-neutral-400)}";
-
-const Radio = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.disabled = false;
-    this.value = undefined;
-    this.label = undefined;
-    this.name = undefined;
-    this.checked = undefined;
-  }
-  render() {
-    return (h("label", { class: classnames('radio', {
-        disabled: this.disabled,
-      }) }, h("input", { disabled: this.disabled, onChange: (event) => {
-        const radioValue = event.target;
-        this.valueChanged.emit({
-          checked: radioValue.checked,
-          value: radioValue.value,
-        });
-      }, type: "radio", id: `vertex-radio-${this.name}-${this.value}`, name: this.name, value: this.value, checked: this.checked }), h("span", { class: classnames('checkmark', {
-        disabled: this.disabled,
-      }) }), this.label));
-  }
-};
-Radio.style = radioCss;
-
-export { Radio as R };

package/dist/esm/radio-group-2f5467b5.js

@@ -1,76 +0,0 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-72f28b71.js';
-
-const radioGroupCss = ".radio-group{display:flex;flex-direction:column}";
-
-const RadioGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.name = undefined;
-    this.value = undefined;
-    this.handleListenOnRadioButtonChange =
-      this.handleListenOnRadioButtonChange.bind(this);
-  }
-  updateValue() {
-    var _a;
-    if (this.value != null) {
-      this.valueChanged.emit(this.value);
-      // Update the checked state for the radio buttons
-      (_a = this.radioButtons) === null || _a === void 0 ? void 0 : _a.forEach((radio) => {
-        if (this.value === radio.value) {
-          radio.checked = true;
-        }
-        else {
-          radio.checked = false;
-        }
-      });
-    }
-  }
-  connectedCallback() {
-    this.getVertexRadioButtons();
-    this.addEventListeners();
-  }
-  disconnectedCallback() {
-    this.removeEventListeners();
-  }
-  render() {
-    return (h("div", { class: "radio-group" }, h("slot", null)));
-  }
-  getVertexRadioButtons() {
-    var _a, _b;
-    this.radioButtons =
-      ((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('vertex-radio')) || undefined;
-    (_b = this.radioButtons) === null || _b === void 0 ? void 0 : _b.forEach((radio) => {
-      radio.name = this.name;
-      if (this.value === radio.value) {
-        radio.checked = true;
-      }
-    });
-  }
-  removeEventListeners() {
-    var _a;
-    (_a = this.radioButtons) === null || _a === void 0 ? void 0 : _a.forEach((radioButton) => {
-      radioButton.removeEventListener('valueChanged', this.handleListenOnRadioButtonChange);
-    });
-  }
-  addEventListeners() {
-    var _a;
-    (_a = this.radioButtons) === null || _a === void 0 ? void 0 : _a.forEach((radioButton) => {
-      radioButton.addEventListener('valueChanged', this.handleListenOnRadioButtonChange);
-    });
-  }
-  handleListenOnRadioButtonChange(ev) {
-    const event = ev;
-    event.stopPropagation();
-    if (event.detail.checked) {
-      this.value = event.detail.value;
-    }
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["updateValue"]
-  }; }
-};
-RadioGroup.style = radioGroupCss;
-
-export { RadioGroup as R };

package/dist/esm/resizable-833336bf.js

@@ -1,421 +0,0 @@
-import { r as registerInstance, e as createEvent, h, H as Host, g as getElement } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-import { r as readDOM } from './dom-9d0f7bf4.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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.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,
-        });
-        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);
-        }
-      });
-    }, 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),
-    };
-  }
-  get hostElement() { return getElement(this); }
-};
-Resizable.style = resizableCss;
-
-export { Resizable as R };