@cwellt_software/cwellt-reactjs-lib 1.0.5 → 1.0.7

package/dist/index.es.js

@@ -117,6 +117,152 @@ function CwTooltip(CwelltTooltipProps) {
     return (jsxs("div", { className: "cwelltTooltip", children: [jsx("div", { className: "cwelltTooltipTitle", style: CwelltTooltipProps.tooltipTitleStyle, children: jsx("span", { children: CwelltTooltipProps.tooltipTitle }) }), CwelltTooltipProps.children] }));
 }
 
+function colorToHSL(color) {
+    const hexColor = colorToHEX(color);
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+function colorToHEX(color) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('Could not create canvas context');
+    context.fillStyle = color;
+    return context.fillStyle;
+}
+function getHSLColor(color, alpha = 1) {
+    const hsl = colorToHSL(color);
+    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
+}
+function getContrastColor(color) {
+    if (color === null) {
+        return '#000000';
+    }
+    const hsl = colorToHSL(color);
+    // 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}%)`;
+}
+
+/**
+ * Icon component that supports both FontAwesome 4 and cwellt icon font
+ * @example
+ * <CwIcon iconId="house" /> // Uses cwellt icon font
+ * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
+ */
+function CwIcon(props) {
+    const { iconId, source = 'cwellt', ...iconProps } = props;
+    // Return appropriate icon based on source
+    if (source === 'fontawesome') {
+        return jsx("span", { ...iconProps, className: `fa fa-${iconId}` });
+    }
+    // Use custom icon font
+    return jsx("span", { ...iconProps, className: `cwi-icons cwi-${iconId}` });
+}
+
+/**
+* CwChip - A simple chip/tag component for displaying labels or categories
+*
+* @example
+* <CwChip label="Active" colorScheme="success" />
+* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
+* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
+* <CwChip label="Outlined" colorScheme="info" variant="outline" />
+* <CwChip label="Removable" closable onClose={() => console.log('closed')} />
+**/
+const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+    // Basic validation
+    if (closable && !onClose) {
+        console.warn('CwChip: onClose prop is required when closable is true');
+    }
+    // Calculate styles based on colorScheme, customColor and variant
+    const chipStyle = React__default.useMemo(() => {
+        if (colorScheme === 'custom' && customColor) {
+            if (variant === 'outline') {
+                // For outline, customColor is used for border and text
+                return {
+                    color: customColor,
+                    borderColor: customColor,
+                    ...style
+                };
+            }
+            else {
+                // For soft/solid, customColor is used for background and we calculate contrast
+                return {
+                    backgroundColor: customColor,
+                    color: getContrastColor(customColor),
+                    ...style
+                };
+            }
+        }
+        return style;
+    }, [colorScheme, customColor, variant, style]);
+    // Handle click on close icon
+    const handleClose = (e) => {
+        e.stopPropagation();
+        if (onClose) {
+            onClose();
+        }
+    };
+    // CSS classes
+    const chipClassNames = [
+        'cw-chip',
+        className,
+        closable ? 'cw-chip-closable' : '',
+    ].filter(Boolean).join(' ');
+    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label, closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+};
+
 function CwTag(tagProps) {
     const hideTag = (event_clickTag) => {
         const tag = event_clickTag.currentTarget.parentElement;
@@ -140,23 +286,12 @@ function CwTag(tagProps) {
                     " cwelltTag_desc cwellt_flex cwellt_justify_flex_start cwellt_align_items_center", style: tagProps.styleTag_description, children: tagProps.children }), tagProps.closableTag && (jsx("span", { className: "cwi-icons cwi-close", onClick: event_clickClosableT => onClickClosableCustomTag(event_clickClosableT), style: tagProps.styleClosableButton }))] }));
 }
 
-/**
- * An icon from fontawesome4. Find them here: [fontawesome.com/v4](https://fontawesome.com/v4/icons/)
- * @example
- * <CwIcon id="house" />
- */
-function CwIcon(props) {
-    const { iconId, ...iconProps } = props;
-    // if you wrap this inside a div I WILL find you 🔪
-    return jsx("i", { ...iconProps, className: `fa fa-${iconId}` });
-}
-
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
 var CwMessageType;
 (function (CwMessageType) {
-    CwMessageType["ERROR"] = "times-circle";
-    CwMessageType["WARN"] = "exclamation-triangle";
-    CwMessageType["INFO"] = "info-circle";
+    CwMessageType["ERROR"] = "close-circle";
+    CwMessageType["WARN"] = "warning";
+    CwMessageType["INFO"] = "info-bubble";
     CwMessageType["SUCCESS"] = "check-circle";
 })(CwMessageType || (CwMessageType = {}));
 const CwMessage = props => {
@@ -268,7 +403,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsx("div", {})) }));
 }
 
-var styles$b = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
+var styles$c = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si","cwi-icons":"cw-generic-tooltip-module_cwi-icons__0-vzj"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -379,12 +514,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$b["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$c["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return createPortal(jsx("div", { className: styles$b["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+        return createPortal(jsx("div", { className: styles$c["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -399,7 +534,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$b["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+    return (jsxs("div", { ref: containerRef, className: styles$c["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
@@ -518,7 +653,7 @@ class CwModalIframe extends React.Component {
     }
 }
 
-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"};
+var styles$b = {"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) => {
@@ -711,7 +846,7 @@ const CwDialog = props => {
             onClose();
         }
     }, [onClose]);
-    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$a["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$b["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = useMemo(() => (jsx("section", { children: children })), [children]);
     const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx("button", { className: "cw-button-icon cwi-save", onClick: onSave })) })), [customFooter, onSave]);
     const resizeHandles = useMemo(() => size.autoHeight
@@ -740,7 +875,7 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    return (open && (jsx("div", { "data-has-scrim": hasScrim, className: styles$a["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    return (open && (jsx("div", { "data-has-scrim": hasScrim, className: styles$b["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -892,6 +1027,59 @@ class CwDialogManager {
     }
 }
 
+var styles$a = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
+
+/**
+* CwCard - A simple card component for displaying content in a contained format
+*
+* @example
+* <CwCard
+*   title="Card Title"
+*   subtitle="Card Subtitle"
+*   onEdit={handleEdit}
+*   onDelete={confirmDeletion}
+*   footer="Last updated: 2 days ago"
+*   chips={[
+*     { label: 'Important', colorScheme: 'danger' },
+*     { label: 'Custom', colorScheme: 'custom', customColor: '#8a2be2' }
+*   ]}
+* >
+*   <p>This is the main content of the card.</p>
+* </CwCard>
+**/
+const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", }) => {
+    // Construct class names using CSS modules
+    const cardClassNames = [
+        'cw-card',
+        styles$a.card,
+        className,
+        clickable ? styles$a.clickable : '',
+        disabled ? styles$a.disabled : '',
+        isLoading ? styles$a.loading : '',
+    ].filter(Boolean).join(' ');
+    // Handle click event when card is clickable
+    const handleClick = () => {
+        if (clickable && onClick && !disabled && !isLoading) {
+            onClick();
+        }
+    };
+    // Determine if actions should be rendered
+    const hasActions = onEdit || onDelete || extraActions;
+    // Determine if header should be rendered
+    const hasHeader = title || subtitle || (hasActions && direction === "column");
+    // Determine if chips should be rendered
+    const hasChips = chips.length > 0;
+    // Determine if footer should be rendered
+    const hasFooter = hasChips || footer || (hasActions && direction === "row");
+    // Actions component to reuse
+    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$a.actions, children: [extraActions ?? null, onEdit && jsx("button", { className: "cw-button-icon cwi-edit", onClick: onEdit }), onDelete && jsx("button", { className: "cw-button-icon cwi-delete", "data-button-variant": "danger", onClick: onDelete })] })) : null;
+    return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
+            role: 'button',
+            tabIndex: 0,
+            onClick: handleClick,
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$a.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$a.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$a.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$a.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$a.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$a.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+};
+
 var styles$9 = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
@@ -918,7 +1106,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
  *
  * @example
- * const columns = [
+ * const columns: Column<User>[] = [
  *   {
  *     title: 'Name',
  *     dataIndex: 'name',
@@ -945,7 +1133,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   }
  * ];
  *
- * const data = [
+ * const data:User[] = [
  *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
  *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
  *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
@@ -960,7 +1148,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   </div>
  * );
  *
- * <CwTable
+ * <CwTable<User>
  *   columns={columns}
  *   data={data}
  *   pagination={true}
@@ -1000,7 +1188,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
     }, []);
     const handleRowExpand = useCallback((item) => {
         const itemKey = item[rowKey];
-        setExpandedRowKey(prev => (prev === itemKey ? null : itemKey));
+        setExpandedRowKey((prev) => (prev === itemKey ? null : itemKey));
         onExpand?.(item);
     }, [rowKey, onExpand]);
     const handleSort = useCallback((columnKey) => {
@@ -1076,44 +1264,39 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             const itemKey = item[rowKey];
             if (!itemKey)
                 console.warn("Missing row key for item", item);
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: classNameRow ?? "", children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : item[col.dataIndex] }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, itemKey));
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: classNameRow ?? "", children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
+                                        ? "cwi-chevron-down"
+                                        : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
     return (jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsx("div", { style: scrollContainerStyle, children: jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { style: stickyHeader
                                 ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
-                                : undefined, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(col => (jsxs("th", { onClick: () => col.sortable && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex ? sortConfig.direction : ""}`.trim(), style: {
+                                : undefined, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(col => (jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+                                            ? sortConfig.direction
+                                            : ""}`.trim(), style: {
                                             cursor: col.sortable ? "pointer" : "default",
                                             userSelect: "none",
                                             width: columnWidths[col.key] ?? col.width,
-                                            position: "relative",
                                             ...((col.width || columnWidths[col.key]) && {
                                                 minWidth: 50,
                                                 maxWidth: columnWidths[col.key] ?? col.width
                                             }),
-                                        }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { children: col.title }), col.sortable && (jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc" ? "↑" : "↓" }))] }), jsx("div", { onMouseDown: (e) => startResize(e, col.key), style: {
-                                                    position: "absolute",
-                                                    right: 0,
-                                                    top: 7,
-                                                    bottom: 0,
-                                                    width: "2px",
-                                                    cursor: "col-resize",
-                                                    zIndex: 1,
-                                                    backgroundColor: "white",
-                                                    height: 20,
-                                                } })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), totalPages > 1 && (jsxs("span", { children: [jsx("input", { type: "number", value: currentPage, onChange: (e) => {
-                                    const value = parseInt(e.target.value, 10);
-                                    if (!isNaN(value))
-                                        handlePageChange(value);
-                                }, onBlur: (e) => {
-                                    const value = parseInt(e.target.value, 10);
-                                    if (isNaN(value) || value < 1 || value > totalPages) {
-                                        handlePageChange(1);
-                                    }
-                                }, min: 1, max: totalPages, style: {
-                                    width: "4rem",
-                                    textAlign: "center",
-                                    marginRight: "0.5rem"
-                                } }), "of ", totalPages] })), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                                        }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { children: col.title }), col.sortable && (jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc"
+                                                            ? "↑"
+                                                            : "↓" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsx("input", { type: "number", value: currentPage, onChange: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (!isNaN(value))
+                                handlePageChange(value);
+                        }, onBlur: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (isNaN(value) || value < 1 || value > totalPages) {
+                                handlePageChange(1);
+                            }
+                        }, min: 1, max: totalPages, style: {
+                            width: "4rem",
+                            textAlign: "center",
+                            marginRight: "0.5rem"
+                        } }), "of ", totalPages, jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
 var styles$8 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
@@ -1129,20 +1312,27 @@ const TabIcon = ({ icon }) => {
     return icon;
 };
 /**
- *
+ * CwTabs component for displaying tabbed content.
  * @param CwTabsProps
  * @example
- * The way to use the tab component:
+ The way to use the tab component:
+ *  const [activeTab, setActiveTab] = useState("1");
+ *
+ *  const handleTabChange = (tab) => {
+ *    setActiveTab(tab.key);
+ *  };
+ *
  *  const tabs = [
- *    { key: "1", title: 'Tab 1', icon: 'iconClassname', content: <div>Contenido de la pestaña 1</div> },
- *    { key: "2", title: 'Tab 2', icon: 'iconClassname', content: <div>Contenido de la pestaña 2</div> },
- *    { key: "3", title: 'Tab 3', icon: 'iconClassname', content: <div>Contenido de la pestaña 3</div> },
+ *    { key: "1", title: 'Tab 1', icon: 'iconClassname', content: <div>Content for tab 1</div> },
+ *    { key: "2", title: 'Tab 2', icon: 'iconClassname', content: <div>Content for tab 2</div> },
+ *    { key: "3", title: 'Tab 3', icon: 'iconClassname', content: <div>Content for tab 3</div> },
  *  ];
+ *
  *  <CwTabs
- *        tabs={tabs}
- * 		  tabsPosition="top"
- *        defaultActiveKey="2"
- *        onTabClick={(e)=> handleInput(e)}
+ *    tabs={tabs}
+ *    tabsPosition="top"
+ *    defaultActiveKey={activeTab}  // Use the current state for defaultActiveKey
+ *    onTabClick={handleTabChange}
  *  />
  * @returns A tab
  */
@@ -1745,7 +1935,7 @@ function CwInputImage(props) {
         const file = e.target.files?.[0];
         handleFile(file ?? null);
     };
-    return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [jsx(CwIcon, { iconId: "clipboard" }), "\u2002Paste"] }), jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [jsx(CwIcon, { iconId: "folder" }), "\u2002Browse"] })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
+    return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [jsx(CwIcon, { iconId: "paste" }), "\u2002Paste"] }), jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [jsx(CwIcon, { iconId: "folder-open" }), "\u2002Browse"] })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
 }
 
 /**
@@ -2981,7 +3171,7 @@ const CwMultiFilterTag = props => {
         }, onClick: () => {
             if (Selectable)
                 OnSelect?.(props);
-        }, children: [jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsx("span", { onClick: () => props.OnRemove?.(props), children: jsx(CwIcon, { iconId: "xmark" }) }))] }));
+        }, children: [jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsx("span", { onClick: () => props.OnRemove?.(props), children: jsx(CwIcon, { iconId: "close" }) }))] }));
 };
 
 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"};
@@ -6032,83 +6222,6 @@ const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width,
                     }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
 };
 
-function colorToHSL(color) {
-    const hexColor = colorToHEX(color);
-    const hex = hexColor.replace('#', '');
-    const r = parseInt(hex.substring(0, 2), 16) / 255;
-    const g = parseInt(hex.substring(2, 4), 16) / 255;
-    const b = parseInt(hex.substring(4, 6), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h = 0;
-    let s = 0;
-    const l = (max + min) / 2;
-    if (max !== min) {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch (max) {
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-        }
-        h /= 6;
-    }
-    return {
-        h: Math.round(h * 360),
-        s: Math.round(s * 100),
-        l: Math.round(l * 100)
-    };
-}
-function colorToHEX(color) {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (!context)
-        throw new Error('Could not create canvas context');
-    context.fillStyle = color;
-    return context.fillStyle;
-}
-function getHSLColor(color, alpha = 1) {
-    const hsl = colorToHSL(color);
-    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
-}
-function getContrastColor(color) {
-    if (color === null) {
-        return '#000000';
-    }
-    const hsl = colorToHSL(color);
-    // 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 }) => {
@@ -7299,12 +7412,19 @@ class CwFindAirport extends React.Component {
             });
         });
     }
+    getShortCode(text) {
+        const match = text.match(/([A-Z]{4})\(([A-Z]{3})\)/);
+        if (match && match.length >= 3) {
+            return `${match[1]}(${match[2]})`;
+        }
+        return text;
+    }
     render() {
-        const options = this.state.data.map((sl) => (jsx(Option, { value: sl.value, children: sl.text }, sl.value)));
-        return (jsx("div", { children: jsxs("div", { className: "cwellt_flex cwellt_justify_flex_start cwellt_align_items_center", children: [jsx(Select, { id: "InputID", 
+        const options = this.state.data.map((sl) => (jsxs(Option, { value: sl.value, title: sl.text, label: this.getShortCode(sl.text), children: [(sl.text), " "] }, sl.value)));
+        return (jsx("div", { children: jsxs("div", { className: "cw-flex-row cw-align-left-center", style: { gap: "0.25rem" }, children: [jsx(Select, { id: "InputID", 
                         // this.required === "true" ? "required" : ""
-                        showSearch: true, allowClear: true, "aria-required": true, value: this.state.valueId, placeholder: this.props.placeHolder, defaultActiveFirstOption: false, showArrow: true, filterOption: false, onSearch: this.handleSearch.bind(this), onChange: this.handleChange.bind(this), onSelect: this.handleSelect.bind(this), notFoundContent: null, dropdownClassName: "cwelltItemFindAirport", className: this.props.className, disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true), children: options }, JSON.stringify(this.state.valueId)), jsx("button", { id: "findAirportInProviderButtonID", className: "cwellt_btn_Nbg cwellt_btnSearchAirport", hidden: this.props.searchType === "OnlyDatabase", onClick: this.onClick.bind(this), disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true) })] }) }));
+                        showSearch: true, allowClear: true, "aria-required": true, value: this.state.valueId, placeholder: this.props.placeHolder, defaultActiveFirstOption: false, showArrow: true, filterOption: false, onSearch: this.handleSearch.bind(this), onChange: this.handleChange.bind(this), onSelect: this.handleSelect.bind(this), notFoundContent: null, popupClassName: "cwelltItemFindAirport", className: this.props.className, labelInValue: false, optionLabelProp: "label", disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true), style: { flexGrow: 1 }, children: options }, JSON.stringify(this.state.valueId)), jsx("button", { id: "findAirportInProviderButtonID", className: "cw-button-icon cwi-airport", title: "Search external airport", hidden: this.props.searchType === "OnlyDatabase" || this.props.disabled, onClick: this.onClick.bind(this), disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true) })] }) }));
     }
 }
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, DefaultRowHeader, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDef, CwCard, CwCheckbox, CwChip, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, DefaultRowHeader, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage };