@cwellt_software/cwellt-reactjs-lib 1.2.15 → 1.2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +103 -52
- package/dist/index.css +1 -1
- package/dist/index.d.ts +35 -2
- package/dist/index.es.js +103 -53
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -634,7 +634,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
|
|
|
634
634
|
jsxRuntime.jsx("div", {})) }));
|
|
635
635
|
}
|
|
636
636
|
|
|
637
|
-
var styles$
|
|
637
|
+
var styles$p = {"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"};
|
|
638
638
|
|
|
639
639
|
// Constants moved outside to prevent recreation
|
|
640
640
|
const margin$1 = 16;
|
|
@@ -757,12 +757,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
|
|
|
757
757
|
const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
|
|
758
758
|
setIsVisible(true);
|
|
759
759
|
}, showDelay);
|
|
760
|
-
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$
|
|
760
|
+
const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$p["cw-generic-tooltip-content"]);
|
|
761
761
|
// Memoize tooltip content creation
|
|
762
762
|
const tooltipContent = React.useMemo(() => {
|
|
763
763
|
if (hide || !isVisible || !content)
|
|
764
764
|
return null;
|
|
765
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$
|
|
765
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$p["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
|
|
766
766
|
position: 'fixed',
|
|
767
767
|
top: `${tooltipPosition.top}px`,
|
|
768
768
|
left: `${tooltipPosition.left}px`,
|
|
@@ -777,10 +777,10 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
|
|
|
777
777
|
clearTooltipTimeout();
|
|
778
778
|
setIsVisible(false);
|
|
779
779
|
}, [clearTooltipTimeout]);
|
|
780
|
-
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$
|
|
780
|
+
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$p["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
|
|
781
781
|
};
|
|
782
782
|
|
|
783
|
-
var styles$
|
|
783
|
+
var styles$o = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
|
|
784
784
|
|
|
785
785
|
// Constants
|
|
786
786
|
const margin = 16;
|
|
@@ -995,7 +995,7 @@ const CwTooltipManager = () => {
|
|
|
995
995
|
if (!state.isVisible || !state.content) {
|
|
996
996
|
return null;
|
|
997
997
|
}
|
|
998
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$
|
|
998
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$o["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, style: {
|
|
999
999
|
top: `${tooltipPosition.top}px`,
|
|
1000
1000
|
left: `${tooltipPosition.left}px`,
|
|
1001
1001
|
opacity: (isPositioned && !isMeasuring) ? 1 : 0,
|
|
@@ -1063,7 +1063,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
|
|
|
1063
1063
|
React.useEffect(() => {
|
|
1064
1064
|
ensureTooltipManager();
|
|
1065
1065
|
}, []);
|
|
1066
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$
|
|
1066
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$o["cw-tooltip"], children: children }));
|
|
1067
1067
|
};
|
|
1068
1068
|
|
|
1069
1069
|
function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }) {
|
|
@@ -1120,7 +1120,7 @@ function CwModal(custModalProps) {
|
|
|
1120
1120
|
jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
|
|
1121
1121
|
}
|
|
1122
1122
|
|
|
1123
|
-
var styles$
|
|
1123
|
+
var styles$n = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
|
|
1124
1124
|
|
|
1125
1125
|
function CwConfirmationPopup(props) {
|
|
1126
1126
|
const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
|
|
@@ -1184,15 +1184,15 @@ function CwConfirmationPopup(props) {
|
|
|
1184
1184
|
onCancel();
|
|
1185
1185
|
}
|
|
1186
1186
|
};
|
|
1187
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$
|
|
1187
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$n.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$n.popup, style: {
|
|
1188
1188
|
position: 'absolute',
|
|
1189
1189
|
top: `${position.top}px`,
|
|
1190
1190
|
left: `${position.left}px`,
|
|
1191
1191
|
transform: 'none'
|
|
1192
|
-
}, children: [jsxRuntime.jsx("p", { className: styles$
|
|
1192
|
+
}, children: [jsxRuntime.jsx("p", { className: styles$n.message, children: message }), jsxRuntime.jsxs("div", { className: styles$n.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$n.button} ${styles$n.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$n.button} ${styles$n.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
|
|
1193
1193
|
}
|
|
1194
1194
|
|
|
1195
|
-
var styles$
|
|
1195
|
+
var styles$m = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
|
|
1196
1196
|
|
|
1197
1197
|
// Helper function to parse size values
|
|
1198
1198
|
const parseSize = (size) => {
|
|
@@ -1465,7 +1465,7 @@ const CwDialog = props => {
|
|
|
1465
1465
|
}
|
|
1466
1466
|
}
|
|
1467
1467
|
}, [open]);
|
|
1468
|
-
const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$
|
|
1468
|
+
const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$m["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
|
|
1469
1469
|
const content = React.useMemo(() => (jsxRuntime.jsx("section", { children: children })), [children]);
|
|
1470
1470
|
const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave })) })), [customFooter, onSave, disableSave]);
|
|
1471
1471
|
const resizeHandles = React.useMemo(() => size.autoHeight
|
|
@@ -1494,7 +1494,7 @@ const CwDialog = props => {
|
|
|
1494
1494
|
: `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
|
|
1495
1495
|
return { displayWidth, displayHeight };
|
|
1496
1496
|
}, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
|
|
1497
|
-
const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$
|
|
1497
|
+
const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$m["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
|
|
1498
1498
|
left: `${position.x}px`,
|
|
1499
1499
|
top: `${position.y}px`,
|
|
1500
1500
|
width: displayDimensions.displayWidth,
|
|
@@ -1697,7 +1697,7 @@ function CwAlign(props) {
|
|
|
1697
1697
|
}, children: props.children }));
|
|
1698
1698
|
}
|
|
1699
1699
|
|
|
1700
|
-
var styles$
|
|
1700
|
+
var styles$l = {"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"};
|
|
1701
1701
|
|
|
1702
1702
|
/**
|
|
1703
1703
|
* CwCard - A simple card component for displaying content in a contained format
|
|
@@ -1721,11 +1721,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1721
1721
|
// Construct class names using CSS modules
|
|
1722
1722
|
const cardClassNames = [
|
|
1723
1723
|
'cw-card',
|
|
1724
|
-
styles$
|
|
1724
|
+
styles$l.card,
|
|
1725
1725
|
className,
|
|
1726
|
-
clickable ? styles$
|
|
1727
|
-
disabled ? styles$
|
|
1728
|
-
isLoading ? styles$
|
|
1726
|
+
clickable ? styles$l.clickable : '',
|
|
1727
|
+
disabled ? styles$l.disabled : '',
|
|
1728
|
+
isLoading ? styles$l.loading : '',
|
|
1729
1729
|
].filter(Boolean).join(' ');
|
|
1730
1730
|
// Handle click event when card is clickable
|
|
1731
1731
|
const handleClick = () => {
|
|
@@ -1742,15 +1742,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
|
|
|
1742
1742
|
// Determine if footer should be rendered
|
|
1743
1743
|
const hasFooter = hasChips || footer || (hasActions && direction === "row");
|
|
1744
1744
|
// Actions component to reuse
|
|
1745
|
-
const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$
|
|
1745
|
+
const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$l.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;
|
|
1746
1746
|
return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
|
|
1747
1747
|
role: 'button',
|
|
1748
1748
|
tabIndex: 0,
|
|
1749
1749
|
onClick: handleClick,
|
|
1750
|
-
}), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$
|
|
1750
|
+
}), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$l.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$l.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$l.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$l.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$l.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$l.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
|
|
1751
1751
|
};
|
|
1752
1752
|
|
|
1753
|
-
var styles$
|
|
1753
|
+
var styles$k = {"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","sortControls":"cw-card-list-module__sortControls__mWgZA"};
|
|
1754
1754
|
|
|
1755
1755
|
function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
|
|
1756
1756
|
const [currentPage, setCurrentPage] = React.useState(1);
|
|
@@ -1784,10 +1784,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
|
|
|
1784
1784
|
'--card-width': `${defaultCardWidth}px`,
|
|
1785
1785
|
'--card-gap': `${cardGap}px`
|
|
1786
1786
|
};
|
|
1787
|
-
return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$
|
|
1787
|
+
return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$k.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$k.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsxRuntime.jsx("div", { className: styles$k.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$k.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$k.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$k.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$k.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$k.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
|
|
1788
1788
|
}
|
|
1789
1789
|
|
|
1790
|
-
var styles$
|
|
1790
|
+
var styles$j = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
|
|
1791
1791
|
|
|
1792
1792
|
/**
|
|
1793
1793
|
*
|
|
@@ -1804,7 +1804,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
|
|
|
1804
1804
|
setVisible_accordionBody(!isVisible_accordionBody);
|
|
1805
1805
|
};
|
|
1806
1806
|
// #endregion
|
|
1807
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1807
|
+
return (jsxRuntime.jsxs("div", { className: styles$j["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$j["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
|
|
1808
1808
|
}
|
|
1809
1809
|
|
|
1810
1810
|
/**
|
|
@@ -2073,7 +2073,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
|
|
|
2073
2073
|
}, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
|
|
2074
2074
|
}
|
|
2075
2075
|
|
|
2076
|
-
var styles$
|
|
2076
|
+
var styles$i = {"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"};
|
|
2077
2077
|
|
|
2078
2078
|
/**
|
|
2079
2079
|
* Hook that provides state management for CwSortableTable.
|
|
@@ -2136,9 +2136,9 @@ function useSortableTable(initialItems) {
|
|
|
2136
2136
|
}
|
|
2137
2137
|
|
|
2138
2138
|
// ─── Drop indicator row ───────────────────────────────────────────────────────
|
|
2139
|
-
const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$
|
|
2139
|
+
const DropIndicatorRow = ({ colSpan }) => (jsxRuntime.jsx("tr", { className: styles$i.dropIndicator, "aria-hidden": true, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", {}) }) }));
|
|
2140
2140
|
// ─── Loading skeleton ─────────────────────────────────────────────────────────
|
|
2141
|
-
const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsxRuntime.jsx("tr", { className: styles$
|
|
2141
|
+
const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsxRuntime.jsx("tr", { className: styles$i.skeletonRow, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", { className: styles$i.skeleton }) }) }, i))) }));
|
|
2142
2142
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
2143
2143
|
/**
|
|
2144
2144
|
* CwSortableTable
|
|
@@ -2225,11 +2225,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
|
|
|
2225
2225
|
return items.map((item, index) => {
|
|
2226
2226
|
const key = item[rowKey];
|
|
2227
2227
|
const isDragging = draggedItem?.[rowKey] === key;
|
|
2228
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols })), jsxRuntime.jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$
|
|
2228
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols })), jsxRuntime.jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$i.dragging : "", children: [showHandle && (jsxRuntime.jsx("td", { className: "cw-table-col-action", children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
|
|
2229
2229
|
});
|
|
2230
2230
|
};
|
|
2231
2231
|
// ── Render ──────────────────────────────────────────────────────────────
|
|
2232
|
-
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$
|
|
2232
|
+
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$i.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) })] }))] }));
|
|
2233
2233
|
}
|
|
2234
2234
|
|
|
2235
2235
|
/**
|
|
@@ -2437,7 +2437,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
|
|
|
2437
2437
|
}, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
|
|
2438
2438
|
}
|
|
2439
2439
|
|
|
2440
|
-
var styles$
|
|
2440
|
+
var styles$h = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
|
|
2441
2441
|
|
|
2442
2442
|
const TabIcon = ({ icon }) => {
|
|
2443
2443
|
if (!icon)
|
|
@@ -2487,7 +2487,7 @@ function CwTabs(CwTabsProps) {
|
|
|
2487
2487
|
const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
|
|
2488
2488
|
? { minWidth: CwTabsProps.tabsListWidth }
|
|
2489
2489
|
: undefined;
|
|
2490
|
-
return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$
|
|
2490
|
+
return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$h['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, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsxRuntime.jsx("span", { className: styles$h['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$h['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
|
|
2491
2491
|
}
|
|
2492
2492
|
|
|
2493
2493
|
/**
|
|
@@ -2514,7 +2514,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
|
|
|
2514
2514
|
return (jsxRuntime.jsx("div", { className: "cw-expandable", children: jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }) }));
|
|
2515
2515
|
};
|
|
2516
2516
|
|
|
2517
|
-
var styles$
|
|
2517
|
+
var styles$g = {"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"};
|
|
2518
2518
|
|
|
2519
2519
|
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, }) => {
|
|
2520
2520
|
const [masterWidth, setMasterWidth] = React.useState(initialWidth);
|
|
@@ -2550,10 +2550,10 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
|
|
|
2550
2550
|
document.body.style.userSelect = '';
|
|
2551
2551
|
};
|
|
2552
2552
|
}, [isResizing, minMasterWidth, maxMasterWidth]);
|
|
2553
|
-
const rootClassName = [styles$
|
|
2554
|
-
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-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$
|
|
2553
|
+
const rootClassName = [styles$g['cw-master-detail'], className].filter(Boolean).join(' ');
|
|
2554
|
+
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-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$g.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$g.detail, children: selectedKey && detailContent
|
|
2555
2555
|
? detailContent
|
|
2556
|
-
: (jsxRuntime.jsx("div", { className: styles$
|
|
2556
|
+
: (jsxRuntime.jsx("div", { className: styles$g['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
|
|
2557
2557
|
};
|
|
2558
2558
|
|
|
2559
2559
|
/**
|
|
@@ -2577,7 +2577,7 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
|
|
|
2577
2577
|
: emptyValue })] }, item.key))) }));
|
|
2578
2578
|
};
|
|
2579
2579
|
|
|
2580
|
-
var styles$
|
|
2580
|
+
var styles$f = {"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"};
|
|
2581
2581
|
|
|
2582
2582
|
function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
|
|
2583
2583
|
const [draggedItem, setDraggedItem] = React.useState(null);
|
|
@@ -2640,15 +2640,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
|
|
|
2640
2640
|
}
|
|
2641
2641
|
};
|
|
2642
2642
|
if (items.length === 0) {
|
|
2643
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
2643
|
+
return (jsxRuntime.jsx("div", { className: `${styles$f.sortableList} ${styles$f.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$f.emptyMessage, children: emptyMessage }) }));
|
|
2644
2644
|
}
|
|
2645
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
2645
|
+
return (jsxRuntime.jsx("div", { className: `${styles$f.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
|
|
2646
2646
|
const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
|
|
2647
2647
|
const isDragging = draggedItem?.id === item.id;
|
|
2648
2648
|
const isMoved = movedItems.has(item.id);
|
|
2649
2649
|
const canExpand = Boolean(expandedContent);
|
|
2650
2650
|
const isExpanded = expandedItems.has(item.id);
|
|
2651
|
-
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$
|
|
2651
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$f.dropIndicator }), jsxRuntime.jsxs("div", { className: `${styles$f.sortableItem} ${isDragging ? styles$f.dragging : ''} ${isMoved ? styles$f.moved : ''} ${readOnly ? styles$f.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$f.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$f.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$f.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$f.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$f.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$f.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$f.dropIndicator }))] }, item.id));
|
|
2652
2652
|
}) }));
|
|
2653
2653
|
}
|
|
2654
2654
|
|
|
@@ -2825,7 +2825,7 @@ function CwFileUpload(fileUploadProps) {
|
|
|
2825
2825
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "row", children: [jsxRuntime.jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsxRuntime.jsx("div", { className: "row error", children: error }), jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
|
|
2826
2826
|
}
|
|
2827
2827
|
|
|
2828
|
-
var styles$
|
|
2828
|
+
var styles$e = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
|
|
2829
2829
|
|
|
2830
2830
|
function CwFileUploadMultiple(fileUploadProps) {
|
|
2831
2831
|
const fileInputRef = React.useRef(null);
|
|
@@ -2976,12 +2976,12 @@ function CwFileUploadMultiple(fileUploadProps) {
|
|
|
2976
2976
|
}
|
|
2977
2977
|
}
|
|
2978
2978
|
};
|
|
2979
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
2979
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$e.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$e.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxRuntime.jsxs("div", { className: `${styles$e.uploadArea} ${fileUploadProps.disabled ? styles$e.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$e.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.jsxs("p", { className: `${styles$e.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : selectedFiles.length === 0 && existingFile ? (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$e.fileInfo, children: jsxRuntime.jsx("p", { className: styles$e.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
|
|
2980
2980
|
setExistingFile(undefined);
|
|
2981
2981
|
if (fileUploadProps.onSelect) {
|
|
2982
2982
|
fileUploadProps.onSelect(null);
|
|
2983
2983
|
}
|
|
2984
|
-
}, disabled: fileUploadProps.disabled, className: styles$
|
|
2984
|
+
}, disabled: fileUploadProps.disabled, className: styles$e.smallButton })] }), jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$e.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$e.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$e.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$e.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$e.smallButton })] }, index))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
|
|
2985
2985
|
}
|
|
2986
2986
|
|
|
2987
2987
|
function CwInput(CwInputProps) {
|
|
@@ -3024,7 +3024,7 @@ function CwDigit(props) {
|
|
|
3024
3024
|
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 })] }) }));
|
|
3025
3025
|
}
|
|
3026
3026
|
|
|
3027
|
-
var styles$
|
|
3027
|
+
var styles$d = {"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"};
|
|
3028
3028
|
|
|
3029
3029
|
const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
|
|
3030
3030
|
const [rgb, setRgb] = React.useState({ r: 255, g: 255, b: 255 });
|
|
@@ -3227,13 +3227,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
|
|
|
3227
3227
|
// Calculate background color for the main area based on current hue
|
|
3228
3228
|
const hueColor = hsvToRgb(hsv.h, 100, 100);
|
|
3229
3229
|
const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
|
|
3230
|
-
return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$
|
|
3230
|
+
return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$d.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$d.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$d.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$d.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$d.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$d.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$d.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$d.whiteGradient }), jsxRuntime.jsx("div", { className: styles$d.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$d.colorAreaCursor, style: {
|
|
3231
3231
|
left: `${hsv.s}%`,
|
|
3232
3232
|
top: `${100 - hsv.v}%`
|
|
3233
3233
|
} })] })] })] }));
|
|
3234
3234
|
};
|
|
3235
3235
|
|
|
3236
|
-
var styles$
|
|
3236
|
+
var styles$c = {"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"};
|
|
3237
3237
|
|
|
3238
3238
|
const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
|
|
3239
3239
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -3366,11 +3366,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
|
|
|
3366
3366
|
break;
|
|
3367
3367
|
}
|
|
3368
3368
|
};
|
|
3369
|
-
return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$
|
|
3369
|
+
return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$c.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$c.selectColor} ${disabled ? styles$c.disabled : ''} ${readOnly ? styles$c.readOnly : ''}`, style: {
|
|
3370
3370
|
width,
|
|
3371
3371
|
height,
|
|
3372
3372
|
backgroundColor: value,
|
|
3373
|
-
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$
|
|
3373
|
+
}, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$c.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
|
|
3374
3374
|
};
|
|
3375
3375
|
|
|
3376
3376
|
/**
|
|
@@ -3873,7 +3873,7 @@ const CwImageArea = React.forwardRef((props, ref) => {
|
|
|
3873
3873
|
});
|
|
3874
3874
|
CwImageArea.displayName = "CwImageArea";
|
|
3875
3875
|
|
|
3876
|
-
var styles$
|
|
3876
|
+
var styles$b = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
|
|
3877
3877
|
|
|
3878
3878
|
/**
|
|
3879
3879
|
* This class represents a week where days can be selected or unselected
|
|
@@ -4013,15 +4013,15 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
|
|
|
4013
4013
|
setSelectedDays(newWeekdays);
|
|
4014
4014
|
onChange?.(newWeekdays.toString());
|
|
4015
4015
|
};
|
|
4016
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
4016
|
+
return (jsxRuntime.jsx("div", { className: styles$b["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
|
|
4017
4017
|
};
|
|
4018
4018
|
|
|
4019
|
-
var styles$
|
|
4019
|
+
var styles$a = {"check-container":"cw-check-module__check-container__4nscZ","checkbox-group-container":"cw-check-module__checkbox-group-container__WMNbG"};
|
|
4020
4020
|
|
|
4021
4021
|
function CwCheck(props) {
|
|
4022
4022
|
const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
|
|
4023
4023
|
const displayText = labelText || labelProps?.text;
|
|
4024
|
-
return (jsxRuntime.jsx("div", { className: `cw-check ${styles$
|
|
4024
|
+
return (jsxRuntime.jsx("div", { className: `cw-check ${styles$a["check-container"]}${className ? ` ${className}` : ''}`, children: jsxRuntime.jsxs("label", { "data-direction": alignment, children: [jsxRuntime.jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsxRuntime.jsxs("span", { className: "cw-icon-text", children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), displayText] }))] }) }));
|
|
4025
4025
|
}
|
|
4026
4026
|
|
|
4027
4027
|
function CwCheckbox(CwCheckboxProps) {
|
|
@@ -4053,7 +4053,7 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, alignProps
|
|
|
4053
4053
|
: [];
|
|
4054
4054
|
const flexDirection = alignProps?.flexDirection ?? "row";
|
|
4055
4055
|
const dataDirection = { 'data-direction': flexDirection };
|
|
4056
|
-
return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$
|
|
4056
|
+
return (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$a["checkbox-group-container"]}${className ? ` ${className}` : ''}`, ...dataDirection, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: `${optionsAlignment === "row" ? "cw-flex-column cw-gap-small" : "cw-flex-row cw-flex-wrap"}`, children: options.map((option) => (jsxRuntime.jsx(CwCheck, { labelText: option.label, checked: value.includes(option.value), disabled: disabled || option.disabled, alignment: optionsAlignment, onChange: (e) => handleChange(option.value, e.target.checked) }, option.value))) })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
|
|
4057
4057
|
}
|
|
4058
4058
|
|
|
4059
4059
|
function CwToggle(props) {
|
|
@@ -4124,6 +4124,56 @@ function CwDropdownFilter(props) {
|
|
|
4124
4124
|
return (jsxRuntime.jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsxRuntime.jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsxRuntime.jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsxRuntime.jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
|
|
4125
4125
|
}
|
|
4126
4126
|
|
|
4127
|
+
var styles$9 = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
|
|
4128
|
+
|
|
4129
|
+
/**
|
|
4130
|
+
* Button that toggles a floating panel with arbitrary children.
|
|
4131
|
+
* Uses the native Popover API — panel renders in the browser's top layer,
|
|
4132
|
+
* escaping all overflow/stacking contexts. Light dismiss (click outside)
|
|
4133
|
+
* and Escape key are handled natively by the browser.
|
|
4134
|
+
*
|
|
4135
|
+
* Designed as a composable primitive:
|
|
4136
|
+
* - Column picker: put `<CwCheckboxGroup>` inside
|
|
4137
|
+
* - Options menu: put toggles / links inside
|
|
4138
|
+
* - Future CwTable integration: use internally for column visibility
|
|
4139
|
+
*
|
|
4140
|
+
* @example
|
|
4141
|
+
* <CwPopoverButton text="Columns" icon="table" variant="outline">
|
|
4142
|
+
* <CwCheckboxGroup options={opts} value={val} onChange={setVal} />
|
|
4143
|
+
* </CwPopoverButton>
|
|
4144
|
+
*
|
|
4145
|
+
* @example
|
|
4146
|
+
* <CwPopoverButton text="Options" icon="options" variant="outline" placement="bottom-end">
|
|
4147
|
+
* <CwToggle labelText="Show assigned" checked={v} onChange={setV} />
|
|
4148
|
+
* </CwPopoverButton>
|
|
4149
|
+
*/
|
|
4150
|
+
function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-start", panelClassName, ...buttonProps }) {
|
|
4151
|
+
const containerRef = React.useRef(null);
|
|
4152
|
+
const panelRef = React.useRef(null);
|
|
4153
|
+
const panelCallbackRef = React.useCallback((node) => {
|
|
4154
|
+
panelRef.current = node;
|
|
4155
|
+
node?.setAttribute("popover", "auto");
|
|
4156
|
+
}, []);
|
|
4157
|
+
const handleClick = React.useCallback(() => {
|
|
4158
|
+
const panel = panelRef.current;
|
|
4159
|
+
const container = containerRef.current;
|
|
4160
|
+
if (!panel || !container)
|
|
4161
|
+
return;
|
|
4162
|
+
const rect = container.getBoundingClientRect();
|
|
4163
|
+
panel.style.top = `${rect.bottom + 4}px`;
|
|
4164
|
+
if (placement === "bottom-start") {
|
|
4165
|
+
panel.style.left = `${rect.left}px`;
|
|
4166
|
+
panel.style.right = "auto";
|
|
4167
|
+
}
|
|
4168
|
+
else {
|
|
4169
|
+
panel.style.right = `${window.innerWidth - rect.right}px`;
|
|
4170
|
+
panel.style.left = "auto";
|
|
4171
|
+
}
|
|
4172
|
+
panel.togglePopover();
|
|
4173
|
+
}, [placement]);
|
|
4174
|
+
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$9.container, children: [jsxRuntime.jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsxRuntime.jsx("div", { ref: panelCallbackRef, className: `${styles$9.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
|
|
4175
|
+
}
|
|
4176
|
+
|
|
4127
4177
|
function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
|
|
4128
4178
|
const result = new Set();
|
|
4129
4179
|
items.forEach((item, index) => {
|
|
@@ -9060,6 +9110,7 @@ exports.CwMultiFilter = CwMultiFilter;
|
|
|
9060
9110
|
exports.CwMultiFilterTag = CwMultiFilterTag;
|
|
9061
9111
|
exports.CwNote = CwNote;
|
|
9062
9112
|
exports.CwOption = CwOption;
|
|
9113
|
+
exports.CwPopoverButton = CwPopoverButton;
|
|
9063
9114
|
exports.CwReportModal = CwReportModal;
|
|
9064
9115
|
exports.CwScheduler = CwScheduler;
|
|
9065
9116
|
exports.CwSearchInput = CwSearchInput;
|