sccoreui 6.3.57 → 6.3.59

package/dist/App.scss

@@ -1619,13 +1619,14 @@ code {
     .p-multiselect-item.p-highlight {
       &::after {
         content: "";
-        width: 14px;
-        height: 6px;
-        border-left: 2px solid #132067;
-        border-bottom: 2px solid #132067;
+        width: 10px;
+        height: 4px;
+        border-left: 1px solid #132067;
+        border-bottom: 1px solid #132067;
         transform: rotate(-45deg);
         position: absolute;
         right: 10px;
+        top: 14px;
       }
     }
   }
@@ -2626,9 +2627,11 @@ button[aria-expanded="true"] {
     }
   }
 }
-.p-multiselect-header{ .p-checkbox{
-  display: none !important;
-} }
+.p-multiselect-header {
+  .p-checkbox {
+    display: none !important;
+  }
+}
 .overlay_list_options {
   .p-overlaypanel-content {
     padding: 0;

package/dist/assets/sccoreui.css

@@ -1803,7 +1803,7 @@ a {
 .p-multiselect.p-multiselect-chip
   .p-multiselect-token
   .p-multiselect-token-icon:hover {
-    /* stroke: var(--gray-700); */
+  /* stroke: var(--gray-700); */
 }
 .p-multiselect.p-multiselect-chip
   .p-multiselect-token
@@ -1836,7 +1836,7 @@ a {
 }
 .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable
   .p-multiselect-label {
-  padding-right: 1.75rem;
+  /* padding-right: 1.75rem; */
 }
 
 .p-multiselect-panel {

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -10,16 +10,10 @@ const MultiSelectDropDown = (props) => {
     const [items, setItems] = (0, react_1.useState)([]);
     const [isMoreThanOne, setIsMoreThenOne] = (0, react_1.useState)(false);
     const LeftSection = () => {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.dropdownType === "status" ?
-                (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'select_status_prv absolute left_section_item z-5' }, { children: items.length > 0 ?
-                        (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: items.map((status, i) => {
-                                var _a, _b;
-                                return (0, jsx_runtime_1.jsx)("li", { style: { background: status.color }, className: `${(_b = (_a = status === null || status === void 0 ? void 0 : status.name) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '')) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, i);
-                            }) }))
-                        :
-                            (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: (0, jsx_runtime_1.jsx)("li", { className: 'all' }) })) }))
-                :
-                    (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_left left_section_item absolute z-5 ", icon: props.leftIcon, size: 20 }, Math.floor(Math.random() * 1000)) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.dropdownType === "status" ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "select_status_prv absolute left_section_item z-5" }, { children: items.length > 0 ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "p-0 m-0 list-none" }, { children: items.map((status, i) => {
+                        var _a, _b;
+                        return ((0, jsx_runtime_1.jsx)("li", { style: { background: status.color }, className: `${(_b = (_a = status === null || status === void 0 ? void 0 : status.name) === null || _a === void 0 ? void 0 : _a.replaceAll(" ", "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, i));
+                    }) }))) : ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "p-0 m-0 list-none" }, { children: (0, jsx_runtime_1.jsx)("li", { className: "all" }) }))) }))) : ((0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_left left_section_item absolute z-5 ", icon: props.leftIcon, size: 20 }, Math.floor(Math.random() * 1000))) }));
     };
     const clearIcon = () => {
         const onClear = () => {
@@ -45,20 +39,35 @@ const MultiSelectDropDown = (props) => {
     }, [props.value]);
     const itemTemplate = (option) => {
         var _a, _b;
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${(_b = (_a = option === null || option === void 0 ? void 0 : option.name) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '')) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'status_dot', style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'otption_name mr-8' }, { children: option.name }))] })) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${(_b = (_a = option === null || option === void 0 ? void 0 : option.name) === null || _a === void 0 ? void 0 : _a.replaceAll(" ", "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "status_dot", style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "otption_name mr-8" }, { children: option.name }))] })) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === 'withIcon' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem ${props.maxWidth ? `${'optionBodyMaxWidth_' + props.maxWidth}` : ''}`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
-                            (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
-                                        clearIcon()] }))] })), props.dropdownType === 'default' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? 'left_icon' : 'no_icon'} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [props.icon !== undefined &&
-                            (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
-                            (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
-                                        clearIcon()] }))] })), props.dropdownType === 'status' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${items.length > 2 ? "mutli_select_status" : ""} ${props.className} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
-                            (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
-                                        clearIcon()] }))] })), props.dropdownType === '' &&
-                (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === "withIcon" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne
+                    ? `selected_multile ${`selected_num_` + items.length}`
+                    : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
+                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                        }, className: `w-full ${props.maxWidth ? `${"optionBodyMaxWidth_" + props.maxWidth}` : ""}`, panelStyle: {
+                            width: props.panelWidth ? props.panelWidth + "px" : "",
+                        } }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", items.length - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), props.dropdownType === "default" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? "left_icon" : "no_icon"} ${isMoreThanOne
+                    ? `selected_multile ${`selected_num_` + items.length}`
+                    : ""}` }, { children: [props.icon !== undefined && (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
+                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                        }, className: `w-full`, panelStyle: {
+                            width: props.panelWidth ? props.panelWidth + "px" : "",
+                        } }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", items.length - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), props.dropdownType === "status" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${items.length > 2 ? "mutli_select_status" : ""} ${props.className} ${items.length > 3 ? "moreThanThreeItems" : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
+                            minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                            maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                        }, className: `w-full`, panelStyle: {
+                            width: props.panelWidth ? props.panelWidth + "px" : "",
+                        } }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" ", "+", items.length - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), props.dropdownType === "" && ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
+                    minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                    maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
+                }, 
+                // className="w-20rem"
+                showClear: true, panelStyle: {
+                    width: props.panelWidth ? props.panelWidth + "px" : "",
+                } }))] }));
 };
 exports.MultiSelectDropDown = MultiSelectDropDown;
 exports.default = exports.MultiSelectDropDown;

package/dist/components/sc-multi-select/scMultiSelect.js

@@ -5,39 +5,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const multiselect_1 = require("primereact/multiselect");
 const react_1 = require("react");
 const ScMultiSelect = (props) => {
+    var _a;
     const multiselectElm = (0, react_1.useRef)(null);
-    // const [showCount, setShowCount] = useState<number>(0);
-    // const checkOverflow = useCallback(() => {
-    //   if (multiselectElm !== null) {
-    //     const dropDownItem =
-    //       multiselectElm.current.getElement().children[1].children[0];
-    //     const selectedItems =
-    //       multiselectElm.current.getElement().children[1].children[0].children;
-    //     const containerWidth = dropDownItem.offsetWidth;
-    //     let totalWidth = 0;
-    //     for (let i = 0; i < selectedItems.length; i++) {
-    //       totalWidth += selectedItems[i].offsetWidth; // Approximation, adjust as necessary
-    //       if (totalWidth + (78 + selectedItems.length * 8) > containerWidth) {
-    //         // 20px buffer for ellipsis
-    //         setShowCount(selectedItems.length - i);
-    //         i = selectedItems.length;
-    //       } else {
-    //         setShowCount(0);
-    //       }
-    //     }
-    //   } else {
-    //     setShowCount(0);
-    //   }
-    // }, [props?.value, multiselectElm]);
-    // useEffect(() => {
-    //   checkOverflow();
-    // }, [checkOverflow]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "relative form_field" }, { children: (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { ref: multiselectElm, selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, removeIcon: "x-close", onChange: (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-                    yield (props === null || props === void 0 ? void 0 : props.onChange(e));
-                    // if (props?.showSelectedCount) checkOverflow();
-                }), itemTemplate: (item) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item[props.optionLabel] }), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) +
-                    ` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount)
-                        ? "showSelectedCount"
-                        : "noShowSelectedCount"} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? "hideChipremoveIcon" : ""}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }) })) }));
+    const [showCount, setShowCount] = (0, react_1.useState)(0);
+    const checkOverflow = (0, react_1.useCallback)(() => {
+        if (multiselectElm !== null) {
+            const dropDownItem = multiselectElm.current.getElement().children[1].children[0];
+            const selectedItems = multiselectElm.current.getElement().children[1].children[0].children;
+            const containerWidth = dropDownItem.offsetWidth;
+            let totalWidth = 0;
+            for (let i = 0; i < selectedItems.length; i++) {
+                totalWidth += selectedItems[i].offsetWidth; // Approximation, adjust as necessary
+                if (totalWidth + (78 + selectedItems.length * 8) > containerWidth) {
+                    // 20px buffer for ellipsis
+                    setShowCount(selectedItems.length - i);
+                    i = selectedItems.length;
+                }
+                else {
+                    setShowCount(0);
+                }
+            }
+        }
+        else {
+            setShowCount(0);
+        }
+    }, [props === null || props === void 0 ? void 0 : props.value, multiselectElm]);
+    (0, react_1.useEffect)(() => {
+        checkOverflow();
+    }, [checkOverflow]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative form_field" }, { children: [(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { ref: multiselectElm, selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, removeIcon: "x-close", onChange: (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+                        yield (props === null || props === void 0 ? void 0 : props.onChange(e));
+                        if (props === null || props === void 0 ? void 0 : props.showSelectedCount)
+                            checkOverflow();
+                    }), itemTemplate: (item) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item[props.optionLabel] }), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) +
+                        ` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount)
+                            ? "showSelectedCount"
+                            : "noShowSelectedCount"} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? "hideChipremoveIcon" : ""}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), showCount !== 0 &&
+                    (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
+                    ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 2 && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? "68px" : "40px"}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { top: "10px" }, className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: `+${showCount - 1}` })) })))] })) }));
 };
 exports.default = ScMultiSelect;

package/dist/directives/svg-icons.js

@@ -10770,6 +10770,194 @@ exports.iconList = [
 </clipPath>
 </defs>
 </svg>
+`,
+    },
+    {
+        name: "dashboard-01",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0547 2.96875H17.6172C17.6172 2.96875 18.7891 2.96875 18.7891 4.14062V15.8594C18.7891 15.8594 18.7891 17.0312 17.6172 17.0312H16.0547C16.0547 17.0312 14.8828 17.0312 14.8828 15.8594V4.14062C14.8828 4.14062 14.8828 2.96875 16.0547 2.96875Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.21875 7.65625H10.7812C10.7812 7.65625 11.9531 7.65625 11.9531 8.82812V15.8594C11.9531 15.8594 11.9531 17.0312 10.7812 17.0312H9.21875C9.21875 17.0312 8.04688 17.0312 8.04688 15.8594V8.82812C8.04688 8.82812 8.04688 7.65625 9.21875 7.65625Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.38281 12.3438H3.94531C3.94531 12.3438 5.11719 12.3438 5.11719 13.5156V15.8594C5.11719 15.8594 5.11719 17.0312 3.94531 17.0312H2.38281C2.38281 17.0312 1.21094 17.0312 1.21094 15.8594V13.5156C1.21094 13.5156 1.21094 12.3438 2.38281 12.3438Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+`,
+    },
+    {
+        name: "plans-and-apps",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99219 1.21094H7.64141C7.64141 1.21094 8.42266 1.21094 8.42266 1.99219V7.64141C8.42266 7.64141 8.42266 8.42266 7.64141 8.42266H1.99219C1.99219 8.42266 1.21094 8.42266 1.21094 7.64141V1.99219C1.21094 1.99219 1.21094 1.21094 1.99219 1.21094Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4766 6.56381C13.6453 6.78716 13.8656 6.96636 14.1187 7.08608C14.3717 7.2058 14.65 7.26249 14.9297 7.25131C15.8203 7.25131 16.5391 6.70443 16.5391 6.04037C16.5391 5.37631 15.8203 4.82943 14.9297 4.82943C14.0391 4.82943 13.3203 4.29037 13.3203 3.61849C13.3203 2.94662 14.0391 2.41537 14.9297 2.41537C15.2085 2.40459 15.4859 2.46066 15.7387 2.5789C15.9915 2.69713 16.2123 2.87411 16.3828 3.09506" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9297 7.25V8.05469" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9297 1.60938V2.41406" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.99219 11.5781H7.64141C7.64141 11.5781 8.42266 11.5781 8.42266 12.3594V18.0086C8.42266 18.0086 8.42266 18.7898 7.64141 18.7898H1.99219C1.99219 18.7898 1.21094 18.7898 1.21094 18.0086V12.3594C1.21094 12.3594 1.21094 11.5781 1.99219 11.5781Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 12.7578H17" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 16.7578H17" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`,
+    },
+    {
+        name: "users-and-roles",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8486)">
+<path d="M2.38281 5.3125C2.38281 5.7787 2.56801 6.22581 2.89766 6.55546C3.22732 6.88511 3.67442 7.07031 4.14062 7.07031C4.60683 7.07031 5.05393 6.88511 5.38359 6.55546C5.71324 6.22581 5.89844 5.7787 5.89844 5.3125C5.89844 4.8463 5.71324 4.39919 5.38359 4.06954C5.05393 3.73989 4.60683 3.55469 4.14062 3.55469C3.67442 3.55469 3.22732 3.73989 2.89766 4.06954C2.56801 4.39919 2.38281 4.8463 2.38281 5.3125Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.14062 8.24219C3.36362 8.24219 2.61845 8.55085 2.06902 9.10027C1.5196 9.6497 1.21094 10.3949 1.21094 11.1719V12.9297H2.38281L2.96875 17.6172H5.3125" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1016 5.3125C14.1016 5.54334 14.147 5.77192 14.2354 5.98519C14.3237 6.19845 14.4532 6.39223 14.6164 6.55546C14.7796 6.71869 14.9734 6.84817 15.1867 6.93651C15.4 7.02485 15.6285 7.07031 15.8594 7.07031C16.0902 7.07031 16.3188 7.02485 16.5321 6.93651C16.7453 6.84817 16.9391 6.71869 17.1023 6.55546C17.2656 6.39223 17.395 6.19845 17.4834 5.98519C17.5717 5.77192 17.6172 5.54334 17.6172 5.3125C17.6172 5.08166 17.5717 4.85308 17.4834 4.63981C17.395 4.42655 17.2656 4.23277 17.1023 4.06954C16.9391 3.90631 16.7453 3.77683 16.5321 3.68849C16.3188 3.60015 16.0902 3.55469 15.8594 3.55469C15.6285 3.55469 15.4 3.60015 15.1867 3.68849C14.9734 3.77683 14.7796 3.90631 14.6164 4.06954C14.4532 4.23277 14.3237 4.42655 14.2354 4.63981C14.147 4.85308 14.1016 5.08166 14.1016 5.3125Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.8594 8.24219C16.6364 8.24219 17.3816 8.55085 17.931 9.10027C18.4804 9.6497 18.7891 10.3949 18.7891 11.1719V12.9297H17.6172L17.0312 17.6172H14.6875" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.65625 3.55469C7.65625 4.17629 7.90318 4.77243 8.34272 5.21197C8.78226 5.65151 9.3784 5.89844 10 5.89844C10.6216 5.89844 11.2177 5.65151 11.6573 5.21197C12.0968 4.77243 12.3437 4.17629 12.3438 3.55469C12.3437 2.93309 12.0968 2.33694 11.6573 1.89741C11.2177 1.45787 10.6216 1.21094 10 1.21094C9.3784 1.21094 8.78226 1.45787 8.34272 1.89741C7.90318 2.33694 7.65625 2.93309 7.65625 3.55469Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1016 11.1719C14.1016 10.0841 13.6694 9.04082 12.9002 8.27163C12.1311 7.50244 11.0878 7.07031 10 7.07031C8.9122 7.07031 7.86895 7.50244 7.09976 8.27163C6.33057 9.04082 5.89844 10.0841 5.89844 11.1719V12.9297H7.65625L8.24219 18.7891H11.7578L12.3438 12.9297H14.1016V11.1719Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8486">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "reports-01",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8494)">
+<path d="M3.4 1H16.6C16.6 1 19 1 19 4V16C19 16 19 19 16.6 19H3.4C3.4 19 1 19 1 16V4C1 4 1 1 3.4 1Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.55469 8.24219C3.55469 9.17459 3.92508 10.0688 4.58439 10.7281C5.2437 11.3874 6.13791 11.7578 7.07031 11.7578C8.00271 11.7578 8.89693 11.3874 9.55623 10.7281C10.2155 10.0688 10.5859 9.17459 10.5859 8.24219C10.5859 7.30979 10.2155 6.41557 9.55623 5.75627C8.89693 5.09696 8.00271 4.72656 7.07031 4.72656C6.13791 4.72656 5.2437 5.09696 4.58439 5.75627C3.92508 6.41557 3.55469 7.30979 3.55469 8.24219Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.07031 4.72656V8.24219L9.55625 10.7281" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9297 5.89844H15.2734" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9297 8.24219H15.2734" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 15H7" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15H15" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9297 10.5859H15.2734" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8494">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+`,
+    },
+    {
+        name: "notifications-hub",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8504)">
+<path d="M12.9939 15.9001H1.26562C1.26562 15.9001 2.24298 14.3826 2.24298 10.5247C2.24298 9.22864 2.75783 7.98566 3.67429 7.06921C4.59073 6.15277 5.83371 5.63791 7.12976 5.63791V4.17188" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9959 15.8974C12.9959 15.8974 12.5591 15.2193 12.2695 13.6172" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.82812 17.7344C5.91089 18.0163 6.08274 18.2638 6.31795 18.4399C6.55316 18.616 6.83908 18.7112 7.1329 18.7112C7.42672 18.7112 7.71264 18.616 7.94785 18.4399C8.18306 18.2638 8.35491 18.0163 8.43767 17.7344" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.0469 7.73438C14.6941 7.73438 15.2188 7.20971 15.2188 6.5625C15.2188 5.9153 14.6941 5.39062 14.0469 5.39062C13.3996 5.39062 12.875 5.9153 12.875 6.5625C12.875 7.20971 13.3996 7.73438 14.0469 7.73438Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0434 2.03175L15.3887 3.16612C15.4456 3.35464 15.5719 3.5145 15.7422 3.61329C15.9125 3.71208 16.1141 3.74242 16.3059 3.69815L17.4559 3.43175C17.6738 3.38262 17.9018 3.40458 18.1064 3.4944C18.311 3.58423 18.4815 3.7372 18.5928 3.93091C18.7042 4.12462 18.7506 4.3489 18.7253 4.57089C18.6999 4.79288 18.6042 5.00093 18.452 5.16456L17.6465 6.03253C17.5121 6.17708 17.4374 6.36716 17.4374 6.56456C17.4374 6.76196 17.5121 6.95205 17.6465 7.09659L18.452 7.96456C18.6045 8.12815 18.7006 8.33629 18.726 8.55846C18.7516 8.78065 18.7053 9.0051 18.5938 9.19901C18.4824 9.39291 18.3118 9.54604 18.107 9.63588C17.9022 9.72565 17.674 9.74752 17.4559 9.69815L16.3059 9.43096C16.1142 9.38807 15.9132 9.41893 15.7432 9.5176C15.5732 9.61619 15.4467 9.77518 15.3887 9.96299L15.0434 11.0942C14.9792 11.3083 14.8478 11.496 14.6685 11.6295C14.4892 11.7629 14.2716 11.8349 14.0481 11.8349C13.8246 11.8349 13.607 11.7629 13.4278 11.6295C13.2485 11.496 13.117 11.3083 13.0528 11.0942L12.7074 9.95908C12.6495 9.77135 12.5229 9.61229 12.353 9.51369C12.183 9.41502 11.982 9.38416 11.7903 9.42705L10.6403 9.69424C10.4221 9.74362 10.194 9.72174 9.98916 9.63198C9.78439 9.54213 9.61377 9.38901 9.50236 9.1951C9.39095 9.00119 9.34463 8.77674 9.3701 8.55455C9.39564 8.33238 9.49174 8.12423 9.64416 7.96065L10.4496 7.09269C10.5841 6.94814 10.6588 6.75805 10.6588 6.56065C10.6588 6.36326 10.5841 6.17318 10.4496 6.02862L9.64416 5.16065C9.49205 4.99702 9.39627 4.78897 9.37095 4.56698C9.34564 4.34499 9.39205 4.12072 9.50338 3.92701C9.6147 3.73329 9.78517 3.58033 9.98978 3.4905C10.1943 3.40068 10.4223 3.37872 10.6403 3.42784L11.7903 3.69425C11.9821 3.73851 12.1836 3.70818 12.3539 3.60938C12.5242 3.51059 12.6506 3.35073 12.7074 3.16222L13.0528 2.02784C13.1174 1.81387 13.2492 1.62644 13.4288 1.49335C13.6084 1.36027 13.826 1.28863 14.0495 1.28906C14.2731 1.2895 14.4905 1.362 14.6695 1.49579C14.8485 1.62958 14.9796 1.81753 15.0434 2.03175Z" stroke="#8190E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8504">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "plans",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0541 9.39844L9.93687 10.5234C9.83813 10.6202 9.75969 10.7357 9.70614 10.8631C9.65258 10.9905 9.625 11.1274 9.625 11.2656C9.625 11.4039 9.65258 11.5407 9.70614 11.6681C9.75969 11.7956 9.83813 11.9111 9.93687 12.0078C10.0837 12.1562 10.272 12.2566 10.4771 12.2956C10.6822 12.3347 10.8942 12.3106 11.0853 12.2266L12.6478 11.5469C12.8389 11.4628 13.051 11.4387 13.256 11.4778C13.4611 11.5168 13.6495 11.6172 13.7962 11.7656C13.895 11.8624 13.9734 11.9778 14.027 12.1053C14.0805 12.2327 14.1081 12.3696 14.1081 12.5078C14.1081 12.646 14.0805 12.7829 14.027 12.9103C13.9734 13.0378 13.895 13.1533 13.7962 13.25L12.7181 14.375" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2266 10.2266L9.8125 9.8125" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9609 13.9609L13.5469 13.5469" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.89093 6.57061L3.46905 9.60186C3.46544 9.7574 3.49412 9.91199 3.55329 10.0559C3.61245 10.1998 3.70082 10.3298 3.8128 10.4378L11.2347 17.8597C11.343 17.9693 11.4719 18.0563 11.6141 18.1157C11.7562 18.1751 11.9087 18.2057 12.0628 18.2057C12.2169 18.2057 12.3694 18.1751 12.5116 18.1157C12.6537 18.0563 12.7827 17.9693 12.8909 17.8597L17.8597 12.8909C17.9693 12.7827 18.0563 12.6537 18.1157 12.5115C18.1751 12.3694 18.2057 12.2169 18.2057 12.0628C18.2057 11.9087 18.1751 11.7562 18.1157 11.6141C18.0563 11.4719 17.9693 11.3429 17.8597 11.2347L10.3441 3.7503C10.2314 3.63803 10.0972 3.5497 9.94949 3.49063C9.8018 3.43155 9.6437 3.40295 9.48468 3.40655L6.48468 3.84405" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.04688 7.21875C6.04688 7.52955 6.17034 7.82762 6.39011 8.04739C6.60988 8.26716 6.90795 8.39062 7.21875 8.39062C7.52955 8.39062 7.82762 8.26716 8.04739 8.04739C8.26716 7.82762 8.39062 7.52955 8.39062 7.21875C8.39062 6.90795 8.26716 6.60988 8.04739 6.39011C7.82762 6.17034 7.52955 6.04688 7.21875 6.04688C6.90795 6.04688 6.60988 6.17034 6.39011 6.39011C6.17034 6.60988 6.04688 6.90795 6.04688 7.21875Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.39062 6.39062L1.79688 1.79688" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+`,
+    },
+    {
+        name: "apps",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8597)">
+<path d="M1.99219 1.21094H7.64141C7.64141 1.21094 8.42266 1.21094 8.42266 1.99219V7.64141C8.42266 7.64141 8.42266 8.42266 7.64141 8.42266H1.99219C1.99219 8.42266 1.21094 8.42266 1.21094 7.64141V1.99219C1.21094 1.99219 1.21094 1.21094 1.99219 1.21094Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3594 1.21094H18.0086C18.0086 1.21094 18.7898 1.21094 18.7898 1.99219V7.64141C18.7898 7.64141 18.7898 8.42266 18.0086 8.42266H12.3594C12.3594 8.42266 11.5781 8.42266 11.5781 7.64141V1.99219C11.5781 1.99219 11.5781 1.21094 12.3594 1.21094Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.99219 11.5781H7.64141C7.64141 11.5781 8.42266 11.5781 8.42266 12.3594V18.0086C8.42266 18.0086 8.42266 18.7898 7.64141 18.7898H1.99219C1.99219 18.7898 1.21094 18.7898 1.21094 18.0086V12.3594C1.21094 12.3594 1.21094 11.5781 1.99219 11.5781Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1836 12.4766V17.8852" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8891 15.1875H12.4805" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8597">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "users-04",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8613)">
+<path d="M2.96875 3.55469C2.96875 4.17629 3.21568 4.77243 3.65522 5.21197C4.09476 5.65151 4.6909 5.89844 5.3125 5.89844C5.9341 5.89844 6.53024 5.65151 6.96978 5.21197C7.40932 4.77243 7.65625 4.17629 7.65625 3.55469C7.65625 2.93309 7.40932 2.33694 6.96978 1.89741C6.53024 1.45787 5.9341 1.21094 5.3125 1.21094C4.6909 1.21094 4.09476 1.45787 3.65522 1.89741C3.21568 2.33694 2.96875 2.93309 2.96875 3.55469Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.41406 11.1719C9.41406 10.0841 8.98193 9.04082 8.21274 8.27163C7.44355 7.50244 6.4003 7.07031 5.3125 7.07031C4.2247 7.07031 3.18145 7.50244 2.41226 8.27163C1.64307 9.04082 1.21094 10.0841 1.21094 11.1719V12.9297H2.96875L3.55469 18.7891H7.07031L7.65625 12.9297H9.41406V11.1719Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3438 3.55469C12.3437 4.17629 12.5907 4.77243 13.0302 5.21197C13.4698 5.65151 14.0659 5.89844 14.6875 5.89844C15.3091 5.89844 15.9052 5.65151 16.3448 5.21197C16.7843 4.77243 17.0312 4.17629 17.0312 3.55469C17.0312 2.93309 16.7843 2.33694 16.3448 1.89741C15.9052 1.45787 15.3091 1.21094 14.6875 1.21094C14.0659 1.21094 13.4698 1.45787 13.0302 1.89741C12.5907 2.33694 12.3438 2.93309 12.3438 3.55469Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.1719 12.9264H12.3438L12.9297 18.7858H16.4453L17.0312 12.9264H18.7891V11.1686C18.7884 10.2722 18.494 9.4006 17.9509 8.68732C17.4079 7.97405 16.6461 7.45833 15.7821 7.21908C14.9182 6.97983 13.9996 7.03022 13.167 7.36255C12.3344 7.69488 11.6336 8.29085 11.1719 9.05925" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8613">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "user-roles-01",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8597)">
+<path d="M1.99219 1.21094H7.64141C7.64141 1.21094 8.42266 1.21094 8.42266 1.99219V7.64141C8.42266 7.64141 8.42266 8.42266 7.64141 8.42266H1.99219C1.99219 8.42266 1.21094 8.42266 1.21094 7.64141V1.99219C1.21094 1.99219 1.21094 1.21094 1.99219 1.21094Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3594 1.21094H18.0086C18.0086 1.21094 18.7898 1.21094 18.7898 1.99219V7.64141C18.7898 7.64141 18.7898 8.42266 18.0086 8.42266H12.3594C12.3594 8.42266 11.5781 8.42266 11.5781 7.64141V1.99219C11.5781 1.99219 11.5781 1.21094 12.3594 1.21094Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.99219 11.5781H7.64141C7.64141 11.5781 8.42266 11.5781 8.42266 12.3594V18.0086C8.42266 18.0086 8.42266 18.7898 7.64141 18.7898H1.99219C1.99219 18.7898 1.21094 18.7898 1.21094 18.0086V12.3594C1.21094 12.3594 1.21094 11.5781 1.99219 11.5781Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1836 12.4766V17.8852" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8891 15.1875H12.4805" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8597">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "static-data-01",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8640)">
+<path d="M12.9297 13.5156C12.9297 13.8264 13.0532 14.1245 13.2729 14.3443C13.4927 14.564 13.7908 14.6875 14.1016 14.6875C14.4124 14.6875 14.7104 14.564 14.9302 14.3443C15.15 14.1245 15.2734 13.8264 15.2734 13.5156C15.2734 13.2048 15.15 12.9068 14.9302 12.687C14.7104 12.4672 14.4124 12.3438 14.1016 12.3438C13.7908 12.3438 13.4927 12.4672 13.2729 12.687C13.0532 12.9068 12.9297 13.2048 12.9297 13.5156Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0972 8.98527L15.4425 10.1204C15.4995 10.3088 15.6259 10.4686 15.7961 10.5673C15.9664 10.6661 16.1678 10.6965 16.3597 10.6525L17.5097 10.3861C17.7276 10.3369 17.9556 10.3589 18.1602 10.4487C18.3648 10.5385 18.5352 10.6915 18.6466 10.8852C18.7579 11.0789 18.8043 11.3032 18.779 11.5252C18.7537 11.7472 18.6579 11.9552 18.5058 12.1189L17.7003 12.9868C17.5659 13.1314 17.4911 13.3215 17.4911 13.5189C17.4911 13.7163 17.5659 13.9063 17.7003 14.0509L18.5058 14.9189C18.6579 15.0825 18.7537 15.2905 18.779 15.5125C18.8043 15.7345 18.7579 15.9588 18.6466 16.1525C18.5352 16.3462 18.3648 16.4992 18.1602 16.589C17.9556 16.6788 17.7276 16.7008 17.5097 16.6517L16.3597 16.3853C16.1678 16.3412 15.9664 16.3716 15.7961 16.4704C15.6259 16.5692 15.4995 16.7289 15.4425 16.9173L15.0972 18.0478C15.033 18.2619 14.9015 18.4496 14.7222 18.583C14.5429 18.7164 14.3254 18.7885 14.1019 18.7885C13.8784 18.7885 13.6608 18.7164 13.4815 18.583C13.3022 18.4496 13.1707 18.2619 13.1065 18.0478L12.7612 16.9126C12.7043 16.7242 12.5778 16.5645 12.4076 16.4657C12.2373 16.3669 12.0359 16.3365 11.844 16.3806L10.694 16.647C10.4761 16.6961 10.2481 16.6742 10.0435 16.5843C9.83894 16.4945 9.66849 16.3415 9.55714 16.1478C9.44578 15.9541 9.39938 15.7298 9.42472 15.5078C9.45006 15.2859 9.54581 15.0778 9.69796 14.9142L10.5034 14.0462C10.6379 13.9017 10.7126 13.7116 10.7126 13.5142C10.7126 13.3168 10.6379 13.1267 10.5034 12.9821L9.69796 12.1142C9.54581 11.9505 9.45006 11.7425 9.42472 11.5205C9.39938 11.2985 9.44578 11.0742 9.55714 10.8805C9.66849 10.6868 9.83894 10.5338 10.0435 10.444C10.2481 10.3542 10.4761 10.3322 10.694 10.3814L11.844 10.6478C12.0359 10.6918 12.2373 10.6614 12.4076 10.5627C12.5778 10.4639 12.7043 10.3041 12.7612 10.1157L13.1065 8.98058C13.1712 8.76664 13.3032 8.57925 13.4828 8.44624C13.6624 8.31322 13.8801 8.24166 14.1036 8.24219C14.3271 8.24272 14.5445 8.3153 14.7235 8.44916C14.9025 8.58302 15.0335 8.77102 15.0972 8.98527Z" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.55469 5.89844H11.7578" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.55469 9.41406H6.48438" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.55469 12.9297H6.48438" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.48438 16.4453H2.38281C2.07201 16.4453 1.77394 16.3218 1.55417 16.1021C1.3344 15.8823 1.21094 15.5842 1.21094 15.2734V2.38281C1.21094 2.07201 1.3344 1.77394 1.55417 1.55417C1.77394 1.3344 2.07201 1.21094 2.38281 1.21094H10.6867C10.9973 1.211 11.2952 1.33436 11.5148 1.55391L13.7586 3.79766C13.9781 4.01734 14.1015 4.3152 14.1016 4.62578V5.89844" stroke="#162578" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8640">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`,
+    },
+    {
+        name: "system-settings-01",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_54_8653)">
+<path d="M12.8477 13.5547C12.8477 13.8655 12.9711 14.1636 13.1909 14.3833C13.4107 14.6031 13.7087 14.7266 14.0195 14.7266C14.3303 14.7266 14.6284 14.6031 14.8482 14.3833C15.0679 14.1636 15.1914 13.8655 15.1914 13.5547C15.1914 13.2439 15.0679 12.9458 14.8482 12.726C14.6284 12.5063 14.3303 12.3828 14.0195 12.3828C13.7087 12.3828 13.4107 12.5063 13.1909 12.726C12.9711 12.9458 12.8477 13.2439 12.8477 13.5547Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0157 9.02081L15.3618 10.156C15.4186 10.3443 15.5448 10.504 15.715 10.6028C15.8851 10.7016 16.0864 10.732 16.2782 10.688L17.429 10.4208C17.647 10.3717 17.8751 10.3937 18.0797 10.4836C18.2843 10.5735 18.4548 10.7266 18.5661 10.9205C18.6774 11.1143 18.7236 11.3387 18.6981 11.5608C18.6726 11.7828 18.5766 11.9909 18.4243 12.1544L17.6188 13.0224C17.4844 13.1669 17.4096 13.357 17.4096 13.5544C17.4096 13.7518 17.4844 13.9419 17.6188 14.0864L18.4243 14.9544C18.5763 15.118 18.672 15.3259 18.6973 15.5478C18.7226 15.7697 18.6763 15.9939 18.5651 16.1875C18.4538 16.3812 18.2835 16.5341 18.0791 16.6241C17.8747 16.714 17.6469 16.7361 17.429 16.6872L16.2782 16.4208C16.0864 16.3768 15.8851 16.4072 15.715 16.506C15.5448 16.6048 15.4186 16.7645 15.3618 16.9528L15.0157 18.088C14.9515 18.3021 14.82 18.4898 14.6407 18.6232C14.4614 18.7567 14.2439 18.8287 14.0204 18.8287C13.7969 18.8287 13.5793 18.7567 13.4 18.6232C13.2207 18.4898 13.0892 18.3021 13.025 18.088L12.6797 16.9552C12.6227 16.7668 12.4963 16.607 12.3261 16.5083C12.1558 16.4095 11.9544 16.3791 11.7625 16.4232L10.6125 16.6896C10.3945 16.739 10.1663 16.7173 9.96156 16.6275C9.75678 16.5377 9.58619 16.3847 9.47482 16.1908C9.36346 15.9969 9.3172 15.7724 9.34283 15.5503C9.36846 15.3282 9.46464 15.1202 9.61723 14.9567L10.4219 14.0888C10.5563 13.9442 10.6311 13.7541 10.6311 13.5567C10.6311 13.3593 10.5563 13.1693 10.4219 13.0247L9.61723 12.1567C9.46487 11.9932 9.36889 11.7852 9.34337 11.5631C9.31785 11.341 9.36413 11.1167 9.47542 10.9228C9.58671 10.729 9.75717 10.5759 9.9618 10.486C10.1664 10.396 10.3945 10.374 10.6125 10.4232L11.7625 10.6903C11.9544 10.7344 12.1558 10.704 12.3261 10.6052C12.4963 10.5065 12.6227 10.3467 12.6797 10.1583L13.025 9.02315C13.089 8.80898 13.2202 8.62113 13.3994 8.48749C13.5785 8.35384 13.796 8.28151 14.0195 8.28125C14.243 8.28099 14.4606 8.3528 14.6401 8.48602C14.8195 8.61925 14.9512 8.80679 15.0157 9.02081Z" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.07031 18.75L7.65625 15.2344" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.3125 18.75H10.7812" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.67266 15.2344H3.55469C2.93309 15.2344 2.33694 14.9874 1.89741 14.5479C1.45787 14.1084 1.21094 13.5122 1.21094 12.8906V3.51562C1.21094 2.89402 1.45787 2.29788 1.89741 1.85834C2.33694 1.41881 2.93309 1.17188 3.55469 1.17188H16.4453C17.0669 1.17188 17.6631 1.41881 18.1026 1.85834C18.5421 2.29788 18.7891 2.89402 18.7891 3.51562V8.00781" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.3625 4.42188L5.69766 6.64219C5.64717 6.70925 5.5829 6.76472 5.50918 6.80485C5.43545 6.84498 5.35398 6.86885 5.27026 6.87485C5.18653 6.88084 5.10249 6.86883 5.0238 6.83961C4.94511 6.81039 4.87359 6.76465 4.81406 6.70547L3.91016 5.80156" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.3625 8.92188L5.69766 11.1422C5.64717 11.2092 5.5829 11.2647 5.50918 11.3048C5.43545 11.345 5.35398 11.3689 5.27026 11.3748C5.18653 11.3808 5.10249 11.3688 5.0238 11.3396C4.94511 11.3104 4.87359 11.2647 4.81406 11.2055L3.91016 10.3016" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7812 5.27344H15.0781" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_54_8653">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
 `,
     },
 ];

package/dist/pages/RowGroupingServerside/DragandDropFeatures.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("@ag-grid-community/styles/ag-grid.css");
+require("@ag-grid-community/styles/ag-theme-quartz.css");
+const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const constants_1 = require("../../components/ag-grid/constants");
+const type_1 = require("../../components/types/type");
+const dummyData_1 = require("./dummyData");
+const DragAndDropFeatureTesting = () => {
+    const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
+    const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
+    const [columnDefs] = (0, react_1.useState)([
+        { field: "employeeId", rowDrag: true, suppressFillHandle: true },
+        { field: "employeeName", },
+        { field: "jobTitle" },
+        { field: "employmentType" },
+    ]);
+    const defaultColDef = (0, react_1.useMemo)(() => {
+        return {
+            width: 240,
+            flex: 1,
+            sortable: false,
+        };
+    }, []);
+    const getRowData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        debugger;
+        var allRows = yield (0, dummyData_1.getNormalData)();
+        const result = { rowData: allRows };
+        return result;
+    });
+    const initialConditions = {
+        displayAdvancedFilter: false,
+        displaySort: true,
+        displayFeaturesHeader: true,
+        displaySearch: type_1.VisibilityState.ENABLE,
+        displayFilter: type_1.VisibilityState.ENABLE
+    };
+    const gridApi = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" }, 
+                // rowData={dummyData}
+                getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.CLIENT_SIDE, shouldRefetch: false, filterConditions: [
+                    { id: 1, label: "AND" },
+                    { id: 2, label: "OR" },
+                ], columnDefs: columnDefs, defaultColDef: defaultColDef, rowDragManaged: true }) })) })));
+};
+exports.default = DragAndDropFeatureTesting;