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

package/dist/components/vertex-toast.js

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './popover.js';
+
+const toastCss = ":host{--toast-width:auto;--toast-min-width:17rem;--toast-max-width:25rem;--toast-white-space:normal}.anchor{position:fixed}.bottom-left{left:1rem;bottom:1rem}.bottom{left:50vw;bottom:1rem}.bottom-right{right:1rem;bottom:1rem}.top-left{left:1rem;top:1rem}.top{left:50vw;top:1rem}.top-right{right:1rem;top:1rem}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;padding-left:1rem}.close:hover{color:var(--vertex-ui-neutral-300)}.toast{position:relative;display:flex;align-items:center;width:var(--toast-width);min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:1rem 1rem 1rem 1.5rem;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);background-color:var(--vertex-ui-neutral-800);color:var(--vertex-ui-white);border-radius:4px;white-space:var(--toast-white-space);user-select:none}.toast.hidden{pointer-events:none}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-700);color:white}";
+
+const DEFAULT_TOAST_DURATION = 3000;
+const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closed = createEvent(this, "closed", 7);
+    this.content = undefined;
+    this.placement = 'bottom-left';
+    this.duration = DEFAULT_TOAST_DURATION;
+    this.animated = true;
+    this.open = false;
+    this.type = 'info';
+    this.isOpen = undefined;
+    this.handleClose = this.handleClose.bind(this);
+    this.startCloseTimeout = this.startCloseTimeout.bind(this);
+    this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
+    this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
+  }
+  componentDidLoad() {
+    // This allows the component to render once initially to correctly
+    // place the popover anchor.
+    this.isOpen = this.open;
+    if (this.isOpen) {
+      this.restartCloseTimeout();
+    }
+  }
+  async handleOpenChanged(open) {
+    if (open) {
+      this.restartCloseTimeout();
+      this.isOpen = open;
+    }
+  }
+  render() {
+    return (h("vertex-popover", { class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, h("div", { slot: "anchor", class: classnames('anchor', this.placement) }), h("div", { class: classnames('toast', {
+        hidden: !this.isOpen,
+        warn: this.type === 'warn',
+        error: this.type === 'error',
+      }) }, this.content ? h("div", { class: "content" }, this.content) : h("slot", null), h("div", { class: "actions" }, h("slot", { name: "action" }), h("vertex-icon-button", { class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
+  }
+  handleClose() {
+    this.clearCloseTimeout();
+    this.isOpen = false;
+    this.closed.emit();
+  }
+  startCloseTimeout() {
+    if (this.closeTimeout == null && this.duration > 0) {
+      this.closeTimeout = setTimeout(() => {
+        this.handleClose();
+      }, this.duration);
+    }
+  }
+  clearCloseTimeout() {
+    if (this.closeTimeout != null) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = undefined;
+    }
+  }
+  restartCloseTimeout() {
+    this.clearCloseTimeout();
+    this.startCloseTimeout();
+  }
+  getPopoverPlacement() {
+    switch (this.placement) {
+      case 'bottom-left':
+        return 'top-start';
+      case 'bottom':
+        return 'top';
+      case 'bottom-right':
+        return 'top-end';
+      case 'top-left':
+        return 'bottom-start';
+      case 'top':
+        return 'bottom';
+      case 'top-right':
+        return 'bottom-end';
+    }
+  }
+  static get watchers() { return {
+    "open": ["handleOpenChanged"]
+  }; }
+  static get style() { return toastCss; }
+}, [1, "vertex-toast", {
+    "content": [1],
+    "placement": [1],
+    "duration": [2],
+    "animated": [4],
+    "open": [4],
+    "type": [1],
+    "isOpen": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-toast", "vertex-icon-button", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { Toast as T, VertexToast, defineCustomElement };

package/dist/components/vertex-toggle.d.ts

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

package/dist/components/vertex-toggle.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const toggleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex}.check{border:1px solid var(--vertex-ui-neutral-400);box-shadow:0 0 2px var(--vertex-ui-neutral-400);border-radius:4px;width:1rem;height:1rem;padding:0}.check:not(.disabled){cursor:pointer}.check.disabled{border:1px solid var(--vertex-ui-neutral-200);box-shadow:0 0 2px var(--vertex-ui-neutral-200)}.check:focus-visible:not(.disabled){outline:none;border:1px solid var(--vertex-ui-neutral-600);box-shadow:0 0 2px var(--vertex-ui-neutral-600)}.check:focus-visible:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-800);box-shadow:0 0 2px var(--vertex-ui-blue-800)}.check:hover:not(.disabled){border:1px solid var(--vertex-ui-neutral-500);box-shadow:0 0 2px var(--vertex-ui-neutral-500)}.check.checked:not(.disabled){border:none;box-shadow:none}.check:hover:not(.disabled)>.checked-content.checked{background-color:var(--vertex-ui-blue-500);box-shadow:0 0 2px var(--vertex-ui-blue-500)}.checked-content{width:100%;height:100%;border-radius:4px}.checked-content.disabled{background-color:var(--vertex-ui-neutral-050);color:var(--vertex-ui-neutral-500)}.checked-content.checked:not(.disabled){background-color:var(--vertex-ui-blue-700);box-shadow:0 0 2px var(--vertex-ui-blue-700);color:var(--vertex-ui-white)}.switch{position:relative;width:2.25rem;height:1.25rem;padding:0;display:inline-block}.switch:not(.disabled){cursor:pointer}.track{position:absolute;top:0;background-color:var(--vertex-ui-neutral-300);width:2rem;padding:0 0.125rem;margin:0.1875rem 0;height:0.875rem;border-radius:7rem}.track.disabled{background-color:var(--vertex-ui-neutral-200)}.track.disabled.checked{background-color:var(--vertex-ui-blue-200)}.handle{position:absolute;top:0;left:0;background-color:var(--vertex-ui-neutral-100);box-shadow:-1px 1px rgba(0, 0, 0, 0.15);width:1.25rem;height:1.25rem;border-radius:100%;display:flex;transition:left 0.25s}.handle.disabled{box-shadow:none}.track:not(.disabled).checked{background-color:var(--vertex-ui-blue-300)}.handle.checked{left:1rem}.handle.checked:not(.disabled){background-color:var(--vertex-ui-blue-600)}.handle.checked.disabled{background-color:var(--vertex-ui-blue-300)}";
+
+const Toggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.variant = 'check';
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    const flipValue = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.valueChanged.emit(this.checked);
+      }
+    };
+    return (h("button", { class: classnames(this.variant, {
+        checked: this.checked,
+        disabled: this.disabled,
+      }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (h("div", { class: classnames('checked-content', {
+        checked: this.checked,
+        disabled: this.disabled,
+      }) }, this.checked && h("vertex-icon", { name: "check", size: "md" }))), this.variant === 'switch' && (h("div", { class: classnames('track', {
+        disabled: this.disabled,
+        checked: this.checked,
+      }) })), this.variant === 'switch' && (h("div", { class: classnames('handle', {
+        disabled: this.disabled,
+        checked: this.checked,
+      }) }))));
+  }
+  static get style() { return toggleCss; }
+}, [1, "vertex-toggle", {
+    "variant": [1],
+    "disabled": [4],
+    "checked": [1540]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-toggle", "vertex-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toggle);
+      }
+      break;
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexToggle = Toggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { Toggle as T, VertexToggle, defineCustomElement };

package/dist/components/vertex-tooltip.d.ts

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

package/dist/components/vertex-tooltip.js

@@ -0,0 +1,6 @@
+import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
+
+const VertexTooltip = Tooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexTooltip, defineCustomElement };

package/dist/esm/index.js

@@ -21,13 +21,13 @@ export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
 export { I as Icon } from './icon-a74a8129.js';
 export { I as IconButton } from './icon-button-33aa27cb.js';
 export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
-export { M as Menu } from './menu-daa7f9c9.js';
+export { M as Menu } from './menu-b8ff7d6a.js';
 export { M as MenuDivider } from './menu-divider-87c888cb.js';
 export { M as MenuItem } from './menu-item-c33aa9dd.js';
 export { P as Popover } from './popover-6e806354.js';
 export { R as Radio } from './radio-39c11ba4.js';
 export { R as RadioGroup } from './radio-group-7c35d2f0.js';
-export { R as Resizable } from './resizable-a147709b.js';
+export { R as Resizable } from './resizable-833336bf.js';
 export { R as ResultList } from './result-list-16c6afbd.js';
 export { S as SearchBar } from './search-bar-8d18626e.js';
 export { S as Select } from './select-78aeff96.js';
@@ -44,6 +44,6 @@ import './slots-fbb5afb3.js';
 import './index-9c609209.js';
 import './icon-helper-2f57104b.js';
 import './lib-73fbca8b.js';
+import './dom-9d0f7bf4.js';
 import './templates-797420bf.js';
 import './tslib.es6-99cd0de8.js';
-import './dom-9d0f7bf4.js';

package/dist/esm/{menu-daa7f9c9.js → menu-b8ff7d6a.js}

@@ -26,6 +26,9 @@ const Menu = class {
   disconnectedCallback() {
     this.removeEventListeners();
   }
+  connectedCallback() {
+    this.addEventListeners();
+  }
   render() {
     return (h("vertex-popover", Object.assign({ ref: (element) => {
         this.popoverRef = element;
@@ -41,12 +44,19 @@ const Menu = class {
       }) }, h("slot", { name: "header" }), h("slot", null))));
   }
   addEventListeners() {
-    var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('dismissed', this.handlePopoverDismiss);
+    var _a, _b;
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
+    this.listenerDisposable = {
+      dispose: () => {
+        var _a;
+        (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+      },
+    };
   }
   removeEventListeners() {
     var _a;
-    (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
+    (_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
   handlePopoverDismiss() {
     this.open = false;

package/dist/esm/{resizable-a147709b.js → resizable-833336bf.js}

@@ -1,5 +1,6 @@
-import { r as registerInstance, e as createEvent, h, H as Host, c as readTask, g as getElement } from './index-72f28b71.js';
+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}";
 
@@ -38,7 +39,9 @@ const Resizable = class {
     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);
   }
@@ -63,6 +66,21 @@ const Resizable = class {
     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%'
@@ -141,7 +159,7 @@ const Resizable = class {
         : 0;
   }
   computeDimensions() {
-    readTask(() => {
+    readDOM(() => {
       var _a;
       const slotted = this.getSlottedElement();
       if (typeof window !== 'undefined' && slotted != null) {
@@ -169,7 +187,7 @@ const Resizable = class {
     }
     this.resizeTimeout = setTimeout(() => {
       this.resizeTimeout = undefined;
-      readTask(() => {
+      readDOM(() => {
         var _a;
         const slotted = this.getSlottedElement();
         if (typeof window !== 'undefined' && slotted != null) {
@@ -372,12 +390,12 @@ const Resizable = class {
     return 0;
   }
   emitResizeStart(location) {
-    readTask(() => {
+    readDOM(() => {
       this.resizeStart.emit(this.computeResizeEventDetails(location));
     });
   }
   emitResizeEnd(location) {
-    readTask(() => {
+    readDOM(() => {
       this.resizeEnd.emit(this.computeResizeEventDetails(location));
     });
   }

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

@@ -1,3 +1,3 @@
-export { M as vertex_menu } from './menu-daa7f9c9.js';
+export { M as vertex_menu } from './menu-b8ff7d6a.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,3 +1,4 @@
-export { R as vertex_resizable } from './resizable-a147709b.js';
+export { R as vertex_resizable } from './resizable-833336bf.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
+import './dom-9d0f7bf4.js';

package/dist/types/components/menu/menu.d.ts

@@ -41,9 +41,11 @@ export declare class Menu {
   private hostElement;
   private popoverRef?;
   private headerSlot?;
+  private listenerDisposable?;
   constructor();
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  connectedCallback(): void;
   render(): h.JSX.IntrinsicElements;
   private addEventListeners;
   private removeEventListeners;

package/dist/types/components/resizable/resizable.d.ts

@@ -139,6 +139,7 @@ export declare class Resizable {
   constructor();
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  connectedCallback(): void;
   render(): h.JSX.IntrinsicElements;
   /**
    * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.2-canary.0",
+  "version": "0.1.2-canary.2",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.23.2",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "104f2e757e89345ed44420a8413f0d4e466b63ec"
+  "gitHead": "90a063b058db9bfdb5707a0b3789c556fdc83598"
 }

package/dist/components/p-0517ca62.entry.js

@@ -1 +0,0 @@
-export{M as vertex_menu}from"./p-7b75e004.js";import"./p-6834631c.js";import"./p-fe062eb0.js";

package/dist/components/p-6ec189d2.js

@@ -1 +0,0 @@
-import{r as t,e as i,h as o,H as h,c as e,g as s}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const r=class{constructor(o){t(this,o),this.resizeStart=i(this,"resizeStart",7),this.resizeEnd=i(this,"resizeEnd",7),this.containerTop=0,this.containerLeft=0,this.horizontalDirection="both",this.verticalDirection="both",this.initialHorizontalScale=void 0,this.initialVerticalScale=void 0,this.initializeWithOffset=!1,this.parentSelector=void 0,this.verticalSiblingSelector=void 0,this.horizontalSiblingSelector=void 0,this.contentSelector=void 0,this.position="relative",this.dimensionsComputed=!1,this.width=-1,this.minWidth=void 0,this.maxWidth=void 0,this.height=-1,this.minHeight=void 0,this.maxHeight=void 0,this.left=0,this.top=0,this.hoveredLocation=void 0,this.dragStartLocation=void 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.recomputeDimensions=this.recomputeDimensions.bind(this),this.mutationObserver=new MutationObserver(this.recomputeDimensions),this.resizeObserver=new ResizeObserver(this.recomputeDimensions)}componentDidLoad(){if(this.computeDimensions(),window.addEventListener("resize",this.recomputeDimensions),this.mutationObserver.observe(this.hostElement,{attributes:!0,attributeFilter:["class"]}),null!=this.parentSelector){const t=document.querySelector(this.parentSelector);null!=t&&this.resizeObserver.observe(t)}this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.dimensionsComputed=!1,window.removeEventListener("resize",this.recomputeDimensions),this.mutationObserver.disconnect(),this.resizeObserver.disconnect()}render(){return o(h,{style:{width:this.width<0||"none"===this.horizontalDirection?"100%":`${this.width}px`,height:this.height<0||"none"===this.verticalDirection?"100%":`${this.height}px`,left:"relative"===this.position?`${this.left}px`:void 0,top:"relative"===this.position?`${this.top}px`:void 0}},o("div",{class:n("container",{hidden:this.width<=0&&this.height<=0})},o("div",{class:n("shadow",`hovered-location-${this.dragStartLocation||this.hoveredLocation}`)}),o("div",{class:n("handle","left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"left"),onPointerEnter:()=>this.handlePointerEnter("left"),onPointerLeave:()=>this.handlePointerLeave("left")}),o("div",{class:n("handle","right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"right"),onPointerEnter:()=>this.handlePointerEnter("right"),onPointerLeave:()=>this.handlePointerLeave("right")}),o("div",{class:n("handle","top-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top"),onPointerEnter:()=>this.handlePointerEnter("top"),onPointerLeave:()=>this.handlePointerLeave("top")}),o("div",{class:n("handle","bottom-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom"),onPointerEnter:()=>this.handlePointerEnter("bottom"),onPointerLeave:()=>this.handlePointerLeave("bottom")}),o("div",{class:n("handle","bottom-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-right"),onPointerEnter:()=>this.handlePointerEnter("bottom-right"),onPointerLeave:()=>this.handlePointerLeave("bottom-right")}),o("div",{class:n("handle","bottom-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-left"),onPointerEnter:()=>this.handlePointerEnter("bottom-left"),onPointerLeave:()=>this.handlePointerLeave("bottom-left")}),o("div",{class:n("handle","top-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-right"),onPointerEnter:()=>this.handlePointerEnter("top-right"),onPointerLeave:()=>this.handlePointerLeave("top-right")}),o("div",{class:n("handle","top-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-left"),onPointerEnter:()=>this.handlePointerEnter("top-left"),onPointerLeave:()=>this.handlePointerLeave("top-left")}),o("slot",null)))}async updateDimensions(t,i=!1){var o,h;const{host:e,slotted:s,parent:n,minWidth:r,maxWidth:l,minHeight:a,maxHeight:d}=t,v=this.fromComputedStyle(l,(null==n?void 0:n.width)||e.width||s.width);this.maxWidth=null!=v?v-this.getSiblingMinWidth((null==n?void 0:n.width)||e.width||s.width):void 0,this.minWidth=this.fromComputedStyle(r,(null==n?void 0:n.width)||e.width||s.width);const c=this.fromComputedStyle(d,(null==n?void 0:n.height)||e.height||s.height);if(this.maxHeight=null!=c?c-this.getSiblingMinHeight((null==n?void 0:n.height)||e.height||s.height):void 0,this.minHeight=this.fromComputedStyle(a,(null==n?void 0:n.height)||e.height||s.height),!i||this.height<=0){const t=null!=this.maxHeight&&null!=this.initialVerticalScale?this.maxHeight*this.initialVerticalScale:this.minHeight;this.width=(null!=this.maxWidth&&null!=this.initialHorizontalScale?this.maxWidth*this.initialHorizontalScale:this.minWidth)||s.width||this.width,this.height=t||s.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=null!==(o=null==n?void 0:n.top)&&void 0!==o?o:e.top,this.containerLeft=null!==(h=null==n?void 0:n.left)&&void 0!==h?h:e.left,this.top=null!=c&&this.initializeWithOffset&&"absolute"!==this.position?c-this.height:0,this.left=null!=v&&this.initializeWithOffset&&"absolute"!==this.position?v-this.width:0}computeDimensions(){e((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight}),this.dimensionsComputed=!0}}))}recomputeDimensions(){null!=this.resizeTimeout&&(clearTimeout(this.resizeTimeout),this.resizeTimeout=void 0),this.resizeTimeout=setTimeout((()=>{this.resizeTimeout=void 0,e((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight},!0)}}))}),200)}handlePointerEnter(t){this.hoveredLocation=t}handlePointerLeave(t){t===this.hoveredLocation&&(this.hoveredLocation=void 0)}handlePointerDown(t,i){this.setStartPosition(t,i),this.emitResizeStart(i),window.addEventListener("pointermove",this.handleDrag),window.addEventListener("pointerup",this.handleWindowPointerUp)}handleDrag(t){if(null!=this.lastPointerPosition){const i={x:this.lastPointerPosition.x-t.clientX,y:this.lastPointerPosition.y-t.clientY};switch(this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation){case"bottom":this.ifValidDragBottom(t,i,this.handleDragBottom);break;case"top":this.ifValidDragTop(t,i,this.handleDragTop);break;case"right":this.ifValidDragRight(t,i,this.handleDragRight);break;case"left":this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"bottom-right":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragRight(t,i,this.handleDragRight);break;case"bottom-left":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"top-right":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragRight(t,i,this.handleDragRight);break;case"top-left":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragLeft(t,i,this.handleDragLeft)}}}handleWindowPointerUp(){null!=this.dragStartLocation&&this.emitResizeEnd(this.dragStartLocation),this.lastPointerPosition=void 0,this.dragStartLocation=void 0,window.removeEventListener("pointermove",this.handleDrag),window.removeEventListener("pointerup",this.handleWindowPointerUp)}ifValidDragTop(t,i,o){(i.y<0?t.clientY-this.containerTop>this.top:t.clientY-this.containerTop<=this.top)&&o(i)}ifValidDragBottom(t,i,o){(i.y>0?t.clientY<this.top+this.containerTop+this.height:t.clientY>=this.top+this.containerTop+this.height)&&o(i)}ifValidDragLeft(t,i,o){(i.x<0?t.clientX-this.containerLeft>this.left:t.clientX-this.containerLeft<=this.left)&&o(i)}ifValidDragRight(t,i,o){(i.x>0?t.clientX<this.left+this.containerLeft+this.width:t.clientX>=this.left+this.containerLeft+this.width)&&o(i)}handleDragTop(t){const i=this.height;this.height=this.toBoundedValue(this.height+t.y,this.minHeight||0,this.maxHeight),this.top-=this.height-i}handleDragBottom(t){this.height=this.toBoundedValue(this.height-t.y,this.minHeight||0,this.maxHeight)}handleDragLeft(t){const i=this.width;this.width=this.toBoundedValue(this.width+t.x,this.minWidth||0,this.maxWidth),this.left-=this.width-i}handleDragRight(t){this.width=this.toBoundedValue(this.width-t.x,this.minWidth||0,this.maxWidth)}setStartPosition(t,i){t.stopPropagation(),t.preventDefault(),this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation=i}getSlottedElement(){var t,i,o;if(null!=this.contentSelector)return(null===(t=this.hostElement.shadowRoot)||void 0===t?void 0:t.querySelector(this.contentSelector))||this.hostElement.querySelector(this.contentSelector)||void 0;{const t=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0;if(null===(o=null==t?void 0:t.assignedElements)||void 0===o?void 0:o.call(t).length)return null==t?void 0:t.assignedElements()[0]}}getMinBounds(){return{x:null!=this.minWidth?this.width-this.minWidth:this.width,y:null!=this.minHeight?this.height-this.minHeight:this.height}}fromComputedStyle(t,i){const o=parseFloat(t);return isNaN(o)||o<=0?void 0:t.includes("%")?o/100*i:o}toBoundedValue(t,i,o){return Math.max(Math.min(t,null!=o?o:t),i)}getSiblingMinWidth(t){var i;const o=null!=this.horizontalSiblingSelector?document.querySelector(this.horizontalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minWidth,t))&&void 0!==i?i:0}return 0}getSiblingMinHeight(t){var i;const o=null!=this.verticalSiblingSelector?document.querySelector(this.verticalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minHeight,t))&&void 0!==i?i:0}return 0}emitResizeStart(t){e((()=>{this.resizeStart.emit(this.computeResizeEventDetails(t))}))}emitResizeEnd(t){e((()=>{this.resizeEnd.emit(this.computeResizeEventDetails(t))}))}computeResizeEventDetails(t){var i,o,h,e,s;const n=null!=this.parentSelector?null===(i=document.querySelector(this.parentSelector))||void 0===i?void 0:i.getBoundingClientRect():void 0;return{location:t,width:this.width,height:this.height,widthPercentage:this.width/(null!==(h=null!==(o=this.maxWidth)&&void 0!==o?o:null==n?void 0:n.width)&&void 0!==h?h:window.innerWidth),heightPercentage:this.height/(null!==(s=null!==(e=this.maxHeight)&&void 0!==e?e:null==n?void 0:n.height)&&void 0!==s?s:window.innerHeight)}}get hostElement(){return s(this)}};r.style=':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}';export{r as R}

package/dist/components/p-7b75e004.js

@@ -1 +0,0 @@
-import{r as s,e as i,h as t,g as e}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const r=class{constructor(t){s(this,t),this.menuClosed=i(this,"menuClosed",7),this.animated=!0,this.open=!1,this.placement=void 0,this.fallbackPlacements=void 0,this.backdrop=!0,this.position=void 0,this.popoverProps=void 0,this.handlePopoverDismiss=this.handlePopoverDismiss.bind(this)}componentDidLoad(){var s;this.addEventListeners(),this.headerSlot=(null===(s=this.hostElement.shadowRoot)||void 0===s?void 0:s.querySelector('slot[name="header"]'))||void 0}disconnectedCallback(){this.removeEventListeners()}render(){return t("vertex-popover",Object.assign({ref:s=>{this.popoverRef=s},open:this.open,animated:this.animated,position:this.position,placement:this.placement,backdrop:this.backdrop,flipBehavior:null!=this.fallbackPlacements?{fallbackPlacements:this.fallbackPlacements}:void 0},this.popoverProps),null==this.position&&t("div",{slot:"anchor"},t("slot",{name:"anchor"})),t("div",{onClick:()=>{this.open=!1,this.menuClosed.emit()},class:o("root",{"has-header":null!=this.headerSlot})},t("slot",{name:"header"}),t("slot",null)))}addEventListeners(){var s;null===(s=this.popoverRef)||void 0===s||s.addEventListener("dismissed",this.handlePopoverDismiss)}removeEventListeners(){var s;null===(s=this.popoverRef)||void 0===s||s.removeEventListener("dismissed",this.handlePopoverDismiss)}handlePopoverDismiss(){this.open=!1,this.menuClosed.emit()}get hostElement(){return e(this)}};r.style=":host{--background-color:var(--vertex-ui-white);--menu-padding:0.19em 0}.root{padding:var(--menu-padding);border:1px solid var(--vertex-ui-neutral-400);border-radius:0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);background-color:var(--background-color);z-index:var(--vertex-ui-context-menu-layer)}.has-header{padding-top:0}";export{r as M}

package/dist/components/p-ea4a2f74.entry.js

@@ -1 +0,0 @@
-export{R as vertex_resizable}from"./p-6ec189d2.js";import"./p-6834631c.js";import"./p-fe062eb0.js";