@cwellt_software/cwellt-reactjs-lib 1.2.0 → 1.2.2

package/dist/src/components/control/input/file/CwFileUpload.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-export function CwFileUpload(fileUploadProps) {
-    const [previewURL, setPreviewURL] = useState("");
-    const [error, setError] = useState(null);
-    const [_selectedFileName, setSelectedFileName] = useState("");
-    const [_currentHexContent, setCurrentHexContent] = useState("");
-    useEffect(() => {
-        // If there is hexadecimal preview content, set the Preview URL
-        if (fileUploadProps.file?.Bindata) {
-            setPreviewURL(`data:image/png;base64,${fileUploadProps.file.Bindata}`);
-        }
-    }, [fileUploadProps.file?.Bindata]);
-    const handleFileChange = (event) => {
-        const file = event.target.files?.[0];
-        setSelectedFileName(file?.name ?? "");
-        if (file) {
-            const allowedExts = fileUploadProps.accept.split(',').map(ext => ext.trim().replace('.', '').toLowerCase());
-            const fileExt = file.name.split('.').pop()?.toLowerCase() ?? "";
-            if (!allowedExts.includes(fileExt)) {
-                setError(`Invalid file type. Only ${fileUploadProps.acceptString} files are allowed.`);
-                setPreviewURL("");
-                return;
-            }
-            setError(null);
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                if (typeof reader.result === "string") {
-                    const hexContent = arrayBufferToHex(reader.result);
-                    setCurrentHexContent(hexContent);
-                    setPreviewURL(reader.result);
-                    setCurrentHexContent(arrayBufferToHex(reader.result));
-                    // Call function to store hexadecimal content
-                    fileUploadProps.onSaveHexContent(arrayBufferToHex(reader.result));
-                }
-            };
-            reader.readAsDataURL(file);
-        }
-    };
-    // Function to convert the image buffer into hexadecimal content
-    const arrayBufferToHex = (dataUrl) => {
-        // Decodes the base64 of the URL data
-        const base64 = dataUrl.split(",")[1];
-        const binary = atob(base64);
-        let hex = "";
-        for (let i = 0; i < binary.length; i++) {
-            hex += binary.charCodeAt(i).toString(16).padStart(2, "0");
-        }
-        return hex;
-    };
-    return (_jsxs("div", { children: [_jsxs("div", { className: "row", children: [_jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (_jsx("div", { className: "row", children: _jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && _jsx("div", { className: "row error", children: error }), _jsx("div", { className: "row", children: _jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
-}

package/dist/src/components/control/input/file/CwFileUploadMultiple.js

@@ -1,148 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { CwIcon } from '../../../display/graphics/icon/CwIcon';
-import { CwButton } from '../../action/button/CwButton';
-import styles from "./cw-file-upload-multiple.module.css";
-export function CwFileUploadMultiple(fileUploadProps) {
-    const fileInputRef = useRef(null);
-    const [selectedFiles, setSelectedFiles] = useState([]);
-    const getFileExtension = (filename) => {
-        return filename.split('.').pop()?.toUpperCase() || '';
-    };
-    const validateFile = (file) => {
-        // Validate the size of the file
-        if (fileUploadProps.maxFileSize) {
-            const fileSizeInMB = file.size / (1024 * 1024);
-            if (fileSizeInMB > fileUploadProps.maxFileSize) {
-                return {
-                    isValid: false,
-                    error: `File "${file.name}" is too large. Maximum size allowed is ${fileUploadProps.maxFileSize}MB.`
-                };
-            }
-        }
-        // Validate file type by extension (based in accept)
-        if (fileUploadProps.accept) {
-            const acceptedExtensions = fileUploadProps.accept.split(',').map(ext => ext.trim().toLowerCase());
-            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-            const isExtensionValid = acceptedExtensions.some(ext => {
-                if (ext.startsWith('.')) {
-                    return ext === fileExtension;
-                }
-                return false;
-            });
-            if (!isExtensionValid) {
-                return {
-                    isValid: false,
-                    error: `File "${file.name}" has an invalid format. Allowed formats: ${fileUploadProps.accept}`
-                };
-            }
-        }
-        // Validate MIME type if specified
-        if (fileUploadProps.allowedTypes && fileUploadProps.allowedTypes.length > 0) {
-            const isMimeTypeValid = fileUploadProps.allowedTypes.includes(file.type);
-            if (!isMimeTypeValid) {
-                return {
-                    isValid: false,
-                    error: `File "${file.name}" has an invalid MIME type. Allowed types: ${fileUploadProps.allowedTypes.join(', ')}`
-                };
-            }
-        }
-        return { isValid: true };
-    };
-    const processFiles = (files, existingFiles = []) => {
-        const fileArray = Array.from(files);
-        const validFiles = [...existingFiles]; // Start with existing files
-        const errors = [];
-        for (const file of fileArray) {
-            // Check if the file already exists (by name and size)
-            const isDuplicate = existingFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
-            if (isDuplicate) {
-                errors.push(`File "${file.name}" is already selected.`);
-                continue;
-            }
-            const validation = validateFile(file);
-            if (!validation.isValid) {
-                errors.push(validation.error);
-                continue;
-            }
-            validFiles.push(file);
-        }
-        // Show errors if any
-        if (errors.length > 0) {
-            if (fileUploadProps.onError) {
-                fileUploadProps.onError(errors.join('\n'));
-            }
-            else {
-                console.error(errors.join('\n'));
-                alert(errors.join('\n')); // Fallback if there is no onError
-            }
-        }
-        // If not multiple, only take the first valid file (replace)
-        if (!fileUploadProps.multiple && validFiles.length > 1) {
-            return [validFiles[validFiles.length - 1]]; // Take the last file added
-        }
-        return validFiles;
-    };
-    const updateFileInput = (files) => {
-        // Create FileList with all files
-        const dataTransfer = new DataTransfer();
-        files.forEach(file => dataTransfer.items.add(file));
-        if (fileInputRef.current) {
-            fileInputRef.current.files = dataTransfer.files;
-        }
-        if (fileUploadProps.onSelect) {
-            fileUploadProps.onSelect(dataTransfer.files);
-        }
-    };
-    const handleFileSelect = (event) => {
-        const files = event.target.files;
-        if (files && files.length > 0) {
-            const updatedFiles = processFiles(files, selectedFiles);
-            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
-                setSelectedFiles(updatedFiles);
-                updateFileInput(updatedFiles);
-            }
-            else {
-                // Clear input if no new valid files were added
-                if (fileInputRef.current) {
-                    fileInputRef.current.value = '';
-                }
-            }
-        }
-    };
-    const removeFile = (indexToRemove) => {
-        const newFiles = selectedFiles.filter((_, index) => index !== indexToRemove);
-        setSelectedFiles(newFiles);
-        updateFileInput(newFiles);
-    };
-    const removeAllFiles = () => {
-        setSelectedFiles([]);
-        if (fileInputRef.current) {
-            fileInputRef.current.value = '';
-        }
-        if (fileUploadProps.onSelect) {
-            fileUploadProps.onSelect(null);
-        }
-    };
-    const handleButtonClick = () => {
-        fileInputRef.current?.click();
-    };
-    const handleDragOver = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    const handleDrop = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const files = event.dataTransfer.files;
-        if (files && files.length > 0) {
-            const updatedFiles = processFiles(files, selectedFiles);
-            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
-                setSelectedFiles(updatedFiles);
-                updateFileInput(updatedFiles);
-            }
-        }
-    };
-    return (_jsxs("div", { className: `${styles.fileUploadContainer} ${fileUploadProps.className}`, children: [_jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelect, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles.hiddenInput }), selectedFiles.length === 0 ? (_jsxs("div", { className: `${styles.uploadArea} ${fileUploadProps.disabled ? styles.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [_jsx(CwIcon, { iconId: "upload" }), _jsx("p", { className: `${styles.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), _jsxs("p", { className: `${styles.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (_jsxs("div", { className: styles.filesContainer, children: [_jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [_jsxs("small", { className: styles.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), _jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (_jsxs("div", { className: styles.fileItem, children: [_jsxs("div", { className: styles.fileIcon, children: [_jsx(CwIcon, { iconId: "page" }), _jsx("span", { className: styles.fileExtension, children: getFileExtension(file.name) })] }), _jsxs("div", { className: styles.fileInfo, children: [_jsx("p", { className: styles.fileName, children: file.name }), _jsxs("p", { className: styles.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), _jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles.smallButton })] }, index))), fileUploadProps.multiple && (_jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (_jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
-}
-;

package/dist/src/components/control/input/image/CwInputImage.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { CwButton } from "../../../../components/control/action/button/CwButton";
-import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
-export function CwInputImage(props) {
-    const [_uploadedImage, setUploadedImage] = useState(null);
-    const inputRef = useRef(null);
-    const { allowedImageFormats, onChange, ...inputProps } = props;
-    const allowedFormats = allowedImageFormats || ["image/jpeg", "image/png", "image/gif"];
-    const isValidFileType = (type) => allowedFormats.includes(type);
-    const handleFile = (file) => {
-        if (file && isValidFileType(file.type)) {
-            const imgURL = URL.createObjectURL(file);
-            setUploadedImage(imgURL);
-            if (onChange)
-                onChange(imgURL);
-        }
-        else {
-            // Optionally handle unsupported file types
-            if (onChange)
-                onChange(null);
-        }
-    };
-    const handleDrop = (e) => {
-        e.preventDefault();
-        const file = e.dataTransfer.files[0];
-        handleFile(file);
-    };
-    const onPasteButtonClick = async () => {
-        try {
-            const clipboard = navigator.clipboard;
-            const clipboardItems = await clipboard.read();
-            for (const clipboardItem of clipboardItems) {
-                for (const type of clipboardItem.types) {
-                    if (type.startsWith("image/")) {
-                        const blob = await clipboardItem.getType(type);
-                        handleFile(blob);
-                    }
-                }
-            }
-        }
-        catch (err) {
-            console.error("Failed to read clipboard:", err);
-            alert("Failed to read from clipboard. Ensure the app has permission to access clipboard.");
-        }
-    };
-    const handleFileChange = (e) => {
-        const file = e.target.files?.[0];
-        handleFile(file ?? null);
-    };
-    return (_jsxs("div", { className: "cw-input-image", children: [_jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [_jsx("p", { children: "Drop image here" }), _jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), _jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [_jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [_jsx(CwIcon, { iconId: "paste" }), "\u2002Paste"] }), _jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [_jsx(CwIcon, { iconId: "folder-open" }), "\u2002Browse"] })] }), _jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
-}

package/dist/src/components/control/input/image-area/CwImageArea.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
-import { CwAlign } from "../../../../components/layout/align/CwAlign";
-/**
- * An image with a selectable rectangle region, useful for cropping or selecting a section of the image
- * @remarks ```txt
- * ╭――――――――――――――――――――――――――――――――――――╮
- * │  +═══════════════════+             │
- * │  ║     .:::::::.     ║             │
- * │  ║   .'     ':::     ║             │
- * │  ║   :        ::.    ║             │
- * │  ║   :-  --   ' :    ║             │
- * │  ║   :        ..:    ║             │
- * │  ║   :.--    .'::;   ║             │
- * │  ║   ::.__ .'  ':;_  ║             │
- * │  ║   ::/""".    .' ""║._           │
- * │  +═══════════════════+  :          │
- * │     .:::  .'..'          '         │
- * │    . :'  .         '     ':        │
- * │    : '  .:        .     . .        │
- * │    :'   .:        :    .:  "--__   │
- * │   /'   .::        :   .            │
- * │  _: . ::::        '   .            │
- * │.'    '-----------:   .             │
- * │ :                    '---''--'--   │
- * │ '--'"""""----------''              │
- * ╰――――――――――――――――――――――――――――――――――――╯
- * ```
- * @example
- * <CwImageArea src="path/to/image.png" _onSelectionSuccess={img => setImage(img)} />
- */
-export const CwImageArea = forwardRef((props, ref) => {
-    const { alignProps: alignProps, initialSelectionArea: initialSelectionArea, onSelectionEnd, onSelectionStart, onSelectionSuccess, selectionAreaAttenuation: selectionAreaAttenuation, selectionAreaStyle: selectionAreaStyle, ...imgProps } = props;
-    // Default no-op functions for selection callbacks
-    const onSelectionStartHandler = onSelectionStart || (() => true);
-    const onSelectionEndHandler = onSelectionEnd || (() => true);
-    const onSelectionSuccessHandler = onSelectionSuccess || (() => { });
-    // Ref to the image element and state management hooks
-    const imageRef = useRef(null);
-    const [selectedImage, setSelectedImage] = useState();
-    const [opacity, setOpacity] = useState(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? "1.0");
-    // Track drag start position and selected area
-    const [dragStart, setDragStart] = useState(null);
-    const [selectedArea, setSelectedArea] = useState(initialSelectionArea ?? null);
-    // Expose component methods using ref
-    useImperativeHandle(ref, () => ({
-        getSelectedImage: () => selectedImage
-    }));
-    // Handle mouse down event to initiate selection
-    const onMouseDown = useCallback((event) => {
-        const rect = imageRef.current?.getBoundingClientRect();
-        if (rect) {
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            if (onSelectionStartHandler(x, y)) {
-                setDragStart({ x, y });
-            }
-            setSelectedArea(null);
-            setOpacity(selectionAreaStyle?.opacity ?? 1);
-        }
-    }, [onSelectionStartHandler]);
-    // Update selection area as mouse moves
-    const onMouseMove = useCallback((event) => {
-        if (dragStart && imageRef.current) {
-            const rect = imageRef.current.getBoundingClientRect();
-            const currentX = event.clientX - rect.left;
-            const currentY = event.clientY - rect.top;
-            const width = Math.abs(currentX - dragStart.x);
-            const height = Math.abs(currentY - dragStart.y);
-            setSelectedArea(new DOMRect(Math.min(dragStart.x, currentX), Math.min(dragStart.y, currentY), width, height));
-        }
-    }, [dragStart]);
-    // Finalize selection on mouse up
-    const onMouseUp = useCallback(() => {
-        if (selectedArea && imageRef.current) {
-            // Calculate and scale the selected area to the image's natural size
-            const rect = imageRef.current.getBoundingClientRect();
-            const scaleX = imageRef.current.naturalWidth / rect.width;
-            const scaleY = imageRef.current.naturalHeight / rect.height;
-            const scaledArea = new DOMRect(selectedArea.x * scaleX, selectedArea.y * scaleY, selectedArea.width * scaleX, selectedArea.height * scaleY);
-            if (onSelectionEndHandler(scaledArea))
-                createSelectedImage(scaledArea);
-            setOpacity(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? 1);
-            setDragStart(null);
-        }
-    }, [selectedArea, onSelectionEndHandler]);
-    // Create an image from the selected area
-    const createSelectedImage = useCallback((scaledArea) => {
-        const canvas = document.createElement("canvas");
-        canvas.width = scaledArea.width;
-        canvas.height = scaledArea.height;
-        const ctx = canvas.getContext("2d");
-        if (imageRef.current && ctx) {
-            ctx.drawImage(imageRef.current, scaledArea.x, scaledArea.y, scaledArea.width, scaledArea.height, 0, 0, canvas.width, canvas.height);
-            const selectedImageURL = canvas.toDataURL("image/png");
-            setSelectedImage(selectedImageURL);
-            onSelectionSuccessHandler(selectedImageURL);
-        }
-    }, [onSelectionSuccessHandler]);
-    // Render the component UI
-    return (_jsx("div", { className: "cw-image-area", children: _jsxs(CwAlign, { position: "relative", ...alignProps, children: [_jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (_jsx("section", { style: {
-                        ...selectionAreaStyle,
-                        height: `${selectedArea.height}px`,
-                        left: `${selectedArea.x}px`,
-                        opacity: opacity,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: `${selectedArea.y}px`,
-                        transition: "opacity 0.5s ease-in-out",
-                        width: `${selectedArea.width}px`
-                    } }))] }) }));
-});
-CwImageArea.displayName = "CwImageArea";

package/dist/src/components/control/input/number/CwInputNumber.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CwInputNumber(CwInputNumberProps) {
-    const handleChange = (e) => {
-        CwInputNumberProps.onChange(e.target.value);
-    };
-    return (_jsxs("div", { className: CwInputNumberProps.labelPosition == "column"
-            ? "cw-flex-column cw-gap-none"
-            : "cw-flex-row", children: [_jsx("label", { className: CwInputNumberProps.disabled === true
-                    ? CwInputNumberProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
-                    : CwInputNumberProps.labelClassName + " " + "cw_label_text", children: CwInputNumberProps.labelName }), _jsx("input", { id: CwInputNumberProps.id, type: "number", value: CwInputNumberProps.value, onChange: e => handleChange(e), className: CwInputNumberProps.className + " " + " cw-input-number", placeholder: CwInputNumberProps.placeholder == undefined ? "Write a number please" : CwInputNumberProps.placeholder, style: CwInputNumberProps.style, disabled: CwInputNumberProps.disabled, required: CwInputNumberProps.required, step: CwInputNumberProps.step, min: CwInputNumberProps.min, max: CwInputNumberProps.max })] }));
-}

package/dist/src/components/control/input/phone/CwInputPhone.js

@@ -1,24 +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 telephone number.
- * @remarks
- * ```txt
- * CwIcon CwLabel      CwSelect      CwButton
- *  ↑     ↑            ↑             ↑
- *           ╭────────────────────╮╭════╮
- *  (  Phone ││ 0123456789+       │║ Ok ║
- *           ╰────────────────────╯╰════╯
- * ```
- * @example
- * ```tsx
- * <CwInputPhone iconProps={{iconId:"phone"}} labelProps={{children:"Phone"}} />
- * ```
- */
-export function CwInputPhone(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
-    return (_jsx("div", { className: "cw-input-phone", children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: "tel", placeholder: "+## ### ### ###", pattern: "[+0-9 ]*", maxLength: 16, ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
-}

package/dist/src/components/control/input/text/CwInputText.js

@@ -1,31 +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     CwSelect        CwButton
- *  ↑      ↑           ↑               ↑
- *             ╭────────────────────╮╭════╮
- *  ⌂  Address ││ Sunset Valley, 2  │║ Ok ║
- *             ╰────────────────────╯╰════╯
- * ```
- * @example
- * ```tsx
- * <CwInputText
- *   iconProps={{ id: "home" }}
- *   labelProps={{ children: "Name", width: "100px" }}
- *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
- * />
- * ```
- */
-export function CwInputText(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, className, ...inputProps } = props;
-    const containerClassName = className
-        ? `cw-input-text ${className}`
-        : "cw-input-text";
-    return (_jsx("div", { className: containerClassName, children: _jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
-}

package/dist/src/components/control/input/text-area/CwTextArea.js

@@ -1,9 +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";
-export function CwTextArea(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, resize, ...textareaProps } = props;
-    return (_jsx("div", { className: "cw-text-area", children: _jsxs(CwAlign, { ...alignProps, children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: resize } }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
-}

package/dist/src/components/control/input/time/CwTime.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=time    CwButton
- *  ↑      ↑           ↑               ↑
- *               ╭────────────────────╮╭════╮
- *  ⌂  Birthdate │ 00:00              │║ Ok ║
- *               ╰────────────────────╯╰════╯
- * ```
- * @example
- * ```tsx
- * <CwTime
- *   iconProps={{ iconId: "Birthdate" }}
- *   labelProps={{ children: "Name", width: "100px" }}
- *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
- * />
- * ```
- */
-export function CwTime(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: "time", ...inputProps }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
-}

package/dist/src/components/control/input/weekday/CwWeekdaySelector.js

@@ -1,143 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import styles from "./cw-weekday-selector.module.css";
-/**
- * This class represents a week where days can be selected or unselected
- * @remark Selected days are in UPPERCASE, unselected days are in lowercase
- * ```
- * Monday     = "M" | "m"
- * Tuesday    = "T" | "t"
- * Wendnesday = "W" | "w"
- * thuRsday   = "R" | "r"
- * Friday     = "F" | "f"
- * Saturday   = "S" | "s"
- * sUnday     = "U" | "u"
- * ```
- */
-export class Weekdays {
-    static WEEKDAYS_STANDARD_ARRAY_FULL = ["M", "T", "W", "R", "F", "S", "U"];
-    static WEEKDAYS_STANDARD_ARRAY_EMPTY = ["m", "t", "w", "r", "f", "s", "u"];
-    static WEEKDAYS_STANDARD_STRING_FULL = "MTWRFSU";
-    static WEEKDAYS_STANDARD_STRING_EMPTY = "mtwrfsu";
-    static WEEKDAYS_TO_USA_LETTER_FORMAT = new Map([
-        ["M", "M"],
-        ["T", "T"],
-        ["W", "W"],
-        ["R", "T"],
-        ["F", "F"],
-        ["S", "S"],
-        ["U", "S"]
-    ]);
-    static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
-        ["M", "Mon"],
-        ["T", "Tue"],
-        ["W", "Wed"],
-        ["R", "Thu"],
-        ["F", "Fri"],
-        ["S", "Sat"],
-        ["U", "Sun"]
-    ]);
-    static WEEKDAY_MAP = {
-        0: "U",
-        1: "M",
-        2: "T",
-        3: "W",
-        4: "R",
-        5: "F",
-        6: "S"
-    };
-    days;
-    constructor(days = Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL) {
-        if (typeof days === "string")
-            this.days = this.normalize(days.split(""));
-        else
-            this.days = this.normalize(days);
-    }
-    includes(day) {
-        return this.days.includes(day);
-    }
-    static fromString(value) {
-        return new Weekdays(value.split(""));
-    }
-    static isValidToday(validFrom, validUntil, validWeekdays) {
-        const today = new Date();
-        // Check if today is within the validity period
-        if (today < validFrom || today > validUntil) {
-            return false;
-        }
-        // Convert today's weekday to Weekday type
-        const todayWeekday = Weekdays.WEEKDAY_MAP[today.getDay()];
-        // Check if today's weekday is in the validWeekdays array
-        return validWeekdays.includes(todayWeekday);
-    }
-    normalize(weekdays) {
-        const uniqueWeekdays = new Set(weekdays);
-        if (uniqueWeekdays.size != 7)
-            throw Error(`Illegal weekday string ${Array.from(uniqueWeekdays).join("")}`);
-        return Weekdays.WEEKDAYS_STANDARD_STRING_FULL.split("").map(day => {
-            if (uniqueWeekdays.has(day)) {
-                return day;
-            }
-            else if (uniqueWeekdays.has(day.toLowerCase())) {
-                return day.toLowerCase();
-            }
-            else {
-                throw Error(`Illegal weekday string ${weekdays.join("")}`);
-            }
-        });
-    }
-    toString() {
-        return this.days.join("").trim();
-    }
-    toStringFormatted(limiters = { startExistingDay: "{", endExsitingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
-        const result = new Array();
-        [...this.days].forEach((letter, index) => {
-            if (letter === letter.toUpperCase()) {
-                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExsitingDay);
-            }
-            else if (letter === letter.toLowerCase()) {
-                result.push(limiters.startMissingDay +
-                    format.get(Weekdays.WEEKDAYS_STANDARD_STRING_FULL.charAt(index)) +
-                    limiters.endMissingDay);
-            }
-        });
-        return result.join(limiters.separator).trim();
-    }
-    toArray() {
-        return [...this.days];
-    }
-    isEmpty() {
-        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_EMPTY;
-    }
-    isFull() {
-        return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_FULL;
-    }
-    static getFullWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL;
-    }
-    static getEmptyWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY;
-    }
-}
-export const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
-    const [selectedDays, setSelectedDays] = useState(Weekdays.fromString(value));
-    useEffect(() => {
-        setSelectedDays(Weekdays.fromString(value));
-    }, [value]);
-    const handleChange = (day, checked) => {
-        const currentDays = selectedDays.toArray();
-        let updated;
-        if (checked) {
-            updated = currentDays.filter(d => d !== day.toLowerCase());
-            updated.push(day);
-        }
-        else {
-            updated = currentDays.filter(d => d !== day);
-            updated.push(day.toLowerCase());
-        }
-        const newWeekdays = new Weekdays(updated);
-        setSelectedDays(newWeekdays);
-        onChange?.(newWeekdays.toString());
-    };
-    return (_jsx("div", { className: styles["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (_jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
-};