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

Kelvin UI Components

import { K as h, H as proxyCustomElement, I as H, L as Host } from './p-BP5CxQcH.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--virtualized-list-max-height:auto;--virtualized-list-min-height:auto;--virtualized-list-padding:var(--spacing-xl) 0;display:block;height:100%;width:100%}:host .container{max-height:var(--virtualized-list-max-height);min-height:var(--virtualized-list-min-height);padding:var(--virtualized-list-padding);height:100%;width:100%;display:block;overflow-y:auto}:host .container::-webkit-scrollbar{width:15px;height:15px}:host .container::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--scrollbar-thumb-default);border:4px solid transparent;background-clip:content-box}:host .container::-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, _b;
            this.scrollTop = (_b = (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
        };
        this.updateVisibleElements = () => {
            this.elements = this.getVisibleElements();
        };
        this.getVisibleElements = () => {
            var _a, _b;
            const containerHeight = (_b = (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 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();
    }
    componentDidLoad() {
        this.updateTotalHeight();
        this.updateVisibleElements();
    }
    componentDidRender() {
        if (!this.containerElement)
            return;
        // Only attach listeners if not already attached
        if (!this.containerElement.onscroll) {
            this.containerElement.addEventListener('scroll', this.throttledScroll);
        }
        // ResizeObserver will just ignore if already observing
        this.resizeObserver.observe(this.containerElement);
    }
    disconnectedCallback() {
        if (this.containerElement) {
            this.containerElement.removeEventListener('scroll', this.throttledScroll);
            this.resizeObserver.unobserve(this.containerElement);
        }
    }
    render() {
        return (h(Host, { key: '30f68c78571661844c8015e58a423d9324532152' }, h("div", { key: '10c8a72bb521a89e1ada05e04304c88f2a35526e', class: "container", ref: el => (this.containerElement = el) }, h("div", { key: 'f70bccef7d6c25e484c2b1639059b60afb3d677d', class: "inner", style: { height: `${this.totalHeight}px` } }, this.elements))));
    }
    static get watchers() { return {
        "itemHeight": ["updateTotalHeight"],
        "itemCount": ["updateTotalHeight"],
        "renderItem": ["renderItemHandle"]
    }; }
    static get style() { return virtualizedListCss; }
}, [257, "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 };