@cwellt_software/cwellt-reactjs-lib 1.2.0 → 1.2.2

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

@@ -1,55 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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.js

@@ -1,255 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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() })) }));
-};