@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

package/dist/src/components/layout/dialog/CwDialog.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styles from "./cw-dialog.module.css";
+// Helper function to parse size values
+const parseSize = (size) => {
+    if (typeof size === 'number')
+        return { value: size, unit: 'px' };
+    // Match numeric value and unit
+    const match = String(size).match(/^([\d.]+)(\D+)$/);
+    if (match) {
+        const unit = match[2];
+        // Only allow px, rem, vw, vh
+        if (['px', 'rem', 'vw', 'vh'].includes(unit)) {
+            return { value: parseFloat(match[1]), unit };
+        }
+    }
+    // Default to pixels if no unit specified or unit not supported
+    return { value: parseFloat(String(size)), unit: 'px' };
+};
+// Helper to convert size to px for calculations
+const convertToPx = (size) => {
+    switch (size.unit) {
+        case 'px': return size.value;
+        case 'rem': return size.value * 16; // Assuming 1rem = 16px
+        case 'vh': return (window.innerHeight * size.value) / 100;
+        case 'vw': return (window.innerWidth * size.value) / 100;
+        default: return size.value; // Default fallback
+    }
+};
+// Function to convert from px back to original unit
+const convertFromPx = (px, unit) => {
+    switch (unit) {
+        case 'px': return px;
+        case 'rem': return px / 16;
+        case 'vh': return (px * 100) / window.innerHeight;
+        case 'vw': return (px * 100) / window.innerWidth;
+        default: return px;
+    }
+};
+export const CwDialog = props => {
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, ...domProps } = props;
+    const dialogRef = useRef(null);
+    const initialSetup = useMemo(() => {
+        // Default width and height with units
+        const defaultWidth = 800;
+        // Priority: direct props > dialogSize > default values
+        const initialWidth = width !== undefined
+            ? width
+            : dialogSize?.width !== undefined
+                ? dialogSize.width
+                : defaultWidth;
+        const initialHeight = height !== undefined
+            ? height
+            : dialogSize?.height !== undefined
+                ? dialogSize.height
+                : undefined; // Undefined for autoHeight
+        // Determine if height is automatic when height is not provided
+        const isAutoHeight = initialHeight === undefined;
+        // Parse the sizes to separate value and unit
+        const parsedWidth = parseSize(initialWidth);
+        const parsedHeight = isAutoHeight
+            ? { value: 0, unit: 'auto' }
+            : parseSize(initialHeight);
+        // Convert to px for internal calculations
+        const initialWidthPx = convertToPx(parsedWidth);
+        const initialHeightPx = isAutoHeight ? 0 : convertToPx(parsedHeight);
+        // Use estimated height for initial positioning when autoHeight is true
+        const initialEstimatedHeight = isAutoHeight ? 300 : initialHeightPx;
+        const initialDialogSize = {
+            width: initialWidthPx,
+            height: initialHeightPx,
+            widthUnit: parsedWidth.unit,
+            heightUnit: parsedHeight.unit,
+            autoHeight: isAutoHeight
+        };
+        const initialPosition = {
+            x: window.document.body.clientWidth / 2 - initialWidthPx / 2,
+            y: window.document.body.clientHeight / 2 - initialEstimatedHeight / 2
+        };
+        return { initialDialogSize, initialPosition };
+    }, [width, height, dialogSize]); // Only recalculate when these props change
+    const [isDragging, setIsDragging] = useState(false);
+    const [resizeDirection, setResizeDirection] = useState(null);
+    const [position, setPosition] = useState(initialSetup.initialPosition);
+    const [size, setSize] = useState(initialSetup.initialDialogSize);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    // scrim is true by default
+    const hasScrim = scrim !== false;
+    // Adjust position after the dialog is rendered when using autoHeight
+    useLayoutEffect(() => {
+        let resizeObserver = null;
+        if (size.autoHeight && dialogRef.current && open) {
+            const recalculatePosition = () => {
+                const actualHeight = dialogRef.current?.offsetHeight;
+                if (actualHeight && actualHeight > 0) {
+                    setPosition({
+                        x: Math.max(0, window.document.body.clientWidth / 2 - size.width / 2),
+                        y: Math.max(0, window.document.body.clientHeight / 2 - actualHeight / 2)
+                    });
+                }
+            };
+            setTimeout(recalculatePosition, 0);
+            // For modals with delayed loading content (inner fetchs and similar)
+            if (autoReposition) {
+                resizeObserver = new ResizeObserver(() => {
+                    const dialog = dialogRef.current;
+                    if (!dialog)
+                        return;
+                    const dialogRect = dialog.getBoundingClientRect();
+                    const viewportHeight = window.innerHeight;
+                    const margin = 50;
+                    // Only reposition if modal tries to grow over window limits
+                    const isOverflowingTop = dialogRect.top < margin;
+                    const isOverflowingBottom = dialogRect.bottom > viewportHeight - margin;
+                    if (isOverflowingTop || isOverflowingBottom) {
+                        recalculatePosition();
+                    }
+                });
+                resizeObserver.observe(dialogRef.current);
+            }
+        }
+        return () => {
+            resizeObserver?.disconnect();
+        };
+    }, [size.autoHeight, open, autoReposition]);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const parent = dialogRef.current?.parentElement;
+                if (parent) {
+                    const parentRect = parent.getBoundingClientRect();
+                    const dialogRect = dialogRef.current?.getBoundingClientRect();
+                    if (dialogRect) {
+                        const minVisiblePx = 48;
+                        const newX = e.clientX - dragStart.x;
+                        const newY = e.clientY - dragStart.y;
+                        const clampedX = Math.min(Math.max(newX, minVisiblePx - dialogRect.width), parentRect.width - minVisiblePx);
+                        const clampedY = Math.min(Math.max(newY, minVisiblePx - dialogRect.height), parentRect.height - minVisiblePx);
+                        setPosition({ x: clampedX, y: clampedY });
+                    }
+                }
+            }
+            else if (resizeDirection) {
+                const parent = dialogRef.current?.parentElement;
+                if (parent) {
+                    const parentRect = parent.getBoundingClientRect();
+                    const dialogRect = dialogRef.current?.getBoundingClientRect();
+                    if (dialogRect) {
+                        let newWidth = size.width;
+                        let newHeight = size.height;
+                        let newX = position.x;
+                        let newY = position.y;
+                        const minVisiblePx = 64;
+                        const minSize = 100;
+                        // Only allow horizontal resizing if autoHeight is true
+                        if (!size.autoHeight || (!resizeDirection.includes("n") && !resizeDirection.includes("s"))) {
+                            // Logic for horizontal resizing
+                            if (resizeDirection.includes("w")) {
+                                const dx = e.clientX - position.x;
+                                newWidth = Math.max(size.width - dx, minSize);
+                                newX = Math.min(Math.max(position.x + dx, minVisiblePx - newWidth), position.x + size.width - minSize);
+                            }
+                            if (resizeDirection.includes("e")) {
+                                newWidth = Math.min(Math.max(e.clientX - position.x, minSize), parentRect.width - position.x + dialogRect.width - minVisiblePx);
+                            }
+                        }
+                        // Only apply vertical resizing if autoHeight is false
+                        if (!size.autoHeight) {
+                            if (resizeDirection.includes("n")) {
+                                const dy = e.clientY - position.y;
+                                newHeight = Math.max(size.height - dy, minSize);
+                                newY = Math.min(Math.max(position.y + dy, minVisiblePx - newHeight), position.y + size.height - minSize);
+                            }
+                            if (resizeDirection.includes("s")) {
+                                newHeight = Math.min(Math.max(e.clientY - position.y, minSize), parentRect.height - position.y + dialogRect.height - minVisiblePx);
+                            }
+                        }
+                        // Ensure the modal stays within bounds after resizing
+                        newX = Math.min(Math.max(newX, minVisiblePx - newWidth), parentRect.width - minVisiblePx);
+                        newY = Math.min(Math.max(newY, minVisiblePx - newHeight), parentRect.height - minVisiblePx);
+                        // Update state maintaining original units
+                        setSize({
+                            width: newWidth,
+                            height: newHeight,
+                            widthUnit: size.widthUnit,
+                            heightUnit: size.heightUnit,
+                            autoHeight: size.autoHeight
+                        });
+                        setPosition({ x: newX, y: newY });
+                    }
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setResizeDirection(null);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isDragging, resizeDirection, dragStart, position, size]);
+    const handleMouseDown = useCallback((e) => {
+        setIsDragging(true);
+        setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    }, [position]);
+    const handleResizeMouseDown = useCallback((direction) => (e) => {
+        e.stopPropagation();
+        setResizeDirection(direction);
+    }, []);
+    const handleScrimClick = useCallback((e) => {
+        if (e.target === e.currentTarget && onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const header = useMemo(() => (_jsxs("header", { onMouseDown: handleMouseDown, children: [_jsx("span", { children: headline }), customHeader || (_jsx("button", { className: styles["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const content = useMemo(() => (_jsx("section", { children: children })), [children]);
+    const footer = useMemo(() => (_jsx("footer", { children: customFooter || (_jsx("button", { className: "cw-button-icon cwi-save", onClick: onSave })) })), [customFooter, onSave]);
+    const resizeHandles = useMemo(() => size.autoHeight
+        ? [
+            // Only horizontal handles if autoHeight is true
+            _jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
+            _jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w")
+        ]
+        : [
+            // All handles if autoHeight is false
+            _jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
+            _jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
+            _jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
+            _jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w"),
+            _jsx("div", { "data-handle-ne": true, onMouseDown: handleResizeMouseDown("ne") }, "handle-ne"),
+            _jsx("div", { "data-handle-nw": true, onMouseDown: handleResizeMouseDown("nw") }, "handle-nw"),
+            _jsx("div", { "data-handle-se": true, onMouseDown: handleResizeMouseDown("se") }, "handle-se"),
+            _jsx("div", { "data-handle-sw": true, onMouseDown: handleResizeMouseDown("sw") }, "handle-sw")
+        ], [size.autoHeight, handleResizeMouseDown]);
+    const displayDimensions = useMemo(() => {
+        // Prepare width and height with original units for display
+        const displayWidth = `${convertFromPx(size.width, size.widthUnit)}${size.widthUnit}`;
+        // If autoHeight, don't specify height and let it adapt to content
+        const displayHeight = size.autoHeight
+            ? 'auto'
+            : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
+        return { displayWidth, displayHeight };
+    }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
+    const dialogContent = (_jsx("div", { "data-has-scrim": hasScrim, className: styles["cw-dialog-main"], onClick: handleScrimClick, children: _jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                width: displayDimensions.displayWidth,
+                height: displayDimensions.displayHeight
+            }, children: [header, content, hideFooter !== true && footer, resizeHandles] }) }));
+    return open ? createPortal(dialogContent, document.body) : null;
+};

package/dist/src/components/layout/dialog/CwDialogManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwDialogManager.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialogManager.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,qBAAa,eAAe;IAC3B,OAAO,CAAC,MAAM,CAAC,WAAW,CAA4E;WAExF,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI;WAUlD,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;WAU7B,eAAe,IAAI,IAAI;WAMvB,eAAe,IAAI,IAAI;WAOvB,gBAAgB,IAAI,IAAI;WAOxB,kBAAkB,IAAI,MAAM;CAG1C"}
+{"version":3,"file":"CwDialogManager.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialogManager.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,qBAAa,eAAe;IAC3B,OAAO,CAAC,MAAM,CAAC,WAAW,CAA4E;WAExF,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI;WAUlD,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;WAU7B,eAAe,IAAI,IAAI;WAMvB,eAAe,IAAI,IAAI;WAOvB,gBAAgB,IAAI,IAAI;WAOxB,kBAAkB,IAAI,MAAM;CAG1C"}

package/dist/src/components/layout/dialog/CwDialogManager.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { CwDialog } from "./CwDialog";
+export class CwDialogManager {
+    static openDialogs = new Map();
+    static OpenDialog(id, props) {
+        if (!CwDialogManager.openDialogs.has(id)) {
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            const root = createRoot(container);
+            root.render(_jsx(CwDialog, { ...props }));
+            CwDialogManager.openDialogs.set(id, { props, container });
+        }
+    }
+    static CloseDialog(id) {
+        const dialog = CwDialogManager.openDialogs.get(id);
+        if (dialog) {
+            const root = createRoot(dialog.container);
+            root.unmount();
+            dialog.container.remove();
+            CwDialogManager.openDialogs.delete(id);
+        }
+    }
+    static CloseAllDialogs() {
+        CwDialogManager.openDialogs.forEach((_dialog, id) => {
+            CwDialogManager.CloseDialog(id);
+        });
+    }
+    static CloseLastDialog() {
+        const lastDialogId = Array.from(CwDialogManager.openDialogs.keys()).pop();
+        if (lastDialogId) {
+            CwDialogManager.CloseDialog(lastDialogId);
+        }
+    }
+    static CloseFirstDialog() {
+        const firstDialogId = Array.from(CwDialogManager.openDialogs.keys())[0];
+        if (firstDialogId) {
+            CwDialogManager.CloseDialog(firstDialogId);
+        }
+    }
+    static GetOpenDialogCount() {
+        return CwDialogManager.openDialogs.size;
+    }
+}

package/dist/src/components/layout/list/details/CwExpandable.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * An expandable element with briefing and children displayed when clicked
+ * @param briefing Title of the expandable
+ * @param onToggle Function to run when expandable is toggled open/closed
+ * @param onClose Function to run when expandable is closed
+ * @param onOpen Function to run when expandable is opened
+ * @example
+ * <CwExpandable briefing="Title here">Contents here</CwExpandable>
+ */
+export const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detailsProps }) => {
+    const myRef = useRef(null);
+    useEffect(() => {
+        myRef.current?.addEventListener("click", ev => {
+            const isOpen = ev.currentTarget.open;
+            onToggle?.(!isOpen);
+            if (!isOpen)
+                onOpen?.(ev);
+            else
+                onClose?.(ev);
+        });
+    }, [onClose, onOpen, onToggle]);
+    return (_jsx("div", { className: "cw-expandable", children: _jsxs("details", { ref: myRef, ...detailsProps, children: [_jsx("summary", { children: briefing }), children && _jsx("section", { children: children })] }) }));
+};
+export const _CwExpandableTest = () => {
+    return _jsx(CwExpandable, { briefing: "a", children: "hola" });
+};

package/dist/src/components/layout/list/key-value/CwKeyValueList.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./cw-key-value-list.css";
+/**
+ * A component for displaying key-value pairs in a definition list format
+ * Used for read-only display of structured data
+ *
+ * @example
+ * <CwKeyValueList
+ *   items={[
+ *     { key: "length", label: "Length", value: "10", suffix: "m" },
+ *     { key: "width", label: "Width", value: null, suffix: "m" }
+ *   ]}
+ *   emptyValue="N/A"
+ * />
+ */
+export const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row" }) => {
+    return (_jsx("dl", { className: `cw-keyvalue-list ${className}`, children: items.map(item => (_jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [_jsx("dt", { children: item.label }), _jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+                        ? (React.isValidElement(item.value)
+                            ? item.value
+                            : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
+                        : emptyValue })] }, item.key))) }));
+};

package/dist/src/components/layout/list/sortable/CwSortableList.d.ts

@@ -54,7 +54,8 @@ export interface CwSortableListProps<T extends SortableItem> {
     movedItems?: Set<string | number>;
     emptyMessage?: ReactNode;
     readOnly?: boolean;
+    maxHeight?: number | string;
 }
-export declare function CwSortableList<T extends SortableItem>({ items, onReorder, renderItem, className, movedItems, emptyMessage, readOnly, }: CwSortableListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CwSortableList<T extends SortableItem>({ items, onReorder, renderItem, className, movedItems, emptyMessage, readOnly, maxHeight, }: CwSortableListProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CwSortableList.d.ts.map

package/dist/src/components/layout/list/sortable/CwSortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwSortableList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/sortable/CwSortableList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,UAAU,YAAY;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,YAAY;IAC1D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC9D,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK;QACxB,KAAK,EAAE,SAAS,CAAC;QACjB,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,SAAS,CAAC;KAC5B,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,EACtD,KAAK,EACL,SAAS,EACT,UAAU,EACV,SAAc,EACd,UAAsB,EACtB,YAAoC,EACpC,QAAgB,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA2IxB"}
+{"version":3,"file":"CwSortableList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/sortable/CwSortableList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,UAAU,YAAY;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,YAAY;IAC1D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC9D,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK;QACxB,KAAK,EAAE,SAAS,CAAC;QACjB,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,SAAS,CAAC;KAC5B,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,EACtD,KAAK,EACL,SAAS,EACT,UAAU,EACV,SAAc,EACd,UAAsB,EACtB,YAAoC,EACpC,QAAgB,EAChB,SAAmB,GACnB,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA2IxB"}

package/dist/src/components/layout/list/sortable/CwSortableList.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { CwButton } from '../../../control/action/button/CwButton';
+import { CwIcon } from '../../../display/graphics/icon/CwIcon';
+import styles from "./cw-sortable-list.module.css";
+export function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", }) {
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [dropIndicatorIndex, setDropIndicatorIndex] = useState(null);
+    const [lastValidDropIndex, setLastValidDropIndex] = useState(null);
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const toggleExpanded = (itemId) => {
+        setExpandedItems(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(itemId)) {
+                newSet.delete(itemId);
+            }
+            else {
+                newSet.add(itemId);
+            }
+            return newSet;
+        });
+    };
+    const cleanupDragState = () => {
+        setDraggedItem(null);
+        setDropIndicatorIndex(null);
+        setLastValidDropIndex(null);
+    };
+    const handleDragStart = (e, item) => {
+        setDraggedItem(item);
+        setLastValidDropIndex(null);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragEnd = () => {
+        if (draggedItem && lastValidDropIndex !== null) {
+            const dragIndex = items.findIndex(item => item.id === draggedItem.id);
+            if (dragIndex !== lastValidDropIndex && dragIndex !== lastValidDropIndex - 1) {
+                const newItems = [...items];
+                const [draggedElement] = newItems.splice(dragIndex, 1);
+                let finalIndex = lastValidDropIndex;
+                if (dragIndex < finalIndex)
+                    finalIndex -= 1;
+                newItems.splice(finalIndex, 0, draggedElement);
+                // Ahora pasamos el id del elemento movido al callback
+                onReorder(newItems, draggedItem.id);
+            }
+        }
+        cleanupDragState();
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (!draggedItem)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const mouseY = e.clientY;
+        const elementCenterY = rect.top + (rect.height / 2);
+        const dropIndex = mouseY < elementCenterY ? index : index + 1;
+        setLastValidDropIndex(dropIndex);
+        if (dropIndicatorIndex !== dropIndex) {
+            setDropIndicatorIndex(dropIndex);
+        }
+    };
+    if (items.length === 0) {
+        return (_jsx("div", { className: `${styles.sortableList} ${styles.emptyState} ${className}`, children: _jsx("div", { className: styles.emptyMessage, children: emptyMessage }) }));
+    }
+    return (_jsx("div", { className: `${styles.sortableList} ${className}`, children: items.map((item, index) => {
+            const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
+            const isDragging = draggedItem?.id === item.id;
+            const isMoved = movedItems.has(item.id);
+            const canExpand = Boolean(expandedContent);
+            const isExpanded = expandedItems.has(item.id);
+            return (_jsxs(React.Fragment, { children: [dropIndicatorIndex === index && _jsx("div", { className: styles.dropIndicator }), _jsxs("div", { className: `${styles.sortableItem} ${isDragging ? styles.dragging : ''} ${isMoved ? styles.moved : ''}`, draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [_jsxs("header", { children: [canExpand ? (_jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (_jsx("div", { className: styles.sortableHandle, children: _jsx(CwIcon, { iconId: "grip-dots" }) })) : null, _jsxs("div", { className: styles.sortableContent, children: [_jsx("div", { className: styles.sortableTitle, children: title }), extraContent && _jsx("div", { className: styles.sortableExtraContent, children: extraContent })] }), _jsx("div", { className: styles.sortableActions, children: actions })] }), isExpanded && expandedContent && (_jsx("div", { className: styles.expandedContent, children: expandedContent }))] }), dropIndicatorIndex === items.length && index === items.length - 1 && (_jsx("div", { className: styles.dropIndicator }))] }, item.id));
+        }) }));
+}

package/dist/src/components/layout/list/sortable/useSortableList.js

@@ -0,0 +1,53 @@
+import { useCallback, useState } from "react";
+export function useSortableList(initialItems) {
+    const [items, setItems] = useState(initialItems);
+    const [originalItems, setOriginalItems] = useState(initialItems);
+    const [hasChanges, setHasChanges] = useState(false);
+    const [movedItems, setMovedItems] = useState(new Set());
+    const [resetKey, setResetKey] = useState(0);
+    const handleReorder = useCallback((newItems, movedId) => {
+        setItems(newItems);
+        if (movedId !== undefined) {
+            setMovedItems(prev => new Set(prev).add(movedId));
+        }
+        setHasChanges(true);
+    }, []);
+    const addItem = (newItem) => {
+        setItems(prev => [...prev, newItem]);
+        setHasChanges(true);
+    };
+    const removeItem = (id) => {
+        setItems(prev => prev.filter(item => item.id !== id));
+        setHasChanges(true);
+    };
+    const handleSave = async (onSave) => {
+        await onSave(items);
+        setOriginalItems(items);
+        setMovedItems(new Set());
+        setHasChanges(false);
+        setResetKey(prev => prev + 1);
+    };
+    const updateItems = (newItems) => {
+        setItems(newItems);
+        setOriginalItems(newItems); // Keep original items in sync
+        setHasChanges(true);
+    };
+    const handleDiscard = () => {
+        setItems(originalItems);
+        setMovedItems(new Set());
+        setHasChanges(false);
+        setResetKey(prev => prev + 1);
+    };
+    return {
+        items,
+        setItems: updateItems,
+        handleReorder,
+        handleSave,
+        handleDiscard,
+        addItem,
+        movedItems,
+        removeItem,
+        hasChanges,
+        resetKey,
+    };
+}

package/dist/src/components/layout/master-detail/CwMasterDetail.d.ts

@@ -0,0 +1,41 @@
+import React, { type ReactNode } from 'react';
+export interface CwMasterDetailItem {
+    key: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface CwMasterDetailProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Items displayed in the master list */
+    items: CwMasterDetailItem[];
+    /** Key of the currently selected item */
+    selectedKey?: string;
+    /** Called when an item is selected */
+    onSelect?: (key: string) => void;
+    /** Content rendered in the detail panel for the selected item */
+    detailContent?: ReactNode;
+    /** Placeholder shown when no item is selected */
+    emptyDetail?: ReactNode;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Called when the search value changes */
+    onSearch?: (value: string) => void;
+    /** Optional header content rendered above the list (below search) */
+    masterHeader?: ReactNode;
+    /** Optional footer content at the bottom of the master panel */
+    masterFooter?: ReactNode;
+    /** Initial width of the master panel in pixels */
+    masterWidth?: number;
+    /** Minimum width of the master panel in pixels */
+    minMasterWidth?: number;
+    /** Maximum width of the master panel in pixels */
+    maxMasterWidth?: number;
+    /** Whether the master panel is resizable */
+    resizable?: boolean;
+    /** Whether to show the search input */
+    showSearch?: boolean;
+}
+export declare const CwMasterDetail: React.FC<CwMasterDetailProps>;
+//# sourceMappingURL=CwMasterDetail.d.ts.map

package/dist/src/components/layout/master-detail/CwMasterDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwMasterDetail.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/master-detail/CwMasterDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtF,MAAM,WAAW,kBAAkB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,yCAAyC;IACzC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,iEAAiE;IACjE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qEAAqE;IACrE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gEAAgE;IAChE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6HxD,CAAC"}

package/dist/src/components/layout/modal/CwModalReportFunctional.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CwDialog } from "../dialog/CwDialog";
+export const CwModalReportFunctional = (props) => {
+    const [isModal, _setIsModal] = useState(props.isModal !== undefined && props.isModal !== null ? props.isModal : true);
+    const renderContentModal = () => {
+        if (props.name !== "Empty.pdf") {
+            return (_jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: _jsx("embed", { src: `data:application/pdf;base64,${props.content}`, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) }));
+        }
+        else {
+            return (_jsx("div", { children: _jsxs("h1", { style: { marginLeft: "2em" }, children: ["Please add a(n) ", props.reportName, " report in ", props.moduleSettings, " Settings"] }) }));
+        }
+    };
+    const renderContentNotModal = () => {
+        if (props.name !== "Empty.pdf") {
+            return (_jsx("embed", { src: "data:application/pdf;base64," + props.content, type: "application/pdf", width: "100%", height: "600px" }));
+        }
+        else {
+            return (_jsxs("div", { children: ["Please add a(n) ", props.reportName, " report in ", props.moduleSettings, " Settings"] }));
+        }
+    };
+    return (_jsx("div", { id: "cwelltModalReportContent", children: isModal ? (_jsx(CwDialog, { open: props.visible, width: props.width, height: props.height, headline: props.title, onClose: props.onCloseModal, hideFooter: true, children: renderContentModal() })) : (_jsx("div", { children: renderContentNotModal() })) }));
+};

package/dist/src/components/layout/modal/hover/CwModalHover.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * A modal that appears when an element is hovered
+ * @param children Contents of the modal
+ * @param hovereable Element to hover to display the modal
+ * @param onFirstOpened Function to run only once when the modal opens for the first time
+ * @example
+ * <CwModalHover hovereable={<span>Hover me!</span>}>
+ *   <p>Hello there</p>
+ * </CwModalHover>
+ */
+export const CwModalHover = ({ children, hovereable, onFirstOpened, ...dialogProps }) => {
+    // Do not turn these into useState, it will break it.
+    const mouseDialogState = { isInsideDialog: false };
+    const mouseHoverState = { isInsideHover: false };
+    const isFirstOpening = { value: true };
+    const dialogRef = useRef(null);
+    const hoverRef = useRef(null);
+    const tryClosingDialog = () => {
+        setTimeout(() => {
+            if (!mouseHoverState.isInsideHover && !mouseDialogState.isInsideDialog) {
+                if (dialogRef.current) {
+                    dialogRef.current.open = false;
+                }
+            }
+        }, 100);
+    };
+    const tryOpeningDialog = () => {
+        setTimeout(() => {
+            if (mouseHoverState.isInsideHover || mouseDialogState.isInsideDialog) {
+                if (dialogRef.current) {
+                    dialogRef.current.open = true;
+                    if (!isFirstOpening.value) {
+                        isFirstOpening.value = true;
+                        onFirstOpened?.();
+                    }
+                }
+            }
+        }, 50);
+    };
+    useEffect(() => {
+        if (hoverRef.current) {
+            hoverRef.current.onmouseenter = () => {
+                mouseHoverState.isInsideHover = true;
+                tryOpeningDialog();
+            };
+            hoverRef.current.onmouseleave = () => {
+                mouseHoverState.isInsideHover = false;
+                tryClosingDialog();
+            };
+        }
+    }, [hoverRef]);
+    return (_jsxs("div", { ref: hoverRef, className: "cw-modal-hover", children: [_jsx("div", { "data-hovereable-icon": true, children: hovereable }), _jsx("dialog", { ...dialogProps, ref: dialogRef, onMouseEnter: () => {
+                    mouseDialogState.isInsideDialog = true;
+                    tryOpeningDialog();
+                }, onMouseLeave: () => {
+                    mouseDialogState.isInsideDialog = false;
+                    tryClosingDialog();
+                }, children: children })] }));
+};

package/dist/src/components/layout/modal/legacy/cw_modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cw_modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/modal/legacy/cw_modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,YAAY;IAE5B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,WAAW,CAAC,EAAE,GAAG,CAAC;IAElB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,YAAY,CAAC,EAAE,GAAG,CAAC;IAGnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,eAAe,CAAC,EAAE,GAAG,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC;AAID;;;GAGG;AACH,wBAAgB,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,2CA+H5E"}
+{"version":3,"file":"cw_modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/modal/legacy/cw_modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,MAAM,WAAW,YAAY;IAE5B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,WAAW,CAAC,EAAE,GAAG,CAAC;IAElB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,YAAY,CAAC,EAAE,GAAG,CAAC;IAGnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,eAAe,CAAC,EAAE,GAAG,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC;AAID;;;GAGG;AACH,wBAAgB,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,2CAkG5E"}