react-restyle-components 0.2.89 → 0.2.91

package/lib/src/core-components/src/library/assets/svg/index.d.ts

@@ -0,0 +1,10 @@
+import UnCheckbox from './UnCheckbox.svg?react';
+import CheckedBox from './CheckedBox.svg?react';
+import DatePickerSvg from './datePicker.svg?react';
+import CheckedRadio from './checkedRadio.svg?react';
+import UncheckRadio from './uncheckRadio.svg?react';
+import TimerSVG from './timer.svg?react';
+import UpArrow from './UpArrow.svg?react';
+import DownArrow from './DownArrow.svg?react';
+export { UnCheckbox, CheckedBox, DatePickerSvg, CheckedRadio, UncheckRadio, TimerSVG, UpArrow, DownArrow, };
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/library/assets/svg/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/library/assets/svg/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,OAAO,EACL,UAAU,EACV,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,CAAC"}

package/lib/src/core-components/src/library/assets/svg/index.js

@@ -0,0 +1,27 @@
+import UnCheckbox from './UnCheckbox.svg?react';
+import CheckedBox from './CheckedBox.svg?react';
+import DatePickerSvg from './datePicker.svg?react';
+import CheckedRadio from './checkedRadio.svg?react';
+import UncheckRadio from './uncheckRadio.svg?react';
+import TimerSVG from './timer.svg?react';
+import UpArrow from './UpArrow.svg?react';
+import DownArrow from './DownArrow.svg?react';
+export { UnCheckbox, CheckedBox, DatePickerSvg, CheckedRadio, UncheckRadio, TimerSVG, UpArrow, DownArrow, };
+// import {ReactComponent as UnCheckbox} from '../../../library/assets/svg/unCheckbox.svg';
+// import {ReactComponent as CheckedBox} from '../../../library/assets/svg/checkedBox.svg';
+// import {ReactComponent as DatePickerSvg} from '../../../library/assets/svg/datePicker.svg';
+// import {ReactComponent as CheckedRadio} from '../../../library/assets/svg/checkedRadio.svg';
+// import {ReactComponent as UncheckRadio} from '../../../library/assets/svg/uncheckRadio.svg';
+// import {ReactComponent as TimerSVG} from '../../../library/assets/svg/timer.svg';
+// import {ReactComponent as UpArrow} from '../../../library/assets/svg/UpArrow.svg';
+// import {ReactComponent as DownArrow} from '../../../library/assets/svg/DownArrow.svg';
+// export {
+//   UnCheckbox,
+//   CheckedBox,
+//   DatePickerSvg,
+//   CheckedRadio,
+//   UncheckRadio,
+//   TimerSVG,
+//   UpArrow,
+//   DownArrow,
+// };

package/lib/src/core-components/src/library/assets/svg/timer copy.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/lib/src/core-components/src/library/assets/svg/timer.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/lib/src/core-components/src/library/assets/svg/uncheckRadio.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" stroke="#212721"/>
+</svg>

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

@@ -0,0 +1,17 @@
+export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
+    uniqueField?: string;
+    isSelectedStringArray?: boolean;
+    loader?: boolean;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    disable?: boolean;
+    isUpperCase?: boolean;
+    name?: string;
+    onFilter?: (value: string) => void;
+    onUpdate: (item: any) => void;
+    onSelect: (item: any) => any;
+    onBlur?: (e: any) => void;
+}
+export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,0DAA0D;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,qDAAqD,mJAc/D,0DAA0D,4CAkM5D,CAAC"}

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

@@ -0,0 +1,101 @@
+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';
+import { debounce } from '@techabl/core-utils';
+export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
+    const [value, setValue] = useState('');
+    const [options, setOptions] = useState();
+    const [originalOptions, setOriginalOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    if (originalOptions && options) {
+                        if (isListOpen) {
+                            onUpdate && onUpdate(data.selected);
+                        }
+                    }
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    let count = 0;
+    const getSelectedItem = (selectedItem, list) => {
+        if (count === 0) {
+            const finalList = list?.filter((item, index) => {
+                item.selected = false;
+                selectedItem && selectedItem.length > 0
+                    ? selectedItem.find((sItem, index) => {
+                        if (isSelectedStringArray) {
+                            if (sItem === item[uniqueField]) {
+                                item.selected = true;
+                            }
+                        }
+                        else {
+                            if (sItem[uniqueField] === item[uniqueField]) {
+                                item.selected = true;
+                            }
+                        }
+                    })
+                    : (item.selected = false);
+                count++;
+                return item;
+            });
+            list = finalList;
+        }
+        return list;
+    };
+    useEffect(() => {
+        setOriginalOptions(getSelectedItem(data.selected, data.list));
+        setOptions(getSelectedItem(data.selected, data.list));
+    }, [data, data.selected]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        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);
+            });
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], 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'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                    }), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+                                ? data?.selected?.length > 0
+                                    ? `${(data.selected && data.selected.length) || 0} Items`
+                                    : value
+                                : isUpperCase
+                                    ? value?.toUpperCase()
+                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), 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['rounded-sm'], s['z-500'], s['w-full']), style: { zIndex: 80 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-2'], s['bg-gray-200'], s['p-2'], s['w-full']), children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: _jsxs("label", { className: cn(s['flex']), children: [_jsx("input", { id: index?.toString(), className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['flex'], s['h-4'], s['ml-2']), children: data.displayKey
+                                                    .map((key) => `${item[key]}
+                              `)
+                                                    .join(' - ') })] }) }, index) }))) }) }))
+                    : null] }) }));
+};

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts

@@ -0,0 +1,13 @@
+interface AutoCompleteFilterSingleSelectProps {
+    loader?: boolean;
+    disable?: boolean;
+    displayValue?: string;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    onFilter: (item: any) => void;
+    onSelect: (item: any) => any;
+}
+export declare const AutoCompleteFilterSingleSelect: ({ disable, loader, displayValue, placeholder, data, hasError, onFilter, onSelect, }: AutoCompleteFilterSingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-filter-single-select.component.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-filter-single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.tsx"],"names":[],"mappings":"AAOA,UAAU,mCAAmC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,8BAA8B,wFASxC,mCAAmC,4CAuIrC,CAAC"}

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

@@ -0,0 +1,59 @@
+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 { debounce } from '@techabl/core-utils';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, onFilter, onSelect, }) => {
+    const [value, setValue] = useState(displayValue);
+    const [options, setOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    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 wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    useEffect(() => {
+        setOptions(data.list);
+    }, [data]);
+    useEffect(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    const handleInputChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        const filteredOptions = data.list.filter((item) => item[data.displayKey].toLowerCase().includes(search.toLowerCase()));
+        setOptions(filteredOptions);
+        debounce(() => {
+            onFilter(search);
+        });
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], 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'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                    }), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), 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['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50']), children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
+                                        setValue(item[data.displayKey]);
+                                        setIsListOpen(false);
+                                        onSelect(item);
+                                    }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: item[data.displayKey] }) }, index) }))) }) }))
+                    : null] }) }));
+};

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

@@ -0,0 +1,18 @@
+import '../../../tc.module.css';
+interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
+    loader?: boolean;
+    disable?: boolean;
+    displayValue?: string;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    className?: string;
+    posstion?: string;
+    keyboard?: string;
+    onFilter?: (item: any) => void;
+    onSelect?: (item: any) => any;
+    onBlur?: (item: any) => any;
+}
+export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAKhC,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAiNvD,CAAC"}

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

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

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

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

@@ -0,0 +1,128 @@
+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/auto-complete-group-by/auto-complete-group-by.component.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auto-complete-group-by.component.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-group-by.component.test.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { AutocompleteGroupBy } from './auto-complete-group-by.component';
+describe('AutocompleteGroupBy component', () => {
+    it('render autocompleteGroupBy correctly', () => {
+        const autocompleteGroupBy = render(_jsx(AutocompleteGroupBy, { data: [] }));
+        expect(autocompleteGroupBy).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,37 @@
+.no-options {
+  position: relative;
+  padding: 0 10px 0px 10px;
+  /* background: white; */
+  background-color: #f3f6f4;
+  color: black;
+}
+
+.autocomplete-list {
+  list-style: none;
+  position: relative;
+  margin-top: 0;
+  padding: 0 10px 0px 10px;
+  min-height: auto;
+  max-height: 86vh;
+  overflow-y: auto;
+  /* background: white; */
+  background-color: #f3f6f4;
+  z-index: 1;
+}
+
+.autocomplete-list li {
+  /* padding: 4px; */
+  color: var(--input-autocomplete-item-text, #000);
+}
+
+.autocomplete-list li.active-option {
+  background-color: #f3f6f4;
+  background: var(--multiselect-item-hover);
+  cursor: pointer;
+  font-weight: bold;
+}
+.autocomplete-list li:hover {
+  background-color: #f3f6f4;
+  background: var(--multiselect-item-hover);
+  cursor: pointer;
+}

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

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

@@ -0,0 +1 @@
+{"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"}