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

package/dist/esm/vertex-radio-group.entry.js

@@ -1,2 +1,76 @@
-export { R as vertex_radio_group } from './radio-group-2f5467b5.js';
-import './index-72f28b71.js';
+import { a as registerInstance, c as createEvent, h, d as getElement } from './index-C27tS7nl.js';
+
+const radioGroupCss = () => `.radio-group{display:flex;flex-direction:column}`;
+
+const RadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChanged = createEvent(this, "valueChanged");
+        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", { key: 'e9a877fa0c0d34ff810ba0caff4b31be6ca3f3c3', class: "radio-group" }, h("slot", { key: 'a11c500389558db08504d4eb338d3cb94ae785e8' })));
+    }
+    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": 0
+            }]
+    }; }
+};
+RadioGroup.style = radioGroupCss();
+
+export { RadioGroup as vertex_radio_group };

package/dist/esm/vertex-radio.entry.js

@@ -1,3 +1,32 @@
-export { R as vertex_radio } from './radio-39c11ba4.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
+import { a as registerInstance, c as createEvent, h } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.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");
+        /**
+         * Whether to disallow clicks and display this item
+         * as disabled.
+         */
+        this.disabled = false;
+    }
+    render() {
+        return (h("label", { key: '9cfcdcc8d4c33bea901c1880c12f24157c67f5a6', class: classNames('radio', {
+                disabled: this.disabled,
+            }) }, h("input", { key: '8543fe1dbd8e8b338d155c0f3932b41b51a59a78', 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", { key: 'e0c333b342cbbf23a94e27925ed4ac1d51800cb6', class: classNames('checkmark', {
+                disabled: this.disabled,
+            }) }), this.label));
+    }
+};
+Radio.style = radioCss();
+
+export { Radio as vertex_radio };

package/dist/esm/vertex-resizable.entry.js

@@ -1,4 +1,442 @@
-export { R as vertex_resizable } from './resizable-833336bf.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
-import './dom-9d0f7bf4.js';
+import { a as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+import { r as readDOM } from './dom-Oz9KwTs0.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");
+        this.resizeEnd = createEvent(this, "resizeEnd");
+        /**
+         * 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'],
+        });
+        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, { 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;
+            }
+        });
+    }
+    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 vertex_resizable };