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

package/dist/components/vertex-color-circle-picker.js

@@ -1,131 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$4 } from './color-swatch.js';
-import { d as defineCustomElement$3 } from './popover.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-400);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";
-
-const ColorCirclePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.handleClick = (event) => {
-      const circle = event.target;
-      this.selectionChanged.emit({
-        color: circle.color,
-        lightened: circle.lightened,
-        darkened: circle.darkened,
-      });
-    };
-    this.parseJsonProp = (prop) => {
-      if (typeof prop === 'string') {
-        return JSON.parse(prop);
-      }
-      return prop;
-    };
-    this.colors = [
-      '#4c87be',
-      '#f3d336',
-      '#6fbb29',
-      '#e38826',
-      '#c72e16',
-      '#8c3681',
-      '#000000',
-      '#ffffff',
-    ];
-    this.labels = {};
-    this.labelPlacement = 'bottom';
-    this.size = 'lg';
-    this.supplementalColors = [];
-    this.theme = 'dark';
-    this.lightenPercentage = 0.25;
-    this.darkenPercentage = 0.25;
-    this.selected = undefined;
-    this.direction = 'horizontal';
-    this.colorArray = [];
-    this.supplementaryColorArray = [];
-    this.labelMap = {};
-  }
-  componentWillLoad() {
-    this.handleColorsChange(this.colors);
-    this.handleSupplementalColorsChange(this.supplementalColors);
-    this.handleLabelsChange(this.labels);
-  }
-  handleColorsChange(newValue) {
-    this.colorArray = this.parseJsonProp(newValue);
-  }
-  handleSupplementalColorsChange(newValue) {
-    this.supplementaryColorArray = this.parseJsonProp(newValue);
-  }
-  handleLabelsChange(newValue) {
-    this.labelMap = this.parseJsonProp(newValue);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classnames('container', {
-        vertical: this.direction === 'vertical',
-      }) }, this.colorArray.map((c, i) => {
-      const label = this.labelMap[c];
-      const swatch = (h("vertex-color-swatch", { class: classnames('circle', {
-          selected: this.selected === c,
-        }), variant: "circle", size: this.size, color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }));
-      return label != null ? (h("vertex-tooltip", { placement: this.labelPlacement, content: label }, swatch)) : (swatch);
-    }))));
-  }
-  static get watchers() { return {
-    "colors": ["handleColorsChange"],
-    "supplementalColors": ["handleSupplementalColorsChange"],
-    "labels": ["handleLabelsChange"]
-  }; }
-  static get style() { return colorCirclePickerCss; }
-}, [1, "vertex-color-circle-picker", {
-    "colors": [1],
-    "labels": [1],
-    "labelPlacement": [1, "label-placement"],
-    "size": [1],
-    "supplementalColors": [1, "supplemental-colors"],
-    "theme": [513],
-    "lightenPercentage": [2, "lighten-percentage"],
-    "darkenPercentage": [2, "darken-percentage"],
-    "selected": [1537],
-    "direction": [1],
-    "colorArray": [32],
-    "supplementaryColorArray": [32],
-    "labelMap": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-color-circle-picker", "vertex-color-swatch", "vertex-popover", "vertex-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-color-circle-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ColorCirclePicker);
-      }
-      break;
-    case "vertex-color-swatch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexColorCirclePicker = ColorCirclePicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { ColorCirclePicker as C, VertexColorCirclePicker, defineCustomElement };
+import{C as o,d as s}from"./p-1KuzBK7Z.js";const p=o,r=s;export{p as VertexColorCirclePicker,r as defineCustomElement}

package/dist/components/vertex-color-picker.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexColorPicker extends Components.VertexColorPicker, HTMLElement {}
 export const VertexColorPicker: {
-  prototype: VertexColorPicker;
-  new (): VertexColorPicker;
+    prototype: VertexColorPicker;
+    new (): VertexColorPicker;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-color-picker.js

@@ -1,75 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { i as isValidHexColor, d as defineCustomElement$2 } from './color-swatch.js';
-
-const colorPickerCss = ":host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.expand-full{width:100%}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{width:100%;display:inline-flex;position:relative;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected-wrapper{position:relative;display:flex;align-items:center}.wrapper.full .selected-wrapper{gap:0.75rem}.selected{position:relative}.wrapper.sm .selected{width:var(--selected-color-width, 1rem);height:var(--selected-color-height, 1rem)}.wrapper.md .selected{width:var(--selected-color-width, 1.25rem);height:var(--selected-color-height, 1.25rem)}.wrapper.lg .selected{width:var(--selected-color-width, 1.5rem);height:var(--selected-color-height, 1.5rem)}.text-wrapper{position:relative;min-width:3.6rem}.selected-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;color:var(--vertex-ui-neutral-700);text-align:center;font-family:var(--vertex-ui-font-family)}.hidden-text{visibility:hidden;pointer-events:none;font-family:var(--vertex-ui-font-family-monospace)}.wrapper.sm .selected-text,.wrapper.sm .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.md .selected-text,.wrapper.md .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.lg .selected-text,.wrapper.lg .hidden-text{font-size:var(--vertex-ui-text-xs)}.no-value{width:100%;height:100%;stroke:var(--vertex-ui-red-400)}.right-gutter{display:flex;align-items:center;margin-left:auto}slot[name=\"right-gutter\"]::slotted(*){padding:0}.input{display:flex;position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
-
-const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueInput = createEvent(this, "valueInput", 7);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.handleInput = (event) => {
-      const input = event.target;
-      this.value = input.value || '';
-    };
-    this.handleChange = (event) => {
-      this.valueChanged.emit(this.value);
-    };
-    this.value = undefined;
-    this.size = 'md';
-    this.variant = 'full';
-    this.expand = 'block';
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("div", { class: classnames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { class: classnames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: classnames('selected-wrapper', this.variant) }, h("div", { class: "selected", title: this.value }, h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { class: "text-wrapper" }, h("div", { class: "hidden-text" }, "#FFFFFF"), h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { class: "right-gutter" }, h("slot", { name: "right-gutter" }))))));
-  }
-  getDisplayedValue() {
-    var _a;
-    if (this.value != null && isValidHexColor(this.value)) {
-      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
-    }
-    return undefined;
-  }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-  static get style() { return colorPickerCss; }
-}, [1, "vertex-color-picker", {
-    "value": [1537],
-    "size": [513],
-    "variant": [513],
-    "expand": [513],
-    "disabled": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-color-picker", "vertex-color-swatch"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-color-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ColorPicker);
-      }
-      break;
-    case "vertex-color-swatch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexColorPicker = ColorPicker;
-const defineCustomElement = defineCustomElement$1;
-
-export { ColorPicker as C, VertexColorPicker, defineCustomElement };
+import{C as o,d as s}from"./p-al_CUADF.js";const a=o,p=s;export{a as VertexColorPicker,p as defineCustomElement}

package/dist/components/vertex-color-swatch.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexColorSwatch extends Components.VertexColorSwatch, HTMLElement {}
 export const VertexColorSwatch: {
-  prototype: VertexColorSwatch;
-  new (): VertexColorSwatch;
+    prototype: VertexColorSwatch;
+    new (): VertexColorSwatch;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-color-swatch.js

@@ -1,6 +1 @@
-import { C as ColorSwatch, d as defineCustomElement$1 } from './color-swatch.js';
-
-const VertexColorSwatch = ColorSwatch;
-const defineCustomElement = defineCustomElement$1;
-
-export { VertexColorSwatch, defineCustomElement };
+import{C as o,d as s}from"./p-B23i1cwy.js";const p=o,r=s;export{p as VertexColorSwatch,r as defineCustomElement}

package/dist/components/vertex-context-menu.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexContextMenu extends Components.VertexContextMenu, HTMLElement {}
 export const VertexContextMenu: {
-  prototype: VertexContextMenu;
-  new (): VertexContextMenu;
+    prototype: VertexContextMenu;
+    new (): VertexContextMenu;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-context-menu.js

@@ -1,125 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './menu.js';
-import { d as defineCustomElement$2 } from './popover.js';
-
-const ContextMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.menuOpened = createEvent(this, "menuOpened", 7);
-    this.menuClosed = createEvent(this, "menuClosed", 7);
-    this.targetSelector = undefined;
-    this.animated = true;
-    this.position = undefined;
-    this.open = false;
-    this.handlePointerDown = this.handlePointerDown.bind(this);
-    this.handlePointerUp = this.handlePointerUp.bind(this);
-    this.handleContextMenu = this.handleContextMenu.bind(this);
-    this.handleMenuClosed = this.handleMenuClosed.bind(this);
-    this.observer = new MutationObserver(() => {
-      if (this.target == null) {
-        this.addEventListeners(this.targetSelector);
-      }
-    });
-  }
-  componentDidLoad() {
-    this.addEventListeners(this.targetSelector);
-    this.observer.observe(document.body, {
-      childList: true,
-      attributes: true,
-      subtree: true,
-    });
-  }
-  disconnectedCallback() {
-    this.removeEventListeners();
-    this.observer.disconnect();
-  }
-  handleTargetSelectorChange(targetSelector) {
-    if (targetSelector != null) {
-      this.removeEventListeners();
-      this.addEventListeners(targetSelector);
-    }
-  }
-  render() {
-    return (h("vertex-menu", { open: this.open, animated: this.animated, position: this.position, fallbackPlacements: [
-        'bottom-end',
-        'top-start',
-        'top-end',
-        'right',
-        'left',
-      ], onMenuClosed: this.handleMenuClosed }, h("slot", null)));
-  }
-  addEventListeners(targetSelector) {
-    this.target =
-      document.querySelector(targetSelector) || undefined;
-    if (this.target != null) {
-      this.target.addEventListener('contextmenu', this.handleContextMenu);
-      this.target.addEventListener('pointerdown', this.handlePointerDown);
-      this.target.addEventListener('pointerup', this.handlePointerUp);
-    }
-  }
-  removeEventListeners() {
-    var _a, _b, _c;
-    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('contextmenu', this.handleContextMenu);
-    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerdown', this.handlePointerDown);
-    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', this.handlePointerUp);
-    this.target = undefined;
-  }
-  handleContextMenu(e) {
-    e.preventDefault();
-  }
-  handlePointerDown(e) {
-    if (e.buttons === 2) {
-      this.position = { x: e.clientX, y: e.clientY };
-    }
-  }
-  handlePointerUp(e) {
-    var _a;
-    if (e.clientX === ((_a = this.position) === null || _a === void 0 ? void 0 : _a.x) && e.clientY === this.position.y) {
-      this.open = true;
-      this.menuOpened.emit(e);
-    }
-  }
-  handleMenuClosed() {
-    this.open = false;
-    this.menuClosed.emit();
-  }
-  static get watchers() { return {
-    "targetSelector": ["handleTargetSelectorChange"]
-  }; }
-}, [1, "vertex-context-menu", {
-    "targetSelector": [1, "target-selector"],
-    "animated": [4],
-    "position": [32],
-    "open": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-context-menu", "vertex-menu", "vertex-popover"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-context-menu":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ContextMenu);
-      }
-      break;
-    case "vertex-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexContextMenu = ContextMenu;
-const defineCustomElement = defineCustomElement$1;
-
-export { ContextMenu as C, VertexContextMenu, defineCustomElement };
+import{C as o,d as s}from"./p-DGZHaSjz.js";const a=o,p=s;export{a as VertexContextMenu,p as defineCustomElement}

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexDialog extends Components.VertexDialog, HTMLElement {}
 export const VertexDialog: {
-  prototype: VertexDialog;
-  new (): VertexDialog;
+    prototype: VertexDialog;
+    new (): VertexDialog;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/vertex-dialog.js

@@ -1,265 +1 @@
-import { readTask, proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
-
-function readDOM(callback) {
-  readTask(callback);
-}
-function getBoundingClientRect(el) {
-  return el.getBoundingClientRect();
-}
-function getComputedStyle(el) {
-  return window.getComputedStyle(el);
-}
-
-const dialogCss = ":host{--backdrop-color:rgba(0,0,0,0.4);--z-index:var(--vertex-ui-dialog-layer)}.hidden>.dialog{opacity:0;width:0;height:0;visibility:hidden}.hidden{pointer-events:none;display:none}.close{margin-left:auto}.shown{display:flex;justify-content:center;align-items:center}.header{width:100%;display:flex;font-size:1.125rem;height:2rem;margin-bottom:1rem}.body{position:relative;width:100%;height:100%}.dialog-backdrop{position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:auto;background-color:var(--backdrop-color);padding:2rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.dialog{background-color:var(--vertex-ui-white);position:absolute;align-items:center;color:var(--vertex-ui-neutral-800);font-family:var(--vertex-ui-font-family);overflow:hidden}.dialog.no-select{user-select:none}.overlay{border:1px solid var(--vertex-ui-neutral-300);border-radius:6px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);display:flex}.overlay.resizable{min-height:var(--min-height, var(--vertex-ui-min-dialog-height))}.fullscreen{height:100vh;width:100vw}.contents{display:flex;position:relative;flex-direction:column;padding:1.5rem;width:100%;height:100%;box-sizing:border-box}.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}.footer{display:flex}.resize{cursor:nwse-resize;position:absolute;bottom:0.125rem;right:0.125rem}.resize-cursor{cursor:nwse-resize}";
-
-const Dialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.backdropClick = createEvent(this, "backdropClick", 7);
-    this.closed = createEvent(this, "closed", 7);
-    this.handleKeyDown = (_) => {
-      if (this.open) {
-        this.open = false;
-      }
-    };
-    this.handlePointerDown = (e) => {
-      this.isResizing = true;
-      readDOM(() => {
-        if (this.dialogElement != null) {
-          const boundingRect = getBoundingClientRect(this.dialogElement);
-          this.initialDialogBoundingRect = boundingRect;
-          this.lastPointerPosition = {
-            x: boundingRect.right,
-            y: boundingRect.bottom,
-          };
-        }
-      });
-      window.addEventListener('pointermove', this.handlePointerMove);
-      window.addEventListener('pointerup', this.handlePointerUp);
-    };
-    this.handlePointerMove = (e) => {
-      if (this.lastPointerPosition != null &&
-        this.initialDialogBoundingRect != null &&
-        this.width != null &&
-        this.height != null) {
-        const diffX = e.clientX - this.lastPointerPosition.x;
-        const diffY = e.clientY - this.lastPointerPosition.y;
-        const expectedWidth = this.width + diffX * 2;
-        const expectedHeight = this.height + diffY * 2;
-        this.width = this.constrainDimension(expectedWidth, this.getMinWidth(), this.getMaxWidth());
-        this.height = this.constrainDimension(expectedHeight, this.getMinHeight(), this.getMaxHeight());
-        this.lastPointerPosition = {
-          x: this.constrainX(e.clientX, this.width, this.initialDialogBoundingRect),
-          y: this.constrainY(e.clientY, this.height, this.initialDialogBoundingRect),
-        };
-      }
-    };
-    this.handlePointerUp = (e) => {
-      this.lastPointerPosition = undefined;
-      this.initialDialogBoundingRect = undefined;
-      this.isResizing = false;
-      window.removeEventListener('pointermove', this.handlePointerMove);
-      window.removeEventListener('pointerup', this.handlePointerUp);
-    };
-    this.constrainDimension = (value, min, max) => {
-      return Math.min(Math.max(value, min), max);
-    };
-    this.constrainX = (x, width, bounds) => {
-      if (width <= this.getMinWidth()) {
-        return bounds.right;
-      }
-      else if (width >= this.getMinHeight()) {
-        return bounds.right + (width - bounds.width) / 2;
-      }
-      return x;
-    };
-    this.constrainY = (y, height, bounds) => {
-      if (height <= this.getMinHeight()) {
-        return bounds.bottom;
-      }
-      else if (height >= this.getMaxHeight()) {
-        return bounds.bottom + (height - bounds.height) / 2;
-      }
-      return y;
-    };
-    this.getMaxWidth = () => {
-      var _a;
-      return (_a = this.maxWidth) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
-    };
-    this.getMaxHeight = () => {
-      var _a;
-      return (_a = this.maxHeight) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
-    };
-    this.getMinWidth = () => {
-      var _a;
-      return (_a = this.minWidth) !== null && _a !== void 0 ? _a : Number.NEGATIVE_INFINITY;
-    };
-    this.getMinHeight = () => {
-      var _a;
-      return (_a = this.minHeight) !== null && _a !== void 0 ? _a : Number.NEGATIVE_INFINITY;
-    };
-    this.resize = () => {
-      readDOM(() => {
-        if (this.backdropElement != null) {
-          const styles = getComputedStyle(this.backdropElement);
-          const boundaryPadding = parseFloat(styles.padding);
-          this.boundaryPadding = isNaN(boundaryPadding) ? 0 : boundaryPadding;
-          this.maxHeight = window.innerHeight - this.boundaryPadding * 2;
-          this.maxWidth = window.innerWidth - this.boundaryPadding * 2;
-          this.width =
-            this.width != null ? Math.min(this.maxWidth, this.width) : undefined;
-          this.height =
-            this.height != null
-              ? Math.min(this.maxHeight, this.height)
-              : undefined;
-        }
-      });
-    };
-    this.open = false;
-    this.fullscreen = false;
-    this.resizable = false;
-    this.width = undefined;
-    this.height = undefined;
-    this.minWidth = undefined;
-    this.minHeight = undefined;
-    this.maxWidth = undefined;
-    this.maxHeight = undefined;
-    this.isResizing = false;
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.mutationObserver = new MutationObserver(this.resize);
-    this.resizeObserver = new ResizeObserver(this.resize);
-  }
-  componentDidLoad() {
-    window.addEventListener('resize', this.resize);
-    this.mutationObserver.observe(this.hostEl, {
-      attributes: true,
-      attributeFilter: ['style'],
-    });
-    this.resizeObserver.observe(this.hostEl);
-  }
-  componentWillRender() {
-    if (this.open && this.width == null && this.height == null) {
-      readDOM(() => {
-        if (this.dialogElement != null) {
-          const boundingRect = getBoundingClientRect(this.dialogElement);
-          this.minWidth = boundingRect.width;
-          this.minHeight = boundingRect.height;
-          this.width = this.minWidth;
-          this.height = this.minHeight;
-          this.resize();
-        }
-      });
-    }
-  }
-  disconnectedCallback() {
-    this.width = undefined;
-    this.height = undefined;
-    this.lastPointerPosition = undefined;
-    this.isResizing = false;
-  }
-  clearComputedValues() {
-    this.width = undefined;
-    this.height = undefined;
-    this.minWidth = undefined;
-    this.minHeight = undefined;
-    this.maxWidth = undefined;
-    this.maxHeight = undefined;
-  }
-  updateOpened(open) {
-    if (!open) {
-      this.closed.emit();
-    }
-  }
-  keyDownListener(ev) {
-    if (this.open && ev.key === 'Escape') {
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.open = false;
-    }
-  }
-  render() {
-    var _a, _b;
-    const width = this.width != null || this.minWidth != null
-      ? `${(_a = this.width) !== null && _a !== void 0 ? _a : this.minWidth}px`
-      : undefined;
-    const height = this.height != null || this.minHeight != null
-      ? `${(_b = this.height) !== null && _b !== void 0 ? _b : this.minHeight}px`
-      : undefined;
-    return (h("div", { ref: (el) => {
-        this.backdropElement = el;
-      }, onPointerDown: () => {
-        this.backdropClick.emit();
-      }, class: classnames('dialog-backdrop', {
-        hidden: !this.open,
-        shown: this.open,
-        'resize-cursor': this.isResizing,
-      }) }, h("div", { ref: (el) => {
-        this.dialogElement = el;
-      }, class: classnames('dialog', {
-        resizable: this.resizable,
-        fullscreen: this.fullscreen,
-        overlay: !this.fullscreen,
-        'no-select': this.lastPointerPosition != null,
-      }), onPointerDown: (e) => {
-        e.stopPropagation();
-      }, style: this.resizable && !this.fullscreen
-        ? {
-          width,
-          height,
-        }
-        : undefined }, h("div", { class: "contents" }, h("slot", { name: "header" }, h("div", { class: "header" }, h("slot", { name: "heading" }), h("div", { class: "close" }, h("slot", { name: "close-dialog" }, h("vertex-icon-button", { onPointerDown: () => {
-        this.open = false;
-      }, iconSize: "sm", iconName: "close" }))))), h("div", { class: "body" }, h("slot", null)), h("div", { class: "footer" }, h("slot", { name: "footer" }, h("slot", { name: "footer-actions" }))), this.resizable && !this.fullscreen && (h("vertex-icon", { class: "resize", onPointerDown: this.handlePointerDown, name: "resize", size: "xs" }))))));
-  }
-  get hostEl() { return this; }
-  static get watchers() { return {
-    "resizable": ["clearComputedValues"],
-    "open": ["updateOpened"]
-  }; }
-  static get style() { return dialogCss; }
-}, [1, "vertex-dialog", {
-    "open": [1540],
-    "fullscreen": [4],
-    "resizable": [4],
-    "width": [32],
-    "height": [32],
-    "minWidth": [32],
-    "minHeight": [32],
-    "maxWidth": [32],
-    "maxHeight": [32],
-    "isResizing": [32]
-  }, [[4, "keydown", "keyDownListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-dialog", "vertex-icon", "vertex-icon-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-dialog":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Dialog);
-      }
-      break;
-    case "vertex-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexDialog = Dialog;
-const defineCustomElement = defineCustomElement$1;
-
-export { Dialog as D, VertexDialog, defineCustomElement };
+import{D as o,d as s}from"./p-KilWQmEJ.js";const m=o,p=s;export{m as VertexDialog,p as defineCustomElement}

package/dist/components/vertex-draggable-popover.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexDraggablePopover extends Components.VertexDraggablePopover, HTMLElement {}
 export const VertexDraggablePopover: {
-  prototype: VertexDraggablePopover;
-  new (): VertexDraggablePopover;
+    prototype: VertexDraggablePopover;
+    new (): VertexDraggablePopover;
 };
 /**
  * Used to define this component and all nested components recursively.