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

package/dist/esm/draggable-popover-9f9b7c97.js

@@ -1,81 +0,0 @@
-import { r as registerInstance, e as createEvent, c as readTask, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.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);--background-opacity:0.95;--contents-opacity:0.95;--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:rgb(from var(--background-color) r g b / var(--background-opacity));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}.contents{opacity:var(--contents-opacity)}";
-
-const DraggablePopover = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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("div", { class: "contents" }, h("slot", null)))));
-  }
-  static get watchers() { return {
-    "position": ["updatePosition"],
-    "lastPosition": ["lastPositionChanged"]
-  }; }
-};
-DraggablePopover.style = draggablePopoverCss;
-
-export { DraggablePopover as D };

package/dist/esm/dropdown-menu-1598ba20.js

@@ -1,29 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
-
-const DropdownMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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();
-  }
-};
-
-export { DropdownMenu as D };

package/dist/esm/expandable-b487cb00.js

@@ -1,70 +0,0 @@
-import { r as registerInstance, e as createEvent, c as readTask, h, H as Host } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const expandableCss = ":host{display:flex}.content{display:flex;flex-direction:column;transition:height 1s}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}.expanded-content{overflow:hidden}.expanded-content.animated{transition-property:max-height;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transform-origin:top}";
-
-const Expandable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.expand = createEvent(this, "expand", 7);
-    this.collapse = createEvent(this, "collapse", 7);
-    this.handleTransitionEnd = () => {
-      this.collapsing = false;
-      this.expanding = false;
-    };
-    this.handleExpand = () => {
-      this.expanded = !this.expanded;
-      if (this.expanded) {
-        this.expanding = true;
-        this.expand.emit();
-      }
-      else {
-        this.collapsing = true;
-        this.collapse.emit();
-      }
-    };
-    this.updateScrollHeight = () => {
-      readTask(() => {
-        var _a;
-        const scrollHeight = (_a = this.expandContainer) === null || _a === void 0 ? void 0 : _a.scrollHeight;
-        if (this.contentScrollHeight !== scrollHeight) {
-          this.contentScrollHeight = scrollHeight;
-        }
-      });
-    };
-    this.getMaxHeight = () => {
-      if (this.expanded) {
-        return `${this.contentScrollHeight}px`;
-      }
-      else if (!this.expanded) {
-        return '0';
-      }
-      return undefined;
-    };
-    this.expanded = false;
-    this.expanding = false;
-    this.collapsing = false;
-    this.controlled = false;
-    this.expandType = 'content';
-    this.animated = true;
-    this.contentScrollHeight = undefined;
-  }
-  componentDidLoad() {
-    this.updateScrollHeight();
-  }
-  componentDidRender() {
-    this.updateScrollHeight();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "content" }, this.expandType === 'content' && h("slot", { name: "header" }), h("div", { class: classnames('expanded-content', {
-        animated: this.animated,
-      }), ref: (el) => {
-        this.expandContainer = el;
-      }, style: {
-        maxHeight: this.getMaxHeight(),
-      }, onTransitionEnd: this.handleTransitionEnd }, this.expandType === 'header' ? (h("slot", { name: "header", onSlotchange: this.updateScrollHeight })) : (h("slot", { onSlotchange: this.updateScrollHeight }))), this.expandType === 'header' && h("slot", null)), !this.controlled ? (h("div", { class: "icon-container", onClick: this.handleExpand }, h("slot", { name: "expand-icon" }, h("vertex-icon-button", { class: "icon-button", variant: "plain", iconSize: "sm", iconName: this.expanded ? 'caret-down' : 'caret-up' })))) : (h("slot", { name: "expand-icon" }))));
-  }
-};
-Expandable.style = expandableCss;
-
-export { Expandable as E };

package/dist/esm/help-tooltip-c2f0d996.js

@@ -1,32 +0,0 @@
-import { r as registerInstance, e as createEvent, h } from './index-72f28b71.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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();
-  }
-};
-HelpTooltip.style = helpTooltipCss;
-
-export { HelpTooltip as H };

package/dist/esm/icon-390b9402.js

@@ -1,24 +0,0 @@
-import { r as registerInstance, h } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-7437b548.js';
-
-const iconCss = ".container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}svg{position:relative;width:100%}";
-
-const Icon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.name = undefined;
-    this.size = 'md';
-  }
-  render() {
-    return (h("div", { class: "container" }, h("div", { class: classnames('icon', {
-        xs: this.size === 'xs',
-        sm: this.size === 'sm',
-        md: this.size === 'md',
-        lg: this.size === 'lg',
-      }) }, getSvg(this.name))));
-  }
-};
-Icon.style = iconCss;
-
-export { Icon as I };

package/dist/esm/icon-button-552e31fe.js

@@ -1,41 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-import { g as getSvg } from './icon-helper-7437b548.js';
-
-const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
-
-const IconButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.iconName = undefined;
-    this.disabled = undefined;
-    this.variant = 'default';
-    this.iconColor = 'default';
-    this.iconSize = 'md';
-  }
-  render() {
-    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: classnames('container', {
-        disabled: this.disabled,
-        floating: this.variant === 'floating',
-        plain: this.variant === 'plain',
-        primary: this.iconColor === 'primary',
-        secondary: this.iconColor === 'secondary',
-      }) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
-        xs: this.iconSize === 'xs',
-        sm: this.iconSize === 'sm',
-        md: this.iconSize === 'md',
-        lg: this.iconSize === 'lg',
-      }) }, getSvg(this.iconName), h("div", { class: "badge" }, h("slot", { name: "badge" }))), h("slot", null))));
-  }
-  handleClick(event) {
-    var _a;
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-};
-IconButton.style = iconButtonCss;
-
-export { IconButton as I };