@vertexvis/ui 0.1.0-testing.3 → 0.1.0-testing.5

package/dist/esm/{tooltip-14b65fb5.js → tooltip-933da261.js}

@@ -2054,12 +2054,13 @@ function getBoundingClientRect(el) {
   return el.getBoundingClientRect();
 }
 
-const tooltipCss = ":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";
+const tooltipCss = ":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";
 
 const TOOLTIP_OPEN_DELAY = 500;
 const Tooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.pointerEntered = false;
     this.content = undefined;
     this.disabled = undefined;
     this.placement = 'bottom';
@@ -2068,32 +2069,40 @@ const Tooltip = class {
     this.open = false;
     this.handlePointerEnter = this.handlePointerEnter.bind(this);
     this.handlePointerLeave = this.handlePointerLeave.bind(this);
+    this.handleContentChange = this.handleContentChange.bind(this);
+    this.handleDisabledChange = this.handleDisabledChange.bind(this);
     this.tooltipId = `vertex-tooltip-${uuid.create()}`;
   }
   disconnectedCallback() {
     this.removeElement();
     this.clearOpenTimeout();
+    this.pointerEntered = false;
+  }
+  handleContentChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementChildren(this.internalContentElement);
+    }
+  }
+  handleDisabledChange() {
+    if (this.internalContentElement != null) {
+      this.updateContentElementClass(this.internalContentElement);
+    }
+    if (!this.disabled && this.pointerEntered) {
+      this.handlePointerEnter();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "target", ref: (el) => {
         this.targetElement = el;
       }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("slot", null)), h("div", { class: "content-hidden", ref: (el) => {
         this.contentElement = el;
-      } }, h("slot", { name: "content" }))));
+      } }, h("slot", { name: "content", onSlotchange: this.handleContentChange }))));
   }
   addElement() {
-    var _a;
     if (this.targetElement != null) {
       const popover = this.createPopoverElement(this.targetElement);
       const content = this.createContentElement();
-      this.displayedSlottedContent =
-        (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
-      if (this.content != null) {
-        content.innerText = this.content;
-      }
-      else if (this.displayedSlottedContent != null) {
-        content.appendChild(this.displayedSlottedContent);
-      }
+      this.updateContentElementChildren(content);
       popover.appendChild(content);
       this.hostElement.ownerDocument.body.appendChild(popover);
     }
@@ -2103,6 +2112,7 @@ const Tooltip = class {
     if (popover != null) {
       popover.remove();
     }
+    this.internalContentElement = undefined;
   }
   createPopoverElement(anchorElement) {
     const popover = this.hostElement.ownerDocument.createElement('vertex-popover');
@@ -2117,25 +2127,50 @@ const Tooltip = class {
     return popover;
   }
   createContentElement() {
-    const content = this.hostElement.ownerDocument.createElement('div');
-    content.setAttribute('class', classnames('vertex-tooltip-content', {
+    this.internalContentElement =
+      this.hostElement.ownerDocument.createElement('div');
+    this.internalContentElement.setAttribute('class', classnames('vertex-tooltip-content', {
+      hidden: !this.open || this.disabled,
+    }));
+    return this.internalContentElement;
+  }
+  updateContentElementClass(element) {
+    element.setAttribute('class', classnames('vertex-tooltip-content', {
       hidden: !this.open || this.disabled,
     }));
-    return content;
+  }
+  updateContentElementChildren(element) {
+    var _a;
+    this.displayedSlottedContent =
+      (_a = getSlottedContent(this.contentElement)) !== null && _a !== void 0 ? _a : this.displayedSlottedContent;
+    if (this.content != null) {
+      element.innerText = this.content;
+    }
+    else if (this.displayedSlottedContent != null) {
+      element.appendChild(this.displayedSlottedContent);
+    }
   }
   handlePointerEnter() {
     if (this.openTimeout == null && !this.disabled) {
-      this.openTimeout = setTimeout(() => {
-        this.open = true;
-        this.openTimeout = undefined;
-        this.addElement();
-      }, this.delay);
+      this.createOpenTimeout();
+    }
+    else if (this.openTimeout == null) {
+      this.pointerEntered = true;
     }
   }
   handlePointerLeave() {
     this.clearOpenTimeout();
     this.removeElement();
     this.open = false;
+    this.pointerEntered = false;
+  }
+  createOpenTimeout() {
+    this.openTimeout = setTimeout(() => {
+      this.open = true;
+      this.openTimeout = undefined;
+      this.addElement();
+    }, this.delay);
+    this.pointerEntered = false;
   }
   clearOpenTimeout() {
     if (this.openTimeout != null) {
@@ -2144,6 +2179,10 @@ const Tooltip = class {
     }
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "content": ["handleContentChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Tooltip.style = tooltipCss;
 

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

@@ -0,0 +1,3 @@
+export { B as vertex_badge } from './badge-6d27ca92.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon_button } from './icon-button-25edf617.js';
+export { I as vertex_icon_button } from './icon-button-aad3c0e7.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-10a99d95.js';
+import './icon-helper-83f10f73.js';

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

@@ -1,4 +1,4 @@
-export { I as vertex_icon } from './icon-2630793d.js';
+export { I as vertex_icon } from './icon-d37150b4.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
-import './icon-helper-10a99d95.js';
+import './icon-helper-83f10f73.js';

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

@@ -1,3 +1,3 @@
-export { P as vertex_popover } from './popover-67c88e4b.js';
+export { P as vertex_popover } from './popover-6e806354.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,4 +1,4 @@
-export { R as vertex_result_list } from './result-list-36cfb08a.js';
+export { R as vertex_result_list } from './result-list-16c6afbd.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

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

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

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

@@ -1,3 +1,3 @@
-export { S as vertex_select } from './select-75ed5653.js';
+export { S as vertex_select } from './select-d4e135b7.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,3 +1,3 @@
-export { T as vertex_textfield } from './text-field-e542da25.js';
+export { T as vertex_textfield } from './text-field-32ac877e.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

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

@@ -1,4 +1,4 @@
-export { T as vertex_tooltip } from './tooltip-14b65fb5.js';
+export { T as vertex_tooltip } from './tooltip-933da261.js';
 import './index-72f28b71.js';
 import './tslib.es6-99cd0de8.js';
 import './index-9c609209.js';

package/dist/types/components/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { h } from '../../stencil-public-runtime';
+export type BadgeIconColor = 'primary' | 'secondary';
+export declare class Badge {
+  /**
+   * The string to show in the badge.
+   */
+  badgeText?: string;
+  /**
+   * The color of the badge displayed in this <vertex-badge>.
+   * Can be "primary" or "secondary", and defaults to "primary."
+   */
+  badgeColor: BadgeIconColor;
+  render(): h.JSX.IntrinsicElements;
+}

package/dist/types/components/icon/icons/comment-filled.d.ts

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

package/dist/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './auto-resize-textarea/auto-resize-textarea';
 export * from './avatar/avatar';
 export * from './avatar-group/avatar-group';
+export * from './badge/badge';
 export * from './button/button';
 export * from './card/card';
 export * from './card-group/card-group';

package/dist/types/components/popover/popover.d.ts

@@ -126,11 +126,16 @@ export declare class Popover {
   private viewportWidth?;
   private viewportHeight?;
   private resizeTimeout?;
+  private boundaryResizeObserver?;
   private shouldUpdatePosition;
   private updateDispose?;
   private middleware;
   private partialWindow;
   constructor();
+  /**
+   * @internal
+   */
+  resizeObserverFactory: (cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver;
   connectedCallback(): void;
   componentDidUpdate(): void;
   componentDidLoad(): void;
@@ -140,6 +145,7 @@ export declare class Popover {
   updateOpened(open?: boolean): void;
   updateAnimated(): void;
   updateMiddleware(): void;
+  updateResizeObserver(): void;
   /**
    * @private Used for internals or testing.
    */
@@ -152,5 +158,6 @@ export declare class Popover {
   private getAnchorBoundsVirtualElement;
   private handleResize;
   private updateViewport;
+  private getOrCreateResizeObserver;
   private getTransformClass;
 }

package/dist/types/components/result-list/result-list.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 import { PopoverPlacement } from '../popover/popover';
-export type Result = Record<string, unknown>;
+export type Result = {
+  id: string;
+  type: string;
+} & Record<string, unknown>;
 export declare class ResultList {
   items: Result[];
   itemsJson?: string;
@@ -20,9 +23,11 @@ export declare class ResultList {
   private lastFocusedIndex;
   private stateMap;
   private hostEl;
+  private resultClick;
   private resizeObserver;
   private computedResultHeight?;
   private resultsScrollEl?;
+  constructor();
   handleResultsChanged(results: Array<Result> | string | undefined): void;
   handleOpenChanged(): void;
   protected componentWillLoad(): void;
@@ -35,7 +40,10 @@ export declare class ResultList {
   private ensureTemplateDefined;
   private createResultPool;
   private createResultInstance;
+  private createResultHandlers;
   private layoutResults;
+  private handlePointerDown;
+  private handleResultClick;
   private computeViewportResults;
   private getListHeight;
   private handleScroll;

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

@@ -0,0 +1,3 @@
+export declare const getWindowSelection: () => Selection | undefined | null;
+export declare const createDocumentRange: () => Range;
+export declare const createTextNode: (text?: string) => Text;

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

@@ -1,6 +1,12 @@
-export declare const getWindowSelection: () => Selection | undefined | null;
-export declare const createDocumentRange: () => Range;
-export declare const isTextNode: (node: Node) => node is Text;
-export declare const isHtmlElement: (target: EventTarget) => target is HTMLElement;
-export declare const isReplacedElement: (el?: HTMLElement | null) => el is HTMLElement;
-export declare const createTextNode: (text?: string) => Text;
+import { Result } from '../result-list/result-list';
+export interface SearchResultReplacement {
+  before: Text;
+  beforeSpace: Text;
+  result: Text;
+  afterSpace?: Text;
+  after?: Text;
+}
+export declare const createResultUrn: (result: Result) => string;
+export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
+export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement) => Text[];
+export declare const trimNonstandardSpaces: (text: string) => string;

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

@@ -3,65 +3,122 @@ import { PopoverPlacement } from '../popover/popover';
 import { Result } from '../result-list/result-list';
 export type SearchBarVariant = 'standard' | 'filled' | 'underlined' | 'blank';
 export declare class SearchBar {
+  /**
+   * The search bar variant to display.
+   *
+   * Possible options are:
+   * - 'standard' (default)
+   * - 'filled'
+   * - 'underlined'
+   * - 'blank
+   */
   variant: SearchBarVariant;
-  resultItems?: Result[];
-  triggerCharacters: string[];
-  triggerCharacter?: string;
+  /**
+   * Whether this search bar is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The character indicating that we should trigger a search.
+   *
+   * When this character is encountered, the text following it
+   * (omitting `breakCharacters`) will be emitted as a `searchChanged`
+   * event.
+   */
+  triggerCharacter: string;
+  /**
+   * Characters that should trigger a "break" of the search. If
+   * a value in this list is encountered when trying to parse back
+   * to the `triggerCharacter`, this will hide the result list.
+   */
   breakCharacters: string[];
-  debounce: number;
   /**
-   * Placeholder for text input.
+   * The items to display in this search bar's `<vertex-result-list>`.
+   *
+   * This can be used alongside the `searchChanged` event to query for
+   * results to display.
+   */
+  resultItems?: Result[];
+  /**
+   * The placement of the result list for this search bar.
+   *
+   * Corresponds to the value for the underlying <vertex-popover>
+   * placement value.
+   * @see(PopoverPlacement)
    */
-  placeholder?: string;
   placement: PopoverPlacement;
-  triggerCharacterPressed: EventEmitter<string>;
-  private cursorPosition?;
-  private open;
-  private triggerKey?;
-  private triggerRange?;
-  private hostEl;
   /**
-   * Emitted when the value has changed.
+   * The initial value of this search bar. This will be used in
+   * combination with the value of `replacements` to display existing
+   * replaced values.
    */
-  valueChanged: EventEmitter<void>;
+  value?: string;
   /**
-   * Emitted when input focused
+   * A placeholder to display when no text has been entered.
    */
-  inputFocus: EventEmitter<FocusEvent>;
+  placeholder?: string;
   /**
-   * Emitted when input blurred
+   * Replaced result values. This will be used in combination with the
+   * value of `value` to display existing replaced values.
+   *
+   * This value will be automatically updated as `Result`s are clicked
+   * within this search bar's `<vertex-result-list>`.
    */
-  inputBlur: EventEmitter<FocusEvent>;
+  replacements: Result[];
+  /**
+   * Emitted when the value of the current search triggered by
+   * the specified `triggerCharacter` has changed.
+   */
+  searchChanged: EventEmitter<string>;
+  /**
+   * Emitted when the value of the input has changed.
+   */
+  inputChanged: EventEmitter<string>;
+  /**
+   * Emitted when a result has been selected to replace the trigger text.
+   *
+   * Includes the ID of the `Result` selected.
+   */
+  resultReplaced: EventEmitter<Result>;
+  /**
+   * Emitted when the input is focused.
+   */
+  inputFocus: EventEmitter<FocusEvent>;
   /**
-   * Emitted when enter is pressed an a result is highlighted.
+   * Emitted when the input is blurred.
    */
-  resultsEnterPressed: EventEmitter<Result>;
+  inputBlur: EventEmitter<FocusEvent>;
+  private hostEl;
+  private cursorPosition;
+  private displayedElements;
+  private hasTriggered;
   private contentEl?;
-  private triggerTimeout?;
-  protected componentWillLoad(): void;
+  private triggeredElement?;
+  private triggeredRange?;
+  private rawElements;
+  private lastReplacedSpace?;
+  constructor();
+  protected componentDidLoad(): void;
+  protected connectedCallback(): void;
   protected disconnectedCallback(): void;
-  replaceTriggeredValue(data: Record<string, unknown>): Promise<void>;
-  getEditableContent(): Promise<NodeListOf<ChildNode> | undefined>;
+  protected replaceContent(newValue?: string, oldValue?: string): void;
+  protected updateContent(): void;
   render(): h.JSX.IntrinsicElements;
   private handleKeyDown;
   private handleKeyUp;
-  private updateTriggerValue;
-  private triggerText;
-  private restartTriggerInput;
-  private clearTriggerTimeout;
-  private updateCursorPosition;
-  private moveCursorToNodeEnd;
-  private updateInputCursorPosition;
-  private createReplacedElement;
-  private handleSelectionChange;
-  private getSelectionSubstring;
-  private insertAdjacentTextNode;
-  private updateTriggerState;
-  private updateTriggerRange;
-  private clearTriggerState;
-  private lastIndexOfBreakCharacter;
+  private handleInput;
+  private handleClick;
+  private handleWindowClick;
   private handleFocus;
   private handleBlur;
-  private handleInputPointerEvent;
-  private handleResultPointerDown;
+  private handleResultClick;
+  private isIdenticalElement;
+  private getTextContent;
+  private getCursorPosition;
+  private handleCursorPositionUpdate;
+  private readTriggerValue;
+  private includesBreakCharacter;
+  private firstIndexOfBreakCharacter;
+  private moveCursorToNodeEnd;
+  private getContentAsString;
+  private createReplacedElement;
 }

package/dist/types/components/select/select.d.ts

@@ -24,6 +24,11 @@ export declare class Select {
    * or closing.
    */
   animated: boolean;
+  /**
+   * Whether this select will omit the currently selected
+   * value in the dropdown list.
+   */
+  hideSelected: boolean;
   /**
    * Emitted when the selected option of this element
    * changes, and contains the value that it has been
@@ -51,10 +56,13 @@ export declare class Select {
   connectedCallback(): void;
   disconnectedCallback(): void;
   handleUpdateValue(value?: string): void;
+  protected handleUpdateDisplayValue(): void;
   render(): h.JSX.IntrinsicElements;
   private handleOpen;
   private handleDismiss;
   private updateDisplayValue;
   private removeOptionListeners;
+  private clearSelectedOptionFlag;
+  private getSelectedOption;
   private getBounds;
 }

package/dist/types/components/tooltip/tooltip.d.ts

@@ -40,18 +40,25 @@ export declare class Tooltip {
   hostElement: HTMLElement;
   private open;
   private tooltipId;
+  private pointerEntered;
   private openTimeout?;
   private targetElement?;
   private contentElement?;
   private displayedSlottedContent?;
+  private internalContentElement?;
   constructor();
   disconnectedCallback(): void;
+  protected handleContentChange(): void;
+  protected handleDisabledChange(): void;
   render(): h.JSX.IntrinsicElements;
   private addElement;
   private removeElement;
   private createPopoverElement;
   private createContentElement;
+  private updateContentElementClass;
+  private updateContentElementChildren;
   private handlePointerEnter;
   private handlePointerLeave;
+  private createOpenTimeout;
   private clearOpenTimeout;
 }