@cwellt_software/cwellt-reactjs-lib 1.0.4 → 1.0.6

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle, useCallback, createElement, Fragment, createRef } from 'react';
+import React__default, { useEffect, useState, useRef, forwardRef, useImperativeHandle, useCallback, useMemo, createElement, Fragment, createRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Tooltip, Modal, InputNumber, Select, Tag, Dropdown, Menu } from 'antd';
 import Draggable from 'react-draggable';
@@ -358,120 +358,10 @@ class CwModalIframe extends React.Component {
     }
 }
 
-var styles$3 = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8","cw-dialog-button-save":"cw-dialog-module_cw-dialog-button-save__eZ9SI"};
-
-const CwDialog = props => {
-    const dialogRef = useRef(null);
-    const initialDialogSize = { width: props.$size?.width ?? 800, height: props.$size?.height ?? 600 };
-    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 [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-    useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (isDragging) {
-                const parent = dialogRef.current?.parentElement;
-                if (parent) {
-                    const parentRect = parent.getBoundingClientRect();
-                    const dialogRect = dialogRef.current?.getBoundingClientRect();
-                    if (dialogRect) {
-                        const minVisiblePx = 48;
-                        const newX = e.clientX - dragStart.x;
-                        const newY = e.clientY - dragStart.y;
-                        const clampedX = Math.min(Math.max(newX, minVisiblePx - dialogRect.width), parentRect.width - minVisiblePx);
-                        const clampedY = Math.min(Math.max(newY, minVisiblePx - dialogRect.height), parentRect.height - minVisiblePx);
-                        setPosition({ x: clampedX, y: clampedY });
-                    }
-                }
-            }
-            else if (resizeDirection) {
-                const parent = dialogRef.current?.parentElement;
-                if (parent) {
-                    const parentRect = parent.getBoundingClientRect();
-                    const dialogRect = dialogRef.current?.getBoundingClientRect();
-                    if (dialogRect) {
-                        let newWidth = size.width;
-                        let newHeight = size.height;
-                        let newX = position.x;
-                        let newY = position.y;
-                        const minVisiblePx = 64;
-                        const minSize = 100;
-                        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("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);
-                        setSize({ width: newWidth, height: newHeight });
-                        setPosition({ x: newX, y: newY });
-                    }
-                }
-            }
-        };
-        const handleMouseUp = () => {
-            setIsDragging(false);
-            setResizeDirection(null);
-        };
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [isDragging, resizeDirection, dragStart, position, size]);
-    const handleMouseDown = (e) => {
-        setIsDragging(true);
-        setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
-    };
-    const handleResizeMouseDown = (direction) => (e) => {
-        e.stopPropagation();
-        setResizeDirection(direction);
-    };
-    const header = (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: props.$headline }), props.$customHeader || (jsx("button", { className: styles$3["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: styles$3["cw-dialog-button-save"], onClick: props.$onSave, children: "\uD83D\uDDAB" })) }));
-    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")
-    ];
-    return (props.open && (jsx("div", { "data-has-scrim": props.$scrim, className: styles$3["cw-dialog-main"], children: jsxs("dialog", { ...props, ref: dialogRef, style: {
-                left: `${position.x}px`,
-                top: `${position.y}px`,
-                width: `${size.width}px`,
-                height: `${size.height}px`,
-                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] }) })));
-};
-
 class CwReportModal extends React.Component {
     formRef = React.createRef();
+    // For draggable modal
+    draggableRef = React.createRef();
     constructor(props) {
         super(props);
         this.state = {
@@ -486,53 +376,44 @@ class CwReportModal extends React.Component {
             isModal: props.isModal !== undefined && props.isModal !== null ? props.isModal : true
         };
     }
+    // Drag [ limit positions ]
+    onStart = (_event, uiData) => {
+        const { clientWidth, clientHeight } = window.document.documentElement;
+        const targetRect = this.draggableRef.current?.getBoundingClientRect();
+        if (!targetRect) {
+            return;
+        }
+        this.setState({
+            modalPosition: {
+                top: -targetRect.top + uiData.y,
+                left: -targetRect.left + uiData.x,
+                right: clientWidth - (targetRect.right - uiData.x),
+                bottom: clientHeight - (targetRect.bottom - uiData.y)
+            }
+        });
+    };
     render() {
-        return (jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxs(CwDialog, { open: this.props.visible, "$size": { width: this.props.width, height: this.props.height }, "$headline": this.props.title, "$customFooter": new Array(jsx("div", {})), "$onClose": () => {
+        const { disabled } = this.state;
+        const { modalPosition } = this.state;
+        return (jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxs(Modal, { className: "CwelltModal CwelltModalCrewDetailsReport", 
+                //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: false, onCancel: () => {
                     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"] }))] })) }));
-    }
-}
-
-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;
+                }, destroyOnClose: true, modalRender: modal => (jsx(Draggable, { disabled: disabled, onStart: (event, uiData) => this.onStart(event, uiData), bounds: modalPosition, children: jsxs("div", { ref: this.draggableRef, children: [" ", modal] }) })), 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" && (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"] }))] })) }));
     }
 }
 
@@ -627,7 +508,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *     title: 'Age',
  *     dataIndex: 'age',
  *     key: 'age',
- *     render: (age) => <span>{age} years</span>, // Example of custom rendering
+ *     render: (age) => <span>{age} años</span>, // Ejemplo de renderización personalizada
  *   },
  *   {
  *     title: 'Address',
@@ -637,7 +518,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *       <a href={`https://maps.google.com/?q=${encodeURIComponent(address)}`} target="_blank">
  *         {address}
  *       </a>
- *     ), // Example of custom link rendering
+ *     ), // Ejemplo de renderización personalizada con un enlace
  *   },
  * ];
  *
@@ -662,7 +543,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   },
  *   {
  *     key: '4',
- *     name: 'Gabriel',
+ *     name: 'Gabri',
  *     age: 22,
  *     address: '10 Downing Street',
  *   },
@@ -693,7 +574,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * <CwTable
  *   columns={columns}
- *   data={data} // WTF whatever array of objects you add here, make sure each has a key otherwise everything will expand
+ *   data={data}
  *   itemsPerPage={3}
  *   pagination={true}
  *   expandedRowRender={generateExpandedContent}
@@ -701,7 +582,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * />
  * @returns React component
  */
-function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id, textNoData }) {
+function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [expandedRowKey, setExpandedRowKey] = useState(null);
     const [sortConfig, setSortConfig] = useState({
@@ -728,47 +609,40 @@ function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, o
         }
         setSortConfig({ key: columnKey, direction });
     };
-    // Use useMemo to calculate sortedData
-    const sortedData = useMemo(() => {
-        if (!data || data.length === 0)
-            return null;
-        const dataCopy = [...data];
-        if (sortConfig.key !== null) {
-            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;
-            });
-        }
-        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
-    const totalPages = useMemo(() => {
-        if (!sortedData)
+    // Create a sorted copy of the data based on the sorting configuration
+    const sortedData = [...data];
+    if (sortConfig.key !== null) {
+        sortedData.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;
-        return itemsPerPage !== undefined ? Math.ceil(sortedData.length / itemsPerPage) : 1;
-    }, [sortedData, itemsPerPage]);
+        });
+    }
+    // Calculate the start and end index for pagination
+    const startIndex = itemsPerPage !== undefined ? (currentPage - 1) * itemsPerPage : (currentPage - 1) * 0;
+    const endIndex = itemsPerPage !== undefined ? startIndex + itemsPerPage : startIndex + 0;
+    const paginatedData = sortedData.slice(startIndex, endIndex);
+    // Calculate the total number of pages for pagination
+    const totalPages = itemsPerPage !== undefined ? Math.ceil(sortedData.length / itemsPerPage) : Math.ceil(sortedData.length / 0);
     // Function to handle page change
     const handlePageChange = (newPage) => {
         if (newPage >= 1 && newPage <= totalPages) {
             setCurrentPage(newPage);
         }
     };
-    return (jsxs("div", { id: id, className: classNameContainer + " " + "cwTableComp", children: [jsxs("table", { className: className + " " + "cw_table", style: style, children: [jsx("thead", { className: `${classNameHeader} cw_thead`, children: jsxs("tr", { className: "cw_thead_tr", children: [expandedRowRender && jsx("th", { className: "cw_thead_th cw_thead_th_expand" }), columns.map(column => (jsx("th", { onClick: () => handleSort(column.dataIndex), className: `cw_thead_th ${column.className} ${sortConfig.key === column.dataIndex ? sortConfig.direction : ""}`, children: column.title }, column.key)))] }) }), jsx("tbody", { className: "cw_tbody", children: !paginatedData || paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (expandedRowRender ? 1 : 0), style: { textAlign: "center" }, children: textNoData !== undefined && textNoData !== "" ? textNoData : "No data" }) })) : (paginatedData.map(item => (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${classNameTr_row} cw_tbody_tr`, children: [expandedRowRender && (jsx("td", { className: "cw_tbody_td", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cwellt_flex cwellt_justify_center cwellt_align_items_center cw_button_expanded_collapse ${expandedRowKey === item.key ? "cw_button_expanded" : "cw_button_collapse"}` }) })), columns.map(column => (jsx("td", { className: "cw_tbody_td", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && expandedRowRender && (jsx("tr", { children: jsx("td", { colSpan: columns.length + 1, children: expandedRowRender(item) }) }))] }, item.key)))) })] }), pagination && totalPages > 1 && (jsxs("div", { className: "cw_table_pagination cwellt_flex cwellt_align-items-start cwellt_align_items_center", children: [jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, className: "cw_tb_button_pag cw_tb_button_prev cwellt_flex cwellt_justify_center cwellt_align_items_center" }), jsxs("span", { className: "cw_table_pag_desc", children: ["Page ", currentPage, " of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw_tb_button_pag cw_tb_button_next cwellt_flex cwellt_justify_center cwellt_align_items_center" })] }))] }));
+    return (jsxs("div", { id: id, className: classNameContainer + " " + "cwTableComp", children: [jsxs("table", { className: className + " " + "cw_table", style: style, children: [jsx("thead", { className: classNameHeader + " " + "cw_thead", children: jsxs("tr", { className: "cw_thead_tr", children: [expandedRowRender && jsx("th", { className: "cw_thead_th cw_thead_th_expand" }), columns.map(column => (jsx("th", { onClick: () => handleSort(column.dataIndex), className: sortConfig.key === column.dataIndex
+                                        ? sortConfig.direction + " cw_thead_th" + " " + column.className
+                                        : "cw_thead_th" + " " + column.className, children: column.title }, column.key)))] }) }), pagination === true ? (jsx("tbody", { className: "cw_tbody", children: paginatedData.map(item => (
+                        // !TODO: Ask sergio which tag place [ key ={ ite.key }]
+                        jsxs(React__default.Fragment, { children: [jsxs("tr", { className: classNameTr_row + " " + "cw_tbody_tr", children: [expandedRowRender && (jsx("td", { className: "cw_tbody_td", children: jsx("button", { onClick: () => handleRowExpand(item), className: expandedRowKey === item.key
+                                                    ? "cwellt_flex cwellt_justify_center cwellt_align_items_center cw_button_expanded_collapse cw_button_expanded"
+                                                    : "cwellt_flex cwellt_justify_center cwellt_align_items_center cw_button_expanded_collapse cw_button_collapse" }) })), columns.map(column => (jsx("td", { className: "cw_tbody_td", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && (jsx("tr", { children: jsx("td", { colSpan: columns.length + 1, children: expandedRowRender ? expandedRowRender(item) : null }) }))] }, item.key))) })) : (jsx("tbody", { className: "cw_tbody", children: sortedData.map(item => (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: "cw_tbody_tr", children: [columns.map(column => (jsx("td", { className: "cw_tbody_td", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`))), expandedRowRender && (jsx("td", { children: jsx("button", { onClick: () => handleRowExpand(item), children: expandedRowKey === item.key ? "-" : "+" }) }))] }), expandedRowKey === item.key && (jsx("tr", { children: jsx("td", { colSpan: columns.length + 1, children: expandedRowRender ? expandedRowRender(item) : null }) }))] }, item.key))) }))] }), pagination === true ? (jsxs("div", { className: "cw_table_pagination cwellt_flex cwellt_align-items-start cwellt_align_items_center", children: [jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, className: "cw_tb_button_pag cw_tb_button_prev cwellt_flex cwellt_justify_center cwellt_align_items_center" }), jsxs("span", { className: "cw_table_pag_desc", children: ["Page ", currentPage, " of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw_tb_button_pag cw_tb_button_next cwellt_flex cwellt_justify_center cwellt_align_items_center" })] })) : (jsx("div", {}))] }));
 }
 
 /**
@@ -797,7 +671,7 @@ function CwTabs(CwTabsProps) {
             CwTabsProps.onTabClick(tab);
         }
     };
-    return (jsxs("div", { id: CwTabsProps.id, className: "cwellt_flex cwellt_flex_column cwTab", children: [jsx("ul", { className: "cw_tab_container", children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `cw_tab cwellt_flex cwellt_align_items_center cwellt_justify_center ${tab.key === activeTab ? "cw_tab_active" : ""}`, onClick: () => handleTabClick(tab), children: [tab.icon, tab.title] }, tab.key))) }), jsx("div", { className: "cw_tab_content cwellt_flex cwellt_align_items_center cwellt_justify_center", children: jsx("div", { className: "cw_tab_container_holder", children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content }) })] }));
+    return (jsxs("div", { id: CwTabsProps.id, className: "cwellt_flex cwellt_flex_column cwTab", children: [jsx("ul", { className: "cw_tab_container cwellt_flex cwellt_flex_row cwellt_flex_wrap", children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `cw_tab cwellt_flex cwellt_align_items_center cwellt_justify_center ${tab.key === activeTab ? "cw_tab_active" : ""}`, onClick: () => handleTabClick(tab), children: [tab.icon, tab.title] }, tab.key))) }), jsx("div", { className: "cw_tab_content cwellt_flex cwellt_align_items_center cwellt_justify_center", children: jsx("div", { className: "cw_tab_container_holder", children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content }) })] }));
 }
 
 /**
@@ -919,6 +793,7 @@ function CwFileUpload(fileUploadProps) {
                     if (typeof reader.result === "string") {
                         const hexContent = arrayBufferToHex(reader.result);
                         setCurrentHexContent(hexContent);
+                        // eslint-disable-next-line no-debugger
                         debugger;
                         // fileUploadProps.onChange({
                         // 	...file,
@@ -1481,149 +1356,6 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$2 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
-
-/**
- * This class represents a week where days can be selected or unselected
- * @remark Selected days are in UPPERCASE, unselected days are in lowercase
- * ```
- * Monday     = "M" | "m"
- * Tuesday    = "T" | "t"
- * Wendnesday = "W" | "w"
- * thuRsday   = "R" | "r"
- * Friday     = "F" | "f"
- * Saturday   = "S" | "s"
- * sUnday     = "U" | "u"
- * ```
- */
-class Weekdays {
-    static WEEKDAYS_STANDARD_ARRAY_FULL = ["M", "T", "W", "R", "F", "S", "U"];
-    static WEEKDAYS_STANDARD_ARRAY_EMPTY = ["m", "t", "w", "r", "f", "s", "u"];
-    static WEEKDAYS_STANDARD_STRING_FULL = "MTWRFSU";
-    static WEEKDAYS_STANDARD_STRING_EMPTY = "mtwrfsu";
-    static WEEKDAYS_TO_USA_LETTER_FORMAT = new Map([
-        ["M", "M"],
-        ["T", "T"],
-        ["W", "W"],
-        ["R", "T"],
-        ["F", "F"],
-        ["S", "S"],
-        ["U", "S"]
-    ]);
-    static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
-        ["M", "Mon"],
-        ["T", "Tue"],
-        ["W", "Wen"],
-        ["R", "Thu"],
-        ["F", "Fri"],
-        ["S", "Sat"],
-        ["U", "Sun"]
-    ]);
-    static WEEKDAY_MAP = {
-        0: "U",
-        1: "M",
-        2: "T",
-        3: "W",
-        4: "R",
-        5: "F",
-        6: "S"
-    };
-    days;
-    constructor(days = Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL) {
-        if (typeof days === "string")
-            this.days = this.normalize(days.split(""));
-        else
-            this.days = this.normalize(days);
-    }
-    includes(day) {
-        return this.days.includes(day);
-    }
-    static fromString(value) {
-        return new Weekdays(value.split(""));
-    }
-    static isValidToday(validFrom, validUntil, validWeekdays) {
-        const today = new Date();
-        // Check if today is within the validity period
-        if (today < validFrom || today > validUntil) {
-            return false;
-        }
-        // Convert today's weekday to Weekday type
-        const todayWeekday = Weekdays.WEEKDAY_MAP[today.getDay()];
-        // Check if today's weekday is in the validWeekdays array
-        return validWeekdays.includes(todayWeekday);
-    }
-    normalize(weekdays) {
-        const uniqueWeekdays = new Set(weekdays);
-        if (uniqueWeekdays.size != 7)
-            throw Error(`Illegal weekday string ${Array.from(uniqueWeekdays).join("")}`);
-        return Weekdays.WEEKDAYS_STANDARD_STRING_FULL.split("").map(day => {
-            if (uniqueWeekdays.has(day)) {
-                return day;
-            }
-            else if (uniqueWeekdays.has(day.toLowerCase())) {
-                return day.toLowerCase();
-            }
-            else {
-                throw Error(`Illegal weekday string ${weekdays.join("")}`);
-            }
-        });
-    }
-    toString() {
-        return this.days.join("").trim();
-    }
-    toStringFormatted(limiters = { startExistingDay: "{", endExsitingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
-        const result = new Array();
-        [...this.days].forEach((letter, index) => {
-            if (letter === letter.toUpperCase()) {
-                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExsitingDay);
-            }
-            else if (letter === letter.toLowerCase()) {
-                result.push(limiters.startMissingDay +
-                    format.get(Weekdays.WEEKDAYS_STANDARD_STRING_FULL.charAt(index)) +
-                    limiters.endMissingDay);
-            }
-        });
-        return result.join(limiters.separator).trim();
-    }
-    toArray() {
-        return [...this.days];
-    }
-    isEmpty() {
-        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_EMPTY;
-    }
-    isFull() {
-        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_FULL;
-    }
-    static getFullWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL;
-    }
-    static getEmptyWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY;
-    }
-}
-const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
-    const [selectedDays, setSelectedDays] = useState(Weekdays.fromString(value));
-    useEffect(() => {
-        setSelectedDays(Weekdays.fromString(value));
-    }, [value]);
-    const handleChange = (day, checked) => {
-        const currentDays = selectedDays.toArray();
-        let updated;
-        if (checked) {
-            updated = currentDays.filter(d => d !== day.toLowerCase());
-            updated.push(day);
-        }
-        else {
-            updated = currentDays.filter(d => d !== day);
-            updated.push(day.toLowerCase());
-        }
-        const newWeekdays = new Weekdays(updated);
-        setSelectedDays(newWeekdays);
-        onChange?.(newWeekdays.toString());
-    };
-    return (jsx("div", { className: styles$2["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
-};
-
 function CwCheckbox(CwCheckboxProps) {
     const handleChange = (e) => {
         CwCheckboxProps.onChange(e.target.checked);
@@ -2576,21 +2308,6 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
                                 }) }) }, "_" + i))) })] }) }) }));
 }
 
-function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
-    const result = new Set();
-    items.forEach((item, index) => {
-        result.add({
-            ID: `${category}_${index}`,
-            Name: item[nameKey] || index,
-            Value: item[valueKey] || index,
-            Category: category || "Missing Category",
-            PrimaryColor: primaryColor || { r: 0, g: 0, b: 0 },
-            OnPrimaryColor: onPrimaryColor || { r: 255, g: 255, b: 255 }
-        });
-    });
-    return result;
-}
-
 var styles$1 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
 
 const CwMultiFilterTag = props => {
@@ -2630,7 +2347,6 @@ var styles = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-mul
  * ```
  * /// Use setSelectedTags to set the initial selected tags or to add/remove them after an action.
  * const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
- * const [selectedCategory, setSelectedCategory] = useState("");
  *
  * <CwMultiFilter
  *  $id="multifilter"
@@ -2638,8 +2354,6 @@ var styles = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-mul
  *    console.log("This will get called every time the selected filters change");
  *  }}
  *  $selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
- *  selectedCategory={selectedCategory}
- *  onChangeCategory={setSelectedCategory}
  *  $allTags={
  *    new Set([
  *      {
@@ -2664,48 +2378,48 @@ var styles = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-mul
  * @param {CwMultiFilterProps} props
  * @returns Set the `$onChange` callback to a function to check for changes in the selected filters
  */
-const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
-    const [filteredTags, setFilteredTags] = useState(new Set());
+const CwMultiFilter = ({ $onChange, $allTags, $selectedTags, $id, style }) => {
     const [inputTextValue, setInputTextValue] = useState("");
+    const [selectedCategory, setSelectedCategory] = useState("");
     const [inputIsFocussed, setInputIsFocussed] = useState(false);
-    const [selectedCategory, setSelectedCategory] = useState("All");
-    const categoriesMappedToTags = () => {
+    const categoriesMappedToTags = useMemo(() => {
         const categoriesMap = new Map();
-        allTags.forEach(tag => {
+        $allTags.forEach(tag => {
             const category = categoriesMap.get(tag.Category) || new Set();
             category.add(tag);
             categoriesMap.set(tag.Category, category);
         });
         return categoriesMap;
-    };
-    const handleClickCategory = (category) => {
+    }, [$allTags]);
+    const filteredTags = useMemo(() => {
+        let tags = selectedCategory ? categoriesMappedToTags.get(selectedCategory) || new Set() : $allTags;
+        if (inputTextValue) {
+            tags = new Set(Array.from(tags).filter(tag => !Array.from($selectedTags).some(t => t.ID === tag.ID) &&
+                tag.Name.replaceAll(" ", "").toLowerCase().includes(inputTextValue.replaceAll(" ", "").toLowerCase())));
+        }
+        return tags;
+    }, [$allTags, selectedCategory, inputTextValue, $selectedTags, categoriesMappedToTags]);
+    const handleClickCategory = useCallback((category) => {
         setSelectedCategory(category);
-        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : allTags);
-    };
-    const handleInputText = (input) => {
-        if (selectedCategory !== "All")
-            setSelectedCategory("All");
+    }, []);
+    const handleInputText = useCallback((input) => {
         setInputTextValue(input);
-        const newFilterTags = Array.from(allTags).filter(tag => !Array.from(selectedTags).some(t => t.ID === tag.ID) &&
-            tag.Name.replaceAll(" ", "").toLowerCase().includes(input.replaceAll(" ", "").toLowerCase()));
-        setFilteredTags(new Set(newFilterTags));
-    };
-    const addTag = (newTag) => {
+    }, []);
+    const addTag = useCallback((newTag) => {
         newTag.Selected = true;
         newTag.Removable = true;
         newTag.Selectable = false;
-        if (selectedTags.has(newTag) || Array.from(selectedTags).some(t => t.ID === newTag.ID)) {
+        if ($selectedTags.has(newTag) || Array.from($selectedTags).some(t => t.ID === newTag.ID)) {
             return;
         }
         else {
-            const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags?.(updatedTags);
+            const updatedTags = new Set($selectedTags).add(newTag);
+            $onChange?.(updatedTags);
             setInputTextValue("");
-            setFilteredTags(allTags);
         }
-    };
-    const removeTag = (id) => {
-        const updatedTags = new Set(selectedTags);
+    }, [$selectedTags, $onChange]);
+    const removeTag = useCallback((id) => {
+        const updatedTags = new Set($selectedTags);
         const toDelete = Array.from(updatedTags).find(i => i.ID === id);
         if (toDelete) {
             toDelete.Selected = false;
@@ -2713,18 +2427,15 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             toDelete.Removable = false;
             updatedTags.delete(toDelete);
         }
-        onChangeSelectedTags?.(updatedTags);
-    };
+        $onChange?.(updatedTags);
+    }, [$selectedTags, $onChange]);
     useEffect(() => {
-        // force to load all tags on first render
-        if (selectedCategory === "All" && filteredTags.size === 0)
-            setFilteredTags(new Set(allTags));
-        // else if (selectedCategory !== "All")
-        // 	setFilteredTags(new Set([...(categoriesMappedToTags().get(selectedCategory) ?? [])]));
-    }, [allTags]);
-    return (jsxs("form", { id: id, className: styles["cw-multi-filter"], style: style, onSubmit: (e) => {
+        handleClickCategory("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [$allTags]);
+    return (jsxs("form", { id: $id, className: styles["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { className: styles["cw-multi-filter-search"], children: [jsx("ul", { id: id + "_selected_filters", children: Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))) }), jsx("input", { type: "text", id: id + "_input", value: inputTextValue, spellCheck: false, onFocus: () => setInputIsFocussed(true), onBlur: () => setInputIsFocussed(false), onChange: e => handleInputText(e.target.value), autoComplete: "off", onKeyDown: e => {
+        }, children: [jsxs("div", { className: styles["cw-multi-filter-search"], children: [jsx("ul", { id: $id + "_selected_filters", children: Array.from($selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))) }), jsx("input", { autoComplete: "off", type: "text", id: $id + "_input", value: inputTextValue, spellCheck: false, onFocus: () => setInputIsFocussed(true), onBlur: () => setInputIsFocussed(false), onChange: e => handleInputText(e.target.value), onKeyDown: e => {
                             switch (e.key) {
                                 case "Enter":
                                 case "Tab":
@@ -2736,29 +2447,33 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                                     }
                                     break;
                                 case "Backspace": {
-                                    if (inputTextValue === "" && selectedTags.size > 0) {
-                                        removeTag(Array.from(selectedTags).toReversed()[0].ID);
+                                    if (inputTextValue === "" && $selectedTags.size > 0) {
+                                        removeTag(Array.from($selectedTags).toReversed()[0].ID);
                                     }
                                     break;
                                 }
                             }
-                        } }), selectedTags.size > 0 ? (jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
+                        } }), $selectedTags.size > 0 ? (jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
                             e.preventDefault();
-                            onChangeSelectedTags?.(new Set());
-                        } })) : null] }), jsxs("section", { className: styles["cw-multi-filter-catalog-container"], "data-display-none": !inputIsFocussed, children: [jsxs("nav", { children: [jsx("button", { style: selectedCategory === "All"
+                            $onChange?.(new Set());
+                        } })) : null] }), jsxs("section", { className: styles["cw-multi-filter-catalog-container"], "data-display-none": !inputIsFocussed, children: [jsxs("nav", { children: [jsx("button", { style: !selectedCategory
                                     ? {
                                         backgroundColor: "var(--cw-color-primary)",
                                         color: "var(--cw-color-on-primary)",
                                         fontWeight: 400
                                     }
-                                    : {}, onClick: () => handleClickCategory("All"), children: "All" }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { style: selectedCategory === category
+                                    : {}, onClick: () => {
+                                    handleClickCategory("");
+                                }, children: "All" }), Array.from(categoriesMappedToTags.keys()).map(category => (jsx("button", { style: selectedCategory === category
                                     ? {
                                         backgroundColor: "var(--cw-color-primary)",
                                         color: "var(--cw-color-on-primary)",
                                         fontWeight: 400
                                     }
-                                    : {}, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: Array.from(filteredTags).map((props) => (jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from(selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
-                                if (Array.from(selectedTags).some(p => p.ID === props.ID))
+                                    : {}, onClick: () => {
+                                    handleClickCategory(category);
+                                }, children: category }, category)))] }), jsx("ul", { children: Array.from(filteredTags).map((props) => (jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from($selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
+                                if (Array.from($selectedTags).some(p => p.ID === props.ID))
                                     removeTag(props.ID);
                                 else
                                     addTag(props);
@@ -2875,170 +2590,184 @@ function CwFloatingButton() {
         const cwScheduler = document.getElementById("CwelltScheduler");
         cwScheduler?.classList.toggle("CwelltSchedulerActive");
     };
-    return jsx("button", { className: "cw-button cw_btnFloatingButton", onClick: cwShowElement, id: "cw_btnFloatingButton" });
+    return jsx("button", { className: "cw_btnFloatingButton", onClick: cwShowElement, id: "cw_btnFloatingButton" });
+}
+// Button for expand and collapase
+function CwButtonExpandAndCollapse() {
+    const cwExpandCollapseButton = () => {
+        // cwellt_btnExpandCollapse
+        const cw_btnExpandCollapse = document.getElementById("cw_btnExpandCollapse");
+        cw_btnExpandCollapse?.classList.toggle("cw_btnExpandCollapseActive");
+        // text of tooltip
+        // Switches
+        const cwSwitches = document.getElementsByClassName("CwSwitches")[0];
+        cwSwitches.classList.toggle("cwSwitchesActive");
+        // ContentButton
+    };
+    return jsx("button", { className: "cw_btnExpandCollapse", onClick: cwExpandCollapseButton, id: "cw_btnExpandCollapse" });
 }
 // Primary button => CwButtonDef
 // CwButtonDef
 function CwButtonDef({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_primary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc cw_btn_primary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // CwButtonDefOutline
 function CwButtonDefOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_primaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc  cw_btn_primaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // Primary button => CwButtonSecondary
 // CweButtonSec
 function CwButtonSec({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_secondary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc cw_btn_secondary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // CwButtonSecOutline
 function CwButtonSecOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_secondaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc cw_btn_secondaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // Primary button => cwelltButton_danger
 // CwButton_danger
 function CwButtonDanger({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_danger", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc cw_btn_danger", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // CwButtonDangerOutline
 function CwButtonDangerOutline({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_dangerOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw_btn_df_desc cw_btn_dangerOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
 }
 // Cw add button
 function CwBtnAdd({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_add", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_add", disabled: cw_btn_disabled }));
 }
 // Cw Save button
 function CwBtnSave({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_save", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_save", disabled: cw_btn_disabled }));
 }
 // Cw edit button
 function CwBtnEdit({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_edit", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_edit", disabled: cw_btn_disabled }));
 }
 // Cw search button
 function CwBtnSearch({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_search", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_search", disabled: cw_btn_disabled }));
 }
 // Cw download button
 function CwBtnDownload({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_download", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_download", disabled: cw_btn_disabled }));
 }
 // Cw view button
 function CwBtnView({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_view", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_view", disabled: cw_btn_disabled }));
 }
 // Cw Print button
 function CwBtnPrint({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_print", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_print", disabled: cw_btn_disabled }));
 }
 // Cw cancel button
 function CwBtnCancel({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_cancel", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_cancel", disabled: cw_btn_disabled }));
 }
 // Cw Delete button
 function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_delete", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_delete", disabled: cw_btn_disabled }));
 }
 // Cw Select save
 function CwBtnSelectedSave({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_saveSelected", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_saveSelected", disabled: cw_btn_disabled }));
 }
 // CwUndo
 function CwBtnUndo({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_undo", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_undo", disabled: cw_btn_disabled }));
 }
 // Cw
 function CwBtnRefresh({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_refresh", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_refresh", disabled: cw_btn_disabled }));
 }
 // Cw hide
 function CwBtnHide({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_hide", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_hide", disabled: cw_btn_disabled }));
 }
 // Cw Select
 function CwBtnSelect({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_select", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_select", disabled: cw_btn_disabled }));
 }
 // Cw copy
 function CwBtnCopy({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_copy", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_copy", disabled: cw_btn_disabled }));
 }
 // Cw Pin
 function CwBtnPin({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_pin", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_pin", disabled: cw_btn_disabled }));
 }
 // Cw Info
 function CwBtnInfo({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_info", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_info", disabled: cw_btn_disabled }));
 }
 // Cw Warning
 function CwBtnWarning({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_warning", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_warning", disabled: cw_btn_disabled }));
 }
 // Cw Share
 function CwBtnShare({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_share", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_share", disabled: cw_btn_disabled }));
 }
 // Cw Files
 function CwBtnFiles({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_files", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_files", disabled: cw_btn_disabled }));
 }
 // Cw Users
 function CwBtnUsers({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_users", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_users", disabled: cw_btn_disabled }));
 }
 // Cw Airport
 function CwBtnAirport({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_airport", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_airport", disabled: cw_btn_disabled }));
 }
 // OneDrive
 function CwBtnOneDrive({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_oneDrive", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_oneDrive", disabled: cw_btn_disabled }));
 }
 // userFolder
 function CwBtnUserFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_userFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_userFolder", disabled: cw_btn_disabled }));
 }
 // CloudFolder
 function CwBtnCloudFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_cloudFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_cloudFolder", disabled: cw_btn_disabled }));
 }
 // PictureFolder
 function CwBtnPictureFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_pictureFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_pictureFolder", disabled: cw_btn_disabled }));
 }
 // FolderIn
 function CwBtnFolderIn({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_folderIn", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_folderIn", disabled: cw_btn_disabled }));
 }
 // DownLoadFolder
 function CwBtnDownLoadFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_downloadFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_downloadFolder", disabled: cw_btn_disabled }));
 }
 // DownLoadAllInfo
 function CwBtnDownLoadAllInfo({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_downLoadAllInfo", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_downLoadAllInfo", disabled: cw_btn_disabled }));
 }
 // PropertyFolder
 function CwBtnPropertyFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_propertiFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_propertiFolder", disabled: cw_btn_disabled }));
 }
 // AddFolder
 function CwBtnAddFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_addFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_addFolder", disabled: cw_btn_disabled }));
 }
 // EditFolder
 function CwBtnEditFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_editFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_editFolder", disabled: cw_btn_disabled }));
 }
 // PropertyFolder
 function CwBtnSelectedFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_selectedFolder", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_selectedFolder", 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 });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_uploadFiles", disabled: cw_btn_disabled }));
 }
 // GoBackSection [ Emanual ]
 function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }) {
@@ -3046,139 +2775,139 @@ function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }) {
 }
 // BookMark [ Emanual ]
 function CwBtnBookMark({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_bookMark", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_bookMark", disabled: cw_btn_disabled }));
 }
 // Restore trash
 function CwBtnRestoreTrash({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_restoreTrash", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_restoreTrash", disabled: cw_btn_disabled }));
 }
 // Empty trash
 function CwBtnEmptytrash({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_emptyTrash", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_emptyTrash", disabled: cw_btn_disabled }));
 }
 // Full trash
 function CwBtnFulltrash({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_fullTrash", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_fullTrash", disabled: cw_btn_disabled }));
 }
 // Marked
 function CwBtnMarked({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMarked", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnMarked", disabled: cw_btn_disabled }));
 }
 // Marked solid
 function CwBtnMarkedSolid({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMarkedSolid", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnMarkedSolid", disabled: cw_btn_disabled }));
 }
 // Add marked
 function CwBtnAddMarked({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnAddMarked", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnAddMarked", disabled: cw_btn_disabled }));
 }
 // Add marked solid
 function CwBtnAddMarkedSolid({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnAddMarkedSolid", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnAddMarkedSolid", disabled: cw_btn_disabled }));
 }
 // Restore trash right
 function CwBtnRestoreTrashRight({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_restoreTrashRight", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_restoreTrashRight", disabled: cw_btn_disabled }));
 }
 // Archive
 function CwBtnArchive({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnArchive", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnArchive", disabled: cw_btn_disabled }));
 }
 // Archive
 function CwBtnArchiveRestore({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnArchiveRestore", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnArchiveRestore", 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 });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnPublish", disabled: cw_btn_disabled }));
 }
 // Approve
 function CwBtnApprove({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnApprove", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnApprove", disabled: cw_btn_disabled }));
 }
 // BookMarkLinkPag
 function CwBtnBookMarkLinkPage({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookMarkLinkPage", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnBookMarkLinkPage", disabled: cw_btn_disabled }));
 }
 // BookReadedLine
 function CwBtnBookReadedLine({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookReadedLine", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnBookReadedLine", disabled: cw_btn_disabled }));
 }
 // BookReadedSolid
 function CwBtnBookReadedSolid({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookReadedSolid", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnBookReadedSolid", disabled: cw_btn_disabled }));
 }
 // DocumentChecked
 function CwBtnDocumentChecked({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDocumentChecked", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnDocumentChecked", disabled: cw_btn_disabled }));
 }
 // DocumentPublished
 function CwBtnDocumentPublished({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDocumentPublished", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnDocumentPublished", 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 });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnBulkDuty", disabled: cw_btn_disabled }));
 }
 // DropDownButtonCrewControl
 function CwBtnDropDownMenu({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDropDownMenu", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnDropDownMenu", disabled: cw_btn_disabled }));
 }
 // DropDownButtonCrewControl
 function CwBtnAlert({ cw_btnOnclick, cw_btn_disabled, cw_name }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnAlert", disabled: cw_btn_disabled, id: cw_name }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnAlert", disabled: cw_btn_disabled, id: cw_name }));
 }
 // BtnNavFirstItemView
 function CwBtnNavFirstItemView({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavFirstItemView", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnNavFirstItemView", disabled: cw_btn_disabled }));
 }
 // BtnNavLastItemView
 function CwBtnNavLastItemView({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavLastItemView", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnNavLastItemView", disabled: cw_btn_disabled }));
 }
 // BtnNavbreviewItem
 function CwBtnNavPreviewItem({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavPreviewItem", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnNavPreviewItem", disabled: cw_btn_disabled }));
 }
 // BtnNavNextDay
 function CwBtnNavNextDay({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavNextDay", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnNavNextDay", disabled: cw_btn_disabled }));
 }
 // BtnNavNextDay
 function CwBtnStatistic({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnStatistic", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnStatistic", disabled: cw_btn_disabled }));
 }
 // BtnNavNextDay
 function CwBtnCrewPlanning({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnCrewPlanning", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnCrewPlanning", disabled: cw_btn_disabled }));
 }
 // BtnReleasePeriod
 function CwBtnReleasePeriod({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnReleasePeriod", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnReleasePeriod", disabled: cw_btn_disabled }));
 }
 // BtnReleasePeriod
 function CwBtnGeneratePairing({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnGeneratePairing", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnGeneratePairing", disabled: cw_btn_disabled }));
 }
 // BtnImportRequests
 function CwBtnImportRequests({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnImportRequests", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnImportRequests", disabled: cw_btn_disabled }));
 }
 // BtnPairing
 function CwBtnPairing({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnPairing", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnPairing", disabled: cw_btn_disabled }));
 }
 // BtnVacations
 function CwBtnVacations({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnVacations", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnVacations", disabled: cw_btn_disabled }));
 }
 // BtnMVT
 function CwBtnMVT({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMVT", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnMVT", disabled: cw_btn_disabled }));
 }
 // BtnDelay
 function CwBtnDelay({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDelay", disabled: cw_btn_disabled });
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnDelay", disabled: cw_btn_disabled }));
 }
 
 const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
@@ -3263,7 +2992,7 @@ const getEventStyle = (event, reslTime) => {
             borderRadius: "0px",
             backgroundColor: event.data.category.color || "grey",
             opacity: 0.3,
-            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : ""
+            borderBottom: event.data.eventType === 20 ? "solid 1px rgba(0, 0, 0, 0.4)" : ""
         };
     }
     return {
@@ -3306,9 +3035,8 @@ const EventRender = ({ event, t: schedulerState }) => {
             [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
                 el.style.visibility = "hidden";
             });
-            // We don't know in which case is necessary
             if (e.target !== e.currentTarget) {
-                // e.preventDefault();
+                // e.preventDetault();
                 return;
             }
             const isResize = isResizeFromStart || isResizeFromEnd;
@@ -3341,11 +3069,9 @@ const EventRender = ({ event, t: schedulerState }) => {
         }
     };
     const renderBirthdayEvent = () => (jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [jsx("span", { className: "cbl-birthday", style: { visibility: "visible" } }), event.data.subject && jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
-    const renderRegularEvent = () => (jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
+    const renderRegularEvent = () => (jsxs("div", { draggable: ![10, 11, 16, 17, 20].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
             (event.selected === true ? "cblEventSelected " : "") +
-            (event.data.eventType === REST_TIME ||
-                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
-                event.data.eventType === DUTY_REGULATION
+            (event.data.eventType === 10 || event.data.eventType === 11 || event.data.eventType === 20
                 ? " cwellt_event_bhnd_appt "
                 : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: e => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerState.props.scheduler_handleCblEventResize && !unHandleableEvents.includes(event.data.eventType) && (jsx("span", { draggable: true, onDragStart: e => handleDragStart(e, true, false), style: {
                     position: "absolute",
@@ -3361,8 +3087,7 @@ const EventRender = ({ event, t: schedulerState }) => {
                     border: "solid 1px rgba(46,49,49,0.5)",
                     marginTop: "-25px"
                 }, children: "\u200B" }))] }, event.id));
-    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
-    return render;
+    return (jsx("div", { style: { position: "initial" }, children: event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent() }));
 };
 
 const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
@@ -3389,8 +3114,7 @@ const isAllowedToMove = (data, resData, cblDragNDrop) => {
         { from: "opstoolScheduler", to: "opstoolScheduler" },
         { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
         { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
-        { from: "vacationsScheduler", to: "vacationsScheduler" }
+        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" }
     ];
     const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
     if (crewControllAllowedMove) {
@@ -3456,14 +3180,19 @@ class ResourceRender extends React__default.Component {
         // res = true;
         return res;
     }
+    showStyles() {
+        let style = {};
+        style = {
+            backgroundColor: "#F9F8F8",
+            height: this.props.res.maxTop,
+            width: "100%",
+            position: "relative",
+            borderBottom: "1px solid rgb(255,255,255)"
+        };
+        return style;
+    }
     render() {
-        return (jsx("div", { style: {
-                backgroundColor: "#F9F8F8",
-                height: this.props.res.maxTop,
-                width: "100%",
-                position: "relative",
-                borderBottom: "1px solid rgb(255,255,255)"
-            }, onDragOver: e => onDragOver(e), onDrop: e => {
+        return (jsx("div", { style: this.showStyles(), onDragOver: e => onDragOver(e), onDrop: e => {
                 OnDrop({
                     e: e,
                     resource: this.props.res,
@@ -3472,6 +3201,8 @@ class ResourceRender extends React__default.Component {
                     state: this.props.t.state,
                     schedulerProps: this.props.t.props
                 });
+            }, onMouseDown: _e => {
+                // (e.button === 2) ? alert("rightClick resource") : alert("leftClick resource")
             }, className: "cwellt_divRow_schContent", children: this.props.res.events.map((evnt, _i) => (jsx(EventRender, { event: evnt, t: this.props.t }, evnt.id))) }, this.props.res.uid));
     }
 }
@@ -3494,8 +3225,8 @@ const TimeLine = ({ toolTipTitle, marginLeft }) => {
             } }) }));
 };
 
-const SchedulerContentArea = ({ schedulerId, showTimeline, now, lineStyle, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu }) => {
-    return (jsxs("td", { className: "contentArea", style: { width: "100%", overflow: "hidden" }, ref: n => setContentArea(n), children: [showTimeline && (jsx(TimeLine, { toolTipTitle: now
+const SchedulerContentArea = ({ maxPx, schedulerId, showTimeline, now, lineStyle, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu }) => {
+    return (jsxs("td", { className: "contentArea", style: { width: maxPx, overflow: "hidden" }, ref: n => setContentArea(n), children: [showTimeline && (jsx(TimeLine, { toolTipTitle: now
                     ? schedulerId.includes("crewAssignmentsScheduler")
                         ? moment(now).format("HH:mm")
                         : now.toDateString()
@@ -3846,7 +3577,7 @@ const filterEvents = (events, start, end, id, resId, module = undefined) => {
     if (id !== "flightWatchScheduler") {
         eventsFiltered = sortByDate(eventsFiltered);
     }
-    if (id !== "crewAssignmentsScheduler" && id !== "vacationsScheduler") {
+    if (id !== "crewAssignmentsScheduler") {
         return eventsFiltered;
     }
     eventsFiltered = setNotFullHeightEventsFirst(eventsFiltered);
@@ -3856,9 +3587,6 @@ const filterEvents = (events, start, end, id, resId, module = undefined) => {
     if (module === "CrewScheduling") {
         eventsFiltered = removeDuplicated(eventsFiltered, "AssignmentID");
     }
-    if (module === "CrewSchedulingVacations") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "ID");
-    }
     return eventsFiltered;
 };
 const sortByDate = (events) => events.sort((a, b) => +new Date(a.start) - +new Date(b.start));
@@ -3895,18 +3623,31 @@ const getRightPixels = (eventEnd, newEnd, dayPx) => {
     const pixelsPerDay = dayPx ?? 0;
     return calculatePixels(adjustedEvent, adjustedReference, pixelsPerDay);
 };
+const getResourcesWithPixels = (resources, _nextProps, dayPx, hasSideBar) => {
+    return resources.map(resource => {
+        const events = resource.events;
+        const mappedEvents = events.map(event => {
+            return {
+                ...event,
+                leftPx: getLeftPixels(event.start, _nextProps.startDate, dayPx),
+                rightPx: getRightPixels(event.end, _nextProps.endDate, dayPx) - (hasSideBar ? 17 : 0)
+            };
+        });
+        return {
+            ...resource,
+            events: mappedEvents
+        };
+    });
+};
 
 const checkIfSlotAvailable = (events, event) => {
     const lastElement = events.length - 1;
     if (events.length == 0)
         return true;
-    const collide = events.some(existent => {
-        return !(existent.end <= event.start || event.end <= existent.start);
-    });
-    return !collide || events[lastElement].isFullHeight;
+    return events[lastElement].end <= event.start || events[lastElement].isFullHeight;
 };
 
-const getEventsOfResource = (res, events, state, id, module, start, end) => {
+const getEventsOfResource = (res, events, state, id, module, start, end, hasSideBar) => {
     let maxTop = 0;
     const tops = [];
     tops[0] = new Array();
@@ -3944,7 +3685,7 @@ const getEventsOfResource = (res, events, state, id, module, start, end) => {
         }
         const sideBarSize = 17;
         event.leftPx = getLeftPixels(event.start, start, state.dayPx);
-        event.rightPx = getRightPixels(event.end, end, state.dayPx) - sideBarSize;
+        event.rightPx = getRightPixels(event.end, end, state.dayPx) - (hasSideBar ? sideBarSize : 0);
     });
     let OrderedArray = new Array();
     for (let h = 0; h < tops.length; h++) {
@@ -3958,48 +3699,6 @@ const getEventsOfResource = (res, events, state, id, module, start, end) => {
     }
     return OrderedArray;
 };
-const getEventsInInnerRows = (res, state, start, end) => {
-    let maxTop = 0;
-    const tops = [];
-    tops[0] = new Array();
-    res.events.forEach((event, i) => {
-        if (i === 0 || event.isFullHeight) {
-            event.top = 0;
-            tops[0].push(event);
-        }
-        else {
-            let found = false;
-            for (let j = 0; j < tops.length && found === false; j++) {
-                found = checkIfSlotAvailable(tops[j], event);
-                if (found === true || event.isFullHeight) {
-                    event.top = j * state.eventHeight;
-                    tops[j].push(event);
-                }
-            }
-            if (found === false && !event.isFullHeight) {
-                maxTop++;
-                tops[maxTop] = new Array();
-                event.top = maxTop * state.eventHeight;
-                tops[maxTop].push(event);
-            }
-            else {
-                // This is for flightwatch
-                if (found === true && event.data.order === 2 && maxTop < 1) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    event.top = maxTop * state.eventHeight;
-                    tops[maxTop].push(event);
-                    maxTop--;
-                }
-            }
-        }
-        const sideBarSize = 17;
-        const rightPx = getRightPixels(event.end, end, state.dayPx) - sideBarSize;
-        event.leftPx = getLeftPixels(event.start, start, state.dayPx);
-        event.rightPx = rightPx < 0 ? 0 : rightPx;
-    });
-    return tops;
-};
 
 const compareStrings = (str1, str2) => {
     if (str1 > str2)
@@ -4010,8 +3709,7 @@ const compareStrings = (str1, str2) => {
 };
 
 const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate) => {
-    if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
-        resourceName === "Employees") {
+    if ((module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
         resources = resources.filter(c => (c.data.Eintritt === null || (c.data.Eintritt !== null && moment(c.data.Eintritt).toDate() <= endDate)) &&
             (c.data.Austritt === null || (c.data.Austritt !== null && moment(c.data.Austritt).toDate() >= startDate)));
     }
@@ -4025,9 +3723,13 @@ const filterResources = (module, resourceName, resources, groupByFunction, endDa
 const filterAndProcessResources = (id, props, state) => {
     const events = [...props.events];
     const filteredResources = filterResources(props.module, props.resourceName, [...props.resources], props.groupByFunction, props.endDate, props.startDate);
+    if (filteredResources.length > 0) {
+        console.log("is not empty");
+    }
+    const hasSideBar = !props.id.toLowerCase().includes("pinned");
     return filteredResources.map(r => ({
         ...r,
-        events: getEventsOfResource(r, events, state, id, props.module, props.startDate, props.endDate)
+        events: getEventsOfResource(r, events, state, id, props.module, props.startDate, props.endDate, hasSideBar)
     }));
 };
 
@@ -4066,6 +3768,394 @@ const handleDateChange = (nextProps, currentProps, showLogs, initOutside) => {
     return;
 };
 
+const hasSameProperties = (event1, other) => {
+    const areDifferent = event1.resourceId !== other.resourceId ||
+        event1.start !== other.start ||
+        event1.end !== other.end ||
+        event1.selected !== other.selected ||
+        event1.data !== other.data;
+    // TODO: event1.data !== other.data is making a bad compare, we should use
+    // JSON.stringify(this.data) === JSON.stringify(other.data)
+    return !areDifferent;
+};
+
+const handlePropChanges = (_nextProps, currentProps, state, setState) => {
+    let eventsPropDic = Object.assign({}, ..._nextProps.events.map(x => ({ [x.id]: x })));
+    let resourcesPropDic = Object.assign({}, ..._nextProps.resources.map(x => ({
+        [x.data.fullName !== undefined ? x.data.fullName : x.name]: x
+    })));
+    let eventsStateDic = Object.assign({}, ...state.events.map(x => ({ [x.id]: x })));
+    let resourcesStateDic = Object.assign({}, ...state.resources.map(x => ({ [x.id]: x })));
+    let state_resources_copy = [...state.resources];
+    let propEvents = [];
+    let stateEvents = [];
+    if (state.events.length !== _nextProps.events.length) {
+        if (currentProps.id === "crewPinnedScheduler" || currentProps.id === "crewAssignmentsScheduler") {
+            // WHEN IS AN INSERT:
+            // Get the inserted events
+            propEvents = lodash.differenceWith(_nextProps.events, state.events, function (o1, o2) {
+                return o1.data.Crew_Id === o2.data.Crew_Id;
+            });
+            eventsPropDic = Object.assign({}, ...propEvents.map(x => ({ [x.id]: x })));
+            // WHEN IS A DELETE:
+            // Get the deleted events
+            stateEvents = lodash.differenceWith(state.events, _nextProps.events, function (o1, o2) {
+                return o1.data.Crew_Id === o2.data.Crew_Id;
+            });
+            eventsStateDic = Object.assign({}, ...stateEvents.map(x => ({ [x.id]: x })));
+        }
+    }
+    if (propEvents.length === 0) {
+        eventsPropDic = Object.assign({}, ..._nextProps.events.map(x => ({ [x.id]: x })));
+        eventsStateDic = Object.assign({}, ...state.events.map(x => ({ [x.id]: x })));
+    }
+    let propResources = [];
+    let stateResources = [];
+    if (state.resources.length !== _nextProps.resources.length &&
+        state.resources.length > 0 &&
+        _nextProps.resources.length > 0) {
+        if (currentProps.id === "crewPinnedScheduler" || currentProps.id === "crewAssignmentsScheduler") {
+            // WHEN IS AN INSERT:
+            // Get the inserted events
+            propResources = lodash.differenceWith(_nextProps.resources, state.resources, function (o1, o2) {
+                return o1.data.Crewmember_Id === o2.data.Crewmember_Id;
+            });
+            resourcesPropDic = Object.assign({}, ...propResources.map(x => ({ [x.id]: x })));
+            // WHEN IS A DELETE:
+            // Get the deleted events
+            stateResources = lodash.differenceWith(state.resources, _nextProps.resources, function (o1, o2) {
+                return o1.data.Crewmember_Id === o2.data.Crewmember_Id;
+            });
+            resourcesStateDic = Object.assign({}, ...stateResources.map(x => ({ [x.id]: x })));
+        }
+    }
+    if (propResources.length === 0) {
+        resourcesPropDic = Object.assign({}, ..._nextProps.resources.map(x => ({ [x.id]: x })));
+        resourcesStateDic = Object.assign({}, ...state.resources.map(x => ({ [x.id]: x })));
+    }
+    const eventsKeys = Array.from(new Set([...Object.keys(eventsPropDic), ...Object.keys(eventsStateDic)]));
+    let resourcesToRecalculate = [];
+    const state_events_copy = [...state.events];
+    eventsKeys.forEach(eventKey => {
+        const eventInPropsDic = eventsPropDic[eventKey];
+        const eventInStateDic = eventsStateDic[eventKey];
+        const createNewEvent = (eventProps, eventInDictionary) => Object.assign(new eventProps.constructor(), eventInDictionary);
+        if (eventInPropsDic && !eventInStateDic) {
+            const newEvent = createNewEvent(eventsPropDic[eventKey], eventInPropsDic);
+            state_events_copy.push(newEvent);
+            resourcesToRecalculate.push(eventInPropsDic.resourceId);
+        }
+        else if (!eventInPropsDic && eventInStateDic) {
+            const index = state_events_copy.indexOf(eventInStateDic);
+            state_events_copy.splice(index, 1);
+            resourcesToRecalculate.push(eventInStateDic.resourceId);
+        }
+        else if (eventInPropsDic && eventInStateDic) {
+            const hasSameProps = hasSameProperties(eventsPropDic[eventKey], eventsStateDic[eventKey]);
+            if (!hasSameProps) {
+                const newEvent = createNewEvent(eventsPropDic[eventKey], eventInPropsDic);
+                const eventInStateCopyIndex = state_events_copy.findIndex(sec => sec.id === newEvent.id);
+                state_events_copy[eventInStateCopyIndex] = newEvent;
+                resourcesToRecalculate.push(eventInPropsDic.resourceId);
+                resourcesToRecalculate.push(eventInStateDic.resourceId);
+            }
+        }
+    });
+    const resourceKeys = Array.from(new Set([...Object.keys(resourcesPropDic), ...Object.keys(resourcesStateDic)]));
+    resourceKeys.forEach(resourceKey => {
+        const resourceInPropsDic1 = resourcesPropDic[resourceKey];
+        const resourceInStateDic1 = resourcesStateDic[resourceKey];
+        if (resourceInPropsDic1 &&
+            resourceInStateDic1 &&
+            (resourceInPropsDic1.isLoading !== resourceInStateDic1.isLoading ||
+                resourceInPropsDic1.data.hasFunctionChangeInPeriod !== resourceInStateDic1.data.hasFunctionChangeInPeriod ||
+                resourceInPropsDic1.data.hasTyperatingChangeInPeriod !== resourceInStateDic1.data.hasTyperatingChangeInPeriod)) {
+            resourcesToRecalculate.push(resourceInPropsDic1.id);
+        }
+    });
+    resourcesToRecalculate = Array.from(new Set(resourcesToRecalculate)).map(m => Number(m));
+    const hasSideBar = checkScrollBar(currentProps.id);
+    resourceKeys.forEach(resourceKey => {
+        const resourceInPropsDic = resourcesPropDic[resourceKey];
+        const resourceInStateDic = resourcesStateDic[resourceKey];
+        if (resourceInPropsDic && !resourceInStateDic) {
+            const newResource = Object.assign(new resourcesPropDic[resourceKey].constructor(), resourceInPropsDic);
+            newResource.events = getEventsOfResource(newResource, state_events_copy, state, currentProps.id, currentProps.module, _nextProps.startDate, _nextProps.endDate, hasSideBar);
+            state_resources_copy.push(newResource);
+        }
+        else if (!resourceInPropsDic && resourceInStateDic) {
+            const index = state_resources_copy.indexOf(resourceInStateDic);
+            state_resources_copy.splice(index, 1);
+        }
+        else if (resourceInPropsDic && resourceInStateDic && resourcesToRecalculate.includes(resourceInPropsDic.id)) {
+            const newResource2 = Object.assign(new resourcesPropDic[resourceKey].constructor(), resourceInPropsDic);
+            newResource2.events = getEventsOfResource(newResource2, state_events_copy, state, currentProps.id, currentProps.module, _nextProps.startDate, _nextProps.endDate, hasSideBar);
+            const resourceInStateCopyIndex = state_resources_copy.findIndex(src => src.id === newResource2.id);
+            state_resources_copy[resourceInStateCopyIndex] = newResource2;
+        }
+    });
+    if (currentProps.id === "crewPinnedScheduler" || currentProps.id === "crewAssignmentsScheduler") {
+        state_resources_copy = state_resources_copy.sort((a, b) => {
+            if (a.data.C3_LC > b.data.C3_LC) {
+                return 1;
+            }
+            if (a.data.C3_LC < b.data.C3_LC) {
+                return -1;
+            }
+            return 0;
+        });
+    }
+    if (resourcesToRecalculate.length > 0 ||
+        _nextProps.resources.length !== state.resources.length ||
+        _nextProps.events.length !== state.events.length) {
+        setState(state_events_copy, state_resources_copy);
+    }
+    if (state.showConsoleLogs) {
+        console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
+        console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
+    }
+};
+const checkScrollBar = (id) => {
+    const schedulerElement = document.getElementById(id);
+    const resources = schedulerElement?.firstChild?.lastChild;
+    const schedulerHasScroll = checkScrollBarExists(schedulerElement);
+    const resourcesHaveScroll = checkScrollBarExists(resources);
+    return schedulerHasScroll || resourcesHaveScroll;
+};
+const checkScrollBarExists = (element) => {
+    if (element === null) {
+        return false;
+    }
+    let res = element.scrollTop > 0;
+    if (!res) {
+        element.scrollTop = 1;
+        res = element.scrollTop > 0;
+        element.scrollTop = 0;
+    }
+    return res;
+};
+
+const handleResourceChange = (nextProps, showLogs, dayPx, setState) => {
+    const props_events_copy = [...nextProps.events];
+    const props_resources_copy = [...nextProps.resources];
+    const hasSideBar = checkScrollBar(nextProps.id);
+    setState(props_events_copy, getResourcesWithPixels(props_resources_copy, nextProps, dayPx, hasSideBar));
+    if (showLogs) {
+        console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
+        console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
+    }
+};
+
+const getHasPropsChanges = (props, state, _nextProps) => {
+    let propHasChanges = false;
+    if (state.startDate.getTime() !== _nextProps.startDate.getTime()) {
+        propHasChanges = true;
+    }
+    if (state.endDate.getTime() !== _nextProps.endDate.getTime()) {
+        propHasChanges = true;
+    }
+    if (state.groupByFunction !== _nextProps.groupByFunction && _nextProps.groupByFunction !== undefined) {
+        propHasChanges = true;
+    }
+    if (props.events && _nextProps.events && props.events.length !== _nextProps.events.length) {
+        propHasChanges = true;
+    }
+    if (state.events && _nextProps.events && state.events.length !== _nextProps.events.length) {
+        propHasChanges = true;
+    }
+    if (state.events && _nextProps.events && state.events.length > 0 && _nextProps.events.length > 0) {
+        // When an event has been updated.
+        if (state.events.length === _nextProps.events.length) {
+            for (let i = 0; i < props.events.length; i++) {
+                if (state.events[i].selected !== _nextProps.events[i].selected) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.state !== undefined &&
+                    props.events[i].data.state !== _nextProps.events[i].data.state) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.start !== undefined &&
+                    props.events[i].data.start !== _nextProps.events[i].data.start) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.end !== undefined && props.events[i].data.end !== _nextProps.events[i].data.end) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.remark !== undefined &&
+                    props.events[i].data.remark !== _nextProps.events[i].data.remark) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.highPrio !== undefined &&
+                    props.events[i].data.highPrio !== _nextProps.events[i].data.highPrio) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.VacID !== undefined &&
+                    props.events[i].data.VacID !== _nextProps.events[i].data.VacID) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.Crew_Id !== undefined &&
+                    props.events[i].data.Crew_Id !== _nextProps.events[i].data.Crew_Id) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.CrewComp !== undefined &&
+                    props.events[i].data.CrewComp !== _nextProps.events[i].data.CrewComp) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.crewCompString !== undefined &&
+                    props.events[i].data.crewCompString !== _nextProps.events[i].data.crewCompString) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.SplitDuty !== undefined &&
+                    props.events[i].data.SplitDuty !== _nextProps.events[i].data.SplitDuty) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.firstNumber !== undefined &&
+                    props.events[i].data.firstNumber !== _nextProps.events[i].data.firstNumber) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.CompRectList !== undefined &&
+                    props.events[i].data.CompRectList !== _nextProps.events[i].data.CompRectList) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.Jumpseats !== undefined &&
+                    props.events[i].data.Jumpseats !== _nextProps.events[i].data.Jumpseats) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.openJumpSeatsString !== undefined &&
+                    props.events[i].data.openJumpSeatsString !== _nextProps.events[i].data.openJumpSeatsString) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.IsCrewchange !== undefined &&
+                    props.events[i].data.IsCrewchange !== _nextProps.events[i].data.IsCrewchange) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.SStartApt !== undefined &&
+                    props.events[i].data.SStartApt !== _nextProps.events[i].data.SStartApt) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.SEndApt !== undefined &&
+                    props.events[i].data.SEndApt !== _nextProps.events[i].data.SEndApt) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.Instructor !== undefined &&
+                    props.events[i].data.Instructor !== _nextProps.events[i].data.Instructor) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.Trainee !== undefined &&
+                    props.events[i].data.Trainee !== _nextProps.events[i].data.Trainee) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.LineCheck !== undefined &&
+                    props.events[i].data.LineCheck !== _nextProps.events[i].data.LineCheck) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.IsObserver !== undefined &&
+                    props.events[i].data.IsObserver !== _nextProps.events[i].data.IsObserver) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.IsSplitDuty !== undefined &&
+                    props.events[i].data.IsSplitDuty !== _nextProps.events[i].data.IsSplitDuty) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.Comment !== undefined &&
+                    props.events[i].data.Comment !== _nextProps.events[i].data.Comment) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.InternalRemark !== undefined &&
+                    props.events[i].data.InternalRemark !== _nextProps.events[i].data.InternalRemark) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.ExternalRemark !== undefined &&
+                    props.events[i].data.ExternalRemark !== _nextProps.events[i].data.ExternalRemark) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.inserted !== undefined &&
+                    props.events[i].data.inserted !== _nextProps.events[i].data.inserted) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.edited !== undefined &&
+                    props.events[i].data.edited !== _nextProps.events[i].data.edited) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.deleted !== undefined &&
+                    props.events[i].data.deleted !== _nextProps.events[i].data.deleted) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.MissingFunc !== undefined &&
+                    props.events[i].data.MissingFunc !== _nextProps.events[i].data.MissingFunc) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.crewComposition_CompositionName !== undefined &&
+                    props.events[i].data.crewComposition_CompositionName !==
+                        _nextProps.events[i].data.crewComposition_CompositionName) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.subject !== undefined &&
+                    props.events[i].data.subject !== _nextProps.events[i].data.subject) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.ACFTID !== undefined &&
+                    props.events[i].data.ACFTID !== _nextProps.events[i].data.ACFTID) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.allAcftId !== undefined &&
+                    props.events[i].data.allAcftId !== _nextProps.events[i].data.allAcftId) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.SCDcrew !== undefined &&
+                    props.events[i].data.SCDcrew !== _nextProps.events[i].data.SCDcrew) {
+                    propHasChanges = true;
+                }
+                if (props.events[i].data.C3_LC !== undefined &&
+                    props.events[i].data.C3_LC !== _nextProps.events[i].data.C3_LC) {
+                    propHasChanges = true;
+                }
+            }
+        }
+    }
+    if (state.showConsoleLogs) {
+        console.log("Schedule - componentWillReceiveProps - has changes, end: ", moment(new Date()).toString());
+        console.log("Schedule - componentWillReceiveProps - print on schedule, start: ", moment(new Date()).toString());
+    }
+    if (props.height !== _nextProps.height) {
+        propHasChanges = true;
+    }
+    if (props.pinnedResources !== _nextProps.pinnedResources) {
+        propHasChanges = true;
+    }
+    if (props.resources && _nextProps.resources && props.resources.length !== _nextProps.resources.length) {
+        propHasChanges = true;
+    }
+    if (props.resources && _nextProps.resources && props.resources.length > 0 && _nextProps.resources.length > 0) {
+        if (props.resources.length === _nextProps.resources.length) {
+            for (let i = 0; i < props.resources.length; i++) {
+                if (props.resources[i].isLoading !== _nextProps.resources[i].isLoading) {
+                    propHasChanges = true;
+                }
+                if (props.resources[i].isInViewport !== _nextProps.resources[i].isInViewport) {
+                    propHasChanges = true;
+                }
+                if (props.resources[i].data.isGroupedByFunction !== _nextProps.resources[i].data.isGroupedByFunction) {
+                    propHasChanges = true;
+                }
+                if (props.resources[i].data.hasFunctionChangeInPeriod !== _nextProps.resources[i].data.hasFunctionChangeInPeriod) {
+                    propHasChanges = true;
+                }
+                if (props.resources[i].data.hasTyperatingChangeInPeriod !==
+                    _nextProps.resources[i].data.hasTyperatingChangeInPeriod) {
+                    propHasChanges = true;
+                }
+            }
+            if (props.module === "CrewScheduling" && props.resourceName === "Employees") {
+                if (props.groupByFunction !== _nextProps.groupByFunction) {
+                    propHasChanges = true;
+                }
+            }
+        }
+    }
+    return propHasChanges && _nextProps.resources.length > 0 && _nextProps.events.length > 0;
+};
+
 const getTimeHeaders = (startDate, endDate) => {
     const dateArray = new Array();
     const currentDate = new Date(startDate);
@@ -4118,6 +4208,7 @@ class CwScheduler extends React.Component {
         const dayPx = maxPx / Math.floor(daysBetweenTwoDates(props.startDate, props.endDate));
         const hourPx = dayPx / 24;
         const minutePx = dayPx / 1440;
+        // eslint-disable-next-line react/no-direct-mutation-state
         this.state = {
             startDate: props.startDate,
             endDate: props.endDate,
@@ -4150,10 +4241,12 @@ class CwScheduler extends React.Component {
         const minutePx = dayPx / 1440;
         const eventHeight = 30;
         resources = filterResources(this.props.module, this.props.resourceName, this.props.resources, this.props.groupByFunction, endDate, startDate);
+        const hasScrollBar = checkScrollBar(this.props.id);
+        console.log(this.props.id + "");
         resources = resources.map(resource => {
             return {
                 ...resource,
-                events: getEventsOfResource(resource, events, this.state, this.props.id, this.props.module, startDate, endDate)
+                events: getEventsOfResource(resource, events, this.state, this.props.id, this.props.module, startDate, endDate, hasScrollBar)
             };
         });
         const groupByFunction = this.props.groupByFunction ?? false;
@@ -4201,6 +4294,7 @@ class CwScheduler extends React.Component {
         window.addEventListener("resize", this.handleResize);
     };
     handleResize = () => { };
+    // eslint-disable-next-line react/no-deprecated
     componentWillReceiveProps(_nextProps) {
         if (this.state.showConsoleLogs) {
             console.log("Schedule - componentWillReceiveProps, start: ", moment(new Date()).toString());
@@ -4214,43 +4308,25 @@ class CwScheduler extends React.Component {
             });
             return;
         }
-        const mappedEvents = _nextProps.events
-            .map(event => {
-            return {
-                ...event,
-                leftPx: getLeftPixels(event.start, _nextProps.startDate, this.state.dayPx),
-                rightPx: getRightPixels(event.end, _nextProps.endDate, this.state.dayPx) - 17
-            };
-        })
-            .filter(event => {
-            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
-            // console.log(event.id + " is out of range" + outOfRange);
-            return !outOfRange;
-        });
-        const newResources = _nextProps.resources
-            .map(resource => {
-            return {
-                ...resource,
-                events: mappedEvents.filter(event => event.resourceId === resource.id)
-            };
-        })
-            .map(resource => {
-            const tops = getEventsInInnerRows(resource, this.state, _nextProps.startDate, _nextProps.endDate);
-            const height = tops.length === 0 ? this.state.eventHeight : tops.length * this.state.eventHeight;
-            let flatMapEvents = [];
-            for (let h = 0; h < tops.length; h++) {
-                flatMapEvents = flatMapEvents.concat(tops[h]);
-            }
-            return {
-                ...resource,
-                maxTop: height,
-                events: flatMapEvents
-            };
-        });
-        this.setState({
-            events: mappedEvents,
-            resources: newResources
-        });
+        const hasOnlyResourcesChanged = _nextProps.resources.length !== this.state.resources.length && _nextProps.events.length === 0;
+        if (hasOnlyResourcesChanged) {
+            handleResourceChange(_nextProps, this.state.showConsoleLogs, this.state.dayPx, (events, resources) => {
+                this.setState({
+                    events: events,
+                    resources: resources
+                });
+            });
+            return;
+        }
+        if (getHasPropsChanges(this.props, this.state, _nextProps)) {
+            handlePropChanges(_nextProps, this.props, this.state, (events, resources) => {
+                this.setState({
+                    events: events,
+                    resources: resources
+                });
+            });
+            return;
+        }
     }
     handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
         let datetime = new Date();
@@ -4288,9 +4364,9 @@ class CwScheduler extends React.Component {
                             endDate: this.state.endDate,
                             headerName: this.props.resourceName
                         }, descriptionColumn: this.props.descriptionColumn })), jsx("tbody", { style: {
-                            overflowY: "scroll",
+                            overflowY: isPinnedTable ? "hidden" : "scroll",
                             maxHeight: isPinnedTable ? undefined : schedulerHeight
-                        }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxs("tr", { className: "fc_body_row", ref: this.refRowResourceArea, children: [jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: this.handleOnClickResourceContextMenu, ResourceTitleComponent: this.props.resourceComp }), jsx("td", { className: "dividerArea" }), jsx(SchedulerContentArea, { maxPx: this.state.maxPx, schedulerId: this.id, showTimeline: showTimeline, now: this.state.nowUtc, lineStyle: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: n => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
+                        }, className: this.props.id.toLowerCase().includes("pinned") ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxs("tr", { className: "fc_body_row", ref: this.refRowResourceArea, children: [jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: this.handleOnClickResourceContextMenu, ResourceTitleComponent: this.props.resourceComp }), jsx("td", { className: "dividerArea" }), jsx(SchedulerContentArea, { maxPx: this.state.maxPx, schedulerId: this.id, showTimeline: showTimeline, now: this.state.nowUtc, lineStyle: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: n => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
     }
 }
 
@@ -4527,17 +4603,13 @@ class SuperScheduler extends React.Component {
     }
     render() {
         const havePinnedResources = this.state.pinnedResources?.length > 0;
-        const firstSchedulerResources = havePinnedResources
-            ? this.props.resourcesToPin.filter(x => this.state.pinnedResources.includes(x.id))
-            : new Array();
-        const secondSchedulerResources = this.props.resources.filter(x => !this.state.pinnedResources.includes(x.id));
-        const pinnedEvents = this.props.pinnedEvents !== undefined
-            ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
-            : new Array();
-        const notPinnedEvents = this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId));
-        return (jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsx("div", { style: { padding: "0.5rem" }, children: jsx(CwButton, { "$text": "Clear", onClick: () => {
+        return (jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsx(CwScheduler, { id: "crewPinnedScheduler", events: this.props.pinnedEvents !== undefined
+                        ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
+                        : new Array(), resources: havePinnedResources
+                        ? this.props.resourcesToPin.filter(x => this.state.pinnedResources.includes(x.id))
+                        : new Array(), height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsx("div", { style: { padding: "0.5rem" }, children: jsx(CwButton, { "$text": "Clear", onClick: () => {
                             this.props.scheduler_handleClearPinnedOnParent();
-                        } }) })), jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: notPinnedEvents, resources: secondSchedulerResources, height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
+                        } }) })), jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId)), resources: this.props.resources.filter(x => !this.state.pinnedResources.includes(x.id)), height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
     }
 }
 class CblDragAndDrop {
@@ -4714,6 +4786,26 @@ const generateSegment = (includeHyphens) => {
     return includeHyphens ? "-" + p.substring(0, 4) + "-" + p.substring(4, 8) : p;
 };
 
+class Resource {
+    uid = "";
+    id;
+    name;
+    maxTop;
+    events = [];
+    isInViewport = false;
+    schedulerResourceDisplay;
+    isLoading = false;
+    data = null;
+    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
+        this.id = id;
+        this.name = name;
+        this.maxTop = eventHeight;
+        this.data = data;
+        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
+        this.uid = getGUID();
+    }
+}
+
 class cblEvent {
     id = "";
     start;
@@ -4741,24 +4833,4 @@ class cblEvent {
     }
 }
 
-class Resource {
-    uid = "";
-    id;
-    name;
-    maxTop;
-    events = [];
-    isInViewport = false;
-    schedulerResourceDisplay;
-    isLoading = false;
-    data = null;
-    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
-        this.id = id;
-        this.name = name;
-        this.maxTop = eventHeight;
-        this.data = data;
-        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
-        this.uid = getGUID();
-    }
-}
-
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAddMarked, CwBtnAddMarkedSolid, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBookReadedLine, CwBtnBookReadedSolid, CwBtnBulkDuty, CwBtnCancel, CwBtnCloudFolder, CwBtnCopy, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDocumentChecked, CwBtnDocumentPublished, CwBtnDownLoadAllInfo, CwBtnDownLoadFolder, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnEmptytrash, CwBtnFiles, CwBtnFolderIn, CwBtnFulltrash, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnMarked, CwBtnMarkedSolid, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnOneDrive, CwBtnPairing, CwBtnPictureFolder, CwBtnPin, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnRestoreTrash, CwBtnRestoreTrashRight, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnSelectedSave, CwBtnShare, CwBtnStatistic, CwBtnUndo, CwBtnUploadFiles, CwBtnUserFolder, CwBtnUsers, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDanger, CwButtonDangerOutline, CwButtonDef, CwButtonDefOutline, CwButtonSec, CwButtonSecOutline, CwCheckbox, CwContextMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate$1 as CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDate as CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwSearch as CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, SuperScheduler as CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, MultiSelect, Resource, Weekdays, cblEvent, itemsToMultiFilterTags, useCwMessage };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAddMarked, CwBtnAddMarkedSolid, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBookReadedLine, CwBtnBookReadedSolid, CwBtnBulkDuty, CwBtnCancel, CwBtnCloudFolder, CwBtnCopy, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDocumentChecked, CwBtnDocumentPublished, CwBtnDownLoadAllInfo, CwBtnDownLoadFolder, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnEmptytrash, CwBtnFiles, CwBtnFolderIn, CwBtnFulltrash, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnMarked, CwBtnMarkedSolid, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnOneDrive, CwBtnPairing, CwBtnPictureFolder, CwBtnPin, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnRestoreTrash, CwBtnRestoreTrashRight, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnSelectedSave, CwBtnShare, CwBtnStatistic, CwBtnUndo, CwBtnUploadFiles, CwBtnUserFolder, CwBtnUsers, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDanger, CwButtonDangerOutline, CwButtonDef, CwButtonDefOutline, CwButtonExpandAndCollapse, CwButtonSec, CwButtonSecOutline, CwCheckbox, CwContextMenu, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate$1 as CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDate as CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwSearch as CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, SuperScheduler as CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, MultiSelect, Resource, cblEvent, useCwMessage };