@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

package/dist/src/components/control/choice/checkbox/CwCheckbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwCheckbox(CwCheckboxProps) {
+    const handleChange = (e) => {
+        CwCheckboxProps.onChange?.(e.target.checked);
+    };
+    const inputElement = (_jsx("input", { id: CwCheckboxProps.id, type: "checkbox", checked: CwCheckboxProps.checked, onChange: e => handleChange(e), className: CwCheckboxProps.className ?? '', style: CwCheckboxProps.style, disabled: CwCheckboxProps.disabled }));
+    if (!CwCheckboxProps.labelName) {
+        return inputElement;
+    }
+    return (_jsxs("div", { className: CwCheckboxProps.labelPosition === "inline"
+            ? "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer
+            : CwCheckboxProps.labelPosition === "column"
+                ? "cw_checkboxContent cwellt_flex_column" + " " + CwCheckboxProps.classNameContainer
+                : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (_jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
+}

package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts

@@ -0,0 +1,35 @@
+import type { CwInputFeedback } from "../../../../common/interfaces/CwFormTypes";
+import { CwLabelProps } from "../../../../components/display/text/label/CwLabel";
+import { CwAlignProps } from "../../../../components/layout/align/CwAlign";
+export interface CheckboxOption {
+    /** Value sent to onChange */
+    value: string;
+    /** Text displayed next to the checkbox */
+    label: string;
+    /** Disables this specific option */
+    disabled?: boolean;
+}
+export interface CwCheckboxGroupProps {
+    /** List of options to display */
+    options: CheckboxOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when selection changes - returns full array of selected values */
+    onChange: (selected: string[]) => void;
+    /** Props for the label component */
+    labelProps?: CwLabelProps;
+    /** Props for alignment */
+    alignProps?: CwAlignProps;
+    /** Marks the group as required */
+    required?: boolean;
+    /** Disables all options */
+    disabled?: boolean;
+    /** Layout alignment of each individual checkbox: "row" (default) | "column" */
+    optionsAlignment?: "row" | "column";
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Error or info messages below the group */
+    feedback?: CwInputFeedback | CwInputFeedback[];
+}
+export declare function CwCheckboxGroup({ options, value, onChange, labelProps, alignProps, required, disabled, optionsAlignment, className, feedback, }: CwCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwCheckboxGroup.d.ts.map

package/dist/src/components/control/choice/checkbox/CwCheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwCheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/checkbox/CwCheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAW,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAW,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAIpF,MAAM,WAAW,cAAc;IAC9B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACpC,iCAAiC;IACjC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oCAAoC;IACpC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,KAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,gBAAwB,EACxB,SAAS,EACT,QAAQ,GACR,EAAE,oBAAoB,2CA+CtB"}

package/dist/src/components/control/choice/deprecated/MultiSelect_deprecated_.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, Tag } from "antd";
+import * as React from "react";
+const { Option, OptGroup } = Select;
+export class MultiSelect extends React.Component {
+    constructor(Props) {
+        super(Props);
+        this.state = {
+            selected: null,
+            isVisibleDropDown: false,
+            activeClassName: ""
+        };
+    }
+    componentDidMount() {
+        this.setState({
+            selected: this.props.selectedItems?.map((s) => ({
+                type: s.type,
+                id: s.id,
+                despription: s.despription,
+                color: s.color
+            }))
+        });
+        this.onClickSelect = this.onClickSelect.bind(this);
+    }
+    onClickSelect = () => {
+        this.setState({
+            isVisibleDropDown: !this.state.isVisibleDropDown
+        });
+        this.setState({
+            activeClassName: "cwelltSelectDropDown_active"
+        });
+    };
+    handleOnDropDownVisibleChange = () => {
+        const dropDown_content = document.getElementsByClassName("cwelltSelectDropDown");
+        for (let i = 0; i <= dropDown_content.length; i++) {
+            dropDown_content[i]?.addEventListener("mouseleave", () => {
+                this.setState({
+                    isVisibleDropDown: false
+                });
+            });
+        }
+    };
+    onKeyUpSelect = (e_KeyUp_select) => {
+        if (e_KeyUp_select.key === "Enter" || e_KeyUp_select.key === "Escape") {
+            this.setState({
+                isVisibleDropDown: false
+            });
+        }
+        else {
+            this.setState({
+                isVisibleDropDown: true
+            });
+        }
+    };
+    // mouseHover dropDown active
+    onMouseHoverDropDownActive = () => {
+        const dropDown_active = document.getElementsByClassName("cwelltSelectDropDown_active");
+        const itemArray = () => {
+            Array.from(dropDown_active).forEach(index => {
+                const dropDown = index;
+                dropDown.addEventListener("mouseover", () => { });
+            });
+            return true;
+        };
+        if (dropDown_active.length > 0 && itemArray()) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    //  clicl cwelltDropDown
+    onMouseLeaveMultiSelect = (event_mouseLeave) => {
+        const post = event_mouseLeave.currentTarget.getBoundingClientRect();
+        const posCursorY = event_mouseLeave.clientY;
+        if (posCursorY > post.bottom && this.state.isVisibleDropDown === true) {
+            this.setState({
+                isVisibleDropDown: true
+            });
+        }
+        else {
+            this.setState({
+                isVisibleDropDown: false
+            });
+        }
+    };
+    render() {
+        return (_jsx("div", { style: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "flexStart",
+                width: "100%"
+            }, id: "contentMultiSelect", onMouseLeave: e => this.onMouseLeaveMultiSelect(e), children: _jsx("div", { style: { flex: 1 }, children: _jsx(Select, { autoClearSearchValue: true, mode: "multiple", allowClear: true, style: { width: "100%" }, onChange: this.props.handleChange, optionFilterProp: "description", virtual: true, showArrow: true, size: "middle", className: this.props.selectedItems?.length === 0
+                        ? "cwelltMultiSelect cwelltSelect cwelltSelectSimple cwelltMultiSelect_searchIcon"
+                        : "cwelltMultiSelect cwelltSelect cwelltSelectSimple", placeholder: "Search or filter...", dropdownClassName: this.state.isVisibleDropDown
+                        ? " cwelltSelectDropDown cwelltSelectDropDown_active"
+                        : "cwelltSelectDropDown", value: this.props.selectedItems?.map(s => s.type + "_" + s.id), onClick: () => this.onClickSelect(), open: this.state.isVisibleDropDown, onDropdownVisibleChange: () => this.handleOnDropDownVisibleChange(), onKeyUp: e_KeyUp_select => this.onKeyUpSelect(e_KeyUp_select), children: this.props.selectLists.map((slArray, i) => (_jsx(OptGroup, { label: slArray.length > 0 ? slArray[0]?.type : "", children: slArray.map(sl => (_jsx(Option, { value: sl.type + "_" + sl.id, type: sl.type, description: sl.description, val: sl.id, children: _jsx(Tag, { color: sl.color, children: sl.description }) }, sl.type + "_" + sl.id))) }, "_" + i))) }) }) }));
+    }
+}

package/dist/src/components/control/choice/dropdown/CwDropdown.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function CwDropdown(optionsProps) {
+    const [selectedOption, setSelectedOption] = useState(optionsProps.defaultSelected || "");
+    useEffect(() => {
+        if (optionsProps.defaultSelected !== undefined && optionsProps.defaultSelected !== selectedOption) {
+            setSelectedOption(optionsProps.defaultSelected);
+            if (optionsProps.handleChange) {
+                optionsProps.handleChange(optionsProps.defaultSelected);
+            }
+        }
+    }, [optionsProps.defaultSelected, selectedOption, optionsProps.handleChange]);
+    const handleOptionSelect = (event) => {
+        const selectedValue = event.target.value;
+        setSelectedOption(selectedValue);
+        if (optionsProps.handleChange) {
+            optionsProps.handleChange(selectedValue);
+        }
+    };
+    return (_jsxs("div", { className: optionsProps.labelPosition === "inline"
+            ? "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className
+            : optionsProps.labelPosition === "column"
+                ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cwDropDownComp" + " " + optionsProps.className
+                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className, style: optionsProps.style, id: optionsProps.id, children: [_jsx("label", { className: optionsProps.disabled === true
+                    ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
+                    : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), _jsx("select", { value: selectedOption, onChange: handleOptionSelect, className: "cw_select", style: optionsProps.styleSelect, disabled: optionsProps.disabled || optionsProps.selectList.length === 0, children: optionsProps.selectList.length === 0 ? (_jsx("option", { value: "", className: "cw_option", disabled: true, children: "No data" })) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "", className: "cw_option", children: optionsProps.placeholder }), optionsProps.selectList.map(option => (_jsx("option", { value: option.id, className: "cw_option", style: optionsProps.styleOption, children: option.description }, option.id)))] })) })] }));
+}

package/dist/src/components/control/choice/dropdown/CwDropdownContainer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect } from "react";
+export function CwDropdownContainer(dropDownContainerProps) {
+    // #region
+    // - Ref dropDownContainer
+    const dropDownContainer_ref = React.createRef();
+    // - Ref list container
+    const dropDown_listContainer = React.createRef();
+    // #endregion
+    // #region Functions
+    const onKeyPressDropDownContainer = (event_keyDown) => {
+        dropDownContainerProps.onKeyDownDropDownContainer(event_keyDown);
+    };
+    const onMouseLeaveDropDownContainer = (event_onMouseLeave) => {
+        if (typeof dropDownContainerProps.onMouseLeaveDropDownContainer === "function") {
+            dropDownContainerProps.onMouseLeaveDropDownContainer(event_onMouseLeave);
+        }
+    };
+    // #endregion
+    // #region UseEffect
+    useEffect(() => {
+        window.addEventListener("keydown", onKeyPressDropDownContainer);
+        return () => {
+            window.removeEventListener("keydown", onKeyPressDropDownContainer);
+        };
+    }, []);
+    // #endregion
+    return (_jsx("div", { className: `cw-dropdown-container ${dropDownContainerProps.className || ''}`, onKeyDown: onKeyPressDropDownContainer, onMouseLeave: onMouseLeaveDropDownContainer, tabIndex: 0, hidden: !dropDownContainerProps.dropDownState, children: _jsx("div", { className: "cw-dropdown-list", id: dropDownContainerProps.idDropDownContainer, ref: dropDownContainer_ref, children: _jsx("div", { ref: dropDown_listContainer, children: dropDownContainerProps.children }) }) }));
+}

package/dist/src/components/control/choice/dropdown/CwDropdownFilter.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwDropdownFilter(props) {
+    // Determine visibility state
+    const isVisible = props.DropDownFilterState ?? false;
+    // Generate CSS classes
+    const containerClassName = `cw-dropdown-filter ${props.isNested ? 'dropdown-nested' : ''}`.trim();
+    // Only apply inline styles for width override if provided
+    const inlineStyles = props.width ? { width: props.width } : undefined;
+    return (_jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (_jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: _jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (_jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiPhD,CAAC"}
+{"version":3,"file":"CwMultiFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/multi-filter/CwMultiFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAoB,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpH,MAAM,WAAW,kBAAkB;IAClC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,sGAAsG;IACtG,oBAAoB,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,uCAAuC;IACvC,OAAO,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,4CAA4C;IAC5C,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqQhD,CAAC"}

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

@@ -25,6 +25,7 @@ export interface CwMultiFilterTagProps {
     Selected?: boolean;
     OnSelect?: (props: Omit<CwMultiFilterTagProps, "OnClick">) => void;
     OnRemove?: (props: Omit<CwMultiFilterTagProps, "OnRemove">) => void;
+    tooltip?: string;
 }
 /** @inheritdoc */
 export interface ICwMultiFilterTag extends Omit<CwMultiFilterTagProps, "Removable" | "Selectable" | "Selected" | "OnSelect" | "OnRemove"> {

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,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"}
+{"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;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;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] }));
+}