@cwellt_software/cwellt-reactjs-lib 1.1.4 → 1.1.6

package/dist/src/components/control/choice/multi-filter/CwMultiFilter.js

@@ -1,298 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useEffect, useRef, useState } from "react";
-import { CwMultiFilterTag } from "./components/tag/CwMultiFilterTag";
-import styles from "./cw-multi-filter.module.css";
-/**
- * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
- * @remark
- * The CwMultiFilter component provides a user interface for selecting multiple filter options
- * organized by categories. Each filter option is represented as a clickable tag with customizable
- * colors. The component manages the selection state internally but reports changes via a callback.
- *
- * Filter tags should include the following properties:
- * - `Name`: Display name of the filter
- * - `Value`: Actual value used for filtering logic
- * - `Category`: Group the filter belongs to
- * - `ID`: Unique identifier for the filter
- * - `PrimaryColor`: Background color of the tag
- * - `OnPrimaryColor`: Text color of the tag
- *
- * ```
- * ╭───────────────────────────────────────────────────────────────╮
- * │ ╭──────────╮ ╭──────────╮ ╭──────────╮                        │
- * │ │FilterA x │ │FilterC x │ │FilterB x │  FilterC│          X   │
- * │ ╰──────────╯ ╰──────────╯ ╰──────────╯                        │
- * ╰───────────────────────────────────────────────────────────────╯
- *  │ (All) (CategoryA) (CategoryB)                               │
- *  │─────────────────────────────────────────────────────────────│
- *  │ ╭────────╮                                                  │
- *  │ │FilterF │                                                  │
- *  │ ╰────────╯                                                  │
- *  ╰─────────────────────────────────────────────────────────────╯
- * ```
-    * @example
- * ```tsx
- * import { CwMultiFilter, type CwMultiFilterTagProps, type ICwMultiFilterTag } from "cwellt-reactjs-lib";
- * import { useCallback, useState } from "react";
- * import { hexToRGB } from "../common/functions/color";
- *
- * function FilterExample() {
- *   // State to track selected filter tags
- *   const [selectedTags, setSelectedTags] = useState(new Set<CwMultiFilterTagProps>());
- *
- *   // Sample data to filter
- *   const [users, setUsers] = useState([
- *     { id: 1, name: "John", role: "admin", department: "IT" },
- *     { id: 2, name: "Sarah", role: "user", department: "HR" },
- *     // More users...
- *   ]);
- *
- *   // Filtered users based on selected tags
- *   const [filteredUsers, setFilteredUsers] = useState(users);
- *
- *   // Define filter options
- *   const filterOptions = new Set([
- *     {
- *       Name: "Admin",
- *       Value: "admin",
- *       Category: "Roles",
- *       ID: "Roles_admin",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
- *       PrimaryColor: hexToRGB("#cedcff")
- *     },
- *     {
- *       Name: "User",
- *       Value: "user",
- *       Category: "Roles",
- *       ID: "Roles_user",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
- *       PrimaryColor: hexToRGB("#cedcff")
- *     },
- *     {
- *       Name: "IT",
- *       Value: "IT",
- *       Category: "Departments",
- *       ID: "Departments_IT",
- *       OnPrimaryColor: hexToRGB("#a82037"),
- *       PrimaryColor: hexToRGB("#ffceda")
- *     },
- *     {
- *       Name: "HR",
- *       Value: "HR",
- *       Category: "Departments",
- *       ID: "Departments_HR",
- *       OnPrimaryColor: hexToRGB("#a82037"),
- *       PrimaryColor: hexToRGB("#ffceda")
- *     }
- *   ]);
- *
- *   // Handle filter changes
- *   const onChangeFilters = useCallback((tags: Set<ICwMultiFilterTag>) => {
- *     setSelectedTags(tags);
- *     const tagsArray = Array.from(tags);
- *
- *     // Get values for each category
- *     const roleValues = tagsArray
- *       .filter(tag => tag.Category === "Roles")
- *       .map(tag => tag.Value);
- *
- *     const departmentValues = tagsArray
- *       .filter(tag => tag.Category === "Departments")
- *       .map(tag => tag.Value);
- *
- *     // Apply filters
- *     if (tagsArray.length === 0) {
- *       // No filters applied
- *       setFilteredUsers(users);
- *     } else {
- *       let filtered = users;
- *
- *       if (roleValues.length > 0) {
- *         filtered = filtered.filter(user => roleValues.includes(user.role));
- *       }
- *
- *       if (departmentValues.length > 0) {
- *         filtered = filtered.filter(user => departmentValues.includes(user.department));
- *       }
- *
- *       setFilteredUsers(filtered);
- *     }
- *   }, [users]);
- *
- *   return (
- *     <div>
- *       <h2>Filter Users</h2>
- *       <div style={{ width: "50%" }}>
- *         <CwMultiFilter
- *           id="user-filter"
- *           allTags={filterOptions}
- *           onChangeSelectedTags={onChangeFilters}
- *           selectedTags={selectedTags}
- *         />
- *       </div>
- *       <div style={{ marginTop: "20px" }}>
- *         <h3>Filtered Results ({filteredUsers.length})</h3>
- *         <ul>
- *           {filteredUsers.map(user => (
- *             <li key={user.id}>{user.name} - {user.role} ({user.department})</li>
- *           ))}
- *         </ul>
- *       </div>
- *     </div>
- *   );
- * }
- * ```
- * @param {CwMultiFilterProps} props
- * @returns Set the `onChange` callback to a function to check for changes in the selected filters
- */
-export const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
-    const [filteredTags, setFilteredTags] = useState(new Set());
-    const [inputTextValue, setInputTextValue] = useState("");
-    const [isPanelOpen, setIsPanelOpen] = useState(false);
-    const [selectedCategory, setSelectedCategory] = useState("All");
-    const componentRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => {
-        function handleClickOutside(event) {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsPanelOpen(false);
-                setFilteredTags(new Set());
-                setSelectedCategory("All");
-                setInputTextValue("");
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-    const categoriesMappedToTags = () => {
-        const categoriesMap = new Map();
-        allTags.forEach(tag => {
-            const category = categoriesMap.get(tag.Category) || new Set();
-            category.add(tag);
-            categoriesMap.set(tag.Category, category);
-        });
-        return categoriesMap;
-    };
-    const handleClickCategory = (category) => {
-        setSelectedCategory(category);
-        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : new Set());
-    };
-    const rgbAString = (r, g, b) => {
-        return `rgb(${r}, ${g}, ${b})`;
-    };
-    const getColor = (category) => {
-        const test = categoriesMappedToTags().get(category)?.values().next().value;
-        if (test !== undefined) {
-            return {
-                onPrimary: rgbAString(test.OnPrimaryColor.r, test.OnPrimaryColor.g, test.OnPrimaryColor.b),
-                primary: rgbAString(test.PrimaryColor.r, test.PrimaryColor.g, test.PrimaryColor.b),
-            };
-        }
-        else {
-            return {
-                onPrimary: "var(--cw-color-on-primary)",
-                primary: "var(--cw-color-primary)"
-            };
-        }
-    };
-    const handleInputText = (input) => {
-        if (selectedCategory !== "All")
-            setSelectedCategory("All");
-        input = input.trimStart();
-        setInputTextValue(input);
-        if (input !== "") {
-            const newFilterTags = Array.from(allTags).filter(tag => !Array.from(selectedTags).some(t => t.ID === tag.ID) &&
-                tag.Name.replaceAll(" ", "").toLowerCase().includes(input.replaceAll(" ", "").toLowerCase()));
-            setFilteredTags(new Set(newFilterTags));
-        }
-        else {
-            setFilteredTags(new Set());
-        }
-    };
-    const addTag = (newTag) => {
-        newTag.Selected = true;
-        newTag.Removable = true;
-        newTag.Selectable = false;
-        if (selectedTags.has(newTag) || Array.from(selectedTags).some(t => t.ID === newTag.ID)) {
-            return;
-        }
-        else {
-            const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags?.(updatedTags);
-            setInputTextValue("");
-            //setFilteredTags(allTags);
-        }
-    };
-    const removeTag = (id) => {
-        const updatedTags = new Set(selectedTags);
-        const toDelete = Array.from(updatedTags).find(i => i.ID === id);
-        if (toDelete) {
-            toDelete.Selected = false;
-            toDelete.Selectable = true;
-            toDelete.Removable = false;
-            updatedTags.delete(toDelete);
-        }
-        onChangeSelectedTags?.(updatedTags);
-    };
-    useEffect(() => {
-        // force to load all tags on first render
-        if (selectedCategory === "All" && filteredTags.size === 0)
-            setFilteredTags(new Set());
-    }, [allTags]);
-    const handleDivClick = () => {
-        if (inputRef !== null) {
-            inputRef.current?.focus();
-        }
-    };
-    return (_jsxs("form", { ref: componentRef, id: id, className: styles["cw-multi-filter"], style: style, onSubmit: (e) => {
-            e.preventDefault();
-        }, children: [_jsxs("div", { onClick: handleDivClick, className: styles["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [_jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (_createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), _jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
-                                    switch (e.key) {
-                                        case "Enter":
-                                        case "Tab":
-                                            if (inputTextValue.trim().length > 0 && filteredTags.size > 0) {
-                                                const foundTag = Array.from(filteredTags)[0];
-                                                if (foundTag) {
-                                                    addTag(foundTag);
-                                                }
-                                            }
-                                            break;
-                                        case "Backspace": {
-                                            if (inputTextValue === "" && selectedTags.size > 0) {
-                                                removeTag(Array.from(selectedTags).toReversed()[0].ID);
-                                            }
-                                            break;
-                                        }
-                                    }
-                                } })] }), selectedTags.size > 0 ? (_jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
-                            e.preventDefault();
-                            onChangeSelectedTags?.(new Set());
-                        } })) : null] }), _jsxs("section", { className: styles["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [_jsxs("nav", { children: [_jsx("button", { style: selectedCategory === "All"
-                                    ? {
-                                        backgroundColor: "var(--cw-color-primary-container)",
-                                        color: "var(--cw-color-primary)",
-                                        outline: "2px solid var(--cw-color-primary)",
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {}, onClick: () => handleClickCategory("All"), children: "SEARCH IN ALL CATEGORIES" }), Array.from(categoriesMappedToTags().keys()).map(category => (_jsx("button", { style: selectedCategory === category
-                                    ? {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                        outline: "2px solid " + getColor(category).onPrimary,
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {
-                                        backgroundColor: getColor(category).primary,
-                                        color: getColor(category).onPrimary,
-                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), _jsx("ul", { children: Array.from(filteredTags).map((props) => (_jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from(selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
-                                if (Array.from(selectedTags).some(p => p.ID === props.ID))
-                                    removeTag(props.ID);
-                                else
-                                    addTag(props);
-                            } }, props.ID))) })] })] }));
-};

package/dist/src/components/control/choice/multi-filter/components/tag/CwMultiFilterTag.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CwIcon } from "../../../../../display/graphics/icon/CwIcon";
-import styles from "./cw-multi-filter-tag.module.css";
-export const CwMultiFilterTag = props => {
-    const { ID, Name, Value, Category, Removable, PrimaryColor, OnPrimaryColor, Selectable, Selected, OnSelect } = props;
-    const BackgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
-    const TextColor = `rgb(${OnPrimaryColor.r},${OnPrimaryColor.g},${OnPrimaryColor.b})`;
-    return (_jsxs("li", { className: styles["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
-            color: TextColor,
-            backgroundColor: BackgroundColor,
-            opacity: Selected && !Removable ? "0.5" : "1",
-            outlineColor: TextColor
-        }, onClick: () => {
-            if (Selectable)
-                OnSelect?.(props);
-        }, children: [_jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (_jsx("span", { onClick: () => props.OnRemove?.(props), children: _jsx(CwIcon, { iconId: "close" }) }))] }));
-};

package/dist/src/components/control/choice/multiselect/CwHeadFilter.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import { CwIcon } from "../../../display/graphics/icon/CwIcon";
-export function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
-    // - Reference div content input search
-    const headContent_ref = React.createRef();
-    const optionList = document.getElementsByClassName("cw-multiselect-option-list");
-    const refContent = useRef(null);
-    // - Hooks show clear button
-    const [_isShowClearButton, setShowClearButton] = useState(false);
-    // - Hooks value of input search
-    const [inputValue, setInputValue] = useState("");
-    // Ref [ input ] ( cwellt_headFilterTab )
-    const headInputFitlerTab_ref = useRef(null);
-    const headFilter_content_tags_ref = useRef(null);
-    // cwellt_headFilterTab [ onclick ( show dropDown and enable input .focus() )]
-    const onClickHeaderFilterTab = () => {
-        // Show and hide dropDownContainer - onShowDropDown [ interface ]
-        cwelltFilterTabMultiSelectProps.onShowDropDown();
-        // Click on dropDown enable input - [ ref : headFitlerTab_ref ] and evaluating not null
-        if (headInputFitlerTab_ref.current) {
-            headInputFitlerTab_ref.current.focus();
-        }
-    };
-    // - on change input search
-    const onChangeInputSearch = (event_onChangeInput) => {
-        // let searchInput_length = event_onChangeInput.currentTarget.value.length;
-        // if (searchInput_length > 0) {
-        // 	setShowClearButton(true);
-        // } else {
-        // 	setShowClearButton(false);
-        // }
-        setInputValue(event_onChangeInput.currentTarget.value);
-        // - onChangeSearch
-        cwelltFilterTabMultiSelectProps.onChangeSearch(event_onChangeInput);
-    };
-    // - clear input value
-    const onClearInputValue = (e) => {
-        setInputValue("");
-        setShowClearButton(false);
-        // onClearValue
-        cwelltFilterTabMultiSelectProps.onClearValue(e);
-    };
-    // - onKeyPress
-    const onKeyPressInput = (event_keyPress) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onKeypressInput === "function") {
-            cwelltFilterTabMultiSelectProps.onKeypressInput(event_keyPress);
-            // clear input field
-            if (event_keyPress.key === "Enter") {
-                setInputValue("");
-            }
-        }
-    };
-    const handleBlur = (event) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onBlur === "function") {
-            cwelltFilterTabMultiSelectProps.onBlur(event);
-        }
-    };
-    const clickOptionList = () => {
-        if (optionList.length > 0) {
-            Array.from(optionList).forEach(index => {
-                const optionListItem = index;
-                optionListItem.addEventListener("click", () => {
-                    setInputValue("");
-                });
-            });
-        }
-    };
-    //#region useEffect
-    useEffect(() => {
-        window.addEventListener("keypress", onKeyPressInput);
-        clickOptionList();
-        return () => {
-            window.removeEventListener("keypress", onKeyPressInput);
-        };
-    });
-    //#endregion
-    return (_jsxs("div", { className: cwelltFilterTabMultiSelectProps.className + " cw-headfilter", style: cwelltFilterTabMultiSelectProps.style, id: cwelltFilterTabMultiSelectProps.Id, onMouseLeave: cwelltFilterTabMultiSelectProps.onMouseLeave, ref: refContent, children: [_jsxs("div", { className: "cw-headfilter-wrapper", onClick: () => onClickHeaderFilterTab(), children: [_jsx(CwIcon, { iconId: "search", size: "large" }), _jsxs("div", { className: "cw-headfilter-content", children: [_jsx("div", { className: "cw-flex-row cw-gap-small cw-align-left-center cw-flex-wrap", ref: headFilter_content_tags_ref, children: cwelltFilterTabMultiSelectProps.tagValueContent }), _jsx("div", { className: "headFilter_search_content", ref: headContent_ref, children: _jsx("input", { id: "headFilter_inputSearch", value: inputValue, onKeyPress: event_keyPress => onKeyPressInput(event_keyPress), onBlur: handleBlur, type: "search", onChange: event_onChangeInput => onChangeInputSearch(event_onChangeInput), placeholder: cwelltFilterTabMultiSelectProps.placeholder_desc, ref: headInputFitlerTab_ref }) })] }), _jsx(CwIcon, { iconId: "close-circle", onClick: (e) => onClearInputValue(e) })] }), cwelltFilterTabMultiSelectProps.children] }));
-}