@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

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

@@ -0,0 +1,393 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { getContrastColor } from "../../../../common/functions/colorManipulation";
+import { CwTag } from "../../../display/text/tag/CwTag";
+import { CwDropdownContainer } from "../dropdown/CwDropdownContainer";
+import { CwHeadFilter } from "./CwHeadFilter";
+import { CwOptionList } from "./CwOptionList";
+//#endregion
+export function CwMultiselect(CwelltCustomFilterTabProps) {
+    //#region Reference
+    const refOptionListContent = useRef(null);
+    const containerRef = useRef(null);
+    //#endregion
+    //#region Hooks
+    const [isShowDropDownfiltered, setShowDropDownfiltered] = useState(false);
+    // const [tagValue, setTagValue] = useState<{
+    // 	tagDesc: string;
+    // 	bgContent: string;
+    // 	bgTag: string;
+    // 	color: string;
+    // }[]>([]);
+    // Hook active label filter item tab [ All ]
+    const [isActive_filter_item_all, setActive_filter_item_all] = useState(true);
+    // Hook active laberl fitler item tab [ e.g.: Duty ]
+    const [isActive_filter_item, setActive_filter_item] = useState(null);
+    // Hook isSelected option list
+    //const [isSelected_optionList, setSelected_optionList] = useState<{ [key: string]: boolean }>({});
+    //#endregion
+    //#region Functions
+    //#region CwelltFilterTabMultiSelect [ properties functions ]
+    //#region onClearValue
+    const clearValue = (e_clear) => {
+        // List items to remove class and be visible
+        // Item searched
+        const itemSearched = document.getElementsByClassName("item-search");
+        // Item hidden
+        const itemHidden = document.getElementsByClassName("hidden-item");
+        // Item searcched
+        if (itemSearched.length > 0) {
+            for (let i = 0; i <= itemSearched.length; i++) {
+                itemSearched[i]?.classList.remove("item-search");
+            }
+        }
+        // Item hidden
+        if (itemHidden.length > 0) {
+            for (let i = 0; i <= itemHidden.length; i++) {
+                itemHidden[i]?.classList.remove("hidden-item");
+            }
+        }
+        // optionList [ disbaled active className according their text ]
+        const parent = e_clear.currentTarget.parentElement.parentElement;
+        const optionActive = parent.getElementsByClassName("option-active");
+        const valueIds = [];
+        const resultList = [];
+        if (optionActive.length > 0) {
+            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
+            Array.from(optionActive).forEach(index => {
+                const optionActive_array = index;
+                optionActive_array.classList.remove("option-active");
+            });
+        }
+    };
+    //#endregion
+    //#region onChangeSearch
+    const onChangeSearch = (e_onchange) => {
+        const filterText_lowerCase = e_onchange.currentTarget.value.toLowerCase();
+        // Tags for filtering
+        const listTag = document.getElementsByClassName("cw-multiselect-option-list");
+        for (let i = 0; i <= listTag.length; i++) {
+            if (listTag[i] !== undefined) {
+                const textTagValue = listTag[i].textContent;
+                // Writting
+                if (textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
+                    listTag[i].classList.add("item-search");
+                }
+                else {
+                    listTag[i].classList.add("hidden-item");
+                }
+                // remove written
+                if (!textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
+                    listTag[i].classList.remove("item-search");
+                }
+                else {
+                    listTag[i].classList.remove("hidden-item");
+                }
+                if (filterText_lowerCase === "") {
+                    listTag[i].classList.remove("item-search");
+                }
+            }
+        }
+        // Length of string > 0 show dropDownContainerComp
+        if (e_onchange.currentTarget.value.length > 0) {
+            setShowDropDownfiltered(true);
+        }
+    };
+    //#endregion
+    //#region onKeyPressInput
+    const onKeyPressSearch = (event_onKeypress) => {
+        //#region Variables
+        const keyPressed = event_onKeypress.key;
+        const optionSearched = document.getElementsByClassName("item-search");
+        //#endregion
+        // first item selected or same text
+        const optionArray = Array.from(optionSearched);
+        if (optionArray.length > 0 && keyPressed === "Enter" && event_onKeypress.currentTarget.value !== "") {
+            const firstElement_optionList = optionArray[0];
+            const textContent = firstElement_optionList.textContent;
+            const elementList = CwelltCustomFilterTabProps.selectListsItems?.find(e => e.find(el => el.description === textContent));
+            const element = elementList?.find(el => el.description === textContent);
+            if (element !== undefined) {
+                const exist = CwelltCustomFilterTabProps.selectedListsItems?.some(s => s.description === textContent);
+                if (exist === false) {
+                    handleClickTag(element);
+                }
+            }
+            const optionList_item_hidden = document.getElementsByClassName("hidden-item");
+            if (optionList_item_hidden.length > 0) {
+                Array.from(optionList_item_hidden).forEach(index => {
+                    const optionList_hidden_array = index;
+                    if (optionList_hidden_array.classList.contains("hidden-item")) {
+                        optionList_hidden_array.classList.remove("hidden-item");
+                    }
+                });
+            }
+        }
+    };
+    //#endregion
+    //#region ShowDropDownFilter
+    const showDropDownfiltered = () => {
+        setShowDropDownfiltered(!isShowDropDownfiltered);
+    };
+    //#endregion
+    class SelectListTest {
+        description;
+        key;
+        type;
+        typeName;
+        val;
+        value;
+        active;
+    }
+    const handleClickTag = (e) => {
+        const preList = CwelltCustomFilterTabProps.selectedListsItems || [];
+        const valueIds = [];
+        const resultList = preList?.map(s => {
+            const item = new SelectListTest();
+            item.description = s.description;
+            item.key = s.type + "_" + s.id;
+            item.type = s.type;
+            item.val = s.id;
+            item.value = item.key;
+            item.active = s.active ?? false;
+            valueIds.push(item.key);
+            return item;
+        });
+        const a = new SelectListTest();
+        a.description = e.description;
+        a.key = e.type + "_" + e.id;
+        a.type = e.type;
+        a.val = e.id;
+        a.value = a.key;
+        a.active = e.active;
+        const exist = resultList?.some(item => item.key === a.key);
+        if (exist) {
+            a.active = false;
+            const list = resultList?.filter(item => item.key !== a.key);
+            const values = valueIds.filter(v => v !== a.key);
+            CwelltCustomFilterTabProps.onclickHandleChange(values, list);
+        }
+        else {
+            a.active = true;
+            resultList?.push(a);
+            valueIds.push(a.key);
+            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
+        }
+        // // Selected item option list
+        // setSelected_optionList((prevSelectedStates) => ({
+        // 	...prevSelectedStates,
+        // 	[a.key]: !prevSelectedStates[a.key],
+        // }));
+        // clear filter by text after clicked in option list
+        const optionList_item_hidden = document.getElementsByClassName("hidden-item");
+        if (optionList_item_hidden.length > 0) {
+            Array.from(optionList_item_hidden).forEach(index => {
+                const optionList_hidden_array = index;
+                if (optionList_hidden_array.classList.contains("hidden-item")) {
+                    optionList_hidden_array.classList.remove("hidden-item");
+                }
+            });
+        }
+        // Check click from option list has custom tag header of custom filter tab
+        const tagActive = document.getElementsByClassName("multiselect-active-tag");
+        const optionList = document.getElementsByClassName("cw-multiselect-option-list");
+        if (tagActive.length > 0 && optionList.length > 0) {
+            Array.from(tagActive).forEach(_index => {
+                Array.from(optionList).forEach(index => {
+                    const optionList_array = index;
+                    const optionId = optionList_array.getAttribute('data-id');
+                    if (optionId === (e.type + "_" + e.id)) {
+                        optionList_array.classList.remove("option-active");
+                    }
+                });
+            });
+        }
+        const optionList_desc = document.getElementsByClassName("option-active");
+        if (optionList_desc.length > 0) {
+            Array.from(optionList_desc).forEach(index => {
+                const optionList_desc_array = index;
+                if (optionList_desc_array.innerText === a.description) {
+                    optionList_desc_array.classList.remove("option-active");
+                }
+            });
+        }
+        //  Click to  hide dropDownContainer
+        setShowDropDownfiltered(false);
+    };
+    // [ click custom tag ]
+    const closeTagHandle = (e) => {
+        const preList = CwelltCustomFilterTabProps.selectedListsItems;
+        const valueIds = [];
+        const resultList = preList?.map(s => {
+            const item = new SelectListTest();
+            item.description = s.description;
+            item.key = s.type + "_" + s.id;
+            item.type = s.type;
+            item.val = s.id;
+            item.value = item.key;
+            valueIds.push(item.key);
+            return item;
+        });
+        const a = new SelectListTest();
+        a.description = e.description;
+        a.key = e.type + "_" + e.id;
+        a.type = e.type;
+        a.val = e.id;
+        a.value = a.key;
+        const resultListFilter = resultList?.filter(item => item.key !== a.key);
+        const valueIdsFilter = valueIds.filter(item => item !== a.key);
+        CwelltCustomFilterTabProps.onclickHandleChange(valueIdsFilter, resultListFilter);
+        // // Selected item option list - remove active option list
+        // setSelected_optionList((prevSelectedStates) => ({
+        // 	...prevSelectedStates,
+        // 	[a.key]: false[a.key],
+        // }));
+        const optionList_active = document.getElementsByClassName("option-active");
+        if (optionList_active.length > 0) {
+            Array.from(optionList_active).forEach(index => {
+                const optionList_active_array = index;
+                const optionId = optionList_active_array.getAttribute('data-id');
+                if (optionId === (e.type + "_" + e.id)) {
+                    optionList_active_array.classList.remove("option-active");
+                }
+            });
+        }
+    };
+    //#endregion
+    //#region DropDownContainer [ properties functions ]
+    //#region onKeyDownDropDownContainer [  press ESC dropDownContainer dissapear - ArrowUp && ArrowDown ]
+    const onKeyDownDropDownContent = (event_onKeyDown) => {
+        const items = document.querySelectorAll(".cw-multiselect-option-list");
+        let optionIndex = Array.from(items).findIndex(item => item.classList.contains("keyboard-focus"));
+        if (event_onKeyDown.key === "Escape") {
+            // DropDown disappear
+            setShowDropDownfiltered(false);
+        }
+        // KeyDown
+        if (event_onKeyDown.key === "ArrowDown") {
+            event_onKeyDown.preventDefault();
+            removeHighlight();
+            optionIndex = getNextIndex(optionIndex, items.length);
+            highlightOption(optionIndex);
+        }
+        // KeyUp
+        if (event_onKeyDown.key === "ArrowUp") {
+            event_onKeyDown.preventDefault();
+            removeHighlight();
+            optionIndex = getPreviousIndex(optionIndex, items.length);
+            highlightOption(optionIndex);
+        }
+    };
+    const removeHighlight = () => {
+        const highlightedItem = document.querySelector(".keyboard-focus");
+        if (highlightedItem) {
+            highlightedItem.classList.remove("keyboard-focus");
+        }
+    };
+    const getNextIndex = (currentIndex, length) => {
+        return (currentIndex + 1) % length;
+    };
+    const getPreviousIndex = (currentIndex, length) => {
+        return (currentIndex - 1 + length) % length;
+    };
+    const highlightOption = (index) => {
+        const items = document.querySelectorAll(".cw-multiselect-option-list");
+        const item = items[index];
+        item.classList.add("keyboard-focus");
+    };
+    //#endregion
+    //#region onMouseLeave
+    const handleInputBlur = () => {
+        setTimeout(() => {
+            if (!containerRef.current?.contains(document.activeElement)) {
+                setShowDropDownfiltered(false);
+            }
+        }, 150);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setShowDropDownfiltered(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    //#endregion
+    // Click filter item button
+    const clickFilter_item = (id) => {
+        // content items - looking for className by it - corresponded by their current group
+        const contentItems = document.getElementsByClassName(id);
+        const contentAll = document.getElementsByClassName("multiselect-tag-group");
+        if (contentAll.length > 0) {
+            Array.from(contentAll).forEach(index => {
+                const contentAll_array = index;
+                contentAll_array.classList.add("hidden-group");
+            });
+        }
+        if (contentItems.length > 0) {
+            Array.from(contentItems).forEach(index => {
+                const contentItems_array = index;
+                contentItems_array.classList.remove("hidden-group");
+            });
+        }
+        // Adding custom className acitive
+        setActive_filter_item(id);
+        // Remove active className [ label tab : ( ALL ) ]
+        setActive_filter_item_all(false);
+    };
+    const showAllItem = () => {
+        //let currentBtn = e.currentTarget;
+        const contentAll = document.getElementsByClassName("multiselect-tag-group");
+        if (contentAll.length > 0) {
+            Array.from(contentAll).forEach(index => {
+                const contentAll_array = index;
+                contentAll_array.classList.remove("hidden-group");
+                // active className - all
+                setActive_filter_item_all(true);
+                setActive_filter_item("");
+            });
+        }
+    };
+    //#endregion
+    useEffect(() => {
+        if (CwelltCustomFilterTabProps.selectedListsItems) {
+            const allOptions = document.getElementsByClassName("cw-multiselect-option-list");
+            Array.from(allOptions).forEach(option => {
+                option.classList.remove("option-active");
+            });
+            CwelltCustomFilterTabProps.selectedListsItems.forEach(selectedItem => {
+                Array.from(allOptions).forEach(option => {
+                    const optionElement = option;
+                    if (optionElement.innerText === selectedItem.description) {
+                        optionElement.classList.add("option-active");
+                    }
+                });
+            });
+        }
+    }, [CwelltCustomFilterTabProps.selectedListsItems]);
+    return (_jsx("div", { ref: containerRef, children: _jsx(CwHeadFilter, { Id: CwelltCustomFilterTabProps.id, onChangeSearch: (e_onchange) => onChangeSearch(e_onchange), onClearValue: (e_clear) => clearValue(e_clear), onKeypressInput: onKeyPressSearch, onShowDropDown: showDropDownfiltered, placeholder_desc: CwelltCustomFilterTabProps.placeholder, style: CwelltCustomFilterTabProps.style, onBlur: handleInputBlur, 
+            // onMouseLeave={onMouseLeave_dropDownContainer}
+            className: CwelltCustomFilterTabProps.selectedListsItems?.length === 0
+                ? "cw-filter-tab-multi-select-show-icon"
+                : "cw-filter-tab-multi-select-hidden-icon", tagValueContent: _jsx("div", { className: "cw-flex-row cw-gap-small", children: CwelltCustomFilterTabProps.selectedListsItems?.map((s, index) => {
+                    return s.type !== undefined ? (_jsx(CwTag, { styleTag: {
+                            background: s.color,
+                            color: getContrastColor(s.color),
+                        }, idTag: s.type + "_" + s.id, closableTag: true, onClickClosableTag: () => closeTagHandle(s), "data-id": s.type + "_" + s.id, className: "multiselect-active-tag", children: s.description }, index)) : (_jsx("div", {}));
+                }) }), children: _jsx(CwDropdownContainer, { dropDownState: isShowDropDownfiltered, idDropDownContainer: CwelltCustomFilterTabProps.idDropDownContainer, onKeyDownDropDownContainer: (event_onKeyDown) => onKeyDownDropDownContent(event_onKeyDown), children: _jsxs("div", { className: "cw-multiselect-dropdown", children: [_jsxs("header", { children: [_jsx("label", { "data-active": isActive_filter_item_all, onClick: showAllItem, children: "ALL" }), CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (_jsx("label", { "data-active": isActive_filter_item === 'content_' + i, 
+                                    // todo : giving parameter by id to search by their corresponding group it list options and className content with their id in this case key ( i ) by .map function
+                                    onClick: () => clickFilter_item("content_" + i), id: "content_" + i, children: slArray.length > 0 && slArray[0].typeName !== undefined
+                                        ? slArray[0].typeName
+                                        : slArray.length > 0
+                                            ? slArray[0].type
+                                            : "" }, i)))] }), _jsx("div", { className: "cw-multiselect-tags-container", children: CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (_jsx("div", { id: "content_" + i, className: `multiselect-tag-group content_${i}`, ref: refOptionListContent, children: slArray.map(sl => {
+                                    const isSelected = CwelltCustomFilterTabProps.selectedListsItems?.some(selected => selected.type === sl.type && selected.id === sl.id) || false;
+                                    return (_jsx(CwOptionList, { idOptionList: sl.type + "_" + sl.id, value: sl.type + "_" + sl.id, title: sl.description, onClick: () => handleClickTag(sl), isSelected: sl.active, "data-id": sl.type + "_" + sl.id, children: _jsx(CwTag, { styleTag: {
+                                                background: sl.color,
+                                                color: getContrastColor(sl.color),
+                                            }, closableTag: isSelected, children: sl.description }) }, sl.type + "_" + sl.id));
+                                }) }, "group" + i))) })] }) }) }) }));
+}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect } from "react";
+export function CwOptionList(optionListProps) {
+    //#region References
+    // - Ref : optionList
+    const optionListSelected_ref = React.createRef();
+    const optionListSelected_input_ref = React.createRef();
+    //#endregion
+    //#region Hooks
+    // - Hooks : selected optionList
+    // const [isSelectedOptionList, setIsSelectedOptionList] = useState(optionListProps.isSelected || false);
+    //#endregion
+    //#region Functions
+    const onClickSelectOptionList = (event_click) => {
+        // - click of custom component
+        // onSelectedOptionList();
+        // - click of property interface
+        optionListProps.onClick(event_click);
+    };
+    const onKeyPressOptionList = (event_onKeyPress) => {
+        if (typeof optionListProps.onKeyPress === "function") {
+            optionListProps.onKeyPress(event_onKeyPress);
+        }
+    };
+    //#endregion
+    //#region Useffect
+    useEffect(() => {
+        window.addEventListener("keypress", onKeyPressOptionList);
+        return () => {
+            window.removeEventListener("keypress", onKeyPressOptionList);
+        };
+    }, []);
+    //#endregion
+    return (_jsxs("div", { className: `cw-multiselect-option-list${optionListProps.isSelected ? ' option-active' : ''}`, onClick: event_click => onClickSelectOptionList(event_click), id: optionListProps.idOptionList, ref: optionListSelected_ref, "aria-value-text": optionListProps.value, onKeyPress: event_onKeyPress => onKeyPressOptionList(event_onKeyPress), style: optionListProps.style, children: [_jsx("label", { htmlFor: optionListProps.idOptionList, children: optionListProps.children }), _jsx("input", { type: "checkbox", value: optionListProps.value, ref: optionListSelected_input_ref, id: optionListProps.idOptionList, onClick: optionListProps.onChangeOptionList })] }));
+}

package/dist/src/components/control/choice/option/CwOption.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Option to display in the CwSelect
+ * @remarks
+ * Must be child of CwSelect
+ * @example
+ * <CwSelect>
+ *   <CwOption>A</CwOption>
+ *   <CwOption>B</CwOption>
+ *   <CwOption>C</CwOption>
+ * </CwSelect>
+ */
+export function CwOption(props) {
+    const { text, ...optionProps } = props;
+    return (_jsx("option", { className: "cw-option", ...optionProps, children: optionProps.children ?? text }));
+}

package/dist/src/components/control/choice/select/CwSelect.js

@@ -0,0 +1,36 @@
+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";
+import { CwOption } from "../option/CwOption";
+/**
+ * Input for selecting an option from a list
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel     CwSelect        CwButton
+ *  ↑      ↑           ↑               ↑
+ *              ╭────────────────────╮╭════╮
+ *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
+ *              ╰────────────────────╯╰════╯
+ *              │ Orange             │ ← CwOption
+ *              ├────────────────────┤
+ *              │ Black              │ ← CwOption
+ *              ├────────────────────┤
+ *              │ White              │ ← CwOption
+ *              ╰────────────────────╯
+ * ```
+ * @example
+ * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
+ *   <CwOption value="" > - Choose a cat - </CwOption>
+ *   <CwOption value="o" >Orange</CwOption>
+ *   <CwOption value="b" >Black</CwOption>
+ *   <CwOption value="w" >White</CwOption>
+ * </CwSelect>
+ */
+export function CwSelect(props) {
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, ...selectProps } = props;
+    const flexDirection = alignProps?.flexDirection;
+    const dataDirection = flexDirection ? { 'data-direction': flexDirection } : {};
+    return (_jsx("div", { className: "cw-select", ...dataDirection, children: _jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (_jsxs(CwLabel, { ...labelProps, children: [iconProps && _jsx(CwIcon, { ...iconProps }), labelProps.text] })), _jsxs("select", { ...selectProps, children: [placeholder && _jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && _jsx(CwButton, { ...buttonProps })] }) }));
+}

package/dist/src/components/control/choice/toggle/CwToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwToggle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/toggle/CwToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAEjF,MAAM,WAAW,aAChB,SAAQ,IAAI,CACX,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EACtF,MAAM,CACN;IAED,sEAAsE;IACtE,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,qFAAqF;IACrF,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA8B5C"}
+{"version":3,"file":"CwToggle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/control/choice/toggle/CwToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,mDAAmD,CAAC;AAEjF,MAAM,WAAW,aAChB,SAAQ,IAAI,CACX,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EACtF,MAAM,CACN;IAED,sEAAsE;IACtE,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,qFAAqF;IACrF,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAE7B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA+B5C"}

package/dist/src/components/control/choice/toggle/CwToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+export function CwToggle(props) {
+    const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
+    const displayText = labelText || labelProps?.text;
+    return (_jsx("div", { className: `cw-toggle${className ? ` ${className}` : ''}`, children: _jsxs("label", { className: "cw-toggle-label", "data-direction": alignment, children: [displayText && (_jsxs("span", { className: "cw-icon-text", children: [iconProps && _jsx(CwIcon, { ...iconProps }), displayText] })), _jsx("input", { 
+                    //data-color={color}
+                    type: "checkbox", ...inputProps })] }) }));
+}

package/dist/src/components/control/input/any/CwInput.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwInput(CwInputProps) {
+    const handleChange = (e) => {
+        CwInputProps.onChange(e.target.value);
+    };
+    const handleClearClick = () => {
+        CwInputProps.onChange("");
+    };
+    return (_jsxs("div", { className: CwInputProps.labelPosition === "column"
+            ? "cw-flex-column"
+            : "cw-flex-row ", children: [_jsx("label", { className: CwInputProps.disabled === true
+                    ? CwInputProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
+                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), _jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (
+            // if the component is disabled do not show clear button
+            _jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
+}