@cwellt_software/cwellt-reactjs-lib 1.4.8 → 1.4.9

package/dist/index.cjs.js

@@ -1641,48 +1641,6 @@ const CwModalHover = ({ children, hovereable, onFirstOpened, ...dialogProps }) =
                 }, children: children })] }));
 };
 
-class CwDialogManager {
-    static openDialogs = new Map();
-    static OpenDialog(id, props) {
-        if (!CwDialogManager.openDialogs.has(id)) {
-            const container = document.createElement("div");
-            document.body.appendChild(container);
-            const root = client.createRoot(container);
-            root.render(jsxRuntime.jsx(CwDialog, { ...props }));
-            CwDialogManager.openDialogs.set(id, { props, container });
-        }
-    }
-    static CloseDialog(id) {
-        const dialog = CwDialogManager.openDialogs.get(id);
-        if (dialog) {
-            const root = client.createRoot(dialog.container);
-            root.unmount();
-            dialog.container.remove();
-            CwDialogManager.openDialogs.delete(id);
-        }
-    }
-    static CloseAllDialogs() {
-        CwDialogManager.openDialogs.forEach((_dialog, id) => {
-            CwDialogManager.CloseDialog(id);
-        });
-    }
-    static CloseLastDialog() {
-        const lastDialogId = Array.from(CwDialogManager.openDialogs.keys()).pop();
-        if (lastDialogId) {
-            CwDialogManager.CloseDialog(lastDialogId);
-        }
-    }
-    static CloseFirstDialog() {
-        const firstDialogId = Array.from(CwDialogManager.openDialogs.keys())[0];
-        if (firstDialogId) {
-            CwDialogManager.CloseDialog(firstDialogId);
-        }
-    }
-    static GetOpenDialogCount() {
-        return CwDialogManager.openDialogs.size;
-    }
-}
-
 /**
  * General purpose aligner flex container, useful for column or row view.
  * @remarks
@@ -1838,14 +1796,16 @@ function CwOption(props) {
  * </CwSelect>
  */
 function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, children, style, className, ...selectProps } = props;
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, handleChange, children, style, className, ...selectProps } = props;
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
     const flexDirection = alignProps?.flexDirection ?? "row";
     const dataDirection = { 'data-direction': flexDirection };
     const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
-    return (jsxRuntime.jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxRuntime.jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, 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)))] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxRuntime.jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, onChange: handleChange
+                                    ? (e) => { handleChange(e.currentTarget.value); selectProps.onChange?.(e); }
+                                    : 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 }) {
@@ -3542,237 +3502,6 @@ function CwTextArea(props) {
     return (jsxRuntime.jsxs("div", { className: "cw-text-area", ...dataDirection, style: style, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { resize: resize } }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
-/**
- * Input for entering a string of text.
- * @remarks
- * ```txt
- * CwIcon  CwLabel  input type=date    CwButton
- *  ↑      ↑           ↑               ↑
- *               ╭────────────────────╮╭════╮
- *  ⌂  Birthdate │ 0000 / 00 / 00     │║ Ok ║
- *               ╰────────────────────╯╰════╯
- * ```
- * @example
- * ```tsx
- * <CwInputDate
- *   iconProps={{ iconId: "Birthdate" }}
- *   labelProps={{ children: "Name", width: "100px" }}
- *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
- * />
- * ```
- */
-function CwInputDate(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
-    inputProps.max = inputProps.max ?? "9999-01-01";
-    return (jsxRuntime.jsx("div", { className: "cw-input-date", 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: "date", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
-}
-
-var classes = {"datePicker":"cw-input-date-picker-module__datePicker__jogOq","input":"cw-input-date-picker-module__input__uQshH","calendar":"cw-input-date-picker-module__calendar__q39ic","calendarHeader":"cw-input-date-picker-module__calendarHeader__1btPK","arrowButton":"cw-input-date-picker-module__arrowButton__23tNc","calendarTitle":"cw-input-date-picker-module__calendarTitle__oOODw","calendarBody":"cw-input-date-picker-module__calendarBody__-711a","calendarDay":"cw-input-date-picker-module__calendarDay__z-Mmv","selected":"cw-input-date-picker-module__selected__XQgR7","todayButton":"cw-input-date-picker-module__todayButton__oYamC","emptyDay":"cw-input-date-picker-module__emptyDay__lbI5B"};
-
-/**
- * Converts a Date or ISO string to a Temporal.PlainDate.
- */
-function toPlainDate$1(dateString) {
-    if (dateString instanceof Date) {
-        return Temporal.PlainDate.from({
-            year: dateString.getFullYear(),
-            month: dateString.getMonth() + 1,
-            day: dateString.getDate(),
-        });
-    }
-    // ISO "YYYY-MM-DD" → direct parse
-    return Temporal.PlainDate.from(dateString);
-}
-/**
- * Formats a date as DD.MM.YYYY (German locale).
- */
-function toGermanDate(dateString) {
-    const pd = toPlainDate$1(dateString);
-    const day = String(pd.day).padStart(2, "0");
-    const month = String(pd.month).padStart(2, "0");
-    return `${day}.${month}.${pd.year}`;
-}
-/**
- * Formats a date as YYYY-MM-DD (ISO).
- */
-function toISODate(dateString) {
-    return toPlainDate$1(dateString).toString();
-}
-/**
- * Validates whether a string is a valid DD.MM.YYYY date.
- */
-function isValidGermanDate(textDate) {
-    return parseGermanDate(textDate) !== null;
-}
-/**
- * Converts a DD.MM.YYYY string to YYYY-MM-DD, or null if invalid.
- */
-function germanDateToISO(textDate) {
-    const pd = parseGermanDate(textDate);
-    return pd ? pd.toString() : null;
-}
-/**
- * Converts a DD.MM.YYYY string to a Date object, or null if invalid.
- */
-function germanDateToDate(textDate) {
-    const pd = parseGermanDate(textDate);
-    if (!pd)
-        return null;
-    return new Date(pd.year, pd.month - 1, pd.day);
-}
-/**
- * Returns the number of days in the month and the Monday-based
- * weekday offset (0 = Monday) for the 1st of the month.
- */
-function computeCalendarGrid(internalDate) {
-    const pd = Temporal.PlainDate.from({
-        year: internalDate.getFullYear(),
-        month: internalDate.getMonth() + 1,
-        day: 1,
-    });
-    const daysInMonth = pd.daysInMonth;
-    const startDay = pd.dayOfWeek - 1; // Temporal: 1=Mon … 7=Sun → 0-based Mon
-    return { daysInMonth, startDay };
-}
-/**
- * Returns true when the given day in the internalDate's month/year
- * matches the selected ISO value string.
- */
-function isSelectedDay(internalDate, day, value) {
-    const pd = Temporal.PlainDate.from({
-        year: internalDate.getFullYear(),
-        month: internalDate.getMonth() + 1,
-        day,
-    });
-    return pd.toString() === value;
-}
-/**
- * Returns a new Date set to the 1st of the month offset by `direction` months.
- */
-function computeNextMonthDate(currentDate, direction) {
-    const pd = Temporal.PlainDate.from({
-        year: currentDate.getFullYear(),
-        month: currentDate.getMonth() + 1,
-        day: 1,
-    });
-    const moved = pd.add({ months: direction });
-    return new Date(moved.year, moved.month - 1, moved.day);
-}
-// ── internal helper ────────────────────────────────────────────────────
-/**
- * Strictly parses a DD.MM.YYYY string into a Temporal.PlainDate, or null.
- */
-function parseGermanDate(text) {
-    const match = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec(text);
-    if (!match)
-        return null;
-    const day = Number(match[1]);
-    const month = Number(match[2]);
-    const year = Number(match[3]);
-    try {
-        return Temporal.PlainDate.from({ year, month, day }, { overflow: "reject" });
-    }
-    catch {
-        return null;
-    }
-}
-
-const CwInputDatePicker = ({ value, onChange }) => {
-    const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
-    const [internalDate, setInternalDate] = React.useState(new Date(value || new Date().toISOString()));
-    const [textDate, setTextDate] = React.useState(toGermanDate(value));
-    const inputRef = React.useRef(null);
-    const calendarRef = React.useRef(null);
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (calendarRef.current &&
-                !calendarRef.current.contains(event.target) &&
-                inputRef.current &&
-                !inputRef.current.contains(event.target)) {
-                setIsCalendarOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-    React.useEffect(() => {
-        setTextDate(toGermanDate(value));
-    }, [value]);
-    const submitInput = () => {
-        if (isValidGermanDate(textDate)) {
-            const newDateString = germanDateToISO(textDate);
-            const newDate = germanDateToDate(textDate);
-            if (newDateString && newDate) {
-                if (newDateString !== value) {
-                    setInternalDate(newDate);
-                    onChange?.(newDateString);
-                }
-                setIsCalendarOpen(false);
-                return true;
-            }
-            else {
-                console.error("Invalid date format");
-                return false;
-            }
-        }
-        else {
-            setTextDate(toGermanDate(new Date(value)));
-            return false;
-        }
-    };
-    const handleClickToday = () => {
-        const today = toISODate(new Date());
-        const currentDate = value;
-        if (currentDate != today) {
-            setTextDate(toGermanDate(today));
-            setInternalDate(new Date(today));
-            onChange?.(today);
-        }
-        setIsCalendarOpen(false);
-    };
-    const handleClickDay = (day) => {
-        const newDate = new Date(internalDate.getFullYear(), internalDate.getMonth(), day);
-        const newDateString = toISODate(newDate);
-        if (newDateString !== value) {
-            setTextDate(toGermanDate(newDate));
-            setInternalDate(newDate);
-            onChange?.(newDateString);
-        }
-        setIsCalendarOpen(false);
-    };
-    const handleClickMonthArrow = (direction) => {
-        setInternalDate(prevDate => computeNextMonthDate(prevDate, direction));
-    };
-    const handlePressEnter = (event) => {
-        if (event.key === "Enter" && submitInput()) {
-            event.currentTarget.blur();
-        }
-    };
-    const handleBlurInput = (event) => {
-        if (value != toISODate(internalDate) && submitInput()) {
-            event.currentTarget?.blur();
-        }
-    };
-    const generateCalendarDays = () => {
-        const { daysInMonth, startDay } = computeCalendarGrid(internalDate);
-        const calendarDays = new Array;
-        for (let i = 0; i < startDay; i++) {
-            calendarDays.push(jsxRuntime.jsx("div", { className: classes.emptyDay }, `empty-${i}`));
-        }
-        for (let day = 1; day <= daysInMonth; day++) {
-            const selected = isSelectedDay(internalDate, day, value);
-            calendarDays.push(jsxRuntime.jsx("div", { className: `${classes.calendarDay}${selected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
-        }
-        return calendarDays;
-    };
-    return (jsxRuntime.jsxs("div", { className: classes.datePicker, children: [jsxRuntime.jsx("input", { type: "text", value: textDate, onChange: e => setTextDate(e.currentTarget.value), onFocus: () => {
-                    setInternalDate(new Date(value));
-                    setIsCalendarOpen(true);
-                }, onBlur: handleBlurInput, onKeyDown: handlePressEnter, "data-valid": isValidGermanDate(textDate), ref: inputRef, className: classes.input }), isCalendarOpen && (jsxRuntime.jsxs("div", { className: classes.calendar, ref: calendarRef, children: [jsxRuntime.jsxs("div", { className: classes.calendarHeader, children: [jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), jsxRuntime.jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), jsxRuntime.jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), jsxRuntime.jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
-};
-
 /**
  * Input for entering a string of text.
  * @remarks
@@ -4376,8 +4105,9 @@ function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defa
         zIndex: 1000,
         right: "auto",
         marginLeft: 0,
+        visibility: "hidden",
     });
-    const reposition = React.useCallback(() => {
+    const reposition = React.useCallback((visibility = "visible") => {
         const anchor = anchorRef.current;
         if (!anchor)
             return;
@@ -4392,15 +4122,18 @@ function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defa
             zIndex: 1000,
             right: "auto",
             marginLeft: 0,
+            visibility,
         });
     }, [anchorRef, positionStrategy]);
-    // Reposition when opened; re-measure after first paint to get real panel size
+    // Reposition when opened. First pass is hidden (panel not yet measured), second
+    // pass fires in a RAF with the real panel size and reveals the panel — preventing
+    // the one-frame flicker at top:0/left:0 or at the wrong position.
     React.useEffect(() => {
         if (!isOpen)
             return;
-        reposition();
-        const raf = requestAnimationFrame(reposition);
-        const handleUpdate = () => reposition();
+        reposition("hidden");
+        const raf = requestAnimationFrame(() => reposition("visible"));
+        const handleUpdate = () => reposition("visible");
         window.addEventListener("resize", handleUpdate);
         // Capture phase catches scroll on all scrollable ancestors
         window.addEventListener("scroll", handleUpdate, true);
@@ -4594,18 +4327,50 @@ var styles$a = {"container":"cw-popover-button-module__container__YSWQU","panel"
 function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-start", panelClassName, ...buttonProps }) {
     const containerRef = React.useRef(null);
     const panelRef = React.useRef(null);
+    const isOpenRef = React.useRef(false);
+    const lastToggleClosedAtRef = React.useRef(0);
+    const RECENT_CLOSE_MS = 200;
     const panelCallbackRef = React.useCallback((node) => {
         panelRef.current = node;
         node?.setAttribute("popover", "auto");
     }, []);
+    // Sync isOpenRef with the native popover toggle event so we know the real
+    // open state at the moment handleClick fires (light-dismiss closes on pointerdown,
+    // before the click event, so we can't rely on a React state for this).
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const handler = (e) => {
+            const newState = e.newState;
+            isOpenRef.current = newState === "open";
+            if (newState === "closed") {
+                lastToggleClosedAtRef.current = Date.now();
+            }
+        };
+        panel.addEventListener("toggle", handler);
+        return () => panel.removeEventListener("toggle", handler);
+    }, []);
     const handleClick = React.useCallback(() => {
         const panel = panelRef.current;
         const container = containerRef.current;
         if (!panel || !container)
             return;
+        // Light-dismiss already closed the panel on pointerdown — don't reopen.
+        if (isOpenRef.current)
+            return;
+        if (Date.now() - lastToggleClosedAtRef.current < RECENT_CLOSE_MS)
+            return;
         const rect = container.getBoundingClientRect();
         panel.style.top = `${rect.bottom + 4}px`;
-        if (placement === "bottom-start") {
+        // Prefer the requested placement, but flip if the panel would overflow the viewport.
+        const panelWidth = panel.offsetWidth || 240;
+        const spaceOnRight = window.innerWidth - rect.left;
+        const spaceOnLeft = rect.right;
+        const effectivePlacement = placement === "bottom-end" && spaceOnLeft < panelWidth ? "bottom-start" :
+            placement === "bottom-start" && spaceOnRight < panelWidth ? "bottom-end" :
+                placement;
+        if (effectivePlacement === "bottom-start") {
             panel.style.left = `${rect.left}px`;
             panel.style.right = "auto";
         }
@@ -4613,7 +4378,7 @@ function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-st
             panel.style.right = `${window.innerWidth - rect.right}px`;
             panel.style.left = "auto";
         }
-        panel.togglePopover();
+        panel.showPopover();
     }, [placement]);
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$a.container, children: [jsxRuntime.jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsxRuntime.jsx("div", { ref: panelCallbackRef, className: `${styles$a.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
 }
@@ -5500,25 +5265,41 @@ const CwContextMenu = ({ children, options, offset = DEFAULT_OFFSET, onSelect })
 };
 
 /**
- * Save button wrapper
+ * Save button wrapper  (6 uses pending delete)
  * @deprecated Use <CwButton variant="icon" icon="save" onClick={...} /> instead
  */
 function CwBtnSave({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
-    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "save", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
+    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "save", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Save" }));
 }
 /**
- * Edit button wrapper
+ * Edit button wrapper  (5 uses pending delete)
  * @deprecated Use <CwButton variant="icon" icon="edit" onClick={...} /> instead
  */
 function CwBtnEdit({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
-    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "edit", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
+    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "edit", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Edit" }));
 }
 /**
- * Delete button wrapper
+ * Delete button wrapper (4 uses pending delete)
  * @deprecated Use <CwButton variant="icon" icon="delete" color="danger" onClick={...} /> instead
  */
 function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
-    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "delete", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
+    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "delete", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Delete" }));
+}
+/**
+ * Approve button wrapper.
+ * DO NOT DELETE — used by Operon (lib pinned at ^1.0.9, currently dormant).
+ * @deprecated Use <CwButton variant="icon" icon="check-circle" onClick={...} /> instead
+ */
+function CwBtnApprove({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
+    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "check-circle", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Approve" }));
+}
+/**
+ * Cancel button wrapper.
+ * DO NOT DELETE — used by Operon (lib pinned at ^1.0.9, currently dormant).
+ * @deprecated Use <CwButton variant="icon" icon="cancel" color="danger" onClick={...} /> instead
+ */
+function CwBtnCancel({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
+    return (jsxRuntime.jsx(CwButton, { ...rest, variant: "icon", icon: "cancel", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Cancel" }));
 }
 
 var styles$4 = {"pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
@@ -5765,7 +5546,7 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
                                         } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
-var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","presetList":"cw-range-picker-module__presetList__INiLo"};
+var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","rangeCalendarRow":"cw-range-picker-module__rangeCalendarRow__VTxi0","presetList":"cw-range-picker-module__presetList__INiLo","rangeError":"cw-range-picker-module__rangeError__qHMdi"};
 
 const PRESET_LIBRARY = {
     // === PAST DAYS ===
@@ -6040,6 +5821,7 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputFromValue, setInputFromValue] = React.useState("");
     const [inputToValue, setInputToValue] = React.useState("");
+    const [rangeErrorMessage, setRangeErrorMessage] = React.useState(null);
     const [focusedInput, setFocusedInput] = React.useState();
     const containerRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -6164,21 +5946,27 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             }
         }
     }, [value, displayFormat]);
-    const handleRangeSelect = React.useCallback((range, // El rango sugerido por react-day-picker
-    selectedDay) => {
+    const handleRangeSelect = React.useCallback((range, selectedDay) => {
         let newRange;
         if (focusedInput === 'from') {
             newRange = { from: selectedDay, to: value?.to };
             if (newRange.to && selectedDay > newRange.to) {
                 newRange.to = undefined;
                 setFocusedInput('to');
+                setRangeErrorMessage(null);
             }
             else if (newRange.to) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(maxRangeDays ? `Range cannot exceed ${maxRangeDays} days` : "Invalid date range");
+                    return;
+                }
+                setRangeErrorMessage(null);
                 setIsOpen(false);
                 setFocusedInput(undefined);
             }
             else {
                 setFocusedInput('to');
+                setRangeErrorMessage(null);
             }
         }
         else if (focusedInput === 'to') {
@@ -6186,13 +5974,20 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             if (newRange.from && selectedDay < newRange.from) {
                 newRange.from = undefined;
                 setFocusedInput('from');
+                setRangeErrorMessage(null);
             }
             else if (newRange.from) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(maxRangeDays ? `Range cannot exceed ${maxRangeDays} days` : "Invalid date range");
+                    return;
+                }
+                setRangeErrorMessage(null);
                 setIsOpen(false);
                 setFocusedInput(undefined);
             }
             else {
                 setFocusedInput('from');
+                setRangeErrorMessage(null);
             }
         }
         else {
@@ -6202,20 +5997,23 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             }
             newRange = { from: range.from, to: range.to };
             if (range.from && range.to) {
+                if (!validateRange(newRange.from, newRange.to)) {
+                    setRangeErrorMessage(maxRangeDays ? `Range cannot exceed ${maxRangeDays} days` : "Invalid date range");
+                    return;
+                }
+                setRangeErrorMessage(null);
                 setIsOpen(false);
                 setFocusedInput(undefined);
             }
             else if (range.from) {
                 setFocusedInput('to');
+                setRangeErrorMessage(null);
             }
             else {
                 setFocusedInput('from');
+                setRangeErrorMessage(null);
             }
         }
-        // Validate range before sending
-        if (newRange.from && newRange.to && !validateRange(newRange.from, newRange.to)) {
-            return;
-        }
         onChange(newRange);
     }, [onChange, validateRange, value, focusedInput]);
     const handleClearFrom = React.useCallback((e) => {
@@ -6384,11 +6182,11 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
-                                        today: new Date(),
-                                    }, modifiersClassNames: {
-                                        today: "rdp-day-today",
-                                    } })] }))] })] }) }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } })] }), jsxRuntime.jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
 }
 
 var timeStyles = {"timePickerPopup":"cw-time-picker-module__timePickerPopup__BN63t","timePickerList":"cw-time-picker-module__timePickerList__E88pr","selected":"cw-time-picker-module__selected__qVnfL","hasIcons":"cw-time-picker-module__hasIcons__ZiGUf","notIcons":"cw-time-picker-module__notIcons__3icu1"};
@@ -10239,6 +10037,8 @@ exports.CblDragAndDrop = CblDragAndDrop;
 exports.CwAccordionContainer = CwAccordionContainer;
 exports.CwAlign = CwAlign;
 exports.CwAnchoredMenu = CwAnchoredMenu;
+exports.CwBtnApprove = CwBtnApprove;
+exports.CwBtnCancel = CwBtnCancel;
 exports.CwBtnDelete = CwBtnDelete;
 exports.CwBtnEdit = CwBtnEdit;
 exports.CwBtnSave = CwBtnSave;
@@ -10258,7 +10058,6 @@ exports.CwDateRangePicker = CwDateRangePicker;
 exports.CwDateTimePicker = CwDateTimePicker;
 exports.CwDateTimePickerCompact = CwDateTimePickerCompact;
 exports.CwDialog = CwDialog;
-exports.CwDialogManager = CwDialogManager;
 exports.CwDigit = CwDigit;
 exports.CwDisplayMessage = CwDisplayMessage;
 exports.CwDropdown = CwDropdown;
@@ -10277,8 +10076,6 @@ exports.CwImageGallery = CwImageGallery;
 exports.CwImageZoom = CwImageZoom;
 exports.CwInput = CwInput;
 exports.CwInputColor = CwInputColor;
-exports.CwInputDate = CwInputDate;
-exports.CwInputDatePicker = CwInputDatePicker;
 exports.CwInputDateText = CwInputDateText;
 exports.CwInputDatetime = CwInputDatetime;
 exports.CwInputImage = CwInputImage;