@cwellt_software/cwellt-reactjs-lib 1.5.0 → 1.5.2

package/dist/index.cjs.js

@@ -181,7 +181,7 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
 
-var styles$v = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+var styles$x = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
 
 // Constants
 const margin$1 = 16;
@@ -471,7 +471,7 @@ const CwTooltipManager = () => {
     if (!state.isVisible || !state.content) {
         return null;
     }
-    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$v["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$x["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
             top: `${tooltipPosition.top}px`,
             left: `${tooltipPosition.left}px`,
             opacity: (isPositioned && !isMeasuring) ? 1 : 0,
@@ -552,7 +552,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
     React.useEffect(() => {
         ensureTooltipManager();
     }, []);
-    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$v["cw-tooltip"], children: children }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$x["cw-tooltip"], children: children }));
 };
 
 const SVG_ICONS = {
@@ -1011,6 +1011,95 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
     return (jsxRuntime.jsxs("div", { "aria-busy": isLoading, className: "cw-loading-container", "data-children": !!children, children: [overlay, jsxRuntime.jsx("div", { className: "cw-loading-disabled-content", children: children })] }));
 }
 
+var styles$w = {"skeleton":"cw-skeleton-module__skeleton__Jvx2x","group":"cw-skeleton-module__group__Cm8AU"};
+
+/*
+ * Internal helper for skeleton allocations (CwSkeleton, tables, cards).
+ * Not exported from the library barrel - not a public API.
+ */
+/** Upper bound so a pathological count cannot allocate an unbounded number of nodes. */
+const MAX_SKELETON_COUNT = 100;
+/**
+ * Normalizes a skeleton count to a finite, floored, non-negative integer capped at
+ * MAX_SKELETON_COUNT. Falls back to `fallback` for undefined, NaN, non-finite or
+ * non-positive input, so valid inputs keep the public default behaviour and only
+ * pathological ones are bounded.
+ */
+function normalizeSkeletonCount(value, fallback) {
+    if (value === undefined || !Number.isFinite(value) || value < 1) {
+        return fallback;
+    }
+    return Math.min(Math.floor(value), MAX_SKELETON_COUNT);
+}
+
+/**
+ * CwSkeleton - a shimmering placeholder that reserves the shape of content while it loads.
+ *
+ * Renders inline <span> elements so it can sit inside text-level contexts. Sizing flows
+ * through component-scoped custom properties; only the props the caller provides are set
+ * inline, so the CSS defaults per variant (and the 60% last-line rule) stay in charge.
+ *
+ * @example
+ * <CwSkeleton count={3} />
+ * <CwSkeleton variant="circle" />
+ * <CwSkeleton variant="rect" height="10rem" />
+ */
+function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap }) {
+    // Only forward the custom properties the caller actually set; CSS declares the defaults.
+    const style = {
+        ...(width !== undefined && { '--skeleton-width': width }),
+        ...(height !== undefined && { '--skeleton-height': height }),
+        ...(radius !== undefined && { '--skeleton-radius': radius })
+    };
+    // The un-hashed cw-skeleton / cw-skeleton-group classes carry no styles in the
+    // library - they are stable public hooks for exceptional external overrides.
+    const skeletonClassName = ['cw-skeleton', styles$w.skeleton].filter(Boolean).join(' ');
+    const groupClassName = ['cw-skeleton-group', styles$w.group].filter(Boolean).join(' ');
+    const lineCount = normalizeSkeletonCount(count, 1);
+    if (lineCount <= 1) {
+        return (jsxRuntime.jsx("span", { className: skeletonClassName, "data-variant": variant, "aria-hidden": "true", style: style }));
+    }
+    const skeletonElements = Array.from({ length: lineCount }, (_, index) => (jsxRuntime.jsx("span", { className: skeletonClassName, "data-variant": variant, style: style }, index)));
+    const groupStyle = {
+        ...(gap !== undefined && { '--skeleton-gap': gap })
+    };
+    return (jsxRuntime.jsx("span", { className: groupClassName, "aria-hidden": "true", style: groupStyle, children: skeletonElements }));
+}
+
+var styles$v = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-progress-module__value__Q-DrH","header":"cw-progress-module__header__mv5ct","label":"cw-progress-module__label__jwOWp","track":"cw-progress-module__track__572-3","fill":"cw-progress-module__fill__fX1UA"};
+
+/**
+ * CwProgress - a determinate or indeterminate progress bar.
+ *
+ * Use it for measurable operations (imports, uploads, batch jobs). For short
+ * unmeasurable waits use CwLoading; for initial layout loads use CwSkeleton.
+ *
+ * @example
+ * <CwProgress value={62} label="Import" color="success" />
+ * <CwProgress indeterminate label="Uploading" />
+ */
+function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'regular', layout = 'row', color = 'primary', monoValue = false, prominent = false }) {
+    const labelId = React.useId();
+    // Determinate: a missing or non-finite value is treated as 0 (never NaN), then
+    // clamped to [0,100] for aria-valuenow and the fill width. Indeterminate has no value.
+    const clamped = indeterminate
+        ? undefined
+        : Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), 100);
+    const percent = clamped !== undefined ? Math.round(clamped) : undefined;
+    const showValue = rightLabel !== undefined || (!indeterminate && percent !== undefined);
+    const valueText = rightLabel ?? (percent !== undefined ? `${percent}%` : '');
+    // The un-hashed cw-progress class carries no styles in the library - a stable
+    // public hook for exceptional external overrides only.
+    const rootClassName = ['cw-progress', styles$v.progress].filter(Boolean).join(' ');
+    const labelSpan = label ? jsxRuntime.jsx("span", { className: styles$v.label, id: labelId, children: label }) : null;
+    const valueLabel = showValue ? (jsxRuntime.jsx("span", { className: styles$v.value, "data-mono": monoValue || undefined, children: valueText })) : null;
+    return (jsxRuntime.jsxs("div", { className: rootClassName, "data-layout": layout, "data-size": size, "data-color": color, "data-prominent": prominent || undefined, "data-indeterminate": indeterminate || undefined, children: [layout === 'column' && (labelSpan || valueLabel) && (jsxRuntime.jsxs("header", { className: styles$v.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsxRuntime.jsx("div", { className: styles$v.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
+                    'aria-valuenow': percent,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': 100
+                }), children: jsxRuntime.jsx("div", { className: styles$v.fill, style: !indeterminate && clamped !== undefined ? { width: `${clamped}%` } : undefined }) }), layout === 'row' && valueLabel] }));
+}
+
 var styles$u = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
 
 // Constants moved outside to prevent recreation
@@ -1749,7 +1838,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
 
-var styles$r = {"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","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
+var styles$r = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1769,7 +1858,7 @@ var styles$r = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   <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", layout, }) => {
+const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, skeletonLines = 3, disabled = false, style, chips = [], variant = "border", direction = "column", layout, }) => {
     const resolvedDirection = layout?.direction ?? direction;
     const resolvedAlign = layout?.align ?? (alignment === 'left' ? 'start' : 'center');
     // Construct class names using CSS modules
@@ -1779,7 +1868,6 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
         className,
         clickable ? styles$r.clickable : '',
         disabled ? styles$r.disabled : '',
-        isLoading ? styles$r.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1795,16 +1883,17 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     const hasChips = chips.length > 0;
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
-    // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$r.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
-    return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
+    // Actions component to reuse. While loading, each provided action renders a circular
+    // ghost sized to the CwButton icon footprint (2rem) - no interactive buttons.
+    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsx("div", { className: styles$r.actions, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onEdit && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onDelete && jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) })) : null;
+    return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && !isLoading && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": resolvedDirection, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$r.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$r.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$r.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$r.footerContent, children: footer }))] })), resolvedDirection === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$r.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: jsxRuntime.jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$r.headerContent, "data-align": resolvedAlign, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] }))), jsxRuntime.jsx("div", { className: styles$r.content, children: isLoading ? jsxRuntime.jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("div", { className: styles$r.footerTags, children: jsxRuntime.jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$r.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$r.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$r.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
 };
 
-var styles$q = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS"};
+var styles$q = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","emptyState":"cw-card-list-module__emptyState__RlqiS"};
 
 /**
  * Option to display in the CwSelect
@@ -1862,7 +1951,7 @@ function CwSelect(props) {
                                     : selectProps.onChange, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
-function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
+function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, skeletonCards = 6, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [sortKey, setSortKey] = React.useState(defaultSortKey || sortOptions[0]?.key || '');
     const [sortDirection, setSortDirection] = React.useState('asc');
@@ -1899,7 +1988,7 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
                         icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
                         onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
                         title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
-                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: styles$q.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$q.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$q.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$q.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
+                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsxRuntime.jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, "aria-busy": true, children: Array.from({ length: normalizeSkeletonCount(skeletonCards, 6) }, (_, index) => (jsxRuntime.jsx(CwCard, { isLoading: true, children: null }, `skeleton_${index}`))) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$q.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$q.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$q.pagination, children: [jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxRuntime.jsxs("span", { className: styles$q.pageInfo, children: [currentPage, " / ", totalPages] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
 }
 
 var styles$p = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
@@ -1922,6 +2011,21 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
     return (jsxRuntime.jsxs("div", { className: styles$p["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$p["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
+/*
+ * Internal helper for table loading ghosts (CwTable, CwSortableTable).
+ * Not exported from the library barrel - not a public API.
+ */
+const SKELETON_CELL_WIDTHS = ['85%', '60%', '95%', '70%', '80%', '65%'];
+/**
+ * Deterministic width for a table ghost cell so skeleton rows look like real,
+ * unevenly sized content. Derived purely from indices - stable across re-renders
+ * (no reshuffling) - and offset by the column count so the pattern does not
+ * repeat identically per row or per column.
+ */
+function getSkeletonCellWidth(rowIndex, columnIndex, columnCount) {
+    return SKELETON_CELL_WIDTHS[(rowIndex * columnCount + columnIndex) % SKELETON_CELL_WIDTHS.length];
+}
+
 /**
  * A reusable and customizable table component.
  *
@@ -1991,7 +2095,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, skeletonRows = 5, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
@@ -2129,7 +2233,9 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
     };
     const renderTableBody = () => {
         if (loading) {
-            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: jsxRuntime.jsx("div", { children: "Loading data..." }) }) }));
+            // Ghost rows: rendered outside the data/selection/expand code paths, so they
+            // cannot trigger row click, selection or expansion.
+            return Array.from({ length: normalizeSkeletonCount(skeletonRows, 5) }, (_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, `skeleton_${rowIndex}`)));
         }
         if (!paginatedData || paginatedData.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2151,7 +2257,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                         : "cwi-chevron-right"}` }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.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",
@@ -2177,7 +2283,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                 }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$o = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
+var styles$o = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
 
 /**
  * Hook that provides state management for CwSortableTable.
@@ -2242,7 +2348,12 @@ function useSortableTable(initialItems) {
 // ─── Drop indicator row ───────────────────────────────────────────────────────
 const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$o.dropIndicator, "aria-hidden": true, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", {}) }) }));
 // ─── Loading skeleton ─────────────────────────────────────────────────────────
-const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsxRuntime.jsx("tr", { className: styles$o.skeletonRow, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", { className: styles$o.skeleton }) }) }, i))) }));
+// Plain td cells (no local class): the ghost cells get the same global cw-table
+// padding as real body cells, so row heights match the loaded rows exactly.
+// One cell per real column, so column classNames/widths apply to the ghost too.
+function LoadingRows({ columns, showHandle, skeletonRows }) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: skeletonRows }).map((_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, rowIndex))) }));
+}
 // ─── Component ────────────────────────────────────────────────────────────────
 /**
  * CwSortableTable
@@ -2259,7 +2370,7 @@ const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { chil
  * - Reorder is calculated in onDragEnd using lastValidDropIndex
  * - draggedItem is tracked in state, not via dataTransfer
  */
-function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = false, textNoData = "No data available", className, tableClassName, maxHeight, showHandle = true, style, saveLabel = "Save order", discardLabel = "Discard", }) {
+function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = false, skeletonRows = 5, textNoData = "No data available", className, tableClassName, maxHeight, showHandle = true, style, saveLabel = "Save order", discardLabel = "Discard", }) {
     const { items, hasChanges, handleReorder, handleSave, handleDiscard, } = useSortableTable(data);
     // Drag state lives in the component, same as CwSortableList
     const [draggedItem, setDraggedItem] = React.useState(null);
@@ -2278,11 +2389,15 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         setLastValidDropIndex(null);
     };
     const handleDragStart = (e, item) => {
+        if (loading)
+            return;
         setDraggedItem(item);
         setLastValidDropIndex(null);
         e.dataTransfer.effectAllowed = "move";
     };
     const handleDragOver = (e, index) => {
+        if (loading)
+            return;
         e.preventDefault();
         if (!draggedItem)
             return;
@@ -2295,6 +2410,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         }
     };
     const handleDragEnd = () => {
+        // Never persist a reorder computed against stale/ghost data while loading.
+        if (loading) {
+            cleanupDragState();
+            return;
+        }
         if (draggedItem && lastValidDropIndex !== null) {
             const dragIndex = items.findIndex(item => item[rowKey] === draggedItem[rowKey]);
             if (dragIndex !== lastValidDropIndex && dragIndex !== lastValidDropIndex - 1) {
@@ -2321,7 +2441,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
     };
     const renderBody = () => {
         if (loading) {
-            return jsxRuntime.jsx(LoadingRows, { colSpan: totalCols });
+            return jsxRuntime.jsx(LoadingRows, { columns: columns, showHandle: showHandle, skeletonRows: normalizeSkeletonCount(skeletonRows, 5) });
         }
         if (!items || items.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: totalCols, className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2333,7 +2453,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         });
     };
     // ── Render ──────────────────────────────────────────────────────────────
-    return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxRuntime.jsxs("footer", { className: styles$o.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxRuntime.jsxs("footer", { className: styles$o.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
 }
 
 /**
@@ -2389,7 +2509,7 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
  *
  * @returns React component
  */
-function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
+function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, skeletonRows = 5, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
     const [internalState, setInternalState] = React.useState({
         page: 1,
         pageSize: pageSizeOptions[0],
@@ -2490,7 +2610,9 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
     };
     const renderTableBody = () => {
         if (loading) {
-            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: jsxRuntime.jsx("div", { children: "Loading data..." }) }) }));
+            // Ghost rows: rendered outside the data/selection/expand code paths, so they
+            // cannot trigger row click, selection or expansion.
+            return Array.from({ length: normalizeSkeletonCount(skeletonRows, 5) }, (_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("td", { className: "cw-table-col-action" }), columns.map((col, columnIndex) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: getSkeletonCellWidth(rowIndex, columnIndex, columns.length) }) }, col.key)))] }, `skeleton_${rowIndex}`)));
         }
         if (!data || data.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
@@ -2508,7 +2630,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                         }, 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 === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
+    return (jsxRuntime.jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
                                         cursor: col.sortable ? "pointer" : "default",
                                         userSelect: "none",
                                         width: columnWidths[col.key] ?? col.width,
@@ -2582,7 +2704,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "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, "data-tab-key": tab.key, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx("span", { className: styles$n['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "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, "data-tab-key": tab.key, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx("span", { className: styles$n['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -2609,9 +2731,17 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }));
 };
 
-var styles$m = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
+var styles$m = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","skeletonRow":"cw-master-detail-module__skeletonRow__6BUgt","detailSkeleton":"cw-master-detail-module__detailSkeleton__GcDS4","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
 
-const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, detailContent, emptyDetail, searchPlaceholder = 'Search...', onSearch, masterHeader, masterFooter, masterWidth: initialWidth = 320, minMasterWidth = 240, maxMasterWidth = 500, resizable = true, showSearch = true, }) => {
+/*
+ * Fixed rem widths for the ghosts: the master rows and detail panel size their
+ * content freely, so a percentage-width skeleton would resolve to 100% of ~0 and
+ * collapse to nothing. Fixed widths render regardless of layout. Cycled so rows do
+ * not all look identical.
+ */
+const MASTER_TITLE_WIDTHS = ['9rem', '11rem', '8rem', '10rem'];
+const MASTER_SUBTITLE_WIDTH = '5rem';
+const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, detailContent, emptyDetail, searchPlaceholder = 'Search...', onSearch, masterHeader, masterFooter, masterWidth: initialWidth = 320, minMasterWidth = 240, maxMasterWidth = 500, resizable = true, showSearch = true, loading = false, skeletonRows = 5, }) => {
     const [masterWidth, setMasterWidth] = React.useState(initialWidth);
     const [isResizing, setIsResizing] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -2646,11 +2776,21 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
         };
     }, [isResizing, minMasterWidth, maxMasterWidth]);
     const rootClassName = [styles$m['cw-master-detail'], className].filter(Boolean).join(' ');
-    return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: items.map((item) => (jsxRuntime.jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$m.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$m.detail, children: selectedKey && detailContent
+    return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, "aria-busy": loading || undefined, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: loading
+                            ? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("li", { "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxRuntime.jsxs("div", { className: styles$m.skeletonRow, children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_TITLE_WIDTHS[rowIndex % MASTER_TITLE_WIDTHS.length] }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: MASTER_SUBTITLE_WIDTH })] })] }, `skeleton_${rowIndex}`)))
+                            : items.map((item) => (jsxRuntime.jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$m.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$m.detail, children: loading ? (jsxRuntime.jsxs("div", { className: styles$m.detailSkeleton, "aria-hidden": "true", children: [jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "14rem", height: "1.5em" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "22rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "18rem" }), jsxRuntime.jsx(CwSkeleton, { variant: "text", width: "20rem" })] })) : selectedKey && detailContent
                     ? detailContent
                     : (jsxRuntime.jsx("div", { className: styles$m['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
 };
 
+/*
+ * Fixed rem widths (not percentages): dt and dd size to their content in the list
+ * item, so a percentage-width skeleton would resolve to 100% of ~0 and collapse to
+ * nothing. Fixed widths are visible in both row (dt beside dd) and column (dt above
+ * dd) item layouts. Cycled by row so keys and values do not all look identical.
+ */
+const SKELETON_KEY_WIDTHS = ["5rem", "6.5rem", "4.5rem", "6rem"];
+const SKELETON_VALUE_WIDTHS = ["8rem", "6rem", "9rem", "7rem"];
 /**
  * A component for displaying key-value pairs in a definition list format
  * Used for read-only display of structured data
@@ -2664,13 +2804,20 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
  *   emptyValue="N/A"
  * />
  */
-const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", groupLayout, itemLayout, ...htmlProps }) => {
+const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", loading = false, skeletonRows = 4, groupLayout, itemLayout, ...htmlProps }) => {
     const itemDirection = itemLayout?.direction ?? direction;
-    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, ...htmlProps, children: items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+    const renderItems = () => {
+        if (loading) {
+            // The whole list comes from one data load, so both key and value ghost.
+            return Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, "aria-hidden": "true", children: [jsxRuntime.jsx("dt", { children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: SKELETON_KEY_WIDTHS[rowIndex % SKELETON_KEY_WIDTHS.length] }) }), jsxRuntime.jsx("dd", { children: jsxRuntime.jsx(CwSkeleton, { variant: "text", width: SKELETON_VALUE_WIDTHS[rowIndex % SKELETON_VALUE_WIDTHS.length] }) })] }, `skeleton_${rowIndex}`)));
+        }
+        return items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
                         ? (React.isValidElement(item.value)
                             ? item.value
                             : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
-                        : emptyValue })] }, item.key))) }));
+                        : emptyValue })] }, item.key)));
+    };
+    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, "aria-busy": loading || undefined, ...htmlProps, children: renderItems() }));
 };
 
 var styles$l = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
@@ -3106,8 +3253,14 @@ function CwInput(CwInputProps) {
  * ```
  */
 function CwDigit(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, feedback, ...inputProps } = props;
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const feedbackId = React.useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = [inputProps["aria-describedby"], ...feedbackIds].filter(Boolean).join(" ") || undefined;
+    return (jsxRuntime.jsxs("div", { className: "cw-input-text", children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps, "aria-describedby": describedBy }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { id: feedbackIds[index], className: "cw-input-info", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 var styles$j = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
@@ -3321,7 +3474,7 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
 
 var styles$i = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
 
-const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
+const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, className, style, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const containerRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
@@ -3452,7 +3605,7 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$i.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps })), jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$i.selectColor} ${disabled ? styles$i.disabled : ''} ${readOnly ? styles$i.readOnly : ''}`, style: {
+    return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$i.container}${className ? ` ${className}` : ''}`, style: style, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps })), jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$i.selectColor} ${disabled ? styles$i.disabled : ''} ${readOnly ? styles$i.readOnly : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
@@ -5135,8 +5288,8 @@ function CwNavMenu({ items, loading = false, isActive, renderLink = defaultRende
         }
         return (jsxRuntime.jsx("li", { "data-active": isActive?.(item) ? "true" : undefined, children: renderLink(item, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx(CwIcon, { iconId: item.icon, size: "medium" }), item.label, isFavorite?.(item) && jsxRuntime.jsx(CwIcon, { iconId: "star", size: "small", className: styles$8.favoriteStar })] })) }, item.id));
     };
-    return (jsxRuntime.jsxs("nav", { ...navProps, className: [styles$8.menu, className].filter(Boolean).join(" "), children: [favoritesSlot && (jsxRuntime.jsxs("details", { open: true, ...favoritesProps, className: [styles$8.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxRuntime.jsxs("summary", { children: [jsxRuntime.jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsxRuntime.jsx("div", { className: styles$8.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsxRuntime.jsx("ul", { children: loading
-                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsxRuntime.jsx("li", { className: styles$8.skeleton }, index)))
+    return (jsxRuntime.jsxs("nav", { ...navProps, className: [styles$8.menu, className].filter(Boolean).join(" "), "aria-busy": loading || undefined, children: [favoritesSlot && (jsxRuntime.jsxs("details", { open: true, ...favoritesProps, className: [styles$8.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxRuntime.jsxs("summary", { children: [jsxRuntime.jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsxRuntime.jsx("div", { className: styles$8.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsxRuntime.jsx("ul", { children: loading
+                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsxRuntime.jsx("li", { className: styles$8.skeleton, children: jsxRuntime.jsx(CwSkeleton, { height: "var(--cw-size-small)", radius: "var(--cw-border-radius-small)" }) }, index)))
                     : visibleItems.map(item => renderItem(item, 1)) }), showEmptyMessage && jsxRuntime.jsx("p", { className: styles$8.emptyMessage, children: emptyMessage })] }));
 }
 
@@ -8526,1066 +8679,6 @@ function CwDateRangePickerTemporal({ value, onChange, minDate, maxDate, disabled
                                             } })] }), jsxRuntime.jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
 }
 
-const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent, }) => {
-    const onClickContextMenu = React.useCallback((key, resource) => {
-        if (onClickResourceContextMenu) {
-            onClickResourceContextMenu(key, resource);
-        }
-    }, []);
-    return (jsxRuntime.jsx("td", { className: "resourceArea", style: { width: "100px" }, children: resources.map((r, _i) => (jsxRuntime.jsxs("div", { className: "resource CwelltFunctionDescription", style: { height: r.maxTop }, children: [(canBePinned || includesPinned) && (jsxRuntime.jsx(PinButton, { canBePinned: canBePinned, resource: r, onCrewPinning: onCrewPinning })), jsxRuntime.jsx(ResourceTitleComponent, { resource: r, handleOnClickResourceContextMenu: onClickContextMenu })] }, r.id.toString()))) }));
-};
-const PinButton = ({ canBePinned, resource, onCrewPinning }) => {
-    const buttonProps = canBePinned
-        ? {
-            id: "cbl_pinL",
-            onClick: () => onCrewPinning(resource, ""),
-            children: jsxRuntime.jsx("span", { className: "cwi-pin", style: { visibility: "visible" } }),
-        }
-        : {
-            id: "cbl_pinLess45deg",
-            onClick: () => onCrewPinning(resource, "remove"),
-            children: jsxRuntime.jsx("span", { className: "cwi-pinned cwi-pin", style: { visibility: "visible" } }),
-        };
-    return jsxRuntime.jsx("button", { className: "cw-button-icon cw-icon-pin", ...buttonProps });
-};
-
-const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
-    const minutes = leftPx / minutesPerPx;
-    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
-    return datePlusMinutes;
-};
-
-const doubleClickOnResource = (props, resource) => {
-    if (props.scheduler_handleDblClickOnResourceInScheduler) {
-        props.scheduler_handleDblClickOnResourceInScheduler(resource);
-    }
-};
-
-let CblDragAndDrop$1 = class CblDragAndDrop {
-    fromId;
-    toId;
-    data;
-    droppedOnDate;
-    resizeFromStart;
-    resizeFromEnd;
-    isCtrlKey;
-    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
-        this.fromId = fromId;
-        this.toId = toId;
-        this.data = data;
-        this.droppedOnDate = droppedOnDate;
-        this.resizeFromStart = resizeFromStart;
-        this.resizeFromEnd = resizeFromEnd;
-        this.isCtrlKey = isCtrlKey;
-    }
-};
-
-const BIRTHDATE = 15;
-const NOT_WORKING = 16;
-const REST_TIME = 10;
-const MAX_FLIGHT_DUTY_PERIOD = 11;
-const DUTY_REGULATION = 20;
-const unHandleableEvents = [REST_TIME, MAX_FLIGHT_DUTY_PERIOD, NOT_WORKING, DUTY_REGULATION];
-const getEventStyle = (event, reslTime) => {
-    const baseStyle = {
-        left: event.leftPx,
-        width: event.width,
-        top: event.top,
-        overflow: "hidden",
-        zIndex: event.isFullHeight ? 4 : 5,
-    };
-    if (event.data.eventType === BIRTHDATE) {
-        return {
-            ...baseStyle,
-            height: event.isFullHeight ? "100%" : "auto",
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            pointerEvents: "none",
-            borderBottom: "solid 1px rgba(0, 0, 0, 0.4)",
-            backgroundColor: event.data.category.color || "orange",
-            display: "flex",
-            opacity: 0.3,
-            alignItems: "flex-end",
-        };
-    }
-    if ([REST_TIME, MAX_FLIGHT_DUTY_PERIOD, DUTY_REGULATION].includes(event.data.eventType)) {
-        return {
-            ...baseStyle,
-            zIndex: event.isFullHeight ? 4 : 6,
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            borderRadius: "0px",
-            backgroundColor: event.data.category.color || "grey",
-            opacity: 0.3,
-            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : "",
-        };
-    }
-    return {
-        ...baseStyle,
-        height: event.isFullHeight ? "100%" : "auto",
-        marginTop: event.isFullHeight ? -1 * event.top : 0,
-        borderRadius: reslTime <= 0.99 ? "3px" : "5px",
-        minWidth: reslTime <= 1.5 ? "5px" : "",
-        maxWidth: reslTime <= 1.5 ? "25px" : "",
-    };
-};
-const EventRender = ({ event, schedulerProps }) => {
-    const dateStart = new Date(event.data.start);
-    const dateEnd = new Date(event.data.end);
-    const reslTime = (dateEnd.getTime() - dateStart.getTime()) / 3600000;
-    const eventStyle = getEventStyle(event, reslTime);
-    const onClickEvent = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onRightClickEvent = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            if (props.scheduler_handleCblEventClickRight) {
-                props.scheduler_handleCblEventClickRight.call(props.parent, event, schedulerProps.id);
-            }
-        }
-    };
-    const safeHandleDragStart = (e, isLeft, isRight) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            handleDragStart(e, isLeft, isRight);
-        }
-    };
-    const handleDragStart = (e, isResizeFromStart, isResizeFromEnd) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
-                el.style.visibility = "hidden";
-            });
-            // We don't know in which case is necessary
-            if (e.target !== e.currentTarget) {
-                // e.preventDefault();
-                return;
-            }
-            const isResize = isResizeFromStart || isResizeFromEnd;
-            const isAllowed = !event.isReadOnly && (isResize ? event.isResizable : event.isDraggable);
-            if (!isAllowed) {
-                e.preventDefault();
-                return;
-            }
-            const cblDragNDrop = new CblDragAndDrop$1(schedulerProps.id, null, [event], null, isResizeFromStart, isResizeFromEnd);
-            if (!isResize) {
-                e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "link";
-            }
-            e.dataTransfer.setData("data", JSON.stringify(cblDragNDrop));
-        }
-    };
-    const handleDoubleClick = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.preventDefault();
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventDoubleClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onClickContextMenu = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            const props = schedulerProps;
-            if (props.scheduler_handleOnClickEventContextMenu) {
-                props.scheduler_handleOnClickEventContextMenu(e, event);
-            }
-        }
-    };
-    const renderBirthdayEvent = () => (jsxRuntime.jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [jsxRuntime.jsx("span", { className: "cwi-icons cwi-birthday", style: { visibility: "visible" } }), event.data.subject && jsxRuntime.jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
-    const renderRegularEvent = () => (jsxRuntime.jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
-            (event.selected === true ? "cblEventSelected " : "") +
-            (event.data.eventType === REST_TIME ||
-                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
-                event.data.eventType === DUTY_REGULATION
-                ? " cwellt_event_bhnd_appt "
-                : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: (e) => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents.includes(event.data.eventType) && (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, true, false), style: {
-                    position: "absolute",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    left: "0",
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                }, children: "\u200B" })), jsxRuntime.jsx(schedulerProps.cblEventComp, { cblEvent: event, handleOnClickEventContextMenu: onClickContextMenu }, event.id), schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents.includes(event.data.eventType) && (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, false, true), style: {
-                    position: "absolute",
-                    right: "0",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                    marginTop: "-25px",
-                }, children: "\u200B" }))] }, event.id));
-    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
-    return render;
-};
-
-const onDropEventToResource = (props, cblDragNDrop, resource) => {
-    props.scheduler_handleOnDropCblEventsOnResource.call(props.parent, cblDragNDrop, resource);
-};
-
-const isAllowedToMove = (data, resData, cblDragNDrop) => {
-    if (data?.eventType !== 1) {
-        return true;
-    }
-    const allowedMoves = [
-        { from: "acftsScheduler", to: "flightsPairingsScheduler" },
-        { from: "flightsScheduler", to: "crewAssignmentsScheduler" },
-        { from: "opstoolScheduler", to: "opstoolScheduler" },
-        { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
-        { from: "vacationsScheduler", to: "vacationsScheduler" }
-    ];
-    const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
-    if (crewControllAllowedMove) {
-        return true;
-    }
-    return data.Crew !== resData.Crewmember_Id;
-};
-
-const OnDrop = ({ e, resource, id, contentArea, state, schedulerProps }) => {
-    e.dataTransfer.dropEffect = "move";
-    const cblDragNDrop = JSON.parse(e.dataTransfer.getData("data"));
-    if (!cblDragNDrop.data || !cblDragNDrop.data[0]) {
-        return;
-    }
-    cblDragNDrop.toId = id;
-    const obj = cblDragNDrop.data[0];
-    cblDragNDrop.isCtrlKey = e.ctrlKey;
-    const isResizeEvent = cblDragNDrop.resizeFromStart === true || cblDragNDrop.resizeFromEnd === true;
-    if (isResizeEvent) {
-        // Resize
-        if (obj.data === undefined || obj.data.eventType === 1) {
-            return;
-        }
-        const _eventX = e.clientX;
-        const _caLeft = contentArea?.getBoundingClientRect()?.left ?? 0;
-        const leftPos = _eventX - _caLeft;
-        let droppedDate = addMinutesToDateFromPx(schedulerProps.startDate, leftPos, state.minutePx);
-        if (cblDragNDrop.resizeFromEnd === true) {
-            const eventStart = new Date(Date.parse(obj.start));
-            droppedDate = droppedDate < eventStart ? eventStart : droppedDate;
-        }
-        if (cblDragNDrop.resizeFromStart === true) {
-            const eventEnd = new Date(Date.parse(obj.end));
-            // 3 hours before is the minimun size in the backend
-            eventEnd.setHours(eventEnd.getHours() - 3);
-            droppedDate = droppedDate > eventEnd ? eventEnd : droppedDate;
-        }
-        cblDragNDrop.droppedOnDate = droppedDate;
-        schedulerProps.scheduler_handleCblEventResize?.call(schedulerProps.parent, cblDragNDrop);
-        return;
-    }
-    // Drag & Drop
-    if (!isAllowedToMove(obj.data, resource.data, cblDragNDrop)) {
-        return;
-    }
-    const d = e.clientX - (contentArea?.getBoundingClientRect()?.left ?? 0);
-    const date = new Date(schedulerProps.startDate.getTime() + (d / state.minutePx) * 60000);
-    cblDragNDrop.droppedOnDate = date;
-    onDropEventToResource(schedulerProps, cblDragNDrop, resource);
-};
-
-const onDragOver = (e) => {
-    if (e.ctrlKey === true) {
-        e.dataTransfer.dropEffect = "copy";
-    }
-    else {
-        e.dataTransfer.dropEffect = "link";
-    }
-    e.preventDefault();
-};
-
-const arePropsEqual = (prevProps, nextProps) => {
-    return prevProps.res.events === nextProps.res.events && prevProps.isInViewport === nextProps.isInViewport;
-};
-const ResourceRender = React.memo(({ res, schedulerProps, contentArea, state }) => {
-    return (jsxRuntime.jsx("div", { style: {
-            backgroundColor: "#F9F8F8",
-            height: res.maxTop,
-            width: "100%",
-            position: "relative",
-            borderBottom: "1px solid rgb(255,255,255)",
-        }, onDragOver: (e) => onDragOver(e), onDrop: (e) => {
-            OnDrop({
-                e,
-                resource: res,
-                id: schedulerProps.id,
-                contentArea,
-                state,
-                schedulerProps,
-            });
-        }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (jsxRuntime.jsx(EventRender, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
-}, arePropsEqual);
-
-const ResourceListRender = ({ resources, schedulerProps, state, contentArea, 
-// onClickContextMenu,
-crewAssignmentSchedulerContextMenu, }) => {
-    return (jsxRuntime.jsx(React.Fragment, { children: resources.map((r, _i) => (jsxRuntime.jsx(CwAnchoredMenu, { placement: "bottom", onContextMenu: (e) => {
-                // Dirty temporal solution to remove ANT design, this can be killed when this scheduler is deprecated
-                const leftPos = e.currentTarget.getBoundingClientRect().left -
-                    (contentArea?.getBoundingClientRect()?.left ?? 0) -
-                    window.scrollX;
-                const calculatedDatetime = addMinutesToDateFromPx(schedulerProps.startDate, leftPos, state.minutePx);
-                r.__contextMenuDatetime = calculatedDatetime;
-            }, options: crewAssignmentSchedulerContextMenu?.map(m => ({
-                key: m.key,
-                label: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: m.icon, style: { color: m.color } }), jsxRuntime.jsx("span", { children: m.text })] }))
-            })) ?? [], onSelect: (key) => {
-                const datetime = r.__contextMenuDatetime ?? new Date();
-                if (schedulerProps.scheduler_handleOnClickContextMenuResource) {
-                    schedulerProps.scheduler_handleOnClickContextMenuResource(datetime, r, key, schedulerProps.id);
-                }
-            }, children: jsxRuntime.jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: jsxRuntime.jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
-};
-
-const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsxRuntime.jsx(CwTooltipNew, { content: toolTipTitle, position: "top", children: jsxRuntime.jsx("div", { id: id, style: {
-                borderLeft: `${pixels}px solid ${color}`,
-                marginLeft: marginLeft,
-                width: "0px",
-                height: height,
-                position: "absolute",
-                zIndex: zIndex,
-            } }) }));
-};
-
-const SchedulerContentArea = ({ now, showTimeline, timeLineLeftPx, timeSeparatorLeftPx, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu, }) => {
-    return (jsxRuntime.jsxs("td", { className: "contentArea", style: { width: "100%", overflow: "hidden", position: "relative" }, ref: (reference) => {
-            if (reference) {
-                setContentArea(reference);
-            }
-        }, children: [showTimeline && (jsxRuntime.jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: Temporal.PlainTime.from({
-                    hour: now.getHours(),
-                    minute: now.getMinutes(),
-                }).toString({ smallestUnit: "minute" }) })), timeSeparatorLeftPx.map((pixels) => {
-                return jsxRuntime.jsx(TimeLine$1, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
-            }), jsxRuntime.jsx("span", { onClick: () => {
-                    if (onEmptyClick) {
-                        onEmptyClick(scheduler.props.id);
-                    }
-                }, children: jsxRuntime.jsx(ResourceListRender, { resources: resources, state: scheduler.state, schedulerProps: scheduler.props, contentArea: scheduler.contentArea, onClickContextMenu: onClickContextMenu, crewAssignmentSchedulerContextMenu: contextMenuContents }) })] }));
-};
-
-const daysBetweenTwoDates = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    let diffDays = 0;
-    const startOffset = Math.abs(date1.getTimezoneOffset());
-    const endOffset = Math.abs(date2.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    if (startOffset > endOffset) {
-        diffDays = Math.floor(diff / (1000 * 3600 * 24));
-    }
-    else {
-        diffDays = Math.ceil(diff / (1000 * 3600 * 24));
-    }
-    return diffDays;
-};
-
-const calculateDivisionType = (start, end) => {
-    const diffDays = daysBetweenTwoDates(start, end);
-    if (diffDays <= 15) {
-        return "d";
-    }
-    else if (diffDays <= 30) {
-        return "w";
-    }
-    else {
-        return "m";
-    }
-};
-
-const getMonthHeaderData = (dates, maxWidth) => {
-    if (dates.length === 0)
-        return [];
-    const dayWidth = maxWidth / dates.length;
-    const ranges = getMonthRanges(dates);
-    return ranges.map((range) => {
-        return {
-            monthFormatted: range.start.getMonth() + 1 + "." + range.start.getFullYear(),
-            width: dayWidth * range.daysLong,
-        };
-    });
-};
-const getMonthRanges = (dates) => {
-    const firstDay = dates[0];
-    const lastDay = dates[dates.length - 1];
-    let currentDate = new Date(firstDay);
-    const ranges = [];
-    while (currentDate <= lastDay) {
-        const rangeStart = new Date(currentDate);
-        let rangeEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-        if (rangeEnd >= lastDay) {
-            rangeEnd = lastDay;
-        }
-        ranges.push({
-            start: rangeStart,
-            daysLong: getDaysBetweenDates(rangeStart, rangeEnd),
-        });
-        currentDate = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth() + 1, 1);
-    }
-    return ranges;
-};
-const getDaysBetweenDates = (startDate, endDate) => {
-    const timeDifference = endDate.getTime() - startDate.getTime();
-    return Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
-};
-
-const getWeekHeaderDataFromWeekRange = (weekRange, maxWidth, dateFormatter) => weekRange.map(week => {
-    const numberOfDaysInScheduler = weekRange
-        .flatMap(element => {
-        return element.days;
-    })
-        .reduce((el1, el2) => {
-        return el1 + el2;
-    });
-    return {
-        formattedString: getStringForWeekRange(week, dateFormatter),
-        width: getWidthForWeekRange(maxWidth, week.days, numberOfDaysInScheduler)
-    };
-});
-const getStringForWeekRange = (weekRange, dateFormatter) => weekRange.days == 1
-    ? dateFormatter(weekRange.start)
-    : `${dateFormatter(weekRange.start)} - ${dateFormatter(weekRange.end)}`;
-const getWidthForWeekRange = (maxWidth, weekDays, monthDays) => {
-    const dayWidth = maxWidth / monthDays;
-    return dayWidth * weekDays;
-};
-
-// stringRange: `${formatter(date)} - ${formatter(end)}`,
-const listOfDatesToWeekRangeList = (dates) => {
-    if (dates.length === 0) {
-        return [];
-    }
-    const datesToReturn = [];
-    dates.forEach((date, index) => {
-        const dayOfWeek = date.getDay();
-        const isFirstDay = index === 0;
-        const isLastDay = index === dates.length - 1;
-        const isSunday = dayOfWeek === 0;
-        const isMonday = dayOfWeek === 1;
-        if (isFirstDay && !isSunday) {
-            datesToReturn.push(createWeekRange(date, 8 - dayOfWeek));
-            return;
-        }
-        if (isLastDay && !isSunday) {
-            if (!isMonday) {
-                datesToReturn.pop();
-            }
-            const firstOfWeek = getFirstDayOfWeek(date);
-            datesToReturn.push(createWeekRange(firstOfWeek, dayOfWeek));
-            return;
-        }
-        if (isMonday) {
-            datesToReturn.push(createWeekRange(date, 7));
-            return;
-        }
-        // this is because sunday is 0
-        if (isFirstDay && isSunday) {
-            datesToReturn.push(createWeekRange(date, 1));
-            return;
-        }
-    });
-    return datesToReturn;
-};
-const createWeekRange = (start, days) => {
-    const end = new Date(start);
-    end.setDate(end.getDate() + days - 1);
-    return {
-        days,
-        start,
-        end,
-        isShortWeek: days < 7
-    };
-};
-const getFirstDayOfWeek = (date) => {
-    const currentDate = new Date(date);
-    const dayOfWeek = currentDate.getDay();
-    // dayOfWeek 0 == (Sunday)
-    const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    // Set the date to the first day of the week
-    currentDate.setDate(currentDate.getDate() - diffToMonday);
-    return currentDate;
-};
-
-const DayHeader = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", children: text }) }));
-};
-
-const MonthHeader = ({ index, text, width, headerType }) => {
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { children: text }) }));
-};
-
-const WeekHeader = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", style: { whiteSpace: "nowrap" }, children: text }) }));
-};
-
-const DaysHeader = ({ days, divisionType, maxWidth, headerType }) => {
-    let headerToDraw = [];
-    const filteredDays = days.filter((date) => {
-        return date.getHours() === 0;
-    });
-    const dateFormatter = (date) => {
-        return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
-    };
-    switch (divisionType) {
-        case "d":
-            {
-                headerToDraw = filteredDays.map((date, index) => {
-                    return (jsxRuntime.jsx(DayHeader, { text: dateFormatter(date), index: index, width: maxWidth / filteredDays.length, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "w":
-            {
-                const weekRanges = listOfDatesToWeekRangeList(filteredDays);
-                headerToDraw = getWeekHeaderDataFromWeekRange(weekRanges, maxWidth, dateFormatter).map((week, index) => {
-                    return (jsxRuntime.jsx(WeekHeader, { index: index, text: week.formattedString, width: week.width, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "m":
-            {
-                const monthData = getMonthHeaderData(filteredDays, maxWidth);
-                headerToDraw = monthData.map(({ monthFormatted, width }, index) => (jsxRuntime.jsx(MonthHeader, { index: index, text: monthFormatted, width: width, headerType: headerType }, index)));
-            }
-            break;
-    }
-    return jsxRuntime.jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
-};
-
-function formatHHmm(date) {
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const zdt = Temporal.Instant.fromEpochMilliseconds(date.getTime()).toZonedDateTimeISO(timeZone);
-    return `${zdt.hour.toString().padStart(2, "0")}:${zdt.minute.toString().padStart(2, "0")}`;
-}
-const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHeader) => {
-    let showDate = "";
-    switch (calculatedDivType) {
-        case "d":
-            switch (calculatedDivision) {
-                case 8:
-                    showDate =
-                        timeHeader.getHours() === 0 ||
-                            timeHeader.getHours() === 3 ||
-                            timeHeader.getHours() === 6 ||
-                            timeHeader.getHours() === 9 ||
-                            timeHeader.getHours() === 12 ||
-                            timeHeader.getHours() === 15 ||
-                            timeHeader.getHours() === 18 ||
-                            timeHeader.getHours() === 21
-                            ? formatHHmm(timeHeader)
-                            : "";
-                    break;
-                case 3:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
-                            ? formatHHmm(timeHeader)
-                            : "";
-                    break;
-                case 2:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? formatHHmm(timeHeader) : "";
-                    break;
-            }
-            break;
-        case "m":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-        case "w":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-    }
-    return {
-        text: showDate,
-        isWeekend: timeHeader.getDay() === 6 || timeHeader.getDay() === 0,
-    };
-};
-
-const calculateDivisions = (start, end) => {
-    const diffDays = daysBetweenTwoDates(start, end);
-    if (diffDays <= 3) {
-        return 8;
-    }
-    else if (diffDays < 8) {
-        return 3;
-    }
-    else if (diffDays <= 15) {
-        return 2;
-    }
-    else {
-        return 1;
-    }
-};
-
-const TimeHeader = ({ isWeekend, index, text, width, header }) => {
-    if (text === "") {
-        return;
-    }
-    const commonStyles = {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "left",
-        fontSize: "10px",
-        width: width,
-        maxWidth: width,
-        height: "30px",
-        borderLeft: "1px solid white",
-        background: isWeekend ? "#cbc9c9" : "",
-        color: "#000000d9",
-        fontWeight: 700,
-    };
-    return (jsxRuntime.jsx("td", { style: commonStyles, id: `${header}Time${index}`, children: jsxRuntime.jsx("span", { style: { paddingLeft: "8px" }, children: text }) }, `t${index}`));
-};
-
-const TimeHeaderRow = ({ timeHeaders, startDate, endDate, maxWidth, header }) => {
-    const calculatedDivision = calculateDivisions(startDate, endDate);
-    const calculatedDivType = calculateDivisionType(startDate, endDate);
-    const formattedHeaders = timeHeaders.map((th) => {
-        return getFormattedTimeForHeader(calculatedDivType, calculatedDivision, th);
-    });
-    const filteredHeaders = formattedHeaders.filter((element) => element.text !== "");
-    return (jsxRuntime.jsx("tr", { className: "cwelltSchRowTime", style: { height: "30px" }, children: filteredHeaders.map(({ text, isWeekend }, index) => {
-            return (jsxRuntime.jsx(TimeHeader, { isWeekend: isWeekend, index: index, text: text, width: maxWidth / filteredHeaders.length, header: header }, index));
-        }) }));
-};
-
-const SchedulerTimeLine = ({ maxPx, hoursList, startDate, endDate, pxPerHour, headerName, }) => {
-    return (jsxRuntime.jsx("table", { className: "content-area cwelltSchTable", style: { width: maxPx }, children: jsxRuntime.jsxs("tbody", { style: { width: "100%", borderSpacing: 0 }, className: "content-area cwelltSchTbody", children: [jsxRuntime.jsx(DaysHeader, { days: hoursList, divisionType: calculateDivisionType(startDate, endDate), maxWidth: pxPerHour * hoursList.length, headerType: headerName ?? "schedulerDateHeader" }), jsxRuntime.jsx(TimeHeaderRow, { timeHeaders: hoursList, startDate: startDate, endDate: endDate, maxWidth: pxPerHour * hoursList.length, header: headerName ?? "schedulerTimeHeader" })] }) }));
-};
-
-const SchedulerHeader$1 = ({ timelineProps, descriptionColumn }) => {
-    const { maxPx, hoursList, startDate, endDate, pxPerHour, headerName } = timelineProps;
-    return (jsxRuntime.jsx("thead", { className: "cwellt_fc_header_scheduler", style: { position: "sticky", zIndex: 9 }, children: jsxRuntime.jsxs("tr", { className: "cwellt_fc_header_row", children: [jsxRuntime.jsxs("td", { className: "border", style: {
-                        position: "sticky",
-                        top: 0,
-                        backgroundColor: "white",
-                        width: "100px",
-                    }, children: [jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                width: "150px",
-                            }, children: jsxRuntime.jsx("label", { children: headerName }) }), jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                background: "rgba(0, 0, 0, 0.04)",
-                            }, children: jsxRuntime.jsx("span", { children: descriptionColumn }) })] }), jsxRuntime.jsx("td", { style: {
-                        position: "sticky",
-                        top: 0,
-                        zIndex: 6,
-                        backgroundColor: "white",
-                    }, children: jsxRuntime.jsx(SchedulerTimeLine, { maxPx: maxPx, hoursList: hoursList, pxPerHour: pxPerHour, startDate: startDate, endDate: endDate, headerName: headerName }) })] }) }));
-};
-
-const daysBetweenTwoDatesIncludingBoth = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    const diffDays = diff / (1000 * 3600 * 24);
-    return diffDays;
-};
-
-const getUtcToday = () => {
-    const now = new Date();
-    const userTimezoneOffset = now.getTimezoneOffset() * 60000;
-    const nowUtc = new Date(now.getTime() + userTimezoneOffset);
-    return nowUtc;
-};
-
-const filterEvents = (events, start, end, id, module = undefined) => {
-    const datesCollide = (event) => event.start <= end && event.end >= start;
-    let eventsFiltered = events.filter(event => datesCollide(event));
-    if (id !== "flightWatchScheduler") {
-        eventsFiltered = sortByDate(eventsFiltered);
-    }
-    if (id !== "crewAssignmentsScheduler" && id !== "vacationsScheduler") {
-        return eventsFiltered;
-    }
-    eventsFiltered = setNotFullHeightEventsFirst(eventsFiltered);
-    if (module === "CrewControl") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "Crew_Id");
-    }
-    if (module === "CrewScheduling") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "AssignmentID");
-    }
-    if (module === "CrewSchedulingVacations") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "ID");
-    }
-    return eventsFiltered;
-};
-const sortByDate = (events) => events.sort((a, b) => +new Date(a.start) - +new Date(b.start));
-const removeDuplicated = (events, key) => {
-    return events.filter((obj, index, self) => index === self.findIndex(o => o.data[key] === obj.data[key] && o.data.subject === obj.data.subject));
-};
-const setNotFullHeightEventsFirst = (events) => {
-    const notFullHeight = [];
-    const isFullHeight = [];
-    events.forEach(element => {
-        element.isFullHeight ? notFullHeight.push(element) : isFullHeight.push(element);
-    });
-    return notFullHeight.concat(isFullHeight);
-};
-
-const compareStrings = (str1, str2) => {
-    if (str1 > str2)
-        return 1;
-    if (str1 < str2)
-        return -1;
-    return 0;
-};
-
-const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate, scheduleName) => {
-    if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
-        resourceName === "Employees") {
-        resources = resources.filter(c => (c.data.Eintritt === null || (new Date(c.data.Eintritt) <= endDate)) && (c.data.Austritt === null || (new Date(c.data.Austritt) >= startDate)));
-    }
-    if (scheduleName === "crewPinnedScheduler" || (module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
-        const sortKey = (groupByFunction || scheduleName === "crewPinnedScheduler") ? "mainFunction" : "C3_LC";
-        resources = resources.sort((a, b) => compareStrings(a.data[sortKey], b.data[sortKey]));
-    }
-    return resources;
-};
-
-const heightScheduler = (resources, visibleRows, isPinnerScheduler) => {
-    if (resources.length <= 0) {
-        return 100;
-    }
-    const realVisibleRows = visibleRows > resources.length ? resources.length : visibleRows;
-    const rowsHeight = resources.slice(0, realVisibleRows).map((row) => {
-        return row.maxTop;
-    });
-    const height = rowsHeight.reduce((sum, row) => {
-        return sum + row;
-    }, 0);
-    const headerHeight = isPinnerScheduler ? 0 : 60;
-    return height + headerHeight;
-};
-
-const getLeftPixels = (eventStart, scheduleStart, dayPx) => {
-    if (scheduleStart >= eventStart)
-        return 0;
-    return daysBetweenTwoDatesIncludingBoth(scheduleStart, eventStart) * dayPx;
-};
-const getEventWithSize = (event, schedulerStart, dayPx) => {
-    const eventStartBeforeScheduleStart = event.start.getTime() < schedulerStart.getTime();
-    const lengthOfEvent = daysBetweenTwoDatesIncludingBoth(event.start, event.end);
-    const daysUntilSchedulerStart = daysBetweenTwoDatesIncludingBoth(event.start, schedulerStart);
-    const daysLong = eventStartBeforeScheduleStart ? lengthOfEvent - daysUntilSchedulerStart : lengthOfEvent;
-    // we want minimum of 8 px
-    const eventMinSize = 8;
-    const newEvent = {
-        ...event,
-        leftPx: getLeftPixels(event.start, schedulerStart, dayPx),
-        width: Math.max(daysLong * dayPx, eventMinSize),
-    };
-    return newEvent;
-};
-
-const checkIfSlotAvailable = (events, event) => {
-    if (events.length == 0)
-        return true;
-    const collide = events.some(existent => {
-        return !(existent.end <= event.start || event.end <= existent.start) && !existent.isFullHeight;
-    });
-    return !collide;
-};
-
-const getEventsInInnerRows = (res, eventHeight, dayPx, start) => {
-    let maxTop = 0;
-    const tops = [];
-    tops[0] = new Array();
-    res.events
-        .map((e) => {
-        return getEventWithSize(e, start, dayPx);
-    })
-        .forEach((event, i) => {
-        if (i === 0 || event.isFullHeight) {
-            event.top = 0;
-            tops[0].push(event);
-        }
-        else {
-            let found = false;
-            for (let j = 0; j < tops.length && found === false; j++) {
-                found = checkIfSlotAvailable(tops[j], event);
-                if (found === true || event.isFullHeight) {
-                    event.top = j * eventHeight;
-                    tops[j].push(event);
-                    break;
-                }
-            }
-            if (found === false && !event.isFullHeight) {
-                maxTop++;
-                tops[maxTop] = new Array();
-                event.top = maxTop * eventHeight;
-                tops[maxTop].push(event);
-            }
-            else {
-                // This is for flightwatch
-                if (found === true && event.data.order === 2 && maxTop < 1) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    event.top = maxTop * eventHeight;
-                    tops[maxTop].push(event);
-                    maxTop--;
-                }
-            }
-        }
-    });
-    return tops;
-};
-
-const getTimeHeaders = (startDate, endDate) => {
-    const dateArray = new Array();
-    const currentDate = new Date(startDate);
-    const startOffset = Math.abs(startDate.getTimezoneOffset());
-    const endOffset = Math.abs(endDate.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    const offsetSummerWinter = startOffset < endOffset;
-    if (offsetSummerWinter === true) {
-        while (currentDate < endDate) {
-            if (dateArray.length > 0) {
-                const lastPosition = dateArray[dateArray.length - 1];
-                const differenceHours = currentDate.getHours() - lastPosition.getHours();
-                if (differenceHours === 1 || differenceHours < 0) {
-                    dateArray.push(new Date(currentDate));
-                }
-                else if (differenceHours > 1) {
-                    dateArray.push(new Date(currentDate.getHours() - 1));
-                    dateArray.push(new Date(currentDate));
-                }
-            }
-            else {
-                dateArray.push(new Date(currentDate));
-            }
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    else {
-        while (currentDate < endDate) {
-            dateArray.push(new Date(currentDate));
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    return dateArray;
-};
-
-class CwScheduler extends React.Component {
-    contentArea;
-    calculateMaxPx = () => {
-        const mainElement = document.body;
-        const mainRect = mainElement.getBoundingClientRect();
-        return Math.floor(mainRect.width - 190);
-    };
-    constructor(props) {
-        super(props);
-        const maxPx = this.calculateMaxPx();
-        const timeHeaders = getTimeHeaders(props.startDate, props.endDate);
-        const dayPx = maxPx / Math.floor(daysBetweenTwoDates(props.startDate, props.endDate));
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        window?.addEventListener("resize", this.handleResize);
-        const divisions = calculateDivisions(this.props.startDate, this.props.endDate);
-        const divisionsLeftPx = timeHeaders
-            .filter((_, index) => {
-            return index != 0 && index % (24 / divisions) == 0;
-        })
-            .map((date) => {
-            const daysDiff = daysBetweenTwoDatesIncludingBoth(date, props.startDate);
-            const pixels = daysDiff * 24 * hourPx;
-            return pixels;
-        });
-        this.state = {
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            divisionsLeftPx: divisionsLeftPx,
-            eventHeight: 30,
-            resources: props.resources,
-            lineStyle: 0,
-            nowUtc: getUtcToday(),
-            division: divisions,
-            divisionType: "",
-            pinnedResources: props.pinnedResources ? props.pinnedResources : [],
-            selectedEvents: [],
-            showConsoleLogs: false, // Change to false to not show the console.log(...)
-        };
-    }
-    handleResize = () => {
-        const maxPx = this.calculateMaxPx();
-        const days = Math.floor(daysBetweenTwoDates(this.props.startDate, this.props.endDate));
-        const dayPx = maxPx / days;
-        const hourPx = dayPx / 24;
-        const updated = { ...this.state, maxPx: maxPx, hourPx: hourPx, dayPx: dayPx };
-        this.setState(updated);
-    };
-    objectsEqual = (o1, o2) => {
-        Object.keys(o1).length === Object.keys(o2).length && Object.keys(o1).every((p) => o1[p] === o2[p]);
-    };
-    objectsEqualDeep = (o1, o2) => typeof o1 === "object" && Object.keys(o1).length > 0
-        ? Object.keys(o1).length === Object.keys(o2).length &&
-            Object.keys(o1).every((p) => this.objectsEqual(o1[p], o2[p]))
-        : o1 === o2;
-    arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => this.objectsEqualDeep(o, a2[idx]));
-    componentWillReceiveProps(_nextProps) {
-        if (this.state.showConsoleLogs) {
-            console.log("Schedule - componentWillReceiveProps, start: ", new Date());
-            console.log("Schedule - componentWillReceiveProps - has changes, start: ", new Date());
-        }
-        const dateChange = _nextProps.startDate.toISOString() !== this.props.startDate.toISOString() ||
-            _nextProps.endDate.toISOString() !== this.props.endDate.toISOString();
-        if (dateChange) {
-            const startDate = _nextProps.startDate;
-            const endDate = _nextProps.endDate;
-            const maxPx = this.calculateMaxPx();
-            const timeHeaders = getTimeHeaders(startDate, endDate);
-            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
-            const dayPx = maxPx / days;
-            const hourPx = dayPx / 24;
-            const minutePx = dayPx / 1440;
-            const now = getUtcToday();
-            const isInDateRange = now >= startDate && now <= endDate && this.contentArea !== undefined;
-            const lineStyle = isInDateRange ? daysBetweenTwoDatesIncludingBoth(startDate, now) * dayPx : 0;
-            const divisions = calculateDivisions(startDate, endDate);
-            const divisionsLeftPx = timeHeaders
-                .filter((_, index) => {
-                return index != 0 && index % (24 / divisions) == 0;
-            })
-                .map((date) => {
-                const daysDiff = daysBetweenTwoDatesIncludingBoth(date, startDate);
-                const pixels = daysDiff * dayPx;
-                return pixels;
-            });
-            this.setState({
-                maxPx: maxPx, // window.screen.width * 0.9,
-                dayPx: dayPx,
-                hourPx: hourPx,
-                minutePx: minutePx,
-                timeHeaders: timeHeaders,
-                divisionsLeftPx: divisionsLeftPx,
-                resources: this.getNewResources(_nextProps, dayPx),
-                lineStyle: lineStyle,
-                nowUtc: now,
-                division: divisions,
-                divisionType: "",
-                pinnedResources: this.props.pinnedResources ?? [],
-            });
-            if (this.state.showConsoleLogs) {
-                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", new Date());
-                console.log("Schedule - componentWillReceiveProps, end: ", new Date());
-            }
-            return;
-        }
-        const areSameEvents = this.arraysEqual(_nextProps.events, this.props.events);
-        const areSameRows = this.arraysEqual(_nextProps.resources, this.props.resources);
-        if (!areSameEvents || !areSameRows) {
-            const startDate = _nextProps.startDate;
-            const endDate = _nextProps.endDate;
-            const maxPx = this.calculateMaxPx();
-            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
-            const dayPx = maxPx / days;
-            this.setState({
-                resources: this.getNewResources(_nextProps, dayPx),
-            });
-            return;
-        }
-    }
-    getNewResources = (_nextProps, dayPx) => {
-        const mappedEvents = filterEvents(_nextProps.events, _nextProps.startDate, _nextProps.endDate, this.props.id, this.props.module)
-            .filter((event) => {
-            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
-            return !outOfRange;
-        });
-        const resources = filterResources(this.props.module, this.props.resourceName, _nextProps.resources, this.props.groupByFunction, _nextProps.endDate, _nextProps.startDate, this.props.id);
-        const newResources = resources
-            .map((resource) => {
-            return {
-                ...resource,
-                events: mappedEvents.filter((event) => event.resourceId === resource.id),
-            };
-        })
-            .map((resource) => {
-            const tops = getEventsInInnerRows(resource, this.state.eventHeight, dayPx, _nextProps.startDate);
-            const height = tops.length === 0 ? this.state.eventHeight : tops.length * this.state.eventHeight;
-            let flatMapEvents = [];
-            for (let h = 0; h < tops.length; h++) {
-                flatMapEvents = flatMapEvents.concat(tops[h]);
-            }
-            return {
-                ...resource,
-                maxTop: height,
-                events: flatMapEvents,
-            };
-        });
-        return newResources;
-    };
-    handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
-        let datetime = new Date();
-        const _ca = this.contentArea;
-        if (_clickEvent.domEvent.currentTarget !== undefined) {
-            const leftPos = _clickEvent.domEvent.currentTarget.parentElement.getBoundingClientRect().left -
-                (_ca?.getBoundingClientRect()?.left ?? 0) -
-                window.scrollX;
-            datetime = addMinutesToDateFromPx(this.props.startDate, leftPos, this.state.minutePx);
-        }
-        if (this.props.scheduler_handleOnClickContextMenuResource) {
-            this.props.scheduler_handleOnClickContextMenuResource(datetime, _resource, _clickEvent.key, this.props.id);
-        }
-    };
-    handleCrewPinning = (resource, text) => {
-        if (this.props.scheduler_handlePinned) {
-            this.props.scheduler_handlePinned.call(this.props.parent, resource.id, text, this.props.id);
-        }
-    };
-    render() {
-        const isInDateRange = this.state.nowUtc >= this.props.startDate &&
-            this.state.nowUtc <= this.props.endDate &&
-            this.contentArea !== undefined;
-        const showTimeline = isInDateRange && this.state.lineStyle < this.state.maxPx;
-        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: {
-                maxHeight: isPinnedTable ? "auto" : schedulerHeight,
-            }, 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,
-                            pxPerHour: this.state.hourPx,
-                            startDate: this.props.startDate,
-                            endDate: this.props.endDate,
-                            headerName: this.props.resourceName,
-                        }, descriptionColumn: this.props.descriptionColumn })), jsxRuntime.jsx("tbody", { style: {
-                            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);
-                                        }
-                                    }, ResourceTitleComponent: this.props.resourceComp }), jsxRuntime.jsx("td", { className: "dividerArea" }), jsxRuntime.jsx(SchedulerContentArea, { now: this.state.nowUtc, showTimeline: showTimeline, timeSeparatorLeftPx: this.state.divisionsLeftPx, timeLineLeftPx: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: (n) => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
-    }
-}
-
 function dateFromPercentage(startDate, visibleDays, percentage) {
     const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime());
     const spanMs = Math.round(visibleDays) * 24 * 60 * 60 * 1000;
@@ -9726,7 +8819,7 @@ class OnClickContextMenu {
     }
 }
 
-var styles$3 = {"scheduler-header-divisions":"scheduler-header-module__scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module__scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module__scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module__scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module__scheduler-dates__O7ePQ","current-day":"scheduler-header-module__current-day__FpHiv","scheduler-hours":"scheduler-header-module__scheduler-hours__ZDCVj"};
+var styles$3 = {"scheduler-header":"scheduler-header-module__scheduler-header__Y7SNV","scheduler-header-divisions":"scheduler-header-module__scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module__scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module__scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module__scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module__scheduler-dates__O7ePQ","current-day":"scheduler-header-module__current-day__FpHiv","scheduler-hours":"scheduler-header-module__scheduler-hours__ZDCVj"};
 
 const getNow$1 = (isUtc) => {
     let now = new Date();
@@ -9792,7 +8885,7 @@ const HeaderTitle = ({ title, dividerText, width }) => {
 const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
     const topWidth = (100 / visibleDays);
     const { title, classification } = content;
-    return (jsxRuntime.jsxs("div", { style: { display: "flex" }, children: [jsxRuntime.jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxRuntime.jsxs("div", { className: styles$3["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
+    return (jsxRuntime.jsxs("div", { className: styles$3["scheduler-header"], children: [jsxRuntime.jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxRuntime.jsxs("div", { className: styles$3["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
                     e.preventDefault();
                     const clickPercentage = getPercentageFromMouseEvent(e);
                     const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
@@ -10660,325 +9753,6 @@ const Scheduler = (props) => {
 class UiEvent {
 }
 
-let topsCounter = 0;
-class CwSuperScheduler extends React__namespace.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            topsCalculated: 0,
-            height: 50,
-            dataConfig: this.props.dataConfig ? this.props.dataConfig : undefined,
-            pinnedResources: []
-        };
-    }
-    componentDidUpdate(_previousProps, _previousState) {
-        if (this.props.pinnedResources !== _previousProps.pinnedResources) {
-            let returnedTops = 0;
-            let returnedHeight = 50;
-            let data;
-            if (this.props.pinnedResources) {
-                const pinned = [...new Set(this.props.pinnedResources)];
-                for (let i = 0; i < pinned.length; i++) {
-                    data = this.returnDynamicHeight(pinned[i], returnedTops);
-                    returnedTops = data.topsCalculated;
-                    returnedHeight = data.height;
-                }
-                this.setState({
-                    topsCalculated: returnedTops,
-                    height: returnedHeight !== 50 ? 80 + returnedHeight : 50,
-                    pinnedResources: this.props.pinnedResources
-                });
-            }
-        }
-    }
-    scheduler_handleCblEventClick = (cblEvent, schedulerId) => {
-        this.props.scheduler_handleCblEventClick(cblEvent, schedulerId);
-    };
-    scheduler_handleCblEventClickRight = (cblEvent, schedulerId) => {
-        if (this.props.scheduler_handleCblEventClickRight) {
-            this.props.scheduler_handleCblEventClickRight(cblEvent, schedulerId);
-        }
-    };
-    scheduler_handleCblEventDoubleClick = (cblEvent, schedulerId) => {
-        this.props.scheduler_handleCblEventDoubleClick(cblEvent, schedulerId);
-    };
-    scheduler_handlePinnedClickMultipleIds = (resIds, schedulerId, requestString) => {
-        this.props.scheduler_handlePinningOfResources(resIds, "", schedulerId, requestString);
-    };
-    scheduler_handlePinnedClick = (resId, text, schedulerId) => {
-        const array = new Array();
-        array.push(resId);
-        this.props.scheduler_handlePinningOfResources(array, text, schedulerId, "resources");
-    };
-    returnDynamicHeight(pinned, topsCalculated) {
-        let height = 100;
-        let maxTop = 0;
-        const eventHeight = 30;
-        const tops = new Array();
-        tops[0] = new Array();
-        const diffDates = this.props.endDate.getTime() - this.props.startDate.getTime();
-        const diffDays = diffDates / (1000 * 3600 * 24);
-        const dateToFilter = new Date(this.props.startDate.getTime());
-        dateToFilter.setDate(dateToFilter.getDate() + diffDays);
-        let events = this.props.pinnedEvents !== undefined ? this.props.pinnedEvents : new Array();
-        events = events
-            .filter(x => pinned === x.resourceId && x.start >= this.props.startDate && x.start <= dateToFilter)
-            .sort((a, b) => {
-            return +new Date(a.start) - +new Date(b.start);
-        });
-        for (let i = 0; i < events.length; i++) {
-            const event = events[i];
-            if (i === 0 || event.isFullHeight) {
-                tops[0].push(event);
-            }
-            else {
-                let found = false;
-                for (let j = 0; j < tops.length && found === false; j++) {
-                    found = this.checkIfSlotAvailable(tops[j], event);
-                    if (found === true || event.isFullHeight) {
-                        tops[j].push(event);
-                    }
-                }
-                if (found === false) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    tops[maxTop].push(event);
-                }
-            }
-        }
-        for (let h = 0; h < tops.length; h++) {
-            if (tops.length === 0) {
-                height = 100;
-            }
-            else {
-                height = (topsCalculated + tops.length) * eventHeight;
-            }
-        }
-        topsCounter = topsCounter + tops.length;
-        return {
-            topsCalculated: topsCalculated + tops.length,
-            height: height
-        };
-    }
-    checkIfSlotAvailable(array, event) {
-        let found = false;
-        if (array[array.length - 1].end <= event.start || array[array.length - 1].isFullHeight) {
-            found = true;
-        }
-        return found;
-    }
-    handleOnClickContextMenuResource = (date, resource, key, schedulerId) => {
-        let url = "";
-        switch (key) {
-            case "showReserves": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfReserve";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfReserve";
-                }
-                const requestOptions = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.endDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Reserves");
-                        }
-                        else {
-                            alert("No Reserves");
-                        }
-                    });
-                }
-                break;
-            }
-            case "showStandbys": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfStandby";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfStandby";
-                }
-                const requestOptions2 = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.startDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions2)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Standbys");
-                        }
-                        else {
-                            alert("No Standbys");
-                        }
-                    });
-                }
-                break;
-            }
-            case "showAvailables": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfAvailables";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfAvailables";
-                }
-                const requestOptions3 = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.startDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions3)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Availables");
-                        }
-                        else {
-                            alert("No Availables");
-                        }
-                    });
-                }
-                break;
-            }
-            default: {
-                if (this.props.scheduler_handleOnClickContextMenuResource) {
-                    this.props.scheduler_handleOnClickContextMenuResource(date, resource, key);
-                }
-                break;
-            }
-        }
-    };
-    dateUTCString(date) {
-        if (date instanceof Date) {
-            if (date.getFullYear() > 1901)
-                return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes())).toISOString();
-        }
-        return date;
-    }
-    render() {
-        const havePinnedResources = this.state.pinnedResources?.length > 0;
-        const firstSchedulerResources = havePinnedResources
-            ? this.props.resourcesToPin.filter(x => this.state.pinnedResources.includes(x.id))
-            : new Array();
-        const secondSchedulerResources = this.props.resources.filter(x => !this.state.pinnedResources.includes(x.id));
-        const pinnedEvents = this.props.pinnedEvents !== undefined
-            ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
-            : new Array();
-        const notPinnedEvents = this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId));
-        return (jsxRuntime.jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsxRuntime.jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsxRuntime.jsx("div", { style: { padding: "0.5rem" }, children: jsxRuntime.jsx(CwButton, { text: "Clear", onClick: () => {
-                            this.props.scheduler_handleClearPinnedOnParent();
-                        } }) })), jsxRuntime.jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: notPinnedEvents, resources: secondSchedulerResources, height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
-    }
-}
-class CblDragAndDrop {
-    fromId;
-    toId;
-    data;
-    droppedOnDate;
-    resizeFromStart;
-    resizeFromEnd;
-    isCtrlKey;
-    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
-        this.fromId = fromId;
-        this.toId = toId;
-        this.data = data;
-        this.droppedOnDate = droppedOnDate;
-        this.resizeFromStart = resizeFromStart;
-        this.resizeFromEnd = resizeFromEnd;
-        this.isCtrlKey = isCtrlKey;
-    }
-}
-
-const getGUID = () => {
-    return generateSegment(false) + generateSegment(true) + generateSegment(true) + generateSegment(false);
-};
-const generateSegment = (includeHyphens) => {
-    const p = (Math.random().toString(16) + "000000000").substring(2, 10);
-    return includeHyphens ? "-" + p.substring(0, 4) + "-" + p.substring(4, 8) : p;
-};
-
-class cblEvent {
-    id = "";
-    start;
-    end;
-    resourceId;
-    selected = false;
-    top = 0;
-    leftPx = 0;
-    rightPx = 0;
-    width = 0;
-    isFullHeight = false;
-    isReadOnly = false;
-    isResizable = false;
-    isDraggable = false;
-    data = null;
-    constructor(start, end, resourceId, data = null, isFullHeight = false, isReadOnly = false, isResizable = false, isDraggable = false) {
-        this.start = start;
-        this.end = end;
-        this.resourceId = resourceId;
-        this.data = data;
-        this.isFullHeight = isFullHeight;
-        this.isReadOnly = isReadOnly;
-        this.isResizable = isResizable;
-        this.isDraggable = isDraggable;
-        this.id = getGUID();
-    }
-}
-
-class Resource {
-    uid = "";
-    id;
-    name;
-    maxTop;
-    events = [];
-    isInViewport = false;
-    schedulerResourceDisplay;
-    isLoading = false;
-    data = null;
-    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
-        this.id = id;
-        this.name = name;
-        this.maxTop = eventHeight;
-        this.data = data;
-        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
-    }
-}
-
 var styles = {"super-scheduler-row-header":"super-scheduler-module__super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module__indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module__scheduler-crewmember-functions__BS2hs"};
 
 class OnPinRow {
@@ -11461,7 +10235,6 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
         }, "data-direction": direction, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsxRuntime.jsx("div", { className: "cw-search-input-loading", children: jsxRuntime.jsx(CwIcon, { iconId: "spinner" }) })), jsxRuntime.jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsxRuntime.jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsxRuntime.jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsxRuntime.jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsxRuntime.jsx("ul", { children: options.map((option, index) => (jsxRuntime.jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-exports.CblDragAndDrop = CblDragAndDrop;
 exports.CwAccordionContainer = CwAccordionContainer;
 exports.CwAlign = CwAlign;
 exports.CwAnchoredMenu = CwAnchoredMenu;
@@ -11528,17 +10301,17 @@ exports.CwNavMenu = CwNavMenu;
 exports.CwNote = CwNote;
 exports.CwOption = CwOption;
 exports.CwPopoverButton = CwPopoverButton;
+exports.CwProgress = CwProgress;
 exports.CwRadioGroup = CwRadioGroup;
 exports.CwReportModal = CwReportModal;
-exports.CwScheduler = CwScheduler;
 exports.CwSearchAsync = CwSearchAsync;
 exports.CwSearchInput = CwSearchInput;
 exports.CwSelect = CwSelect;
 exports.CwSelectList = CwSelectList;
 exports.CwSelectListItems = CwSelectListItems;
+exports.CwSkeleton = CwSkeleton;
 exports.CwSortableList = CwSortableList;
 exports.CwSortableTable = CwSortableTable;
-exports.CwSuperScheduler = CwSuperScheduler;
 exports.CwTable = CwTable;
 exports.CwTableGrouped = CwTableGrouped;
 exports.CwTableServerSide = CwTableServerSide;
@@ -11576,14 +10349,12 @@ exports.OnStartClickHeaderEvent = OnStartClickHeaderEvent;
 exports.OnUnpinRow = OnUnpinRow;
 exports.PRESET_LIBRARY_TEMPORAL = PRESET_LIBRARY_TEMPORAL;
 exports.PinRowHeader = PinRowHeader;
-exports.Resource = Resource;
 exports.Scheduler = Scheduler;
 exports.SchedulerEvent = SchedulerEvent;
 exports.SuperScheduler = SuperScheduler;
 exports.TooltipConstraintContext = TooltipConstraintContext;
 exports.UiEvent = UiEvent;
 exports.Weekdays = Weekdays;
-exports.cblEvent = cblEvent;
 exports.configureCwLoading = configureCwLoading;
 exports.eventIsVisible = eventIsVisible;
 exports.filterNavItems = filterNavItems;