@cwellt_software/cwellt-reactjs-lib 1.1.5 → 1.1.7

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

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

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

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

package/dist/src/components/layout/modal/legacy/cw_modal.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "antd";
+import { useRef, useState } from "react";
+// [ Draggable ]
+import Draggable from "react-draggable";
+// Reference for draggable modal
+export function CwModal(custModalProps) {
+    const draggableRef = useRef(null);
+    // Hooks [ modal draggable ]
+    const [isModalDisabled, setModalDisabled] = useState(true);
+    // [ optional : hideFooter by default it shows the footer ]
+    const isHide = custModalProps.hideModalActions !== null && custModalProps.hideModalActions !== undefined
+        ? custModalProps.hideModalActions
+        : false;
+    // [ Show custom button === true ? show : default buttons ]
+    const isShowcustButton = custModalProps.ShowcustButton !== null && custModalProps.ShowcustButton !== undefined
+        ? custModalProps.ShowcustButton
+        : false;
+    const cwelltOnMouseOverModal = () => {
+        setModalDisabled(false);
+    };
+    // [ OnMouseOut ]
+    const cwelltOnMouseOutModal = () => {
+        setModalDisabled(true);
+    };
+    // Default size of modal
+    const widthModalDef = custModalProps.widthModal !== null && custModalProps.widthModal !== undefined ? custModalProps.widthModal : "40em";
+    const modalStyle = {
+        // width default
+        widthDefStyle: {
+            width: "40em"
+        },
+        // width customizable
+        widthCustomStyle: {
+            width: custModalProps.widthModal
+        }
+    };
+    return (_jsx("div", { children: custModalProps.modalState && (_jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [_jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), _jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: _jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [_jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [_jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), _jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: _jsx("span", { className: "cwelltCloseIcon" }) })] }), _jsx("div", { className: "cwelltModalBody", children: _jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (
+                            // [ false : show modal ]
+                            _jsxs("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [_jsx(Tooltip, { placement: "bottom", title: "Save", color: "#368ee0", children: _jsx("div", { className: "cwellt_flex cwellt_justify_center cwelltModalFooterContButton", style: { width: "2em" }, children: _jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg cwellt_btn_save ", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) }) }), isShowcustButton === true ? (_jsx(Tooltip, { placement: "bottom", title: custModalProps.custButtonTitle, color: custModalProps.custColorButtonTooltip, children: _jsx("div", { className: "cwellt_flex cwellt_justify_center cwelltModalFooterContButton", style: { width: "2em" }, children: _jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg " +
+                                                    custModalProps.custButtonClassName, onClick: custModalProps.custButtonClick }) }) })) : (_jsx("div", {}))] })) : (
+                            // true [ do not show the modal ]
+                            _jsx("div", { style: { display: "none" } }))] }) })] })) }));
+}

package/dist/src/components/layout/modal/legacy/cw_modal_confirm.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "antd";
+import React, { useState } from "react";
+// [ Draggable ]
+import Draggable from "react-draggable";
+// Reference for draggable modal
+const draggableRef = React.createRef();
+export function CwModalConfirm(custModalProps) {
+    const classNameOverlay = custModalProps.classNameModalOverlay !== null || custModalProps.classNameModalOverlay !== undefined
+        ? ""
+        : custModalProps.classNameModalOverlay;
+    // Default size of modal
+    const widthModalDef = custModalProps.widthModalConfirm !== null && custModalProps.widthModalConfirm !== undefined
+        ? custModalProps.widthModalConfirm
+        : "17em";
+    const modalStyle = {
+        // width default
+        widthDefStyle: {
+            width: "17em"
+        },
+        // width customizable
+        widthCustomStyle: {
+            width: custModalProps.widthModalConfirm
+        }
+    };
+    // Hooks [ modal draggable ]
+    const [ismodalDisabled, setModalDisabled] = useState(true);
+    // [ onMouseOver ]
+    const cwelltOnMouseOverModal = () => {
+        setModalDisabled(false);
+    };
+    // [ OnMouseOut ]
+    const cwelltOnMouseOutModal = () => {
+        setModalDisabled(true);
+        // finding parent element
+    };
+    return (_jsx("div", { children: custModalProps.modalStateConfirm && (_jsx("div", { className: classNameOverlay !== undefined ? custModalProps.classNameModalOverlay + " cwelltModalOverlay" : "", children: _jsx(Draggable, { disabled: ismodalDisabled, children: _jsxs("div", { className: " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "17em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [_jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [_jsx("div", { className: "cwelltModalTitle", children: custModalProps.headerTextConfirm }), _jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModalConfirm, children: _jsx("span", { className: "cwelltCloseIcon" }) })] }), _jsx("div", { className: "cwelltModalBody", children: _jsxs("div", { className: "cwelltContainerModalBody", children: [_jsx("div", { className: "cwellt_content_r_df_align", children: _jsx("label", { className: "cwellt_modalConfirmDesc", children: custModalProps.descriptionModalConfirm }) }), _jsx("div", { style: { display: "none" }, children: custModalProps.children })] }) }), _jsx("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: _jsx(Tooltip, { placement: "bottom", title: custModalProps.confirmText, color: "#368ee0", children: _jsx("div", { className: "cwellt_flex cwellt_justify_center", style: { width: "2em" }, children: _jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg  " +
+                                            custModalProps.confirmClassName, onClick: custModalProps.onClickActionModalConfirm }) }) }) })] }) }) })) }));
+}

package/dist/src/components/layout/modal/legacy/cw_modal_iframe.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from "antd";
+import * as React from "react";
+import Draggable from "react-draggable";
+export class CwModalIframe extends React.Component {
+    constructor(Props) {
+        super(Props);
+        this.state = {
+            disabled: true
+        };
+    }
+    // For draggable modal
+    draggableRef = React.createRef();
+    handleCancel = () => {
+        this.props.SET_IFRAME_VISIBLE(false);
+    };
+    render() {
+        const { disabled } = this.state;
+        return (_jsx(Modal
+        // title={this.props.title}
+        , { 
+            // title={this.props.title}
+            title: _jsx("div", { style: {
+                    width: "100%",
+                    cursor: "move"
+                }, onMouseOver: () => {
+                    if (this.state.disabled) {
+                        this.setState({
+                            disabled: false
+                        });
+                    }
+                }, onMouseOut: () => {
+                    this.setState({
+                        disabled: true
+                    });
+                }, children: this.props.title }), visible: this.props.visible, width: this.props.width, footer: null, bodyStyle: {
+                padding: 0,
+                width: this.props.width + "px",
+                height: this.props.height + "px"
+            }, onCancel: () => {
+                this.handleCancel();
+            }, destroyOnClose: true, modalRender: modal => (_jsx(Draggable, { disabled: disabled, children: _jsxs("div", { ref: this.draggableRef, children: [" ", modal] }) })), children: _jsx("div", { className: "videoWrapper", children: _jsx("iframe", { id: "iframeAspx", title: this.props.title, src: this.props.cblConfig + "/SSO/SSORedirect?url=" + encodeURIComponent(this.props.url) }) }) }));
+    }
+}

package/dist/src/components/layout/modal/legacy/cw_modal_report.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CwDialog } from "../../dialog/CwDialog";
+export class CwReportModal extends React.Component {
+    formRef = React.createRef();
+    constructor(props) {
+        super(props);
+        this.state = {
+            disabled: true,
+            // modal position
+            modalPosition: {
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            },
+            isModal: props.isModal !== undefined && props.isModal !== null ? props.isModal : true,
+        };
+    }
+    render() {
+        return (_jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (_jsxs(CwDialog, { open: this.props.visible, width: this.props.width, headline: this.props.title, customFooter: new Array(_jsx("div", {})), onClose: () => {
+                    this.formRef?.current?.resetFields();
+                    this.props.SET_MODAL_REPORT_VISIBLE(false);
+                }, hideFooter: true, children: [this.props.name !== "Empty.pdf" && (_jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: _jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (_jsx("div", { children: _jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (_jsxs("div", { children: [this.props.name !== "Empty.pdf" && (_jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "600px" })), this.props.name === "Empty.pdf" && (_jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
+    }
+}

package/dist/src/components/layout/table/grouped/CwTableGrouped.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+/**
+ * A table with expandable row groups.
+ * @param props The data to display
+ * @example
+ * const sampleTableData: CwTableGroupedData = {
+ * 	head: [
+ * 		{ title: "Name", expandSize: "20%" },
+ * 		{ title: "Age", expandSize: "10%" },
+ * 		{ title: "Occupation", expandSize: "50%" },
+ * 		{ title: "Location", expandSize: "20%" }
+ * 	],
+ * 	groups: [
+ * 		{
+ * 			title: "Group 1",
+ * 			rows: [
+ * 				{
+ * 					cells: [
+ * 						{ content: <span>John Doe</span>, compare: () => {} },
+ * 						{ content: <span>30</span>, compare: () => {} },
+ * 						{ content: <span>Software Engineer</span>, compare: () => {} },
+ * 						{ content: <span>New York</span>, compare: () => {} }
+ * 					]
+ * 				},
+ * 				{
+ * 					cells: [
+ * 						{ content: <span>Jane Smith</span>, compare: () => {} },
+ * 						{ content: <span>25</span>, compare: () => {} },
+ * 						{ content: <span>Graphic Designer</span>, compare: () => {} },
+ * 						{ content: <span>San Francisco</span>, compare: () => {} }
+ * 					]
+ * 				}
+ * 			]
+ * 		},
+ * 		{
+ * 			title: "Group 2",
+ * 			rows: [
+ * 				{
+ * 					cells: [
+ * 						{ content: <span>Alice Johnson</span>, compare: () => {} },
+ * 						{ content: <span>28</span>, compare: () => {} },
+ * 						{ content: <span>Data Analyst</span>, compare: () => {} },
+ * 						{ content: <span>Chicago</span>, compare: () => {} }
+ * 					]
+ * 				},
+ * 				{
+ * 					cells: [
+ * 						{ content: <span>Bob Roberts</span>, compare: () => {} },
+ * 						{ content: <span>32</span>, compare: () => {} },
+ * 						{ content: <span>Marketer</span>, compare: () => {} },
+ * 						{ content: <span>Miami</span>, compare: () => {} }
+ * 					]
+ * 				}
+ * 			]
+ * 		}
+ * 	]
+ * };
+ */
+export const CwTableGrouped = props => {
+    const [expandedGroups, setExpandedGroups] = useState({});
+    const handleToggle = (index) => {
+        setExpandedGroups(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+    return (_jsx("div", { className: "cw-table-grouped", style: { width: "100%" }, children: _jsxs("table", { style: { width: "100%" }, children: [_jsx("colgroup", { children: props.tableData.head.map((head, i) => (_jsx("col", { span: 1, style: { width: head.expandSize } }, i))) }), _jsx("thead", { children: _jsx("tr", { children: props.tableData.head.map((head, i) => (_jsx("th", { children: head.title }, i))) }) }), _jsx("tbody", { children: props.tableData.groups.map((group, i) => (_jsxs(React.Fragment, { children: [_jsx("tr", { "data-group": true, "data-expanded": !!expandedGroups[i], onClick: () => handleToggle(i), children: _jsx("td", { colSpan: props.tableData.head.length, children: group.title }) }), expandedGroups[i] &&
+                                group.rows.map((child, j) => (_jsx("tr", { "data-row": true, "data-row-last-of-group": j == group.rows.length - 1, children: child.cells.map((cell, k) => (_jsx("td", { children: cell.content }, k))) }, j)))] }, i))) }), _jsx("tfoot", {})] }) }));
+};

package/dist/src/components/layout/tabs/CwTabs.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styles from "./cw-tabs.module.css";
+const TabIcon = ({ icon }) => {
+    if (!icon)
+        return null;
+    // If icon is a string, treat it as a class name
+    if (typeof icon === 'string') {
+        return (_jsx("span", { className: `cwi-icons ${icon}` }));
+    }
+    // If icon is a ReactNode, return it directly
+    return icon;
+};
+/**
+ * CwTabs component for displaying tabbed content.
+ * @param CwTabsProps
+ * @example
+ The way to use the tab component:
+ *  const [activeTab, setActiveTab] = useState("1");
+ *
+ *  const handleTabChange = (tab) => {
+ *    setActiveTab(tab.key);
+ *  };
+ *
+ *  const tabs = [
+ *    { key: "1", title: 'Tab 1', icon: 'iconClassname', content: <div>Content for tab 1</div> },
+ *    { key: "2", title: 'Tab 2', icon: 'iconClassname', content: <div>Content for tab 2</div> },
+ *    { key: "3", title: 'Tab 3', icon: 'iconClassname', content: <div>Content for tab 3</div> },
+ *  ];
+ *
+ *  <CwTabs
+ *    tabs={tabs}
+ *    tabsPosition="top"
+ *    defaultActiveKey={activeTab}  // Use the current state for defaultActiveKey
+ *    onTabClick={handleTabChange}
+ *  />
+ * @returns A tab
+ */
+export function CwTabs(CwTabsProps) {
+    // const [activeTab, setActiveTab] = useState<string | null>(null);
+    const [activeTab, setActiveTab] = useState(CwTabsProps.defaultActiveKey !== undefined ? CwTabsProps.defaultActiveKey : CwTabsProps.tabs[0].key);
+    const handleTabClick = (tab) => {
+        setActiveTab(tab.key);
+        if (CwTabsProps.onTabClick) {
+            CwTabsProps.onTabClick(tab);
+        }
+    };
+    const position = CwTabsProps.tabsPosition || 'top';
+    const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
+        ? { minWidth: CwTabsProps.tabsListWidth }
+        : undefined;
+    return (_jsxs("div", { id: CwTabsProps.id, className: styles['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [_jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (_jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [_jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), _jsx("div", { className: styles['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+}

package/dist/src/index.d.ts

@@ -74,6 +74,12 @@ export { CwContextMenu } from "./components/control/action/contextmenu/CwContext
 export { CwContextualMenu } from "./components/control/action/contextual-menu/CwContextualMenu";
 export { CwButton } from "./components/control/action/button/CwButton";
 export { CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownload, CwBtnDownLoadAllInfo, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwButtonDef, CwFloatingButton } from "./components/control/action/buttons/CwButtons";
+export { CwDatePicker } from "./components/control/input/new-dates/CwDatePicker";
+export { CwDateRangePicker } from "./components/control/input/new-dates/CwDateRangePicker";
+export type { DateRangeValue } from "./components/control/input/new-dates/CwDateRangePicker";
+export { CwDateTimePicker } from "./components/control/input/new-dates/CwDateTimePicker";
+export { CwDateTimePickerCompact } from "./components/control/input/new-dates/CwDateTimePickerCompact";
+export { CwTimePicker } from "./components/control/input/new-dates/CwTimePicker";
 import { CwScheduler2 } from "./components/custom/scheduler-temporal/CwSchedulerComp2";
 import { CwScheduler } from "./components/custom/scheduler/CwSchedulerComp";
 export { CwScheduler, CwScheduler2 };