sccoreui 6.3.83 → 6.3.85

package/dist/App.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 require("./App.scss");
-// import Home from "./pages/home";
-// import DataTableClientSide from "./pages/aggrid/TestingWithAdminClientSide";
-// import Home from "./pages/home";
+// import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
 // import Home from "./pages/home";
 const App = () => {
     // const [selectedCountries, setSelectedCountries] = useState(null);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "m-6" }));
+    return (0, jsx_runtime_1.jsx)("div", { children: " " });
 };
 exports.default = App;

package/dist/App.scss

@@ -1601,7 +1601,7 @@ code {
 .Multi_select_dropdown_panel {
   .p-multiselect-header {
     display: block;
-    padding: 8px 0;
+    padding: 6px;
 
     .p-checkbox,
     .p-multiselect-close {
@@ -1955,6 +1955,19 @@ div:has(ul.date_filter) .p-datepicker-footer {
   }
 }
 
+.p-multiselect {
+  .p-multiselect-header {
+    .p-multiselect-close {
+      display: none !important;
+    }
+  }
+  .p-multiselect-items {
+    .p-multiselect-item {
+      border-radius: 4px !important;
+    }
+  }
+}
+
 .panel_withIcon.p-multiselect-panel {
   .p-multiselect-items {
     .p-multiselect-item {

package/dist/assets/variables.scss

@@ -0,0 +1,108 @@
+// Primary colors
+$primary-colors: (
+  25: #f5f6fd,
+  50: #e2e5fa,
+  100: #ced4f6,
+  200: #a8b2ef,
+  300: #8190e8,
+  400: #243dc6,
+  500: #162578,
+  600: #132067,
+  700: #111c5b,
+  800: #0e184f,
+  900: #0c1442,
+);
+// secondary colors
+$neutral-colors: (
+  25: #fcfcfd,
+  50: #f9fafb,
+  100: #f2f4f7,
+  200: #eaecf0,
+  300: #d0d5dd,
+  400: #98a2b3,
+  500: #667085,
+  600: #475467,
+  700: #344054,
+  800: #1d2939,
+  900: #101828,
+);
+
+// warning colors
+$warning-colors: (
+  25: #fff4ef,
+  50: #ffe8ca,
+  100: #ffddb0,
+  200: #ffce8d,
+  300: #ffbf6a,
+  400: #ff9200,
+  500: #e58300,
+  600: #be6c00,
+  700: #9e5a00,
+  800: #7e4800,
+  900: #5f3600,
+);
+
+// error colors
+$warning-colors: (
+  25: #fffbfa,
+  50: #fef3f2,
+  100: #fee4e2,
+  200: #fecdca,
+  300: #fda29b,
+  400: #f97066,
+  500: #e58300,
+  600: #be6c00,
+  700: #9e5a00,
+  800: #7e4800,
+  900: #5f3600,
+);
+
+//
+
+:root {
+  @each $key, $value in $secondary-colors {
+    --_secondary-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $primary-colors {
+    --_primary-#{$key}: #{$value};
+  }
+}
+
+// Secondary Utilities
+@each $key, $value in $secondary-colors {
+  .bg-secondary-#{$key} {
+    background-color: var(--_secondary-#{$key}) !important;
+  }
+
+  .text-secondary-#{$key} {
+    color: var(--_secondary-#{$key}) !important;
+  }
+
+  .hover\:bg-secondary-#{$key}:hover {
+    background-color: var(--_secondary-#{$key}) !important;
+  }
+
+  .hover\:text-secondary-#{$key}:hover {
+    color: var(--_secondary-#{$key}) !important;
+  }
+}
+
+// Primary Utilities
+@each $key, $value in $primary-colors {
+  .bg-primary-#{$key} {
+    background-color: var(--_primary-#{$key}) !important;
+  }
+
+  .text-primary-#{$key} {
+    color: var(--_primary-#{$key}) !important;
+  }
+
+  .hover\:bg-primary-#{$key}:hover {
+    background-color: var(--_primary-#{$key}) !important;
+  }
+
+  .hover\:text-primary-#{$key}:hover {
+    color: var(--_primary-#{$key}) !important;
+  }
+}

package/dist/components/ag-charts/AGCharts.js

@@ -13,7 +13,6 @@ const AGCharts = ({ options }) => {
     const chartRef = (0, react_1.useRef)(null);
     const chartInstanceRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        debugger;
         if (!chartRef.current)
             return undefined;
         const chartOptions = Object.assign(Object.assign({}, options), { container: chartRef.current });

package/dist/components/form/form-fields/FieldLabel.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const svg_1 = require("../../../assets/svg/svg");
 const FieldLabel = (props) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1" }, { children: [(props === null || props === void 0 ? void 0 : props.isRequired) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (!(props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched)) ||
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center", style: { gap: "2px" } }, { children: [(props === null || props === void 0 ? void 0 : props.isRequired) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (!(props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched)) ||
                         ((props === null || props === void 0 ? void 0 : props.value) && !(props === null || props === void 0 ? void 0 : props.touched)) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningGreen, {})) : (props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningRed, {})) : ((0, jsx_runtime_1.jsx)(svg_1.Lightning, {})) })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.label, className: "mb-1" }, { children: props === null || props === void 0 ? void 0 : props.label }))] })) }));
 };
 exports.default = FieldLabel;

package/dist/components/form/form-fields/form-fields.js

@@ -71,7 +71,7 @@ const DropDownField = (props) => {
                             onFocus && onFocus();
                         }, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { 
                         // onChange={(e: any) => onChange && onChange(e)}
-                        options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, filterPlaceholder: filterPlaceholder, emptyMessage: emptyMessage, emptyFilterMessage: emptyFilterMessage }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
+                        options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search", emptyMessage: emptyMessage ? emptyMessage : "No Data Found", emptyFilterMessage: emptyFilterMessage ? emptyFilterMessage : "No Results Found" }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const MultiSelectField = (props) => {
     const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false, value, } = props;

package/dist/components/formula-template/FormulaCoponent.js

@@ -4,29 +4,15 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dropdown_1 = require("primereact/dropdown");
-const inputtext_1 = require("primereact/inputtext");
 const inputnumber_1 = require("primereact/inputnumber");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const menu_1 = require("primereact/menu");
+// import { InputText } from "primereact/inputtext";
+const Tagify_1 = tslib_1.__importDefault(require("./Tagify"));
 const FormulaComponent = (props) => {
     const priceConditioRef = (0, react_1.useRef)(null);
-    const [isValid, setIsValid] = (0, react_1.useState)(false);
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)();
     const [fieldOptions, setFieldOptions] = (0, react_1.useState)(props === null || props === void 0 ? void 0 : props.fieldOptions);
-    const contentEditableDivRef = (0, react_1.useRef)(null);
-    const [content, setContent] = (0, react_1.useState)(`<span class='formulaSpanElm'></span>`);
-    const [contentEditableCursorIndex, setContentEditableCursorIndex] = (0, react_1.useState)(null);
     const [conditionValue, setConditionValue] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.conditionValue) ? props === null || props === void 0 ? void 0 : props.conditionValue : 1);
-    const [formulaPlaceholder, setFormulaPlaceholder] = (0, react_1.useState)(true);
-    const operators = {
-        addition: "+",
-        subtraction: "-",
-        multiplication: "*",
-        division: "/",
-        percentile: "%",
-        openBracket: "(",
-        closeBracket: ")",
-    };
     (0, react_1.useEffect)(() => {
         setConditionValue(props.conditionValue);
     }, [props.conditionValue]);
@@ -34,330 +20,6 @@ const FormulaComponent = (props) => {
         if (props === null || props === void 0 ? void 0 : props.fieldOptions)
             setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
     }, [props === null || props === void 0 ? void 0 : props.fieldOptions]);
-    const onSelecteItem = (item) => {
-        var _a, _b, _c, _d, _e;
-        if (selectedItem) {
-            if (selectedItem.find((id) => id === item.id))
-                setSelectedItem(selectedItem.filter((id) => id !== item.id));
-            else
-                setSelectedItem([item.id, ...selectedItem]);
-        }
-        else {
-            setSelectedItem([item.id]);
-        }
-        let chipElm = `<div class="formulaChipElm max-w-8rem w-max chip-h-25 overflow-hidden text-overflow-ellipsis white-space-nowrap bg-primary-25 border-primary-200 border-1 text-gray-600 border-round-sm p-1 ${props.formulaChipClassName}" contentEditable=${false} itemid="${item === null || item === void 0 ? void 0 : item.id}" title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div>`;
-        let currentText = contentEditableDivRef.current.innerHTML ===
-            '<span class="formulaSpanElm"></span>'
-            ? '<span class="formulaSpanElm"></span>'
-            : contentEditableDivRef.current.innerHTML.replaceAll("<br>", "");
-        const index = contentEditableDivRef.current.innerHTML.indexOf((_a = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _a === void 0 ? void 0 : _a.outerHTML);
-        if (index === -1 &&
-            (contentEditableCursorIndex === null || contentEditableCursorIndex === 0)) {
-            let str = currentText +
-                chipElm +
-                `<span class='formulaSpanElm activeSpanElm'></span>`;
-            setContent(str);
-            // setContentEditableCursorIndex(str.length)
-        }
-        else {
-            if (((_b = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _b === void 0 ? void 0 : _b.innerHTML.length) === contentEditableCursorIndex) {
-                let sliptText = currentText.split(document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML);
-                let str = sliptText[0] +
-                    document.querySelector(".formulaSpanElm.activeSpanElm").outerHTML +
-                    chipElm +
-                    `<span class='formulaSpanElm'></span>` +
-                    sliptText[1];
-                setContent(str);
-                // setContentEditableCursorIndex(str.length)
-            }
-            else {
-                // const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm')?.outerHTML)
-                const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index === -1 ? 0 : index) +
-                    `<span class="formulaSpanElm activeSpanElm">${(_c = document
-                        .querySelector(".formulaSpanElm.activeSpanElm")) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
-                const secondContent = `<span class="formulaSpanElm">${(_d = document
-                    .querySelector(".formulaSpanElm.activeSpanElm")) === null || _d === void 0 ? void 0 : _d.innerHTML.substring(contentEditableCursorIndex)}</span>` +
-                    contentEditableDivRef.current.innerHTML
-                        .slice(index)
-                        .split((_e = document.querySelector(".formulaSpanElm.activeSpanElm")) === null || _e === void 0 ? void 0 : _e.outerHTML)[1];
-                const str = firstContent + chipElm + secondContent;
-                setContent(str);
-            }
-        }
-        setTimeout(() => {
-            onChangeCondition();
-            addEventListenerForSpan();
-        }, 500);
-    };
-    const onChangeCondition = () => {
-        // Here we are validating a formula for its end result.
-        // The end result should be a number, whether negative or positive.
-        if ((contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current) === null) {
-            return;
-        }
-        let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
-        let formulaText = "";
-        let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
-        if (spanElms.length > 1) {
-            let spanInnerText = spanElms === null || spanElms === void 0 ? void 0 : spanElms.map((x) => x === null || x === void 0 ? void 0 : x.innerHTML);
-            // remove first and last span
-            const specialCharacters = /[/*\-+%(]/;
-            if (spanInnerText[0] !== "" &&
-                !specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1))) {
-                setIsValid(false);
-                return;
-            }
-            else if (specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1)) ||
-                spanInnerText[0] === "") {
-                spanInnerText.shift();
-            }
-            if (spanInnerText[spanInnerText.length - 1] === "" ||
-                specialCharacters.test(spanInnerText[spanInnerText.length - 1].charAt(0))) {
-                spanInnerText.pop();
-            }
-            // spanInnerText = spanInnerText.slice(0, 1)
-            // spanInnerText = spanInnerText.slice(0, spanElms.length - 1)
-            // const specialCharacters = /[/*\-+%(]/;
-            let findText = spanInnerText.find((x) => !specialCharacters.test(x.charAt(0)) ||
-                !specialCharacters.test(x.charAt(x.length - 1)));
-            if (findText)
-                findText = findText.replaceAll("<br>", "");
-            if (findText) {
-                setIsValid(false);
-                return;
-            }
-            else {
-                let finalSanInnerText = spanInnerText.filter((x) => x === "");
-                if (finalSanInnerText.length !== 0) {
-                    setIsValid(false);
-                    return;
-                }
-            }
-        }
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            if (element.classList.contains("formulaChipElm")) {
-                let id = element.getAttribute("itemid");
-                let findObj = fieldOptions.find((x) => x.id === id);
-                formulaText = formulaText + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
-            }
-            else {
-                let spanText = element.innerHTML ? element.innerHTML : "";
-                formulaText = formulaText + spanText;
-            }
-        }
-        formulaText = formulaText.replaceAll("<br>", "");
-        // If the formula ends with any operator without ending with numbers, then the formula is not correct
-        const regex = /^(?!0+$)(?=.*[+\-*/%])(?!.*(?:\s|\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
-        if (!regex.test(formulaText) && formulaText !== "0" && formulaText !== "") {
-            try {
-                // For example, if textContent (formula) value is like "<chip> + <chip> - 456 + 778 * 464 / 645 % 4736"
-                // That will be converted here like "0 + 0 - 0 + 0 * 0 / 0 % 0". If the total equals 0 or -0, it means the formula is correct.
-                // The eval() JavaScript method will give us a result from the string.
-                // If the eval() result is NOT A NUMBER it will go to the error block.
-                // const str = formula.replaceAll(' ', '')
-                let value = eval(formulaText);
-                console.log(value);
-                setIsValid(true);
-            }
-            catch (error) {
-                setIsValid(false);
-            }
-        }
-        else {
-            setIsValid(false);
-        }
-    };
-    function getCursorPosition(contentEditableElm) {
-        var _a;
-        const selection = window.getSelection();
-        if (selection.anchorNode) {
-            const range = selection.getRangeAt(0);
-            const clonedRange = range.cloneRange();
-            clonedRange.selectNodeContents(contentEditableElm);
-            clonedRange.setEnd(range.endContainer, range.endOffset);
-            setContentEditableCursorIndex((_a = clonedRange === null || clonedRange === void 0 ? void 0 : clonedRange.toString()) === null || _a === void 0 ? void 0 : _a.length);
-        }
-    }
-    const onConditionKeyDown = (event) => {
-        const content = event.target.textContent.trim();
-        const lastChar = content.charAt(content.length - 1);
-        const operators = ["%", "*", "-", "+", "/"];
-        let selection = window.getSelection();
-        let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
-        if (actElm && actElm.innerHTML.indexOf("<br>") !== -1)
-            actElm.innerHTML = actElm.textContent;
-        if (event.keyCode === 37 ||
-            event.keyCode === 39 ||
-            event.keyCode === 38 ||
-            event.keyCode === 40) {
-            let actElm = document.querySelector(".formulaSpanElm.activeSpanElm");
-            let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
-            const range = document.createRange();
-            // range.setStart(selection.focusNode, selection.focusOffset);
-            let activeIndex;
-            spanElms.filter((elmt, index) => {
-                if (elmt.classList.contains("activeSpanElm")) {
-                    activeIndex = index;
-                }
-            });
-            if (actElm) {
-                if (event.keyCode === 37 /* ArrowLeft */ ||
-                    event.keyCode === 38 /* ArrowUp */) {
-                    if (selection.getRangeAt(0).endOffset !== 0 &&
-                        actElm.innerText.length !== 0) {
-                        getCursorPosition(actElm);
-                        return;
-                    }
-                    if (activeIndex !== 0) {
-                        // activeIndex = activeIndex + 1
-                        activeIndex = activeIndex - 1;
-                    }
-                }
-                else if (event.keyCode === 39 /* ArrowRight */ ||
-                    event.keyCode === 40 /* ArrowDown */) {
-                    //&& selection.focusOffset === selection.focusNode.textContent.length
-                    if (actElm.innerText.length === selection.getRangeAt(0).endOffset &&
-                        activeIndex < spanElms.length - 1) {
-                        activeIndex = activeIndex + 1;
-                    }
-                }
-                if (activeIndex !== -1 && spanElms.indexOf(actElm) !== activeIndex)
-                    actElm.classList.remove("activeSpanElm");
-            }
-            if (activeIndex !== null &&
-                activeIndex !== -1 &&
-                spanElms.length > activeIndex &&
-                spanElms.indexOf(actElm) !== activeIndex) {
-                if (event.keyCode === 37 /* ArrowLeft */ ||
-                    event.keyCode === 38 /* ArrowUp */)
-                    range.selectNodeContents(spanElms[activeIndex]);
-                else if (event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40)
-                    range.setStart(spanElms[activeIndex], 0);
-                if (!range.startContainer.parentElement.getAttribute("id")) {
-                    range.startContainer.parentElement.classList.add("activeSpanElm");
-                }
-                else {
-                    let eml = range.startContainer;
-                    eml === null || eml === void 0 ? void 0 : eml.classList.add("activeSpanElm");
-                }
-            }
-            let CurrentActElm = document.querySelector(".formulaSpanElm.activeSpanElm");
-            if (CurrentActElm)
-                getCursorPosition(CurrentActElm);
-        }
-        // Allow numbers, *, -, +, %, /, (, ), and single space
-        if (!((event.keyCode >= "0" && event.keyCode <= "9") ||
-            event.keyCode === "*" ||
-            event.keyCode === "-" ||
-            event.keyCode === "+" ||
-            event.keyCode === "%" ||
-            event.keyCode === "/" ||
-            event.keyCode === "(" ||
-            event.keyCode === ")" ||
-            (event.keyCode !== " " &&
-                event.target.textContent.trim().slice(-1) === " "))) {
-            event.preventDefault();
-        }
-        // Prevent new lines (enter keypress)
-        if (event.keyCode === "Enter") {
-            event.preventDefault();
-        }
-        getCursorPosition(event.target);
-        // Prevent entering operators continuously after each other
-        if (operators.includes(event.keyCode) &&
-            operators.includes(lastChar) &&
-            operators.includes(content[contentEditableCursorIndex - 2])) {
-            event.preventDefault();
-        }
-    };
-    const onFilter = (e) => {
-        if (e.target.value) {
-            let opts = props === null || props === void 0 ? void 0 : props.fieldOptions.filter((x) => {
-                var _a, _b, _c, _d;
-                return (_b = (_a = x === null || x === void 0 ? void 0 : x[props === null || props === void 0 ? void 0 : props.fieldFilterOption]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_d = (_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.toLowerCase());
-            });
-            setFieldOptions(opts);
-        }
-        else {
-            setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
-        }
-    };
-    const onClickContentEditable = (e) => {
-        var _a, _b, _c;
-        let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
-        if (!e.target.classList.contains("formulaSpanElm") &&
-            spanElms.length !== 0) {
-            // let contentEditableElement = e.target
-            // contentEditableElement.focus(); // Set focus to the content editable element
-            const range = document.createRange(); // Create a new range
-            range.selectNodeContents(spanElms[spanElms.length - 1]); // Select the entire content of the element
-            range.collapse(false); // Collapse the range to the end
-            const selection = window.getSelection(); // Get the selection object
-            selection.removeAllRanges(); // Remove any existing ranges from the selection
-            selection.addRange(range);
-            (_a = document
-                .querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
-            let elms = document.querySelectorAll(".formulaSpanElm");
-            (_c = (_b = elms[elms.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add("activeSpanElm");
-            e.preventDefault();
-        }
-        else {
-            console.log(e);
-        }
-    };
-    const onAddOperator = (event, operator) => {
-        let elm = document.querySelector(".activeSpanElm");
-        console.log(event);
-        // const operators = ['%', '*', '-', '+', '/'];
-        // const lastChar = elm.innerHTML?.charAt(elm.innerHTML?.length - 1);
-        // // Prevent entering operators coonChangeCondition(str);ntinuously after each other
-        // if (lastChar && operators.includes(lastChar) && operators.includes(operator)) {
-        //     event.preventDefault();
-        //     return;
-        // }
-        if (contentEditableDivRef.current.innerHTML !==
-            `<span class='formulaSpanElm'></span>`) {
-            elm.innerHTML = elm.innerHTML + operator;
-        }
-        onChangeCondition();
-    };
-    const onSave = (event) => {
-        let elements = contentEditableDivRef.current.children;
-        let formula = "";
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            if (element.classList.contains("formulaChipElm"))
-                formula = formula + element.getAttribute("itemid");
-            else
-                formula = formula + element.innerHTML;
-        }
-        // setContent(contentEditableDivRef.current.innerHTML)
-        priceConditioRef.current.toggle(event);
-        formula = formula.replaceAll("<br>", "");
-        props.onSaveFormula(formula);
-    };
-    const onKeyDownHandler = (event) => {
-        var _a;
-        if (event.keyCode === 8 || event.keyCode === 46) {
-            // let elm = document.querySelector('.activeSpanElm') as HTMLElement
-            let spanElms = Array.from(document.querySelectorAll(".formulaSpanElm"));
-            let activeIndex = spanElms.findIndex((x) => x.classList.contains("activeSpanElm"));
-            if (activeIndex && ((_a = spanElms[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerHTML) === "") {
-                spanElms[activeIndex].previousElementSibling.remove();
-                let index = event.keyCode === 8 ? activeIndex - 1 : activeIndex;
-                spanElms[index].classList.add("activeSpanElm");
-                const range = document.createRange(); // Create a new range
-                spanElms[activeIndex].remove();
-                range.selectNodeContents(spanElms[index]); // Select the entire content of the element
-                range.collapse(false); // Collapse the range to the end
-                const selection = window.getSelection(); // Get the selection object
-                selection.removeAllRanges(); // Remove any existing ranges from the selection
-                selection.addRange(range);
-                event.preventDefault();
-            }
-        }
-    };
     const menuContent = [
         {
             template: () => {
@@ -365,120 +27,10 @@ const FormulaComponent = (props) => {
                                                 ? props === null || props === void 0 ? void 0 : props.headerLabel
                                                 : "Configure Value" })), (0, jsx_runtime_1.jsx)("span", { children: (props === null || props === void 0 ? void 0 : props.headerDescription)
                                                 ? props === null || props === void 0 ? void 0 : props.headerDescription
-                                                : "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section flex border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 border-right-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-gray-50 w-full h-auto border-bottom-1 border-gray-200 p-2 pt-0" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2 flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + " (0)", " "] }) })), (props === null || props === void 0 ? void 0 : props.fieldFilter) && (
-                                                // <div className="px-4 py-2 border-top-1 border-gray-200">
-                                                //     <div className="relative flex aling-items-center w-full">
-                                                //         <div className="h-full flex align-items-cente justify-content-center w-2rem absolute left-0">
-                                                //             <SvgComponent icon="search-md" />
-                                                //         </div>
-                                                //         <InputText onInput={(e: any) => onFilter(e)} className="pl-8 w-full" placeholder={props.fieldOptionFilterPlaceholder} />
-                                                //     </div>
-                                                // </div>
-                                                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md", size: 18 }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18 }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onInput: (e) => onFilter(e), className: "pl-8 w-full", placeholder: props.fieldOptionFilterPlaceholder })] })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_itemibute_list_sect overflow-auto flex flex-column row-gap-2 px-4 py-2` }, { children: fieldOptions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid gap-2 p-2 py-4" }, { children: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.map((item, index) => {
-                                                    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `max-w-8rem overflow-hidden text-overflow-ellipsis white-space-nowrap border-1 px-2 chip-h-25 border-gray-300 text-gray-600 cursor-pointer item_chip border-round-sm hover:bg-primary-25 hover:border-primary-200 ${props === null || props === void 0 ? void 0 : props.fieldOptionClassName}`, onClick: () => onSelecteItem(item), title: item === null || item === void 0 ? void 0 : item.name }, { children: item === null || item === void 0 ? void 0 : item.name }), "formula__option__" + index));
-                                                }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-700 fobt-bold text-lg text-center" }, { children: (props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage)
-                                                    ? props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage
-                                                    : "No Results Found!" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-2 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
-                                                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator flex align-items-center justify-content-center text-lg w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm", onClick: (e) => onAddOperator(e, operators[operator]) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-bold" }, { children: operators[operator] })) }), "formula__operator_" + index), (0, jsx_runtime_1.jsx)("span", { className: "operator_divider" })] }));
-                                            }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative h-17rem w-full" }, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: (e) => onClickContentEditable(e), ref: contentEditableDivRef, dangerouslySetInnerHTML: { __html: content }, onKeyDown: (e) => onKeyDownHandler(e), onKeyUp: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), onFocus: () => setFormulaPlaceholder(false), className: `condition_configure px-4 py-3 h-17rem overflow-auto w-full absolute top-0 left-0 z-5`, id: "condition_configure_elm", contentEditable: true }), content === `<span class='formulaSpanElm'></span>` &&
-                                                    formulaPlaceholder && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: " px-4 py-2 top-0 text-lg left-0 absolute z-3" }, { children: (props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder)
-                                                        ? props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder
-                                                        : "Please Enter Formula" })))] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover", onClick: (e) => {
-                                            setContent(props === null || props === void 0 ? void 0 : props.formulaValue);
-                                            priceConditioRef.current.toggle(e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (e) => onSave(e), className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover ${!isValid && "p-disabled"}` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }), "formula__dev"));
+                                                : "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions })] }), "formula__dev"));
             },
         },
     ];
-    const addEventListenerForSpan = () => {
-        var _a;
-        // Select all div elements with the specified class name
-        const spanElements = document.querySelectorAll(".formulaSpanElm");
-        (_a = document.querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
-        // Loop through each div element
-        spanElements.forEach((spanElement) => {
-            // Add an event listener for the 'click' event to each div element
-            spanElement.addEventListener("click", function (e) {
-                var _a;
-                (_a = document
-                    .querySelector(".activeSpanElm")) === null || _a === void 0 ? void 0 : _a.classList.remove("activeSpanElm");
-                e.target.classList.add("activeSpanElm");
-                getCursorPosition(e.target);
-                // Your event handler code here
-            });
-        });
-        if (spanElements.length !== 0) {
-            spanElements[spanElements.length - 1].classList.add("activeSpanElm");
-            getCursorPosition(spanElements[spanElements.length - 1]);
-        }
-    };
-    const onShowMenu = () => {
-        if (props === null || props === void 0 ? void 0 : props.formulaValue) {
-            let formulatText = "";
-            const pattern = /(?:[a-f0-9]{24}|msrp|map|costprice)/g;
-            // const ids = props?.formulaValue.match(pattern);
-            // console.log(ids)
-            const splitPattern = /(?=[+\-*/%])/g;
-            // Split the text using the splitPattern
-            const splitText = props === null || props === void 0 ? void 0 : props.formulaValue.split(splitPattern);
-            for (let i = 0; i < splitText.length; i++) {
-                // let chipElm: string = '';
-                // let text = splitText[i];
-                const id = splitText[i].match(pattern);
-                let chipElm = "";
-                if (id) {
-                    let item = fieldOptions.find((x) => x.id === id[0]);
-                    chipElm = `<div class="formulaChipElm max-w-8rem w-max overflow-hidden text-overflow-ellipsis white-space-nowrap bg-primary-25 border-1 border-primary-200 text-gray-600 border-round-sm px-2 py-1" contentEditable=${false} itemid="${item === null || item === void 0 ? void 0 : item.id}" title="${item === null || item === void 0 ? void 0 : item.name}">${item === null || item === void 0 ? void 0 : item.name}</div>`;
-                }
-                // chipElm = text.replace(text, t)
-                const placeholderText = splitText[i].replace(pattern, "|");
-                const textParts = placeholderText
-                    .split("|")
-                    .filter((part) => part !== "");
-                if (textParts.length > 0) {
-                    for (let z = 0; z < textParts.length; z++) {
-                        if (z === 0 && splitText.length - 1 === i && chipElm)
-                            formulatText = textParts[z]
-                                ? formulatText +
-                                    `<span class='formulaSpanElm'>${textParts[z]}</span>` +
-                                    chipElm +
-                                    `<span class='formulaSpanElm'></span>`
-                                : `<span class='formulaSpanElm'></span>`;
-                        else if (z === 0 && chipElm && id) {
-                            // let lastSpanIndex = formulatText.lastIndexOf('</span>');
-                            formulatText = textParts[z]
-                                ? formulatText +
-                                    `<span class='formulaSpanElm'>${textParts[z]}</span>` +
-                                    chipElm
-                                : `<span class='formulaSpanElm'></span>`;
-                        }
-                        else
-                            formulatText = textParts[z]
-                                ? formulatText +
-                                    `<span class='formulaSpanElm'>${textParts[z]}</span>`
-                                : `<span class='formulaSpanElm'></span>`;
-                    }
-                }
-                else {
-                    if (splitText.length - 1 === i)
-                        formulatText =
-                            `<span class='formulaSpanElm'></span>` +
-                                chipElm +
-                                `<span class='formulaSpanElm'></span>`;
-                    else
-                        formulatText = `<span class='formulaSpanElm'></span>` + chipElm;
-                }
-            }
-            setContent(formulatText);
-        }
-        else {
-            setFormulaPlaceholder(true);
-        }
-        setTimeout(() => {
-            addEventListenerForSpan();
-            setIsValid(false);
-        }, 1000);
-    };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden w-full ${props === null || props === void 0 ? void 0 : props.className}` }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, panelClassName: "formula_panel_dropdown", "data-pr-classname": "block", placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : "Select", value: conditionValue, onChange: (e) => {
                     if (props === null || props === void 0 ? void 0 : props.onConditionChange)
                         props === null || props === void 0 ? void 0 : props.onConditionChange(e);
@@ -489,14 +41,19 @@ const FormulaComponent = (props) => {
                     switch (optiontype) {
                         case "INCREASE_BY_VALUE":
                         case "DECREASE_BY_VALUE": {
-                            return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
+                            return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onValueChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
                         }
                         case "INCREASE_BY_PERCENTAGE":
                         case "DECREASE_BY_PERCENTAGE": {
-                            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 relative" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute left-0 h-full flex align-items-center px-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: "#344054" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, max: 99, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-full", inputClassName: "border-none pl-8 focus:shadow-none" }))] })));
+                            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 relative" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute left-0 h-full flex align-items-center px-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: "#344054" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, max: 100, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => {
+                                            const value = e.value > 100 ? 100 : e.value;
+                                            e.originalEvent.target.value = value
+                                                ? value === null || value === void 0 ? void 0 : value.toFixed(2)
+                                                : 0;
+                                        }, onValueChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-full", inputClassName: "border-none pl-8 focus:shadow-none" }))] })));
                         }
                         case "MANUAL": {
-                            return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
+                            return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ useGrouping: false, min: 0, minFractionDigits: 2, maxFractionDigits: 2, maxLength: (props === null || props === void 0 ? void 0 : props.maxLength) || Infinity }, props === null || props === void 0 ? void 0 : props.field, { onValueChange: (e) => (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e)), placeholder: "Enter Number", value: props === null || props === void 0 ? void 0 : props.inputValue, className: "border-none w-6", inputClassName: "border-none focus:shadow-none" })));
                         }
                         case "CALCULATION": {
                             const pattern = /(?:[a-f0-9]{24}|msrp|map|costprice)/g;
@@ -517,6 +74,10 @@ const FormulaComponent = (props) => {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                     }
-                })() }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: onShowMenu, popup: true, popupAlignment: "left", className: `condition_menu p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
+                })() }), (0, jsx_runtime_1.jsx)(menu_1.Menu
+            // onShow={onShowMenu}
+            , { 
+                // onShow={onShowMenu}
+                popup: true, popupAlignment: "left", className: `w-28rem p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
 };
 exports.default = FormulaComponent;

package/dist/components/formula-template/Tagify.js

@@ -6,11 +6,12 @@ const tagify_1 = tslib_1.__importDefault(require("@yaireo/tagify"));
 require("@yaireo/tagify/dist/tagify.css");
 const react_1 = require("react");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const button_1 = require("primereact/button");
 const TagifyComponent = (props) => {
+    var _a;
     const tagifyRef = (0, react_1.useRef)(null);
     const saveBtnRef = (0, react_1.useRef)(null);
-    //   const [isValid, setIsValid] = useState<boolean>(false);
-    const inputValue = `[[{"id": "660ab8748140c009b0af99a2","value": "Test1","code": "34sdf","price": 46}]] [[{"id": "660abaee8140c009b0afa3ef","value": "Test2","code": "t34sdf","price": 4}]]`;
+    const inputValue = `[[{"id": "660ab8748140c009b0af99a2","value": "Test1","code": "34sdf","price": 46}]] + 8 + [[{"id": "660abaee8140c009b0afa3ef","value": "Test2","code": "t34sdf","price": 4}]] + 86`;
     let tagifyInstance;
     (0, react_1.useEffect)(() => {
         // Initialize tagify with new keyword and options
@@ -31,13 +32,18 @@ const TagifyComponent = (props) => {
             enforceWhitelist: true,
         });
         tagifyInstance.on("change input", onInput);
+        tagifyInstance.on("change", onChange);
+        function onChange() {
+            setTimeout(() => {
+                onCalculateSum();
+            }, 1000);
+        }
         function onInput() {
-            //   onCalculateSum();
             setTimeout(() => {
-                let resultString = onCalculateSum();
-                console.log(resultString);
+                onCalculateSum();
             }, 1000);
         }
+        onCalculateSum();
         // Clean up the event listener on unmount
         return () => {
             tagifyInstance.destroy();
@@ -53,33 +59,46 @@ const TagifyComponent = (props) => {
         closeBracket: ")",
     };
     const onCalculateSum = () => {
-        const tagRegex = /\[\[{"id":"[a-z0-9]+","value":"([a-zA-Z0-9]+)","code":"([a-zA-Z0-9]+)","price":(\d+)}\]\]/g;
-        const mathRegex = /\[\[{"value":"([+\-*/%()])","type":"math"}\]\]/g;
-        const validateRegex = /^(?![\+\-\*\/\%\(\)])(?:\[\[{.*?}\]\]|\d+)(?:[\+\-\*\/\%\(\)](?:\[\[{.*?}\]\]|\d+))*$(?![\+\-\*\/\%\(\)])$/;
         if (tagifyRef === null || tagifyRef === void 0 ? void 0 : tagifyRef.current) {
-            let resultString = tagifyRef.current.value;
-            let match;
-            // Loop through and replace each object with its price
-            while ((match = tagRegex.exec(tagifyRef.current.value)) !== null) {
-                const price = match[3]; // Extract price from the object
-                resultString = resultString.replace(match[0], price); // Replace the object with its price
-            }
-            while ((match = mathRegex.exec(tagifyRef.current.value)) !== null) {
-                const value = match[1]; // Extract value from the object
-                resultString = resultString.replace(match[0], value); // Replace the object with its value
-            }
-            const val = resultString.replace(/\s+/g, "");
-            const saveDivElm = saveBtnRef.current;
+            const pattern = /^(?![\+\-\*/]).*(?:[\+\-\*/]\d+[\+\-\*/])*(?:(?:\[\[{.*}\]\])([\+\-\*/](?:\[\[{.*}\]\]))+)*(?:\[\[{.*}\]\])*(?![\+\-\*/])$/;
+            // /^(?![\+\-\*/]).*(?:[\+\-\*/]\d+[\+\-\*/])*(?:\[\[{.*}\]\])*(?![\+\-\*/])$/;
+            // /^(?![\+\-\*/]).*[\+\-\*/].*(?:\d+|(\[\[{.*}\]\]))(?![\+\-\*/])$/;
+            ///^(?![\+\-\*/]).*(?:\[\[{.*}\]\])(?:[\+\-\*/]\d+[\+\-\*/])*(?:\[\[{.*}\]\])?(?![\+\-\*/])$/
             try {
-                eval(val.replace(/[\u200B-\u200D\uFEFF]/g, ""));
-                const stringVal = tagifyRef.current.value.replace(/\s+/g, "");
-                // setIsValid(
-                //   validateRegex.test(stringVal.replace(/[\u200B-\u200D\uFEFF]/g, ""))
-                // );
-                saveDivElm.classList.toggle("p-disabled", !validateRegex.test(stringVal.replace(/[\u200B-\u200D\uFEFF]/g, "")));
+                // Test the string against the pattern
+                let value = tagifyRef.current.value;
+                value = value.replaceAll("​", "");
+                value = value.replaceAll(" ", "");
+                if (pattern.test(`${value.trim()}`)) {
+                    const tagRegex = /\[\[({.*?})\]\]/g; // Match patterns starting with [[{ and ending with }]]
+                    let str = tagifyRef.current.value;
+                    let res = str.replace(tagRegex, (match) => {
+                        try {
+                            const tagData = JSON.parse(match.slice(2, -2)); // Remove [[{ and }]] to parse JSON
+                            return tagData.price.toString(); // Replace with the price value
+                        }
+                        catch (error) {
+                            console.error("Invalid tag format:", match);
+                            return match; // Return original if parsing fails
+                        }
+                    });
+                    res = res.replaceAll("​", "");
+                    res = res.replaceAll(" ", "");
+                    eval(res);
+                    if (saveBtnRef.current) {
+                        saveBtnRef.current.disabled = false;
+                    }
+                }
+                else {
+                    if (saveBtnRef.current) {
+                        saveBtnRef.current.disabled = true;
+                    }
+                }
             }
             catch (error) {
-                saveDivElm.classList.add("p-disabled", true);
+                if (saveBtnRef.current) {
+                    saveBtnRef.current.disabled = true;
+                }
             }
         }
     };
@@ -89,8 +108,7 @@ const TagifyComponent = (props) => {
             { value: operators[operator], type: "math" },
         ]);
         setTimeout(() => {
-            let resultString = onCalculateSum();
-            console.log(resultString);
+            onCalculateSum();
         }, 1000);
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-2 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
@@ -98,6 +116,6 @@ const TagifyComponent = (props) => {
                         }) })), (0, jsx_runtime_1.jsx)("input", { ref: tagifyRef, type: "text", placeholder: "Enter text or tags...", value: inputValue })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover", onClick: () => {
                                 // setContent(props?.formulaValue);
                                 //   priceConditioRef.current.toggle(e);
-                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: saveBtnRef, className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover p-disabled` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }));
+                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: saveBtnRef, disabled: (_a = saveBtnRef === null || saveBtnRef === void 0 ? void 0 : saveBtnRef.current) === null || _a === void 0 ? void 0 : _a.disabled, className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }));
 };
 exports.default = TagifyComponent;

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -15,7 +15,7 @@ const ListBoxDropdown = (props) => {
     // onSelectAll,
     onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef, 
     // buttonClassName,
-    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, } = props;
+    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, } = props;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     // const [checked, setChecked] = useState<boolean>(false);
@@ -136,10 +136,10 @@ const ListBoxDropdown = (props) => {
                                             ? emptyFilterMessage
                                             : "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (event) => optionsMenuRef.current.toggle(event), title: label, className: "listbox_label" }, { children: dataLabel }))) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
                             // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
                             // link={link ? true : false}
-                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}` }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
+                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
                                 (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                     var _a, _b, _c, _d;
                                     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : "list_box_chip"}    ${showRemoveIcon ? "relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-truncate max-w-10rem inline-block", title: typeof item === "object"

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

@@ -67,7 +67,9 @@ const MultiSelectDropDown = (props) => {
                 // className="w-20rem"
                 showClear: true, panelStyle: {
                     width: props.panelWidth ? props.panelWidth + "px" : "",
-                }, emptyFilterMessage: props.emptyFilterMessage }))] }));
+                }, emptyFilterMessage: props.emptyFilterMessage
+                    ? props.emptyFilterMessage
+                    : "No Results Found", filterPlaceholder: props.filterPlaceholder ? props.filterPlaceholder : "Search by name" }))] }));
 };
 exports.MultiSelectDropDown = MultiSelectDropDown;
 exports.default = exports.MultiSelectDropDown;

package/dist/types/components/types/type.d.ts

@@ -264,6 +264,7 @@ export interface ListBoxDropdownTypes {
     emptyFilterMessage?: any;
     emptyMessage?: any;
     optionsMenuRef?: any;
+    dataLabel?: any;
 }
 export interface DatePickerTypes {
     value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.3.83",
+  "version": "6.3.85",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",