@cwellt_software/cwellt-reactjs-lib 1.0.0 → 1.0.3

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, forwardRef, useImperativeHandle, useCallback, useMemo, createElement, Fragment, createRef } from 'react';
+import React__default, { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle, useCallback, 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,10 +358,120 @@ 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 = {
@@ -376,44 +486,53 @@ 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() {
-        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: () => {
+        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": () => {
                     this.formRef?.current?.resetFields();
                     this.props.SET_MODAL_REPORT_VISIBLE(false);
-                }, 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"] }))] })) }));
+                }, 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;
     }
 }
 
@@ -508,7 +627,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *     title: 'Age',
  *     dataIndex: 'age',
  *     key: 'age',
- *     render: (age) => <span>{age} años</span>, // Ejemplo de renderización personalizada
+ *     render: (age) => <span>{age} years</span>, // Example of custom rendering
  *   },
  *   {
  *     title: 'Address',
@@ -518,7 +637,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *       <a href={`https://maps.google.com/?q=${encodeURIComponent(address)}`} target="_blank">
  *         {address}
  *       </a>
- *     ), // Ejemplo de renderización personalizada con un enlace
+ *     ), // Example of custom link rendering
  *   },
  * ];
  *
@@ -543,7 +662,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   },
  *   {
  *     key: '4',
- *     name: 'Gabri',
+ *     name: 'Gabriel',
  *     age: 22,
  *     address: '10 Downing Street',
  *   },
@@ -574,7 +693,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * <CwTable
  *   columns={columns}
- *   data={data}
+ *   data={data} // WTF whatever array of objects you add here, make sure each has a key otherwise everything will expand
  *   itemsPerPage={3}
  *   pagination={true}
  *   expandedRowRender={generateExpandedContent}
@@ -582,7 +701,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * />
  * @returns React component
  */
-function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id }) {
+function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id, textNoData }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [expandedRowKey, setExpandedRowKey] = useState(null);
     const [sortConfig, setSortConfig] = useState({
@@ -609,40 +728,47 @@ function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, o
         }
         setSortConfig({ key: columnKey, direction });
     };
-    // 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;
-        });
-    }
-    // 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);
+    // 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 = itemsPerPage !== undefined ? Math.ceil(sortedData.length / itemsPerPage) : Math.ceil(sortedData.length / 0);
+    const totalPages = useMemo(() => {
+        if (!sortedData)
+            return 0;
+        return itemsPerPage !== undefined ? Math.ceil(sortedData.length / itemsPerPage) : 1;
+    }, [sortedData, itemsPerPage]);
     // Function to handle page change
     const handlePageChange = (newPage) => {
         if (newPage >= 1 && newPage <= totalPages) {
             setCurrentPage(newPage);
         }
     };
-    return (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", {}))] }));
+    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" })] }))] }));
 }
 
 /**
@@ -671,7 +797,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 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 }) })] }));
+    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 }) })] }));
 }
 
 /**
@@ -793,7 +919,6 @@ 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,
@@ -1356,6 +1481,149 @@ 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);
@@ -2308,6 +2576,21 @@ 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 => {
@@ -2347,6 +2630,7 @@ 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"
@@ -2354,6 +2638,8 @@ 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([
  *      {
@@ -2378,48 +2664,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 = ({ $onChange, $allTags, $selectedTags, $id, style }) => {
+const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
+    const [filteredTags, setFilteredTags] = useState(new Set());
     const [inputTextValue, setInputTextValue] = useState("");
-    const [selectedCategory, setSelectedCategory] = useState("");
     const [inputIsFocussed, setInputIsFocussed] = useState(false);
-    const categoriesMappedToTags = useMemo(() => {
+    const [selectedCategory, setSelectedCategory] = useState("All");
+    const categoriesMappedToTags = () => {
         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;
-    }, [$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) => {
+    };
+    const handleClickCategory = (category) => {
         setSelectedCategory(category);
-    }, []);
-    const handleInputText = useCallback((input) => {
+        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : allTags);
+    };
+    const handleInputText = (input) => {
+        if (selectedCategory !== "All")
+            setSelectedCategory("All");
         setInputTextValue(input);
-    }, []);
-    const addTag = useCallback((newTag) => {
+        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) => {
         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);
-            $onChange?.(updatedTags);
+            const updatedTags = new Set(selectedTags).add(newTag);
+            onChangeSelectedTags?.(updatedTags);
             setInputTextValue("");
+            setFilteredTags(allTags);
         }
-    }, [$selectedTags, $onChange]);
-    const removeTag = useCallback((id) => {
-        const updatedTags = new Set($selectedTags);
+    };
+    const removeTag = (id) => {
+        const updatedTags = new Set(selectedTags);
         const toDelete = Array.from(updatedTags).find(i => i.ID === id);
         if (toDelete) {
             toDelete.Selected = false;
@@ -2427,15 +2713,18 @@ const CwMultiFilter = ({ $onChange, $allTags, $selectedTags, $id, style }) => {
             toDelete.Removable = false;
             updatedTags.delete(toDelete);
         }
-        $onChange?.(updatedTags);
-    }, [$selectedTags, $onChange]);
+        onChangeSelectedTags?.(updatedTags);
+    };
     useEffect(() => {
-        handleClickCategory("");
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [$allTags]);
-    return (jsxs("form", { id: $id, className: styles["cw-multi-filter"], style: style, onSubmit: (e) => {
+        // 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) => {
             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", { 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 => {
+        }, 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 => {
                             switch (e.key) {
                                 case "Enter":
                                 case "Tab":
@@ -2447,33 +2736,29 @@ const CwMultiFilter = ({ $onChange, $allTags, $selectedTags, $id, 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();
-                            $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
+                            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"
                                     ? {
                                         backgroundColor: "var(--cw-color-primary)",
                                         color: "var(--cw-color-on-primary)",
                                         fontWeight: 400
                                     }
-                                    : {}, onClick: () => {
-                                    handleClickCategory("");
-                                }, children: "All" }), Array.from(categoriesMappedToTags.keys()).map(category => (jsx("button", { style: selectedCategory === category
+                                    : {}, onClick: () => handleClickCategory("All"), 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);
@@ -2590,184 +2875,170 @@ function CwFloatingButton() {
         const cwScheduler = document.getElementById("CwelltScheduler");
         cwScheduler?.classList.toggle("CwelltSchedulerActive");
     };
-    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" });
+    return jsx("button", { className: "cw-button cw_btnFloatingButton", onClick: cwShowElement, id: "cw_btnFloatingButton" });
 }
 // Primary button => CwButtonDef
 // CwButtonDef
 function CwButtonDef({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw_btn_df_desc cw_btn_primary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_df_desc  cw_btn_primaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_df_desc cw_btn_secondary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_df_desc cw_btn_secondaryOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_df_desc cw_btn_danger", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_df_desc cw_btn_dangerOutline", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
+    return (jsx("button", { className: "cw-button 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_add", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_save", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_edit", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_search", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_download", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_view", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_print", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_cancel", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_delete", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_saveSelected", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_saveSelected", disabled: cw_btn_disabled });
 }
 // CwUndo
 function CwBtnUndo({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_undo", disabled: cw_btn_disabled });
 }
 // Cw
 function CwBtnRefresh({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_refresh", disabled: cw_btn_disabled });
 }
 // Cw hide
 function CwBtnHide({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_hide", disabled: cw_btn_disabled });
 }
 // Cw Select
 function CwBtnSelect({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_select", disabled: cw_btn_disabled });
 }
 // Cw copy
 function CwBtnCopy({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_copy", disabled: cw_btn_disabled });
 }
 // Cw Pin
 function CwBtnPin({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_pin", disabled: cw_btn_disabled });
 }
 // Cw Info
 function CwBtnInfo({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_info", disabled: cw_btn_disabled });
 }
 // Cw Warning
 function CwBtnWarning({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_warning", disabled: cw_btn_disabled });
 }
 // Cw Share
 function CwBtnShare({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_share", disabled: cw_btn_disabled });
 }
 // Cw Files
 function CwBtnFiles({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_files", disabled: cw_btn_disabled });
 }
 // Cw Users
 function CwBtnUsers({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_users", disabled: cw_btn_disabled });
 }
 // Cw Airport
 function CwBtnAirport({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_airport", disabled: cw_btn_disabled });
 }
 // OneDrive
 function CwBtnOneDrive({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_oneDrive", disabled: cw_btn_disabled });
 }
 // userFolder
 function CwBtnUserFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_userFolder", disabled: cw_btn_disabled });
 }
 // CloudFolder
 function CwBtnCloudFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_cloudFolder", disabled: cw_btn_disabled });
 }
 // PictureFolder
 function CwBtnPictureFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_pictureFolder", disabled: cw_btn_disabled });
 }
 // FolderIn
 function CwBtnFolderIn({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_folderIn", disabled: cw_btn_disabled });
 }
 // DownLoadFolder
 function CwBtnDownLoadFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_downloadFolder", disabled: cw_btn_disabled });
 }
 // DownLoadAllInfo
 function CwBtnDownLoadAllInfo({ cw_btnOnclick, 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 }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_downLoadAllInfo", disabled: cw_btn_disabled }));
 }
 // PropertyFolder
 function CwBtnPropertyFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_propertiFolder", disabled: cw_btn_disabled });
 }
 // AddFolder
 function CwBtnAddFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_addFolder", disabled: cw_btn_disabled });
 }
 // EditFolder
 function CwBtnEditFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_editFolder", disabled: cw_btn_disabled });
 }
 // PropertyFolder
 function CwBtnSelectedFolder({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_selectedFolder", disabled: cw_btn_disabled });
 }
 // UploadFiles
 function CwBtnUploadFiles({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_uploadFiles", disabled: cw_btn_disabled });
 }
 // GoBackSection [ Emanual ]
 function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }) {
@@ -2775,139 +3046,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_btn_act cw_btn_act_df cw_btn_Nbg cw_btn_bookMark", disabled: cw_btn_disabled }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_bookMark", disabled: cw_btn_disabled });
 }
 // Restore trash
 function CwBtnRestoreTrash({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_restoreTrash", disabled: cw_btn_disabled });
 }
 // Empty trash
 function CwBtnEmptytrash({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_emptyTrash", disabled: cw_btn_disabled });
 }
 // Full trash
 function CwBtnFulltrash({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_fullTrash", disabled: cw_btn_disabled });
 }
 // Marked
 function CwBtnMarked({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMarked", disabled: cw_btn_disabled });
 }
 // Marked solid
 function CwBtnMarkedSolid({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMarkedSolid", disabled: cw_btn_disabled });
 }
 // Add marked
 function CwBtnAddMarked({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnAddMarked", disabled: cw_btn_disabled });
 }
 // Add marked solid
 function CwBtnAddMarkedSolid({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnAddMarkedSolid", disabled: cw_btn_disabled });
 }
 // Restore trash right
 function CwBtnRestoreTrashRight({ cw_btnOnclick, 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 }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_restoreTrashRight", disabled: cw_btn_disabled }));
 }
 // Archive
 function CwBtnArchive({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnArchive", disabled: cw_btn_disabled });
 }
 // Archive
 function CwBtnArchiveRestore({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnArchiveRestore", disabled: cw_btn_disabled });
 }
 // Publish
 function CwBtnPublish({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnPublish", disabled: cw_btn_disabled });
 }
 // Approve
 function CwBtnApprove({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnApprove", disabled: cw_btn_disabled });
 }
 // BookMarkLinkPag
 function CwBtnBookMarkLinkPage({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw_btn_act cw_btn_act_df cw_btn_Nbg cw_btnBookMarkLinkPage", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookMarkLinkPage", disabled: cw_btn_disabled }));
 }
 // BookReadedLine
 function CwBtnBookReadedLine({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookReadedLine", disabled: cw_btn_disabled });
 }
 // BookReadedSolid
 function CwBtnBookReadedSolid({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBookReadedSolid", disabled: cw_btn_disabled });
 }
 // DocumentChecked
 function CwBtnDocumentChecked({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDocumentChecked", disabled: cw_btn_disabled });
 }
 // DocumentPublished
 function CwBtnDocumentPublished({ cw_btnOnclick, 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 }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDocumentPublished", disabled: cw_btn_disabled }));
 }
 // Bulk duty
 function CwBtnBulkDuty({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBulkDuty", disabled: cw_btn_disabled });
 }
 // DropDownButtonCrewControl
 function CwBtnDropDownMenu({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDropDownMenu", disabled: cw_btn_disabled });
 }
 // DropDownButtonCrewControl
 function CwBtnAlert({ cw_btnOnclick, cw_btn_disabled, 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 }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon 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_btn_act cw_btn_act_df cw_btn_Nbg cw_btnNavFirstItemView", disabled: cw_btn_disabled }));
+    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavFirstItemView", disabled: cw_btn_disabled }));
 }
 // BtnNavLastItemView
 function CwBtnNavLastItemView({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavLastItemView", disabled: cw_btn_disabled });
 }
 // BtnNavbreviewItem
 function CwBtnNavPreviewItem({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavPreviewItem", disabled: cw_btn_disabled });
 }
 // BtnNavNextDay
 function CwBtnNavNextDay({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavNextDay", disabled: cw_btn_disabled });
 }
 // BtnNavNextDay
 function CwBtnStatistic({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnStatistic", disabled: cw_btn_disabled });
 }
 // BtnNavNextDay
 function CwBtnCrewPlanning({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnCrewPlanning", disabled: cw_btn_disabled });
 }
 // BtnReleasePeriod
 function CwBtnReleasePeriod({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnReleasePeriod", disabled: cw_btn_disabled });
 }
 // BtnReleasePeriod
 function CwBtnGeneratePairing({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnGeneratePairing", disabled: cw_btn_disabled });
 }
 // BtnImportRequests
 function CwBtnImportRequests({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnImportRequests", disabled: cw_btn_disabled });
 }
 // BtnPairing
 function CwBtnPairing({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnPairing", disabled: cw_btn_disabled });
 }
 // BtnVacations
 function CwBtnVacations({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnVacations", disabled: cw_btn_disabled });
 }
 // BtnMVT
 function CwBtnMVT({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnMVT", disabled: cw_btn_disabled });
 }
 // BtnDelay
 function CwBtnDelay({ cw_btnOnclick, 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 }));
+    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDelay", disabled: cw_btn_disabled });
 }
 
 const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
@@ -2992,7 +3263,7 @@ const getEventStyle = (event, reslTime) => {
             borderRadius: "0px",
             backgroundColor: event.data.category.color || "grey",
             opacity: 0.3,
-            borderBottom: event.data.eventType === 20 ? "solid 1px rgba(0, 0, 0, 0.4)" : ""
+            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : ""
         };
     }
     return {
@@ -3035,8 +3306,9 @@ 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.preventDetault();
+                // e.preventDefault();
                 return;
             }
             const isResize = isResizeFromStart || isResizeFromEnd;
@@ -3069,9 +3341,11 @@ 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, 17, 20].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
+    const renderRegularEvent = () => (jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
             (event.selected === true ? "cblEventSelected " : "") +
-            (event.data.eventType === 10 || event.data.eventType === 11 || event.data.eventType === 20
+            (event.data.eventType === REST_TIME ||
+                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
+                event.data.eventType === DUTY_REGULATION
                 ? " 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",
@@ -3087,7 +3361,8 @@ const EventRender = ({ event, t: schedulerState }) => {
                     border: "solid 1px rgba(46,49,49,0.5)",
                     marginTop: "-25px"
                 }, children: "\u200B" }))] }, event.id));
-    return (jsx("div", { style: { position: "initial" }, children: event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent() }));
+    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
+    return render;
 };
 
 const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
@@ -3114,7 +3389,8 @@ const isAllowedToMove = (data, resData, cblDragNDrop) => {
         { from: "opstoolScheduler", to: "opstoolScheduler" },
         { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
         { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" }
+        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
+        { from: "vacationsScheduler", to: "vacationsScheduler" }
     ];
     const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
     if (crewControllAllowedMove) {
@@ -3180,19 +3456,14 @@ 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: this.showStyles(), onDragOver: e => onDragOver(e), onDrop: e => {
+        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 => {
                 OnDrop({
                     e: e,
                     resource: this.props.res,
@@ -3201,8 +3472,6 @@ 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));
     }
 }
@@ -3225,8 +3494,8 @@ const TimeLine = ({ toolTipTitle, marginLeft }) => {
             } }) }));
 };
 
-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
+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
                     ? schedulerId.includes("crewAssignmentsScheduler")
                         ? moment(now).format("HH:mm")
                         : now.toDateString()
@@ -3577,7 +3846,7 @@ const filterEvents = (events, start, end, id, resId, module = undefined) => {
     if (id !== "flightWatchScheduler") {
         eventsFiltered = sortByDate(eventsFiltered);
     }
-    if (id !== "crewAssignmentsScheduler") {
+    if (id !== "crewAssignmentsScheduler" && id !== "vacationsScheduler") {
         return eventsFiltered;
     }
     eventsFiltered = setNotFullHeightEventsFirst(eventsFiltered);
@@ -3587,6 +3856,9 @@ 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));
@@ -3623,31 +3895,18 @@ 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;
-    return events[lastElement].end <= event.start || events[lastElement].isFullHeight;
+    const collide = events.some(existent => {
+        return !(existent.end <= event.start || event.end <= existent.start);
+    });
+    return !collide || events[lastElement].isFullHeight;
 };
 
-const getEventsOfResource = (res, events, state, id, module, start, end, hasSideBar) => {
+const getEventsOfResource = (res, events, state, id, module, start, end) => {
     let maxTop = 0;
     const tops = [];
     tops[0] = new Array();
@@ -3685,7 +3944,7 @@ const getEventsOfResource = (res, events, state, id, module, start, end, hasSide
         }
         const sideBarSize = 17;
         event.leftPx = getLeftPixels(event.start, start, state.dayPx);
-        event.rightPx = getRightPixels(event.end, end, state.dayPx) - (hasSideBar ? sideBarSize : 0);
+        event.rightPx = getRightPixels(event.end, end, state.dayPx) - sideBarSize;
     });
     let OrderedArray = new Array();
     for (let h = 0; h < tops.length; h++) {
@@ -3699,6 +3958,48 @@ const getEventsOfResource = (res, events, state, id, module, start, end, hasSide
     }
     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)
@@ -3709,7 +4010,8 @@ const compareStrings = (str1, str2) => {
 };
 
 const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate) => {
-    if ((module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
+    if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
+        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)));
     }
@@ -3723,13 +4025,9 @@ 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, hasSideBar)
+        events: getEventsOfResource(r, events, state, id, props.module, props.startDate, props.endDate)
     }));
 };
 
@@ -3768,394 +4066,6 @@ 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);
@@ -4208,7 +4118,6 @@ 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,
@@ -4241,12 +4150,10 @@ 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, hasScrollBar)
+                events: getEventsOfResource(resource, events, this.state, this.props.id, this.props.module, startDate, endDate)
             };
         });
         const groupByFunction = this.props.groupByFunction ?? false;
@@ -4294,7 +4201,6 @@ 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());
@@ -4308,25 +4214,43 @@ class CwScheduler extends React.Component {
             });
             return;
         }
-        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;
-        }
+        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
+        });
     }
     handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
         let datetime = new Date();
@@ -4364,9 +4288,9 @@ class CwScheduler extends React.Component {
                             endDate: this.state.endDate,
                             headerName: this.props.resourceName
                         }, descriptionColumn: this.props.descriptionColumn })), jsx("tbody", { style: {
-                            overflowY: isPinnedTable ? "hidden" : "scroll",
+                            overflowY: "scroll",
                             maxHeight: isPinnedTable ? undefined : schedulerHeight
-                        }, 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 })] }) })] }) }));
+                        }, 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 })] }) })] }) }));
     }
 }
 
@@ -4603,13 +4527,17 @@ class SuperScheduler extends React.Component {
     }
     render() {
         const havePinnedResources = this.state.pinnedResources?.length > 0;
-        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: () => {
+        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: () => {
                             this.props.scheduler_handleClearPinnedOnParent();
-                        } }) })), 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 })] }));
+                        } }) })), 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 })] }));
     }
 }
 class CblDragAndDrop {
@@ -4786,26 +4714,6 @@ 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;
@@ -4833,4 +4741,24 @@ class cblEvent {
     }
 }
 
-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 };
+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 };