@vertexvis/ui 0.1.0-canary.2 → 0.1.0-canary.21

package/dist/esm/index.js

@@ -8,37 +8,41 @@ export { C as CardGroup } from './card-group-4e8e0421.js';
 export { C as Chip } from './chip-4e568eee.js';
 export { C as ClickToEditTextField } from './click-to-edit-text-field-d9b27cd0.js';
 export { C as Collapsible } from './collapsible-b52960e6.js';
-export { C as ColorCircle } from './color-circle-842f3321.js';
-export { C as ColorCirclePicker } from './color-circle-picker-998a7e9c.js';
-export { C as ColorPicker } from './color-picker-2e3b51fa.js';
+export { C as ColorCirclePicker } from './color-circle-picker-e2a2cfb5.js';
+export { C as ColorPicker } from './color-picker-1d67effe.js';
+export { C as ColorSwatch } from './color-swatch-0e62d13d.js';
 export { C as ContextMenu } from './context-menu-12f1afe1.js';
-export { D as Dialog } from './dialog-e3f49527.js';
+export { D as Dialog } from './dialog-1cef715c.js';
 export { D as DraggablePopover } from './draggable-popover-8ef3aec6.js';
 export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
 export { E as Expandable } from './expandable-b487cb00.js';
 export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
-export { I as Icon } from './icon-d37150b4.js';
-export { I as IconButton } from './icon-button-aad3c0e7.js';
+export { I as Icon } from './icon-55b22de7.js';
+export { I as IconButton } from './icon-button-e6c72aec.js';
 export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
 export { M as Menu } from './menu-daa7f9c9.js';
 export { M as MenuDivider } from './menu-divider-87c888cb.js';
 export { M as MenuItem } from './menu-item-c33aa9dd.js';
-export { P as Popover } from './popover-67c88e4b.js';
+export { P as Popover } from './popover-6e806354.js';
 export { R as Radio } from './radio-39c11ba4.js';
 export { R as RadioGroup } from './radio-group-7c35d2f0.js';
 export { R as Resizable } from './resizable-a147709b.js';
-export { R as ResultList } from './result-list-36cfb08a.js';
-export { S as SearchBar } from './search-bar-59cc151d.js';
-export { S as Select } from './select-75ed5653.js';
+export { R as ResultList } from './result-list-16c6afbd.js';
+export { S as SearchBar } from './search-bar-8d18626e.js';
+export { S as Select } from './select-78aeff96.js';
 export { S as Slider } from './slider-dcdb388f.js';
 export { S as Spinner } from './spinner-afccea51.js';
-export { T as TextField } from './text-field-e542da25.js';
+export { T as Tab } from './tab-c76332b0.js';
+export { T as Tabs } from './tabs-8e5353ba.js';
+export { T as TextField } from './text-field-32ac877e.js';
 export { T as Toast } from './toast-255648ff.js';
 export { T as Toggle } from './toggle-1fe22e4f.js';
-export { T as Tooltip } from './tooltip-97c1b3ec.js';
+export { T as Tooltip } from './tooltip-29278ea4.js';
 import './index-72f28b71.js';
 import './slots-fbb5afb3.js';
 import './index-9c609209.js';
-import './icon-helper-83f10f73.js';
+import './lib-73fbca8b.js';
+import './icon-helper-67de1067.js';
 import './templates-797420bf.js';
 import './tslib.es6-99cd0de8.js';
+import './dom-613e2677.js';

package/dist/esm/lib-73fbca8b.js

@@ -0,0 +1,7 @@
+const hexRegex = /^(#|0x)?([A-Fa-f0-9]{6})$/;
+function isValidHexColor(color) {
+  const match = color != null ? hexRegex.exec(color) : undefined;
+  return match != null && match.length > 0;
+}
+
+export { isValidHexColor as i };

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"resultItems":[16],"triggerCharacters":[16],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"debounce":[2],"placeholder":[1],"placement":[1],"cursorPosition":[32],"open":[32],"triggerKey":[32],"triggerRange":[32],"replaceTriggeredValue":[64],"getEditableContent":[64]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"opened":[32],"computedPlacement":[32]}]]]], options);
+  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
   });
 };
 

package/dist/esm/{popover-67c88e4b.js → popover-6e806354.js}

@@ -1473,13 +1473,17 @@ const Popover = class {
     this.updateOnResize = false;
     this.opened = false;
     this.computedPlacement = this.placement;
+    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
     this.updateListener = this.updateListener.bind(this);
     this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
     this.setWindow = this.setWindow.bind(this);
+    this.updateResizeObserver = this.updateResizeObserver.bind(this);
   }
   connectedCallback() {
     this.updatePosition(this.position);
+    this.updateResizeObserver();
   }
   componentDidUpdate() {
     if (this.shouldUpdatePosition) {
@@ -1501,12 +1505,14 @@ const Popover = class {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.viewportWidth = undefined;
     this.viewportHeight = undefined;
     this.opened = false;
     if (this.resizeBehavior === 'dynamic') {
       window.removeEventListener('resize', this.handleResize);
     }
+    (_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   updatePosition(position) {
     if (position != null) {
@@ -1530,6 +1536,16 @@ const Popover = class {
   updateMiddleware() {
     this.handleMiddlewareChange();
   }
+  updateResizeObserver() {
+    const observer = this.getOrCreateResizeObserver();
+    observer.disconnect();
+    if (this.boundarySelector != null) {
+      const element = document.querySelector(this.boundarySelector);
+      if (element != null) {
+        observer.observe(element);
+      }
+    }
+  }
   /**
    * @private Used for internals or testing.
    */
@@ -1635,6 +1651,12 @@ const Popover = class {
     this.viewportWidth = this.partialWindow.innerWidth;
     this.viewportHeight = this.partialWindow.innerHeight;
   }
+  getOrCreateResizeObserver() {
+    if (this.boundaryResizeObserver == null) {
+      this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
+    }
+    return this.boundaryResizeObserver;
+  }
   getTransformClass() {
     if (this.animated) {
       switch (this.computedPlacement) {
@@ -1671,7 +1693,7 @@ const Popover = class {
     "placement": ["updatePlacement"],
     "open": ["updateOpened"],
     "animated": ["updateAnimated"],
-    "boundarySelector": ["updateMiddleware"],
+    "boundarySelector": ["updateMiddleware", "updateResizeObserver"],
     "overflowBehavior": ["updateMiddleware"],
     "flipBehavior": ["updateMiddleware"],
     "offsetBehavior": ["updateMiddleware"]

package/dist/esm/{result-list-36cfb08a.js → result-list-16c6afbd.js}

@@ -3,10 +3,12 @@ import { c as classnames } from './index-9c609209.js';
 import { g as generateInstanceFromTemplate } from './templates-797420bf.js';
 
 class ElementPool {
-  constructor(container, elementFactory) {
+  constructor(container, elementFactory, eventHandlerFactory) {
     this.container = container;
     this.elementFactory = elementFactory;
+    this.eventHandlerFactory = eventHandlerFactory;
     this.instanceMap = new Map();
+    this.handlerMap = new Map();
     this.elements = [];
   }
   swapHeadToTail(count) {
@@ -58,15 +60,31 @@ class ElementPool {
     this.elements.push(instance.element);
     this.instanceMap.set(instance.element, instance);
     this.container.append(instance.element);
+    this.addEventListeners(instance.element);
     return instance;
   }
+  addEventListeners(element) {
+    var _a;
+    const handlers = (_a = this.eventHandlerFactory) === null || _a === void 0 ? void 0 : _a.call(this, element);
+    handlers === null || handlers === void 0 ? void 0 : handlers.forEach((d) => {
+      element.addEventListener(d.type, d.handler);
+    });
+    this.handlerMap.set(element, handlers !== null && handlers !== void 0 ? handlers : []);
+  }
   deleteElement() {
     const element = this.elements.pop();
     if (element != null) {
       this.instanceMap.delete(element);
       element.remove();
+      this.removeEventListeners(element);
     }
   }
+  removeEventListeners(element) {
+    var _a;
+    (_a = this.handlerMap.get(element)) === null || _a === void 0 ? void 0 : _a.forEach((d) => {
+      element.removeEventListener(d.type, d.handler);
+    });
+  }
 }
 
 const getResultListHeight = (el) => {
@@ -86,6 +104,7 @@ const ResultList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.enterPressed = createEvent(this, "enterPressed", 7);
+    this.resultClick = createEvent(this, "resultClick", 7);
     this.computeResultHeight = () => {
       if (this.computedResultHeight == null) {
         const result = this.hostEl.querySelector('*[slot="result"]');
@@ -110,7 +129,7 @@ const ResultList = class {
       }
     };
     this.createResultPool = () => {
-      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance());
+      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
     };
     this.createResultInstance = () => {
       if (this.stateMap.resultTemplate != null) {
@@ -122,6 +141,18 @@ const ResultList = class {
         throw new Error('Result template not defined.');
       }
     };
+    this.createResultHandlers = () => {
+      return [
+        {
+          type: 'pointerdown',
+          handler: this.handlePointerDown,
+        },
+        {
+          type: 'click',
+          handler: this.handleResultClick,
+        },
+      ];
+    };
     this.layoutResults = () => {
       var _a, _b, _c, _d;
       const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
@@ -142,6 +173,7 @@ const ResultList = class {
           el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
           el.style.width = '100%';
           el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
+          el.setAttribute('data-result-id', result.id);
           binding.bind(result);
         }
       });
@@ -184,6 +216,8 @@ const ResultList = class {
     this.lastStartIndex = 0;
     this.lastFocusedIndex = 0;
     this.stateMap = {};
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
   }
   handleResultsChanged(results) {
     if (typeof results === 'string') {
@@ -229,6 +263,16 @@ const ResultList = class {
         height: `${this.parsedResults.length * this.resultHeight}px`,
       } }, h("slot", null), h("slot", { name: "result" })))))));
   }
+  handlePointerDown(event) {
+    event.preventDefault();
+  }
+  handleResultClick(event) {
+    const closestIdElement = event.target.closest('[data-result-id]');
+    const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
+    if (result != null) {
+      this.resultClick.emit(result);
+    }
+  }
   computeViewportResults() {
     const viewportHeight = this.getListHeight();
     if (viewportHeight != null && this.resultHeight > 0) {