@cwellt_software/cwellt-reactjs-lib 1.0.9 → 1.1.1

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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.d.ts

@@ -3,7 +3,7 @@ import { CwButtonProps } from "../../../../components/control/action/button/CwBu
 import { CwIconProps } from "../../../../components/display/graphics/icon/CwIcon";
 import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
 import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
-export interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, "className"> {
+export interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, never> {
     /** Props to define alignment and size; undefined == column
      * @example alignProps={{direction:"row"}} */
     alignProps?: CwAlignProps;

package/dist/src/components/control/input/text/CwInputText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwInputText.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/text/CwInputText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAY,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACvF;iDAC6C;IAC7C,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;gDAC4C;IAC5C,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;8DAC0D;IAC1D,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;+CAC2C;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAiBlD"}
+{"version":3,"file":"CwInputText.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/input/text/CwInputText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAY,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACjF;iDAC6C;IAC7C,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;gDAC4C;IAC5C,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;8DAC0D;IAC1D,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;+CAC2C;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAqBlD"}

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

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

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

@@ -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=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

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