@3mo/virtualized-list/dist/VirtualizedList.js

A virtualized list web-component based on Lit Virtualizer

import { __decorate } from "tslib";
import { component, html, property, query } from '@a11d/lit';
import { List, listItem } from '@3mo/list';
/**
 * @element mo-virtualized-list
 *
 * @attr data - Array of data to render
 * @attr getItemTemplate - Function that returns template for each item
 *
 * @slot - Default slot for list items
 */
let VirtualizedList = class VirtualizedList extends List {
    constructor() {
        super(...arguments);
        this.data = new Array();
        this.getItemTemplate = (() => html.nothing);
    }
    get items() {
        return (this.virtualizedScroller?.renderedItems ?? []).filter(e => !!e[listItem]);
    }
    get itemsLength() {
        return this.data.length;
    }
    getItem(index) {
        return this.virtualizedScroller?.getElement(index);
    }
    getRenderedItemIndex(item) {
        return this.virtualizedScroller?.getRenderedElementIndex(item);
    }
    get template() {
        return html `
			<mo-virtualized-scroller
				.items=${this.data}
				.getItemTemplate=${this.getItemTemplate}
			></mo-virtualized-scroller>
		`;
    }
};
__decorate([
    property({ type: Array })
], VirtualizedList.prototype, "data", void 0);
__decorate([
    property({ type: Object })
], VirtualizedList.prototype, "getItemTemplate", void 0);
__decorate([
    query('mo-virtualized-scroller')
], VirtualizedList.prototype, "virtualizedScroller", void 0);
VirtualizedList = __decorate([
    component('mo-virtualized-list')
], VirtualizedList);
export { VirtualizedList };