@vertexvis/ui 0.1.0-canary.7 → 0.1.0-canary.9

package/dist/cjs/search-bar-91cbcd07.js

@@ -0,0 +1,421 @@
+'use strict';
+
+const index = require('./index-6a92256c.js');
+const index$1 = require('./index-e1b40fa6.js');
+const templates = require('./templates-e7b3ffbb.js');
+
+// do not edit .js files directly - edit src/index.jst
+
+
+
+var fastDeepEqual = function equal(a, b) {
+  if (a === b) return true;
+
+  if (a && b && typeof a == 'object' && typeof b == 'object') {
+    if (a.constructor !== b.constructor) return false;
+
+    var length, i, keys;
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (!equal(a[i], b[i])) return false;
+      return true;
+    }
+
+
+
+    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
+
+    for (i = length; i-- !== 0;)
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+
+    for (i = length; i-- !== 0;) {
+      var key = keys[i];
+
+      if (!equal(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  // true if both NaN, false otherwise
+  return a!==a && b!==b;
+};
+
+const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+const createDocumentRange = () => {
+  return document.createRange();
+};
+const createTextNode = (text) => {
+  return new Text(text);
+};
+
+const createResultUri = (result) => {
+  return `${result.type}:${result.id}`;
+};
+const createSearchResultReplacement = (result, before, after) => {
+  const urn = createResultUri(result);
+  return {
+    before: createTextNode(before),
+    beforeSpace: createTextNode(createHairSpace()),
+    result: createTextNode(urn),
+    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    after: after != null ? createTextNode(after) : undefined,
+  };
+};
+const getNodesForSearchResultReplacement = (replacement) => {
+  const keys = Object.keys(replacement);
+  return keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
+};
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
+const trimNonstandardSpaces = (text) => {
+  return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
+};
+const createHairSpace = () => {
+  return String.fromCharCode(8202);
+};
+const createNoBreakSpace = () => {
+  return String.fromCharCode(160);
+};
+
+const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);font-size:0.875rem;line-height:1.4}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.content-input.sc-vertex-search-bar:focus{outline:none}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
+
+const SearchBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.searchChanged = index.createEvent(this, "searchChanged", 7);
+    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.resultReplaced = index.createEvent(this, "resultReplaced", 7);
+    this.inputFocus = index.createEvent(this, "inputFocus", 7);
+    this.inputBlur = index.createEvent(this, "inputBlur", 7);
+    this.rawElements = [];
+    this.isIdenticalElement = (child, other) => {
+      return (child === this.triggeredElement ||
+        this.getTextContent(child) === this.getTextContent(other));
+    };
+    this.getTextContent = (node) => {
+      var _a;
+      if (node instanceof HTMLElement) {
+        return node.innerText;
+      }
+      return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+    };
+    /**
+     * Inspects the cursor position for the following conditions:
+     *
+     * 1. The cursor has moved to text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event and display the results.
+     *
+     * 2. The cursor has moved within text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event to update the currently displayed results.
+     *
+     * 3. The cursor has moved to text that does not contain a valid
+     * string and trigger character, indicating we need to hide any
+     * displayed search results.
+     */
+    this.handleCursorPositionUpdate = () => {
+      var _a, _b;
+      const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+      if (windowRange != null) {
+        const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+        if (!this.hasTriggered && triggerText != null) {
+          this.hasTriggered = true;
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else if (this.hasTriggered && triggerText != null) {
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else {
+          this.hasTriggered = false;
+          this.triggeredRange = undefined;
+          this.triggeredElement = undefined;
+        }
+      }
+      this.cursorPosition = this.getCursorPosition();
+    };
+    this.readTriggerValue = (value, fromIndex) => {
+      const adjustedValue = value.replace(String.fromCharCode(160), ' ');
+      const beforeSubstr = adjustedValue.substring(0, fromIndex);
+      const afterSubstr = adjustedValue.substring(fromIndex);
+      const adjustedBeforeSubstr = beforeSubstr.includes(this.triggerCharacter)
+        ? beforeSubstr.substring(beforeSubstr.lastIndexOf(this.triggerCharacter))
+        : '';
+      const adjustedAfterSubstr = afterSubstr.substring(0, this.firstIndexOfBreakCharacter(afterSubstr));
+      const result = `${adjustedBeforeSubstr}${adjustedAfterSubstr}`;
+      return result.includes(this.triggerCharacter) &&
+        !this.includesBreakCharacter(result)
+        ? result
+        : undefined;
+    };
+    this.includesBreakCharacter = (value) => {
+      return this.breakCharacters.some((bc) => value.includes(bc));
+    };
+    this.firstIndexOfBreakCharacter = (value) => {
+      const indices = this.breakCharacters
+        .map((bc) => value.indexOf(bc))
+        .filter((i) => i >= 0);
+      return indices.length > 0 ? Math.min(...indices) : value.length;
+    };
+    this.moveCursorToNodeEnd = (node, collapseToStart = false) => {
+      const selection = getWindowSelection();
+      if (selection != null) {
+        const range = createDocumentRange();
+        range.selectNodeContents(node);
+        range.collapse(collapseToStart);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    };
+    this.getContentAsString = () => {
+      if (this.contentEl != null) {
+        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+          var _a;
+          if (n instanceof HTMLElement &&
+            n.getAttribute('data-replaced') === 'true') {
+            return `${res}${n.getAttribute('data-original')}`;
+          }
+          else if (n instanceof HTMLElement) {
+            return `${res}${n.innerText}`;
+          }
+          else {
+            return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
+          }
+        }, ''));
+      }
+      return '';
+    };
+    this.createReplacedElement = (original, data) => {
+      const template = this.hostEl.querySelector('template[slot="replaced"]');
+      if (template != null) {
+        const instance = templates.generateInstanceFromTemplate(template);
+        instance.bindings.bind(data);
+        instance.element.id = data.id;
+        instance.element.style.display = 'inline-block';
+        instance.element.contentEditable = 'false';
+        instance.element.tabIndex = -1;
+        instance.element.setAttribute('data-replaced', 'true');
+        instance.element.setAttribute('data-original', original);
+        return instance.element;
+      }
+      else {
+        throw new Error('Replaced template not defined.');
+      }
+    };
+    this.variant = 'standard';
+    this.disabled = false;
+    this.triggerCharacter = '@';
+    this.breakCharacters = [' ', '\n'];
+    this.resultItems = undefined;
+    this.placement = 'bottom-start';
+    this.value = undefined;
+    this.placeholder = undefined;
+    this.replacements = [];
+    this.replacementUriType = 'user';
+    this.cursorPosition = undefined;
+    this.displayedElements = [];
+    this.hasTriggered = false;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleWindowClick = this.handleWindowClick.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleCursorPositionUpdate =
+      this.handleCursorPositionUpdate.bind(this);
+    this.updateContent = this.updateContent.bind(this);
+    this.replaceContent = this.replaceContent.bind(this);
+  }
+  componentDidLoad() {
+    this.replaceContent(this.value);
+  }
+  connectedCallback() {
+    window.addEventListener('click', this.handleWindowClick);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('click', this.handleWindowClick);
+  }
+  replaceContent(newValue, oldValue) {
+    if (newValue != null && newValue !== oldValue) {
+      const pattern = `${this.replacementUriType}:[0-9a-z-]{36}`;
+      const matches = newValue.match(new RegExp(pattern, 'g'));
+      const replacementsMap = this.replacements.reduce((map, r) => (Object.assign(Object.assign({}, map), { [createResultUri(r)]: r })), {});
+      let nextSubstr = newValue;
+      const parts = matches != null
+        ? matches === null || matches === void 0 ? void 0 : matches.reduce((res, m) => {
+          if (replacementsMap[m] != null) {
+            const urn = createResultUri(replacementsMap[m]);
+            const index = nextSubstr.indexOf(urn);
+            const before = nextSubstr.substring(0, index);
+            const after = nextSubstr.substring(index + urn.length);
+            const replacement = createSearchResultReplacement(replacementsMap[m], before);
+            nextSubstr = after;
+            return [
+              ...res,
+              replacement.before,
+              replacement.beforeSpace,
+              replacement.result,
+            ];
+          }
+          return res;
+        }, [])
+        : [];
+      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.updateContent(this.replacements);
+    }
+  }
+  updateContent(newValue, oldValue) {
+    if (this.contentEl != null && !fastDeepEqual(newValue, oldValue)) {
+      this.contentEl.innerHTML = '';
+      this.displayedElements = this.rawElements.map((el) => {
+        const raw = el instanceof HTMLElement ? 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);
+          return replacementElement;
+        }
+        return el;
+      });
+      this.displayedElements.forEach((el) => {
+        var _a;
+        (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.appendChild(typeof el === 'string' ? createTextNode(el) : el);
+      });
+      if (this.lastReplacedSpace != null) {
+        this.moveCursorToNodeEnd(this.lastReplacedSpace);
+      }
+      this.inputChanged.emit(this.getContentAsString());
+    }
+  }
+  render() {
+    var _a;
+    const classes = index$1.classnames('wrapper', {
+      standard: this.variant === 'standard',
+      filled: this.variant === 'filled',
+      underlined: this.variant === 'underlined',
+      blank: this.variant === 'blank',
+      disabled: this.disabled,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.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 })), index.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 }, index.h("slot", { name: "results" })), index.h("slot", { name: "replaced" })));
+  }
+  handleKeyDown(event) {
+    if (this.hasTriggered && this.breakCharacters.includes(event.key)) {
+      this.hasTriggered = false;
+      this.triggeredRange = undefined;
+      this.triggeredElement = undefined;
+    }
+  }
+  handleKeyUp(event) {
+    this.handleCursorPositionUpdate();
+    this.cursorPosition = this.getCursorPosition();
+  }
+  async handleInput() {
+    this.inputChanged.emit(this.getContentAsString());
+  }
+  handleClick() {
+    this.handleCursorPositionUpdate();
+  }
+  handleWindowClick(event) {
+    if (event.target instanceof HTMLElement &&
+      event.target.getAttribute('data-replaced') === 'true' &&
+      event.target.nextSibling != null) {
+      this.moveCursorToNodeEnd(event.target.nextSibling, true);
+    }
+  }
+  handleFocus(event) {
+    this.inputFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.hasTriggered = false;
+    this.inputBlur.emit(event);
+  }
+  handleResultClick(event) {
+    var _a;
+    const triggeredRange = this.triggeredRange;
+    const triggeredElement = this.triggeredElement;
+    const value = triggeredElement instanceof HTMLElement
+      ? triggeredElement.innerText
+      : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
+    if (this.contentEl != null &&
+      triggeredRange != null &&
+      triggeredElement != null &&
+      value != null) {
+      const triggeredValue = (_a = this.readTriggerValue(value, triggeredRange.startOffset)) !== null && _a !== void 0 ? _a : '';
+      const split = value.split(triggeredValue);
+      const before = split[0];
+      const after = split[1];
+      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];
+        }
+      }, []);
+      this.hasTriggered = false;
+      this.resultReplaced.emit(event.detail);
+      this.replacements = [
+        ...this.replacements.filter((r) => r.id !== event.detail.id),
+        event.detail,
+      ];
+    }
+  }
+  getCursorPosition() {
+    var _a;
+    const selection = getWindowSelection();
+    if (selection != null && selection.rangeCount > 0) {
+      const cursorBounds = selection.getRangeAt(0).getBoundingClientRect();
+      const contentBounds = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const cursorBottom = cursorBounds.bottom || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.bottom) || 0;
+      const cursorTop = cursorBounds.top || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.top) || 0;
+      return {
+        x: cursorBounds.left || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.left) || 0,
+        y: this.placement.includes('top') ? cursorTop : cursorBottom,
+      };
+    }
+    throw new Error('Unable to retrieve window selection.');
+  }
+  get hostEl() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["replaceContent"],
+    "replacements": ["updateContent"]
+  }; }
+};
+SearchBar.style = searchBarCss;
+
+exports.SearchBar = SearchBar;

package/dist/cjs/vertex-icon-button.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const iconButton = require('./icon-button-786427d6.js');
+const iconButton = require('./icon-button-b7ed3b48.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-31ee6ce0.js');
 
 
 

package/dist/cjs/vertex-icon.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const icon = require('./icon-460fd0f5.js');
+const icon = require('./icon-21deee4d.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
-require('./icon-helper-ba408f49.js');
+require('./icon-helper-31ee6ce0.js');
 
 
 

package/dist/cjs/vertex-result-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const resultList = require('./result-list-1e592c3c.js');
+const resultList = require('./result-list-241ffe8d.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-bb40cfa7.js');
+const searchBar = require('./search-bar-91cbcd07.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/collection/collection-manifest.json

@@ -12,7 +12,6 @@
     "./components/icon-button/icon-button.js",
     "./components/radio/radio.js",
     "./components/resizable/resizable.js",
-    "./components/result-list/result-list.js",
     "./components/search-bar/search-bar.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
@@ -36,6 +35,7 @@
     "./components/menu-divider/menu-divider.js",
     "./components/menu-item/menu-item.js",
     "./components/radio-group/radio-group.js",
+    "./components/result-list/result-list.js",
     "./components/select/select.js",
     "./components/tooltip/tooltip.js"
   ],

package/dist/collection/components/icon/icon-helper.js

@@ -41,6 +41,7 @@ import { CommentFilled } from './icons/comment-filled';
 import { CommentReopen } from './icons/comment-reopen';
 import { CommentResolve } from './icons/comment-resolve';
 import { CommentShow } from './icons/comment-show';
+import { Compare } from './icons/compare';
 import { Copy } from './icons/copy';
 import { CrossSection } from './icons/cross-section';
 import { CubeOrthographic } from './icons/cube-orthographic';
@@ -192,6 +193,8 @@ export function getSvg(name) {
       return h(CommentResolve, null);
     case 'comment-show':
       return h(CommentShow, null);
+    case 'compare':
+      return h(Compare, null);
     case 'copy':
       return h(Copy, null);
     case 'cross-section':

package/dist/collection/components/icon/icon.js

@@ -33,7 +33,7 @@ export class Icon {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/icon/icons/compare.js

@@ -0,0 +1,2 @@
+import { h } from '@stencil/core';
+export const Compare = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", "data-testid": "compare" }, h("path", { d: "M13.68 3.34c-.21-.21-.48-.32-.79-.32H8.98v.99h3.56c.11 0 .2.04.29.13.09.09.13.19.13.29v7.56L8.99 6.96V13h3.9c.32 0 .58-.11.79-.32.21-.21.32-.48.32-.79V4.13c0-.32-.11-.58-.32-.79ZM7.48 1c-.28 0-.5.22-.5.5v1.49H3.11c-.32 0-.58.11-.79.32-.21.21-.32.48-.32.79v7.79c0 .32.11.58.32.79.21.21.48.32.79.32h3.87v1.5c0 .28.22.5.5.5s.5-.22.5-.5v-13c0-.28-.22-.5-.5-.5Zm-.49 11h-4l4-5.03V12Z" })));

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

@@ -50,7 +50,7 @@ export class IconButton {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/result-list/result-list.js

@@ -1,6 +1,6 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
-import { ElementPool } from '../../util/templates/element-pool';
+import { ElementPool, } from '../../util/templates/element-pool';
 import { generateInstanceFromTemplate, } from '../../util/templates/templates';
 import { getResultListHeight, scrollToResult } from './lib';
 export class ResultList {
@@ -29,7 +29,7 @@ export class ResultList {
       }
     };
     this.createResultPool = () => {
-      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance());
+      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
     };
     this.createResultInstance = () => {
       if (this.stateMap.resultTemplate != null) {
@@ -41,6 +41,18 @@ export class ResultList {
         throw new Error('Result template not defined.');
       }
     };
+    this.createResultHandlers = () => {
+      return [
+        {
+          type: 'pointerdown',
+          handler: this.handlePointerDown,
+        },
+        {
+          type: 'click',
+          handler: this.handleResultClick,
+        },
+      ];
+    };
     this.layoutResults = () => {
       var _a, _b, _c, _d;
       const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
@@ -61,6 +73,7 @@ export class ResultList {
           el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
           el.style.width = '100%';
           el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
+          el.setAttribute('data-result-id', result.id);
           binding.bind(result);
         }
       });
@@ -103,6 +116,8 @@ export class ResultList {
     this.lastStartIndex = 0;
     this.lastFocusedIndex = 0;
     this.stateMap = {};
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
   }
   handleResultsChanged(results) {
     if (typeof results === 'string') {
@@ -148,6 +163,16 @@ export class ResultList {
         height: `${this.parsedResults.length * this.resultHeight}px`,
       } }, h("slot", null), h("slot", { name: "result" })))))));
   }
+  handlePointerDown(event) {
+    event.preventDefault();
+  }
+  handleResultClick(event) {
+    const closestIdElement = event.target.closest('[data-result-id]');
+    const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
+    if (result != null) {
+      this.resultClick.emit(result);
+    }
+  }
   computeViewportResults() {
     const viewportHeight = this.getListHeight();
     if (viewportHeight != null && this.resultHeight > 0) {
@@ -188,7 +213,8 @@ export class ResultList {
           "resolved": "Result[]",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         },
@@ -377,10 +403,31 @@ export class ResultList {
         },
         "complexType": {
           "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+          "references": {
+            "Result": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "method": "resultClick",
+        "name": "resultClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Result",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         }

package/dist/collection/components/result-list/types.js

@@ -0,0 +1 @@
+export {};