@cwellt_software/cwellt-reactjs-lib 1.0.9 → 1.1.1

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.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.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import "./cw-key-value-list.css";
 /**
  * Props for the CwKeyValueList component

package/dist/src/components/layout/list/key-value/CwKeyValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwKeyValueList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/key-value/CwKeyValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC;;GAEG;AACH,UAAU,mBAAmB;IAE5B,KAAK,EAAE,KAAK,CAAC;QAEZ,GAAG,EAAE,MAAM,CAAC;QAEZ,KAAK,EAAE,MAAM,CAAC;QAEd,KAAK,EAAE,GAAG,CAAC;QACX,4EAA4E;QAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBxD,CAAC;AAEF,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"CwKeyValueList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/key-value/CwKeyValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC;;GAEG;AACH,UAAU,mBAAmB;IAE5B,KAAK,EAAE,KAAK,CAAC;QAEZ,GAAG,EAAE,MAAM,CAAC;QAEZ,KAAK,EAAE,MAAM,CAAC;QAEd,KAAK,EAAE,GAAG,CAAC;QACX,4EAA4E;QAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyBxD,CAAC;AAEF,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+/**
+ * CwSortableList
+ *
+ * A drag-and-drop sortable list component that allows users to visually reorder items.
+ * It is designed to work seamlessly with the associated `useSortableList` hook,
+ * which manages state, tracks moved items, and handles unsaved changes (save/discard).
+ *
+ * @template T - The item type extending SortableItem (must include an `id` field)
+ *
+ * @param {Object} props
+ * @param {T[]} props.items - The array of sortable items.
+ * @param {(newItems: T[], movedId?: string | number) => void} props.onReorder
+ *   Callback triggered when the list is reordered.
+ *   - `newItems`: The updated list after reordering.
+ *   - `movedId`: The ID of the item that was moved (if applicable).
+ * @param {(item: T) => {title: ReactNode, extraContent?: ReactNode, actions?: ReactNode, showHandle?: boolean}} props.renderItem
+ *   Function that defines how each item should be rendered.
+ * @param {string} [props.className] - Optional CSS class for the list container.
+ * @param {Set<string|number>} [props.movedItems] - Set of item IDs that have been moved, used to apply the `moved` style.
+ *
+ * @example
+ * const {
+ *   items,
+ *   handleReorder,
+ *   movedItems
+ * } = useSortableList(initialItems);
+ *
+ * <CwSortableList
+ *   items={items}
+ *   onReorder={handleReorder}
+ *   movedItems={movedItems}
+ *   renderItem={(item) => ({
+ *     title: item.name,
+ *     extraContent: <span>{item.duration}</span>
+ *   })}
+ * />
+ */
+interface SortableItem {
+    id: string | number;
+    [key: string]: any;
+}
+export interface CwSortableListProps<T extends SortableItem> {
+    items: T[];
+    onReorder: (newItems: T[], movedId?: string | number) => void;
+    renderItem: (item: T) => {
+        title: ReactNode;
+        extraContent?: ReactNode;
+        actions?: ReactNode;
+        showHandle?: boolean;
+        expandedContent?: ReactNode;
+    };
+    className?: string;
+    movedItems?: Set<string | number>;
+    emptyMessage?: ReactNode;
+    readOnly?: boolean;
+}
+export declare function CwSortableList<T extends SortableItem>({ items, onReorder, renderItem, className, movedItems, emptyMessage, readOnly, }: 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

@@ -0,0 +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"}

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.d.ts

@@ -0,0 +1,58 @@
+/**
+ * useSortableList
+ *
+ * A React hook that manages the state of a sortable list compatible with `CwSortableList`.
+ * It provides utilities to reorder, add, remove, save, and discard changes
+ * while tracking which items have been moved for styling purposes.
+ *
+ * @template T - The item type extending SortableItem (must include an `id` field)
+ *
+ * @param {T[]} initialItems - Initial array of items for the sortable list.
+ *
+ * @returns {{
+ *   items: T[],
+ *   setItems: React.Dispatch<React.SetStateAction<T[]>>,
+ *   handleReorder: (newItems: T[], movedId?: string | number) => void,
+ *   handleSave: (onSave: (items: T[]) => Promise<void>) => Promise<void>,
+ *   handleDiscard: () => void,
+ *   addItem: (newItem: T) => void,
+ *   removeItem: (id: string | number) => void,
+ *   movedItems: Set<string|number>,
+ *   hasChanges: boolean,
+ *   resetKey: number
+ * }}
+ *
+ * @example
+ * const {
+ *   items,
+ *   handleReorder,
+ *   handleSave,
+ *   handleDiscard,
+ *   movedItems,
+ *   hasChanges
+ * } = useSortableList(initialItems);
+ *
+ * <CwSortableList
+ *   items={items}
+ *   onReorder={handleReorder}
+ *   movedItems={movedItems}
+ *   renderItem={(item) => ({ title: item.name })}
+ * />
+ */
+export interface SortableItem {
+    id: string | number;
+    [key: string]: any;
+}
+export declare function useSortableList<T extends SortableItem>(initialItems: T[]): {
+    items: T[];
+    setItems: (newItems: T[]) => void;
+    handleReorder: (newItems: T[], movedId?: string | number) => void;
+    handleSave: (onSave: (items: T[]) => Promise<void>) => Promise<void>;
+    handleDiscard: () => void;
+    addItem: (newItem: T) => void;
+    movedItems: Set<string | number>;
+    removeItem: (id: string | number) => void;
+    hasChanges: boolean;
+    resetKey: number;
+};
+//# sourceMappingURL=useSortableList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSortableList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/sortable/useSortableList.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,MAAM,WAAW,YAAY;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EAAE,YAAY,EAAE,CAAC,EAAE;;yBAqCzC,CAAC,EAAE;8BA7BW,CAAC,EAAE,YAAY,MAAM,GAAG,MAAM;yBAoBzC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC;;uBAXrC,CAAC;;qBAMH,MAAM,GAAG,MAAM;;;EAuCvC"}

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/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() })) }));
+};