@vertexvis/ui 0.1.0-testing.8 → 0.1.0

package/dist/collection/components/search-bar/search-bar.js

@@ -2,18 +2,39 @@ import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
 import deepEqual from 'fast-deep-equal';
 import { generateInstanceFromTemplate } from '../../util/templates/templates';
-import { createDocumentRange, createTextNode, getWindowSelection } from './dom';
-import { createResultUri, createSearchResultReplacement, getNodesForSearchResultReplacement, trimNonstandardSpaces, } from './lib';
+import { createDocumentRange, createTextNode, getWindowSelection, isBrElement, isHtmlElement, nodeHasChildNodes, } from './dom';
+import { createResultUri, createSearchResultReplacement, getNodesForSearchResultReplacement, standardizeNewlinesAndSpaces, trimNonstandardSpaces, } from './lib';
 export class SearchBar {
   constructor() {
     this.rawElements = [];
+    this.attemptReplaceElement = (child, other, replacement, isBreaking = false) => {
+      // In the case that the child we're evaluating has its own children
+      // (often a wrapper `<div>`), we want to evaluate whether any of its
+      // children is the target to replace.
+      if (nodeHasChildNodes(child) &&
+        Array.from(child.childNodes).some((c) => nodeHasChildNodes(c) || this.isIdenticalElement(c, other))) {
+        return Array.from(child.childNodes).reduce((res, c) => [
+          ...res,
+          ...this.attemptReplaceElement(c, other, replacement, 
+          // If the element we're evaluating is a wrapper, we want to
+          // consider it a breaking element and add a newline to the
+          // replaced element only if the previous node is a `Text` node.
+          !isHtmlElement(child.previousSibling)),
+        ], []);
+      }
+      else {
+        return this.isIdenticalElement(child, other)
+          ? getNodesForSearchResultReplacement(replacement, isBreaking)
+          : [child];
+      }
+    };
     this.isIdenticalElement = (child, other) => {
       return (child === this.triggeredElement ||
         this.getTextContent(child) === this.getTextContent(other));
     };
     this.getTextContent = (node) => {
       var _a;
-      if (node instanceof HTMLElement) {
+      if (isHtmlElement(node)) {
         return node.innerText;
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
@@ -90,21 +111,54 @@ export class SearchBar {
         selection.addRange(range);
       }
     };
-    this.getContentAsString = () => {
-      if (this.contentEl != null) {
-        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+    this.getContentAsString = (element) => {
+      if (element != null) {
+        const res = trimNonstandardSpaces(Array.from(element.childNodes).reduce((res, n) => {
           var _a;
-          if (n instanceof HTMLElement &&
-            n.getAttribute('data-replaced') === 'true') {
+          const previousSiblingIsBlock = n.previousSibling == null || isHtmlElement(n.previousSibling);
+          if (isHtmlElement(n) && n.getAttribute('data-replaced') === 'true') {
+            /**
+             * If an element has been replaced visually, append the original
+             * value prior to being replaced.
+             */
             return `${res}${n.getAttribute('data-original')}`;
           }
-          else if (n instanceof HTMLElement) {
-            return `${res}${n.innerText}`;
+          else if (isHtmlElement(n) && n.childElementCount > 0) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * Additionally, we want to evaluate each of its children independently.
+             * Some browsers will conditionally wrap content in additional wrapper
+             * elements we need to unravel.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${this.getContentAsString(n)}`;
+          }
+          else if (isBrElement(n)) {
+            /**
+             * If an element is a `<br>` element, we want to simply represent
+             * it as a newline in the returned string.
+             */
+            return `${res}\n`;
+          }
+          else if (isHtmlElement(n)) {
+            /**
+             * If an element is a wrapper, we want to treat it as a block element,
+             * ensuring newlines before and after the content.
+             * If the prior element is also to be treated as a block format, we
+             * will omit the newline before the content to avoid duplicating the
+             * behavior.
+             */
+            return `${res}${previousSiblingIsBlock ? '' : '\n'}${n.innerText}\n`;
           }
           else {
+            /**
+             * If a node is simply a `Text` node, we just want to append the text
+             * if defined.
+             */
             return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
           }
         }, ''));
+        return res;
       }
       return '';
     };
@@ -180,12 +234,13 @@ export class SearchBar {
               replacement.before,
               replacement.beforeSpace,
               replacement.result,
+              replacement.afterSpace,
             ];
           }
           return res;
         }, [])
         : [];
-      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.rawElements = [...parts, createTextNode(nextSubstr)].reduce((res, p) => [...res, ...standardizeNewlinesAndSpaces(p)], []);
       this.updateContent(this.replacements);
     }
   }
@@ -193,7 +248,7 @@ export class SearchBar {
     if (this.contentEl != null && !deepEqual(newValue, oldValue)) {
       this.contentEl.innerHTML = '';
       this.displayedElements = this.rawElements.map((el) => {
-        const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
+        const raw = isHtmlElement(el) ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
@@ -208,7 +263,7 @@ export class SearchBar {
       if (this.lastReplacedSpace != null) {
         this.moveCursorToNodeEnd(this.lastReplacedSpace);
       }
-      this.inputChanged.emit(this.getContentAsString());
+      this.inputChanged.emit(this.getContentAsString(this.contentEl));
     }
   }
   render() {
@@ -220,7 +275,7 @@ export class SearchBar {
       blank: this.variant === 'blank',
       disabled: this.disabled,
     });
-    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleCursorPositionUpdate, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
+    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
         this.resultItems != null &&
         this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
   }
@@ -236,13 +291,13 @@ export class SearchBar {
     this.cursorPosition = this.getCursorPosition();
   }
   async handleInput() {
-    this.inputChanged.emit(this.getContentAsString());
+    this.inputChanged.emit(this.getContentAsString(this.contentEl));
   }
   handleClick() {
     this.handleCursorPositionUpdate();
   }
   handleWindowClick(event) {
-    if (event.target instanceof HTMLElement &&
+    if (isHtmlElement(event.target) &&
       event.target.getAttribute('data-replaced') === 'true' &&
       event.target.nextSibling != null) {
       this.moveCursorToNodeEnd(event.target.nextSibling, true);
@@ -259,7 +314,7 @@ export class SearchBar {
     var _a;
     const triggeredRange = this.triggeredRange;
     const triggeredElement = this.triggeredElement;
-    const value = triggeredElement instanceof HTMLElement
+    const value = isHtmlElement(triggeredElement)
       ? triggeredElement.innerText
       : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
     if (this.contentEl != null &&
@@ -273,12 +328,10 @@ export class SearchBar {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        if (this.isIdenticalElement(e, triggeredElement)) {
-          return [...re, ...getNodesForSearchResultReplacement(replacement)];
-        }
-        else {
-          return [...re, e];
-        }
+        return [
+          ...re,
+          ...this.attemptReplaceElement(e, triggeredElement, replacement),
+        ];
       }, []);
       this.hasTriggered = false;
       this.resultReplaced.emit(event.detail);

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

@@ -10,6 +10,12 @@
   Defaults to `normal`.
   */
   --select-option-white-space: normal;
+
+  /*
+  The maximum height of the dropdown.
+  Defaults to `80vh`.
+  */
+  --max-dropdown-height: 80vh;
 }
 
 .root {
@@ -76,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 {

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import classNames from 'classnames';
+import { blurElement } from '../../util/components/dom';
 export class Slider {
   constructor() {
     this.handleChange = (event) => {
@@ -19,7 +20,11 @@ export class Slider {
     this.disabled = false;
   }
   render() {
-    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classNames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput })));
+    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classNames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput, onPointerUp: () => {
+        // Blur the slider on pointerup to prevent an issue where pressing
+        // any key on the keyboard would result in a focus state.
+        blurElement(this.hostEl);
+      } })));
   }
   updateValueFromEvent(event) {
     this.value = event.target.valueAsNumber;
@@ -214,4 +219,5 @@ export class Slider {
         }
       }];
   }
+  static get elementRef() { return "hostEl"; }
 }

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/types/icon.js

@@ -7,9 +7,11 @@ export var IconNames;
   IconNames["align-view-to-plane"] = "align-view-to-plane";
   IconNames["annotation"] = "annotation";
   IconNames["arrow-filled"] = "arrow-filled";
+  IconNames["arrow-left-circled"] = "arrow-left-circled";
   IconNames["arrow-line-left"] = "arrow-line-left";
   IconNames["arrow-line-right"] = "arrow-line-right";
   IconNames["arrow-partial"] = "arrow-partial";
+  IconNames["arrow-right-circled"] = "arrow-right-circled";
   IconNames["arrow-triangle-left"] = "arrow-triangle-left";
   IconNames["arrow-triangle-right"] = "arrow-triangle-right";
   IconNames["arrow-up-circled"] = "arrow-up-circled";
@@ -21,9 +23,11 @@ export var IconNames;
   IconNames["box-cursor"] = "box-cursor";
   IconNames["box-select"] = "box-select";
   IconNames["camera"] = "camera";
+  IconNames["camera-add"] = "camera-add";
   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";
@@ -37,23 +41,29 @@ export var IconNames;
   IconNames["close-circle"] = "close-circle";
   IconNames["collapse-all"] = "collapse-all";
   IconNames["columns"] = "columns";
+  IconNames["columns-add"] = "columns-add";
   IconNames["comment-add"] = "comment-add";
   IconNames["comment-filled"] = "comment-filled";
   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";
+  IconNames["file-folder"] = "file-folder";
   IconNames["file-pdf"] = "file-pdf";
   IconNames["fit-all"] = "fit-all";
   IconNames["fit-selected"] = "fit-selected";
@@ -86,9 +96,13 @@ 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["report"] = "report";
   IconNames["reset"] = "reset";
   IconNames["resize"] = "resize";
   IconNames["rotate"] = "rotate";
@@ -97,12 +111,15 @@ export var IconNames;
   IconNames["show-only-nearby"] = "show-only-nearby";
   IconNames["snapshots"] = "snapshots";
   IconNames["star"] = "star";
+  IconNames["square-dot-outline"] = "square-dot-outline";
   IconNames["tape-measure"] = "tape-measure";
   IconNames["teleport-and-align"] = "teleport-and-align";
   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";

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

@@ -8,3 +8,6 @@ export function getBoundingClientRect(el) {
 export function getComputedStyle(el) {
   return window.getComputedStyle(el);
 }
+export function blurElement(el) {
+  el.blur();
+}