@vertexvis/ui 0.1.0-canary.2 → 0.1.0-canary.20

package/dist/collection/components/select/select.css

@@ -4,6 +4,18 @@
   the input size from changing as different options are selected.
   */
   --select-width: 100%;
+
+  /*
+  The white-space behavior of the text within this select input.
+  Defaults to `normal`.
+  */
+  --select-option-white-space: normal;
+
+  /*
+  The maximum height of the dropdown.
+  Defaults to `80vh`.
+  */
+  --max-dropdown-height: 80vh;
 }
 
 .root {
@@ -50,6 +62,12 @@
   border-radius: 4px;
 }
 
+.text {
+  white-space: var(--select-option-white-space);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .icon {
   padding-left: 1rem;
   margin-left: auto;
@@ -64,6 +82,8 @@
   top: -0.25rem;
   box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
     0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+  max-height: var(--max-dropdown-height);
+  overflow-y: auto;
 }
 
 .options.animated {
@@ -93,6 +113,10 @@
   background-color: var(--vertex-ui-neutral-200);
 }
 
+.options > slot::slotted([data-selected="true"]) {
+  display: none;
+}
+
 vertex-popover {
   --transform-origin: top left;
   --open-animation-name: open-scale-y;

package/dist/collection/components/select/select.js

@@ -9,6 +9,7 @@ export class Select {
     this.placeholder = 'Select an option...';
     this.disabled = false;
     this.animated = true;
+    this.hideSelected = true;
     this.open = false;
     this.position = undefined;
     this.displayValue = undefined;
@@ -28,6 +29,9 @@ export class Select {
     if (this.value != null) {
       this.handleUpdateValue(this.value);
     }
+    else {
+      this.handleUpdateDisplayValue();
+    }
   }
   connectedCallback() {
     window.addEventListener('resize', this.getBounds);
@@ -45,6 +49,13 @@ export class Select {
     }
     this.controlled = value != null;
   }
+  handleUpdateDisplayValue() {
+    var _a;
+    this.clearSelectedOptionFlag();
+    if (this.hideSelected) {
+      (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
+    }
+  }
   render() {
     return (h("div", { class: classNames('root', {
         disabled: this.disabled,
@@ -53,7 +64,7 @@ export class Select {
       }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classNames('target', {
         hidden: this.open,
         disabled: this.disabled,
-      }) }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classNames('options', {
+      }) }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { class: classNames('options', {
         hidden: !this.open,
         visible: this.open,
         animated: this.animated,
@@ -61,7 +72,7 @@ export class Select {
         minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
       } }, h("div", { class: classNames('selected-option', {
         disabled: this.disabled,
-      }), onClick: this.handleDismiss }, this.displayValue || this.placeholder, h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
+      }), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
   }
   handleOpen() {
     var _a, _b;
@@ -100,6 +111,15 @@ export class Select {
     this.removeListeners.forEach((l) => l());
     this.removeListeners = [];
   }
+  clearSelectedOptionFlag() {
+    var _a, _b;
+    (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
+  }
+  getSelectedOption() {
+    var _a, _b, _c;
+    const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
+    return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+  }
   getBounds() {
     if (this.getBoundsTimeout != null) {
       clearTimeout(this.getBoundsTimeout);
@@ -206,6 +226,24 @@ export class Select {
         "reflect": false,
         "defaultValue": "true"
       },
+      "hideSelected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether this select will omit the currently selected\nvalue in the dropdown list."
+        },
+        "attribute": "hide-selected",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "resizeObserverFactory": {
         "type": "unknown",
         "mutable": false,
@@ -264,6 +302,15 @@ export class Select {
     return [{
         "propName": "value",
         "methodName": "handleUpdateValue"
+      }, {
+        "propName": "displayValue",
+        "methodName": "handleUpdateDisplayValue"
+      }, {
+        "propName": "hideSelected",
+        "methodName": "handleUpdateDisplayValue"
+      }, {
+        "propName": "placeholder",
+        "methodName": "handleUpdateDisplayValue"
       }];
   }
 }

package/dist/collection/components/tab/tab.css

@@ -0,0 +1,16 @@
+:host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  display: none;
+  height: 0px;
+}
+
+.content.active {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/tab/tab.js

@@ -0,0 +1,85 @@
+import { h, Host } from '@stencil/core';
+import classNames from 'classnames';
+export class Tab {
+  constructor() {
+    this.handleClick = () => {
+      this.tabClick.emit(this.label);
+    };
+    this.label = undefined;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classNames('content', {
+        active: this.active,
+      }) }, h("slot", null))));
+  }
+  static get is() { return "vertex-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to include in tab list."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabClick",
+        "name": "tabClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/tab/util.js

@@ -0,0 +1,3 @@
+export function isTabElement(element) {
+  return element.tagName === 'VERTEX-TAB';
+}

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,67 @@
+button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--vertex-ui-font-family);
+  font-size: 0.875rem;
+  padding: 0;
+}
+
+:host {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.labels {
+  display: flex;
+  position: relative;
+  border-bottom: solid 1px var(--vertex-ui-neutral-300);
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  background-color: var(--vertex-ui-blue-700);
+  transition: left 0.2s ease-in-out; 
+}
+
+.label {
+  position: relative;
+  cursor: pointer;
+  color: var(--vertex-ui-neutral-700);
+  white-space: nowrap;
+  font-family: var(--vertex-ui-font-family);
+  font-size: var(--vertex-ui-text-md);
+  padding: 0.75rem 1.25rem;
+}
+
+.label:not(.active):hover {
+  color: var(--vertex-ui-neutral-800);
+}
+
+.label.active {
+  color: var(--vertex-ui-blue-700);
+  font-weight: var(--vertex-ui-font-weight-bold);
+}
+
+.hidden-label-text {
+  font-weight: bold;
+  visibility: hidden;
+  height: 0px;
+}
+
+.tab-content {
+  display: flex;
+  height: 5%;
+  flex-grow: 1;
+}

package/dist/collection/components/tabs/tabs.js

@@ -0,0 +1,159 @@
+import { h, Host, } from '@stencil/core';
+import classNames from 'classnames';
+import { getBoundingClientRect, readDOM } from '../../util/components/dom';
+import { isTabElement } from '../tab/util';
+export class Tabs {
+  constructor() {
+    this.indicatorInitialized = false;
+    this.handleLabelClick = (label) => {
+      if (this.active != null) {
+        this.updateActiveOnTab(this.active, false);
+      }
+      this.active = label;
+      this.updateActiveOnTab(this.active, true);
+      this.selectedTabChanged.emit(label);
+    };
+    this.updateActiveOnTab = (label, active) => {
+      const activeTab = this.findTabByLabel(label);
+      if (activeTab != null) {
+        activeTab.active = active;
+      }
+    };
+    this.findTabByLabel = (label) => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      return slotChildren != null
+        ? slotChildren.filter(isTabElement).find((el) => el.label === label)
+        : undefined;
+    };
+    this.updateTabLabels = () => {
+      var _a;
+      const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+      const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+      const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+        ? Array.from(slotAssignedElements[0].children)
+        : undefined;
+      this.labels =
+        slotChildren != null
+          ? slotChildren.filter(isTabElement).map((t) => t.label)
+          : [];
+    };
+    this.active = undefined;
+    this.labels = [];
+    this.activeBounds = undefined;
+    this.activeButtonEl = undefined;
+  }
+  componentWillLoad() {
+    this.updateTabLabels();
+  }
+  componentDidLoad() {
+    if (this.active != null) {
+      this.updateActiveOnTab(this.active, true);
+    }
+    this.indicatorInitialized = false;
+    this.handleActiveButtonChange();
+  }
+  componentDidUpdate() {
+    // Place the indicator if it hasn't been initialized yet
+    if (!this.indicatorInitialized) {
+      this.handleActiveButtonChange();
+    }
+  }
+  handleActiveButtonChange() {
+    const button = this.activeButtonEl;
+    if (button != null) {
+      readDOM(() => {
+        const hostElBounds = getBoundingClientRect(this.hostEl);
+        const activeBounds = getBoundingClientRect(button);
+        this.activeBounds = {
+          x: activeBounds.x - hostElBounds.x,
+          width: activeBounds.width,
+        };
+        if (this.activeBounds.width !== 0) {
+          this.indicatorInitialized = true;
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "wrapper" }, h("div", { class: "labels" }, this.labels.map((label) => (h("button", { class: classNames('label', {
+        active: this.active === label,
+      }), "data-label": label, ref: (el) => {
+        if (this.active === label) {
+          this.activeButtonEl = el;
+        }
+      }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
+        left: `${this.activeBounds.x}px`,
+        width: `${this.activeBounds.width}px`,
+      } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
+  }
+  static get is() { return "vertex-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tabs.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "labels": {},
+      "activeBounds": {},
+      "activeButtonEl": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectedTabChanged",
+        "name": "selectedTabChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "An event that is emitted whenever the selected tab changes\nand contains the label of the newly selected tab."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostEl"; }
+  static get watchers() {
+    return [{
+        "propName": "activeButtonEl",
+        "methodName": "handleActiveButtonChange"
+      }];
+  }
+}

package/dist/collection/components/text-field/text-field.js

@@ -71,6 +71,7 @@ export class TextField {
   render() {
     var _a;
     const classes = classNames('txt-wrapper', {
+      'txt-wrapper-border': !this.multiline,
       'txt-standard': this.variant === 'standard',
       'txt-filled': this.variant === 'filled',
       'txt-underlined': this.variant === 'underlined',

package/dist/collection/components/tooltip/tooltip.js

@@ -6,6 +6,7 @@ import { getSlottedContent } from '../../util/components/slots';
 const TOOLTIP_OPEN_DELAY = 500;
 export class Tooltip {
   constructor() {
+    this.pointerEntered = false;
     this.content = undefined;
     this.disabled = undefined;
     this.placement = 'bottom';
@@ -14,32 +15,40 @@ export class Tooltip {
     this.open = false;
     this.handlePointerEnter = this.handlePointerEnter.bind(this);
     this.handlePointerLeave = this.handlePointerLeave.bind(this);
+    this.handleContentChange = this.handleContentChange.bind(this);
+    this.handleDisabledChange = this.handleDisabledChange.bind(this);
     this.tooltipId = `vertex-tooltip-${UUID.create()}`;
   }
   disconnectedCallback() {
     this.removeElement();
     this.clearOpenTimeout();
+    this.pointerEntered = false;
+  }
+  handleContentChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementChildren(this.internalContentElement);
+    }
+  }
+  handleDisabledChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementClass(this.internalContentElement);
+    }
+    if (!this.disabled && this.pointerEntered) {
+      this.handlePointerEnter();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "target", ref: (el) => {
         this.targetElement = el;
       }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
         this.contentElement = el;
-      } }, h("slot", { name: "content" }))));
+      } }, h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
   }
   addElement() {
-    var _a;
     if (this.targetElement != null) {
       const popover = this.createPopoverElement(this.targetElement);
       const content = this.createContentElement();
-      this.displayedSlottedContent =
-        (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-      if (this.content != null) {
-        content.innerText = this.content;
-      }
-      else if (this.displayedSlottedContent != null) {
-        content.appendChild(this.displayedSlottedContent);
-      }
+      this.updateContentElementChildren(content);
       popover.appendChild(content);
       this.hostElement.ownerDocument.body.appendChild(popover);
     }
@@ -49,6 +58,7 @@ export class Tooltip {
     if (popover != null) {
       popover.remove();
     }
+    this.internalContentElement = undefined;
   }
   createPopoverElement(anchorElement) {
     const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
@@ -63,25 +73,50 @@ export class Tooltip {
     return popover;
   }
   createContentElement() {
-    const content = this.hostElement.ownerDocument.createElement('div');
-    content.setAttribute('class', classNames('vertex-tooltip-content', {
+    this.internalContentElement =
+      this.hostElement.ownerDocument.createElement('div');
+    this.internalContentElement.setAttribute('class', classNames('vertex-tooltip-content', {
       hidden: !this.open || this.disabled,
     }));
-    return content;
+    return this.internalContentElement;
+  }
+  updateContentElementClass(element) {
+    element.setAttribute('class', classNames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+  }
+  updateContentElementChildren(element) {
+    var _a;
+    this.displayedSlottedContent =
+      (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+    if (this.content != null) {
+      element.innerText = this.content;
+    }
+    else if (this.displayedSlottedContent != null) {
+      element.appendChild(this.displayedSlottedContent);
+    }
   }
   handlePointerEnter() {
     if (this.openTimeout == null && !this.disabled) {
-      this.openTimeout = setTimeout(() => {
-        this.open = true;
-        this.openTimeout = undefined;
-        this.addElement();
-      }, this.delay);
+      this.createOpenTimeout();
+    }
+    else if (this.openTimeout == null) {
+      this.pointerEntered = true;
     }
   }
   handlePointerLeave() {
     this.clearOpenTimeout();
     this.removeElement();
     this.open = false;
+    this.pointerEntered = false;
+  }
+  createOpenTimeout() {
+    this.openTimeout = setTimeout(() => {
+      this.open = true;
+      this.openTimeout = undefined;
+      this.addElement();
+    }, this.delay);
+    this.pointerEntered = false;
   }
   clearOpenTimeout() {
     if (this.openTimeout != null) {
@@ -204,4 +239,13 @@ export class Tooltip {
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "content",
+        "methodName": "handleContentChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }];
+  }
 }

package/dist/collection/types/icon.js

@@ -24,6 +24,7 @@ export var IconNames;
   IconNames["caret-down"] = "caret-down";
   IconNames["caret-left"] = "caret-left";
   IconNames["caret-up"] = "caret-up";
+  IconNames["caution"] = "caution";
   IconNames["check"] = "check";
   IconNames["check-circle"] = "check-circle";
   IconNames["caret-right"] = "caret-right";
@@ -42,15 +43,19 @@ export var IconNames;
   IconNames["comment-reopen"] = "comment-reopen";
   IconNames["comment-resolve"] = "comment-resolve";
   IconNames["comment-show"] = "comment-show";
+  IconNames["compare"] = "compare";
+  IconNames["compress"] = "compress";
   IconNames["copy"] = "copy";
   IconNames["cross-section"] = "cross-section";
   IconNames["cube-orthographic"] = "cube-orthographic";
   IconNames["cube-perspective"] = "cube-perspective";
+  IconNames["cube-stack"] = "cube-stack";
   IconNames["delete"] = "delete";
   IconNames["download"] = "download";
   IconNames["drag-indicator"] = "drag-indicator";
   IconNames["ellipse"] = "ellipse";
   IconNames["error-circle"] = "error-circle";
+  IconNames["expand"] = "expand";
   IconNames["expand-all"] = "expand-all";
   IconNames["export"] = "export";
   IconNames["file"] = "file";
@@ -86,7 +91,10 @@ export var IconNames;
   IconNames["pin-line"] = "pin-line";
   IconNames["pin-text"] = "pin-text";
   IconNames["pin-text-fill"] = "pin-text-fill";
+  IconNames["pin-text-square"] = "pin-text-square";
   IconNames["plus"] = "plus";
+  IconNames["plus-with-arrow"] = "plus-with-arrow";
+  IconNames["pmi"] = "pmi";
   IconNames["precise-measurement"] = "precise-measurement";
   IconNames["rabbit"] = "rabbit";
   IconNames["reset"] = "reset";
@@ -102,7 +110,9 @@ export var IconNames;
   IconNames["teleport-toward"] = "teleport-toward";
   IconNames["teleport"] = "teleport";
   IconNames["turtle"] = "turtle";
+  IconNames["update"] = "update";
   IconNames["version-history"] = "version-history";
+  IconNames["views"] = "views";
   IconNames["visibility-hidden"] = "visibility-hidden";
   IconNames["visibility-partial"] = "visibility-partial";
   IconNames["visibility-visible"] = "visibility-visible";