@vertexvis/ui 0.1.0-canary.13 → 0.1.0-canary.15

package/dist/esm/{search-bar-f12a3599.js → search-bar-8d18626e.js}

@@ -53,12 +53,24 @@ const getWindowSelection = () => {
   }
   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}`;
@@ -69,15 +81,56 @@ const createSearchResultReplacement = (result, before, after) => {
     before: createTextNode(before),
     beforeSpace: createTextNode(createHairSpace()),
     result: createTextNode(urn),
-    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    afterSpace: after != null
+      ? createTextNode(createNoBreakSpace())
+      : createTextNode(createHairSpace()),
     after: after != null ? createTextNode(after) : undefined,
   };
 };
-const getNodesForSearchResultReplacement = (replacement) => {
+/**
+ * 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);
-  return keys
+  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
@@ -112,13 +165,34 @@ const SearchBar = class {
     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 (node instanceof HTMLElement) {
+      if (isHtmlElement(node)) {
         return node.innerText;
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
@@ -195,21 +269,54 @@ const SearchBar = class {
         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 '';
     };
@@ -285,12 +392,13 @@ const SearchBar = class {
               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);
     }
   }
@@ -298,7 +406,7 @@ const SearchBar = class {
     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 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);
@@ -313,7 +421,7 @@ const SearchBar = class {
       if (this.lastReplacedSpace != null) {
         this.moveCursorToNodeEnd(this.lastReplacedSpace);
       }
-      this.inputChanged.emit(this.getContentAsString());
+      this.inputChanged.emit(this.getContentAsString(this.contentEl));
     }
   }
   render() {
@@ -325,7 +433,7 @@ const SearchBar = class {
       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" })));
   }
@@ -341,13 +449,13 @@ const SearchBar = class {
     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);
@@ -364,7 +472,7 @@ const SearchBar = class {
     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 &&
@@ -378,12 +486,10 @@ const SearchBar = class {
       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/esm/vertex-icon-button.entry.js

@@ -1,4 +1,4 @@
-export { I as vertex_icon_button } from './icon-button-4820c5f8.js';
+export { I as vertex_icon_button } from './icon-button-d15ffd10.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-091fab53.js';
+import './icon-helper-805b317d.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-788d26c9.js';
+export { I as vertex_icon } from './icon-74bf5afb.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-091fab53.js';
+import './icon-helper-805b317d.js';

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

@@ -1,4 +1,4 @@
-export { S as vertex_search_bar } from './search-bar-f12a3599.js';
+export { S as vertex_search_bar } from './search-bar-8d18626e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

package/dist/types/components/icon/icons/views.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Views: () => h.JSX.IntrinsicElements;

package/dist/types/components/search-bar/dom.d.ts

@@ -1,3 +1,8 @@
 export declare const getWindowSelection: () => Selection | undefined | null;
+export declare const nodeHasChildNodes: (node: Node) => boolean;
 export declare const createDocumentRange: () => Range;
 export declare const createTextNode: (text: string) => Text;
+export declare const createBreak: () => HTMLBRElement;
+export declare const createWrappingDiv: (nodes: Node[]) => HTMLDivElement;
+export declare const isHtmlElement: (node?: Node | EventTarget | null) => node is HTMLElement;
+export declare const isBrElement: (node: Node) => node is HTMLBRElement;

package/dist/types/components/search-bar/lib.d.ts

@@ -3,12 +3,19 @@ export interface SearchResultReplacement {
   before: Text;
   beforeSpace: Text;
   result: Text;
-  afterSpace?: Text;
+  afterSpace: Text;
   after?: Text;
 }
 export declare const createResultUri: (result: Result) => string;
 export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
-export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement) => Text[];
+/**
+ * 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.
+ */
+export declare const standardizeNewlinesAndSpaces: (node: ChildNode) => ChildNode[];
+export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement, isBreaking?: boolean) => Text[];
 /**
  * We leverage a couple unique spaces to represent mentions, allowing for
  * correct cursor movement when using arrow keys. As these characters are

package/dist/types/components/search-bar/search-bar.d.ts

@@ -121,6 +121,7 @@ export declare class SearchBar {
   private handleFocus;
   private handleBlur;
   private handleResultClick;
+  private attemptReplaceElement;
   private isIdenticalElement;
   private getTextContent;
   private getCursorPosition;

package/dist/types/types/icon.d.ts

@@ -105,6 +105,7 @@ export declare enum IconNames {
   'teleport' = "teleport",
   'turtle' = "turtle",
   'version-history' = "version-history",
+  'views' = "views",
   'visibility-hidden' = "visibility-hidden",
   'visibility-partial' = "visibility-partial",
   'visibility-visible' = "visibility-visible",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.13",
+  "version": "0.1.0-canary.15",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.21.0",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "53757193daeb9741ba4bbd83f922c2f1b2952a86"
+  "gitHead": "41506ac171f4e6645cc68412d714621a28c1bb29"
 }

package/dist/components/p-b1da3f7e.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon_button}from"./p-b11a0f6b.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-a50d42cc.js";

package/dist/components/p-b3548cdf.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon}from"./p-04449a31.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-a50d42cc.js";

package/dist/components/p-cfe369bf.entry.js

@@ -1 +0,0 @@
-export{S as vertex_search_bar}from"./p-db34f10c.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-1356f525.js";import"./p-59032668.js";

package/dist/components/p-db34f10c.js

@@ -1 +0,0 @@
-import{r as e,e as t,h as r,H as i,g as s}from"./p-6834631c.js";import{c as a}from"./p-fe062eb0.js";import{g as n}from"./p-1356f525.js";var l=function e(t,r){if(t===r)return!0;if(t&&r&&"object"==typeof t&&"object"==typeof r){if(t.constructor!==r.constructor)return!1;var i,s,a;if(Array.isArray(t)){if((i=t.length)!=r.length)return!1;for(s=i;0!=s--;)if(!e(t[s],r[s]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if((i=(a=Object.keys(t)).length)!==Object.keys(r).length)return!1;for(s=i;0!=s--;)if(!Object.prototype.hasOwnProperty.call(r,a[s]))return!1;for(s=i;0!=s--;){var n=a[s];if(!e(t[n],r[n]))return!1}return!0}return t!=t&&r!=r};const o=()=>{if("undefined"!=typeof window)return window.getSelection()},h=e=>new Text(e),c=e=>`${e.type}:${e.id}`,d=(e,t,r)=>{const i=c(e);return{before:h(t),beforeSpace:h(v()),result:h(i),afterSpace:null!=r?h(b()):void 0,after:null!=r?h(r):void 0}},u=e=>Object.keys(e).map((t=>e[t])).filter((e=>null!=e)),v=()=>String.fromCharCode(8202),b=()=>String.fromCharCode(160),x=class{constructor(r){e(this,r),this.searchChanged=t(this,"searchChanged",7),this.inputChanged=t(this,"inputChanged",7),this.resultReplaced=t(this,"resultReplaced",7),this.inputFocus=t(this,"inputFocus",7),this.inputBlur=t(this,"inputBlur",7),this.rawElements=[],this.isIdenticalElement=(e,t)=>e===this.triggeredElement||this.getTextContent(e)===this.getTextContent(t),this.getTextContent=e=>{var t;return e instanceof HTMLElement?e.innerText:null!==(t=e.textContent)&&void 0!==t?t:""},this.handleCursorPositionUpdate=()=>{var e,t;const r=null===(e=o())||void 0===e?void 0:e.getRangeAt(0);if(null!=r){const e=this.readTriggerValue(null!==(t=r.commonAncestorContainer.textContent)&&void 0!==t?t:"",r.startOffset);this.hasTriggered||null==e?this.hasTriggered&&null!=e?(this.triggeredRange=r,this.triggeredElement=r.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,""))):(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0):(this.hasTriggered=!0,this.triggeredRange=r,this.triggeredElement=r.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,"")))}this.cursorPosition=this.getCursorPosition()},this.readTriggerValue=(e,t)=>{const r=e.replace(String.fromCharCode(160)," "),i=r.substring(0,t),s=r.substring(t),a=`${i.includes(this.triggerCharacter)?i.substring(i.lastIndexOf(this.triggerCharacter)):""}${s.substring(0,this.firstIndexOfBreakCharacter(s))}`;return a.includes(this.triggerCharacter)&&!this.includesBreakCharacter(a)?a:void 0},this.includesBreakCharacter=e=>this.breakCharacters.some((t=>e.includes(t))),this.firstIndexOfBreakCharacter=e=>{const t=this.breakCharacters.map((t=>e.indexOf(t))).filter((e=>e>=0));return t.length>0?Math.min(...t):e.length},this.moveCursorToNodeEnd=(e,t=!1)=>{const r=o();if(null!=r){const i=document.createRange();i.selectNodeContents(e),i.collapse(t),r.removeAllRanges(),r.addRange(i)}},this.getContentAsString=()=>null!=this.contentEl?Array.from(this.contentEl.childNodes).reduce(((e,t)=>{var r;return t instanceof HTMLElement&&"true"===t.getAttribute("data-replaced")?`${e}${t.getAttribute("data-original")}`:t instanceof HTMLElement?`${e}${t.innerText}`:`${e}${null!==(r=t.textContent)&&void 0!==r?r:""}`}),"").replace(/[\u200A]/g,"").replace(/[\u00A0]/g," "):"",this.createReplacedElement=(e,t)=>{const r=this.hostEl.querySelector('template[slot="replaced"]');if(null!=r){const i=n(r);return i.bindings.bind(t),i.element.id=t.id,i.element.style.display="inline-block",i.element.contentEditable="false",i.element.tabIndex=-1,i.element.setAttribute("data-replaced","true"),i.element.setAttribute("data-original",e),i.element}throw new Error("Replaced template not defined.")},this.variant="standard",this.disabled=!1,this.triggerCharacter="@",this.breakCharacters=[" ","\n"],this.resultItems=void 0,this.placement="bottom-start",this.value=void 0,this.placeholder=void 0,this.replacements=[],this.replacementUriType="user",this.cursorPosition=void 0,this.displayedElements=[],this.hasTriggered=!1,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(e,t){if(null!=e&&e!==t){const t=e.match(new RegExp(`${this.replacementUriType}:[0-9a-z-]{36}`,"g")),r=this.replacements.reduce(((e,t)=>Object.assign(Object.assign({},e),{[c(t)]:t})),{});let i=e;const s=null!=t?null==t?void 0:t.reduce(((e,t)=>{if(null!=r[t]){const s=c(r[t]),a=i.indexOf(s),n=i.substring(0,a),l=i.substring(a+s.length),o=d(r[t],n);return i=l,[...e,o.before,o.beforeSpace,o.result]}return e}),[]):[];this.rawElements=[...s,h(i)],this.updateContent(this.replacements)}}updateContent(e,t){null==this.contentEl||l(e,t)||(this.contentEl.innerHTML="",this.displayedElements=this.rawElements.map((e=>{const t=e instanceof HTMLElement?e.innerText:e.textContent,r=this.replacements.find((e=>null==t?void 0:t.includes(c(e))));return null!=t&&null!=r?this.createReplacedElement(t,r):e})),this.displayedElements.forEach((e=>{var t;null===(t=this.contentEl)||void 0===t||t.appendChild("string"==typeof e?h(e):e)})),null!=this.lastReplacedSpace&&this.moveCursorToNodeEnd(this.lastReplacedSpace),this.inputChanged.emit(this.getContentAsString()))}render(){var e;const t=a("wrapper",{standard:"standard"===this.variant,filled:"filled"===this.variant,underlined:"underlined"===this.variant,blank:"blank"===this.variant,disabled:this.disabled});return r(i,null,r("div",{class:t},r("span",{class:"content-input",role:"textbox",contentEditable:"true","aria-multiline":"true","data-placeholder":this.placeholder,ref:e=>this.contentEl=e,onKeyDown:this.handleKeyDown,onKeyUp:this.handleCursorPositionUpdate,onClick:this.handleCursorPositionUpdate,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("vertex-result-list",{position:this.cursorPosition,placement:this.placement,open:this.hasTriggered&&null!=this.resultItems&&this.resultItems.length>0,items:null!==(e=this.resultItems)&&void 0!==e?e:[],onEnterPressed:this.handleResultClick,onResultClick:this.handleResultClick},r("slot",{name:"results"})),r("slot",{name:"replaced"}))}handleKeyDown(e){this.hasTriggered&&this.breakCharacters.includes(e.key)&&(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}handleKeyUp(e){this.handleCursorPositionUpdate(),this.cursorPosition=this.getCursorPosition()}async handleInput(){this.inputChanged.emit(this.getContentAsString())}handleClick(){this.handleCursorPositionUpdate()}handleWindowClick(e){e.target instanceof HTMLElement&&"true"===e.target.getAttribute("data-replaced")&&null!=e.target.nextSibling&&this.moveCursorToNodeEnd(e.target.nextSibling,!0)}handleFocus(e){this.inputFocus.emit(e)}handleBlur(e){this.hasTriggered=!1,this.inputBlur.emit(e)}handleResultClick(e){var t;const r=this.triggeredRange,i=this.triggeredElement,s=i instanceof HTMLElement?i.innerText:null==i?void 0:i.textContent;if(null!=this.contentEl&&null!=r&&null!=i&&null!=s){const a=null!==(t=this.readTriggerValue(s,r.startOffset))&&void 0!==t?t:"",n=s.split(a),l=d(e.detail,n[0],n[1]);this.lastReplacedSpace=l.afterSpace,this.rawElements=Array.from(this.contentEl.childNodes).reduce(((e,t)=>this.isIdenticalElement(t,i)?[...e,...u(l)]:[...e,t]),[]),this.hasTriggered=!1,this.resultReplaced.emit(e.detail),this.replacements=[...this.replacements.filter((t=>t.id!==e.detail.id)),e.detail]}}getCursorPosition(){var e;const t=o();if(null!=t&&t.rangeCount>0){const r=t.getRangeAt(0).getBoundingClientRect(),i=null===(e=this.contentEl)||void 0===e?void 0:e.getBoundingClientRect(),s=r.bottom||(null==i?void 0:i.bottom)||0,a=r.top||(null==i?void 0:i.top)||0;return{x:r.left||(null==i?void 0:i.left)||0,y:this.placement.includes("top")?a:s}}throw new Error("Unable to retrieve window selection.")}get hostEl(){return s(this)}static get watchers(){return{value:["replaceContent"],replacements:["updateContent"]}}};x.style=".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)}";export{x as S}