@cwellt_software/cwellt-reactjs-lib 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -265,7 +265,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsxRuntime.jsx("div", { className: "cwellt_d_none" })) }));
 }
 
-var styles$a = {"cw-generic-tooltip":"cw-generic-tooltip-module_cw-generic-tooltip__Ij76M","cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
+var styles$b = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -370,23 +370,25 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
     return tooltipState;
 };
 // Main component with optimizations
-const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, overlayStyle = {}, showDelay = 0, }) => {
+const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const containerRef = React.useRef(null);
-    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => setIsVisible(true), showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$a["cw-generic-tooltip-content"]);
+    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
+        setIsVisible(true);
+    }, showDelay);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$b["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = React.useMemo(() => {
-        if (!isVisible || !content)
+        if (hide || !isVisible || !content)
             return null;
-        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$a["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$b["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
                 visibility: tooltipPosition.top === 0 && tooltipPosition.left === 0 ? 'hidden' : 'visible',
                 ...overlayStyle
             }, onMouseEnter: () => dissapearsWhenHover && setIsVisible(false), children: content }), document.body);
-    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle]);
+    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle, hide]);
     const handleMouseEnter = React.useCallback(() => {
         setTooltipTimeout();
     }, [setTooltipTimeout]);
@@ -394,7 +396,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$a["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$b["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
@@ -513,11 +515,52 @@ class CwModalIframe extends React__namespace.Component {
     }
 }
 
-var styles$9 = {"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"};
+var styles$a = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
 
+// Helper function to parse size values
+const parseSize = (size) => {
+    if (typeof size === 'number')
+        return { value: size, unit: 'px' };
+    // Match numeric value and unit
+    const match = size.match(/^([\d.]+)(\D+)$/);
+    if (match) {
+        return { value: parseFloat(match[1]), unit: match[2] };
+    }
+    // Default to pixels if no unit specified
+    return { value: parseFloat(size), unit: 'px' };
+};
+// Helper to convert size to px for calculations
+const convertToPx = (size) => {
+    if (size.unit === 'px')
+        return size.value;
+    if (size.unit === 'rem')
+        return size.value * 16; // Assuming 1rem = 16px
+    if (size.unit === 'vh')
+        return (window.innerHeight * size.value) / 100;
+    if (size.unit === 'vw')
+        return (window.innerWidth * size.value) / 100;
+    return size.value; // Default fallback
+};
 const CwDialog = props => {
     const dialogRef = React.useRef(null);
-    const initialDialogSize = { width: props.dialogSize?.width ?? 800, height: props.dialogSize?.height ?? 600 };
+    // Default width and height with units
+    const defaultWidth = 800;
+    const defaultHeight = 600;
+    // Parse width and height from props or use defaults
+    const initialWidth = props.dialogSize?.width !== undefined ? props.dialogSize.width : defaultWidth;
+    const initialHeight = props.dialogSize?.height !== undefined ? props.dialogSize.height : defaultHeight;
+    // Parse the sizes to separate value and unit
+    const parsedWidth = parseSize(initialWidth);
+    const parsedHeight = parseSize(initialHeight);
+    // Convert to px for internal calculations
+    const initialWidthPx = convertToPx(parsedWidth);
+    const initialHeightPx = convertToPx(parsedHeight);
+    const initialDialogSize = {
+        width: initialWidthPx,
+        height: initialHeightPx,
+        widthUnit: parsedWidth.unit,
+        heightUnit: parsedHeight.unit
+    };
     const [isDragging, setIsDragging] = React.useState(false);
     const [resizeDirection, setResizeDirection] = React.useState(null);
     const [position, setPosition] = React.useState({
@@ -526,6 +569,8 @@ const CwDialog = props => {
     });
     const [size, setSize] = React.useState(initialDialogSize);
     const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
+    // scrim is true by default
+    const hasScrim = props.scrim !== false;
     React.useEffect(() => {
         const handleMouseMove = (e) => {
             if (isDragging) {
@@ -574,7 +619,11 @@ const CwDialog = props => {
                         // 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 });
+                        setSize({
+                            ...size,
+                            width: newWidth,
+                            height: newHeight
+                        });
                         setPosition({ x: newX, y: newY });
                     }
                 }
@@ -599,9 +648,9 @@ const CwDialog = props => {
         e.stopPropagation();
         setResizeDirection(direction);
     };
-    const header = (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: props.headline }), props.customHeader || (jsxRuntime.jsx("button", { className: styles$9["cw-dialog-button-close"], onClick: props.onClose, children: "\u2A2F" }))] }));
+    const header = (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: props.headline }), props.customHeader || (jsxRuntime.jsx("button", { className: styles$a["cw-dialog-button-close"], onClick: props.onClose, children: "\u2A2F" }))] }));
     const content = (jsxRuntime.jsx("section", { style: { flex: 1, overflowX: "auto", overflowY: "auto", width: "100%" }, children: props.children }));
-    const footer = (jsxRuntime.jsx("footer", { style: { width: "100%" }, children: props.customFooter || (jsxRuntime.jsx("button", { className: styles$9["cw-dialog-button-save"], onClick: props.onSave, children: "\uD83D\uDDAB" })) }));
+    const footer = (jsxRuntime.jsx("footer", { style: { width: "100%" }, children: props.customFooter || (jsxRuntime.jsx("button", { className: "cw-button-icon cwi-save", onClick: props.onSave })) }));
     const resizeHandles = [
         jsxRuntime.jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
         jsxRuntime.jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
@@ -612,11 +661,14 @@ const CwDialog = props => {
         jsxRuntime.jsx("div", { "data-handle-se": true, onMouseDown: handleResizeMouseDown("se") }, "handle-se"),
         jsxRuntime.jsx("div", { "data-handle-sw": true, onMouseDown: handleResizeMouseDown("sw") }, "handle-sw")
     ];
-    return (props.open && (jsxRuntime.jsx("div", { "data-has-scrim": props.scrim, className: styles$9["cw-dialog-main"], children: jsxRuntime.jsxs("dialog", { ...props, ref: dialogRef, style: {
+    // Prepare width and height with units for display
+    const displayWidth = `${size.width}${size.widthUnit === 'px' ? 'px' : size.widthUnit}`;
+    const displayHeight = `${size.height}${size.heightUnit === 'px' ? 'px' : size.heightUnit}`;
+    return (props.open && (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$a["cw-dialog-main"], children: jsxRuntime.jsxs("dialog", { ...props, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
-                width: `${size.width}px`,
-                height: `${size.height}px`,
+                width: displayWidth,
+                height: displayHeight,
                 zIndex: props.zIndex,
                 minWidth: "200px", // Set an appropriate minimum size
                 minHeight: "200px", // Set an appropriate minimum size
@@ -767,6 +819,8 @@ class CwDialogManager {
     }
 }
 
+var styles$9 = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
+
 /**
  *
  * @param CwelltAccordionContainerProps
@@ -782,11 +836,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxRuntime.jsxs("div", { className: "cwellt_accordionContainer cwellt_flex cwellt_flex_column cwellt_justify_center cwellt_align_items_center", style: CwelltAccordionContainerProps.style, children: [jsxRuntime.jsxs("div", { className: "cwellt_flex cwelt_accordionHeader cwellt_align_items_center", onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { className: "cwellt_descAccordion cwellt_flex cwellt_align_items_center cwellt_justify_flex_start cwellt_flex_11", children: jsxRuntime.jsx("div", { className: "cwellt_desc_tex", children: CwelltAccordionContainerProps.desc_text }) }), jsxRuntime.jsx("div", { className: "cwellt_btnContent_expandCollapse cwellt_flex cwellt_align_items_center cwellt_justify_center cwellt_flex_1", children: jsxRuntime.jsx("button", { className: isVisible_accordionBody
-                                ? "cwellt_expandCollapse_active cwellt_flex cwellt_align_items_center cwellt_justify_center"
-                                : "cwellt_expandCollapse cwellt_flex cwellt_align_items_center cwellt_justify_center" }) })] }), jsxRuntime.jsx("div", { className: isVisible_accordionBody
-                    ? "cwellt_accordionBody cwellt_flex cwellt_flex_column cwellt_justify_flex_start"
-                    : "cwellt_accordionBody cwellt_display_none cwellt_flex_column cwellt_justify_flex_start", children: CwelltAccordionContainerProps.children })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$9["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$9["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -877,7 +927,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * />
  * @returns React component
  */
-function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameTr_row, style, classNameContainer, id, textNoData }) {
+function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, onExpand, className, classNameHeader, classNameRow, style, classNameContainer, id, textNoData }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
@@ -944,7 +994,7 @@ function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, o
             setCurrentPage(newPage);
         }
     };
-    return (jsxRuntime.jsxs("div", { id: id, className: classNameContainer + " " + "cwTableComp", children: [jsxRuntime.jsxs("table", { className: className + " " + "cw_table", style: style, children: [jsxRuntime.jsx("thead", { className: `${classNameHeader} cw_thead`, children: jsxRuntime.jsxs("tr", { className: "cw_thead_tr", children: [expandedRowRender && jsxRuntime.jsx("th", { className: "cw_thead_th cw_thead_th_expand" }), columns.map(column => (jsxRuntime.jsx("th", { onClick: () => handleSort(column.dataIndex), className: `cw_thead_th ${column.className} ${sortConfig.key === column.dataIndex ? sortConfig.direction : ""}`, children: column.title }, column.key)))] }) }), jsxRuntime.jsx("tbody", { className: "cw_tbody", children: !paginatedData || paginatedData.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + (expandedRowRender ? 1 : 0), style: { textAlign: "center" }, children: textNoData !== undefined && textNoData !== "" ? textNoData : "No data" }) })) : (paginatedData.map(item => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${classNameTr_row} cw_tbody_tr`, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw_tbody_td", children: jsxRuntime.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 => (jsxRuntime.jsx("td", { className: "cw_tbody_td", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && expandedRowRender && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + 1, children: expandedRowRender(item) }) }))] }, item.key)))) })] }), pagination && totalPages > 1 && (jsxRuntime.jsxs("div", { className: "cw_table_pagination cwellt_flex cwellt_align-items-start cwellt_align_items_center", children: [jsxRuntime.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" }), jsxRuntime.jsxs("span", { className: "cw_table_pag_desc", children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw_tb_button_pag cw_tb_button_next cwellt_flex cwellt_justify_center cwellt_align_items_center" })] }))] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer || ""}`, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className || ""}`, style: style, children: [jsxRuntime.jsx("thead", { className: `${classNameHeader || ""}`, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(column => (jsxRuntime.jsx("th", { onClick: () => handleSort(column.dataIndex), className: `${column.className || ""} ${sortConfig.key === column.dataIndex ? sortConfig.direction : ""}`.trim(), children: column.title }, column.key)))] }) }), jsxRuntime.jsx("tbody", { children: !paginatedData || paginatedData.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + (expandedRowRender ? 1 : 0), style: { textAlign: "center" }, className: "cw-table-cell-empty", children: textNoData !== undefined && textNoData !== "" ? textNoData : "No data available at the moment" }) })) : (paginatedData.map(item => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${classNameRow || ""}`, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === item.key ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map(column => (jsxRuntime.jsx("td", { className: column.className || "", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && expandedRowRender && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: columns.length + 1, children: expandedRowRender(item) }) }))] }, item.key)))) })] }), pagination && totalPages > 1 && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw-button-icon cwi-chevron-right" })] }))] }));
 }
 
 var styles$8 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
@@ -987,7 +1037,10 @@ function CwTabs(CwTabsProps) {
         }
     };
     const position = CwTabsProps.tabsPosition || 'top';
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$8['cw-tabs'], "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
+        ? { minWidth: CwTabsProps.tabsListWidth }
+        : undefined;
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$8['cw-tabs'], "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -1148,9 +1201,15 @@ function CwInput(CwInputProps) {
             jsxRuntime.jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
 }
 
-function CwButton(props) {
-    const { text, ...buttonProps } = props;
-    return (jsxRuntime.jsx("button", { type: "button", className: "cw-button", ...buttonProps, children: buttonProps.children ?? text }));
+function CwButton({ text, variant = 'solid', className = '', children, ...buttonProps }) {
+    let buttonClass = "cw-button";
+    if (variant === 'outline') {
+        buttonClass += " cw-button-outline";
+    }
+    if (className) {
+        buttonClass += ` ${className}`;
+    }
+    return (jsxRuntime.jsx("button", { type: "button", className: buttonClass, ...buttonProps, children: children ?? text }));
 }
 
 /**
@@ -1698,7 +1757,7 @@ class Weekdays {
     static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
         ["M", "Mon"],
         ["T", "Tue"],
-        ["W", "Wen"],
+        ["W", "Wed"],
         ["R", "Thu"],
         ["F", "Fri"],
         ["S", "Sat"],
@@ -1832,8 +1891,8 @@ function CwCheckbox(CwCheckboxProps) {
  * <CwToggle checked/>
  */
 function CwToggle(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, ...inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-toggle", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { className: "cw-toggle", type: "checkbox", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
+    const { labelProps, buttonProps, iconProps, ...inputProps } = props;
+    return (jsxRuntime.jsxs("div", { className: "cw-toggle", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { className: "cw-toggle", type: "checkbox", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }));
 }
 
 /**
@@ -1902,9 +1961,9 @@ function CwDropdown(optionsProps) {
             ? "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className
             : optionsProps.labelPosition === "column"
                 ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cwDropDownComp" + " " + optionsProps.className
-                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className, style: optionsProps.style, children: [jsxRuntime.jsx("label", { className: optionsProps.disabled === true
+                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className, style: optionsProps.style, id: optionsProps.id, children: [jsxRuntime.jsx("label", { className: optionsProps.disabled === true
                     ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
-                    : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), jsxRuntime.jsxs("select", { value: selectedOption, onChange: handleOptionSelect, className: "cw_select", style: optionsProps.styleSelect, disabled: optionsProps.disabled, children: [jsxRuntime.jsx("option", { value: "", className: "cw_option", children: optionsProps.placeholder }), optionsProps.selectList.map(option => (jsxRuntime.jsx("option", { value: option.id, className: "cw_option", style: optionsProps.styleOption, children: option.description }, option.id)))] })] }));
+                    : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), jsxRuntime.jsx("select", { value: selectedOption, onChange: handleOptionSelect, className: "cw_select", style: optionsProps.styleSelect, disabled: optionsProps.disabled || optionsProps.selectList.length === 0, children: optionsProps.selectList.length === 0 ? (jsxRuntime.jsx("option", { value: "", className: "cw_option", disabled: true, children: "No data" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("option", { value: "", className: "cw_option", children: optionsProps.placeholder }), optionsProps.selectList.map(option => (jsxRuntime.jsx("option", { value: option.id, className: "cw_option", style: optionsProps.styleOption, children: option.description }, option.id)))] })) })] }));
 }
 
 function CwDropdownContainer(dropDownContainerProps) {
@@ -2794,8 +2853,20 @@ const CwMultiFilterTag = props => {
 var styles$5 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
 
 /**
- * A multiple filter selector, a MULTI-SELECT even.
+ * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
  * @remark
+ * The CwMultiFilter component provides a user interface for selecting multiple filter options
+ * organized by categories. Each filter option is represented as a clickable tag with customizable
+ * colors. The component manages the selection state internally but reports changes via a callback.
+ *
+ * Filter tags should include the following properties:
+ * - `Name`: Display name of the filter
+ * - `Value`: Actual value used for filtering logic
+ * - `Category`: Group the filter belongs to
+ * - `ID`: Unique identifier for the filter
+ * - `PrimaryColor`: Background color of the tag
+ * - `OnPrimaryColor`: Text color of the tag
+ *
  * ```
  * ╭───────────────────────────────────────────────────────────────╮
  * │ ╭──────────╮ ╭──────────╮ ╭──────────╮                        │
@@ -2810,39 +2881,116 @@ var styles$5 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *  ╰─────────────────────────────────────────────────────────────╯
  * ```
     * @example
- * ```
- * /// 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("");
+ * ```tsx
+ * import { CwMultiFilter, type CwMultiFilterTagProps, type ICwMultiFilterTag } from "cwellt-reactjs-lib";
+ * import { useCallback, useState } from "react";
+ * import { hexToRGB } from "../common/functions/color";
+ *
+ * function FilterExample() {
+ *   // State to track selected filter tags
+ *   const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
+ *
+ *   // Sample data to filter
+ *   const [users, setUsers] = useState([
+ *     { id: 1, name: "John", role: "admin", department: "IT" },
+ *     { id: 2, name: "Sarah", role: "user", department: "HR" },
+ *     // More users...
+ *   ]);
  *
- * <CwMultiFilter
- *  id="multifilter"
- *  onChange={tags => { // Collection of currently active tags
- *    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([
- *      {
- *        Name: "DEF", // The text displayed on the tag/filter/chip
- *        Value: "DEF", // Working value, used for whatever you need, it might be the CrewmemberID or the same as Name
- *        Category: "Crewmembers", // Category it belongs to (you don't need to define categories elsewhere)
- *        ID: "Crewmembers_DEF", // make sure each ID is unique
- *        OnPrimaryColor: hexToRGB("#2050a8"), // color for text and outline of the tag/filter/chip
- *        PrimaryColor: hexToRGB("#cedcff"), // background color for the tag/filter/chip
- *      },
- *      {
- *        Name: "ABC",
- *        Value: "ABC",
- *        Category: "Crewmembers",
- *        ID: "Crewmembers_ABC",
- *        OnPrimaryColor: hexToRGB("#2050a8"), // you can also do { r: 255, g: 128, b: 64 }
- *        PrimaryColor: hexToRGB("#cedcff")
- *      }
- *    ])
- *  }
+ *   // Filtered users based on selected tags
+ *   const [filteredUsers, setFilteredUsers] = useState(users);
+ *
+ *   // Define filter options
+ *   const filterOptions = new Set([
+ *     {
+ *       Name: "Admin",
+ *       Value: "admin",
+ *       Category: "Roles",
+ *       ID: "Roles_admin",
+ *       OnPrimaryColor: hexToRGB("#2050a8"),
+ *       PrimaryColor: hexToRGB("#cedcff")
+ *     },
+ *     {
+ *       Name: "User",
+ *       Value: "user",
+ *       Category: "Roles",
+ *       ID: "Roles_user",
+ *       OnPrimaryColor: hexToRGB("#2050a8"),
+ *       PrimaryColor: hexToRGB("#cedcff")
+ *     },
+ *     {
+ *       Name: "IT",
+ *       Value: "IT",
+ *       Category: "Departments",
+ *       ID: "Departments_IT",
+ *       OnPrimaryColor: hexToRGB("#a82037"),
+ *       PrimaryColor: hexToRGB("#ffceda")
+ *     },
+ *     {
+ *       Name: "HR",
+ *       Value: "HR",
+ *       Category: "Departments",
+ *       ID: "Departments_HR",
+ *       OnPrimaryColor: hexToRGB("#a82037"),
+ *       PrimaryColor: hexToRGB("#ffceda")
+ *     }
+ *   ]);
+ *
+ *   // Handle filter changes
+ *   const onChangeFilters = useCallback((tags: Set<ICwMultiFilterTag>) => {
+ *     setSelectedTags(tags);
+ *     const tagsArray = Array.from(tags);
+ *
+ *     // Get values for each category
+ *     const roleValues = tagsArray
+ *       .filter(tag => tag.Category === "Roles")
+ *       .map(tag => tag.Value);
+ *
+ *     const departmentValues = tagsArray
+ *       .filter(tag => tag.Category === "Departments")
+ *       .map(tag => tag.Value);
+ *
+ *     // Apply filters
+ *     if (tagsArray.length === 0) {
+ *       // No filters applied
+ *       setFilteredUsers(users);
+ *     } else {
+ *       let filtered = users;
+ *
+ *       if (roleValues.length > 0) {
+ *         filtered = filtered.filter(user => roleValues.includes(user.role));
+ *       }
+ *
+ *       if (departmentValues.length > 0) {
+ *         filtered = filtered.filter(user => departmentValues.includes(user.department));
+ *       }
+ *
+ *       setFilteredUsers(filtered);
+ *     }
+ *   }, [users]);
+ *
+ *   return (
+ *     <div>
+ *       <h2>Filter Users</h2>
+ *       <div style={{ width: "50%" }}>
+ *         <CwMultiFilter
+ *           id="user-filter"
+ *           allTags={filterOptions}
+ *           onChangeSelectedTags={onChangeFilters}
+ *           selectedTags={selectedTags}
+ *         />
+ *       </div>
+ *       <div style={{ marginTop: "20px" }}>
+ *         <h3>Filtered Results ({filteredUsers.length})</h3>
+ *         <ul>
+ *           {filteredUsers.map(user => (
+ *             <li key={user.id}>{user.name} - {user.role} ({user.department})</li>
+ *           ))}
+ *         </ul>
+ *       </div>
+ *     </div>
+ *   );
+ * }
  * ```
  * @param {CwMultiFilterProps} props
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
@@ -2950,7 +3098,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
     };
     return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$5["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$5["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", onKeyDown: e => {
+        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$5["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab":
@@ -3001,20 +3149,49 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
 function CwSearchInput(optionsProps) {
     const [searchText, setSearchText] = React.useState("");
     const [filteredOptions, setFilteredOptions] = React.useState([]);
+    const [_selectedOption, setSelectedOption] = React.useState(null);
+    // Make default value selection when loading the component
+    React.useEffect(() => {
+        if (optionsProps.defaultValue && optionsProps.selectList && optionsProps.selectList.length > 0) {
+            const defaultOption = optionsProps.selectList.find(option => option.id === optionsProps.defaultValue?.toString());
+            if (defaultOption) {
+                setSearchText(defaultOption.description);
+                setSelectedOption(defaultOption);
+                // Notify the parent component if there is a handleChange
+                if (optionsProps.handleChange) {
+                    optionsProps.handleChange(defaultOption.id);
+                }
+            }
+        }
+    }, [optionsProps.defaultValue, optionsProps.selectList]);
     const handleInputChange = (event) => {
         const text = event.target.value;
         setSearchText(text);
         if (text === "") {
             setFilteredOptions([]);
+            setSelectedOption(null);
+            // Notify that there is no selection
+            if (optionsProps.handleChange) {
+                optionsProps.handleChange("");
+            }
         }
         else {
-            // Filter options based on search text
-            const filtered = optionsProps.selectList.filter((option) => option.description.toLowerCase().includes(text.toLowerCase()));
+            // Filter options based on search text in any text property
+            const filtered = optionsProps.selectList.filter((option) => {
+                // Search all properties of the object
+                return Object.keys(option).some(key => {
+                    const value = option[key];
+                    // Verify that the value is a string or number and contains the search text
+                    return (typeof value === 'string' || typeof value === 'number') &&
+                        String(value).toLowerCase().includes(text.toLowerCase());
+                });
+            });
             setFilteredOptions(filtered);
         }
     };
     const handleOptionSelect = (option) => {
         setSearchText(option.description);
+        setSelectedOption(option);
         if (optionsProps.handleChange) {
             optionsProps.handleChange(option.id);
         }
@@ -3024,14 +3201,15 @@ function CwSearchInput(optionsProps) {
     const handleClearClick = () => {
         setSearchText("");
         setFilteredOptions([]);
+        setSelectedOption(null);
     };
-    return (jsxRuntime.jsxs("div", { className: "cwellt_flex cwellt_flex_row cwellt_flex_wrap cwellt_p_rel cwSearchInputComp", style: optionsProps.style, id: optionsProps.id, children: [jsxRuntime.jsxs("div", { className: optionsProps.labelPosition === "inline"
-                    ? "cwellt_flex cwellt_flex_row "
+    return (jsxRuntime.jsxs("div", { className: "cwSearchInputComp", style: optionsProps.style, id: optionsProps.id, children: [jsxRuntime.jsxs("div", { className: optionsProps.labelPosition === "inline"
+                    ? "cw-flex-row "
                     : optionsProps.labelPosition === "column"
-                        ? "cwellt_flex cwellt_flex_column"
-                        : "cwellt_flex cwellt_flex_row ", children: [jsxRuntime.jsx("label", { className: optionsProps.disabled === true
+                        ? "cw-flex-column"
+                        : "cw-flex-row ", children: [optionsProps.labelName && (jsxRuntime.jsx("label", { className: optionsProps.disabled === true
                             ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
-                            : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), jsxRuntime.jsx("input", { type: "text", value: searchText, onChange: handleInputChange, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (jsxRuntime.jsx("button", { className: "cw_button_search_clear cwelt_flex cwellt_justify_center cwellt_align_items_center cwellt_p_abs", onClick: handleClearClick }))] }), filteredOptions.length > 0 && (jsxRuntime.jsx("div", { className: "cw_searchInput_dropDown cwellt_p_abs", children: jsxRuntime.jsx("ul", { className: "cw_searchInput_listContainer", children: filteredOptions.map((option) => (jsxRuntime.jsx("li", { onClick: () => handleOptionSelect(option), className: "cw_searchInput_list cwellt_flex cwellt_align_items_center", children: option.description }, option.id))) }) }))] }));
+                            : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName })), jsxRuntime.jsx("input", { type: "text", value: searchText, onChange: handleInputChange, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (jsxRuntime.jsx("button", { className: "cw-button-icon cwi-close cw-input-search-clear", onClick: handleClearClick }))] }), filteredOptions.length > 0 && (jsxRuntime.jsx("div", { className: "cw-input-search-dropdown", children: jsxRuntime.jsx("ul", { children: filteredOptions.map((option) => (jsxRuntime.jsx("li", { onClick: () => handleOptionSelect(option), children: option.description }, option.id))) }) }))] }));
 }
 
 var styles$4 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
@@ -3047,7 +3225,7 @@ var styles$4 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","con
  *   <div>Right-click me!</div>
  * </ContextMenu>
  */
-const CwContextMenu = ({ children, options, onSelect }) => {
+const CwContextMenu = ({ children, options, offset, onSelect }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [position, setPosition] = React.useState({ x: 0, y: 0 });
     const menuRef = React.useRef(null);
@@ -3072,8 +3250,8 @@ const CwContextMenu = ({ children, options, onSelect }) => {
         };
     }, []);
     return (jsxRuntime.jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: styles$4["context-menu"], style: {
-                    top: position.y,
-                    left: position.x
+                    top: position.y + (offset?.y || 0),
+                    left: position.x + (offset?.x || 0),
                 }, children: options.map(option => (jsxRuntime.jsx("div", { onClick: () => handleOptionClick(option), className: styles$4["context-menu-item"], children: option }, option))) }))] }));
 };
 
@@ -3153,47 +3331,11 @@ function CwFloatingButton() {
     };
     return jsxRuntime.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 jsxRuntime.jsx("button", { className: "cw_btnExpandCollapse", onClick: cwExpandCollapseButton, id: "cw_btnExpandCollapse" });
-}
 // Primary button => CwButtonDef
 // CwButtonDef
 function CwButtonDef({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
     return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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 jsxRuntime.jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_add", disabled: cw_btn_disabled });
@@ -3262,10 +3404,6 @@ function CwBtnFiles({ cw_btnOnclick, cw_btn_disabled }) {
 function CwBtnAirport({ cw_btnOnclick, cw_btn_disabled }) {
     return jsxRuntime.jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_airport", disabled: cw_btn_disabled });
 }
-// userFolder
-function CwBtnUserFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsxRuntime.jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-user", disabled: cw_btn_disabled });
-}
 // DownLoadAllInfo
 function CwBtnDownLoadAllInfo({ cw_btnOnclick, cw_btn_disabled }) {
     return (jsxRuntime.jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-download", disabled: cw_btn_disabled }));
@@ -5373,8 +5511,9 @@ const getTimeHeaders = (startDate, endDate) => {
 class CwScheduler extends React.Component {
     contentArea;
     calculateMaxPx = () => {
-        const mainRect = document.body.getBoundingClientRect();
-        return Math.floor(mainRect.width - 200);
+        const mainElement = document.body;
+        const mainRect = mainElement.getBoundingClientRect();
+        return Math.floor(mainRect.width - 190);
     };
     constructor(props) {
         super(props);
@@ -5546,9 +5685,7 @@ class CwScheduler extends React.Component {
         const isPinnedTable = this.props.id.toLowerCase().includes("pinned");
         const schedulerHeight = heightScheduler(this.state.resources, this.props.height, this.props.id === "crewAssignmentsScheduler");
         return (jsxRuntime.jsx("div", { id: this.props.id, style: {
-                overflowY: "scroll",
                 maxHeight: isPinnedTable ? "auto" : schedulerHeight,
-                minHeight: (this.state.resources.length === 1 || this.state.resources.length === 2) ? schedulerHeight + 10 : 0
             }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: jsxRuntime.jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (jsxRuntime.jsx(SchedulerHeader$1, { timelineProps: {
                             maxPx: this.state.maxPx,
                             hoursList: this.state.timeHeaders,
@@ -5557,8 +5694,8 @@ class CwScheduler extends React.Component {
                             endDate: this.props.endDate,
                             headerName: this.props.resourceName,
                         }, descriptionColumn: this.props.descriptionColumn })), jsxRuntime.jsx("tbody", { style: {
-                            overflow: "visible",
-                            width: this.state.maxPx + 150
+                            width: this.state.maxPx + 150,
+                            maxHeight: isPinnedTable ? "auto" : schedulerHeight,
                         }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxRuntime.jsxs("tr", { className: "fc_body_row", children: [jsxRuntime.jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: (_e, resource) => {
                                         if (this.props.scheduler_handleOnClickResourceContextMenu) {
                                             this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
@@ -5823,13 +5960,40 @@ function getHSLColor(color, alpha = 1) {
     return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
 }
 function getContrastColor(color) {
+    if (color === null) {
+        return '#000000';
+    }
     const hsl = colorToHSL(color);
-    const contrastL = hsl.l > 50 ? 20 : 90;
-    return `hsl(${hsl.h}, ${hsl.s}%, ${contrastL}%)`;
+    // Saturated greenyellow and cyan tones need lower luminance threshold (40-35)
+    // Saturated mediumblue and blueviolet tones need higher luminance threshold (55-60)
+    // Saturated orangered tones need lower luminance threshold (45)
+    const isYellowGreen = (hsl.h >= 45 && hsl.h <= 180);
+    const isBlueViolet = (hsl.h >= 210 && hsl.h <= 300);
+    const isRedOrange = (hsl.h >= 0 && hsl.h <= 30) || (hsl.h >= 330 && hsl.h <= 360);
+    let threshold = 50;
+    if (isYellowGreen) {
+        threshold = 40;
+        if (hsl.s >= 70) {
+            threshold = 35;
+        }
+    }
+    else if (isBlueViolet) {
+        threshold = 55;
+        if (hsl.s >= 70) {
+            threshold = 60;
+        }
+    }
+    else if (isRedOrange && hsl.s >= 80) {
+        threshold = 45;
+    }
+    const contrastL = hsl.l >= threshold ? 20 : 90;
+    const contrastS = Math.min(hsl.s, 90);
+    return `hsl(${hsl.h}, ${contrastS}%, ${contrastL}%)`;
 }
 
+var styles$2 = {"hide-scrollbar":"new-scheduler-module_hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module_scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module_scheduler-event-container__-h1xm","time-marker":"new-scheduler-module_time-marker__2BejU","scheduler-event-text":"new-scheduler-module_scheduler-event-text__zjvd7"};
+
 const BackgroundEvent = ({ value, heightRem }) => {
-    const isVerticalText = value.isVerticalText ?? false;
     const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
     const textColor = getContrastColor(value.color);
     return value.isVisible ? (jsxRuntime.jsx("div", { style: {
@@ -5837,6 +6001,7 @@ const BackgroundEvent = ({ value, heightRem }) => {
             width: `${value.width}%`,
             position: "absolute",
             height: `${heightRem}rem`,
+            pointerEvents: "auto",
         }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsx("div", { style: {
                     overflow: "hidden",
                     backgroundColor: backColor,
@@ -5848,28 +6013,21 @@ const BackgroundEvent = ({ value, heightRem }) => {
                         contentVisibility: "auto",
                         height: `${heightRem}rem`,
                     }, children: jsxRuntime.jsxs("div", { style: {
-                            flex: 1,
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            whiteSpace: "nowrap",
-                            overflow: "hidden",
                             width: value.width + "%",
-                            fontSize: "var(--cw-font-size-smallest)"
-                        }, children: [value.icons ? jsxRuntime.jsx("div", { style: {
+                            fontSize: "var(--cw-font-size-smallest)",
+                            padding: "0.25rem",
+                            color: textColor,
+                            alignItems: "flex-end"
+                        }, className: styles$2["scheduler-event-container"], children: [value.icons ? jsxRuntime.jsx("div", { style: {
                                     display: "flex",
                                     flexDirection: "row",
                                     alignItems: "center",
                                     whiteSpace: "nowrap",
                                     color: textColor,
-                                }, children: value.icons }) : null, jsxRuntime.jsx("span", { style: {
-                                    color: textColor,
-                                    writingMode: isVerticalText ? "vertical-lr" : "initial",
-                                    textOrientation: isVerticalText ? "upright" : "initial"
-                                }, children: value.name })] }) }) }) }) })) : null;
+                                }, children: value.icons }) : null, jsxRuntime.jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 
-var styles$2 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
+var styles$1 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
 
 const DefaultRowHeader = ({ value, width, onEvent }) => {
     return (jsxRuntime.jsxs("div", { style: {
@@ -5877,7 +6035,7 @@ const DefaultRowHeader = ({ value, width, onEvent }) => {
             // background: color,
         }, onClick: (_) => {
             onEvent(new OnClickRowHeader(value.rowId));
-        }, className: styles$2["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), value.title3 && jsxRuntime.jsxs("span", { className: styles$2["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [jsxRuntime.jsx("strong", { children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
+        }, className: styles$1["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxRuntime.jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
 };
 
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
@@ -5907,8 +6065,6 @@ function useSingleAndDoubleClicks(onClick, onDoubleClick) {
     return { handleClick, handleDoubleClick };
 }
 
-var styles$1 = {"hide-scrollbar":"new-scheduler-module_hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module_scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module_scheduler-event-container__-h1xm","time-marker":"new-scheduler-module_time-marker__2BejU"};
-
 const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
     return (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => {
             e.stopPropagation();
@@ -5986,12 +6142,12 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                 e.stopPropagation();
                 e.preventDefault();
                 onEvent(new OnRightClickEvent(value.id));
-            }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsxs("div", { style: {
+            }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", hide: isOnDrag, dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsxs("div", { style: {
                         border: value.selected ? "2px solid black" : "none",
                         backgroundColor: backColor,
                         height: `calc(${heightRem}rem - 4px)`,
                         opacity: eventTransparent ? 0.5 : 1,
-                    }, className: styles$1["scheduler-event"], children: [jsxRuntime.jsxs("div", { style: {
+                    }, className: styles$2["scheduler-event"], children: [jsxRuntime.jsxs("div", { style: {
                                 display: "flex",
                                 flexDirection: "row",
                                 alignItems: "stretch",
@@ -6000,7 +6156,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                                 height: `calc(${heightRem}rem - 10px)`,
                             }, children: [value.isResizable && (jsxRuntime.jsx(EventSideDrag, { left: true, heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnLeftDragStart(value.id));
-                                    } })), jsxRuntime.jsxs("div", { className: styles$1["scheduler-event-container"], children: [jsxRuntime.jsx("div", { style: {
+                                    } })), jsxRuntime.jsxs("div", { className: styles$2["scheduler-event-container"], children: [jsxRuntime.jsx("div", { style: {
                                                 display: "flex",
                                                 flexDirection: "row",
                                                 alignItems: "center",
@@ -6011,9 +6167,9 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                                                 color: textColor,
                                             }, children: value.name })] }), value.isResizable && (jsxRuntime.jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnRightDragStart(value.id));
-                                    } }))] }), value.primaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$1["time-marker"], style: {
+                                    } }))] }), value.primaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$2["time-marker"], style: {
                                 backgroundColor: value.primaryTimeMarkerColor,
-                            } })), value.secondaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$1["time-marker"], style: {
+                            } })), value.secondaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$2["time-marker"], style: {
                                 backgroundColor: value.secondaryTimeMarkerColor,
                             } }))] }) }) }, value.id) }, value.id));
 };
@@ -6392,6 +6548,7 @@ const getNow = (isUtc) => {
     }
     return now;
 };
+const rowsHeight = 1.75; // rem
 const Scheduler = (props) => {
     const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
@@ -6425,7 +6582,6 @@ const Scheduler = (props) => {
     };
     const evenColor = "var(--cw-color-surface-container-low)";
     const oddColor = "var(--cw-color-surface-container)";
-    const rowsHeight = 1.75; // rem
     const schedulerContentHeight = rowsHeight * visibleRows;
     const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
     const divisionLines = getLinesByDivisions(header.divisions);
@@ -6462,7 +6618,7 @@ const Scheduler = (props) => {
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
         return rowsNumber * rowsHeight * pixelsInRem;
-    }, [rows, events, selectedDate, visibleDays, rowsHeight]);
+    }, [rows, events]);
     // Render
     return (jsxRuntime.jsxs("div", { id: id, style: {
             position: "relative",
@@ -6473,7 +6629,7 @@ const Scheduler = (props) => {
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
-                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$1["hide-scrollbar"], children: Row })] }));
+                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
 };
 const height = (events, rows, rowsNumber) => {
     const selectedRows = rows.slice(0, rowsNumber);
@@ -6852,7 +7008,7 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                             flexDirection: "column",
                             justifyContent: "center",
                             alignItems: "flex-start",
-                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), value.title3 && jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: [" (", value.title3, ")"] })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [jsxRuntime.jsx("strong", { children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }) }, value.rowId) }, value.rowId), isLoading ? jsxRuntime.jsx(CwIcon, { iconId: "spinner fa-spin" }) : undefined] }));
+                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }) }, value.rowId) }, value.rowId), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }));
 };
 
 const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
@@ -7066,18 +7222,11 @@ exports.CwBtnSelectedFolder = CwBtnSelectedFolder;
 exports.CwBtnShare = CwBtnShare;
 exports.CwBtnStatistic = CwBtnStatistic;
 exports.CwBtnUploadFiles = CwBtnUploadFiles;
-exports.CwBtnUserFolder = CwBtnUserFolder;
 exports.CwBtnVacations = CwBtnVacations;
 exports.CwBtnView = CwBtnView;
 exports.CwBtnWarning = CwBtnWarning;
 exports.CwButton = CwButton;
-exports.CwButtonDanger = CwButtonDanger;
-exports.CwButtonDangerOutline = CwButtonDangerOutline;
 exports.CwButtonDef = CwButtonDef;
-exports.CwButtonDefOutline = CwButtonDefOutline;
-exports.CwButtonExpandAndCollapse = CwButtonExpandAndCollapse;
-exports.CwButtonSec = CwButtonSec;
-exports.CwButtonSecOutline = CwButtonSecOutline;
 exports.CwCheckbox = CwCheckbox;
 exports.CwContextMenu = CwContextMenu;
 exports.CwContextualMenu = CwContextualMenu;