@arslankhan/doc-forge 0.0.0-stage → 0.1.1

package/dist/designer/InvoiceFields.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import type { ItemsElement, TotalsElement } from "../types.js";
+export declare function ItemsFields({ element, onCommit, onBlur, }: {
+    element: ItemsElement;
+    onCommit: (element: ItemsElement, coalesce?: boolean) => void;
+    onBlur: () => void;
+}): ReactElement;
+export declare function TotalsFields({ element, onCommit, onBlur, }: {
+    element: TotalsElement;
+    onCommit: (element: TotalsElement, coalesce?: boolean) => void;
+    onBlur: () => void;
+}): ReactElement;
+//# sourceMappingURL=InvoiceFields.d.ts.map

package/dist/designer/InvoiceFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceFields.d.ts","sourceRoot":"","sources":["../../src/designer/InvoiceFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAA4B,YAAY,EAAa,aAAa,EAA+B,MAAM,aAAa,CAAC;AAKjI,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,GAAG,YAAY,CA8Kf;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,GAAG,YAAY,CA2Ef"}

package/dist/designer/InvoiceFields.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { parseBindingPath } from "../binding-path.js";
+import { TEXT_ALIGNS } from "../types.js";
+const FORMATS = ["text", "decimal", "currency", "date"];
+export function ItemsFields({ element, onCommit, onBlur, }) {
+    const [itemsPath, setItemsPath] = useState(element.itemsPath);
+    useEffect(() => {
+        setItemsPath(element.itemsPath);
+    }, [element.id, element.itemsPath]);
+    function commitColumns(columns, coalesce = true) {
+        onCommit({ ...element, columns }, coalesce);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Items path" }), _jsx("input", { "aria-label": "Items path", value: itemsPath, spellCheck: false, onChange: (event) => {
+                            const next = event.target.value;
+                            setItemsPath(next);
+                            if (parseBindingPath(next).valid) {
+                                onCommit({ ...element, itemsPath: next }, true);
+                            }
+                        }, onBlur: onBlur })] }), _jsx("p", { className: "df-path-note", role: "status", children: parseBindingPath(itemsPath).valid ? "Path is valid." : "Use a path such as invoice.items." }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Empty text" }), _jsx("input", { "aria-label": "Empty items text", value: element.emptyText ?? "", onChange: (event) => onCommit({ ...element, emptyText: event.target.value }), onBlur: onBlur })] }), element.columns.map((column, index) => (_jsxs("fieldset", { className: "df-column", children: [_jsxs("legend", { children: ["Column ", index + 1] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Header" }), _jsx("input", { "aria-label": `Column ${index + 1} header`, value: column.header, onChange: (event) => commitColumns(replaceColumn(element.columns, index, { ...column, header: event.target.value })), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Item field" }), _jsx("input", { "aria-label": `Column ${index + 1} field`, value: column.binding.path, spellCheck: false, onChange: (event) => {
+                                    const path = event.target.value;
+                                    if (!parseBindingPath(path).valid) {
+                                        return;
+                                    }
+                                    commitColumns(replaceColumn(element.columns, index, { ...column, binding: { ...column.binding, path } }));
+                                }, onBlur: onBlur })] }), _jsxs("div", { className: "df-field-row", children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Width" }), _jsx("input", { "aria-label": `Column ${index + 1} width`, type: "number", min: 0.1, step: 0.1, value: column.width ?? 1, onChange: (event) => {
+                                            const width = Number(event.target.value);
+                                            if (Number.isFinite(width) && width > 0) {
+                                                commitColumns(replaceColumn(element.columns, index, { ...column, width }));
+                                            }
+                                        }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Align" }), _jsx("select", { "aria-label": `Column ${index + 1} alignment`, value: column.align ?? "left", onChange: (event) => commitColumns(replaceColumn(element.columns, index, { ...column, align: event.target.value }), false), children: TEXT_ALIGNS.map((align) => (_jsx("option", { value: align, children: align }, align))) })] })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Format" }), _jsx("select", { "aria-label": `Column ${index + 1} format`, value: column.binding.format?.style ?? "text", onChange: (event) => commitColumns(replaceColumn(element.columns, index, {
+                                    ...column,
+                                    binding: withFormat(column.binding, event.target.value),
+                                }), false), children: FORMATS.map((format) => (_jsx("option", { value: format, children: format }, format))) })] }), _jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": `Column ${index + 1} visible`, checked: column.visible !== false, onChange: (event) => commitColumns(replaceColumn(element.columns, index, { ...column, visible: event.target.checked }), false) }), "Visible"] }), element.columns.length > 1 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commitColumns(element.columns.filter((_, columnIndex) => columnIndex !== index), false), children: "Remove column" })) : null] }, column.id))), element.columns.length < 12 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commitColumns([
+                    ...element.columns,
+                    {
+                        id: nextColumnId(element.columns),
+                        header: "Column",
+                        binding: { path: "description" },
+                        width: 1,
+                    },
+                ], false), children: "Add column" })) : null] }));
+}
+export function TotalsFields({ element, onCommit, onBlur, }) {
+    function commitRows(rows, coalesce = true) {
+        onCommit({ ...element, rows }, coalesce);
+    }
+    return (_jsx(_Fragment, { children: element.rows.map((row, index) => (_jsxs("fieldset", { className: "df-column", children: [_jsx("legend", { children: row.label || `Total ${index + 1}` }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Label" }), _jsx("input", { "aria-label": `Total ${index + 1} label`, value: row.label, onChange: (event) => commitRows(replaceRow(element.rows, index, { ...row, label: event.target.value })), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Binding path" }), _jsx("input", { "aria-label": `Total ${index + 1} path`, value: row.binding.path, spellCheck: false, onChange: (event) => {
+                                const path = event.target.value;
+                                if (!parseBindingPath(path).valid) {
+                                    return;
+                                }
+                                commitRows(replaceRow(element.rows, index, { ...row, binding: { ...row.binding, path } }));
+                            }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Format" }), _jsx("select", { "aria-label": `Total ${index + 1} format`, value: row.binding.format?.style ?? "text", onChange: (event) => commitRows(replaceRow(element.rows, index, {
+                                ...row,
+                                binding: withFormat(row.binding, event.target.value),
+                            }), false), children: FORMATS.map((format) => (_jsx("option", { value: format, children: format }, format))) })] }), _jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": `Total ${index + 1} hide when zero`, checked: row.hideWhenZero === true, onChange: (event) => commitRows(replaceRow(element.rows, index, { ...row, hideWhenZero: event.target.checked }), false) }), "Hide when zero"] }), element.rows.length > 1 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commitRows(element.rows.filter((_, rowIndex) => rowIndex !== index), false), children: "Remove row" })) : null] }, row.id))) }));
+}
+function withFormat(binding, style) {
+    if (style === "text") {
+        const next = { ...binding };
+        delete next.format;
+        return next;
+    }
+    const formatStyle = style;
+    const format = formatStyle === "date" ? { style: formatStyle, dateStyle: "medium" } : { style: formatStyle, minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    return { ...binding, format };
+}
+function replaceColumn(columns, index, column) {
+    return columns.map((current, columnIndex) => (columnIndex === index ? column : current));
+}
+function replaceRow(rows, index, row) {
+    return rows.map((current, rowIndex) => (rowIndex === index ? row : current));
+}
+function nextColumnId(columns) {
+    const used = new Set(columns.map((column) => column.id));
+    let index = columns.length + 1;
+    let id = `column-${index}`;
+    while (used.has(id)) {
+        index += 1;
+        id = `column-${index}`;
+    }
+    return id;
+}
+//# sourceMappingURL=InvoiceFields.js.map

package/dist/designer/InvoiceFields.js.map

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

package/dist/designer/PreviewDataDialog.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+interface PreviewDataDialogProps {
+    json: string;
+    message: string;
+    valid: boolean;
+    onChange: (json: string) => void;
+    onLoadExample: () => void;
+    onApply: () => void;
+    onClose: () => void;
+}
+export declare function PreviewDataDialog({ json, message, valid, onChange, onLoadExample, onApply, onClose, }: PreviewDataDialogProps): ReactElement;
+export {};
+//# sourceMappingURL=PreviewDataDialog.d.ts.map

package/dist/designer/PreviewDataDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewDataDialog.d.ts","sourceRoot":"","sources":["../../src/designer/PreviewDataDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,GACR,EAAE,sBAAsB,GAAG,YAAY,CAkDvC"}

package/dist/designer/PreviewDataDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+export function PreviewDataDialog({ json, message, valid, onChange, onLoadExample, onApply, onClose, }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                onClose();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [onClose]);
+    return (_jsx("div", { className: "df-dialog-backdrop", children: _jsxs("div", { className: "df-dialog", role: "dialog", "aria-modal": "true", "aria-label": "Preview data", "data-testid": "preview-dialog", children: [_jsx("h3", { children: "Preview data" }), _jsx("p", { className: "df-side-note", children: "Sample JSON is used only to preview this template. It is not saved with the template." }), _jsx("textarea", { "aria-label": "Preview JSON", "data-testid": "preview-json", spellCheck: false, value: json, onChange: (event) => onChange(event.target.value), autoFocus: true }), _jsx("p", { className: valid ? "df-path-note df-path-note--ok" : "df-path-note df-path-note--error", role: "status", children: message }), _jsxs("div", { className: "df-dialog-actions", children: [_jsx("button", { type: "button", className: "df-button", onClick: onLoadExample, children: "Load example" }), _jsx("button", { type: "button", className: "df-button", onClick: onClose, children: "Close" }), _jsx("button", { type: "button", className: "df-button df-button--primary", onClick: onApply, disabled: !valid, children: "Apply preview" })] })] }) }));
+}
+//# sourceMappingURL=PreviewDataDialog.js.map

package/dist/designer/PreviewDataDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewDataDialog.js","sourceRoot":"","sources":["../../src/designer/PreviewDataDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAYrD,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,GACgB;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,eACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACN,cAAc,iBACb,gBAAgB,aAE5B,wCAAqB,EACrB,YAAG,SAAS,EAAC,cAAc,sGAEvB,EACJ,iCACa,cAAc,iBACb,cAAc,EAC1B,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACjD,SAAS,SACT,EACF,YAAG,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,kCAAkC,EAAE,IAAI,EAAC,QAAQ,YACtG,OAAO,GACN,EACJ,eAAK,SAAS,EAAC,mBAAmB,aAChC,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,aAAa,6BAEzD,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,sBAEnD,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,8BAA8B,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,8BAExF,IACL,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/designer/PropertiesPanel.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { DocumentTemplate } from "../schema.js";
+import type { DocumentElement } from "../types.js";
+interface PropertiesPanelProps {
+    template: DocumentTemplate;
+    selected: DocumentElement | null;
+    previewData: unknown | null;
+    onEdit: (template: DocumentTemplate | null, coalesce: boolean) => void;
+    onGestureEnd: () => void;
+    onDelete: () => void;
+    onClearSelection: () => void;
+}
+export declare function PropertiesPanel({ template, selected, previewData, onEdit, onGestureEnd, onDelete, onClearSelection, }: PropertiesPanelProps): ReactElement;
+export {};
+//# sourceMappingURL=PropertiesPanel.d.ts.map

package/dist/designer/PropertiesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../src/designer/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAA0C,MAAM,aAAa,CAAC;AAS3F,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,WAAW,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,gBAAgB,GACjB,EAAE,oBAAoB,GAAG,YAAY,CAkBrC"}

package/dist/designer/PropertiesPanel.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolvePage } from "./page-geometry.js";
+import { ItemsFields, TotalsFields } from "./InvoiceFields.js";
+import { ReportDocumentFields, ReportTableFields } from "./ReportFields.js";
+import { ImageBindingFields } from "./ImageBindingFields.js";
+import { ElementStyleSections } from "./StyleFields.js";
+import { TextBindingFields } from "./TextBindingFields.js";
+import { applyPageSettings, moveElement, replaceElement, resizeElement } from "./template-edits.js";
+export function PropertiesPanel({ template, selected, previewData, onEdit, onGestureEnd, onDelete, onClearSelection, }) {
+    return (_jsx("aside", { className: "df-side df-side--right", "aria-label": "Selected element properties", children: selected ? (_jsx(ElementProperties, { template: template, element: selected, previewData: previewData, onEdit: onEdit, onGestureEnd: onGestureEnd, onDelete: onDelete, onClearSelection: onClearSelection })) : (_jsx(PageProperties, { template: template, onEdit: onEdit, onGestureEnd: onGestureEnd })) }));
+}
+function PageProperties({ template, onEdit, onGestureEnd, }) {
+    const page = resolvePage(template.page);
+    function changeMargin(edge, value) {
+        if (!Number.isFinite(value)) {
+            return;
+        }
+        onEdit(applyPageSettings(template, { margins: { ...template.page.margins, [edge]: value } }), true);
+    }
+    return (_jsxs("div", { className: "df-props", children: [_jsx("div", { className: "df-props-head", children: _jsx("h3", { children: "Page" }) }), _jsxs("p", { className: "df-meta", children: [template.page.paperSize, " ", template.page.orientation, ", ", page.width, " \u00D7 ", page.height, " ", page.unit] }), _jsxs("div", { className: "df-field-row", children: [_jsx(NumberField, { label: "Margin top", value: template.page.margins.top, min: 0, onChange: (value) => changeMargin("top", value), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Margin right", value: template.page.margins.right, min: 0, onChange: (value) => changeMargin("right", value), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Margin bottom", value: template.page.margins.bottom, min: 0, onChange: (value) => changeMargin("bottom", value), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Margin left", value: template.page.margins.left, min: 0, onChange: (value) => changeMargin("left", value), onBlur: onGestureEnd })] }), _jsx("p", { className: "df-side-note", children: "The dashed rectangle on the page is the margin guide. Select an element to edit it." }), template.documentType === "report" ? (_jsx(ReportDocumentFields, { template: template, onEdit: onEdit, onBlur: onGestureEnd })) : null] }));
+}
+function ElementProperties({ template, element, previewData, onEdit, onGestureEnd, onDelete, onClearSelection, }) {
+    function commit(next, coalesce = true) {
+        onEdit(replaceElement(template, element.id, next), coalesce);
+    }
+    return (_jsxs("div", { className: "df-props", children: [_jsxs("div", { className: "df-props-head", children: [_jsx("h3", { children: elementLabel(element.type) }), _jsx("button", { type: "button", className: "df-link", onClick: onClearSelection, children: "Page" })] }), _jsxs("p", { className: "df-meta", children: ["Id ", element.id] }), _jsxs("div", { className: "df-field-row", children: [_jsx(NumberField, { label: "X", value: element.position.x, min: 0, onChange: (value) => onEdit(moveElement(template, element.id, { ...element.position, x: value }), true), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Y", value: element.position.y, min: 0, onChange: (value) => onEdit(moveElement(template, element.id, { ...element.position, y: value }), true), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Width", value: element.dimensions.width, min: element.type === "line" ? 0 : 0.1, onChange: (value) => onEdit(resizeElement(template, element.id, { ...element.dimensions, width: value }), true), onBlur: onGestureEnd }), _jsx(NumberField, { label: "Height", value: element.dimensions.height, min: element.type === "line" ? 0 : 0.1, onChange: (value) => onEdit(resizeElement(template, element.id, { ...element.dimensions, height: value }), true), onBlur: onGestureEnd })] }), element.type === "text" ? (_jsx(TextFields, { element: element, previewData: previewData, onCommit: commit, onBlur: onGestureEnd })) : null, element.type === "image" ? (_jsx(ImageFields, { element: element, previewData: previewData, onCommit: commit, onBlur: onGestureEnd })) : null, _jsx(ElementStyleSections, { element: element, onCommit: commit, onBlur: onGestureEnd }), element.type === "items" ? _jsx(ItemsFields, { element: element, onCommit: commit, onBlur: onGestureEnd }) : null, element.type === "totals" ? _jsx(TotalsFields, { element: element, onCommit: commit, onBlur: onGestureEnd }) : null, element.type === "reportTable" ? _jsx(ReportTableFields, { element: element, onCommit: commit, onBlur: onGestureEnd }) : null, _jsx("button", { type: "button", className: "df-button df-button--danger", onClick: onDelete, children: "Delete element" })] }));
+}
+function TextFields({ element, previewData, onCommit, onBlur, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Text", children: _jsx("textarea", { "aria-label": "Text content", value: element.text ?? "", onChange: (event) => onCommit({ ...element, text: event.target.value }), onBlur: onBlur }) }), _jsx(TextBindingFields, { element: element, previewData: previewData, onCommit: onCommit, onBlur: onBlur }, element.id)] }));
+}
+function ImageFields({ element, previewData, onCommit, onBlur, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Alt text", children: _jsx("input", { "aria-label": "Image alt text", value: element.alt ?? "", onChange: (event) => onCommit({ ...element, alt: event.target.value }), onBlur: onBlur }) }), _jsx(ImageBindingFields, { element: element, previewData: previewData, onCommit: onCommit, onBlur: onBlur }, element.id)] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("label", { className: "df-field", children: [_jsx("span", { children: label }), children] }));
+}
+function NumberField({ label, value, min, max, step = 0.5, onChange, onBlur, }) {
+    return (_jsx(Field, { label: label, children: _jsx("input", { "aria-label": label, type: "number", min: min, max: max, step: step, value: Number.isFinite(value) ? value : 0, onChange: (event) => {
+                const next = Number(event.target.value);
+                if (Number.isFinite(next)) {
+                    onChange(next);
+                }
+            }, onBlur: onBlur }) }));
+}
+function elementLabel(type) {
+    switch (type) {
+        case "text":
+            return "Text";
+        case "image":
+            return "Image";
+        case "line":
+            return "Line";
+        case "rectangle":
+            return "Rectangle";
+        case "items":
+            return "Items";
+        case "totals":
+            return "Totals";
+        case "reportTable":
+            return "Report table";
+    }
+}
+//# sourceMappingURL=PropertiesPanel.js.map

package/dist/designer/PropertiesPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertiesPanel.js","sourceRoot":"","sources":["../../src/designer/PropertiesPanel.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAYpG,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,gBAAgB,GACK;IACrB,OAAO,CACL,gBAAO,SAAS,EAAC,wBAAwB,gBAAY,6BAA6B,YAC/E,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,EACjB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,GAAI,CACnF,GACK,CACT,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,YAAY,GAKb;IACC,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAExC,SAAS,YAAY,CAAC,IAAuB,EAAE,KAAa;QAC1D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,MAAM,CAAC,iBAAiB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IACtG,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,aACvB,cAAK,SAAS,EAAC,eAAe,YAC5B,gCAAa,GACT,EACN,aAAG,SAAS,EAAC,SAAS,aACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,OAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,QAAI,IAAI,CAAC,KAAK,cAAK,IAAI,CAAC,MAAM,OAAG,IAAI,CAAC,IAAI,IAC5F,EACJ,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,WAAW,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,GAAI,EACnJ,KAAC,WAAW,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,GAAI,EACzJ,KAAC,WAAW,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,GAAI,EAC5J,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,GAAI,IAClJ,EACN,YAAG,SAAS,EAAC,cAAc,oGAAwF,EAClH,QAAQ,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CACnF,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,gBAAgB,GASjB;IACC,SAAS,MAAM,CAAC,IAAqB,EAAE,QAAQ,GAAG,IAAI;QACpD,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,aACvB,eAAK,SAAS,EAAC,eAAe,aAC5B,uBAAK,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,GAAM,EACrC,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,OAAO,EAAE,gBAAgB,qBAE1D,IACL,EACN,aAAG,SAAS,EAAC,SAAS,oBAAK,OAAO,CAAC,EAAE,IAAK,EAC1C,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,WAAW,IACV,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,EACzB,GAAG,EAAE,CAAC,EACN,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EACvG,MAAM,EAAE,YAAY,GACpB,EACF,KAAC,WAAW,IACV,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,EACzB,GAAG,EAAE,CAAC,EACN,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EACvG,MAAM,EAAE,YAAY,GACpB,EACF,KAAC,WAAW,IACV,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,EAC/B,GAAG,EAAE,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EAC/G,MAAM,EAAE,YAAY,GACpB,EACF,KAAC,WAAW,IACV,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,MAAM,EAChC,GAAG,EAAE,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EAChH,MAAM,EAAE,YAAY,GACpB,IACE,EACL,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACzB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CACnG,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAC1B,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CACpG,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,EACjF,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,EAC3G,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,EAC7G,OAAO,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,KAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,EACxH,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,QAAQ,+BAEtE,IACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,MAAM,GAMP;IACC,OAAO,CACL,8BACE,KAAC,KAAK,IAAC,KAAK,EAAC,MAAM,YACjB,iCACa,cAAc,EACzB,KAAK,EAAE,OAAO,CAAC,IAAI,IAAI,EAAE,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EACvE,MAAM,EAAE,MAAM,GACd,GACI,EACR,KAAC,iBAAiB,IAAkB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,IAA1F,OAAO,CAAC,EAAE,CAAoF,IACrH,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,MAAM,GAMP;IACC,OAAO,CACL,8BACE,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,YACrB,8BACa,gBAAgB,EAC3B,KAAK,EAAE,OAAO,CAAC,GAAG,IAAI,EAAE,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EACtE,MAAM,EAAE,MAAM,GACd,GACI,EACR,KAAC,kBAAkB,IAEjB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,IAJT,OAAO,CAAC,EAAE,CAKf,IACD,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0C;IACxE,OAAO,CACL,iBAAO,SAAS,EAAC,UAAU,aACzB,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,MAAM,GASP;IACC,OAAO,CACL,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YACjB,8BACc,KAAK,EACjB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC1B,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC,EACD,MAAM,EAAE,MAAM,GACd,GACI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,IAA6B;IACjD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,WAAW,CAAC;QACrB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,aAAa;YAChB,OAAO,cAAc,CAAC;IAC1B,CAAC;AACH,CAAC"}

package/dist/designer/ReportFields.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import type { DocumentTemplate } from "../schema.js";
+import type { ReportTableElement } from "../types.js";
+export declare function ReportTableFields({ element, onCommit, onBlur, }: {
+    element: ReportTableElement;
+    onCommit: (element: ReportTableElement, coalesce?: boolean) => void;
+    onBlur: () => void;
+}): ReactElement;
+export declare function ReportDocumentFields({ template, onEdit, onBlur, }: {
+    template: DocumentTemplate;
+    onEdit: (template: DocumentTemplate | null, coalesce: boolean) => void;
+    onBlur: () => void;
+}): ReactElement;
+//# sourceMappingURL=ReportFields.d.ts.map

package/dist/designer/ReportFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportFields.d.ts","sourceRoot":"","sources":["../../src/designer/ReportFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,KAAK,EAOV,kBAAkB,EAMnB,MAAM,aAAa,CAAC;AAOrB,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE;IACD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,GAAG,YAAY,CA+df;AAqKD,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,MAAM,EAAE,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,GAAG,YAAY,CAmEf"}

package/dist/designer/ReportFields.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { parseBindingPath } from "../binding-path.js";
+import { cssColor } from "../render/css.js";
+import { AGGREGATES, ROW_RULE_OPERATORS, SORT_DIRECTIONS, TEXT_ALIGNS } from "../types.js";
+import { NamedStyleEditor } from "./StyleFields.js";
+import { withReport } from "./template-edits.js";
+const FORMATS = ["text", "decimal", "currency", "percent", "date"];
+export function ReportTableFields({ element, onCommit, onBlur, }) {
+    const [collectionPath, setCollectionPath] = useState(element.collectionPath);
+    const [columnPaths, setColumnPaths] = useState({});
+    const [groupPaths, setGroupPaths] = useState({});
+    const [sortPaths, setSortPaths] = useState({});
+    const [selectedColumnId, setSelectedColumnId] = useState(element.columns[0]?.id ?? "");
+    useEffect(() => {
+        setCollectionPath(element.collectionPath);
+        setColumnPaths({});
+        setGroupPaths({});
+        setSortPaths({});
+        setSelectedColumnId(element.columns[0]?.id ?? "");
+    }, [element.id, element.collectionPath]);
+    function commitColumns(columns, coalesce = true) {
+        onCommit({ ...element, columns }, coalesce);
+    }
+    function commitNamed(key, style, coalesce = true) {
+        const next = { ...element };
+        if (style && Object.keys(style).length > 0) {
+            next[key] = style;
+        }
+        else {
+            delete next[key];
+        }
+        onCommit(next, coalesce);
+    }
+    function commitColor(key, value) {
+        const next = { ...element };
+        if (value.trim().length === 0) {
+            delete next[key];
+            onCommit(next, true);
+            return;
+        }
+        if (cssColor(value)) {
+            next[key] = value;
+            onCommit(next, true);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Collection path" }), _jsx("input", { "aria-label": "Collection path", value: collectionPath, spellCheck: false, onChange: (event) => {
+                            const next = event.target.value;
+                            setCollectionPath(next);
+                            if (parseBindingPath(next).valid) {
+                                onCommit({ ...element, collectionPath: next }, true);
+                            }
+                        }, onBlur: onBlur })] }), _jsx("p", { className: "df-path-note", role: "status", children: parseBindingPath(collectionPath).valid ? "Path is valid." : "Use a path such as data.jobs." }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Empty text" }), _jsx("input", { "aria-label": "Empty report text", value: element.emptyText ?? "", onChange: (event) => onCommit({ ...element, emptyText: event.target.value }), onBlur: onBlur })] }), _jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": "Show grand total", checked: element.showGrandTotal === true, onChange: (event) => onCommit({ ...element, showGrandTotal: event.target.checked }, false) }), "Grand total"] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Grand total label" }), _jsx("input", { "aria-label": "Grand total label", value: element.grandTotalLabel ?? "", onChange: (event) => onCommit({ ...element, grandTotalLabel: event.target.value }), onBlur: onBlur })] }), _jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": "Page break before table", checked: element.pageBreakBefore === true, onChange: (event) => onCommit({ ...element, pageBreakBefore: event.target.checked }, false) }), "Page break before table"] }), _jsxs("details", { className: "df-style", open: true, children: [_jsx("summary", { children: "Table body" }), _jsxs("div", { className: "df-style-body", children: [_jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": "Alternate row colors", checked: element.stripeRows !== false, onChange: (event) => onCommit({ ...element, stripeRows: event.target.checked }, false) }), "Alternating row colors"] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Odd row color" }), _jsx("input", { "aria-label": "Odd row color", value: element.oddRowColor ?? "", onChange: (event) => commitColor("oddRowColor", event.target.value), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Even row color" }), _jsx("input", { "aria-label": "Even row color", value: element.evenRowColor ?? element.alternateRowColor ?? "", onChange: (event) => commitColor("evenRowColor", event.target.value), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Table alignment" }), _jsxs("select", { "aria-label": "Table alignment", value: element.tableAlign ?? "stretch", onChange: (event) => {
+                                            const value = event.target.value;
+                                            const next = { ...element };
+                                            if (value === "stretch") {
+                                                delete next.tableAlign;
+                                            }
+                                            else {
+                                                next.tableAlign = value;
+                                            }
+                                            onCommit(next, false);
+                                        }, children: [_jsx("option", { value: "stretch", children: "full width" }), _jsx("option", { value: "left", children: "left" }), _jsx("option", { value: "center", children: "center" }), _jsx("option", { value: "right", children: "right" })] })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Header row height" }), _jsx("input", { "aria-label": "Header row height", type: "number", min: 0, step: 0.5, value: element.headerHeight ?? 0, onChange: (event) => {
+                                            const height = Number(event.target.value);
+                                            const next = { ...element };
+                                            if (!Number.isFinite(height) || height <= 0) {
+                                                delete next.headerHeight;
+                                            }
+                                            else {
+                                                next.headerHeight = height;
+                                            }
+                                            onCommit(next, true);
+                                        }, onBlur: onBlur })] })] })] }), _jsx(NamedStyleEditor, { title: "Table header", style: element.headerStyle, onChange: (headerStyle, coalesce) => commitNamed("headerStyle", headerStyle, coalesce), onBlur: onBlur }), _jsx(NamedStyleEditor, { title: "Table body style", style: element.bodyStyle, onChange: (bodyStyle, coalesce) => commitNamed("bodyStyle", bodyStyle, coalesce), onBlur: onBlur }), _jsxs("fieldset", { className: "df-column", children: [_jsx("legend", { children: "Grouping" }), (element.groupBy ?? []).map((level, index) => (_jsxs("div", { className: "df-field-row", children: [_jsxs("label", { className: "df-field", children: [_jsxs("span", { children: ["Group ", index + 1, " field"] }), _jsx("input", { "aria-label": `Group ${index + 1} field`, value: groupPaths[index] ?? level.path, spellCheck: false, onChange: (event) => {
+                                            const path = event.target.value;
+                                            setGroupPaths((current) => ({ ...current, [index]: path }));
+                                            if (parseBindingPath(path).valid) {
+                                                onCommit({ ...element, groupBy: replaceAt(element.groupBy ?? [], index, { ...level, path }) }, true);
+                                            }
+                                        }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Heading" }), _jsx("input", { "aria-label": `Group ${index + 1} heading`, value: level.label ?? "", onChange: (event) => onCommit({
+                                            ...element,
+                                            groupBy: replaceAt(element.groupBy ?? [], index, { ...level, label: event.target.value }),
+                                        }), onBlur: onBlur })] }), _jsx("button", { type: "button", className: "df-button", onClick: () => onCommit({ ...element, groupBy: (element.groupBy ?? []).filter((_, levelIndex) => levelIndex !== index) }, false), children: "Remove group" })] }, index))), (element.groupBy?.length ?? 0) < 3 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => onCommit({ ...element, groupBy: [...(element.groupBy ?? []), { path: "name", label: "Group" }] }, false), children: "Add group" })) : null] }), _jsxs("fieldset", { className: "df-column", children: [_jsx("legend", { children: "Sorting" }), (element.sort ?? []).map((sort, index) => (_jsxs("div", { className: "df-field-row", children: [_jsxs("label", { className: "df-field", children: [_jsxs("span", { children: ["Sort ", index + 1, " field"] }), _jsx("input", { "aria-label": `Sort ${index + 1} field`, value: sortPaths[index] ?? sort.path, spellCheck: false, onChange: (event) => {
+                                            const path = event.target.value;
+                                            setSortPaths((current) => ({ ...current, [index]: path }));
+                                            if (parseBindingPath(path).valid) {
+                                                onCommit({ ...element, sort: replaceAt(element.sort ?? [], index, { ...sort, path }) }, true);
+                                            }
+                                        }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Direction" }), _jsx("select", { "aria-label": `Sort ${index + 1} direction`, value: sort.direction, onChange: (event) => onCommit({
+                                            ...element,
+                                            sort: replaceAt(element.sort ?? [], index, { ...sort, direction: event.target.value }),
+                                        }, false), children: SORT_DIRECTIONS.map((direction) => (_jsx("option", { value: direction, children: direction }, direction))) })] }), _jsx("button", { type: "button", className: "df-button", onClick: () => onCommit({ ...element, sort: (element.sort ?? []).filter((_, sortIndex) => sortIndex !== index) }, false), children: "Remove sort" })] }, index))), (element.sort?.length ?? 0) < 4 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => onCommit({ ...element, sort: [...(element.sort ?? []), { path: "name", direction: "asc" }] }, false), children: "Add sort" })) : null] }), _jsx(ColumnAppearance, { element: element, selectedColumnId: selectedColumnId, onSelect: setSelectedColumnId, onCommit: onCommit, onBlur: onBlur }), _jsx(NamedStyleEditor, { title: "Group headings", style: element.groupStyle, onChange: (groupStyle, coalesce) => commitNamed("groupStyle", groupStyle, coalesce), onBlur: onBlur }), _jsx(NamedStyleEditor, { title: "Subtotals", style: element.subtotalStyle, onChange: (subtotalStyle, coalesce) => commitNamed("subtotalStyle", subtotalStyle, coalesce), onBlur: onBlur }), _jsx(NamedStyleEditor, { title: "Grand total", style: element.grandTotalStyle, onChange: (grandTotalStyle, coalesce) => commitNamed("grandTotalStyle", grandTotalStyle, coalesce), onBlur: onBlur }), _jsx(RowRuleFields, { element: element, onCommit: onCommit, onBlur: onBlur }), element.columns.map((column, index) => (_jsxs("fieldset", { className: "df-column", children: [_jsxs("legend", { children: ["Column ", index + 1] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Header" }), _jsx("input", { "aria-label": `Report column ${index + 1} header`, value: column.header, onChange: (event) => commitColumns(replaceAt(element.columns, index, { ...column, header: event.target.value })), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Record field" }), _jsx("input", { "aria-label": `Report column ${index + 1} field`, value: columnPaths[column.id] ?? column.binding.path, spellCheck: false, onChange: (event) => {
+                                    const path = event.target.value;
+                                    setColumnPaths((current) => ({ ...current, [column.id]: path }));
+                                    if (parseBindingPath(path).valid) {
+                                        commitColumns(replaceAt(element.columns, index, { ...column, binding: { ...column.binding, path } }));
+                                    }
+                                }, onBlur: onBlur })] }), _jsxs("div", { className: "df-field-row", children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Width" }), _jsx("input", { "aria-label": `Report column ${index + 1} width`, type: "number", min: 0.1, step: 0.1, value: column.width ?? 1, onChange: (event) => {
+                                            const width = Number(event.target.value);
+                                            if (Number.isFinite(width) && width > 0) {
+                                                commitColumns(replaceAt(element.columns, index, { ...column, width }));
+                                            }
+                                        }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Align" }), _jsx("select", { "aria-label": `Report column ${index + 1} alignment`, value: column.align ?? "left", onChange: (event) => commitColumns(replaceAt(element.columns, index, { ...column, align: event.target.value }), false), children: TEXT_ALIGNS.map((align) => (_jsx("option", { value: align, children: align }, align))) })] })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Format" }), _jsx("select", { "aria-label": `Report column ${index + 1} format`, value: column.binding.format?.style ?? "text", onChange: (event) => commitColumns(replaceAt(element.columns, index, {
+                                    ...column,
+                                    binding: withFormat(column.binding, event.target.value),
+                                }), false), children: FORMATS.map((format) => (_jsx("option", { value: format, children: format }, format))) })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Aggregate" }), _jsxs("select", { "aria-label": `Report column ${index + 1} aggregate`, value: column.aggregate ?? "", onChange: (event) => {
+                                    const aggregate = event.target.value;
+                                    const next = { ...column };
+                                    if (aggregate === "") {
+                                        delete next.aggregate;
+                                    }
+                                    else {
+                                        next.aggregate = aggregate;
+                                    }
+                                    commitColumns(replaceAt(element.columns, index, next), false);
+                                }, children: [_jsx("option", { value: "", children: "none" }), AGGREGATES.map((aggregate) => (_jsx("option", { value: aggregate, children: aggregate }, aggregate)))] })] }), _jsxs("div", { className: "df-field-row", children: [_jsx("button", { type: "button", className: "df-button", disabled: index === 0, onClick: () => commitColumns(moveItem(element.columns, index, -1), false), children: "Move up" }), _jsx("button", { type: "button", className: "df-button", disabled: index === element.columns.length - 1, onClick: () => commitColumns(moveItem(element.columns, index, 1), false), children: "Move down" })] }), element.columns.length > 1 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commitColumns(element.columns.filter((_, columnIndex) => columnIndex !== index), false), children: "Remove column" })) : null] }, column.id))), element.columns.length < 12 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commitColumns([
+                    ...element.columns,
+                    { id: nextColumnId(element.columns), header: "Column", binding: { path: "name" }, width: 1 },
+                ], false), children: "Add column" })) : null, _jsx("p", { className: "df-side-note", children: "Page headers and footers are edited from the Page panel when the document type is Report." })] }));
+}
+function ColumnAppearance({ element, selectedColumnId, onSelect, onCommit, onBlur, }) {
+    const selected = element.columns.find((column) => column.id === selectedColumnId) ?? element.columns[0];
+    if (!selected) {
+        return _jsx(_Fragment, {});
+    }
+    function commitColumn(column, coalesce = true) {
+        onCommit({ ...element, columns: element.columns.map((item) => (item.id === column.id ? column : item)) }, coalesce);
+    }
+    function commitPart(key, style, coalesce = true) {
+        const next = { ...selected };
+        if (style && Object.keys(style).length > 0) {
+            next[key] = style;
+        }
+        else {
+            delete next[key];
+        }
+        commitColumn(next, coalesce);
+    }
+    return (_jsxs("details", { className: "df-style", children: [_jsx("summary", { children: "Columns" }), _jsxs("div", { className: "df-style-body", children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Column" }), _jsx("select", { "aria-label": "Style column", value: selected.id, onChange: (event) => onSelect(event.target.value), children: element.columns.map((column) => (_jsx("option", { value: column.id, children: column.header || column.id }, column.id))) })] }), _jsx(NamedStyleEditor, { title: "Column header", style: selected.headerStyle, onChange: (headerStyle, coalesce) => commitPart("headerStyle", headerStyle, coalesce), onBlur: onBlur }), _jsx(NamedStyleEditor, { title: "Column cells", style: selected.style, onChange: (style, coalesce) => commitPart("style", style, coalesce), onBlur: onBlur })] })] }));
+}
+function RowRuleFields({ element, onCommit, onBlur, }) {
+    const rules = element.rowRules ?? [];
+    function commit(rowRules) {
+        const next = { ...element };
+        if (rowRules.length === 0) {
+            delete next.rowRules;
+        }
+        else {
+            next.rowRules = rowRules;
+        }
+        onCommit(next, false);
+    }
+    return (_jsxs("details", { className: "df-style", children: [_jsx("summary", { children: "Row rules" }), _jsxs("div", { className: "df-style-body", children: [_jsx("p", { className: "df-side-note", children: "The first matching rule colors that record. Paths are fields, not expressions." }), rules.map((rule, index) => (_jsxs("div", { className: "df-field-row", children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Field" }), _jsx("input", { "aria-label": `Row rule ${index + 1} field`, value: rule.path, spellCheck: false, onChange: (event) => {
+                                            const path = event.target.value;
+                                            if (parseBindingPath(path).valid) {
+                                                commit(replaceAt(rules, index, { ...rule, path }));
+                                            }
+                                        }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Operator" }), _jsx("select", { "aria-label": `Row rule ${index + 1} operator`, value: rule.operator, onChange: (event) => commit(replaceAt(rules, index, { ...rule, operator: event.target.value })), children: ROW_RULE_OPERATORS.map((operator) => (_jsx("option", { value: operator, children: operator }, operator))) })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Value" }), _jsx("input", { "aria-label": `Row rule ${index + 1} value`, value: rule.value === undefined ? "" : String(rule.value), onChange: (event) => commit(replaceAt(rules, index, { ...rule, value: event.target.value })), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Background" }), _jsx("input", { "aria-label": `Row rule ${index + 1} background`, value: rule.style.backgroundColor ?? "", onChange: (event) => {
+                                            const backgroundColor = event.target.value;
+                                            if (backgroundColor.trim().length === 0 || cssColor(backgroundColor)) {
+                                                const style = { ...rule.style };
+                                                if (backgroundColor.trim().length === 0) {
+                                                    delete style.backgroundColor;
+                                                }
+                                                else {
+                                                    style.backgroundColor = backgroundColor;
+                                                }
+                                                commit(replaceAt(rules, index, { ...rule, style }));
+                                            }
+                                        }, onBlur: onBlur })] }), _jsx("button", { type: "button", className: "df-button", onClick: () => commit(rules.filter((_, ruleIndex) => ruleIndex !== index)), children: "Remove rule" })] }, index))), rules.length < 20 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => commit([...rules, { path: "status", operator: "eq", value: "", style: { backgroundColor: "#fff6e8" } }]), children: "Add row rule" })) : null] })] }));
+}
+export function ReportDocumentFields({ template, onEdit, onBlur, }) {
+    const report = template.report ?? {};
+    function commit(next, coalesce = true) {
+        onEdit(withReport(template, next), coalesce);
+    }
+    function setText(key, value) {
+        const next = { ...report, [key]: value };
+        if (value.length === 0) {
+            delete next[key];
+        }
+        commit(next);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Report" }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Report title" }), _jsx("input", { "aria-label": "Report title", value: report.title ?? "", onChange: (event) => setText("title", event.target.value), onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Description" }), _jsx("input", { "aria-label": "Report description", value: report.description ?? "", onChange: (event) => setText("description", event.target.value), onBlur: onBlur })] }), _jsxs("label", { className: "df-check", children: [_jsx("input", { type: "checkbox", "aria-label": "Show page number", checked: report.showPageNumber === true, onChange: (event) => commit({ ...report, showPageNumber: event.target.checked }, false) }), "Page number when printing"] }), _jsx("p", { className: "df-side-note", children: "The page number is a print counter. The preview does not calculate a total page count." }), _jsx(BandEditor, { label: "Page header", entries: report.pageHeader ?? [], onChange: (pageHeader) => commit({ ...report, pageHeader }, false), onBlur: onBlur }), _jsx(BandEditor, { label: "Page footer", entries: report.pageFooter ?? [], onChange: (pageFooter) => commit({ ...report, pageFooter }, false), onBlur: onBlur }), _jsx(BandEditor, { label: "Report header", entries: report.reportHeader ?? [], onChange: (reportHeader) => commit({ ...report, reportHeader }, false), onBlur: onBlur }), _jsx(BandEditor, { label: "Report footer", entries: report.reportFooter ?? [], onChange: (reportFooter) => commit({ ...report, reportFooter }, false), onBlur: onBlur })] }));
+}
+function BandEditor({ label, entries, onChange, onBlur, }) {
+    const [paths, setPaths] = useState({});
+    return (_jsxs("fieldset", { className: "df-column", children: [_jsx("legend", { children: label }), entries.map((entry, index) => (_jsxs("div", { children: [_jsxs("label", { className: "df-field", children: [_jsx("span", { children: entry.type === "image" ? "Image source" : "Text" }), _jsx("input", { "aria-label": `${label} ${index + 1} ${entry.type === "image" ? "source" : "text"}`, value: entry.type === "image" ? entry.src ?? "" : entry.text ?? "", onChange: (event) => {
+                                    const value = event.target.value;
+                                    const next = entries.slice();
+                                    next[index] = entry.type === "image" ? { ...entry, src: value } : { ...entry, text: value };
+                                    onChange(next);
+                                }, onBlur: onBlur })] }), _jsxs("label", { className: "df-field", children: [_jsx("span", { children: "Binding path" }), _jsx("input", { "aria-label": `${label} ${index + 1} binding`, value: paths[entry.id] ?? entry.binding?.path ?? "", spellCheck: false, onChange: (event) => {
+                                    const path = event.target.value;
+                                    setPaths((current) => ({ ...current, [entry.id]: path }));
+                                    if (path.length === 0) {
+                                        const next = entries.slice();
+                                        const cleared = { ...entry };
+                                        delete cleared.binding;
+                                        next[index] = cleared;
+                                        onChange(next);
+                                        return;
+                                    }
+                                    if (parseBindingPath(path).valid) {
+                                        const next = entries.slice();
+                                        next[index] = { ...entry, binding: { ...entry.binding, path } };
+                                        onChange(next);
+                                    }
+                                }, onBlur: onBlur })] }), _jsx("button", { type: "button", className: "df-button", onClick: () => onChange(entries.filter((_, entryIndex) => entryIndex !== index)), children: "Remove line" })] }, entry.id))), entries.length < 8 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => onChange([...entries, { id: nextBandId(entries), type: "text", text: "" }]), children: "Add text line" })) : null, entries.length < 8 ? (_jsx("button", { type: "button", className: "df-button", onClick: () => onChange([...entries, { id: nextBandId(entries), type: "image", alt: label, src: "" }]), children: "Add image" })) : null] }));
+}
+function replaceAt(items, index, value) {
+    return items.map((item, itemIndex) => (itemIndex === index ? value : item));
+}
+function moveItem(items, index, delta) {
+    const target = index + delta;
+    if (target < 0 || target >= items.length) {
+        return items.slice();
+    }
+    const next = items.slice();
+    const [item] = next.splice(index, 1);
+    if (item === undefined) {
+        return items.slice();
+    }
+    next.splice(target, 0, item);
+    return next;
+}
+function nextColumnId(columns) {
+    const used = new Set(columns.map((column) => column.id));
+    let index = columns.length + 1;
+    let id = `column-${index}`;
+    while (used.has(id)) {
+        index += 1;
+        id = `column-${index}`;
+    }
+    return id;
+}
+function nextBandId(entries) {
+    const used = new Set(entries.map((entry) => entry.id));
+    let index = entries.length + 1;
+    let id = `line-${index}`;
+    while (used.has(id)) {
+        index += 1;
+        id = `line-${index}`;
+    }
+    return id;
+}
+function withFormat(binding, format) {
+    if (format === "text") {
+        const { format: _removed, ...rest } = binding;
+        return rest;
+    }
+    if (format === "date") {
+        return { ...binding, format: { style: "date", dateStyle: "medium" } };
+    }
+    const style = format;
+    return { ...binding, format: { style, minimumFractionDigits: 2, maximumFractionDigits: 2 } };
+}
+//# sourceMappingURL=ReportFields.js.map