@cwellt_software/cwellt-reactjs-lib 1.2.14 → 1.2.15

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

@@ -1,210 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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 })] }) }));
-}