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

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

@@ -1,568 +1 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { g as generateInstanceFromTemplate, d as defineCustomElement$2 } from './result-list.js';
-import { d as defineCustomElement$3 } from './popover.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 nodeHasChildNodes = (node) => {
-  return node.hasChildNodes();
-};
-const createDocumentRange = () => {
-  return document.createRange();
-};
-const createTextNode = (text) => {
-  return new Text(text);
-};
-const createBreak = () => {
-  return document.createElement('br');
-};
-const isHtmlElement = (node) => {
-  return node instanceof HTMLElement;
-};
-const isBrElement = (node) => {
-  return node instanceof HTMLBRElement;
-};
-
-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())
-      : createTextNode(createHairSpace()),
-    after: after != null ? createTextNode(after) : undefined,
-  };
-};
-/**
- * Newline characters and spaces are represented slightly differently within a
- * content editable element between browsers. This method standardizes the
- * representation of those characters to avoid having to write branching logic
- * to support each individual browser.
- */
-const standardizeNewlinesAndSpaces = (node) => {
-  const content = node.textContent;
-  if (content === '\n') {
-    return [createBreak()];
-  }
-  else if (content != null && content.includes('\n')) {
-    const split = content.split('\n');
-    return split.reduce((res, substr, i) => {
-      const previous = split[i - 1];
-      // Ignore the empty string if the prior element was converted
-      // to a breaking element to prevent duplication of newlines.
-      if (substr === '' && previous !== '') {
-        return res;
-      }
-      return [
-        ...res,
-        // Standard spaces are not always respected with in `Text`
-        // elements when appended to a contenteditable element. This
-        // conversion preserves that spacing.
-        createTextNode(substr.replace(/ /g, createNoBreakSpace())),
-        createBreak(),
-      ];
-    }, []);
-  }
-  return [node];
-};
-const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
-  const keys = Object.keys(replacement);
-  const replacementElements = keys
-    .map((key) => replacement[key])
-    .filter((node) => node != null);
-  // If the element is intended to replace a breaking element such
-  // as a `<div>` wrapper, a newline is required alongside the standard
-  // replacement elements.
-  if (isBreaking) {
-    return [createTextNode('\n'), ...replacementElements];
-  }
-  return replacementElements;
-};
-/**
- * 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.searchChanged = createEvent(this, "searchChanged", 7);
-    this.inputChanged = createEvent(this, "inputChanged", 7);
-    this.resultReplaced = createEvent(this, "resultReplaced", 7);
-    this.inputFocus = createEvent(this, "inputFocus", 7);
-    this.inputBlur = createEvent(this, "inputBlur", 7);
-    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 (isHtmlElement(node)) {
-        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 = (element) => {
-      if (element != null) {
-        const res = trimNonstandardSpaces(Array.from(element.childNodes).reduce((res, n) => {
-          var _a;
-          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 (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 '';
-    };
-    this.createReplacedElement = (original, data) => {
-      const template = this.hostEl.querySelector('template[slot="replaced"]');
-      if (template != null) {
-        const instance = 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,
-              replacement.afterSpace,
-            ];
-          }
-          return res;
-        }, [])
-        : [];
-      this.rawElements = [...parts, createTextNode(nextSubstr)].reduce((res, p) => [...res, ...standardizeNewlinesAndSpaces(p)], []);
-      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 = 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);
-          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(this.contentEl));
-    }
-  }
-  render() {
-    var _a;
-    const classes = classnames('wrapper', {
-      standard: this.variant === 'standard',
-      filled: this.variant === 'filled',
-      underlined: this.variant === 'underlined',
-      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.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" })));
-  }
-  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(this.contentEl));
-  }
-  handleClick() {
-    this.handleCursorPositionUpdate();
-  }
-  handleWindowClick(event) {
-    if (isHtmlElement(event.target) &&
-      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 = isHtmlElement(triggeredElement)
-      ? 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) => {
-        return [
-          ...re,
-          ...this.attemptReplaceElement(e, triggeredElement, replacement),
-        ];
-      }, []);
-      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 this; }
-  static get watchers() { return {
-    "value": ["replaceContent"],
-    "replacements": ["updateContent"]
-  }; }
-  static get style() { return searchBarCss; }
-}, [6, "vertex-search-bar", {
-    "variant": [1],
-    "disabled": [4],
-    "triggerCharacter": [1, "trigger-character"],
-    "breakCharacters": [16],
-    "resultItems": [16],
-    "placement": [1],
-    "value": [1],
-    "placeholder": [1],
-    "replacements": [1040],
-    "replacementUriType": [1, "replacement-uri-type"],
-    "cursorPosition": [32],
-    "displayedElements": [32],
-    "hasTriggered": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["vertex-search-bar", "vertex-popover", "vertex-result-list"];
-  components.forEach(tagName => { switch (tagName) {
-    case "vertex-search-bar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SearchBar);
-      }
-      break;
-    case "vertex-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "vertex-result-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
-
-const VertexSearchBar = SearchBar;
-const defineCustomElement = defineCustomElement$1;
-
-export { SearchBar as S, VertexSearchBar, defineCustomElement };
+import{S as o,d as p}from"./p-CZyp2id8.js";const s=o,r=p;export{s as VertexSearchBar,r as defineCustomElement}

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface VertexSelect extends Components.VertexSelect, HTMLElement {}
 export const VertexSelect: {
-  prototype: VertexSelect;
-  new (): VertexSelect;
+    prototype: VertexSelect;
+    new (): VertexSelect;
 };
 /**
  * Used to define this component and all nested components recursively.