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

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

@@ -1,13 +1,306 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
+var templates = require('./templates-C_WUWcnZ.js');
+require('./tslib.es6-AsLBQn5u.js');
 
-const resultList = require('./result-list-241ffe8d.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./templates-e7b3ffbb.js');
-require('./tslib.es6-838fd860.js');
+class ElementPool {
+    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) {
+        const sliced = this.elements.splice(0, count);
+        this.elements.splice(this.elements.length, 0, ...sliced);
+        return this.elements.concat();
+    }
+    swapTailToHead(count) {
+        const sliced = this.elements.splice(-count, count);
+        this.elements.splice(0, 0, ...sliced);
+        return this.elements.concat();
+    }
+    updateElements(count) {
+        const diff = count - this.elements.length;
+        if (diff > 0) {
+            for (let i = 0; i < diff; i++) {
+                this.createElement();
+            }
+        }
+        else {
+            for (let i = 0; i < -diff; i++) {
+                this.deleteElement();
+            }
+        }
+        return this.elements.concat();
+    }
+    updateData(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            const data = f(i);
+            instance === null || instance === void 0 ? void 0 : instance.bindings.bind(data);
+        });
+    }
+    updateElementFactory(elementFactory) {
+        this.elementFactory = elementFactory;
+        this.updateElements(0);
+    }
+    iterateElements(f) {
+        this.elements.forEach((el, i) => {
+            const instance = this.instanceMap.get(el);
+            if (instance == null) {
+                throw new Error('Binding not found for element.');
+            }
+            f(el, instance.bindings, i);
+        });
+    }
+    createElement() {
+        const instance = this.elementFactory();
+        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) => {
+    return el.clientHeight;
+};
+const scrollToResult = (el, lastFocusedIndex, resultHeight) => {
+    el === null || el === void 0 ? void 0 : el.scrollTo({
+        top: lastFocusedIndex != null && resultHeight != null
+            ? lastFocusedIndex * resultHeight
+            : 0,
+    });
+};
 
+const resultListCss = () => `:host{--max-height:300px;--width:500px;--box-shadow:0 2px 5px rgba(0, 0, 0, 0.5)}.hidden{visibility:hidden;position:fixed;pointer-events:none}.results{position:relative;height:100%}.results-scroll{overflow-y:auto;max-height:var(--max-height);width:var(--width);box-shadow:var(--box-shadow);background-color:white}`;
 
-exports.vertex_result_list = resultList.ResultList;
+const ResultList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.enterPressed = index.createEvent(this, "enterPressed");
+        this.resultClick = index.createEvent(this, "resultClick");
+        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 = templates.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 (results != null) {
+            this.parsedResults = results;
+        }
+    }
+    handleOpenChanged() {
+        if (!this.open && this.scrollTop !== 0) {
+            scrollToResult(this.resultsScrollEl);
+        }
+    }
+    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 (index.h(index.Host, { key: '19ee95cfd94d0a7c5cb88de552db10e328885b89' }, index.h("div", { key: '641cd82464119b2ae3034ffd99ccf421f2113f01', class: index$1.classNames('wrapper', {
+                hidden: !this.open || this.computedResultHeight == null,
+            }) }, index.h("vertex-popover", { key: '03a0b984e1f4c5f9589fa6c9110944dc095992d2', position: this.position, placement: this.placement, open: this.open, backdrop: false }, index.h("div", { key: 'c62468dd8165a7ff84700ef176c5edf988858358', class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, index.h("div", { key: 'e32beb276dd3857678944a630bb93a24d6467943', class: "results", style: {
+                height: `${this.parsedResults.length * this.resultHeight}px`,
+            } }, index.h("slot", { key: 'e903e3b98d5de9919ca132843408d51a405fa775' }), index.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);
+        }
+    }
+    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);
+        }
+        return this.listHeight;
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": [{
+                "handleResultsChanged": 0
+            }],
+        "open": [{
+                "handleOpenChanged": 0
+            }]
+    }; }
+};
+ResultList.style = resultListCss();
+
+exports.vertex_result_list = ResultList;