@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/combobox.js

@@ -0,0 +1,123 @@
+import { ComboBox } from "../ComboBox/ComboBox.js";
+import { registerIconElement } from "../Icon/CeIcon.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_COMBOBOX_PROPS = {
+    options: [],
+    placeholder: "Search...",
+    searchable: true,
+};
+const COMBOBOX_PROP_DEFINITIONS = [
+    { attribute: "options", prop: "options", type: "json" },
+    { attribute: "placeholder", prop: "placeholder" },
+    { attribute: "searchable", prop: "searchable", type: "boolean" },
+];
+let comboBoxId = 0;
+const applyComboBoxParts = (wrapper) => {
+    const root = wrapper.matches?.(".ce-combobox") ? wrapper : wrapper.querySelector(".ce-combobox");
+    if (!root) {
+        return;
+    }
+    root.setAttribute("data-ce-component", "combobox");
+    root.setAttribute("part", "base");
+    root.querySelectorAll(".ce-combobox__input").forEach((node) => node.setAttribute("part", "input"));
+    root.querySelectorAll(".ce-combobox__icon").forEach((node) => node.setAttribute("part", "icon"));
+    root.querySelectorAll(".ce-combobox__list").forEach((node) => node.setAttribute("part", "list"));
+    root.querySelectorAll(".ce-combobox__option").forEach((node) => node.setAttribute("part", "option"));
+};
+const comboBoxComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-combobox");
+        const elementId = existingWrapper?.id || `ce-combobox-${++comboBoxId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_COMBOBOX_PROPS, ...props };
+        if (existingWrapper) {
+            const input = existingWrapper.querySelector(".ce-combobox__input");
+            if (shouldUseDomValue(host, "placeholder", input?.getAttribute("placeholder"))) {
+                currentProps.placeholder = input?.getAttribute("placeholder") ?? "Search...";
+            }
+            const options = Array.from(existingWrapper.querySelectorAll(".ce-combobox__option")).map((item) => ({
+                label: item.textContent ?? "",
+                value: item.textContent ?? "",
+            }));
+            if (shouldUseDomValue(host, "options", options)) {
+                currentProps.options = options;
+            }
+        }
+        let instance = createInstance(wrapper, currentProps);
+        const destroy = () => {
+            instance?.destroy?.();
+            instance = undefined;
+            if (!existingWrapper) {
+                host.innerHTML = "";
+            }
+        };
+        const updateProps = (partial) => {
+            currentProps = { ...currentProps, ...partial };
+            instance?.destroy?.();
+            instance = createInstance(wrapper, currentProps);
+        };
+        function createInstance(container, propsToUse) {
+            if (!propsToUse.options?.length) {
+                if (container) {
+                    container.innerHTML = "";
+                }
+                else {
+                    host.innerHTML = "";
+                }
+                return undefined;
+            }
+            if (!container) {
+                host.innerHTML = "";
+                const nextWrapper = document.createElement("div");
+                nextWrapper.id = elementId;
+                host.appendChild(nextWrapper);
+                wrapper = nextWrapper;
+            }
+            else {
+                if (!container.id) {
+                    container.id = elementId;
+                }
+                if (!container.classList.contains("ce-combobox")) {
+                    container.classList.add("ce-combobox");
+                }
+            }
+            const instance = new ComboBox({
+                ...propsToUse,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper),
+                onSelect: (option) => on?.select?.({ option }),
+            });
+            instance.init();
+            applyComboBoxParts(wrapper ?? host);
+            return instance;
+        }
+        return {
+            destroy,
+            updateProps(partial) {
+                updateProps(partial ?? {});
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_COMBOBOX_PROPS, ...props };
+        const options = merged.options
+            ?.map((opt) => `<div class="ce-combobox__option" part="option">${opt.label}</div>`)
+            .join("") ?? "";
+        return `<div class="ce-combobox" data-ce-component="combobox" part="base"><input class="ce-combobox__input" part="input" placeholder="${merged.placeholder ?? ""}" /><span class="ce-combobox__icon" part="icon" aria-hidden="true"><ce-icon name="chevron-down" size="16" aria-hidden="true"></ce-icon></span><div class="ce-combobox__list" part="list">${options}</div></div>`;
+    },
+};
+export function registerComboBoxElement() {
+    registerIconElement();
+    return defineComponentElement({
+        tag: "ce-combobox",
+        component: comboBoxComponent,
+        props: COMBOBOX_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_COMBOBOX_PROPS,
+        shadow: false,
+        events: ["select"],
+        preserveLightDom: true,
+    });
+}
+//# sourceMappingURL=combobox.js.map

package/dist/components/web-components/combobox.js.map

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

package/dist/components/web-components/context-menu.d.ts

@@ -0,0 +1,9 @@
+import type { ContextMenuEventContext, ContextMenuOptions } from "../ContextMenu/ContextMenu.types.js";
+export interface ContextMenuProps extends Omit<ContextMenuOptions, "selector" | "onOpen" | "onClose">, Record<string, unknown> {
+}
+export interface ContextMenuOpenDetail extends ContextMenuEventContext {
+}
+export interface ContextMenuCloseDetail {
+}
+export declare function registerContextMenuElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/web-components/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../components/web-components/context-menu.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,uBAAuB,EAEvB,kBAAkB,EACnB,MAAM,qCAAqC,CAAC;AAI7C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAAG;AAEjI,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB;CAAG;AACzE,MAAM,WAAW,sBAAsB;CAAG;AA8K1C,wBAAgB,0BAA0B,IAAI,wBAAwB,GAAG,SAAS,CAUjF"}

package/dist/components/web-components/context-menu.js

@@ -0,0 +1,172 @@
+import { ContextMenu } from "../ContextMenu/ContextMenu.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_CONTEXT_MENU_PROPS = {
+    items: [],
+    theme: "light",
+    trigger: "contextmenu",
+    closeOnSelect: true,
+    preventDefault: undefined,
+    offset: 8,
+    restoreFocus: true,
+    ariaLabel: "Context menu",
+    triggerSelector: undefined,
+};
+const CONTEXT_MENU_PROP_DEFINITIONS = [
+    { attribute: "items", prop: "items", type: "json" },
+    { attribute: "theme", prop: "theme" },
+    { attribute: "trigger", prop: "trigger" },
+    { attribute: "close-on-select", prop: "closeOnSelect", type: "boolean" },
+    { attribute: "prevent-default", prop: "preventDefault", type: "boolean" },
+    { attribute: "offset", prop: "offset", type: "number" },
+    { attribute: "restore-focus", prop: "restoreFocus", type: "boolean" },
+    { attribute: "aria-label", prop: "ariaLabel" },
+    { attribute: "trigger-selector", prop: "triggerSelector" },
+];
+let contextMenuId = 0;
+const applyContextMenuParts = (wrapper) => {
+    const root = wrapper.matches?.(".ce-context-menu") ? wrapper : wrapper.querySelector(".ce-context-menu");
+    if (!root) {
+        return;
+    }
+    root.setAttribute("data-ce-component", "context-menu");
+    root.setAttribute("part", "base");
+    root.querySelectorAll(".ce-context-menu__divider").forEach((node) => node.setAttribute("part", "divider"));
+    root.querySelectorAll(".ce-context-menu__section").forEach((node) => node.setAttribute("part", "section"));
+    root
+        .querySelectorAll(".ce-context-menu__section-label")
+        .forEach((node) => node.setAttribute("part", "section-label"));
+    root
+        .querySelectorAll(".ce-context-menu__section-description")
+        .forEach((node) => node.setAttribute("part", "section-description"));
+    root.querySelectorAll(".ce-context-menu__item").forEach((node) => node.setAttribute("part", "item"));
+};
+const parseContextMenuItems = (wrapper) => {
+    if (!wrapper) {
+        return [];
+    }
+    const parseNodes = (container) => {
+        const nodes = Array.from(container.children);
+        return nodes.flatMap((node) => {
+            if (node.classList.contains("ce-context-menu__divider")) {
+                return [{ type: "divider" }];
+            }
+            if (node.classList.contains("ce-context-menu__section")) {
+                const label = node.querySelector(".ce-context-menu__section-label")?.textContent?.trim() ??
+                    undefined;
+                const description = node.querySelector(".ce-context-menu__section-description")?.textContent?.trim() ??
+                    undefined;
+                return [
+                    {
+                        type: "section",
+                        label,
+                        description,
+                        items: parseNodes(node),
+                    },
+                ];
+            }
+            if (node.classList.contains("ce-context-menu__item")) {
+                return [
+                    {
+                        label: node.textContent?.trim() ?? "",
+                    },
+                ];
+            }
+            return [];
+        });
+    };
+    return parseNodes(wrapper);
+};
+const contextMenuComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-context-menu");
+        const elementId = existingWrapper?.id || `ce-context-menu-${++contextMenuId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_CONTEXT_MENU_PROPS, ...props };
+        if (existingWrapper) {
+            const parsedItems = parseContextMenuItems(existingWrapper);
+            if (shouldUseDomValue(host, "items", parsedItems)) {
+                currentProps.items = parsedItems;
+            }
+            if (shouldUseDomValue(host, "theme", existingWrapper.classList.contains("ce-context-menu--dark") ? "dark" : "light")) {
+                currentProps.theme = existingWrapper.classList.contains("ce-context-menu--dark") ? "dark" : "light";
+            }
+        }
+        let instance;
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-context-menu")) {
+                    wrapper.classList.add("ce-context-menu");
+                }
+            }
+            instance?.destroy?.();
+            instance = new ContextMenu({
+                ...currentProps,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper),
+                onOpen: (detail) => on?.open?.(detail),
+                onClose: () => on?.close?.({}),
+            });
+            instance.init();
+            applyContextMenuParts(wrapper);
+        };
+        render();
+        return {
+            destroy() {
+                instance?.destroy?.();
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...(partial ?? {}) };
+                render();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_CONTEXT_MENU_PROPS, ...(props ?? {}) };
+        const items = Array.isArray(merged.items) ? merged.items : [];
+        const renderItems = (entries) => entries
+            .map((item) => {
+            if (item.type === "divider") {
+                return `<div class="ce-context-menu__divider" part="divider" role="separator"></div>`;
+            }
+            if (item.type === "section") {
+                const section = item;
+                const label = section.label ? `<p class="ce-context-menu__section-label" part="section-label">${section.label}</p>` : "";
+                const description = section.description
+                    ? `<p class="ce-context-menu__section-description" part="section-description">${section.description}</p>`
+                    : "";
+                return `<div class="ce-context-menu__section" part="section" role="none">${label}${description}${renderItems(section.items)}</div>`;
+            }
+            const action = item;
+            return `<button class="ce-context-menu__item" part="item" role="menuitem">${action.label ?? ""}</button>`;
+        })
+            .join("");
+        const themeClass = merged.theme === "dark" ? " ce-context-menu--dark" : "";
+        return `<div class="ce-context-menu${themeClass}" data-ce-component="context-menu" part="base" role="menu">${renderItems(items)}</div>`;
+    },
+};
+export function registerContextMenuElement() {
+    return defineComponentElement({
+        tag: "ce-context-menu",
+        component: contextMenuComponent,
+        props: CONTEXT_MENU_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_CONTEXT_MENU_PROPS,
+        shadow: false,
+        events: ["open", "close"],
+        preserveLightDom: true,
+    });
+}
+//# sourceMappingURL=context-menu.js.map

package/dist/components/web-components/context-menu.js.map

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

package/dist/components/web-components/datatable-pro.d.ts

@@ -0,0 +1,13 @@
+import type { DataTableProExportFormat, DataTableProOptions } from "../DataTablePro/DataTablePro.types.js";
+export interface DataTableProProps extends Omit<DataTableProOptions, "selector" | "onExport" | "onRowClick">, Record<string, unknown> {
+}
+export interface DataTableProExportDetail {
+    format: DataTableProExportFormat;
+    payload: string;
+}
+export interface DataTableProRowClickDetail {
+    row: Record<string, unknown>;
+    index: number;
+}
+export declare function registerDataTableProElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=datatable-pro.d.ts.map

package/dist/components/web-components/datatable-pro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datatable-pro.d.ts","sourceRoot":"","sources":["../../../components/web-components/datatable-pro.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAI/H,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAAG;AAExI,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,wBAAwB,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AA6OD,wBAAgB,2BAA2B,IAAI,wBAAwB,GAAG,SAAS,CAUlF"}

package/dist/components/web-components/datatable-pro.js

@@ -0,0 +1,308 @@
+import { DataTablePro } from "../DataTablePro/DataTablePro.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { readDataAttr, readNumberDataAttr, shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_DATATABLE_PRO_PROPS = {
+    columns: [],
+    data: [],
+    title: "Data table",
+    height: 360,
+    rowHeight: 40,
+    filters: undefined,
+    exports: ["csv", "json"],
+};
+const DATATABLE_PRO_PROP_DEFINITIONS = [
+    { attribute: "columns", prop: "columns", type: "json" },
+    { attribute: "data", prop: "data", type: "json" },
+    { attribute: "title", prop: "title" },
+    { attribute: "height", prop: "height", type: "number" },
+    { attribute: "row-height", prop: "rowHeight", type: "number" },
+    { attribute: "filters", prop: "filters", type: "json" },
+    { attribute: "exports", prop: "exports", type: "json" },
+];
+let dataTableProId = 0;
+const applyDataTableProParts = (wrapper) => {
+    const root = wrapper.matches?.(".ce-datatable-pro") ? wrapper : wrapper.querySelector(".ce-datatable-pro");
+    if (!root) {
+        return;
+    }
+    root.setAttribute("data-ce-component", "datatable-pro");
+    root.setAttribute("part", "base");
+    root.querySelectorAll(".ce-datatable-pro__toolbar").forEach((node) => node.setAttribute("part", "toolbar"));
+    root.querySelectorAll(".ce-datatable-pro__title").forEach((node) => node.setAttribute("part", "title"));
+    root.querySelectorAll(".ce-datatable-pro__meta").forEach((node) => node.setAttribute("part", "meta"));
+    root.querySelectorAll(".ce-datatable-pro__actions").forEach((node) => { node.setAttribute("part", "actions"); node.setAttribute("data-ce-slot", "actions"); });
+    root.querySelectorAll(".ce-datatable-pro__action").forEach((node) => node.setAttribute("part", "action"));
+    root.querySelectorAll(".ce-datatable-pro__header").forEach((node) => { node.setAttribute("part", "header"); node.setAttribute("data-ce-slot", "header"); });
+    root.querySelectorAll(".ce-datatable-pro__viewport").forEach((node) => node.setAttribute("part", "viewport"));
+    root.querySelectorAll(".ce-datatable-pro__spacer").forEach((node) => node.setAttribute("part", "spacer"));
+    root.querySelectorAll(".ce-datatable-pro__rows").forEach((node) => node.setAttribute("part", "rows"));
+    root.querySelectorAll(".ce-datatable-pro__filter").forEach((node) => node.setAttribute("part", "filter"));
+    root.querySelectorAll(".ce-datatable-pro__row").forEach((node) => {
+        const parts = ["row"];
+        if (node.classList.contains("ce-datatable-pro__row--header")) {
+            parts.push("header-row");
+        }
+        if (node.classList.contains("ce-datatable-pro__row--filters")) {
+            parts.push("filter-row");
+        }
+        node.setAttribute("part", parts.join(" "));
+    });
+    root.querySelectorAll(".ce-datatable-pro__cell").forEach((node) => {
+        const parts = ["cell"];
+        if (node.classList.contains("ce-datatable-pro__cell--header")) {
+            parts.push("header-cell");
+        }
+        if (node.classList.contains("ce-datatable-pro__cell--filter")) {
+            parts.push("filter-cell");
+        }
+        node.setAttribute("part", parts.join(" "));
+    });
+};
+const dataTableProComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-datatable-pro");
+        const elementId = existingWrapper?.id || `ce-datatable-pro-${++dataTableProId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_DATATABLE_PRO_PROPS, ...props };
+        if (existingWrapper) {
+            const dataColumns = readDataAttr(existingWrapper, "columns");
+            if (shouldUseDomValue(host, "columns", dataColumns)) {
+                try {
+                    currentProps.columns = JSON.parse(dataColumns ?? "[]");
+                }
+                catch {
+                    currentProps.columns = DEFAULT_DATATABLE_PRO_PROPS.columns;
+                }
+            }
+            const dataRows = readDataAttr(existingWrapper, "rows");
+            if (shouldUseDomValue(host, "data", dataRows)) {
+                try {
+                    currentProps.data = JSON.parse(dataRows ?? "[]");
+                }
+                catch {
+                    currentProps.data = DEFAULT_DATATABLE_PRO_PROPS.data;
+                }
+            }
+            const dataTitle = readDataAttr(existingWrapper, "title");
+            const domTitle = existingWrapper.querySelector(".ce-datatable-pro__title")?.textContent?.trim();
+            if (shouldUseDomValue(host, "title", dataTitle ?? domTitle)) {
+                currentProps.title = dataTitle ?? domTitle ?? DEFAULT_DATATABLE_PRO_PROPS.title;
+            }
+            const dataFilters = readDataAttr(existingWrapper, "filters");
+            if (shouldUseDomValue(host, "filters", dataFilters)) {
+                try {
+                    currentProps.filters = JSON.parse(dataFilters ?? "{}");
+                }
+                catch {
+                    currentProps.filters = DEFAULT_DATATABLE_PRO_PROPS.filters;
+                }
+            }
+            else {
+                const domFilters = readFiltersFromDom(existingWrapper);
+                if (shouldUseDomValue(host, "filters", domFilters) && Object.keys(domFilters).length) {
+                    currentProps.filters = domFilters;
+                }
+            }
+            const dataExports = readDataAttr(existingWrapper, "exports");
+            if (shouldUseDomValue(host, "exports", dataExports)) {
+                try {
+                    currentProps.exports = JSON.parse(dataExports ?? "[]");
+                }
+                catch {
+                    currentProps.exports = DEFAULT_DATATABLE_PRO_PROPS.exports;
+                }
+            }
+            const dataHeight = readNumberDataAttr(existingWrapper, "height");
+            if (shouldUseDomValue(host, "height", dataHeight)) {
+                currentProps.height = dataHeight ?? DEFAULT_DATATABLE_PRO_PROPS.height;
+            }
+            const dataRowHeight = readNumberDataAttr(existingWrapper, "row-height");
+            if (shouldUseDomValue(host, "row-height", dataRowHeight)) {
+                currentProps.rowHeight = dataRowHeight ?? DEFAULT_DATATABLE_PRO_PROPS.rowHeight;
+            }
+        }
+        let instance;
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-datatable-pro")) {
+                    wrapper.classList.add("ce-datatable-pro");
+                }
+            }
+            instance?.destroy?.();
+            instance = new DataTablePro({
+                ...currentProps,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper && wrapper === existingWrapper),
+                onExport: (format, payload) => on?.export?.({ format, payload }),
+                onRowClick: (row, index) => on?.rowClick?.({ row, index }),
+            });
+            instance.init();
+            applyDataTableProParts(wrapper);
+        };
+        render();
+        return {
+            destroy() {
+                instance?.destroy?.();
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...(partial ?? {}) };
+                render();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_DATATABLE_PRO_PROPS, ...(props ?? {}) };
+        const columns = merged.columns ?? [];
+        const data = merged.data ?? [];
+        const rowHeight = merged.rowHeight ?? DEFAULT_DATATABLE_PRO_PROPS.rowHeight ?? 40;
+        const height = merged.height ?? DEFAULT_DATATABLE_PRO_PROPS.height ?? 360;
+        const filters = merged.filters ?? {};
+        const exports = merged.exports ?? [];
+        const layout = computeLayout(columns);
+        const template = layout.map((col) => col.grid).join(" ");
+        const headerRow = `<div class="ce-datatable-pro__row ce-datatable-pro__row--header" part="row header-row" style="grid-template-columns:${template};--row-height:${rowHeight}px">${layout
+            .map((col) => renderCell(col.column.header, col, "ce-datatable-pro__cell ce-datatable-pro__cell--header", "cell header-cell"))
+            .join("")}</div>`;
+        const filterRow = layout.some((col) => col.column.filterable)
+            ? `<div class="ce-datatable-pro__row ce-datatable-pro__row--filters" part="row filter-row" style="grid-template-columns:${template};--row-height:${rowHeight}px">${layout
+                .map((col) => {
+                if (!col.column.filterable) {
+                    return renderCell("", col, "ce-datatable-pro__cell ce-datatable-pro__cell--filter", "cell filter-cell");
+                }
+                const value = escapeHtml(filters[col.column.field] ?? "");
+                const input = `<input class="ce-datatable-pro__filter" data-field="${escapeHtml(col.column.field)}" part="filter" type="text" placeholder="Filter" value="${value}" />`;
+                return renderCell(input, col, "ce-datatable-pro__cell ce-datatable-pro__cell--filter", "cell filter-cell");
+            })
+                .join("")}</div>`
+            : "";
+        const visibleCount = Math.ceil(height / rowHeight) + 4;
+        const visibleRows = data.slice(0, visibleCount);
+        const rows = visibleRows
+            .map((row, index) => {
+            const cells = layout
+                .map((col) => renderCell(String(row[col.column.field] ?? ""), col, "ce-datatable-pro__cell", "cell"))
+                .join("");
+            return `<div class="ce-datatable-pro__row" part="row" data-index="${index}" style="grid-template-columns:${template};--row-height:${rowHeight}px">${cells}</div>`;
+        })
+            .join("");
+        const dataColumns = escapeHtml(JSON.stringify(columns));
+        const dataRows = escapeHtml(JSON.stringify(data));
+        const dataFilters = escapeHtml(JSON.stringify(filters));
+        const dataExports = escapeHtml(JSON.stringify(exports));
+        const dataAttrs = ` data-columns="${dataColumns}" data-rows="${dataRows}" data-title="${escapeHtml(merged.title ?? "Data table")}" data-height="${height}" data-row-height="${rowHeight}" data-filters="${dataFilters}" data-exports="${dataExports}"`;
+        const actions = exports
+            .map((format) => {
+            const label = format === "csv" ? "Export CSV" : "Export JSON";
+            return `<button type="button" class="ce-datatable-pro__action" part="action" data-action="export-${escapeHtml(format)}">${label}</button>`;
+        })
+            .join("");
+        return `<section class="ce-datatable-pro" data-ce-component="datatable-pro" part="base"${dataAttrs}>
+  <div class="ce-datatable-pro__toolbar" part="toolbar">
+    <div class="ce-datatable-pro__title" part="title">${escapeHtml(merged.title ?? "Data table")}</div>
+    <div class="ce-datatable-pro__meta" part="meta">${data.length === 1 ? "1 row" : `${data.length} rows`}</div>
+    <div class="ce-datatable-pro__actions" part="actions" data-ce-slot="actions">${actions}</div>
+  </div>
+  <div class="ce-datatable-pro__header" part="header" data-ce-slot="header">${headerRow}${filterRow}</div>
+  <div class="ce-datatable-pro__viewport" part="viewport" style="height:${height}px">
+    <div class="ce-datatable-pro__spacer" part="spacer" style="height:${data.length * rowHeight}px"></div>
+    <div class="ce-datatable-pro__rows" part="rows" style="transform:translateY(0px)">${rows}</div>
+  </div>
+</section>`;
+    },
+};
+export function registerDataTableProElement() {
+    return defineComponentElement({
+        tag: "ce-datatable-pro",
+        component: dataTableProComponent,
+        props: DATATABLE_PRO_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_DATATABLE_PRO_PROPS,
+        shadow: false,
+        events: ["export", "rowClick"],
+        preserveLightDom: true,
+    });
+}
+const escapeHtml = (value) => value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+const renderCell = (content, layout, className, part = "cell") => {
+    const pinClass = layout.column.pinned ? ` is-pinned-${layout.column.pinned}` : "";
+    const alignStyle = layout.column.align ? `text-align:${layout.column.align};` : "";
+    const leftStyle = layout.column.pinned === "left" ? `left:${layout.left ?? 0}px;` : "";
+    const rightStyle = layout.column.pinned === "right" ? `right:${layout.right ?? 0}px;` : "";
+    return `<div class="${className}${pinClass}" part="${part}" style="${alignStyle}${leftStyle}${rightStyle}">${content}</div>`;
+};
+const computeLayout = (columns) => {
+    const widths = columns.map((col) => resolveColumnWidth(col));
+    const leftOffsets = [];
+    let runningLeft = 0;
+    columns.forEach((col, index) => {
+        if (col.pinned === "left") {
+            leftOffsets[index] = runningLeft;
+            runningLeft += widths[index];
+        }
+        else {
+            leftOffsets[index] = 0;
+        }
+    });
+    const rightOffsets = [];
+    let runningRight = 0;
+    for (let index = columns.length - 1; index >= 0; index -= 1) {
+        if (columns[index].pinned === "right") {
+            rightOffsets[index] = runningRight;
+            runningRight += widths[index];
+        }
+        else {
+            rightOffsets[index] = 0;
+        }
+    }
+    return columns.map((column, index) => ({
+        column,
+        width: widths[index],
+        grid: `${widths[index]}px`,
+        left: column.pinned === "left" ? leftOffsets[index] : undefined,
+        right: column.pinned === "right" ? rightOffsets[index] : undefined,
+    }));
+};
+const resolveColumnWidth = (column) => {
+    if (typeof column.width === "number") {
+        return column.width;
+    }
+    if (typeof column.width === "string") {
+        const trimmed = column.width.trim();
+        if (trimmed.endsWith("px")) {
+            const parsed = Number(trimmed.replace("px", ""));
+            if (Number.isFinite(parsed)) {
+                return parsed;
+            }
+        }
+    }
+    return 160;
+};
+const readFiltersFromDom = (wrapper) => {
+    const filters = {};
+    wrapper.querySelectorAll(".ce-datatable-pro__filter").forEach((input) => {
+        const field = input.dataset.field;
+        if (!field) {
+            return;
+        }
+        filters[field] = input.value;
+    });
+    return filters;
+};
+//# sourceMappingURL=datatable-pro.js.map