@kelvininc/ui-components/components/p-C8hKWhkk.js

Kelvin UI Components

import { h, p as proxyCustomElement, H, e as Host } from './p-D6GMjtmE.js';
import { d as debounce, t as throttle } from './p-BlTxH6qj.js';

const buildElement = (index, key, height, top, renderItem) => {
    return (h("div", { key: key, class: "item", style: {
            transform: `translate(0px,${top}px)`,
            height: `${height}px`,
            width: '100%'
        } }, renderItem(index)));
};

const virtualizedListCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--virtualized-list-max-height:auto;--virtualized-list-min-height:auto;max-height:var(--virtualized-list-max-height);min-height:var(--virtualized-list-min-height);padding:var(--kv-spacing-3x, 12px) 0;height:100%;width:100%;display:block;overflow-y:auto}:host::-webkit-scrollbar{width:15px;height:15px}:host::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--kv-neutral-6, #3f3f3f);border:4px solid transparent;background-clip:content-box}:host::-webkit-scrollbar-corner{background-color:transparent}:host .inner{position:relative;display:block;width:100%}:host .item{position:absolute}";

const KvVirtualizedList = /*@__PURE__*/ proxyCustomElement(class KvVirtualizedList extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /** @inheritdoc */
        this.overscanCount = 5;
        // create an Observer instance
        this.resizeObserver = new ResizeObserver(() => this.debounceResize());
        this.totalHeight = 1;
        this.scrollTop = 0;
        this.debounceResize = debounce(() => this.updateVisibleElements(), 100);
        this.throttledScroll = throttle(() => {
            this.updateScrollTop();
            this.updateVisibleElements();
        }, 16, {
            trailing: true
        });
        this.updateScrollTop = () => {
            var _a;
            this.scrollTop = (_a = this.element.scrollTop) !== null && _a !== void 0 ? _a : 0;
        };
        this.updateVisibleElements = () => {
            this.elements = this.getVisibleElements();
        };
        this.getVisibleElements = () => {
            var _a;
            const containerHeight = (_a = this.element.clientHeight) !== null && _a !== void 0 ? _a : 0;
            const elements = [];
            let accumulator = 0;
            const overscanHeight = this.overscanCount * this.itemHeight;
            for (let index = 0; index < this.itemCount; index++) {
                let itemkey = this.getItemKey(index);
                // Check if the item is above the viewport
                if (this.scrollTop - overscanHeight > accumulator + this.itemHeight) {
                    accumulator += this.itemHeight;
                    continue;
                }
                // Check if the item is below the viewport
                if (this.scrollTop + containerHeight + overscanHeight < accumulator) {
                    break;
                }
                elements.push(buildElement(index, itemkey, this.itemHeight, accumulator, this.renderItem));
                accumulator += this.itemHeight;
            }
            return elements;
        };
    }
    updateTotalHeight() {
        this.totalHeight = this.itemHeight * this.itemCount;
    }
    renderItemHandle() {
        this.updateVisibleElements();
    }
    connectedCallback() {
        this.element.addEventListener('scroll', this.throttledScroll);
        this.resizeObserver.observe(this.element);
        this.updateTotalHeight();
    }
    disconnectedCallback() {
        this.element.removeEventListener('scroll', this.throttledScroll);
        this.resizeObserver.disconnect();
    }
    render() {
        return (h(Host, { key: '9f51b9c9ddb6cdefedef133bb24adff93edd7682' }, h("div", { key: '1b14fb2c2b7412e6cad824dd9a65d1e6e6fb19cb', class: "inner", style: { height: `${this.totalHeight}px` } }, this.elements)));
    }
    get element() { return this; }
    static get watchers() { return {
        "itemHeight": ["updateTotalHeight"],
        "itemCount": ["updateTotalHeight"],
        "renderItem": ["renderItemHandle"]
    }; }
    static get style() { return virtualizedListCss; }
}, [1, "kv-virtualized-list", {
        "itemCount": [514, "item-count"],
        "itemHeight": [514, "item-height"],
        "getItemKey": [16, "get-item-key"],
        "renderItem": [16, "render-item"],
        "overscanCount": [514, "overscan-count"],
        "totalHeight": [32],
        "scrollTop": [32],
        "elements": [32]
    }, undefined, {
        "itemHeight": ["updateTotalHeight"],
        "itemCount": ["updateTotalHeight"],
        "renderItem": ["renderItemHandle"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-virtualized-list"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-virtualized-list":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvVirtualizedList);
            }
            break;
    } });
}
defineCustomElement();

export { KvVirtualizedList as K, defineCustomElement as d };