react-restyle-components 0.2.87 → 0.2.89

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js

@@ -1,109 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable  */
-import { useState, useEffect, useRef } from 'react';
-import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.module.css';
-import s from '../../tc.module.css';
-import { cn } from '../../utils';
-import { debounce } from '@techabl/core-utils';
-export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
-    const [value, setValue] = useState(displayValue);
-    const [options, setOptions] = useState(data.list);
-    const [isListOpen, setIsListOpen] = useState(false);
-    const [filterValue, setFilterValue] = useState();
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    setIsListOpen(false);
-                    //setValue('');
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref, isListOpen]);
-    };
-    const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    useOutsideAlerter(wrapperRef);
-    useEffect(() => {
-        setOptions(data.list);
-    }, [data]);
-    useEffect(() => {
-        setValue(displayValue);
-    }, [displayValue]);
-    const onChange = (e) => {
-        const search = e.target.value;
-        setValue(search);
-        setFilterValue(search);
-        const filteredOptions = data.list.filter((item) => data.displayKey.some((key) => item[key]?.toString().toLowerCase().includes(search.toLowerCase())));
-        setOptions(filteredOptions);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
-    };
-    const onKeyUp = (e) => {
-        const charCode = e.which ? e.which : e.keyCode;
-        if (charCode === 8) {
-            const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
-        }
-    };
-    const onKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === 'Tab') {
-            if (options.length > 0) {
-                const selectedItem = options.find((item) => item.labId === Number(value));
-                if (selectedItem) {
-                    setValue(data.displayKey.map((key) => `${selectedItem[key]}`).join(' - '));
-                    setIsListOpen(false);
-                    onSelect && onSelect(selectedItem);
-                }
-            }
-        }
-    };
-    const calculateMaxHeight = () => {
-        if (inputRef.current) {
-            const inputRect = inputRef.current.getBoundingClientRect();
-            const availableHeight = window.innerHeight - inputRect.bottom - 20; // 10px padding
-            return availableHeight;
-        }
-        return 'calc(100vh - 140px)';
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
-                        [s['border-red']]: hasError,
-                        [s['border-gray-300']]: !hasError,
-                        [s['dark:text-black']]: true,
-                    }), children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                color: '#000000',
-                                size: 22,
-                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                color: '#000000',
-                                size: 22,
-                            } }))] }), options && isListOpen
-                    ? options.length > 0 && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['overflow-y-auto']), style: {
-                            zIndex: 500,
-                            maxHeight: `${calculateMaxHeight()}px`,
-                        }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
-                                    setValue(data.displayKey
-                                        .map((key) => item[key])
-                                        .filter((value) => value !== null && value !== undefined)
-                                        .join(' - '));
-                                    setIsListOpen(false);
-                                    onSelect && onSelect(item);
-                                }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
-                                        textOverflow: 'ellipsis',
-                                        minWidth: 0,
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                    }, title: data.displayKey
-                                        .map((key) => item[key])
-                                        .join(' - '), children: data.displayKey
-                                        .map((key) => item[key])
-                                        .filter((value) => value !== null && value !== undefined)
-                                        .join(' - ') }) }, index))) }) }))
-                    : null] }) }));
-};

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts

@@ -1,10 +0,0 @@
-interface AutocompleteGroupByProps {
-    data: any[];
-    hasError?: boolean;
-    displayValue?: string;
-    onChange?: (item: any, children: any) => void;
-    onClose?: () => void;
-}
-export declare const AutocompleteGroupBy: ({ data, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=auto-complete-group-by.component.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,yDAM7B,wBAAwB,4CAiP1B,CAAC"}

package/lib/src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.js

@@ -1,128 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable  */
-import { useState, useEffect, useRef } from 'react';
-import { Icon } from '../../atoms/icons/icons.component';
-import s from '../../tc.module.css';
-import { cn } from '../../utils';
-export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue = '', onChange, onClose, }) => {
-    //const [userRouter, setUserRouter] = useState<any>()
-    const [value, setValue] = useState(displayValue);
-    const [options, setOptions] = useState();
-    const [isListOpen, setIsListOpen] = useState(false);
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            /**
-             * Alert if clicked on outside of element
-             */
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    setIsListOpen(false);
-                    setValue('');
-                }
-            }
-            // Bind the event listener
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                // Unbind the event listener on clean up
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref, isListOpen]);
-    };
-    const wrapperRef = useRef(null);
-    useOutsideAlerter(wrapperRef);
-    useEffect(() => {
-        setValue(displayValue);
-    }, [displayValue]);
-    useEffect(() => {
-        setOptions(data || []);
-    }, [data]);
-    const uniqByKeepFirst = (a, key) => {
-        const seen = new Set();
-        return a.filter((item) => {
-            const k = key(item);
-            return seen.has(k) ? false : seen.add(k);
-        });
-    };
-    const filter = (search, data) => {
-        if (search !== '') {
-            let filterArray = [];
-            data.filter((item) => {
-                item.children.filter((children) => {
-                    const childrenItem = children.title &&
-                        children.title.toLowerCase().indexOf(search.toLowerCase()) > -1;
-                    if (childrenItem) {
-                        const isSameArray = filterArray.filter((filterItem, index) => {
-                            if (filterItem.name === item.name) {
-                                const newChildren = filterArray[index].children.concat(children);
-                                filterArray[index] = {
-                                    ...filterArray[index],
-                                    children: newChildren,
-                                };
-                            }
-                        });
-                        if (isSameArray.length < 1) {
-                            filterArray.push({ ...item, children: [children] });
-                        }
-                        const uniqueChars = uniqByKeepFirst(filterArray, (it) => it.name);
-                        filterArray = uniqueChars;
-                    }
-                });
-            });
-            setOptions(filterArray);
-        }
-        else {
-            setOptions(data);
-        }
-    };
-    const onChangeValue = (e) => {
-        const search = e.target.value;
-        setValue(search);
-        filter(search, data);
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
-                        [s['border-red']]: hasError,
-                        [s['border-gray-300']]: !hasError,
-                    }), children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: cn(s['w-full'] + ' ' + s['focus:outline-none']), 
-                            // onKeyUp={onKeyUp}
-                            onChange: onChangeValue, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
-                                if (e.key === 'Enter') {
-                                    e.preventDefault();
-                                    // Find the selected item and children
-                                    let selectedItem = null;
-                                    let selectedChildren = null;
-                                    for (const item of options) {
-                                        for (const children of item.children) {
-                                            if (children.title.toLowerCase() === value.toLowerCase() ||
-                                                item.title.toLowerCase() === value.toLowerCase()) {
-                                                selectedItem = item;
-                                                selectedChildren = children;
-                                                break;
-                                            }
-                                        }
-                                        if (selectedItem) {
-                                            break;
-                                        }
-                                    }
-                                    // Call props.onChange with the selected item and children
-                                    if (onChange && selectedItem && selectedChildren) {
-                                        onChange(selectedItem, selectedChildren);
-                                    }
-                                    setIsListOpen(false);
-                                    setValue(value); // Set the value to what the user entered
-                                    setOptions([]);
-                                }
-                            } }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                color: '#000000',
-                                size: 22,
-                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                color: '#000000',
-                                size: 22,
-                            } }))] }), options && isListOpen
-                    ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['z-50'], s['rounded-md'], s['bg-gray-200'], s['w-100'], s['w-full']), children: _jsx("ul", { className: cn(s['flex'], s['p-2'], s['rounded-sm'], s['w-full']), children: _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['overflow-scroll']), style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: cn(s['flex'] + ' ' + s['text-gray-400']), children: item.title }, index), _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['ml-4'], s['w-full']), children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: cn(s['flex'], s['hover:bg-gray-200'], s['focus:outline-none'], s['cursor-pointer'], s['w-full']), onClick: async () => {
-                                                    onChange && onChange(item, children);
-                                                    setIsListOpen(false);
-                                                    setValue(children.title);
-                                                    setOptions([]);
-                                                }, children: children.title }, childrenIndex))) })] }))) }) }) }))
-                    : null] }) }));
-};

package/lib/src/core-components/src/molecules/autocomplete/autocomplete.d.ts

@@ -1,8 +0,0 @@
-interface AutocompleteProps {
-    value: string;
-    onValueChange: (value: string) => void;
-    options?: string[];
-}
-export declare const Autocomplete: ({ value, onValueChange, options, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=autocomplete.d.ts.map

package/lib/src/core-components/src/molecules/autocomplete/autocomplete.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAgNnB,CAAC"}

package/lib/src/core-components/src/molecules/autocomplete/autocomplete.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from 'react';
-import s from '../../tc.module.css';
-import { cn } from '../../utils';
-const LI_ELEMENT_HEIGHT = 34;
-export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
-    const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
-    const [filteredOptions, setFilteredOptions] = useState(options);
-    const [shouldShowList, setShouldShowList] = useState(false);
-    const [searchValue, setSearchValue] = useState(value);
-    const inputRef = useRef(null);
-    const listRef = useRef(null);
-    const onInputChange = useCallback((event) => {
-        const input = event.target.value;
-        if (input != '') {
-            const newFilteredOptions = options.filter((option) => option.toLowerCase().indexOf(input.toLowerCase()) > -1);
-            setFilteredOptions(newFilteredOptions);
-        }
-        else {
-            setFilteredOptions(options);
-        }
-        setActiveOption(0);
-        setShouldShowList(true);
-        setSearchValue(input);
-    }, [
-        setActiveOption,
-        setFilteredOptions,
-        setShouldShowList,
-        setSearchValue,
-        onValueChange,
-    ]);
-    const onOptionClick = useCallback((event) => {
-        const symbol = event.currentTarget.innerText || event.currentTarget.textContent || '';
-        setShouldShowList(false);
-        setActiveOption(0);
-        setFilteredOptions([]);
-        setSearchValue(symbol);
-        onValueChange(symbol);
-    }, [
-        setShouldShowList,
-        setActiveOption,
-        setFilteredOptions,
-        setSearchValue,
-        onValueChange,
-    ]);
-    const onKeyDown = useCallback((event) => {
-        let selectedItem = '';
-        if (event.keyCode === 38) {
-            // arrow up
-            event.preventDefault();
-            if (activeOption === 0) {
-                return;
-            }
-            else {
-                selectedItem = filteredOptions[activeOption - 1];
-                setSearchValue(filteredOptions[activeOption - 1]);
-                setActiveOption(activeOption - 1);
-                listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption - 1),
-                });
-            }
-        }
-        else if (event.keyCode === 40) {
-            // arrow down
-            event.preventDefault();
-            if (activeOption === filteredOptions.length - 1) {
-                return;
-            }
-            else {
-                selectedItem = filteredOptions[activeOption + 1];
-                setSearchValue(filteredOptions[activeOption + 1]);
-                setActiveOption(activeOption + 1);
-                listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption + 1),
-                });
-            }
-        }
-        if (Object.keys(selectedItem)?.length > 0) {
-            onValueChange(selectedItem);
-        }
-    }, [
-        setActiveOption,
-        setSearchValue,
-        filteredOptions,
-        activeOption,
-        onValueChange,
-    ]);
-    const renderList = () => {
-        return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
-                            let className = cn(s['flex'], s['gap-2'], s['p-2']);
-                            if (index === activeOption) {
-                                className = cn(className, s['font-bold']);
-                            }
-                            return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
-                        }) })) : (_jsx("div", { className: cn(s['flex'], s['bg-gray-200'], s['w-full'], s['p-2']), children: _jsx("span", { children: "Not Found Result!!" }) })) }) })) : (_jsx(_Fragment, {})) }));
-    };
-    useEffect(() => {
-        // this only works on click when inside timeout
-        setTimeout(() => {
-            inputRef.current?.select();
-        }, 0);
-        filteredOptions[0] && onValueChange(filteredOptions[0]);
-        // setShouldShowList(true);
-    }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative']), children: [_jsx("div", { className: cn(s['flex'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md']), children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: cn(s['flex'], s['focus:outline-none']), placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
-                            setShouldShowList(true);
-                        } }) }), _jsx("div", { className: cn(s['flex']), children: renderList() })] }) }));
-};

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.d.ts

@@ -1,6 +0,0 @@
-import './color-picker.css';
-export declare const ColorPicker: ({ color, onChange }: {
-    color: any;
-    onChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=color-picker.component.d.ts.map

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW;;;6CAqBvB,CAAC"}

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { useClickOutside } from '../../hooks';
-import './color-picker.css';
-export const ColorPicker = ({ color, onChange }) => {
-    const popover = useRef();
-    const [isOpen, toggle] = useState(false);
-    const close = useCallback(() => toggle(false), []);
-    useClickOutside(popover, close);
-    return (_jsxs("div", { className: "picker", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: "popover", ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
-};

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.d.ts

@@ -1,15 +0,0 @@
-import './color-picker-modal.css';
-import '../../tc.module.css';
-interface ColorPickerModalProps {
-    color: string;
-    isVisible?: boolean;
-    testId?: string;
-    tooltip?: string;
-    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
-    onChange: (color: string) => void;
-    onNoFill?: (bgColor: string, textColor: string) => void;
-    onClose?: (color?: string) => void;
-}
-export declare const ColorPickerModal: ({ color, isVisible, testId, tooltip, tooltipSide, onChange, onNoFill, onClose, }: ColorPickerModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=color-picker-modal.component.d.ts.map

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker-modal.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.tsx"],"names":[],"mappings":"AASA,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAE7B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,qFAS1B,qBAAqB,4CAwGvB,CAAC"}

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useRef, useState, useEffect } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { useClickOutside } from '../../hooks';
-import { TooltipProvider, Tooltip } from '../../atoms/tooltip/tooltip.component';
-import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../helpers/constants';
-import './color-picker-modal.css';
-import '../../tc.module.css';
-export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
-    const popover = useRef();
-    const [currentColor, setCurrentColor] = useState(color);
-    const [isOpen, toggle] = useState(isVisible);
-    const close = useCallback(() => {
-        if (isOpen) {
-            toggle(false);
-            onClose && onClose(currentColor);
-        }
-    }, [isOpen, onClose, currentColor]);
-    useClickOutside(popover, close);
-    useEffect(() => {
-        if (!isOpen) {
-            setCurrentColor(color || DEFAULT_BG_COLOR);
-        }
-    }, [color, isOpen]);
-    const handleColorChange = useCallback((color) => {
-        setCurrentColor(color);
-        onChange(color);
-    }, [onChange]);
-    const handleStandardColorClick = useCallback((color) => {
-        setCurrentColor(color);
-        onChange(color);
-        close();
-    }, [onChange, close]);
-    const handleNoFillClick = useCallback(() => {
-        onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
-        setCurrentColor(DEFAULT_BG_COLOR);
-        onChange(DEFAULT_BG_COLOR);
-        close();
-    }, [onNoFill, onChange, close]);
-    return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
-};

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts

@@ -1,11 +0,0 @@
-interface CSSMultilineProps {
-    label?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    className?: string;
-    style?: any;
-    onChange(item: any): void;
-}
-export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=css-multiline-input.component.d.ts.map

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;CACtB;AAWD,eAAO,MAAM,YAAY,sEAOtB,iBAAiB,4CA8HnB,CAAC"}

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
-import * as Form from '../../atoms/form/form.component';
-import { properties as propertiesObj } from './css-properties';
-import s from '../../tc.module.css';
-import { cn } from '../../utils';
-const mapToArray = (arr) => {
-    const res = [];
-    arr.forEach(function (obj, index) {
-        const key = Object.keys(obj)[0];
-        const value = key;
-        res.push([value, obj[key]]);
-    });
-    return res;
-};
-const data = mapToArray(propertiesObj);
-export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
-    const value = useRef('');
-    const [properties, setProperties] = useState([]);
-    const [isListOpen, setIsListOpen] = useState(false);
-    useEffect(() => {
-        value.current = defaultValue;
-        setProperties(data);
-    }, [defaultValue]);
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target)) {
-                    setIsListOpen(false);
-                    onChange(value.current);
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref]);
-    };
-    const wrapperRef = useRef(null);
-    useOutsideAlerter(wrapperRef);
-    const list = [];
-    const filter = (css) => {
-        let matchString = css?.split(',');
-        matchString = matchString[matchString?.length - 1];
-        matchString = matchString?.split(':')[0];
-        matchString = matchString?.split("'")[0];
-        if (css?.length == 0)
-            return setProperties(data);
-        else {
-            data?.map((item) => {
-                const innerItem = [];
-                const isItems = item[0]?.startsWith(matchString);
-                if (isItems)
-                    innerItem.push(item[0]);
-                if (innerItem?.length > 0)
-                    list.push([item[0], item[1]]);
-            });
-            setProperties(list);
-        }
-    };
-    const onKeyUp = (e) => {
-        setIsListOpen(true);
-    };
-    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full']), ref: wrapperRef, children: [_jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
-                    value.current = css;
-                    filter(css);
-                } }), isListOpen && (_jsx("div", { style: { marginTop: -10 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['max-h-40'], s['bg-black'], s['m-2'], s['text-white'], s['overflow-y-scroll']), children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['flex-col'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['-mt-2'], s['px-2'], s['h-8'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
-                                    let existsString = value.current?.split(',');
-                                    if (value.current.includes(',')) {
-                                        existsString = existsString.map((item) => {
-                                            if (item?.includes(':'))
-                                                return item;
-                                        });
-                                        if (prop != 'number')
-                                            existsString.push(`${item[0]}:'${prop}',`);
-                                        else
-                                            existsString.push(`${item[0]}:1,`);
-                                        value.current = existsString
-                                            .join(',')
-                                            .replaceAll(',,', ',');
-                                    }
-                                    else {
-                                        if (prop != 'number')
-                                            value.current = `${item[0]}:'${prop}',`;
-                                        else {
-                                            value.current = `${item[0]}:1,`;
-                                        }
-                                    }
-                                    filter(existsString.join(''));
-                                }, children: [' ', prop, ' '] })))] }, index))) }) }))] }));
-};