@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

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

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

@@ -14,8 +14,8 @@ export interface CwMultiFilterTagProps {
         g: number;
         b: number;
     };
-    /** color for text and outline of the tag/filter/chip, you can use hexToRGB("#222222") instead */
-    OnPrimaryColor: {
+    /** @deprecated No longer used. Color contrast is calculated automatically. Will be removed in future version. */
+    OnPrimaryColor?: {
         r: number;
         g: number;
         b: number;

package/dist/src/components/control/choice/multi-filter/components/tag/CwMultiFilterTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwMultiFilterTag.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/control/choice/multi-filter/components/tag/CwMultiFilterTag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,WAAW,qBAAqB;IACrC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,iGAAiG;IACjG,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,kBAAkB;AAClB,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;CAAI;AAE3G,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkCtD,CAAC"}
+{"version":3,"file":"CwMultiFilterTag.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/control/choice/multi-filter/components/tag/CwMultiFilterTag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,WAAW,qBAAqB;IACrC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;IACjB,wFAAwF;IACxF,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,iHAAiH;IACjH,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,kBAAkB;AAClB,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;CACtG;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+BtD,CAAC"}

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

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

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