@vertexvis/ui 0.1.0-testing.4 → 0.1.0-testing.6

package/dist/esm/search-bar-59cc151d.js

@@ -1,288 +0,0 @@
-import { r as registerInstance, e as createEvent, h, H as Host, g as getElement } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-import { g as generateInstanceFromTemplate } from './templates-797420bf.js';
-
-const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
-};
-const createDocumentRange = () => {
-  return document.createRange();
-};
-const isTextNode = (node) => {
-  return node instanceof Text;
-};
-const isHtmlElement = (target) => {
-  return target instanceof HTMLElement;
-};
-const isReplacedElement = (el) => {
-  return (el === null || el === void 0 ? void 0 : el.getAttribute('data-replaced')) === 'true';
-};
-const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
-};
-
-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}.test-mention.sc-vertex-search-bar{display:inline-block;color:blue}.hidden.sc-vertex-search-bar{visibility:hidden}.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}.textarea.sc-vertex-search-bar{overflow:hidden;outline:none;box-shadow:none;resize:none}.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) {
-    registerInstance(this, hostRef);
-    this.triggerCharacterPressed = createEvent(this, "triggerCharacterPressed", 7);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.inputFocus = createEvent(this, "inputFocus", 7);
-    this.inputBlur = createEvent(this, "inputBlur", 7);
-    this.resultsEnterPressed = createEvent(this, "resultsEnterPressed", 7);
-    this.handleKeyDown = (event) => {
-      if ((this.triggerCharacters.includes(event.key) ||
-        this.triggerCharacter === event.key) &&
-        this.triggerKey == null) {
-        this.triggerKey = event.key;
-        this.updateCursorPosition();
-        this.triggerCharacterPressed.emit('');
-      }
-      else {
-        this.restartTriggerInput();
-      }
-      if (event.key === 'Backspace') {
-        const selection = getWindowSelection();
-        if (selection && (selection === null || selection === void 0 ? void 0 : selection.rangeCount) > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-        }
-      }
-      this.valueChanged.emit();
-    };
-    this.handleKeyUp = (event) => {
-      if (event.key === 'Backspace') {
-        this.updateTriggerState(this.getSelectionSubstring());
-      }
-      if (event.key === 'Enter') {
-        this.clearTriggerState();
-      }
-      this.valueChanged.emit();
-    };
-    this.updateTriggerValue = (data) => {
-      var _a, _b, _c, _d, _e;
-      if (this.triggerKey != null &&
-        this.triggerRange != null &&
-        this.triggerRange.startContainer === this.triggerRange.endContainer) {
-        const triggerRangeNode = this.triggerRange.startContainer;
-        if (isTextNode(triggerRangeNode)) {
-          const before = createTextNode((_a = triggerRangeNode.textContent) === null || _a === void 0 ? void 0 : _a.slice(0, this.triggerRange.startOffset - 1));
-          const after = createTextNode((_b = triggerRangeNode.textContent) === null || _b === void 0 ? void 0 : _b.slice(this.triggerRange.endOffset));
-          const replaced = this.createReplacedElement(data);
-          (_c = triggerRangeNode.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(before, triggerRangeNode);
-          (_d = triggerRangeNode.parentElement) === null || _d === void 0 ? void 0 : _d.insertBefore(after, triggerRangeNode.nextSibling);
-          (_e = triggerRangeNode.parentElement) === null || _e === void 0 ? void 0 : _e.insertBefore(replaced, after);
-          triggerRangeNode.remove();
-          this.moveCursorToNodeEnd(after, true);
-        }
-      }
-    };
-    this.triggerText = () => {
-      var _a, _b;
-      if (this.triggerKey != null &&
-        this.triggerRange != null &&
-        this.triggerRange.startContainer === this.triggerRange.endContainer) {
-        const triggerRangeNode = this.triggerRange.startContainer;
-        return ((_b = (_a = triggerRangeNode.textContent) === null || _a === void 0 ? void 0 : _a.slice(this.triggerRange.startOffset, this.triggerRange.endOffset)) !== null && _b !== void 0 ? _b : '');
-      }
-      return '';
-    };
-    this.restartTriggerInput = () => {
-      this.clearTriggerTimeout();
-      this.triggerTimeout = setTimeout(() => {
-        if (this.triggerRange != null && this.triggerKey != null) {
-          this.triggerCharacterPressed.emit(this.triggerText());
-        }
-        this.triggerTimeout = undefined;
-      }, this.debounce);
-    };
-    this.clearTriggerTimeout = () => {
-      if (this.triggerTimeout != null) {
-        clearTimeout(this.triggerTimeout);
-        this.triggerTimeout = undefined;
-      }
-    };
-    this.updateCursorPosition = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const cursorBounds = selection.getRangeAt(0).getBoundingClientRect();
-        const inputBounds = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const cursorBottom = cursorBounds.bottom || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.bottom) || 0;
-        const cursorTop = cursorBounds.top || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.top) || 0;
-        this.cursorPosition = {
-          x: cursorBounds.left || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.left) || 0,
-          y: this.placement.includes('top') ? cursorTop : cursorBottom,
-        };
-      }
-    };
-    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.updateInputCursorPosition = (target) => {
-      if (isHtmlElement(target)) {
-        const targetElement = isReplacedElement(target.parentElement)
-          ? target.parentElement
-          : target;
-        if (isReplacedElement(targetElement)) {
-          this.insertAdjacentTextNode(targetElement);
-        }
-      }
-    };
-    this.createReplacedElement = (data) => {
-      const template = this.hostEl.querySelector('template[slot="replaced"]');
-      if (template != null) {
-        const instance = generateInstanceFromTemplate(template);
-        instance.bindings.bind(data);
-        instance.element.style.display = 'inline-block';
-        instance.element.contentEditable = 'false';
-        instance.element.setAttribute('data-replaced', 'true');
-        return instance.element;
-      }
-      else {
-        throw new Error('Replaced template not defined.');
-      }
-    };
-    this.handleSelectionChange = () => {
-      this.updateTriggerState(this.getSelectionSubstring());
-    };
-    this.getSelectionSubstring = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        this.updateTriggerRange();
-        if (range != null &&
-          range.startOffset === range.endOffset &&
-          isTextNode(range.startContainer) &&
-          range.startContainer.textContent != null &&
-          !isReplacedElement(range.startContainer.parentElement) &&
-          ((_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.contains(range.startContainer))) {
-          return range.startContainer.textContent.slice(this.lastIndexOfBreakCharacter(range.startContainer.textContent.slice(0, range.startOffset)) + 1, range.startOffset);
-        }
-      }
-      return '';
-    };
-    this.insertAdjacentTextNode = (el) => {
-      el.insertAdjacentText('afterend', '');
-      if (el.nextSibling != null) {
-        this.moveCursorToNodeEnd(el.nextSibling);
-      }
-    };
-    this.updateTriggerState = (text) => {
-      const triggers = this.triggerCharacter != null
-        ? [...this.triggerCharacters, this.triggerCharacter]
-        : this.triggerCharacters;
-      const trigger = triggers.find((tc) => text.includes(tc));
-      if (trigger != null) {
-        this.restartTriggerInput();
-        this.triggerKey = trigger;
-        this.updateTriggerRange();
-        if (this.cursorPosition == null) {
-          this.updateCursorPosition();
-        }
-        this.open = true;
-      }
-      else {
-        this.clearTriggerState();
-      }
-    };
-    this.updateTriggerRange = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        if (this.triggerKey != null) {
-          this.triggerRange = (_a = this.triggerRange) !== null && _a !== void 0 ? _a : range.cloneRange();
-          this.triggerRange.setEnd(range.endContainer, range.endOffset);
-        }
-      }
-    };
-    this.clearTriggerState = () => {
-      this.triggerKey = undefined;
-      this.triggerRange = undefined;
-      this.cursorPosition = undefined;
-      this.open = false;
-      this.clearTriggerTimeout();
-    };
-    this.lastIndexOfBreakCharacter = (search) => {
-      const index = this.breakCharacters.reduce((index, bc) => {
-        const searchIndex = search
-          .replace(String.fromCharCode(160), ' ')
-          .lastIndexOf(bc);
-        return searchIndex > index ? searchIndex : index;
-      }, -1);
-      return index;
-    };
-    this.handleFocus = (ev) => {
-      this.inputFocus.emit(ev);
-    };
-    this.handleBlur = (ev) => {
-      this.open = false;
-      this.inputBlur.emit(ev);
-    };
-    this.handleInputPointerEvent = (ev) => {
-      if (ev.target != null) {
-        this.updateInputCursorPosition(ev.target);
-      }
-    };
-    this.handleResultPointerDown = (ev) => {
-      ev.preventDefault();
-    };
-    this.variant = 'standard';
-    this.resultItems = undefined;
-    this.triggerCharacters = [];
-    this.triggerCharacter = undefined;
-    this.breakCharacters = [' '];
-    this.debounce = 100;
-    this.placeholder = undefined;
-    this.placement = 'bottom-start';
-    this.cursorPosition = undefined;
-    this.open = false;
-    this.triggerKey = undefined;
-    this.triggerRange = undefined;
-  }
-  componentWillLoad() {
-    document.addEventListener('selectionchange', this.handleSelectionChange);
-  }
-  disconnectedCallback() {
-    document.removeEventListener('selectionchange', this.handleSelectionChange);
-  }
-  async replaceTriggeredValue(data) {
-    this.updateTriggerValue(data);
-    this.clearTriggerState();
-    this.valueChanged.emit();
-  }
-  async getEditableContent() {
-    var _a;
-    return (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.childNodes;
-  }
-  render() {
-    var _a;
-    const classes = classnames('wrapper', {
-      standard: this.variant === 'standard',
-      filled: this.variant === 'filled',
-      underlined: this.variant === 'underlined',
-      blank: this.variant === 'blank',
-    });
-    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", ref: (ref) => (this.contentEl = ref), role: "textbox", contenteditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onPointerDown: this.handleInputPointerEvent, onPointerUp: this.handleInputPointerEvent })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.open &&
-        this.resultItems != null &&
-        this.resultItems.length > 0 &&
-        this.cursorPosition != null, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onPointerDown: this.handleResultPointerDown, onEnterPressed: (event) => this.resultsEnterPressed.emit(event.detail) }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
-  }
-  get hostEl() { return getElement(this); }
-};
-SearchBar.style = searchBarCss;
-
-export { SearchBar as S };