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

package/dist/components/vertex-click-to-edit-textfield.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$5 } from './auto-resize-textarea.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './text-field.js';
+
+const ClickToEditTextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputFocus = createEvent(this, "inputFocus", 7);
+    this.inputBlur = createEvent(this, "inputBlur", 7);
+    this.inputInput = createEvent(this, "inputInput", 7);
+    this.inputChange = createEvent(this, "inputChange", 7);
+    this.inputSubmit = createEvent(this, "inputSubmit", 7);
+    var _a;
+    this.handleKeyDown = (ev) => {
+      var _a, _b;
+      if (ev.detail.key === 'Enter' && !this.multiline) {
+        (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.blurInput();
+      }
+      if (ev.detail.key === 'Escape') {
+        this.resetOnEscape();
+        (_b = this.textFieldRef) === null || _b === void 0 ? void 0 : _b.blurInput();
+      }
+    };
+    this.resetOnEscape = () => {
+      if (this.textFieldRef != null && this.defaultValue != null) {
+        this.textFieldRef.updateInput(this.defaultValue);
+        this.editing = false;
+      }
+    };
+    this.handleSubmit = async () => {
+      var _a;
+      const value = await ((_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.getInputValue());
+      if (value != null && value !== this.defaultValue) {
+        this.defaultValue = value;
+        this.inputSubmit.emit({ value });
+      }
+      this.editing = false;
+    };
+    this.placeholder = undefined;
+    this.fontSize = 'standard';
+    this.disabled = undefined;
+    this.multiline = false;
+    this.minRows = undefined;
+    this.maxRows = undefined;
+    this.value = '';
+    this.autoFocus = undefined;
+    this.editing = false;
+    this.hasError = undefined;
+    this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handleInputFocus = this.handleInputFocus.bind(this);
+    this.handleInputInput = this.handleInputInput.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
+  }
+  render() {
+    return (h("div", { class: "click-to-edit" }, h("div", { class: "click-to-edit-text" }, h("vertex-textfield", { ref: (element) => {
+        this.textFieldRef = element;
+      }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
+  }
+  renderIcon() {
+    if (this.editing) {
+      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "edit-icon" }, h("div", { class: "click-to-edit-button" }, h("vertex-icon-button", { iconSize: "sm", iconName: "check" })))));
+    }
+    else if (!this.disabled) {
+      return (h("div", { class: "click-to-edit-icon-wrapper" }, h("slot", { name: "pencil-icon" }, h("vertex-icon", { size: "sm", name: "pencil", class: classnames('icon-visibility', 'hover-icon') }))));
+    }
+    else {
+      return h("div", null);
+    }
+  }
+  handleInputBlur(event) {
+    event.stopPropagation();
+    this.inputBlur.emit();
+    this.handleSubmit();
+  }
+  handleInputFocus(event) {
+    var _a;
+    event.stopPropagation();
+    this.inputFocus.emit();
+    (_a = this.textFieldRef) === null || _a === void 0 ? void 0 : _a.selectAll();
+    this.editing = true;
+  }
+  handleInputInput(event) {
+    event.stopPropagation();
+    this.inputInput.emit({ value: event.detail.value });
+  }
+  handleInputChange(event) {
+    event.stopPropagation();
+    this.inputChange.emit({ value: event.detail.value });
+  }
+  handleValueChanged(newValue) {
+    // If the value changed outside of edit mode, then update the default value
+    if (!this.editing) {
+      this.defaultValue = newValue === null || newValue === void 0 ? void 0 : newValue.toString();
+    }
+  }
+  static get watchers() { return {
+    "value": ["handleValueChanged"]
+  }; }
+}, [6, "vertex-click-to-edit-textfield", {
+    "placeholder": [1],
+    "fontSize": [1, "font-size"],
+    "disabled": [516],
+    "multiline": [4],
+    "minRows": [2, "min-rows"],
+    "maxRows": [2, "max-rows"],
+    "value": [1032],
+    "autoFocus": [4, "auto-focus"],
+    "editing": [1540],
+    "hasError": [4, "has-error"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-click-to-edit-textfield", "vertex-auto-resize-textarea", "vertex-icon", "vertex-icon-button", "vertex-textfield"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-click-to-edit-textfield":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ClickToEditTextField);
+      }
+      break;
+    case "vertex-auto-resize-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-textfield":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexClickToEditTextfield = ClickToEditTextField;
+const defineCustomElement = defineCustomElement$1;
+
+export { ClickToEditTextField as C, VertexClickToEditTextfield, defineCustomElement };

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

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

package/dist/components/vertex-collapsible.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './expandable.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+
+const collapsibleCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-color:var(--vertex-ui-blue-700)}.collapsible-target{width:100%;display:flex;align-items:center;cursor:pointer;padding:0.75rem 0.25rem;outline:none}.collapsible-target:focus-visible{border-radius:0.25rem;box-shadow:0 0 0 1px var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-target:focus-visible,.collapsible-target:hover{color:var(--hover-color, var(--vertex-ui-blue-700))}.collapsible-expand{display:flex;justify-content:center;align-items:center;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;margin-left:auto}.rotated{transform:rotateZ(90deg)}.collapsible-content{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);box-sizing:border-box}";
+
+const Collapsible = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.open = false;
+  }
+  render() {
+    return (h("vertex-expandable", { controlled: true, expanded: this.open }, h("button", { slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (h("span", null, this.label)) : (h("slot", { name: "label" })), h("div", { class: classnames('collapsible-expand', {
+        rotated: this.open,
+      }) }, h("slot", { name: "expand-icon" }, h("vertex-icon", { name: "caret-right" })))), h("div", { class: "collapsible-content-container" }, h("slot", null))));
+  }
+  setOpen(open) {
+    this.open = open;
+  }
+  static get style() { return collapsibleCss; }
+}, [1, "vertex-collapsible", {
+    "label": [1],
+    "open": [1540]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-collapsible", "vertex-expandable", "vertex-icon", "vertex-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-collapsible":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Collapsible);
+      }
+      break;
+    case "vertex-expandable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      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 VertexCollapsible = Collapsible;
+const defineCustomElement = defineCustomElement$1;
+
+export { Collapsible as C, VertexCollapsible, defineCustomElement };

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

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

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

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './color-swatch.js';
+
+const colorCirclePickerCss = ":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-700);--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.colorArray = [];
+    this.supplementaryColorArray = [];
+    this.handleClick = (event) => {
+      const circle = event.target;
+      this.selectionChanged.emit({
+        color: circle.color,
+        lightened: circle.lightened,
+        darkened: circle.darkened,
+      });
+    };
+    this.colors = [
+      '#4c87be',
+      '#f3d336',
+      '#6fbb29',
+      '#e38826',
+      '#c72e16',
+      '#8c3681',
+      '#000000',
+      '#ffffff',
+    ];
+    this.supplementalColors = [];
+    this.theme = 'dark';
+    this.lightenPercentage = 0.25;
+    this.darkenPercentage = 0.25;
+    this.selected = undefined;
+    this.direction = 'horizontal';
+  }
+  componentWillLoad() {
+    this.handleColorsChange(this.colors);
+    this.handleSupplementalColorsChange(this.supplementalColors);
+  }
+  handleColorsChange(newValue) {
+    if (typeof newValue === 'string') {
+      this.colorArray = JSON.parse(newValue);
+    }
+    else {
+      this.colorArray = newValue;
+    }
+  }
+  handleSupplementalColorsChange(newValue) {
+    if (typeof newValue === 'string') {
+      this.supplementaryColorArray = JSON.parse(newValue);
+    }
+    else {
+      this.supplementaryColorArray = newValue;
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('container', {
+        vertical: this.direction === 'vertical',
+      }) }, this.colorArray.map((c, i) => (h("vertex-color-swatch", { class: classnames('circle', {
+        selected: this.selected === c,
+      }), variant: "circle", size: "lg", color: c, supplementalColor: this.supplementaryColorArray[i], onClick: this.handleClick, lightenPercentage: this.lightenPercentage, darkenPercentage: this.darkenPercentage, theme: this.theme }))))));
+  }
+  static get watchers() { return {
+    "colors": ["handleColorsChange"],
+    "supplementalColors": ["handleSupplementalColorsChange"]
+  }; }
+  static get style() { return colorCirclePickerCss; }
+}, [1, "vertex-color-circle-picker", {
+    "colors": [1],
+    "supplementalColors": [1, "supplemental-colors"],
+    "theme": [513],
+    "lightenPercentage": [2, "lighten-percentage"],
+    "darkenPercentage": [2, "darken-percentage"],
+    "selected": [1537],
+    "direction": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-color-circle-picker", "vertex-color-swatch"];
+  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$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexColorCirclePicker = ColorCirclePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { ColorCirclePicker as C, VertexColorCirclePicker, defineCustomElement };

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

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

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

@@ -0,0 +1,75 @@
+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}.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 };

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

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

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

@@ -0,0 +1,6 @@
+import { C as ColorSwatch, d as defineCustomElement$1 } from './color-swatch.js';
+
+const VertexColorSwatch = ColorSwatch;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexColorSwatch, defineCustomElement };

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

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

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

@@ -0,0 +1,125 @@
+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 };

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

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