@vertexvis/ui 0.1.0-canary.0 → 0.1.0-canary.10

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AvatarVariant } from "./components/avatar/avatar";
+import { BadgeIconColor } from "./components/badge/badge";
 import { ButtonColor, ButtonExpand, ButtonSize, ButtonType, ButtonVariant } from "./components/button/button";
 import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
@@ -20,9 +21,8 @@ import { PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./
 import { DetectOverflowOptions, FlipOptions, OffsetOptions } from "@floating-ui/dom";
 import { RadioChangeEventDetail } from "./components/radio/radio";
 import { HorizontalDragDirection, ResizableBoundsUpdate, ResizeEventDetails, VerticalDragDirection } from "./components/resizable/resizable";
-import { Result } from "./components/result-list/result-list";
+import { Result } from "./components/result-list/types";
 import { SearchBarVariant } from "./components/search-bar/search-bar";
-import { Result as Result1 } from "./components/result-list/result-list";
 import { LabelDisplay, SliderChangeEventDetails, SliderSize } from "./components/slider/slider";
 import { SpinnerColor, SpinnerSize } from "./components/spinner/spinner";
 import { InputChangeEventDetail as InputChangeEventDetail1, TextFieldAutocomplete, TextFieldType, TextFieldVariant, TextSize as TextSize1 } from "./components/text-field/text-field";
@@ -71,6 +71,16 @@ export namespace Components {
     }
     interface VertexAvatarGroup {
     }
+    interface VertexBadge {
+        /**
+          * The color of the badge displayed in this <vertex-badge>. Can be "primary" or "secondary", and defaults to "primary."
+         */
+        "badgeColor": BadgeIconColor;
+        /**
+          * The string to show in the badge.
+         */
+        "badgeText"?: string;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -459,6 +469,9 @@ export namespace Components {
           * The behavior that this popover will have when the window is resized. Can be either 'dynamic' or 'fixed', and defaults to 'dynamic'.  'dynamic' will cause a position-based popover to adjust its position relative to the window resize to keep it in the same relative position. 'fixed' will keep the popover in the same position even if that means it would disappear off-screen.
          */
         "resizeBehavior": PopoverResizeBehavior;
+        "resizeObserverFactory": (
+    cb: (entries: ResizeObserverEntry[]) => void
+  ) => ResizeObserver;
         /**
           * Indicates if the position of the popover should be updated when the popover's content size changes.
          */
@@ -558,18 +571,46 @@ export namespace Components {
         "viewportStartIndex": number;
     }
     interface VertexSearchBar {
+        /**
+          * 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;
-        "getEditableContent": () => Promise<NodeListOf<ChildNode> | undefined>;
         /**
-          * Placeholder for text input.
+          * Whether this search bar is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement": PopoverPlacement;
-        "replaceTriggeredValue": (data: Record<string, unknown>) => Promise<void>;
-        "resultItems"?: Result1[];
-        "triggerCharacter"?: string;
-        "triggerCharacters": string[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType": string;
+        /**
+          * 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>`.
+         */
+        "replacements": Result[];
+        /**
+          * 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 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;
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant": SearchBarVariant;
     }
     interface VertexSelect {
@@ -581,6 +622,10 @@ export namespace Components {
           * Whether this select is disabled.
          */
         "disabled": boolean;
+        /**
+          * Whether this select will omit the currently selected value in the dropdown list.
+         */
+        "hideSelected": boolean;
         /**
           * A placeholder to use when no option has been selected. Defaults to "Select an option...".
          */
@@ -869,6 +914,12 @@ declare global {
         prototype: HTMLVertexAvatarGroupElement;
         new (): HTMLVertexAvatarGroupElement;
     };
+    interface HTMLVertexBadgeElement extends Components.VertexBadge, HTMLStencilElement {
+    }
+    var HTMLVertexBadgeElement: {
+        prototype: HTMLVertexBadgeElement;
+        new (): HTMLVertexBadgeElement;
+    };
     interface HTMLVertexButtonElement extends Components.VertexButton, HTMLStencilElement {
     }
     var HTMLVertexButtonElement: {
@@ -1077,6 +1128,7 @@ declare global {
         "vertex-auto-resize-textarea": HTMLVertexAutoResizeTextareaElement;
         "vertex-avatar": HTMLVertexAvatarElement;
         "vertex-avatar-group": HTMLVertexAvatarGroupElement;
+        "vertex-badge": HTMLVertexBadgeElement;
         "vertex-button": HTMLVertexButtonElement;
         "vertex-card": HTMLVertexCardElement;
         "vertex-card-group": HTMLVertexCardGroupElement;
@@ -1156,6 +1208,16 @@ declare namespace LocalJSX {
     }
     interface VertexAvatarGroup {
     }
+    interface VertexBadge {
+        /**
+          * The color of the badge displayed in this <vertex-badge>. Can be "primary" or "secondary", and defaults to "primary."
+         */
+        "badgeColor"?: BadgeIconColor;
+        /**
+          * The string to show in the badge.
+         */
+        "badgeText"?: string;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -1732,6 +1794,7 @@ declare namespace LocalJSX {
         "items"?: Result[];
         "itemsJson"?: string;
         "onEnterPressed"?: (event: VertexResultListCustomEvent<Result>) => void;
+        "onResultClick"?: (event: VertexResultListCustomEvent<Result>) => void;
         "open"?: boolean;
         "overScanCount"?: number;
         "placement"?: PopoverPlacement;
@@ -1741,33 +1804,66 @@ declare namespace LocalJSX {
         "viewportStartIndex"?: number;
     }
     interface VertexSearchBar {
+        /**
+          * 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;
         /**
-          * Emitted when input blurred
+          * Whether this search bar is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the input is blurred.
          */
         "onInputBlur"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when input focused
+          * Emitted when the value of the input has changed.
+         */
+        "onInputChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        /**
+          * Emitted when the input is focused.
          */
         "onInputFocus"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when enter is pressed an a result is highlighted.
+          * Emitted when a result has been selected to replace the trigger text.  Includes the ID of the `Result` selected.
          */
-        "onResultsEnterPressed"?: (event: VertexSearchBarCustomEvent<Result1>) => void;
-        "onTriggerCharacterPressed"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result>) => void;
         /**
-          * Emitted when the value has changed.
+          * Emitted when the value of the current search triggered by the specified `triggerCharacter` has changed.
          */
-        "onValueChanged"?: (event: VertexSearchBarCustomEvent<void>) => void;
+        "onSearchChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
         /**
-          * Placeholder for text input.
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement"?: PopoverPlacement;
-        "resultItems"?: Result1[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType"?: string;
+        /**
+          * 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>`.
+         */
+        "replacements"?: Result[];
+        /**
+          * 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 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;
-        "triggerCharacters"?: string[];
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant"?: SearchBarVariant;
     }
     interface VertexSelect {
@@ -1779,6 +1875,10 @@ declare namespace LocalJSX {
           * Whether this select is disabled.
          */
         "disabled"?: 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 changed to.
          */
@@ -1987,6 +2087,7 @@ declare namespace LocalJSX {
         "vertex-auto-resize-textarea": VertexAutoResizeTextarea;
         "vertex-avatar": VertexAvatar;
         "vertex-avatar-group": VertexAvatarGroup;
+        "vertex-badge": VertexBadge;
         "vertex-button": VertexButton;
         "vertex-card": VertexCard;
         "vertex-card-group": VertexCardGroup;
@@ -2030,6 +2131,7 @@ declare module "@stencil/core" {
             "vertex-auto-resize-textarea": LocalJSX.VertexAutoResizeTextarea & JSXBase.HTMLAttributes<HTMLVertexAutoResizeTextareaElement>;
             "vertex-avatar": LocalJSX.VertexAvatar & JSXBase.HTMLAttributes<HTMLVertexAvatarElement>;
             "vertex-avatar-group": LocalJSX.VertexAvatarGroup & JSXBase.HTMLAttributes<HTMLVertexAvatarGroupElement>;
+            "vertex-badge": LocalJSX.VertexBadge & JSXBase.HTMLAttributes<HTMLVertexBadgeElement>;
             "vertex-button": LocalJSX.VertexButton & JSXBase.HTMLAttributes<HTMLVertexButtonElement>;
             "vertex-card": LocalJSX.VertexCard & JSXBase.HTMLAttributes<HTMLVertexCardElement>;
             "vertex-card-group": LocalJSX.VertexCardGroup & JSXBase.HTMLAttributes<HTMLVertexCardGroupElement>;

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

@@ -37,9 +37,11 @@ export declare enum IconNames {
   'collapse-all' = "collapse-all",
   'columns' = "columns",
   'comment-add' = "comment-add",
+  'comment-filled' = "comment-filled",
   'comment-reopen' = "comment-reopen",
   'comment-resolve' = "comment-resolve",
   'comment-show' = "comment-show",
+  'compare' = "compare",
   'copy' = "copy",
   'cross-section' = "cross-section",
   'cube-orthographic' = "cube-orthographic",

package/dist/types/util/templates/element-pool.d.ts

@@ -1,12 +1,19 @@
 import { Binding } from './binding';
 import { InstancedTemplate } from './templates';
 export type ElementFactory = () => InstancedTemplate<HTMLElement>;
+export interface EventHandlerDescriptor {
+  type: string;
+  handler: (event: any) => void;
+}
+export type EventHandlerFactory = (element: HTMLElement) => EventHandlerDescriptor[];
 export declare class ElementPool {
   private container;
   private elementFactory;
+  private eventHandlerFactory?;
   private readonly elements;
   private instanceMap;
-  constructor(container: Element, elementFactory: ElementFactory);
+  private handlerMap;
+  constructor(container: Element, elementFactory: ElementFactory, eventHandlerFactory?: EventHandlerFactory | undefined);
   swapHeadToTail(count: number): HTMLElement[];
   swapTailToHead(count: number): HTMLElement[];
   updateElements(count: number): HTMLElement[];
@@ -14,5 +21,7 @@ export declare class ElementPool {
   updateElementFactory(elementFactory: ElementFactory): void;
   iterateElements(f: (element: HTMLElement, binding: Binding, index: number) => void): void;
   private createElement;
+  private addEventListeners;
   private deleteElement;
+  private removeEventListeners;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.0",
+  "version": "0.1.0-canary.10",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -84,7 +84,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@vertexvis/utils": "^0.21.0"
+    "@vertexvis/utils": "^0.21.0",
+    "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "ec3a3223eb51c43858014c01701b77ebe1670e84"
+  "gitHead": "425fd19e4df5cbda08164fc5028a5dbfd9f080cf"
 }

package/dist/cjs/icon-button-f868bf06.js

@@ -1,43 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-const iconHelper = require('./icon-helper-caf2699e.js');
-
-const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
-
-const IconButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.iconName = undefined;
-    this.disabled = undefined;
-    this.variant = 'default';
-    this.iconColor = 'default';
-    this.iconSize = 'md';
-  }
-  render() {
-    return (index.h(index.Host, { onClick: (e) => this.handleClick(e) }, index.h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: index$1.classnames('container', {
-        disabled: this.disabled,
-        floating: this.variant === 'floating',
-        plain: this.variant === 'plain',
-        primary: this.iconColor === 'primary',
-        secondary: this.iconColor === 'secondary',
-      }) }, index.h("slot", { name: "left" }), index.h("div", { class: index$1.classnames('icon-button', {
-        xs: this.iconSize === 'xs',
-        sm: this.iconSize === 'sm',
-        md: this.iconSize === 'md',
-        lg: this.iconSize === 'lg',
-      }) }, iconHelper.getSvg(this.iconName)), index.h("slot", null))));
-  }
-  handleClick(event) {
-    var _a;
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-};
-IconButton.style = iconButtonCss;
-
-exports.IconButton = IconButton;

package/dist/cjs/search-bar-bb40cfa7.js

@@ -1,290 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-const templates = require('./templates-e7b3ffbb.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) {
-    index.registerInstance(this, hostRef);
-    this.triggerCharacterPressed = index.createEvent(this, "triggerCharacterPressed", 7);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.inputFocus = index.createEvent(this, "inputFocus", 7);
-    this.inputBlur = index.createEvent(this, "inputBlur", 7);
-    this.resultsEnterPressed = index.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 = templates.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 = index$1.classnames('wrapper', {
-      standard: this.variant === 'standard',
-      filled: this.variant === 'filled',
-      underlined: this.variant === 'underlined',
-      blank: this.variant === 'blank',
-    });
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.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 })), index.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) }, index.h("slot", { name: "results" })), index.h("slot", { name: "replaced" })));
-  }
-  get hostEl() { return index.getElement(this); }
-};
-SearchBar.style = searchBarCss;
-
-exports.SearchBar = SearchBar;

package/dist/components/p-19318fee.entry.js

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