@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/collection/components/result-list/result-list.js

@@ -1,446 +1,471 @@
-import { h, Host, } from '@stencil/core';
-import classNames from 'classnames';
-import { ElementPool, } from '../../util/templates/element-pool';
-import { generateInstanceFromTemplate, } from '../../util/templates/templates';
-import { getResultListHeight, scrollToResult } from './lib';
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
+import { ElementPool, } from "../../util/templates/element-pool";
+import { generateInstanceFromTemplate, } from "../../util/templates/templates";
+import { getResultListHeight, scrollToResult } from "./lib";
 export class ResultList {
-  constructor() {
-    this.computeResultHeight = () => {
-      if (this.computedResultHeight == null) {
-        const result = this.hostEl.querySelector('*[slot="result"]');
-        if (result != null) {
-          this.resultHeight = result.clientHeight;
-          this.computedResultHeight = result.clientHeight;
-        }
-      }
-    };
-    this.ensureTemplateDefined = () => {
-      const template = this.hostEl.querySelector('template');
-      if (template == null) {
-        const defaultTemplate = document.createElement('template');
-        defaultTemplate.innerHTML = `
+    constructor() {
+        this.items = [];
+        this.viewportStartIndex = 0;
+        this.viewportEndIndex = 0;
+        this.resultHeight = 32;
+        this.overScanCount = 25;
+        this.placement = 'bottom-start';
+        this.open = false;
+        this.parsedResults = [];
+        this.scrollTop = 0;
+        this.lastStartIndex = 0;
+        this.lastFocusedIndex = 0;
+        this.stateMap = {};
+        this.computeResultHeight = () => {
+            if (this.computedResultHeight == null) {
+                const result = this.hostEl.querySelector('*[slot="result"]');
+                if (result != null) {
+                    this.resultHeight = result.clientHeight;
+                    this.computedResultHeight = result.clientHeight;
+                }
+            }
+        };
+        this.ensureTemplateDefined = () => {
+            const template = this.hostEl.querySelector('template');
+            if (template == null) {
+                const defaultTemplate = document.createElement('template');
+                defaultTemplate.innerHTML = `
         <div class="result">{{data.value}}</div>
       `;
-        this.hostEl.appendChild(defaultTemplate);
-        this.stateMap.resultTemplate = defaultTemplate;
-      }
-      else {
-        this.stateMap.resultTemplate = template;
-      }
-    };
-    this.createResultPool = () => {
-      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
-    };
-    this.createResultInstance = () => {
-      if (this.stateMap.resultTemplate != null) {
-        const instance = generateInstanceFromTemplate(this.stateMap.resultTemplate);
-        instance.element.slot = 'result';
-        return instance;
-      }
-      else {
-        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;
-      const diff = this.viewportStartIndex - this.lastStartIndex;
-      this.lastStartIndex = this.viewportStartIndex;
-      (_a = this.stateMap.resultPool) === null || _a === void 0 ? void 0 : _a.updateElements(visibleRowCount);
-      if (diff > 0) {
-        (_b = this.stateMap.resultPool) === null || _b === void 0 ? void 0 : _b.swapHeadToTail(diff);
-      }
-      else {
-        (_c = this.stateMap.resultPool) === null || _c === void 0 ? void 0 : _c.swapTailToHead(-diff);
-      }
-      (_d = this.stateMap.resultPool) === null || _d === void 0 ? void 0 : _d.iterateElements((el, binding, index) => {
-        const result = this.parsedResults[index + this.viewportStartIndex];
-        if (result != null) {
-          el.style.position = 'absolute';
-          el.style.boxSizing = 'border-box';
-          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);
-        }
-      });
-    };
-    this.handleScroll = (event) => {
-      this.scrollTop = event.target.scrollTop;
-    };
-    this.handleKeyDown = (event) => {
-      if (this.open) {
-        if (event.key === 'ArrowUp') {
-          event.preventDefault();
-          this.lastFocusedIndex = Math.min(0, this.lastFocusedIndex - 1);
-          scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+                this.hostEl.appendChild(defaultTemplate);
+                this.stateMap.resultTemplate = defaultTemplate;
+            }
+            else {
+                this.stateMap.resultTemplate = template;
+            }
+        };
+        this.createResultPool = () => {
+            this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
+        };
+        this.createResultInstance = () => {
+            if (this.stateMap.resultTemplate != null) {
+                const instance = generateInstanceFromTemplate(this.stateMap.resultTemplate);
+                instance.element.slot = 'result';
+                return instance;
+            }
+            else {
+                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;
+            const diff = this.viewportStartIndex - this.lastStartIndex;
+            this.lastStartIndex = this.viewportStartIndex;
+            (_a = this.stateMap.resultPool) === null || _a === void 0 ? void 0 : _a.updateElements(visibleRowCount);
+            if (diff > 0) {
+                (_b = this.stateMap.resultPool) === null || _b === void 0 ? void 0 : _b.swapHeadToTail(diff);
+            }
+            else {
+                (_c = this.stateMap.resultPool) === null || _c === void 0 ? void 0 : _c.swapTailToHead(-diff);
+            }
+            (_d = this.stateMap.resultPool) === null || _d === void 0 ? void 0 : _d.iterateElements((el, binding, index) => {
+                const result = this.parsedResults[index + this.viewportStartIndex];
+                if (result != null) {
+                    el.style.position = 'absolute';
+                    el.style.boxSizing = 'border-box';
+                    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);
+                }
+            });
+        };
+        this.handleScroll = (event) => {
+            this.scrollTop = event.target.scrollTop;
+        };
+        this.handleKeyDown = (event) => {
+            if (this.open) {
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    this.lastFocusedIndex = Math.min(0, this.lastFocusedIndex - 1);
+                    scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    this.lastFocusedIndex = Math.min(this.lastFocusedIndex + 1, this.items.length);
+                    scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+                }
+                if (event.key === 'Enter' && this.lastFocusedIndex != null) {
+                    event.preventDefault();
+                    this.enterPressed.emit(this.items[this.lastFocusedIndex]);
+                    this.lastFocusedIndex = 0;
+                    scrollToResult(this.resultsScrollEl);
+                }
+            }
+        };
+        this.handleResultClick = this.handleResultClick.bind(this);
+        this.handlePointerDown = this.handlePointerDown.bind(this);
+    }
+    handleResultsChanged(results) {
+        if (typeof results === 'string') {
+            this.parsedResults = JSON.parse(results);
         }
-        else if (event.key === 'ArrowDown') {
-          event.preventDefault();
-          this.lastFocusedIndex = Math.min(this.lastFocusedIndex + 1, this.items.length);
-          scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+        else if (results != null) {
+            this.parsedResults = results;
         }
-        if (event.key === 'Enter' && this.lastFocusedIndex != null) {
-          event.preventDefault();
-          this.enterPressed.emit(this.items[this.lastFocusedIndex]);
-          this.lastFocusedIndex = 0;
-          scrollToResult(this.resultsScrollEl);
+    }
+    handleOpenChanged() {
+        if (!this.open && this.scrollTop !== 0) {
+            scrollToResult(this.resultsScrollEl);
         }
-      }
-    };
-    this.items = [];
-    this.itemsJson = undefined;
-    this.viewportStartIndex = 0;
-    this.viewportEndIndex = 0;
-    this.resultHeight = 32;
-    this.overScanCount = 25;
-    this.placement = 'bottom-start';
-    this.position = undefined;
-    this.open = false;
-    this.listHeight = undefined;
-    this.parsedResults = [];
-    this.scrollTop = 0;
-    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') {
-      this.parsedResults = JSON.parse(results);
     }
-    else if (results != null) {
-      this.parsedResults = results;
+    componentWillLoad() {
+        var _a;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.listHeight = undefined;
+        });
+        window.addEventListener('keydown', this.handleKeyDown);
+        this.ensureTemplateDefined();
+        this.createResultPool();
+        this.handleResultsChanged((_a = this.itemsJson) !== null && _a !== void 0 ? _a : this.items);
     }
-  }
-  handleOpenChanged() {
-    if (!this.open && this.scrollTop !== 0) {
-      scrollToResult(this.resultsScrollEl);
+    componentDidLoad() {
+        this.resizeObserver.observe(this.hostEl);
     }
-  }
-  componentWillLoad() {
-    var _a;
-    this.resizeObserver = new ResizeObserver(() => {
-      this.listHeight = undefined;
-    });
-    window.addEventListener('keydown', this.handleKeyDown);
-    this.ensureTemplateDefined();
-    this.createResultPool();
-    this.handleResultsChanged((_a = this.itemsJson) !== null && _a !== void 0 ? _a : this.items);
-  }
-  componentDidLoad() {
-    this.resizeObserver.observe(this.hostEl);
-  }
-  componentWillRender() {
-    this.computeViewportResults();
-  }
-  componentDidRender() {
-    this.layoutResults();
-    this.computeResultHeight();
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-    window.removeEventListener('keydown', this.handleKeyDown);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: classNames('wrapper', {
-        hidden: !this.open || this.computedResultHeight == null,
-      }) }, h("vertex-popover", { position: this.position, placement: this.placement, open: this.open, backdrop: false }, h("div", { class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, h("div", { class: "results", style: {
-        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);
+    componentWillRender() {
+        this.computeViewportResults();
     }
-  }
-  computeViewportResults() {
-    const viewportHeight = this.getListHeight();
-    if (viewportHeight != null && this.resultHeight > 0) {
-      const viewportCount = Math.ceil(viewportHeight / this.resultHeight);
-      const viewportStartIndex = Math.floor(this.scrollTop / this.resultHeight);
-      const viewportEndIndex = viewportStartIndex + viewportCount;
-      const startIndex = Math.max(0, viewportStartIndex - this.overScanCount);
-      const endIndex = Math.min(this.parsedResults.length - 1, viewportEndIndex + this.overScanCount);
-      this.viewportStartIndex = startIndex;
-      this.viewportEndIndex = endIndex;
+    componentDidRender() {
+        this.layoutResults();
+        this.computeResultHeight();
     }
-  }
-  getListHeight() {
-    if (this.listHeight == null) {
-      this.listHeight = getResultListHeight(this.hostEl);
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        window.removeEventListener('keydown', this.handleKeyDown);
     }
-    return this.listHeight;
-  }
-  static get is() { return "vertex-result-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["result-list.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["result-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "items": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Result[]",
-          "resolved": "Result[]",
-          "references": {
-            "Result": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "itemsJson": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "viewportStartIndex": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "viewport-start-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "viewportEndIndex": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "viewport-end-index",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "resultHeight": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "result-height",
-        "reflect": false,
-        "defaultValue": "32"
-      },
-      "overScanCount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "over-scan-count",
-        "reflect": false,
-        "defaultValue": "25"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PopoverPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "PopoverPlacement": {
-              "location": "import",
-              "path": "../popover/popover"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom-start'"
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Point | string",
-          "resolved": "Point | string | undefined",
-          "references": {
-            "Point": {
-              "location": "import",
-              "path": "../../types/point"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "position",
-        "reflect": false
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "listHeight": {},
-      "parsedResults": {},
-      "scrollTop": {},
-      "lastStartIndex": {},
-      "lastFocusedIndex": {},
-      "stateMap": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "enterPressed",
-        "name": "enterPressed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Result",
-          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
-          "references": {
-            "Result": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+    render() {
+        return (h(Host, { key: '19ee95cfd94d0a7c5cb88de552db10e328885b89' }, h("div", { key: '641cd82464119b2ae3034ffd99ccf421f2113f01', class: classNames('wrapper', {
+                hidden: !this.open || this.computedResultHeight == null,
+            }) }, h("vertex-popover", { key: '03a0b984e1f4c5f9589fa6c9110944dc095992d2', position: this.position, placement: this.placement, open: this.open, backdrop: false }, h("div", { key: 'c62468dd8165a7ff84700ef176c5edf988858358', class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, h("div", { key: 'e32beb276dd3857678944a630bb93a24d6467943', class: "results", style: {
+                height: `${this.parsedResults.length * this.resultHeight}px`,
+            } }, h("slot", { key: 'e903e3b98d5de9919ca132843408d51a405fa775' }), h("slot", { key: '88a1a240932e069a05e3722b4de106b38c83b7e0', 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);
         }
-      }, {
-        "method": "resultClick",
-        "name": "resultClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Result",
-          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
-          "references": {
-            "Result": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+    }
+    computeViewportResults() {
+        const viewportHeight = this.getListHeight();
+        if (viewportHeight != null && this.resultHeight > 0) {
+            const viewportCount = Math.ceil(viewportHeight / this.resultHeight);
+            const viewportStartIndex = Math.floor(this.scrollTop / this.resultHeight);
+            const viewportEndIndex = viewportStartIndex + viewportCount;
+            const startIndex = Math.max(0, viewportStartIndex - this.overScanCount);
+            const endIndex = Math.min(this.parsedResults.length - 1, viewportEndIndex + this.overScanCount);
+            this.viewportStartIndex = startIndex;
+            this.viewportEndIndex = endIndex;
+        }
+    }
+    getListHeight() {
+        if (this.listHeight == null) {
+            this.listHeight = getResultListHeight(this.hostEl);
         }
-      }];
-  }
-  static get elementRef() { return "hostEl"; }
-  static get watchers() {
-    return [{
-        "propName": "items",
-        "methodName": "handleResultsChanged"
-      }, {
-        "propName": "open",
-        "methodName": "handleOpenChanged"
-      }];
-  }
+        return this.listHeight;
+    }
+    static get is() { return "vertex-result-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["result-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["result-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Result[]",
+                    "resolved": "Result[]",
+                    "references": {
+                        "Result": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/result-list/types.ts::Result",
+                            "referenceLocation": "Result"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "itemsJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
+            },
+            "viewportStartIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "viewport-start-index",
+                "defaultValue": "0"
+            },
+            "viewportEndIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "viewport-end-index",
+                "defaultValue": "0"
+            },
+            "resultHeight": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "result-height",
+                "defaultValue": "32"
+            },
+            "overScanCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "over-scan-count",
+                "defaultValue": "25"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PopoverPlacement": {
+                            "location": "import",
+                            "path": "../popover/popover",
+                            "id": "src/components/popover/popover.tsx::PopoverPlacement",
+                            "referenceLocation": "PopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Point | string",
+                    "resolved": "Point | string | undefined",
+                    "references": {
+                        "Point": {
+                            "location": "import",
+                            "path": "../../types/point",
+                            "id": "src/types/point.ts::Point",
+                            "referenceLocation": "Point"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "listHeight": {},
+            "parsedResults": {},
+            "scrollTop": {},
+            "lastStartIndex": {},
+            "lastFocusedIndex": {},
+            "stateMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "enterPressed",
+                "name": "enterPressed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Result",
+                    "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+                    "references": {
+                        "Result": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/result-list/types.ts::Result",
+                            "referenceLocation": "Result"
+                        }
+                    }
+                }
+            }, {
+                "method": "resultClick",
+                "name": "resultClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Result",
+                    "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+                    "references": {
+                        "Result": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/result-list/types.ts::Result",
+                            "referenceLocation": "Result"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "handleResultsChanged"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChanged"
+            }];
+    }
 }