@cwellt_software/cwellt-reactjs-lib 1.0.4 → 1.0.5

package/dist/index.es.js

@@ -120,17 +120,17 @@ function CwTooltip(CwelltTooltipProps) {
 function CwTag(tagProps) {
     const hideTag = (event_clickTag) => {
         const tag = event_clickTag.currentTarget.parentElement;
-        tag.classList.add("cwellt_display_none");
+        tag?.classList.add("cwellt_display_none");
     };
     const onClickClosableCustomTag = (event_clickClosableT) => {
         hideTag(event_clickClosableT);
-        if (typeof tagProps.onClickClosableTag === "function") {
+        if (tagProps.onClickClosableTag != undefined) {
             tagProps.onClickClosableTag(event_clickClosableT);
         }
     };
     const onClickCustomTag = (event_clickTag) => {
         // click option interface
-        if (typeof tagProps.onClickTag === "function") {
+        if (tagProps.onClickTag !== undefined) {
             tagProps.onClickTag(event_clickTag);
         }
     };
@@ -222,27 +222,50 @@ function CwDisplayMessage(message, type, duration) {
     CwMessageManager.getInstance().showMessage(message, type, duration);
 }
 
-function CwLoading(props) {
-    return (jsx("div", { children: jsxs("div", { "aria-busy": props.cwelltBooleanLoading, className: props.cwelltBooleanLoading === true
-                ? "cwellt_flex cwellt_flex_column cwelltContentLoading " +
-                    (props.cwelltClassNameContentLoading === undefined ? "" : props.cwelltClassNameContentLoading)
-                : "", children: [props.cwelltBooleanLoading === true ? (
-                // Container loading [ Icon and text of loading here is the property: cwelltClassNameLoading to custom orientation Vertical or Horizontal ]
-                jsxs("div", { className: props.cwelltClassNameLoading === undefined
-                        ? "cwelltContainerLoading cwellt_flex cwellt_justify_center cwellt_align_items_center cwellt_flex_wrap "
-                        : props.cwelltClassNameLoading +
-                            " cwelltContainerLoading cwellt_flex cwellt_justify_center cwellt_align_items_center cwellt_flex_wrap", children: [jsx("div", { className: props.cwelltSizeLoading === undefined
-                                ? "cwelltDefaultLoadingSize cwellt_loading cwellt_flex cwellt_align_items_center "
-                                : props.cwelltSizeLoading +
-                                    " cwelltDefaultLoadingSize cwellt_loading cwellt_flex cwellt_align_items_center ", children: jsx("span", { className: "cwelltIconLoading cwellt_flex cwellt_justify_center cwellt_align_items_center" }) }), jsx("div", { className: "cwelltTextLoading", children: jsx("h1", { children: props.cwelltTextLoading }) })] })) : (jsx("div", {})), jsx("div", { className: props.cwelltBooleanLoading === true ? "cwelltContentLoadingDisabled" : "", children: props.children })] }) }));
+/**
+ * CwLoading
+ *
+ * A versatile loading component that shows a spinner with optional text
+ * and disables the wrapped content while in loading state.
+ *
+ * @example
+ * // Basic usage
+ * <CwLoading isLoading={isSubmitting}>
+ *   <form>...</form>
+ * </CwLoading>
+ *
+ * // With custom text and size
+ * <CwLoading
+ *   isLoading={isLoading}
+ *   text="Please wait..."
+ *   size="large"
+ * >
+ *   <UserProfile />
+ * </CwLoading>
+ */
+function CwLoading({ isLoading = false, text = '', size = 'regular', iconPosition = 'outside', iconName = 'cwi-plane-solid', animation = 'spin', children }) {
+    const iconClasses = `cwi-icons ${iconName || ''}`;
+    return (jsxs("div", { "aria-busy": isLoading, className: isLoading ? 'cw-loading-container' : '', children: [isLoading && (jsxs("div", { className: "cw-loading-content", "data-size": size, "data-animation": animation, children: [jsx("div", { className: "cw-loading", "data-icon-position": iconPosition, children: jsx("span", { className: iconClasses }) }), text && (jsx("p", { children: text }))] })), jsx("div", { className: isLoading ? 'cw-loading-disabled-content' : '', children: children })] }));
 }
 
+/**
+ * @deprecated since may 2025. Use <CwLoading size="small"> instead.
+ *
+ * This component will be removed in a future release.
+ *
+ * @example
+ * // Instead of:
+ * <CwLoadingSmall />
+ *
+ * // Use:
+ * <CwLoading size="small" />
+ */
 function CwLoadingSmall(CwelltLoadingAppointements) {
-    return (jsx("div", { children: CwelltLoadingAppointements.cwelltBooleanLoadingAppointment === true ? (
+    return (jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (
         // * Show loading appointment
-        jsx("div", { className: "cwellt_loadingAppointmentContainer cwellt_loading cwellt_flex cwellt_align_items_center  cwellt_loading cwellt_flex cwellt_align_items_center ", children: jsx("span", { className: "cwelltIconLoading cwellt_flex cwellt_justify_center cwellt_align_items_center" }) })) : (
+        jsx("div", { className: "cw-loading-container", children: jsx("div", { className: "cw-loading" }) })) : (
         // Show empty div
-        jsx("div", { className: "cwellt_d_none" })) }));
+        jsx("div", {})) }));
 }
 
 var styles$b = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
@@ -502,55 +525,100 @@ const parseSize = (size) => {
     if (typeof size === 'number')
         return { value: size, unit: 'px' };
     // Match numeric value and unit
-    const match = size.match(/^([\d.]+)(\D+)$/);
+    const match = String(size).match(/^([\d.]+)(\D+)$/);
     if (match) {
-        return { value: parseFloat(match[1]), unit: match[2] };
+        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
-    return { value: parseFloat(size), unit: 'px' };
+    // 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) => {
-    if (size.unit === 'px')
-        return size.value;
-    if (size.unit === 'rem')
-        return size.value * 16; // Assuming 1rem = 16px
-    if (size.unit === 'vh')
-        return (window.innerHeight * size.value) / 100;
-    if (size.unit === 'vw')
-        return (window.innerWidth * size.value) / 100;
-    return size.value; // Default fallback
+    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;
+    }
 };
 const CwDialog = props => {
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, ...domProps } = props;
     const dialogRef = useRef(null);
-    // Default width and height with units
-    const defaultWidth = 800;
-    const defaultHeight = 600;
-    // Parse width and height from props or use defaults
-    const initialWidth = props.dialogSize?.width !== undefined ? props.dialogSize.width : defaultWidth;
-    const initialHeight = props.dialogSize?.height !== undefined ? props.dialogSize.height : defaultHeight;
-    // Parse the sizes to separate value and unit
-    const parsedWidth = parseSize(initialWidth);
-    const parsedHeight = parseSize(initialHeight);
-    // Convert to px for internal calculations
-    const initialWidthPx = convertToPx(parsedWidth);
-    const initialHeightPx = convertToPx(parsedHeight);
-    const initialDialogSize = {
-        width: initialWidthPx,
-        height: initialHeightPx,
-        widthUnit: parsedWidth.unit,
-        heightUnit: parsedHeight.unit
-    };
+    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({
-        x: window.document.body.clientWidth / 2 - initialDialogSize.width / 2,
-        y: window.document.body.clientHeight / 2 - initialDialogSize.height / 2
-    });
-    const [size, setSize] = useState(initialDialogSize);
+    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 = props.scrim !== false;
+    const hasScrim = scrim !== false;
+    // Adjust position after the dialog is rendered when using autoHeight
+    useEffect(() => {
+        if (size.autoHeight && dialogRef.current && open) {
+            // Get the actual height after rendering
+            const actualHeight = dialogRef.current.offsetHeight;
+            // Only update position if height is available
+            if (actualHeight > 0) {
+                setPosition(prevPos => ({
+                    ...prevPos,
+                    y: window.document.body.clientHeight / 2 - actualHeight / 2
+                }));
+            }
+        }
+    }, [size.autoHeight, open]);
     useEffect(() => {
         const handleMouseMove = (e) => {
             if (isDragging) {
@@ -580,29 +648,39 @@ const CwDialog = props => {
                         let newY = position.y;
                         const minVisiblePx = 64;
                         const minSize = 100;
-                        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);
+                        // 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);
+                            }
                         }
-                        if (resizeDirection.includes("e")) {
-                            newWidth = Math.min(Math.max(e.clientX - position.x, minSize), parentRect.width - position.x + dialogRect.width - minVisiblePx);
-                        }
-                        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);
+                        // 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({
-                            ...size,
                             width: newWidth,
-                            height: newHeight
+                            height: newHeight,
+                            widthUnit: size.widthUnit,
+                            heightUnit: size.heightUnit,
+                            autoHeight: size.autoHeight
                         });
                         setPosition({ x: newX, y: newY });
                     }
@@ -620,41 +698,54 @@ const CwDialog = props => {
             document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [isDragging, resizeDirection, dragStart, position, size]);
-    const handleMouseDown = (e) => {
+    const handleMouseDown = useCallback((e) => {
         setIsDragging(true);
         setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
-    };
-    const handleResizeMouseDown = (direction) => (e) => {
+    }, [position]);
+    const handleResizeMouseDown = useCallback((direction) => (e) => {
         e.stopPropagation();
         setResizeDirection(direction);
-    };
-    const header = (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: props.headline }), props.customHeader || (jsx("button", { className: styles$a["cw-dialog-button-close"], onClick: props.onClose, children: "\u2A2F" }))] }));
-    const content = (jsx("section", { style: { flex: 1, overflowX: "auto", overflowY: "auto", width: "100%" }, children: props.children }));
-    const footer = (jsx("footer", { style: { width: "100%" }, children: props.customFooter || (jsx("button", { className: "cw-button-icon cwi-save", onClick: props.onSave })) }));
-    const resizeHandles = [
-        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")
-    ];
-    // Prepare width and height with units for display
-    const displayWidth = `${size.width}${size.widthUnit === 'px' ? 'px' : size.widthUnit}`;
-    const displayHeight = `${size.height}${size.heightUnit === 'px' ? 'px' : size.heightUnit}`;
-    return (props.open && (jsx("div", { "data-has-scrim": hasScrim, className: styles$a["cw-dialog-main"], children: jsxs("dialog", { ...props, ref: dialogRef, style: {
+    }, []);
+    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$a["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]);
+    return (open && (jsx("div", { "data-has-scrim": hasScrim, className: styles$a["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
-                width: displayWidth,
-                height: displayHeight,
-                zIndex: props.zIndex,
-                minWidth: "200px", // Set an appropriate minimum size
-                minHeight: "200px", // Set an appropriate minimum size
-                display: "flex",
-                flexDirection: "column"
-            }, children: [header, content, props.isReport !== true && footer, resizeHandles] }) })));
+                width: displayDimensions.displayWidth,
+                height: displayDimensions.displayHeight
+            }, children: [header, content, hideFooter !== true && footer, resizeHandles] }) })));
 };
 
 const CwModalReportFunctional = (props) => {
@@ -675,7 +766,9 @@ const CwModalReportFunctional = (props) => {
             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, dialogSize: { width: props.width, height: props.height }, headline: props.title, customFooter: [jsx("div", {}, "footer")], onClose: props.onCloseModal, isReport: true, children: renderContentModal() })) : (jsx("div", { children: renderContentNotModal() })) }));
+    return (jsx("div", { id: "cwelltModalReportContent", children: isModal ? (jsx(CwDialog, { open: props.visible, width: props.width, headline: props.title, 
+            //customFooter={[<div key="footer"></div>]}
+            onClose: props.onCloseModal, hideFooter: true, children: renderContentModal() })) : (jsx("div", { children: renderContentNotModal() })) }));
 };
 
 class CwReportModal extends React.Component {
@@ -695,10 +788,10 @@ class CwReportModal extends React.Component {
         };
     }
     render() {
-        return (jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxs(CwDialog, { open: this.props.visible, dialogSize: { width: this.props.width, height: this.props.height }, headline: this.props.title, customFooter: new Array(jsx("div", {})), onClose: () => {
+        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);
-                }, isReport: 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"] }))] })) }));
+                }, 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"] }))] })) }));
     }
 }
 
@@ -820,161 +913,207 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
 }
 
 /**
- * A Table view
- * @param props
+ * A reusable and customizable table component.
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
  * @example
  * const columns = [
  *   {
  *     title: 'Name',
  *     dataIndex: 'name',
  *     key: 'name',
+ *     sortable: true, // Column is sortable
+ *     width: 100 // You can define the width of the column
  *   },
  *   {
  *     title: 'Age',
  *     dataIndex: 'age',
  *     key: 'age',
- *     render: (age) => <span>{age} years</span>, // Example of custom rendering
+ *     sortable: true,
+ *     render: (item) => <span>{item.age} years</span> // Custom rendering
  *   },
  *   {
  *     title: 'Address',
  *     dataIndex: 'address',
  *     key: 'address',
- *     render: (address) => (
- *       <a href={`https://maps.google.com/?q=${encodeURIComponent(address)}`} target="_blank">
- *         {address}
+ *     render: (item) => (
+ *       <a href={`https://maps.google.com/?q=${encodeURIComponent(item.address)}`} target="_blank" rel="noreferrer">
+ *         {item.address}
  *       </a>
- *     ), // Example of custom link rendering
- *   },
+ *     ) // Link rendering
+ *   }
  * ];
  *
  * const data = [
- *   {
- *     key: '1',
- *     name: 'Mike',
- *     age: 32,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '2',
- *     name: 'John',
- *     age: 42,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '3',
- *     name: 'Andres',
- *     age: 33,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '4',
- *     name: 'Gabriel',
- *     age: 22,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '5',
- *     name: 'Sergio',
- *     age: 47,
- *     address: '10 Downing Street',
- *   },
- *   {
- *     key: '6',
- *     name: 'Zacarias',
- *     age: 61,
- *     address: '10 Downing Street',
- *   },
+ *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
+ *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
+ *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
+ *   { key: '4', name: 'Gabriel', age: 22, address: '13 Downing Street' },
+ *   { key: '5', name: 'Sergio', age: 47, address: '14 Downing Street' },
+ *   { key: '6', name: 'Zacarias', age: 61, address: '15 Downing Street' }
  * ];
  *
- * const generateExpandedContent = (record) => {
- *   var testValue = record;
- *   return (
- *     <div>
- *       Contenido expandido personalizado para {record.name}
- *     </div>
- *   );
- * };
- *
- * ------------------------- render ---------------------------
+ * const generateExpandedContent = (record) => (
+ *   <div>
+ *     Custom expanded content for {record.name}
+ *   </div>
+ * );
  *
  * <CwTable
  *   columns={columns}
- *   data={data} // WTF whatever array of objects you add here, make sure each has a key otherwise everything will expand
- *   itemsPerPage={3}
+ *   data={data}
  *   pagination={true}
+ *   pageSizeOptions={[3, 5, 10]} // Optional, defaults to [5, 10, 20, 50]
  *   expandedRowRender={generateExpandedContent}
- *   onExpand={(e)=> test(e)}
+ *   onExpand={(item) => console.log('Expanded:', item)}
+ *   rowKey="key" // Optional, defaults to 'key'
+ *   textNoData="No data available" // Optional message when no data
+ *   loading={false} // Optional, shows loading indicator
+ *   scrollHeight={300} // Optional scroll height, defaults to 300
+ *   stickyHeader={true} // Optional, makes header sticky on scroll
+ *   classNameContainer="my-table-wrapper" // Optional wrapper class
+ *   className="my-table" // Optional table class
+ *   classNameRow="my-table-row" // Optional class for each row
+ *   id="custom-table-id" // Optional ID for the container
+ *   style={{ border: '1px solid #ccc' }} // Optional inline styles
  * />
+ *
  * @returns React component
  */
-function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameRow, style, classNameContainer, id, textNoData }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [expandedRowKey, setExpandedRowKey] = useState(null);
     const [sortConfig, setSortConfig] = useState({
         key: null,
         direction: "asc"
     });
-    // Function to handle expanding/collapsing rows
-    const handleRowExpand = (rowKey) => {
-        if (expandedRowKey === rowKey.key) {
-            setExpandedRowKey(null);
-        }
-        else {
-            setExpandedRowKey(rowKey.key);
-        }
-        if (typeof onExpand === "function") {
-            onExpand(rowKey);
-        }
-    };
-    // Function to handle sorting by column
-    const handleSort = (columnKey) => {
-        let direction = "asc";
-        if (sortConfig.key === columnKey && sortConfig.direction === "asc") {
-            direction = "desc";
-        }
-        setSortConfig({ key: columnKey, direction });
-    };
-    // Use useMemo to calculate sortedData
+    const [localItemsPerPage, setLocalItemsPerPage] = useState(pageSizeOptions[0]);
+    const [columnWidths, setColumnWidths] = useState(() => columns.reduce((acc, col) => {
+        if (col.width)
+            acc[col.key] = col.width;
+        return acc;
+    }, {}));
+    const handleItemsPerPageChange = useCallback((e) => {
+        setLocalItemsPerPage(parseInt(e.target.value, 10));
+        setCurrentPage(1);
+    }, []);
+    const handleRowExpand = useCallback((item) => {
+        const itemKey = item[rowKey];
+        setExpandedRowKey(prev => (prev === itemKey ? null : itemKey));
+        onExpand?.(item);
+    }, [rowKey, onExpand]);
+    const handleSort = useCallback((columnKey) => {
+        setSortConfig(prev => {
+            if (prev.key !== columnKey)
+                return { key: columnKey, direction: "asc" };
+            if (prev.direction === "asc")
+                return { key: columnKey, direction: "desc" };
+            return { key: null, direction: "asc" };
+        });
+    }, []);
     const sortedData = useMemo(() => {
         if (!data || data.length === 0)
-            return null;
+            return [];
         const dataCopy = [...data];
-        if (sortConfig.key !== null) {
+        if (sortConfig.key) {
             dataCopy.sort((a, b) => {
-                const aValue = a[sortConfig.key];
-                const bValue = b[sortConfig.key];
-                if (aValue < bValue) {
-                    return sortConfig.direction === "asc" ? -1 : 1;
-                }
-                if (aValue > bValue) {
-                    return sortConfig.direction === "asc" ? 1 : -1;
-                }
-                return 0;
+                const aVal = a[sortConfig.key];
+                const bVal = b[sortConfig.key];
+                return (aVal < bVal ? -1 : aVal > bVal ? 1 : 0) * (sortConfig.direction === "asc" ? 1 : -1);
             });
         }
         return dataCopy;
     }, [data, sortConfig]);
-    // Calculate paged data only if sortedData is not null
     const paginatedData = useMemo(() => {
         if (!sortedData)
-            return null;
-        const startIndex = itemsPerPage !== undefined ? (currentPage - 1) * itemsPerPage : 0;
-        const endIndex = itemsPerPage !== undefined ? startIndex + itemsPerPage : sortedData.length;
-        return sortedData.slice(startIndex, endIndex);
-    }, [sortedData, currentPage, itemsPerPage]);
-    // Calculate the total number of pages for pagination
+            return [];
+        if (!pagination)
+            return sortedData;
+        const start = (currentPage - 1) * localItemsPerPage;
+        return sortedData.slice(start, start + localItemsPerPage);
+    }, [sortedData, currentPage, localItemsPerPage, pagination]);
     const totalPages = useMemo(() => {
-        if (!sortedData)
-            return 0;
-        return itemsPerPage !== undefined ? Math.ceil(sortedData.length / itemsPerPage) : 1;
-    }, [sortedData, itemsPerPage]);
-    // Function to handle page change
-    const handlePageChange = (newPage) => {
-        if (newPage >= 1 && newPage <= totalPages) {
-            setCurrentPage(newPage);
+        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
+    }, [sortedData, localItemsPerPage, pagination]);
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages)
+            setCurrentPage(page);
+    };
+    const startResize = (e, key) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = e.target.parentElement?.offsetWidth || 0;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // mínimo 50px
+            setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
+        };
+        const onMouseUp = () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+    };
+    const scrollContainerStyle = useMemo(() => {
+        if (stickyHeader || scrollHeight) {
+            return {
+                maxHeight: scrollHeight ?? 300,
+                overflowY: "auto"
+            };
         }
+        return {}; // sin altura ni scroll
+    }, [stickyHeader, scrollHeight]);
+    const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
+    const renderTableBody = () => {
+        if (loading) {
+            return (jsx("tr", { children: jsx("td", { colSpan: getColSpan(), children: jsx("div", { className: "text-center py-4 text-muted-foreground", children: "Loading data..." }) }) }));
+        }
+        if (!paginatedData || paginatedData.length === 0) {
+            return (jsx("tr", { children: jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
+        }
+        return paginatedData.map(item => {
+            const itemKey = item[rowKey];
+            if (!itemKey)
+                console.warn("Missing row key for item", item);
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: classNameRow ?? "", children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : item[col.dataIndex] }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, itemKey));
+        });
     };
-    return (jsxs("div", { id: id, className: `cw-table-container ${classNameContainer || ""}`, children: [jsxs("table", { className: `cw-table ${className || ""}`, style: style, children: [jsx("thead", { className: `${classNameHeader || ""}`, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(column => (jsx("th", { onClick: () => handleSort(column.dataIndex), className: `${column.className || ""} ${sortConfig.key === column.dataIndex ? sortConfig.direction : ""}`.trim(), children: column.title }, column.key)))] }) }), jsx("tbody", { children: !paginatedData || paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (expandedRowRender ? 1 : 0), style: { textAlign: "center" }, className: "cw-table-cell-empty", children: textNoData !== undefined && textNoData !== "" ? textNoData : "No data available at the moment" }) })) : (paginatedData.map(item => (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${classNameRow || ""}`, children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === item.key ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map(column => (jsx("td", { className: column.className || "", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && expandedRowRender && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: columns.length + 1, children: expandedRowRender(item) }) }))] }, item.key)))) })] }), pagination && totalPages > 1 && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { children: ["Page ", currentPage, " of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw-button-icon cwi-chevron-right" })] }))] }));
+    return (jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsx("div", { style: scrollContainerStyle, children: jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { style: stickyHeader
+                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
+                                : undefined, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(col => (jsxs("th", { onClick: () => col.sortable && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex ? sortConfig.direction : ""}`.trim(), style: {
+                                            cursor: col.sortable ? "pointer" : "default",
+                                            userSelect: "none",
+                                            width: columnWidths[col.key] ?? col.width,
+                                            position: "relative",
+                                            ...((col.width || columnWidths[col.key]) && {
+                                                minWidth: 50,
+                                                maxWidth: columnWidths[col.key] ?? col.width
+                                            }),
+                                        }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { children: col.title }), col.sortable && (jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc" ? "↑" : "↓" }))] }), jsx("div", { onMouseDown: (e) => startResize(e, col.key), style: {
+                                                    position: "absolute",
+                                                    right: 0,
+                                                    top: 7,
+                                                    bottom: 0,
+                                                    width: "2px",
+                                                    cursor: "col-resize",
+                                                    zIndex: 1,
+                                                    backgroundColor: "white",
+                                                    height: 20,
+                                                } })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), totalPages > 1 && (jsxs("span", { children: [jsx("input", { type: "number", value: currentPage, onChange: (e) => {
+                                    const value = parseInt(e.target.value, 10);
+                                    if (!isNaN(value))
+                                        handlePageChange(value);
+                                }, onBlur: (e) => {
+                                    const value = parseInt(e.target.value, 10);
+                                    if (isNaN(value) || value < 1 || value > totalPages) {
+                                        handlePageChange(1);
+                                    }
+                                }, min: 1, max: totalPages, style: {
+                                    width: "4rem",
+                                    textAlign: "center",
+                                    marginRight: "0.5rem"
+                                } }), "of ", totalPages] })), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
 var styles$8 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
@@ -1020,7 +1159,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, className: styles$8['cw-tabs'], "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$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxs("div", { id: CwTabsProps.id, className: styles$8['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$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -1047,6 +1186,25 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsx("div", { className: "cw-expandable", children: jsxs("details", { ref: myRef, ...detailsProps, children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }) }));
 };
 
+/**
+ * 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"
+ * />
+ */
+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 !== ""
+                        ? `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`
+                        : emptyValue })] }, item.key))) }));
+};
+
 /**
  * A table with expandable row groups.
  * @param props The data to display
@@ -1170,11 +1328,9 @@ function CwInput(CwInputProps) {
     const handleClearClick = () => {
         CwInputProps.onChange("");
     };
-    return (jsxs("div", { className: CwInputProps.labelPosition === "inline"
-            ? "cwellt_flex cwellt_flex_row cwellt_align_items_center cw_inputContent"
-            : CwInputProps.labelPosition === "column"
-                ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cw_inputContent"
-                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cw_inputContent", children: [jsx("label", { className: CwInputProps.disabled === true
+    return (jsxs("div", { className: CwInputProps.labelPosition === "column"
+            ? "cw-flex-column"
+            : "cw-flex-row ", children: [jsx("label", { className: CwInputProps.disabled === true
                     ? CwInputProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
                     : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (
             // if the component is disabled do not show clear button
@@ -1264,11 +1420,9 @@ function CwInputNumber(CwInputNumberProps) {
     const handleChange = (e) => {
         CwInputNumberProps.onChange(e.target.value);
     };
-    return (jsxs("div", { className: CwInputNumberProps.labelPosition == "inline"
-            ? "cw-label-input"
-            : CwInputNumberProps.labelPosition == "column"
-                ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cw-label-input"
-                : "cw-label-input", children: [jsx("label", { className: CwInputNumberProps.disabled === true
+    return (jsxs("div", { className: CwInputNumberProps.labelPosition == "column"
+            ? "cw-flex-column"
+            : "cw-flex-row", children: [jsx("label", { className: CwInputNumberProps.disabled === true
                     ? CwInputNumberProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
                     : CwInputNumberProps.labelClassName + " " + "cw_label_text", children: CwInputNumberProps.labelName }), jsx("input", { id: CwInputNumberProps.id, type: "number", value: CwInputNumberProps.value, onChange: e => handleChange(e), className: CwInputNumberProps.className + " " + " cw-input-number", placeholder: CwInputNumberProps.placeholder == undefined ? "Write a number please" : CwInputNumberProps.placeholder, style: CwInputNumberProps.style, disabled: CwInputNumberProps.disabled, required: CwInputNumberProps.required, step: CwInputNumberProps.step, min: CwInputNumberProps.min, max: CwInputNumberProps.max })] }));
 }
@@ -2776,7 +2930,7 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
                 const luminance = 0.299 * redBgColor_custom_tag_selected_list +
                     0.587 * greenBgColor_custom_tag_selected_list +
                     0.114 * blueBgColor_custom_tag_selected_list;
-                return s.type !== undefined && s.type !== undefined ? (jsx("div", { id: "cwContent_tag", "data-id": s.type + "_" + s.id, className: "cwellt_flex cwellt_align_items_center", children: jsx(CwTag, { styleTag: {
+                return s.type !== undefined ? (jsx("div", { id: "cwContent_tag", "data-id": s.type + "_" + s.id, className: "cwellt_flex cwellt_align_items_center", children: jsx(CwTag, { styleTag: {
                             background: s.color
                         }, styleTag_description: {
                             background: s.color,
@@ -3400,10 +3554,6 @@ function CwBtnAddFolder({ cw_btnOnclick, cw_btn_disabled }) {
 function CwBtnEditFolder({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-edit", disabled: cw_btn_disabled });
 }
-// PropertyFolder
-function CwBtnSelectedFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-selected", disabled: cw_btn_disabled });
-}
 // UploadFiles
 function CwBtnUploadFiles({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_uploadFiles", disabled: cw_btn_disabled });
@@ -3416,14 +3566,6 @@ function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }) {
 function CwBtnBookMark({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-star", disabled: cw_btn_disabled });
 }
-// Archive
-function CwBtnArchive({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-archive", disabled: cw_btn_disabled });
-}
-// Archive
-function CwBtnArchiveRestore({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon  cwi-icons cwi-archive-restore", disabled: cw_btn_disabled });
-}
 // Publish
 function CwBtnPublish({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnPublish", disabled: cw_btn_disabled });
@@ -3432,10 +3574,6 @@ function CwBtnPublish({ cw_btnOnclick, cw_btn_disabled }) {
 function CwBtnApprove({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnApprove", disabled: cw_btn_disabled });
 }
-// BookMarkLinkPag
-function CwBtnBookMarkLinkPage({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-favorite-files", disabled: cw_btn_disabled }));
-}
 // Bulk duty
 function CwBtnBulkDuty({ cw_btnOnclick, cw_btn_disabled }) {
     return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBulkDuty", disabled: cw_btn_disabled });
@@ -6145,7 +6283,20 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                                             }, children: value.icons }), jsx("span", { style: {
                                                 padding: "0.1rem",
                                                 color: textColor,
-                                            }, children: value.name })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
+                                                display: "flex",
+                                                flex: 1,
+                                                alignItems: "center",
+                                                width: "100%",
+                                            }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (jsx("div", { style: {
+                                                    display: "flex",
+                                                    width: "100%",
+                                                }, children: value.rectangleColors.map((item, i) => (jsx("div", { className: "cwellt_rectangle_indicator", style: {
+                                                        backgroundColor: item,
+                                                        flex: 1,
+                                                        height: "8px",
+                                                        margin: 0,
+                                                        padding: 0,
+                                                    } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnRightDragStart(value.id));
                                     } }))] }), value.primaryTimeMarkerColor && (jsx("div", { className: styles$2["time-marker"], style: {
                                 backgroundColor: value.primaryTimeMarkerColor,
@@ -7156,4 +7307,4 @@ class CwFindAirport extends React.Component {
     }
 }
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, DefaultRowHeader, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, DefaultRowHeader, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage };