@codeenvision/ui-webcomponents 1.0.0

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,64 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import { DomHelper } from "../../core/utils/DomHelper.js";
+export class Tooltip extends BaseComponent {
+    options;
+    tooltipEl;
+    text;
+    position;
+    constructor(options) {
+        super(options.selector);
+        this.options = options;
+        this.text = options.text;
+        this.position = options.position ?? "top";
+        this.tooltipEl = document.createElement("div");
+        this.tooltipEl.className = "ce-tooltip__content";
+        this.tooltipEl.innerText = this.text;
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.el.classList.add("ce-tooltip", `ce-tooltip--${this.position}`);
+        this.el.textContent = "";
+        this.el.appendChild(this.tooltipEl);
+        this.el.addEventListener("mouseenter", () => this.show());
+        this.el.addEventListener("mouseleave", () => this.hide());
+        this.el.addEventListener("focus", () => this.show());
+        this.el.addEventListener("blur", () => this.hide());
+    }
+    show() {
+        DomHelper.addClass(this.tooltipEl, "show");
+    }
+    hide() {
+        DomHelper.removeClass(this.tooltipEl, "show");
+    }
+    destroy() {
+        this.tooltipEl.remove();
+    }
+    tryHydrate() {
+        const root = this.el.classList.contains("ce-tooltip") ? this.el : this.el.querySelector(".ce-tooltip");
+        if (!root) {
+            return false;
+        }
+        if (root !== this.el) {
+            this.el = root;
+        }
+        root.classList.add("ce-tooltip", `ce-tooltip--${this.position}`);
+        const content = root.querySelector(".ce-tooltip__content");
+        if (content) {
+            this.tooltipEl = content;
+        }
+        else {
+            this.tooltipEl = document.createElement("div");
+            this.tooltipEl.className = "ce-tooltip__content";
+            root.appendChild(this.tooltipEl);
+        }
+        this.tooltipEl.innerText = this.text;
+        root.addEventListener("mouseenter", () => this.show());
+        root.addEventListener("mouseleave", () => this.hide());
+        root.addEventListener("focus", () => this.show());
+        root.addEventListener("blur", () => this.hide());
+        return true;
+    }
+}
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../components/Tooltip/Tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG1D,MAAM,OAAO,OAAQ,SAAQ,aAAa;IAChC,OAAO,CAAiB;IACxB,SAAS,CAAc;IACvB,IAAI,CAAS;IACb,QAAQ,CAAS;IAEzB,YAAY,OAAuB;QACjC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,KAAK,CAAC;QAE1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,qBAAqB,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;IACvC,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACpE,IAAI,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;IAEO,IAAI;QACV,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC;IAEO,IAAI;QACV,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAEO,UAAU;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAc,aAAa,CAAC,CAAC;QACpH,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;YACrB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;QACjB,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACjE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAc,sBAAsB,CAAC,CAAC;QACxE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,qBAAqB,CAAC;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,7 @@
+export interface TooltipOptions {
+    selector: string;
+    text: string;
+    position?: "top" | "bottom" | "left" | "right";
+    hydrate?: boolean;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/components/Tooltip/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Tooltip/Tooltip.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tooltip.types.js.map

package/dist/components/Tooltip/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../../components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":""}

package/dist/components/TooltipManager/TooltipManager.d.ts

@@ -0,0 +1,10 @@
+import { TooltipOptions } from './TooltipManager.types.js';
+export declare class TooltipManager {
+    private tooltipElement;
+    private cleanup;
+    constructor();
+    attach(target: HTMLElement, options: TooltipOptions): void;
+    detach(target: HTMLElement): void;
+    destroy(): void;
+}
+//# sourceMappingURL=TooltipManager.d.ts.map

package/dist/components/TooltipManager/TooltipManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipManager.d.ts","sourceRoot":"","sources":["../../../components/TooltipManager/TooltipManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,qBAAa,cAAc;IACzB,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,OAAO,CAAyB;;IAQxC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc;IA2GnD,MAAM,CAAC,MAAM,EAAE,WAAW;IAI1B,OAAO;CAOR"}

package/dist/components/TooltipManager/TooltipManager.js

@@ -0,0 +1,116 @@
+export class TooltipManager {
+    tooltipElement;
+    cleanup = [];
+    constructor() {
+        this.tooltipElement = document.createElement('div');
+        this.tooltipElement.className = 'ce-tooltip__content ce-tooltip--dynamic';
+        document.body.appendChild(this.tooltipElement);
+    }
+    attach(target, options) {
+        const position = options.placement || 'top';
+        const theme = options.theme || 'dark';
+        const delayMs = options.delay ?? 0;
+        let delayId;
+        const showTooltip = () => {
+            this.tooltipElement.textContent = options.content;
+            this.tooltipElement.className = `ce-tooltip__content ce-tooltip--dynamic ce-tooltip--${position} ce-tooltip--${theme} ce-tooltip--visible${options.customClass ? ` ${options.customClass}` : ''}`;
+            const rect = target.getBoundingClientRect();
+            const tooltipRect = this.tooltipElement.getBoundingClientRect();
+            let top = 0, left = 0;
+            switch (position) {
+                case 'top':
+                    top = rect.top - tooltipRect.height - 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.left - tooltipRect.width - 8;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.right + 8;
+                    break;
+            }
+            this.tooltipElement.style.top = `${top + window.scrollY}px`;
+            this.tooltipElement.style.left = `${left + window.scrollX}px`;
+        };
+        const hideTooltip = () => {
+            if (delayId) {
+                window.clearTimeout(delayId);
+                delayId = undefined;
+            }
+            this.tooltipElement.classList.remove('ce-tooltip--visible');
+        };
+        const scheduleShow = () => {
+            if (delayMs <= 0) {
+                showTooltip();
+                return;
+            }
+            if (delayId) {
+                window.clearTimeout(delayId);
+            }
+            delayId = window.setTimeout(() => {
+                showTooltip();
+                delayId = undefined;
+            }, delayMs);
+        };
+        const trigger = options.trigger ?? 'hover';
+        if (trigger === 'click') {
+            const handleClick = (event) => {
+                event.preventDefault();
+                if (this.tooltipElement.classList.contains('ce-tooltip--visible')) {
+                    hideTooltip();
+                }
+                else {
+                    scheduleShow();
+                }
+            };
+            target.addEventListener('click', handleClick);
+            const handleDocument = (event) => {
+                if (event.target && event.target !== target && !target.contains(event.target)) {
+                    hideTooltip();
+                }
+            };
+            document.addEventListener('click', handleDocument);
+            this.cleanup.push(() => {
+                target.removeEventListener('click', handleClick);
+                document.removeEventListener('click', handleDocument);
+            });
+            return;
+        }
+        if (trigger === 'focus') {
+            target.addEventListener('focus', scheduleShow);
+            target.addEventListener('blur', hideTooltip);
+            this.cleanup.push(() => {
+                target.removeEventListener('focus', scheduleShow);
+                target.removeEventListener('blur', hideTooltip);
+            });
+            return;
+        }
+        target.addEventListener('mouseenter', scheduleShow);
+        target.addEventListener('focus', scheduleShow);
+        target.addEventListener('mouseleave', hideTooltip);
+        target.addEventListener('blur', hideTooltip);
+        this.cleanup.push(() => {
+            target.removeEventListener('mouseenter', scheduleShow);
+            target.removeEventListener('focus', scheduleShow);
+            target.removeEventListener('mouseleave', hideTooltip);
+            target.removeEventListener('blur', hideTooltip);
+        });
+    }
+    detach(target) {
+        target.replaceWith(target.cloneNode(true)); // Quick way to remove all event listeners
+    }
+    destroy() {
+        this.cleanup.forEach((dispose) => dispose());
+        this.cleanup = [];
+        if (this.tooltipElement) {
+            this.tooltipElement.remove();
+        }
+    }
+}
+//# sourceMappingURL=TooltipManager.js.map

package/dist/components/TooltipManager/TooltipManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipManager.js","sourceRoot":"","sources":["../../../components/TooltipManager/TooltipManager.ts"],"names":[],"mappings":"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"}

package/dist/components/TooltipManager/TooltipManager.types.d.ts

@@ -0,0 +1,11 @@
+export interface TooltipOptions {
+    selector: string;
+    content: string;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    trigger?: 'hover' | 'click' | 'focus';
+    delay?: number;
+    customClass?: string;
+    theme?: 'light' | 'dark';
+    hydrate?: boolean;
+}
+//# sourceMappingURL=TooltipManager.types.d.ts.map

package/dist/components/TooltipManager/TooltipManager.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipManager.types.d.ts","sourceRoot":"","sources":["../../../components/TooltipManager/TooltipManager.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/TooltipManager/TooltipManager.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TooltipManager.types.js.map

package/dist/components/TooltipManager/TooltipManager.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipManager.types.js","sourceRoot":"","sources":["../../../components/TooltipManager/TooltipManager.types.ts"],"names":[],"mappings":""}

package/dist/components/TreeList/TreeList.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import { TreeListOptions } from "./TreeList.types.js";
+export declare class TreeList extends BaseComponent {
+    private options;
+    private rows;
+    private expanded;
+    private selectedId?;
+    private flatNodes;
+    private viewport?;
+    private spacer?;
+    private content?;
+    constructor(options: TreeListOptions);
+    init(): void;
+    private renderTree;
+    destroy(): void;
+    private toggleRow;
+    private selectRow;
+    private onKeydown;
+    private tryHydrate;
+    private setInitialRoving;
+    private setRovingRow;
+    private mountVirtualList;
+    private flattenNodes;
+    private buildRow;
+    private toggleVirtualRow;
+    private renderVirtual;
+    private onVirtualKeydown;
+    private focusVirtualIndex;
+}
+//# sourceMappingURL=TreeList.d.ts.map

package/dist/components/TreeList/TreeList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../../components/TreeList/TreeList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,qBAAa,QAAS,SAAQ,aAAa;IACzC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,SAAS,CAA6F;IAC9G,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,MAAM,CAAC,CAAc;IAC7B,OAAO,CAAC,OAAO,CAAC,CAAc;gBAElB,OAAO,EAAE,eAAe;IAKpC,IAAI,IAAI,IAAI;IAwBZ,OAAO,CAAC,UAAU;IAmDlB,OAAO,IAAI,IAAI;IASf,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,UAAU;IAkClB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,QAAQ;IA6ChB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,iBAAiB;CAW1B"}

package/dist/components/TreeList/TreeList.js

@@ -0,0 +1,375 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+import { computeVirtualRange } from "../../core/utils/virtualization.js";
+export class TreeList extends BaseComponent {
+    options;
+    rows = [];
+    expanded = new Set();
+    selectedId;
+    flatNodes = [];
+    viewport;
+    spacer;
+    content;
+    constructor(options) {
+        super(options.selector);
+        this.options = options;
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.el.classList.add("ce-treelist");
+        const columns = this.options.columns ?? [{ field: "label", label: "Label" }];
+        const header = document.createElement("div");
+        header.className = "ce-treelist__header";
+        columns.forEach((col) => {
+            const cell = document.createElement("div");
+            cell.className = "ce-treelist__cell ce-treelist__cell--header";
+            cell.textContent = col.label;
+            header.appendChild(cell);
+        });
+        this.el.appendChild(header);
+        if (this.options.virtualized) {
+            this.mountVirtualList(columns);
+        }
+        else {
+            this.renderTree(this.options.data, this.el, columns, 0);
+            this.setInitialRoving();
+        }
+    }
+    renderTree(nodes, parentEl, columns, depth) {
+        nodes.forEach((node) => {
+            const row = document.createElement("div");
+            row.className = "ce-treelist__row";
+            row.dataset.nodeId = node.id;
+            row.style.setProperty("--depth", depth.toString());
+            const firstCol = columns?.[0];
+            if (firstCol) {
+                const cell = document.createElement("div");
+                cell.className = "ce-treelist__cell ce-treelist__cell--label";
+                const toggle = document.createElement("button");
+                toggle.type = "button";
+                toggle.className = "ce-treelist__toggle";
+                const hasChildren = Boolean(node.children?.length);
+                toggle.textContent = hasChildren ? "▸" : "";
+                toggle.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    this.toggleRow(row);
+                });
+                const label = document.createElement("span");
+                label.textContent = node.label;
+                cell.append(toggle, label);
+                row.appendChild(cell);
+            }
+            columns?.slice(1).forEach((col) => {
+                const cell = document.createElement("div");
+                cell.className = "ce-treelist__cell";
+                cell.textContent = node.values?.[col.field]?.toString() ?? "";
+                row.appendChild(cell);
+            });
+            row.addEventListener("click", () => this.selectRow(row));
+            row.addEventListener("keydown", (event) => this.onKeydown(event, row));
+            row.tabIndex = -1;
+            row.addEventListener("focus", () => this.setRovingRow(row));
+            parentEl.appendChild(row);
+            this.rows.push(row);
+            if (node.children?.length) {
+                const childContainer = document.createElement("div");
+                childContainer.className = "ce-treelist__children";
+                childContainer.hidden = true;
+                parentEl.appendChild(childContainer);
+                this.renderTree(node.children, childContainer, columns, depth + 1);
+            }
+        });
+    }
+    destroy() {
+        this.el.innerHTML = "";
+        this.rows = [];
+        this.flatNodes = [];
+        this.viewport = undefined;
+        this.spacer = undefined;
+        this.content = undefined;
+    }
+    toggleRow(row) {
+        const container = row.nextElementSibling;
+        if (!container || !container.classList.contains("ce-treelist__children")) {
+            return;
+        }
+        const expanded = Boolean(container.hidden);
+        container.hidden = !expanded;
+        row.classList.toggle("is-expanded", expanded);
+        const id = row.dataset.nodeId ?? "";
+        this.options.onToggle?.(id, expanded);
+    }
+    selectRow(row) {
+        this.rows.forEach((r) => r.classList.remove("is-selected"));
+        row.classList.add("is-selected");
+        this.setRovingRow(row);
+        const id = row.dataset.nodeId ?? "";
+        this.selectedId = id;
+        this.options.onSelect?.(id);
+    }
+    onKeydown(event, row) {
+        const index = this.rows.indexOf(row);
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            this.rows[index + 1]?.focus();
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            this.rows[index - 1]?.focus();
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.rows[0]?.focus();
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.rows[this.rows.length - 1]?.focus();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            this.toggleRow(row);
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.toggleRow(row);
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.selectRow(row);
+        }
+    }
+    tryHydrate() {
+        const root = this.el.classList.contains("ce-treelist") ? this.el : this.el.querySelector(".ce-treelist");
+        if (!root) {
+            return false;
+        }
+        if (root !== this.el) {
+            this.el = root;
+        }
+        root.classList.add("ce-treelist");
+        if (this.options.virtualized) {
+            return false;
+        }
+        this.rows = [];
+        root.querySelectorAll(".ce-treelist__row").forEach((row, index) => {
+            if (!row.dataset.nodeId) {
+                row.dataset.nodeId = `ce-treelist-node-${index}`;
+            }
+            row.tabIndex = -1;
+            const toggle = row.querySelector(".ce-treelist__toggle");
+            if (toggle) {
+                toggle.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    this.toggleRow(row);
+                });
+            }
+            row.addEventListener("click", () => this.selectRow(row));
+            row.addEventListener("keydown", (event) => this.onKeydown(event, row));
+            row.addEventListener("focus", () => this.setRovingRow(row));
+            this.rows.push(row);
+        });
+        this.setInitialRoving();
+        return true;
+    }
+    setInitialRoving() {
+        if (!this.rows.length) {
+            return;
+        }
+        const selected = this.rows.find((row) => row.classList.contains("is-selected"));
+        this.setRovingRow(selected ?? this.rows[0]);
+    }
+    setRovingRow(active) {
+        this.rows.forEach((row) => {
+            row.tabIndex = row === active ? 0 : -1;
+        });
+    }
+    mountVirtualList(columns) {
+        const viewport = document.createElement("div");
+        viewport.className = "ce-treelist__viewport";
+        viewport.style.maxHeight = `${this.options.viewportHeight ?? 360}px`;
+        viewport.style.overflowY = "auto";
+        const spacer = document.createElement("div");
+        spacer.className = "ce-treelist__spacer";
+        const content = document.createElement("div");
+        content.className = "ce-treelist__content";
+        content.style.position = "relative";
+        content.style.width = "100%";
+        viewport.append(spacer, content);
+        this.el.appendChild(viewport);
+        this.viewport = viewport;
+        this.spacer = spacer;
+        this.content = content;
+        this.flatNodes = this.flattenNodes(this.options.data ?? [], 0);
+        const render = () => {
+            if (!this.viewport || !this.spacer || !this.content) {
+                return;
+            }
+            const rowHeight = this.options.rowHeight ?? 36;
+            const viewportHeight = this.viewport.clientHeight || Number(this.options.viewportHeight) || 360;
+            const range = computeVirtualRange({
+                itemCount: this.flatNodes.length,
+                itemHeight: rowHeight,
+                viewportHeight,
+                scrollTop: this.viewport.scrollTop,
+                overscan: this.options.overscan ?? 4,
+            });
+            this.spacer.style.height = `${range.totalHeight}px`;
+            this.content.style.transform = `translateY(${range.offset}px)`;
+            this.content.innerHTML = "";
+            this.rows = [];
+            for (let i = range.start; i < range.end; i += 1) {
+                const entry = this.flatNodes[i];
+                if (!entry)
+                    continue;
+                const row = this.buildRow(entry.node, entry.depth, columns, entry.hasChildren);
+                row.dataset.index = String(i);
+                row.tabIndex = i === range.start ? 0 : -1;
+                this.rows.push(row);
+                this.content.appendChild(row);
+            }
+            this.setInitialRoving();
+        };
+        viewport.addEventListener("scroll", render);
+        render();
+    }
+    flattenNodes(nodes, depth) {
+        const result = [];
+        nodes.forEach((node) => {
+            const hasChildren = Boolean(node.children?.length);
+            result.push({ node, depth, hasChildren });
+            if (hasChildren && this.expanded.has(node.id)) {
+                result.push(...this.flattenNodes(node.children ?? [], depth + 1));
+            }
+        });
+        return result;
+    }
+    buildRow(node, depth, columns, hasChildren) {
+        const row = document.createElement("div");
+        row.className = "ce-treelist__row";
+        row.dataset.nodeId = node.id;
+        row.style.setProperty("--depth", depth.toString());
+        if (this.selectedId && this.selectedId === node.id) {
+            row.classList.add("is-selected");
+        }
+        const firstCol = columns?.[0];
+        if (firstCol) {
+            const cell = document.createElement("div");
+            cell.className = "ce-treelist__cell ce-treelist__cell--label";
+            const toggle = document.createElement("button");
+            toggle.type = "button";
+            toggle.className = "ce-treelist__toggle";
+            toggle.textContent = hasChildren ? (this.expanded.has(node.id) ? "▾" : "▸") : "";
+            toggle.addEventListener("click", (event) => {
+                event.stopPropagation();
+                this.toggleVirtualRow(node.id);
+            });
+            const label = document.createElement("span");
+            label.textContent = node.label;
+            cell.append(toggle, label);
+            row.appendChild(cell);
+        }
+        columns?.slice(1).forEach((col) => {
+            const cell = document.createElement("div");
+            cell.className = "ce-treelist__cell";
+            cell.textContent = node.values?.[col.field]?.toString() ?? "";
+            row.appendChild(cell);
+        });
+        row.addEventListener("click", () => this.selectRow(row));
+        row.addEventListener("keydown", (event) => this.onVirtualKeydown(event, row));
+        row.addEventListener("focus", () => this.setRovingRow(row));
+        return row;
+    }
+    toggleVirtualRow(nodeId) {
+        if (this.expanded.has(nodeId)) {
+            this.expanded.delete(nodeId);
+        }
+        else {
+            this.expanded.add(nodeId);
+        }
+        this.flatNodes = this.flattenNodes(this.options.data ?? [], 0);
+        this.renderVirtual();
+        this.options.onToggle?.(nodeId, this.expanded.has(nodeId));
+    }
+    renderVirtual() {
+        if (!this.viewport || !this.spacer || !this.content) {
+            return;
+        }
+        const columns = this.options.columns ?? [{ field: "label", label: "Label" }];
+        const rowHeight = this.options.rowHeight ?? 36;
+        const viewportHeight = this.viewport.clientHeight || Number(this.options.viewportHeight) || 360;
+        const range = computeVirtualRange({
+            itemCount: this.flatNodes.length,
+            itemHeight: rowHeight,
+            viewportHeight,
+            scrollTop: this.viewport.scrollTop,
+            overscan: this.options.overscan ?? 4,
+        });
+        this.spacer.style.height = `${range.totalHeight}px`;
+        this.content.style.transform = `translateY(${range.offset}px)`;
+        this.content.innerHTML = "";
+        this.rows = [];
+        for (let i = range.start; i < range.end; i += 1) {
+            const entry = this.flatNodes[i];
+            if (!entry)
+                continue;
+            const row = this.buildRow(entry.node, entry.depth, columns, entry.hasChildren);
+            row.dataset.index = String(i);
+            row.tabIndex = i === range.start ? 0 : -1;
+            this.rows.push(row);
+            this.content.appendChild(row);
+        }
+        this.setInitialRoving();
+    }
+    onVirtualKeydown(event, row) {
+        const index = Number(row.dataset.index ?? "-1");
+        if (Number.isNaN(index) || index < 0) {
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            this.focusVirtualIndex(index + 1);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            this.focusVirtualIndex(index - 1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.focusVirtualIndex(0);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.focusVirtualIndex(this.flatNodes.length - 1);
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            const nodeId = row.dataset.nodeId;
+            if (nodeId)
+                this.toggleVirtualRow(nodeId);
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            const nodeId = row.dataset.nodeId;
+            if (nodeId)
+                this.toggleVirtualRow(nodeId);
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.selectRow(row);
+        }
+    }
+    focusVirtualIndex(index) {
+        if (!this.viewport) {
+            return;
+        }
+        const clamped = Math.max(0, Math.min(this.flatNodes.length - 1, index));
+        const rowHeight = this.options.rowHeight ?? 36;
+        this.viewport.scrollTop = clamped * rowHeight;
+        this.renderVirtual();
+        const row = this.content?.querySelector(`.ce-treelist__row[data-index="${clamped}"]`);
+        row?.focus();
+    }
+}
+//# sourceMappingURL=TreeList.js.map