@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/src/components/control/input/color/CwColorPicker.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getContrastColor } from '../../../../common/functions/colorManipulation';
+import styles from './cw-color-picker.module.css';
+export const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
+    const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
+    const [hsv, setHsv] = useState({ h: 0, s: 0, v: 100 });
+    const [hexColor, setHexColor] = useState(initialColor || '#FFFFFF');
+    const [initialized, setInitialized] = useState(false);
+    const [inputMode, setInputMode] = useState('hex');
+    // Prevent infinite update loops
+    const isUpdatingRef = useRef(false);
+    const hueBarRef = useRef(null);
+    const colorAreaRef = useRef(null);
+    // Convert HSV to RGB
+    const hsvToRgb = (h, s, v) => {
+        h = h / 360;
+        s = s / 100;
+        v = v / 100;
+        let r = 0, g = 0, b = 0;
+        if (s === 0) {
+            r = g = b = v;
+        }
+        else {
+            const i = Math.floor(h * 6);
+            const f = h * 6 - i;
+            const p = v * (1 - s);
+            const q = v * (1 - f * s);
+            const t = v * (1 - (1 - f) * s);
+            switch (i % 6) {
+                case 0:
+                    r = v;
+                    g = t;
+                    b = p;
+                    break;
+                case 1:
+                    r = q;
+                    g = v;
+                    b = p;
+                    break;
+                case 2:
+                    r = p;
+                    g = v;
+                    b = t;
+                    break;
+                case 3:
+                    r = p;
+                    g = q;
+                    b = v;
+                    break;
+                case 4:
+                    r = t;
+                    g = p;
+                    b = v;
+                    break;
+                case 5:
+                    r = v;
+                    g = p;
+                    b = q;
+                    break;
+            }
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    };
+    // Convert RGB to HSV
+    const rgbToHsv = (r, g, b) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        const v = max;
+        const d = max - min;
+        const s = max === 0 ? 0 : d / max;
+        if (max === min) {
+            h = 0;
+        }
+        else {
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            v: Math.round(v * 100)
+        };
+    };
+    // Convert RGB to HEX
+    const rgbToHex = (r, g, b) => {
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+    };
+    // Initialize color values from initial color prop
+    useEffect(() => {
+        if (!initialized && initialColor) {
+            const hexToRgb = (hex) => {
+                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+                return result ? {
+                    r: parseInt(result[1], 16),
+                    g: parseInt(result[2], 16),
+                    b: parseInt(result[3], 16)
+                } : { r: 255, g: 255, b: 255 };
+            };
+            const initialRgb = hexToRgb(initialColor);
+            setRgb(initialRgb);
+            setHexColor(initialColor);
+            const initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);
+            setHsv(initialHsv);
+            setInitialized(true);
+        }
+    }, [initialColor, initialized]);
+    // Update color state and notify parent component of changes
+    const updateColorState = useCallback((newRgb, newHsv) => {
+        if (isUpdatingRef.current)
+            return;
+        isUpdatingRef.current = true;
+        // Update RGB and HSV
+        setRgb(newRgb);
+        setHsv(newHsv);
+        // Calculate and update HEX
+        const newHex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+        setHexColor(newHex);
+        // Notify changes after render cycle
+        requestAnimationFrame(() => {
+            onChange(newHex, newRgb, newHsv);
+            isUpdatingRef.current = false;
+        });
+    }, [onChange]);
+    const handleRgbChange = (e) => {
+        const { name, value } = e.target;
+        const numValue = Math.min(255, Math.max(0, parseInt(value, 10) || 0));
+        const newRgb = { ...rgb, [name]: numValue };
+        const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
+        updateColorState(newRgb, newHsv);
+    };
+    const toggleInputMode = () => {
+        setInputMode(inputMode === 'hex' ? 'rgb' : 'hex');
+    };
+    const handleHexChange = (e) => {
+        const { value } = e.target;
+        setHexColor(value);
+        // Validate and convert HEX to RGB
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
+        if (result) {
+            const newRgb = {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            };
+            const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
+            // Update RGB and HSV without triggering full cycle
+            setRgb(newRgb);
+            setHsv(newHsv);
+            // Notify changes
+            requestAnimationFrame(() => {
+                onChange(value, newRgb, newHsv);
+            });
+        }
+    };
+    // Handle hue bar click
+    const handleHueBarClick = (e) => {
+        if (!hueBarRef.current)
+            return;
+        const rect = hueBarRef.current.getBoundingClientRect();
+        const height = rect.height;
+        const y = e.clientY - rect.top;
+        // Calculate hue value based on vertical position (0-360)
+        const newHue = Math.round(360 * (1 - Math.min(1, Math.max(0, y / height))));
+        const newHsv = { ...hsv, h: newHue };
+        const newRgb = hsvToRgb(newHue, hsv.s, hsv.v);
+        updateColorState(newRgb, newHsv);
+    };
+    // Handle color area click (saturation/value)
+    const handleColorAreaClick = (e) => {
+        if (!colorAreaRef.current)
+            return;
+        const rect = colorAreaRef.current.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // Calculate saturation and value based on position
+        const newSaturation = Math.round(100 * Math.min(1, Math.max(0, x / width)));
+        const newValue = Math.round(100 * (1 - Math.min(1, Math.max(0, y / height))));
+        const newHsv = { ...hsv, s: newSaturation, v: newValue };
+        const newRgb = hsvToRgb(hsv.h, newSaturation, newValue);
+        updateColorState(newRgb, newHsv);
+    };
+    // Calculate background color for the main area based on current hue
+    const hueColor = hsvToRgb(hsv.h, 100, 100);
+    const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
+    return (_jsxs("div", { className: "cw-flex-column cw-gap-small", children: [_jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [_jsx("div", { className: styles.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), _jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), _jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (_jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (_jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [_jsxs("div", { children: [_jsx("label", { children: "R:" }), _jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), _jsxs("div", { children: [_jsx("label", { children: "G:" }), _jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), _jsxs("div", { children: [_jsx("label", { children: "B:" }), _jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), _jsxs("div", { className: styles.colorPickerInteractiveArea, children: [_jsx("div", { className: styles.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: _jsx("div", { className: styles.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), _jsxs("div", { className: styles.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [_jsxs("div", { className: styles.colorAreaOverlay, children: [_jsx("div", { className: styles.hueBackground, style: { backgroundColor: hueHex } }), _jsx("div", { className: styles.whiteGradient }), _jsx("div", { className: styles.blackGradient })] }), _jsx("div", { className: styles.colorAreaCursor, style: {
+                                    left: `${hsv.s}%`,
+                                    top: `${100 - hsv.v}%`
+                                } })] })] })] }));
+};

package/dist/src/components/control/input/color/CwInputColor.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CwColorPicker } from './CwColorPicker';
+import styles from './cw-input-color.module.css';
+export const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const DROPDOWN_WIDTH = 280;
+    const DROPDOWN_HEIGHT = 250;
+    const MARGIN = 8;
+    // Calculate dropdown position
+    const dropdownStyle = useMemo(() => {
+        if (!isOpen || !containerRef.current) {
+            return { display: 'none' };
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Calculate initial positions
+        let top = rect.bottom + MARGIN;
+        let left = rect.left;
+        // Adjust horizontal position if needed
+        if (left + DROPDOWN_WIDTH > viewportWidth - MARGIN) {
+            // Try to align with right edge of trigger
+            left = rect.right - DROPDOWN_WIDTH;
+            // If still out of bounds, stick to right edge of viewport
+            if (left < MARGIN) {
+                left = viewportWidth - DROPDOWN_WIDTH - MARGIN;
+            }
+        }
+        // Adjust vertical position if needed
+        if (top + DROPDOWN_HEIGHT > viewportHeight - MARGIN) {
+            // Try to show above the trigger
+            const topPosition = rect.top - DROPDOWN_HEIGHT - MARGIN;
+            // Only use top position if there's enough space
+            if (topPosition > MARGIN) {
+                top = topPosition;
+            }
+            else {
+                // Keep at bottom but ensure some visibility
+                top = Math.min(top, viewportHeight - DROPDOWN_HEIGHT - MARGIN);
+            }
+        }
+        return {
+            position: 'fixed',
+            top: `${Math.max(MARGIN, top)}px`,
+            left: `${Math.max(MARGIN, left)}px`,
+            zIndex: 1000,
+            width: `${DROPDOWN_WIDTH}px`
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        setIsOpen(prev => !prev);
+    };
+    // Recalculate position on scroll/resize
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePositionUpdate = () => {
+            // Force re-render to recalculate position
+            setIsOpen(false);
+            requestAnimationFrame(() => setIsOpen(true));
+        };
+        // Debounced handlers
+        let resizeTimeout;
+        let scrollTimeout;
+        const handleResize = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(handlePositionUpdate, 100);
+        };
+        const handleScroll = () => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(handlePositionUpdate, 50);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll, true);
+            clearTimeout(resizeTimeout);
+            clearTimeout(scrollTimeout);
+        };
+    }, [isOpen]);
+    // Handle outside clicks and escape
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Check if click is outside both container and dropdown
+            if (containerRef.current &&
+                !containerRef.current.contains(target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                // Return focus to trigger
+                containerRef.current?.focus();
+            }
+        };
+        // Use capture phase for better event handling
+        document.addEventListener('click', handleClickOutside, true);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen]);
+    const handleColorChange = (color) => {
+        onChange(color);
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                handleToggle();
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                }
+                break;
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles.selectColor} ${disabled ? styles.disabled : ''}`, style: {
+                    width,
+                    height,
+                    backgroundColor: value,
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(_jsx("div", { ref: dropdownRef, className: styles.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: _jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+};

package/dist/src/components/control/input/date/CwInputDate.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * 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")} }}
+ * />
+ * ```
+ */
+export function CwInputDate(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    inputProps.max = inputProps.max ?? "9999-01-01";
+    return (_jsx("div", { className: "cw-input-date", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "date", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/date-picker/CwInputDatePicker.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { useEffect, useRef, useState } from "react";
+import classes from "./cw-input-date-picker.module.css";
+export const CwInputDatePicker = ({ value, onChange }) => {
+    const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+    const [internalDate, setInternalDate] = useState(new Date(value || new Date().toISOString()));
+    const [textDate, setTextDate] = useState(toGermanDate(value));
+    const inputRef = useRef(null);
+    const calendarRef = useRef(null);
+    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);
+        };
+    }, []);
+    useEffect(() => {
+        setTextDate(toGermanDate(value));
+    }, [value]);
+    function toGermanDate(dateString) {
+        return moment(dateString).format("DD.MM.YYYY");
+    }
+    function toISODate(dateString) {
+        return moment(dateString).format("YYYY-MM-DD");
+    }
+    const submitInput = () => {
+        if (moment(textDate, "DD.MM.YYYY", true).isValid()) {
+            const inputValue = textDate;
+            const momentDate = moment(inputValue, "DD.MM.YYYY", true);
+            if (momentDate.isValid()) {
+                const newDateString = momentDate.format("YYYY-MM-DD");
+                if (newDateString !== value) {
+                    const newDateString = momentDate.format("YYYY-MM-DD");
+                    setInternalDate(momentDate.toDate());
+                    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 => new Date(prevDate.getFullYear(), prevDate.getMonth() + direction, 1));
+    };
+    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 = new Date(internalDate.getFullYear(), internalDate.getMonth() + 1, 0).getDate();
+        const startDay = new Date(internalDate.getFullYear(), internalDate.getMonth(), 1).getDay() - 1;
+        const calendarDays = new Array;
+        for (let i = 0; i < startDay; i++) {
+            calendarDays.push(_jsx("div", { className: classes.emptyDay }, `empty-${i}`));
+        }
+        for (let day = 1; day <= daysInMonth; day++) {
+            const currentDate = new Date(internalDate.getFullYear(), internalDate.getMonth(), day);
+            const isSelected = moment(currentDate).format("YYYY-MM-DD") === value;
+            calendarDays.push(_jsx("div", { className: `${classes.calendarDay}${isSelected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
+        }
+        return calendarDays;
+    };
+    return (_jsxs("div", { className: classes.datePicker, children: [_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": moment(textDate, "DD.MM.YYYY", true).isValid(), ref: inputRef, className: classes.input }), isCalendarOpen && (_jsxs("div", { className: classes.calendar, ref: calendarRef, children: [_jsxs("div", { className: classes.calendarHeader, children: [_jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), _jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), _jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), _jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), _jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
+};

package/dist/src/components/control/input/date-text/CwInputDateText.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { useEffect, useRef, useState } from "react";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a string of text as a date
+ * @remarks
+ * ```txt
+ * CwIcon CwLabel (input type=text)   CwButton
+ *  ↑      ↑           ↑              ↑
+ *               ╭──────────────────╮╭════╮
+ *  %  Birthdate │ yyyy.MM.dd   [^] │║ Ok ║
+ *               ╰──────────────────╯╰════╯
+ *                                ↓
+ *                         (input type=date)
+ * ```
+ * - ***_format***: Is "DD.MM.YYYY" by default
+ * @example
+ * ```tsx
+ * <CwInputDateText
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ * />
+ * ```
+ */
+export function CwInputDateText(props) {
+    const displayFormat = "DD.MM.YYYY";
+    const internalFormat = "YYYY-MM-DD";
+    const { alignProps, buttonProps, iconProps, labelProps, dateFormat, value, size, onChange, name, required, tabIndex, disabled, readOnly, ...inputProps } = props;
+    const format = dateFormat ?? displayFormat;
+    const width = size ?? 12;
+    const formattedDate = (date, inFormat, outFormat) => {
+        if (moment(date, inFormat, true).isValid()) {
+            return moment(date, inFormat).format(outFormat);
+        }
+        else
+            return "";
+    };
+    const [date, setDate] = useState("");
+    const [displayedDate, setDisplayedDate] = useState("");
+    const dateInputRef = useRef(null);
+    const textInputRef = useRef(null);
+    const updateDateValidity = () => {
+        if (dateInputRef?.current && textInputRef?.current) {
+            dateInputRef.current.required = true;
+            const isDateValid = required
+                ? dateInputRef.current.checkValidity()
+                : dateInputRef.current.checkValidity() || textInputRef.current.value === "";
+            textInputRef.current.setCustomValidity(isDateValid ? "" : "Invalid date");
+            dateInputRef.current.required = required !== undefined && required === true;
+        }
+    };
+    const onChangeInputText = (e) => {
+        const newDate = e.target.value;
+        setDisplayedDate(newDate);
+        if (moment(newDate, format, true).isValid()) {
+            setDate(moment(newDate, format).format(internalFormat));
+        }
+        else {
+            setDate("");
+        }
+    };
+    const onChangeInputDate = (e) => {
+        const newDate = e.target.value;
+        setDate(newDate);
+        if (moment(newDate, internalFormat, true).isValid())
+            setDisplayedDate(moment(newDate, internalFormat).format(format));
+        else
+            setDisplayedDate("");
+    };
+    useEffect(() => {
+        updateDateValidity();
+    });
+    useEffect(() => {
+        if (value) {
+            setDate(formattedDate(value.toString(), internalFormat, internalFormat));
+            setDisplayedDate(formattedDate(value.toString(), internalFormat, displayFormat));
+        }
+    }, [value]);
+    useEffect(() => {
+        if (date) {
+            onChange?.({ target: { value: date, name: name } });
+        }
+    }, [date]);
+    return (_jsx("div", { className: "cw-input-date-text", children: _jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsxs("div", { children: [_jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), _jsxs("span", { children: [_jsx(CwIcon, { iconId: "calendar" }), _jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/datetime/CwInputDatetime.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a string of text.
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel  input type=date    CwButton
+ *  ↑      ↑           ↑               ↑
+ *               ╭────────────────────╮╭════╮
+ *  ⌂  Birthdate │ 0000 / 00 / 00     │║ Ok ║
+ *               ╰────────────────────╯╰════╯
+ * ```
+ * @example
+ * ```tsx
+ * <CwInputDate
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ * />
+ * ```
+ */
+export function CwInputDatetime(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    inputProps.max = inputProps.max ?? "9999-01-01";
+    return (_jsx("div", { className: "cw-input-date", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "datetime-local", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/input/digit/CwDigit.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from "../../../../components/control/action/button/CwButton";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwLabel } from "../../../../components/display/text/label/CwLabel";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Input for entering a string of number.
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel     CwSelect        CwButton
+ *  ↑      ↑           ↑               ↑
+ *             ╭────────────────────╮╭════╮
+ *  ⌂  Address ││        2          │║ Ok ║
+ *             ╰────────────────────╯╰════╯
+ * ```
+ * @example
+ * ```tsx
+ * <CwDigit
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ * />
+ * ```
+ */
+export function CwDigit(props) {
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    return (_jsx("div", { className: "cw-input-text", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "number", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}