@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/src/components/layout/align/CwAlign.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * General purpose aligner flex container, useful for column or row view.
+ * @remarks
+ * ```txt
+ * flexDirection="row" (default):
+ *
+ * <Row A> | - item 1 - item 2 - item 3 |
+ * <Row B> | - item 1 - item 2 - item 3 |
+ *
+ * flexDirection="column":
+ *
+ *   <Col A>    <Col B>
+ * | - item 1 | - item 1 |
+ * | - item 2 | - item 2 |
+ * | - item 3 | - item 3 |
+ *
+ * ```
+ * @example
+ * <CwAlign flexDirection="column">
+ *   <div>
+ *     <h2>ColumnA</h2>
+ *   </div>
+ *   <div>
+ *     <h2>ColumnB</h2>
+ *   </div>
+ * </CwAlign>
+ */
+export function CwAlign(props) {
+    const { alignContent, alignItems, alignSelf, bottom, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, cssHeight, justifyContent, left, margin, order, padding, position, right, top, cssWidth, gap, ...divProps } = props;
+    return (_jsx("div", { className: "cw-align", ...divProps, style: {
+            alignContent: alignContent,
+            alignItems: alignItems,
+            alignSelf: alignSelf,
+            bottom: bottom,
+            display: display ?? "flex",
+            flexBasis: flexBasis,
+            flexDirection: flexDirection,
+            flexGrow: flexGrow,
+            flexShrink: flexShrink,
+            flexWrap: flexWrap,
+            height: cssHeight,
+            justifyContent: justifyContent,
+            left: left,
+            margin: margin,
+            order: order,
+            padding: padding,
+            position: position,
+            right: right,
+            top: top,
+            width: cssWidth,
+            gap: gap
+        }, children: props.children }));
+}

package/dist/src/components/layout/card/CwCard.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from '../../control/action/button/CwButton';
+import { CwLoading } from '../../display/graphics/loading/CwLoading';
+import { CwChip } from '../../display/text/tag/CwChip';
+import styles from './cw-card.module.css';
+/**
+* CwCard - A simple card component for displaying content in a contained format
+*
+* @example
+* <CwCard
+*   title="Card Title"
+*   subtitle="Card Subtitle"
+*   onEdit={handleEdit}
+*   onDelete={confirmDeletion}
+*   footer="Last updated: 2 days ago"
+*   chips={[
+*     { label: 'Important', colorScheme: 'danger' },
+*     { label: 'Custom', colorScheme: 'custom', customColor: '#8a2be2' }
+*   ]}
+* >
+*   <p>This is the main content of the card.</p>
+* </CwCard>
+**/
+export const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", }) => {
+    // Construct class names using CSS modules
+    const cardClassNames = [
+        'cw-card',
+        styles.card,
+        className,
+        clickable ? styles.clickable : '',
+        disabled ? styles.disabled : '',
+        isLoading ? styles.loading : '',
+    ].filter(Boolean).join(' ');
+    // Handle click event when card is clickable
+    const handleClick = () => {
+        if (clickable && onClick && !disabled && !isLoading) {
+            onClick();
+        }
+    };
+    // Determine if actions should be rendered
+    const hasActions = onEdit || onDelete || extraActions;
+    // Determine if header should be rendered
+    const hasHeader = title || subtitle || (hasActions && direction === "column");
+    // Determine if chips should be rendered
+    const hasChips = chips.length > 0;
+    // Determine if footer should be rendered
+    const hasFooter = hasChips || footer || (hasActions && direction === "row");
+    // Actions component to reuse
+    const ActionsComponent = hasActions && !disabled ? (_jsxs("div", { className: styles.actions, children: [extraActions ?? null, onEdit && _jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && _jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    return (_jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
+            role: 'button',
+            tabIndex: 0,
+            onClick: handleClick,
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (_jsxs("header", { children: [(title || subtitle) && (_jsxs("div", { className: styles.headerContent, "data-alignment": alignment, children: [title && _jsx("h5", { children: title }), subtitle && _jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), _jsx("div", { className: styles.content, children: children }), hasFooter && (_jsxs("footer", { children: [hasChips && (_jsx("div", { className: styles.footerTags, children: chips.map((chip, index) => (_jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (_jsx("div", { className: styles.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (_jsx("div", { className: styles.loadingOverlay, children: _jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+};

package/dist/src/components/layout/card/CwCardList.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { CwLoading } from '../../display/graphics/loading/CwLoading';
+import styles from './cw-card-list.module.css';
+export function CwCardList({ items, renderCard, pageSize = 10, className = '', layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey }) {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [sortKey, setSortKey] = useState(defaultSortKey || sortOptions[0]?.key || '');
+    const [sortDirection, setSortDirection] = useState('asc');
+    // Sort items based on selected criteria
+    const sortedItems = useMemo(() => {
+        if (!sortKey || sortOptions.length === 0)
+            return items;
+        const sortOption = sortOptions.find(option => option.key === sortKey);
+        if (!sortOption)
+            return items;
+        const sorted = [...items].sort(sortOption.sortFn);
+        return sortDirection === 'desc' ? sorted.reverse() : sorted;
+    }, [items, sortKey, sortDirection, sortOptions]);
+    const totalPages = Math.ceil(sortedItems.length / pageSize);
+    const startIndex = (currentPage - 1) * pageSize;
+    const visibleItems = sortedItems.slice(startIndex, startIndex + pageSize);
+    // Reset to first page when sorting changes
+    const handleSortChange = (newSortKey) => {
+        if (newSortKey === sortKey) {
+            setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortKey(newSortKey);
+            setSortDirection('asc');
+        }
+        setCurrentPage(1);
+    };
+    const gridStyle = {
+        '--card-width': `${defaultCardWidth}px`,
+        '--card-gap': `${cardGap}px`
+    };
+    return (_jsxs("div", { className: `${className}`, children: [sortOptions.length > 0 && (_jsxs("div", { className: styles.sortControls, children: [_jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), _jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles.sortSelect, children: sortOptions.map(option => (_jsx("option", { value: option.key, children: option.label }, option.key))) }), _jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (_jsx("div", { className: styles.loading, children: _jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (_jsx("div", { className: styles.emptyState, children: emptyState || _jsx("p", { children: "No items to display" }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (_jsx("div", { className: styles.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (_jsxs("div", { className: styles.pagination, children: [_jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), _jsxs("span", { className: styles.pageInfo, children: [currentPage, " of ", totalPages] }), _jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CwDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAsE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AA2C5J,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrF,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kIAAkI;IAClI,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACnE,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4HAA4H;IAC5H,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AAWD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2TtC,CAAC"}
+{"version":3,"file":"CwDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAsE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AA4C5J,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrF,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kIAAkI;IAClI,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACnE,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4HAA4H;IAC5H,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AAWD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAkWtC,CAAC"}

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,9 +1,9 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 import "./cw-key-value-list.css";
 /**
  * Props for the CwKeyValueList component
  */
-interface CwKeyValueListProps {
+export interface CwKeyValueListProps extends HTMLAttributes<HTMLDListElement> {
     items: Array<{
         key: string;
         label: string;
@@ -30,5 +30,4 @@ interface CwKeyValueListProps {
  * />
  */
 export declare const CwKeyValueList: React.FC<CwKeyValueListProps>;
-export type { CwKeyValueListProps };
 //# sourceMappingURL=CwKeyValueList.d.ts.map

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,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"}
+{"version":3,"file":"CwKeyValueList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/list/key-value/CwKeyValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,yBAAyB,CAAC;AACjC;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAE5E,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,CA2BxD,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.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));
+        }) }));
+}