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

package/dist/components/vertex-dialog.js

@@ -0,0 +1,263 @@
+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') {
+      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 };

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

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

package/dist/components/vertex-draggable-popover.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, readTask, 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 './popover.js';
+
+const draggablePopoverCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{position:fixed;top:0;left:0;white-space:nowrap;--background-color:var(--vertex-ui-white);--color:var(--vertex-ui-neutral-700);--font-family:var(--vertex-ui-font-family);--font-size:var(--vertex-ui-text-base);--drag-icon:all-scroll;--dragging-icon:all-scroll}.container{display:flex;column-gap:0.5rem;padding:0.8125rem 0.5625rem 1rem 0.625rem;background-color:var(--background-color);opacity:0.95;border-radius:0.5rem;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);color:var(--color);font-family:var(--font-family);font-size:var(--font-size)}.container:not(.dragging) .icon{cursor:var(--drag-icon)}.container.dragging{cursor:var(--dragging-icon)}.container.dragging *{user-select:none}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}";
+
+const DraggablePopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.positionChanged = createEvent(this, "positionChanged", 7);
+    this.handlePointerDown = (event) => {
+      this.updateAnchorPosition();
+      this.lastPosition = { x: event.clientX, y: event.clientY };
+      this.dragging = true;
+      window.addEventListener('pointermove', this.handlePointerMove);
+      window.addEventListener('pointerup', this.handlePointerUp);
+    };
+    this.handlePointerMove = (event) => {
+      const currentPosition = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+      const deltaX = currentPosition.x - this.lastPosition.x;
+      const deltaY = currentPosition.y - this.lastPosition.y;
+      this.anchorPosition = {
+        x: this.anchorPosition.x + deltaX,
+        y: this.anchorPosition.y + deltaY,
+      };
+      this.lastPosition = currentPosition;
+    };
+    this.handlePointerUp = (event) => {
+      this.updateAnchorPosition();
+      this.lastPosition = this.anchorPosition;
+      this.dragging = false;
+      window.removeEventListener('pointermove', this.handlePointerMove);
+      window.removeEventListener('pointerup', this.handlePointerUp);
+    };
+    this.updateAnchorPosition = () => {
+      readTask(() => {
+        if (this.containerEl != null) {
+          const rect = this.containerEl.getBoundingClientRect();
+          this.anchorPosition = { x: rect.x, y: rect.y };
+        }
+      });
+    };
+    this.position = undefined;
+    this.boundarySelector = undefined;
+    this.boundaryPadding = undefined;
+    this.anchorPosition = { x: 0, y: 0 };
+    this.lastPosition = { x: 0, y: 0 };
+    this.dragging = false;
+  }
+  connectedCallback() {
+    this.updatePosition(this.position);
+  }
+  updatePosition(position) {
+    if (position != null) {
+      this.anchorPosition =
+        typeof position === 'object' ? position : JSON.parse(position);
+      this.lastPosition = this.anchorPosition;
+    }
+  }
+  lastPositionChanged() {
+    this.positionChanged.emit(this.anchorPosition);
+  }
+  render() {
+    return (h("vertex-popover", { position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", updateOnResize: !this.dragging, overflowBehavior: {
+        altBoundary: true,
+        padding: this.boundaryPadding,
+      }, flipBehavior: {
+        fallbackPlacements: [],
+        fallbackStrategy: 'initialPlacement',
+      } }, h("div", { ref: (el) => (this.containerEl = el), class: classnames('container', { dragging: this.dragging }) }, h("div", { class: "icon-container" }, h("div", { class: "icon", onPointerDown: this.handlePointerDown }, h("slot", { name: "drag-icon" }, h("vertex-icon", { size: "sm", name: "drag-indicator" })))), h("slot", null))));
+  }
+  static get watchers() { return {
+    "position": ["updatePosition"],
+    "lastPosition": ["lastPositionChanged"]
+  }; }
+  static get style() { return draggablePopoverCss; }
+}, [1, "vertex-draggable-popover", {
+    "position": [1],
+    "boundarySelector": [1, "boundary-selector"],
+    "boundaryPadding": [2, "boundary-padding"],
+    "anchorPosition": [32],
+    "lastPosition": [32],
+    "dragging": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-draggable-popover", "vertex-icon", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-draggable-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DraggablePopover);
+      }
+      break;
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexDraggablePopover = DraggablePopover;
+const defineCustomElement = defineCustomElement$1;
+
+export { DraggablePopover as D, VertexDraggablePopover, defineCustomElement };

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

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

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

@@ -0,0 +1,64 @@
+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 DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.menuOpened = createEvent(this, "menuOpened", 7);
+    this.menuClosed = createEvent(this, "menuClosed", 7);
+    this.animated = true;
+    this.placement = 'bottom-end';
+    this.open = false;
+    this.handleClick = this.handleClick.bind(this);
+    this.handleMenuClosed = this.handleMenuClosed.bind(this);
+  }
+  render() {
+    return (h("vertex-menu", { open: this.open, animated: this.animated, placement: this.placement, onMenuClosed: this.handleMenuClosed }, h("div", { slot: "anchor", onClick: this.handleClick }, h("slot", { name: "anchor" })), h("div", { slot: "header" }, h("slot", { name: "header" })), h("slot", null)));
+  }
+  handleClick(e) {
+    if (!this.open) {
+      this.open = true;
+      this.menuOpened.emit(e);
+    }
+  }
+  handleMenuClosed() {
+    this.open = false;
+    this.menuClosed.emit();
+  }
+}, [1, "vertex-dropdown-menu", {
+    "animated": [4],
+    "placement": [1],
+    "open": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-dropdown-menu", "vertex-menu", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-dropdown-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownMenu);
+      }
+      break;
+    case "vertex-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexDropdownMenu = DropdownMenu;
+const defineCustomElement = defineCustomElement$1;
+
+export { DropdownMenu as D, VertexDropdownMenu, defineCustomElement };

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

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

package/dist/components/vertex-expandable.js

@@ -0,0 +1,6 @@
+import { E as Expandable, d as defineCustomElement$1 } from './expandable.js';
+
+const VertexExpandable = Expandable;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexExpandable, defineCustomElement };

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

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

package/dist/components/vertex-help-tooltip.js

@@ -0,0 +1,67 @@
+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 helpTooltipCss = ".root{margin:var(--padding-4)}.header{margin-bottom:var(--padding-2);font-size:0.95em;font-weight:normal;color:var(--neutral-800)}.body,.learn-more{width:225px;font-size:0.85em;color:var(--neutral-700);line-height:1.2em}.learn-more{margin-top:var(--padding-4);color:var(--blue-700);text-align:right}";
+
+const HelpTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.menuOpened = createEvent(this, "menuOpened", 7);
+    this.menuClosed = createEvent(this, "menuClosed", 7);
+    this.animated = true;
+    this.placement = 'bottom-end';
+    this.open = false;
+    this.handleClick = this.handleClick.bind(this);
+    this.handleMenuClosed = this.handleMenuClosed.bind(this);
+  }
+  render() {
+    return (h("vertex-menu", { open: this.open, animated: this.animated, placement: this.placement, onMenuClosed: this.handleMenuClosed }, h("div", { slot: "anchor", onClick: this.handleClick }, h("slot", { name: "anchor" })), h("div", { class: "root" }, h("div", { slot: "header", class: "header" }, h("slot", { name: "header" })), h("div", { class: "body" }, h("slot", { name: "body" })), h("div", { class: "learn-more" }, h("slot", { name: "learnMore" })))));
+  }
+  handleClick(e) {
+    if (!this.open) {
+      this.open = true;
+      this.menuOpened.emit(e);
+    }
+  }
+  handleMenuClosed() {
+    this.open = false;
+    this.menuClosed.emit();
+  }
+  static get style() { return helpTooltipCss; }
+}, [1, "vertex-help-tooltip", {
+    "animated": [4],
+    "placement": [1],
+    "open": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-help-tooltip", "vertex-menu", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-help-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelpTooltip);
+      }
+      break;
+    case "vertex-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexHelpTooltip = HelpTooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelpTooltip as H, VertexHelpTooltip, defineCustomElement };

package/dist/components/vertex-icon-button.d.ts

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

package/dist/components/vertex-icon-button.js

@@ -0,0 +1,6 @@
+import { I as IconButton, d as defineCustomElement$1 } from './icon-button.js';
+
+const VertexIconButton = IconButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexIconButton, defineCustomElement };

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

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

package/dist/components/vertex-icon.js

@@ -0,0 +1,6 @@
+import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+
+const VertexIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexIcon, defineCustomElement };

package/dist/components/vertex-logo-loading.d.ts

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

package/dist/components/vertex-logo-loading.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const logoLoadingCss = "@keyframes color-loading{0%{transform:translate(30px, -50px)}10%{transform:translateY(0)}70%{opacity:1}75%,100%{opacity:0}}@keyframes center-loading{0%{transform:translate(-30px, 50px)}10%{transform:translate(0, 0)}70%{opacity:1}75%,100%{opacity:0}}.container{width:100%;height:100%}.visual-center{transform:translateX(7%)}.color-loading-fill{animation:color-loading 2.5s infinite linear}.center-loading-fill{animation:center-loading 2.5s infinite linear}";
+
+const LogoLoading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 100 100" }, h("defs", null, h("mask", { id: "orange-loading-diamond" }, h("polygon", { points: "70.75 50.7 57.09 74.45 84.32 74.42 98 50.66 70.75 50.7", fill: "#fff", class: "color-loading-fill" })), h("mask", { id: "blue-loading-diamond" }, h("polygon", { points: "16.05 98.04 2.43 74.44 16.06 50.78 29.68 74.44 16.05 98.04", fill: "#fff", class: "color-loading-fill" })), h("mask", { id: "green-loading-diamond" }, h("polygon", { points: "16.05 3.53 2.43 27.13 16.06 50.78 29.68 27.12 16.05 3.53", fill: "#fff", class: "color-loading-fill" })), h("mask", { id: "left-center-loading-diamond" }, h("polygon", { points: "29.68 27.18 16.06 50.78 29.69 74.44 43.31 50.78 29.68 27.18", fill: "#fff", class: "center-loading-fill" })), h("mask", { id: "right-center-loading-diamond" }, h("polygon", { points: "43.31 50.78 29.68 74.46 57.09 74.45 70.75 50.7 43.31 50.78", fill: "#fff", class: "center-loading-fill" }))), h("polyline", { points: "57.09 27.11 70.75 50.7 70.67 50.84 57.09 74.45 84.32 74.42 98 50.66 84.34 27.08 57.09 27.11", fill: "#f90" }), h("polyline", { mask: "url(#orange-loading-diamond)", points: "70.75 50.7 57.09 74.45 84.32 74.42 98 50.66 70.75 50.7", fill: "#d37f00" }), h("polygon", { points: "29.68 74.44 57.09 74.45 43.46 98.05 16.05 98.04 2.43 74.44 16.06 50.78 29.68 74.44", fill: "#09c" }), h("polygon", { mask: "url(#blue-loading-diamond)", points: "16.05 98.04 2.43 74.44 16.06 50.78 29.68 74.44 16.05 98.04", fill: "#007fa9" }), h("polygon", { points: "29.68 27.12 57.09 27.11 43.46 3.52 16.05 3.53 2.43 27.13 16.06 50.78 29.68 27.12", fill: "#00b600" }), h("polygon", { mask: "url(#green-loading-diamond)", points: "16.05 3.53 2.43 27.13 16.06 50.78 29.68 27.12 16.05 3.53", fill: "#009700" }), h("polygon", { mask: "url(#left-center-loading-diamond)", points: "29.68 27.18 16.06 50.78 29.69 74.44 43.31 50.78 29.68 27.18", fill: "#bdbdbd" }), h("polygon", { mask: "url(#right-center-loading-diamond)", points: "43.31 50.78 29.68 74.46 57.09 74.45 70.75 50.7 43.31 50.78", fill: "#e0e0e0" }))));
+  }
+  static get style() { return logoLoadingCss; }
+}, [1, "vertex-logo-loading"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-logo-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-logo-loading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LogoLoading);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexLogoLoading = LogoLoading;
+const defineCustomElement = defineCustomElement$1;
+
+export { LogoLoading as L, VertexLogoLoading, defineCustomElement };