@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/pivot-grid.js

@@ -0,0 +1,1233 @@
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { readDataAttr, shouldUseDomValue } from "./utils/hydration.js";
+import { computeVirtualRange } from "../../core/utils/virtualization.js";
+import { formatNumber, getLocale } from "../../src/i18n/index.js";
+const applyPivotParts = (dom) => {
+    dom.container.setAttribute("data-ce-component", "pivot-grid");
+    dom.container.setAttribute("part", "base");
+    dom.toolbar.setAttribute("part", "toolbar");
+    dom.searchWrapper.setAttribute("part", "search");
+    dom.searchInput.setAttribute("part", "search-input");
+    dom.filtersWrapper.setAttribute("part", "filters");
+    dom.filtersWrapper.querySelectorAll(".ce-pivotgrid__filter").forEach((node) => node.setAttribute("part", "filter"));
+    dom.filtersWrapper
+        .querySelectorAll(".ce-pivotgrid__filter-input")
+        .forEach((node) => node.setAttribute("part", "filter-input"));
+    dom.clearFiltersBtn.setAttribute("part", "clear-filters");
+    dom.valuesOrder.setAttribute("part", "values-order");
+    dom.valuesOrder.querySelectorAll(".ce-pivotgrid__values-label").forEach((node) => node.setAttribute("part", "values-label"));
+    dom.valuesOrder.querySelectorAll(".ce-pivotgrid__values-chip").forEach((node) => node.setAttribute("part", "values-chip"));
+    dom.tableWrapper.setAttribute("part", "table-wrapper");
+    dom.table.setAttribute("part", "table");
+    dom.thead.setAttribute("part", "thead");
+    dom.tbody.setAttribute("part", "tbody");
+    dom.table.querySelectorAll(".ce-pivotgrid__row-header").forEach((node) => node.setAttribute("part", "row-header"));
+    dom.table.querySelectorAll(".ce-pivotgrid__column-group").forEach((node) => node.setAttribute("part", "column-group"));
+    dom.table.querySelectorAll(".ce-pivotgrid__value-header").forEach((node) => node.setAttribute("part", "value-header"));
+    dom.table.querySelectorAll(".ce-pivotgrid__row-label").forEach((node) => node.setAttribute("part", "row-label"));
+    dom.table.querySelectorAll(".ce-pivotgrid__value").forEach((node) => node.setAttribute("part", "value"));
+    dom.table.querySelectorAll(".ce-pivotgrid__totals-row").forEach((node) => node.setAttribute("part", "totals-row"));
+    dom.empty.setAttribute("part", "empty");
+    dom.empty.setAttribute("data-ce-slot", "empty");
+    const emptyFallback = dom.container.getAttribute("data-empty-label") ?? dom.empty.textContent?.trim() ?? "";
+    if (emptyFallback.length > 0) {
+        dom.empty.setAttribute("data-ce-fallback", emptyFallback);
+    }
+    dom.loading.setAttribute("part", "loading");
+    dom.loading.setAttribute("data-ce-slot", "loading");
+    const loadingFallback = dom.container.getAttribute("data-loading-label") ?? dom.loading.textContent?.trim() ?? "";
+    if (loadingFallback.length > 0) {
+        dom.loading.setAttribute("data-ce-fallback", loadingFallback);
+    }
+    dom.error.setAttribute("part", "error");
+    dom.error.setAttribute("data-ce-slot", "error");
+    const errorFallback = dom.container.getAttribute("data-error-message") ?? dom.error.textContent?.trim() ?? "";
+    if (errorFallback.length > 0) {
+        dom.error.setAttribute("data-ce-fallback", errorFallback);
+    }
+};
+const DEFAULT_PIVOT_PROPS = {
+    data: [],
+    rows: [],
+    columns: [],
+    values: [],
+    searchable: true,
+    searchTerm: "",
+    searchPlaceholder: "Search rows",
+    showTotals: true,
+    enableFilters: false,
+    theme: "light",
+    density: "comfortable",
+    emptyLabel: "No results",
+    loading: false,
+    loadingLabel: "Loading...",
+    error: false,
+    errorMessage: "Something went wrong",
+    virtualized: false,
+    viewportHeight: 360,
+    rowHeight: 36,
+    overscan: 4,
+    showToolbar: true,
+};
+const PIVOT_PROP_DEFINITIONS = [
+    { attribute: "data", prop: "data", type: "json" },
+    { attribute: "rows", prop: "rows", type: "json" },
+    { attribute: "columns", prop: "columns", type: "json" },
+    { attribute: "values", prop: "values", type: "json" },
+    { attribute: "filters", prop: "filters", type: "json" },
+    { attribute: "value-order", prop: "valueOrder", type: "json" },
+    { attribute: "searchable", prop: "searchable", type: "boolean" },
+    { attribute: "search-term", prop: "searchTerm" },
+    { attribute: "search-placeholder", prop: "searchPlaceholder" },
+    { attribute: "show-totals", prop: "showTotals", type: "boolean" },
+    { attribute: "enable-filters", prop: "enableFilters", type: "boolean" },
+    { attribute: "theme", prop: "theme" },
+    { attribute: "density", prop: "density" },
+    { attribute: "empty-label", prop: "emptyLabel" },
+    { attribute: "loading", prop: "loading", type: "boolean" },
+    { attribute: "loading-label", prop: "loadingLabel" },
+    { attribute: "error", prop: "error", type: "boolean" },
+    { attribute: "error-message", prop: "errorMessage" },
+    { attribute: "virtualized", prop: "virtualized", type: "boolean" },
+    { attribute: "viewport-height", prop: "viewportHeight", type: "number" },
+    { attribute: "row-height", prop: "rowHeight", type: "number" },
+    { attribute: "overscan", prop: "overscan", type: "number" },
+    { attribute: "show-toolbar", prop: "showToolbar", type: "boolean" },
+];
+const pivotComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-pivotgrid");
+        const dom = existingWrapper ? hydrateDom(host, existingWrapper) : createDom(host);
+        applyPivotParts(dom);
+        let currentProps = { ...DEFAULT_PIVOT_PROPS, ...props };
+        if (existingWrapper) {
+            const dataPayload = readDataAttr(existingWrapper, "data");
+            if (shouldUseDomValue(host, "data", dataPayload)) {
+                try {
+                    currentProps.data = JSON.parse(dataPayload ?? "[]");
+                }
+                catch {
+                    currentProps.data = [];
+                }
+            }
+            const rowsPayload = readDataAttr(existingWrapper, "rows");
+            if (shouldUseDomValue(host, "rows", rowsPayload)) {
+                try {
+                    currentProps.rows = JSON.parse(rowsPayload ?? "[]");
+                }
+                catch {
+                    currentProps.rows = [];
+                }
+            }
+            const columnsPayload = readDataAttr(existingWrapper, "columns");
+            if (shouldUseDomValue(host, "columns", columnsPayload)) {
+                try {
+                    currentProps.columns = JSON.parse(columnsPayload ?? "[]");
+                }
+                catch {
+                    currentProps.columns = [];
+                }
+            }
+            const valuesPayload = readDataAttr(existingWrapper, "values");
+            if (shouldUseDomValue(host, "values", valuesPayload)) {
+                try {
+                    currentProps.values = JSON.parse(valuesPayload ?? "[]");
+                }
+                catch {
+                    currentProps.values = [];
+                }
+            }
+            const filtersPayload = readDataAttr(existingWrapper, "filters");
+            if (shouldUseDomValue(host, "filters", filtersPayload)) {
+                try {
+                    currentProps.filters = JSON.parse(filtersPayload ?? "{}");
+                }
+                catch {
+                    currentProps.filters = {};
+                }
+            }
+            const valueOrderPayload = readDataAttr(existingWrapper, "value-order");
+            if (shouldUseDomValue(host, "value-order", valueOrderPayload)) {
+                try {
+                    currentProps.valueOrder = JSON.parse(valueOrderPayload ?? "[]");
+                }
+                catch {
+                    currentProps.valueOrder = [];
+                }
+            }
+            const searchTerm = readDataAttr(existingWrapper, "search-term");
+            if (shouldUseDomValue(host, "search-term", searchTerm)) {
+                currentProps.searchTerm = searchTerm ?? "";
+            }
+            const searchPlaceholder = readDataAttr(existingWrapper, "search-placeholder");
+            if (shouldUseDomValue(host, "search-placeholder", searchPlaceholder)) {
+                currentProps.searchPlaceholder = searchPlaceholder ?? DEFAULT_PIVOT_PROPS.searchPlaceholder;
+            }
+            const searchable = readDataAttr(existingWrapper, "searchable");
+            if (shouldUseDomValue(host, "searchable", searchable)) {
+                const parsed = parseBoolean(searchable);
+                if (parsed !== undefined) {
+                    currentProps.searchable = parsed;
+                }
+            }
+            const showTotals = readDataAttr(existingWrapper, "show-totals");
+            if (shouldUseDomValue(host, "show-totals", showTotals)) {
+                const parsed = parseBoolean(showTotals);
+                if (parsed !== undefined) {
+                    currentProps.showTotals = parsed;
+                }
+            }
+            const enableFilters = readDataAttr(existingWrapper, "enable-filters");
+            if (shouldUseDomValue(host, "enable-filters", enableFilters)) {
+                const parsed = parseBoolean(enableFilters);
+                if (parsed !== undefined) {
+                    currentProps.enableFilters = parsed;
+                }
+            }
+            const theme = readDataAttr(existingWrapper, "theme");
+            if (shouldUseDomValue(host, "theme", theme)) {
+                currentProps.theme = theme ?? DEFAULT_PIVOT_PROPS.theme;
+            }
+            const density = readDataAttr(existingWrapper, "density");
+            if (shouldUseDomValue(host, "density", density)) {
+                currentProps.density = density ?? DEFAULT_PIVOT_PROPS.density;
+            }
+            const emptyLabel = readDataAttr(existingWrapper, "empty-label");
+            if (shouldUseDomValue(host, "empty-label", emptyLabel)) {
+                currentProps.emptyLabel = emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel;
+            }
+            const loading = readDataAttr(existingWrapper, "loading");
+            if (shouldUseDomValue(host, "loading", loading)) {
+                currentProps.loading = loading === "true";
+            }
+            const loadingLabel = readDataAttr(existingWrapper, "loading-label");
+            if (shouldUseDomValue(host, "loading-label", loadingLabel)) {
+                currentProps.loadingLabel = loadingLabel ?? DEFAULT_PIVOT_PROPS.loadingLabel;
+            }
+            const error = readDataAttr(existingWrapper, "error");
+            if (shouldUseDomValue(host, "error", error)) {
+                currentProps.error = error === "true";
+            }
+            const errorMessage = readDataAttr(existingWrapper, "error-message");
+            if (shouldUseDomValue(host, "error-message", errorMessage)) {
+                currentProps.errorMessage = errorMessage ?? DEFAULT_PIVOT_PROPS.errorMessage;
+            }
+            const virtualized = readDataAttr(existingWrapper, "virtualized");
+            if (shouldUseDomValue(host, "virtualized", virtualized)) {
+                currentProps.virtualized = virtualized === "true";
+            }
+            const viewportHeight = readDataAttr(existingWrapper, "viewport-height");
+            if (shouldUseDomValue(host, "viewport-height", viewportHeight)) {
+                const parsed = viewportHeight ? Number(viewportHeight) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.viewportHeight = parsed;
+                }
+            }
+            const rowHeight = readDataAttr(existingWrapper, "row-height");
+            if (shouldUseDomValue(host, "row-height", rowHeight)) {
+                const parsed = rowHeight ? Number(rowHeight) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.rowHeight = parsed;
+                }
+            }
+            const overscan = readDataAttr(existingWrapper, "overscan");
+            if (shouldUseDomValue(host, "overscan", overscan)) {
+                const parsed = overscan ? Number(overscan) : undefined;
+                if (Number.isFinite(parsed)) {
+                    currentProps.overscan = parsed;
+                }
+            }
+            const showToolbar = readDataAttr(existingWrapper, "show-toolbar");
+            if (shouldUseDomValue(host, "show-toolbar", showToolbar)) {
+                const parsed = parseBoolean(showToolbar);
+                if (parsed !== undefined) {
+                    currentProps.showToolbar = parsed;
+                }
+            }
+            if (shouldUseDomValue(host, "search-term", dom.searchInput.value)) {
+                currentProps.searchTerm = dom.searchInput.value;
+            }
+            if (shouldUseDomValue(host, "search-placeholder", dom.searchInput.placeholder)) {
+                currentProps.searchPlaceholder = dom.searchInput.placeholder;
+            }
+            if (shouldUseDomValue(host, "searchable", !dom.searchWrapper.hidden)) {
+                currentProps.searchable = !dom.searchWrapper.hidden;
+            }
+            if (shouldUseDomValue(host, "show-toolbar", !dom.toolbar.hidden)) {
+                currentProps.showToolbar = !dom.toolbar.hidden;
+            }
+            if (shouldUseDomValue(host, "enable-filters", !dom.filtersWrapper.hidden)) {
+                currentProps.enableFilters = !dom.filtersWrapper.hidden;
+            }
+            if (shouldUseDomValue(host, "filters", dom.filtersWrapper.children.length)) {
+                const filters = {};
+                dom.filtersWrapper.querySelectorAll(".ce-pivotgrid__filter-input").forEach((input) => {
+                    const field = input.dataset.field;
+                    if (field) {
+                        filters[field] = input.value;
+                    }
+                });
+                currentProps.filters = filters;
+            }
+            if (shouldUseDomValue(host, "value-order", dom.valuesOrder.children.length)) {
+                currentProps.valueOrder = Array.from(dom.valuesOrder.querySelectorAll(".ce-pivotgrid__values-chip"))
+                    .map((chip) => chip.dataset.field)
+                    .filter((value) => Boolean(value));
+            }
+            if (shouldUseDomValue(host, "empty-label", dom.empty.textContent)) {
+                currentProps.emptyLabel = dom.empty.textContent ?? DEFAULT_PIVOT_PROPS.emptyLabel;
+            }
+            if (shouldUseDomValue(host, "theme", dom.container.dataset.theme)) {
+                currentProps.theme = dom.container.dataset.theme ?? DEFAULT_PIVOT_PROPS.theme;
+            }
+            if (shouldUseDomValue(host, "density", dom.container.dataset.density)) {
+                currentProps.density = dom.container.dataset.density ?? DEFAULT_PIVOT_PROPS.density;
+            }
+        }
+        const state = {
+            searchTerm: currentProps.searchTerm ?? "",
+            filters: { ...(currentProps.filters ?? {}) },
+            valueOrder: Array.isArray(currentProps.valueOrder) ? [...currentProps.valueOrder] : [],
+        };
+        const notifyChange = () => {
+            const detail = {
+                searchTerm: state.searchTerm || undefined,
+                rowKeys: model.rows.map((row) => row.key),
+                columnKeys: model.columns.map((col) => col.key),
+                filters: Object.keys(state.filters ?? {}).length ? { ...state.filters } : undefined,
+                valueOrder: state.valueOrder.length ? [...state.valueOrder] : undefined,
+            };
+            on?.change?.(detail);
+        };
+        let model = buildPivotModel(currentProps, state);
+        let virtualScrollHandler;
+        const applyProps = () => {
+            model = buildPivotModel(currentProps, state);
+            renderToolbar(dom, currentProps, state, model);
+            renderHeader(dom, model.rowFields, model.rows, model.columns, model.values, Boolean(currentProps.showTotals));
+            if (currentProps.virtualized) {
+                dom.tableWrapper.style.maxHeight = `${currentProps.viewportHeight ?? DEFAULT_PIVOT_PROPS.viewportHeight}px`;
+                dom.tableWrapper.style.overflowY = "auto";
+                renderBodyVirtual(dom, model, Boolean(currentProps.showTotals), currentProps);
+                if (!virtualScrollHandler) {
+                    virtualScrollHandler = () => renderBodyVirtual(dom, model, Boolean(currentProps.showTotals), currentProps);
+                    dom.tableWrapper.addEventListener("scroll", virtualScrollHandler);
+                }
+            }
+            else {
+                dom.tableWrapper.style.removeProperty("max-height");
+                dom.tableWrapper.style.removeProperty("overflow-y");
+                if (virtualScrollHandler) {
+                    dom.tableWrapper.removeEventListener("scroll", virtualScrollHandler);
+                    virtualScrollHandler = undefined;
+                }
+                renderBody(dom, model, Boolean(currentProps.showTotals));
+            }
+            renderEmpty(dom, model.rows.length === 0 || model.columns.length === 0, currentProps.emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel);
+            renderState(dom, currentProps, model.rows.length === 0 || model.columns.length === 0);
+            dom.container.className = buildPivotClassNames(currentProps);
+            dom.container.dataset.density = currentProps.density ?? "comfortable";
+            dom.container.dataset.theme = currentProps.theme ?? "light";
+            applyPivotParts(dom);
+            on?.aggregate?.({
+                rows: model.rows,
+                columns: model.columns,
+                values: model.values,
+                cells: model.cells,
+            });
+        };
+        const handleSearch = (term) => {
+            if (state.searchTerm === term) {
+                return;
+            }
+            state.searchTerm = term;
+            applyProps();
+            notifyChange();
+        };
+        const handleFilterChange = (field, value) => {
+            state.filters = { ...state.filters, [field]: value };
+            applyProps();
+            notifyChange();
+        };
+        const handleClearFilters = () => {
+            state.filters = {};
+            applyProps();
+            notifyChange();
+        };
+        const reorderValues = (source, target) => {
+            if (!source || !target || source === target) {
+                return;
+            }
+            const current = state.valueOrder.length ? [...state.valueOrder] : model.values.map((v) => v.field);
+            const filtered = current.filter((field) => model.values.some((v) => v.field === field));
+            const withoutSource = filtered.filter((field) => field !== source);
+            const targetIndex = withoutSource.indexOf(target);
+            if (targetIndex === -1) {
+                return;
+            }
+            withoutSource.splice(targetIndex, 0, source);
+            state.valueOrder = withoutSource;
+            applyProps();
+            notifyChange();
+        };
+        let dragValue = null;
+        dom.searchInput.addEventListener("input", (event) => {
+            const value = event.target.value;
+            handleSearch(value);
+        });
+        dom.filtersWrapper.addEventListener("input", (event) => {
+            const target = event.target;
+            if (!target.classList.contains("ce-pivotgrid__filter-input")) {
+                return;
+            }
+            const field = target.dataset.field;
+            if (!field) {
+                return;
+            }
+            handleFilterChange(field, target.value);
+        });
+        dom.clearFiltersBtn.addEventListener("click", () => handleClearFilters());
+        dom.valuesOrder.addEventListener("dragstart", (event) => {
+            const target = event.target.closest(".ce-pivotgrid__values-chip");
+            if (!target) {
+                return;
+            }
+            dragValue = target.dataset.field ?? null;
+            if (dragValue && event.dataTransfer) {
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", dragValue);
+            }
+        });
+        dom.valuesOrder.addEventListener("dragover", (event) => {
+            if (dragValue) {
+                event.preventDefault();
+            }
+        });
+        dom.valuesOrder.addEventListener("drop", (event) => {
+            if (!dragValue) {
+                return;
+            }
+            const target = event.target.closest(".ce-pivotgrid__values-chip");
+            if (!target) {
+                dragValue = null;
+                return;
+            }
+            const targetField = target.dataset.field;
+            if (targetField) {
+                reorderValues(dragValue, targetField);
+            }
+            dragValue = null;
+        });
+        dom.tbody.addEventListener("focusin", (event) => {
+            const target = event.target.closest("tr[data-row-index]");
+            if (!target) {
+                return;
+            }
+            setRovingRowIndex(dom.tbody, target);
+        });
+        dom.tbody.addEventListener("keydown", (event) => {
+            const target = event.target.closest("tr[data-row-index]");
+            if (!target) {
+                return;
+            }
+            const rowIndex = Number(target.dataset.rowIndex ?? "-1");
+            if (Number.isNaN(rowIndex) || rowIndex < 0) {
+                return;
+            }
+            if (currentProps.virtualized) {
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, model, currentProps, rowIndex + 1);
+                }
+                else if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, model, currentProps, rowIndex - 1);
+                }
+                else if (event.key === "Home") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, model, currentProps, 0);
+                }
+                else if (event.key === "End") {
+                    event.preventDefault();
+                    focusVirtualRow(dom, model, currentProps, getPivotRowCount(model) - 1);
+                }
+                return;
+            }
+            const rows = Array.from(dom.tbody.querySelectorAll("tr[data-row-index]"));
+            const index = rows.indexOf(target);
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                rows[index + 1]?.focus();
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                rows[index - 1]?.focus();
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                rows[0]?.focus();
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                rows[rows.length - 1]?.focus();
+            }
+        });
+        applyProps();
+        return {
+            destroy() {
+                dom.searchInput.removeEventListener("input", () => undefined);
+                if (virtualScrollHandler) {
+                    dom.tableWrapper.removeEventListener("scroll", virtualScrollHandler);
+                    virtualScrollHandler = undefined;
+                }
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...partial };
+                if (typeof partial.searchTerm === "string") {
+                    state.searchTerm = partial.searchTerm;
+                }
+                if (partial.filters) {
+                    state.filters = { ...partial.filters };
+                }
+                if (Array.isArray(partial.valueOrder)) {
+                    state.valueOrder = [...partial.valueOrder];
+                }
+                applyProps();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_PIVOT_PROPS, ...props };
+        const state = {
+            searchTerm: merged.searchTerm ?? "",
+            filters: { ...(merged.filters ?? {}) },
+            valueOrder: Array.isArray(merged.valueOrder) ? [...merged.valueOrder] : [],
+        };
+        const model = buildPivotModel(merged, state);
+        const bodyRows = renderBodyHtml(model, Boolean(merged.showTotals));
+        const header = renderHeaderHtml(model.rowFields, model.rows, model.columns, model.values, Boolean(merged.showTotals));
+        const showToolbar = merged.showToolbar !== false && merged.searchable !== false;
+        const showSearch = merged.searchable !== false;
+        const showFilters = merged.enableFilters === true && ((merged.rows?.length ?? 0) > 0 || (merged.columns?.length ?? 0) > 0);
+        const hasFilters = Object.values(state.filters ?? {}).some((value) => (value ?? "").toString().trim().length > 0);
+        const searchPlaceholder = merged.searchPlaceholder ?? DEFAULT_PIVOT_PROPS.searchPlaceholder ?? "Search";
+        const filtersHtml = showFilters
+            ? [...(merged.rows ?? []), ...(merged.columns ?? [])]
+                .filter(Boolean)
+                .map((field) => `<label class="ce-pivotgrid__filter" part="filter">${escapeHtml(field)}<input type="search" class="ce-pivotgrid__filter-input" part="filter-input" data-field="${escapeHtml(field)}" value="${escapeHtml(state.filters[field] ?? "")}" /></label>`)
+                .join("")
+            : "";
+        const valuesOrderHtml = model.values.length > 1
+            ? `<span class="ce-pivotgrid__values-label" part="values-label">Reorder values:</span>${model.values
+                .map((value) => `<button type="button" class="ce-pivotgrid__values-chip" part="values-chip" draggable="true" data-field="${escapeHtml(value.field)}">${escapeHtml(value.label ?? value.field)}</button>`)
+                .join("")}`
+            : "";
+        const toolbarHtml = `<div class="ce-pivotgrid__toolbar" part="toolbar"${showToolbar ? "" : " hidden"}>
+  <div class="ce-pivotgrid__search" part="search"${showSearch ? "" : " hidden"}>
+    <input type="search" class="ce-pivotgrid__search-input" part="search-input" placeholder="${escapeHtml(searchPlaceholder)}" value="${escapeHtml(state.searchTerm ?? "")}" />
+  </div>
+  <div class="ce-pivotgrid__filters" part="filters"${showFilters ? "" : " hidden"}>${filtersHtml}</div>
+  <button type="button" class="ce-pivotgrid__clear-filters" part="clear-filters"${hasFilters ? "" : " hidden"}>Clear filters</button>
+  <div class="ce-pivotgrid__values-order" part="values-order">${valuesOrderHtml}</div>
+</div>`;
+        const emptyRow = bodyRows ||
+            `<tr><td colspan="${Math.max(1, model.rows.length + (model.columns.length || 1) * Math.max(1, model.values.length))}">${escapeHtml(merged.emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel)}</td></tr>`;
+        const emptyParagraph = `<p class="ce-pivotgrid__empty" part="empty" data-ce-slot="empty" data-ce-fallback="${escapeHtml(merged.emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel)}"${bodyRows ? " hidden" : ""}>${escapeHtml(merged.emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel)}</p>`;
+        const loadingLabel = escapeHtml(merged.loadingLabel ?? DEFAULT_PIVOT_PROPS.loadingLabel ?? "Loading...");
+        const errorLabel = escapeHtml(merged.errorMessage ?? DEFAULT_PIVOT_PROPS.errorMessage ?? "Something went wrong");
+        const loading = `<p class="ce-pivotgrid__loading" part="loading" data-ce-slot="loading" data-ce-fallback="${loadingLabel}"${merged.loading ? "" : " hidden"}>${loadingLabel}</p>`;
+        const error = `<p class="ce-pivotgrid__error" part="error" data-ce-slot="error" data-ce-fallback="${errorLabel}"${merged.error ? "" : " hidden"}>${errorLabel}</p>`;
+        const dataAttrs = ` data-data="${escapeHtml(JSON.stringify(merged.data ?? []))}" data-rows="${escapeHtml(JSON.stringify(merged.rows ?? []))}" data-columns="${escapeHtml(JSON.stringify(merged.columns ?? []))}" data-values="${escapeHtml(JSON.stringify(merged.values ?? []))}" data-filters="${escapeHtml(JSON.stringify(state.filters ?? {}))}" data-value-order="${escapeHtml(JSON.stringify(state.valueOrder ?? []))}" data-searchable="${String(merged.searchable !== false)}" data-search-term="${escapeHtml(state.searchTerm ?? "")}" data-search-placeholder="${escapeHtml(searchPlaceholder)}" data-show-totals="${String(merged.showTotals !== false)}" data-enable-filters="${String(Boolean(merged.enableFilters))}" data-theme="${escapeHtml(merged.theme ?? "light")}" data-density="${escapeHtml(merged.density ?? "comfortable")}" data-empty-label="${escapeHtml(merged.emptyLabel ?? DEFAULT_PIVOT_PROPS.emptyLabel)}" data-loading="${String(merged.loading === true)}" data-loading-label="${loadingLabel}" data-error="${String(merged.error === true)}" data-error-message="${errorLabel}" data-show-toolbar="${String(merged.showToolbar !== false)}" data-virtualized="${String(merged.virtualized === true)}" data-viewport-height="${String(merged.viewportHeight ?? DEFAULT_PIVOT_PROPS.viewportHeight)}" data-row-height="${String(merged.rowHeight ?? DEFAULT_PIVOT_PROPS.rowHeight)}" data-overscan="${String(merged.overscan ?? DEFAULT_PIVOT_PROPS.overscan)}"`;
+        const renderState = merged.loading ? "loading" : merged.error ? "error" : bodyRows ? "ready" : "empty";
+        return `<div class="${buildPivotClassNames(merged)}" data-ce-component="pivot-grid" part="base" data-state="${renderState}"${dataAttrs}>
+  ${toolbarHtml}
+  <div class="ce-pivotgrid__table-wrapper" part="table-wrapper"${merged.loading || merged.error ? " hidden" : ""}>
+    <table class="ce-pivotgrid__table" part="table">
+      <thead part="thead">
+${header}
+      </thead>
+      <tbody part="tbody">
+${emptyRow}
+      </tbody>
+    </table>
+  </div>
+  ${emptyParagraph}
+  ${loading}
+  ${error}
+</div>`;
+    },
+};
+export function registerPivotGridElement() {
+    return defineComponentElement({
+        tag: "ce-pivot-grid",
+        component: pivotComponent,
+        props: PIVOT_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_PIVOT_PROPS,
+        events: ["change", "aggregate"],
+        shadow: false,
+        preserveLightDom: true,
+    });
+}
+function createDom(host) {
+    const container = document.createElement("div");
+    container.className = "ce-pivotgrid";
+    const toolbar = document.createElement("div");
+    toolbar.className = "ce-pivotgrid__toolbar";
+    const searchWrapper = document.createElement("div");
+    searchWrapper.className = "ce-pivotgrid__search";
+    const searchInput = document.createElement("input");
+    searchInput.type = "search";
+    searchInput.className = "ce-pivotgrid__search-input";
+    searchInput.placeholder = DEFAULT_PIVOT_PROPS.searchPlaceholder ?? "Search";
+    searchWrapper.appendChild(searchInput);
+    const filtersWrapper = document.createElement("div");
+    filtersWrapper.className = "ce-pivotgrid__filters";
+    const clearFiltersBtn = document.createElement("button");
+    clearFiltersBtn.type = "button";
+    clearFiltersBtn.className = "ce-pivotgrid__clear-filters";
+    clearFiltersBtn.textContent = "Clear filters";
+    clearFiltersBtn.hidden = true;
+    const valuesOrder = document.createElement("div");
+    valuesOrder.className = "ce-pivotgrid__values-order";
+    toolbar.append(searchWrapper, filtersWrapper, clearFiltersBtn, valuesOrder);
+    const tableWrapper = document.createElement("div");
+    tableWrapper.className = "ce-pivotgrid__table-wrapper";
+    const table = document.createElement("table");
+    table.className = "ce-pivotgrid__table";
+    const thead = document.createElement("thead");
+    const tbody = document.createElement("tbody");
+    table.append(thead, tbody);
+    tableWrapper.appendChild(table);
+    const empty = document.createElement("p");
+    empty.className = "ce-pivotgrid__empty";
+    empty.hidden = true;
+    const loading = document.createElement("p");
+    loading.className = "ce-pivotgrid__loading";
+    loading.hidden = true;
+    loading.setAttribute("role", "status");
+    const error = document.createElement("p");
+    error.className = "ce-pivotgrid__error";
+    error.hidden = true;
+    error.setAttribute("role", "alert");
+    container.append(toolbar, tableWrapper, empty, loading, error);
+    host.append(container);
+    return {
+        container,
+        toolbar,
+        searchWrapper,
+        searchInput,
+        filtersWrapper,
+        clearFiltersBtn,
+        valuesOrder,
+        tableWrapper,
+        table,
+        thead,
+        tbody,
+        empty,
+        loading,
+        error,
+    };
+}
+function hydrateDom(host, container) {
+    if (!container.classList.contains("ce-pivotgrid")) {
+        container.classList.add("ce-pivotgrid");
+    }
+    const toolbar = ensureChild(container, ".ce-pivotgrid__toolbar", () => {
+        const el = document.createElement("div");
+        el.className = "ce-pivotgrid__toolbar";
+        return el;
+    });
+    const searchWrapper = ensureChild(toolbar, ".ce-pivotgrid__search", () => {
+        const el = document.createElement("div");
+        el.className = "ce-pivotgrid__search";
+        return el;
+    });
+    const searchInput = ensureChild(searchWrapper, ".ce-pivotgrid__search-input", () => {
+        const input = document.createElement("input");
+        input.type = "search";
+        input.className = "ce-pivotgrid__search-input";
+        return input;
+    });
+    const filtersWrapper = ensureChild(toolbar, ".ce-pivotgrid__filters", () => {
+        const el = document.createElement("div");
+        el.className = "ce-pivotgrid__filters";
+        return el;
+    });
+    const clearFiltersBtn = ensureChild(toolbar, ".ce-pivotgrid__clear-filters", () => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ce-pivotgrid__clear-filters";
+        button.textContent = "Clear filters";
+        return button;
+    });
+    const valuesOrder = ensureChild(toolbar, ".ce-pivotgrid__values-order", () => {
+        const el = document.createElement("div");
+        el.className = "ce-pivotgrid__values-order";
+        return el;
+    });
+    const tableWrapper = ensureChild(container, ".ce-pivotgrid__table-wrapper", () => {
+        const el = document.createElement("div");
+        el.className = "ce-pivotgrid__table-wrapper";
+        return el;
+    });
+    const table = ensureChild(tableWrapper, ".ce-pivotgrid__table", () => {
+        const el = document.createElement("table");
+        el.className = "ce-pivotgrid__table";
+        return el;
+    });
+    let thead = table.querySelector("thead");
+    if (!thead) {
+        thead = document.createElement("thead");
+        table.appendChild(thead);
+    }
+    let tbody = table.querySelector("tbody");
+    if (!tbody) {
+        tbody = document.createElement("tbody");
+        table.appendChild(tbody);
+    }
+    const empty = ensureChild(container, ".ce-pivotgrid__empty", () => {
+        const el = document.createElement("p");
+        el.className = "ce-pivotgrid__empty";
+        return el;
+    });
+    const loading = ensureChild(container, ".ce-pivotgrid__loading", () => {
+        const el = document.createElement("p");
+        el.className = "ce-pivotgrid__loading";
+        el.setAttribute("role", "status");
+        return el;
+    });
+    const error = ensureChild(container, ".ce-pivotgrid__error", () => {
+        const el = document.createElement("p");
+        el.className = "ce-pivotgrid__error";
+        el.setAttribute("role", "alert");
+        return el;
+    });
+    if (!container.isConnected) {
+        host.append(container);
+    }
+    return {
+        container,
+        toolbar,
+        searchWrapper,
+        searchInput,
+        filtersWrapper,
+        clearFiltersBtn,
+        valuesOrder,
+        tableWrapper,
+        table,
+        thead,
+        tbody,
+        empty,
+        loading,
+        error,
+    };
+}
+function ensureChild(parent, selector, factory) {
+    const existing = parent.querySelector(selector);
+    if (existing) {
+        return existing;
+    }
+    const created = factory();
+    parent.appendChild(created);
+    return created;
+}
+function buildPivotModel(props, state) {
+    const rows = Array.isArray(props.rows) ? props.rows.filter(Boolean) : [];
+    const columns = Array.isArray(props.columns) ? props.columns.filter(Boolean) : [];
+    const values = orderValues(normalizeValueFields(props.values), state.valueOrder);
+    const data = Array.isArray(props.data) ? props.data : [];
+    if (!data.length || !rows.length || !values.length) {
+        return { rowFields: rows, columnFields: columns, rows: [], columns: [], values, cells: [] };
+    }
+    const searchable = props.searchable !== false;
+    const needle = searchable ? (state.searchTerm ?? "").trim().toLowerCase() : "";
+    const rowGroups = new Map();
+    const columnGroups = new Map();
+    const buckets = new Map();
+    const rowTotals = new Map();
+    const columnTotals = new Map();
+    const grandTotals = new Map();
+    const includeRow = (rowLabels, columnLabels, record) => {
+        if (!needle) {
+            return true;
+        }
+        const valueTerms = values.map((value) => stringifyValue(record[value.field]));
+        return [...rowLabels, ...columnLabels, ...valueTerms].some((label) => label.toLowerCase().includes(needle));
+    };
+    data.forEach((record) => {
+        if (props.enableFilters && state.filters) {
+            const filters = Object.entries(state.filters).filter(([, value]) => value != null && String(value).trim().length > 0);
+            const passes = filters.every(([field, value]) => stringifyValue(record[field]).toLowerCase().includes(String(value).toLowerCase()));
+            if (!passes) {
+                return;
+            }
+        }
+        const rowLabels = rows.map((field) => stringifyValue(record[field]));
+        const columnLabels = columns.map((field) => stringifyValue(record[field]));
+        if (!includeRow(rowLabels, columnLabels, record)) {
+            return;
+        }
+        const rowKey = rowLabels.join(" | ");
+        const columnKey = columnLabels.length ? columnLabels.join(" | ") : "__root";
+        if (!rowGroups.has(rowKey)) {
+            rowGroups.set(rowKey, { key: rowKey, labels: rowLabels });
+        }
+        if (!columnGroups.has(columnKey)) {
+            columnGroups.set(columnKey, { key: columnKey, labels: columnLabels });
+        }
+        values.forEach((valueField) => {
+            const value = toNumber(record[valueField.field]);
+            const rowBucket = ensureBucket(buckets, rowKey, columnKey, valueField.field);
+            accumulate(rowBucket, value, valueField.aggregator);
+            const rowTotalBucket = ensureBucket(rowTotals, rowKey, "__total__", valueField.field);
+            accumulate(rowTotalBucket, value, valueField.aggregator);
+            const columnTotalBucket = ensureBucket(columnTotals, "__total__", columnKey, valueField.field);
+            accumulate(columnTotalBucket, value, valueField.aggregator);
+            const grandBucket = ensureGrand(grandTotals, valueField.field);
+            accumulate(grandBucket, value, valueField.aggregator);
+        });
+    });
+    const cells = [];
+    rowGroups.forEach((rowGroup) => {
+        columnGroups.forEach((columnGroup) => {
+            values.forEach((valueField) => {
+                const bucket = buckets.get(rowGroup.key)?.get(columnGroup.key)?.get(valueField.field);
+                const resolved = bucket ? computeValue(bucket, valueField.aggregator) : null;
+                cells.push({
+                    rowKey: rowGroup.key,
+                    columnKey: columnGroup.key,
+                    valueField: valueField.field,
+                    value: resolved,
+                    formatted: formatValue(resolved, valueField.format),
+                    isTotal: false,
+                });
+            });
+        });
+        if (props.showTotals !== false) {
+            values.forEach((valueField) => {
+                const bucket = rowTotals.get(rowGroup.key)?.get("__total__")?.get(valueField.field);
+                const resolved = bucket ? computeValue(bucket, valueField.aggregator) : null;
+                cells.push({
+                    rowKey: rowGroup.key,
+                    columnKey: "__row_total",
+                    valueField: valueField.field,
+                    value: resolved,
+                    formatted: formatValue(resolved, valueField.format),
+                    isTotal: true,
+                });
+            });
+        }
+    });
+    if (props.showTotals !== false) {
+        columnGroups.forEach((columnGroup) => {
+            values.forEach((valueField) => {
+                const bucket = columnTotals.get("__total__")?.get(columnGroup.key)?.get(valueField.field);
+                const resolved = bucket ? computeValue(bucket, valueField.aggregator) : null;
+                cells.push({
+                    rowKey: "__column_total",
+                    columnKey: columnGroup.key,
+                    valueField: valueField.field,
+                    value: resolved,
+                    formatted: formatValue(resolved, valueField.format),
+                    isTotal: true,
+                });
+            });
+        });
+        values.forEach((valueField) => {
+            const bucket = grandTotals.get(valueField.field);
+            const resolved = bucket ? computeValue(bucket, valueField.aggregator) : null;
+            cells.push({
+                rowKey: "__column_total",
+                columnKey: "__row_total",
+                valueField: valueField.field,
+                value: resolved,
+                formatted: formatValue(resolved, valueField.format),
+                isTotal: true,
+            });
+        });
+    }
+    const rowsArray = Array.from(rowGroups.values());
+    const columnsArray = Array.from(columnGroups.values());
+    if (props.showTotals !== false) {
+        columnsArray.push({ key: "__row_total", labels: ["Total"] });
+    }
+    return { rowFields: rows, columnFields: columns, rows: rowsArray, columns: columnsArray, values, cells };
+}
+function renderToolbar(dom, props, state, model) {
+    const showToolbar = props.showToolbar !== false && props.searchable !== false;
+    dom.toolbar.toggleAttribute("hidden", !showToolbar);
+    const showSearch = props.searchable !== false;
+    dom.searchWrapper.toggleAttribute("hidden", !showSearch);
+    dom.searchInput.value = state.searchTerm;
+    dom.searchInput.placeholder = props.searchPlaceholder ?? DEFAULT_PIVOT_PROPS.searchPlaceholder ?? "Search";
+    const showFilters = props.enableFilters === true && (props.rows?.length || props.columns?.length);
+    dom.filtersWrapper.toggleAttribute("hidden", !showFilters);
+    if (showFilters) {
+        dom.filtersWrapper.innerHTML = "";
+        const fields = [...(props.rows ?? []), ...(props.columns ?? [])].filter(Boolean);
+        fields.forEach((field) => {
+            const wrapper = document.createElement("label");
+            wrapper.className = "ce-pivotgrid__filter";
+            wrapper.setAttribute("part", "filter");
+            wrapper.textContent = field;
+            const input = document.createElement("input");
+            input.type = "search";
+            input.className = "ce-pivotgrid__filter-input";
+            input.setAttribute("part", "filter-input");
+            input.dataset.field = field;
+            input.value = state.filters[field] ?? "";
+            wrapper.appendChild(input);
+            dom.filtersWrapper.appendChild(wrapper);
+        });
+    }
+    const hasFilters = Object.values(state.filters ?? {}).some((value) => (value ?? "").toString().trim().length > 0);
+    dom.clearFiltersBtn.hidden = !hasFilters;
+    dom.valuesOrder.innerHTML = "";
+    if (model.values.length > 1) {
+        const label = document.createElement("span");
+        label.textContent = "Reorder values:";
+        label.className = "ce-pivotgrid__values-label";
+        label.setAttribute("part", "values-label");
+        dom.valuesOrder.appendChild(label);
+        model.values.forEach((value) => {
+            const chip = document.createElement("button");
+            chip.type = "button";
+            chip.className = "ce-pivotgrid__values-chip";
+            chip.setAttribute("part", "values-chip");
+            chip.draggable = true;
+            chip.dataset.field = value.field;
+            chip.textContent = value.label ?? value.field;
+            dom.valuesOrder.appendChild(chip);
+        });
+    }
+}
+function renderHeader(dom, rowFields, rows, columns, values, showTotals) {
+    dom.thead.innerHTML = renderHeaderHtml(rowFields, rows, columns, values, showTotals);
+}
+function renderHeaderHtml(rowFields, rows, columns, values, showTotals) {
+    const rowFieldCount = rowFields.length;
+    const firstRowHeaders = rowFieldCount
+        ? rowFields.map((field) => `<th class="ce-pivotgrid__row-header" part="row-header" scope="col">${escapeHtml(field)}</th>`)
+        : "";
+    const firstRowColumns = columns
+        .map((column) => {
+        if (column.key === "__row_total") {
+            return `<th class="ce-pivotgrid__column-group" part="column-group" scope="col" colspan="${values.length}">Total</th>`;
+        }
+        const label = column.labels.length ? column.labels.join(" / ") : "Values";
+        return `<th class="ce-pivotgrid__column-group" part="column-group" scope="col" colspan="${values.length}">${escapeHtml(label)}</th>`;
+    })
+        .join("");
+    const secondRowHeaders = rowFieldCount
+        ? rowFields.map((field) => `<th class="ce-pivotgrid__row-header" part="row-header" scope="col">${escapeHtml(field)}</th>`).join("")
+        : "";
+    const secondRowColumns = columns
+        .map((column) => values
+        .map((valueField) => {
+        const label = column.key === "__row_total" ? `Total (${valueField.label ?? valueField.field})` : valueField.label ?? valueField.field;
+        return `<th class="ce-pivotgrid__value-header" part="value-header" scope="col">${escapeHtml(label)}</th>`;
+    })
+        .join(""))
+        .join("");
+    const firstRow = `<tr>${typeof firstRowHeaders === "string" ? firstRowHeaders : firstRowHeaders.join("")}${firstRowColumns}</tr>`;
+    const secondRow = `<tr>${secondRowHeaders}${secondRowColumns}</tr>`;
+    return `${firstRow}\n${secondRow}`;
+}
+function renderBody(dom, model, showTotals) {
+    dom.tbody.innerHTML = renderBodyHtml(model, showTotals);
+}
+function renderBodyVirtual(dom, model, showTotals, props) {
+    const rowHeight = props.rowHeight ?? DEFAULT_PIVOT_PROPS.rowHeight ?? 36;
+    const viewportHeight = dom.tableWrapper.clientHeight || props.viewportHeight || DEFAULT_PIVOT_PROPS.viewportHeight || 360;
+    const rows = model.rows.filter((row) => row.key !== "__column_total");
+    const range = computeVirtualRange({
+        itemCount: rows.length,
+        itemHeight: rowHeight,
+        viewportHeight,
+        scrollTop: dom.tableWrapper.scrollTop,
+        overscan: props.overscan ?? DEFAULT_PIVOT_PROPS.overscan ?? 4,
+    });
+    if (!rows.length || !model.columns.length || !model.values.length) {
+        dom.tbody.innerHTML = "";
+        return range;
+    }
+    const rowLabelCount = rows[0]?.labels.length ?? 1;
+    const columnCount = rowLabelCount + model.columns.length * model.values.length;
+    const topSpacer = range.offset > 0
+        ? `<tr class="ce-pivotgrid__spacer" aria-hidden="true"><td colspan="${columnCount}" style="height:${range.offset}px"></td></tr>`
+        : "";
+    const visibleCount = range.end - range.start;
+    const bottomHeight = Math.max(0, range.totalHeight - range.offset - visibleCount * rowHeight);
+    const bottomSpacer = bottomHeight > 0
+        ? `<tr class="ce-pivotgrid__spacer" aria-hidden="true"><td colspan="${columnCount}" style="height:${bottomHeight}px"></td></tr>`
+        : "";
+    const rowsHtml = rows
+        .slice(range.start, range.end)
+        .map((row, offset) => {
+        const rowIndex = range.start + offset;
+        const labels = row.labels
+            .map((label) => `<th class="ce-pivotgrid__row-label" part="row-label" scope="row">${escapeHtml(label)}</th>`)
+            .join("");
+        const values = model.columns
+            .map((column) => model.values
+            .map((valueField) => {
+            const cell = model.cells.find((entry) => entry.rowKey === row.key && entry.columnKey === column.key && entry.valueField === valueField.field);
+            const isTotal = column.key === "__row_total" || cell?.isTotal;
+            return `<td class="ce-pivotgrid__value${isTotal ? " ce-pivotgrid__value--total" : ""}" part="value" data-column="${column.key}" data-field="${valueField.field}">${escapeHtml(cell?.formatted ?? "")}</td>`;
+        })
+            .join(""))
+            .join("");
+        return `<tr data-row-index="${rowIndex}" tabindex="${rowIndex === range.start ? "0" : "-1"}">${labels}${values}</tr>`;
+    })
+        .join("\n");
+    let totalsRow = "";
+    if (showTotals) {
+        const totalsRowCells = model.columns
+            .filter((column) => column.key !== "__row_total")
+            .map((column) => model.values
+            .map((valueField) => {
+            const cell = model.cells.find((entry) => entry.rowKey === "__column_total" && entry.columnKey === column.key && entry.valueField === valueField.field);
+            return `<td class="ce-pivotgrid__value ce-pivotgrid__value--total" part="value" data-column="${column.key}" data-field="${valueField.field}">${escapeHtml(cell?.formatted ?? "")}</td>`;
+        })
+            .join(""))
+            .join("");
+        const rowTotalsRow = model.values
+            .map((valueField) => {
+            const grand = model.cells.find((entry) => entry.rowKey === "__column_total" && entry.columnKey === "__row_total" && entry.valueField === valueField.field);
+            return `<td class="ce-pivotgrid__value ce-pivotgrid__value--total" part="value" data-column="__grand__" data-field="${valueField.field}">${escapeHtml(grand?.formatted ?? "")}</td>`;
+        })
+            .join("");
+        const span = rowLabelCount;
+        totalsRow = `<tr class="ce-pivotgrid__totals-row" part="totals-row"><th class="ce-pivotgrid__row-label" part="row-label" scope="row" colspan="${span}">Total</th>${totalsRowCells}${rowTotalsRow}</tr>`;
+    }
+    dom.tbody.innerHTML = `${topSpacer}${rowsHtml}${bottomSpacer}${totalsRow}`;
+    return range;
+}
+function renderBodyHtml(model, showTotals) {
+    if (!model.rows.length || !model.columns.length || !model.values.length) {
+        return "";
+    }
+    const rowsHtml = model.rows
+        .filter((row) => row.key !== "__column_total")
+        .map((row, rowIndex) => {
+        const labels = row.labels
+            .map((label) => `<th class="ce-pivotgrid__row-label" part="row-label" scope="row">${escapeHtml(label)}</th>`)
+            .join("");
+        const values = model.columns
+            .map((column) => model.values
+            .map((valueField) => {
+            const cell = model.cells.find((entry) => entry.rowKey === row.key && entry.columnKey === column.key && entry.valueField === valueField.field);
+            const isTotal = column.key === "__row_total" || cell?.isTotal;
+            return `<td class="ce-pivotgrid__value${isTotal ? " ce-pivotgrid__value--total" : ""}" part="value" data-column="${column.key}" data-field="${valueField.field}">${escapeHtml(cell?.formatted ?? "")}</td>`;
+        })
+            .join(""))
+            .join("");
+        return `<tr data-row-index="${rowIndex}" tabindex="${rowIndex === 0 ? "0" : "-1"}">${labels}${values}</tr>`;
+    })
+        .join("\n");
+    if (!showTotals) {
+        return rowsHtml;
+    }
+    const totalsRowCells = model.columns
+        .filter((column) => column.key !== "__row_total")
+        .map((column) => model.values
+        .map((valueField) => {
+        const cell = model.cells.find((entry) => entry.rowKey === "__column_total" && entry.columnKey === column.key && entry.valueField === valueField.field);
+        return `<td class="ce-pivotgrid__value ce-pivotgrid__value--total" part="value" data-column="${column.key}" data-field="${valueField.field}">${escapeHtml(cell?.formatted ?? "")}</td>`;
+    })
+        .join(""))
+        .join("");
+    const rowTotalsRow = model.values
+        .map((valueField) => {
+        const grand = model.cells.find((entry) => entry.rowKey === "__column_total" && entry.columnKey === "__row_total" && entry.valueField === valueField.field);
+        return `<td class="ce-pivotgrid__value ce-pivotgrid__value--total" part="value" data-column="__grand__" data-field="${valueField.field}">${escapeHtml(grand?.formatted ?? "")}</td>`;
+    })
+        .join("");
+    const span = model.rows[0]?.labels.length ?? 1;
+    const totalsRow = `<tr class="ce-pivotgrid__totals-row" part="totals-row"><th class="ce-pivotgrid__row-label" part="row-label" scope="row" colspan="${span}">Total</th>${totalsRowCells}${rowTotalsRow}</tr>`;
+    return `${rowsHtml}\n${totalsRow}`;
+}
+function renderEmpty(dom, isEmpty, label) {
+    dom.empty.hidden = !isEmpty;
+    dom.empty.textContent = label;
+}
+function renderState(dom, props, isEmpty) {
+    const loading = Boolean(props.loading);
+    const error = Boolean(props.error);
+    const empty = !loading && !error && isEmpty;
+    dom.container.dataset.state = loading ? "loading" : error ? "error" : empty ? "empty" : "ready";
+    dom.container.setAttribute("aria-busy", loading ? "true" : "false");
+    dom.loading.hidden = !loading;
+    dom.error.hidden = !error;
+    if (loading) {
+        dom.loading.textContent = props.loadingLabel ?? DEFAULT_PIVOT_PROPS.loadingLabel ?? "Loading...";
+    }
+    if (error) {
+        dom.error.textContent = props.errorMessage ?? DEFAULT_PIVOT_PROPS.errorMessage ?? "Something went wrong";
+    }
+    dom.empty.hidden = !empty;
+    dom.tableWrapper.toggleAttribute("hidden", loading || error);
+}
+function buildPivotClassNames(props) {
+    const classes = ["ce-pivotgrid"];
+    if (props.theme === "dark") {
+        classes.push("ce-pivotgrid--dark");
+    }
+    if (props.density === "compact") {
+        classes.push("ce-pivotgrid--compact");
+    }
+    if (props.density === "dense") {
+        classes.push("ce-pivotgrid--dense");
+    }
+    return classes.join(" ");
+}
+function setRovingRowIndex(tbody, active) {
+    tbody.querySelectorAll("tr[data-row-index]").forEach((row) => {
+        row.tabIndex = row === active ? 0 : -1;
+    });
+}
+function getPivotRowCount(model) {
+    return model.rows.filter((row) => row.key !== "__column_total").length;
+}
+function focusVirtualRow(dom, model, props, index) {
+    const rowCount = getPivotRowCount(model);
+    if (rowCount <= 0) {
+        return;
+    }
+    const clamped = Math.max(0, Math.min(rowCount - 1, index));
+    const rowHeight = props.rowHeight ?? DEFAULT_PIVOT_PROPS.rowHeight ?? 36;
+    dom.tableWrapper.scrollTop = clamped * rowHeight;
+    renderBodyVirtual(dom, model, Boolean(props.showTotals), props);
+    const row = dom.tbody.querySelector(`tr[data-row-index="${clamped}"]`);
+    row?.focus();
+}
+function normalizeValueFields(fields) {
+    if (!Array.isArray(fields)) {
+        return [];
+    }
+    return fields
+        .filter((field) => Boolean(field?.field && field.aggregator))
+        .map((field) => ({
+        ...field,
+        label: field.label ?? field.field,
+        format: field.format,
+    }));
+}
+function orderValues(values, order) {
+    if (!order || order.length === 0) {
+        return values;
+    }
+    const rank = new Map(order.map((field, index) => [field, index]));
+    return [...values].sort((a, b) => {
+        const ai = rank.has(a.field) ? rank.get(a.field) : Number.MAX_SAFE_INTEGER;
+        const bi = rank.has(b.field) ? rank.get(b.field) : Number.MAX_SAFE_INTEGER;
+        return ai - bi;
+    });
+}
+function ensureBucket(root, rowKey, columnKey, valueField) {
+    let rowBuckets = root.get(rowKey);
+    if (!rowBuckets) {
+        rowBuckets = new Map();
+        root.set(rowKey, rowBuckets);
+    }
+    let columnBuckets = rowBuckets.get(columnKey);
+    if (!columnBuckets) {
+        columnBuckets = new Map();
+        rowBuckets.set(columnKey, columnBuckets);
+    }
+    let bucket = columnBuckets.get(valueField);
+    if (!bucket) {
+        bucket = { count: 0, sum: 0, min: null, max: null };
+        columnBuckets.set(valueField, bucket);
+    }
+    return bucket;
+}
+function ensureGrand(root, valueField) {
+    let bucket = root.get(valueField);
+    if (!bucket) {
+        bucket = { count: 0, sum: 0, min: null, max: null };
+        root.set(valueField, bucket);
+    }
+    return bucket;
+}
+function accumulate(bucket, value, aggregator) {
+    if (aggregator === "count") {
+        bucket.count += 1;
+        return;
+    }
+    if (value === null) {
+        return;
+    }
+    bucket.count += 1;
+    bucket.sum += value;
+    bucket.min = bucket.min === null ? value : Math.min(bucket.min, value);
+    bucket.max = bucket.max === null ? value : Math.max(bucket.max, value);
+}
+function computeValue(bucket, aggregator) {
+    switch (aggregator) {
+        case "avg":
+            return bucket.count === 0 ? 0 : bucket.sum / bucket.count;
+        case "min":
+            return bucket.min ?? 0;
+        case "max":
+            return bucket.max ?? 0;
+        case "count":
+            return bucket.count;
+        case "sum":
+        default:
+            return bucket.sum;
+    }
+}
+function stringifyValue(value) {
+    if (value instanceof Date) {
+        return value.toISOString().split("T")[0];
+    }
+    if (value === null || value === undefined) {
+        return "";
+    }
+    return String(value);
+}
+function toNumber(value) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const num = Number(value);
+    return Number.isNaN(num) ? null : num;
+}
+function formatValue(value, format) {
+    if (value === null || value === undefined) {
+        return "";
+    }
+    if (!format) {
+        return formatNumber(value, { maximumFractionDigits: 2 }, getLocale());
+    }
+    const { locale, ...options } = format;
+    return formatNumber(value, options, locale ?? getLocale());
+}
+const HTML_ESCAPE_LOOKUP = {
+    "&": "&amp;",
+    '"': "&quot;",
+    "'": "&#39;",
+    "<": "&lt;",
+    ">": "&gt;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&"'<>]/g, (char) => HTML_ESCAPE_LOOKUP[char] ?? char);
+}
+function parseBoolean(value) {
+    if (!value) {
+        return undefined;
+    }
+    if (value === "true") {
+        return true;
+    }
+    if (value === "false") {
+        return false;
+    }
+    return undefined;
+}
+//# sourceMappingURL=pivot-grid.js.map