sccoreui 5.7.1 → 5.7.3

package/dist/components/ag-grid/ParentForGrid.js

@@ -16,7 +16,8 @@ function ParentForGrid(props) {
             flex: 1,
             minWidth: 100,
             editable: true,
-            filter: true
+            filter: true,
+            sortable: true,
         };
     }, []);
     const onGridReady = (params) => {
@@ -40,6 +41,7 @@ function ParentForGrid(props) {
         onSelectionChanged: onSelectionChanged,
         rowSelection: 'multiple',
         suppressRowClickSelection: true,
+        rowHeight: 60
     };
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady }) }));
 }

package/dist/components/ag-grid/Types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// export type {  ColDef as gridColType} from "@ag-grid-community/core"

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

@@ -8,7 +8,7 @@ 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");
-const FormulaCoponent = (props) => {
+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)();
@@ -35,7 +35,7 @@ const FormulaCoponent = (props) => {
             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;
+        var _a, _b, _c, _d, _e;
         if (selectedItem) {
             if (selectedItem.find((id) => id === item.id))
                 setSelectedItem(selectedItem.filter((id) => id !== item.id));
@@ -47,20 +47,23 @@ const FormulaCoponent = (props) => {
         }
         let chipElm = ` <div class="formulaChipElm max-w-8rem w-max h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 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;
-        if (contentEditableCursorIndex === null) {
-            let str = currentText + chipElm + `<span class='formulaSpanElm'></span>`;
+        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 (((_a = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.innerHTML.length) === contentEditableCursorIndex) {
+            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) + `<span class="formulaSpanElm activeSpanElm">${(_b = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _b === void 0 ? void 0 : _b.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
-                const secondContent = `<span class="formulaSpanElm">${(_c = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(contentEditableCursorIndex)}</span>` + contentEditableDivRef.current.innerHTML.slice(index).split(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML)[1];
+                // 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);
             }
@@ -77,28 +80,67 @@ const FormulaCoponent = (props) => {
             return;
         }
         let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
-        let formula = '';
+        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);
+            // debugger
+            // 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))) {
+                setIsValid(false);
+                return;
+            }
+            else 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) {
+                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);
-                formula = formula + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
+                formulaText = formulaText + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
+            }
+            else {
+                let spanText = element.innerHTML ? element.innerHTML : "";
+                formulaText = formulaText + spanText;
             }
-            else
-                formula = formula + (element.innerHTML ? element.innerHTML : ' ');
         }
-        formula = formula.replaceAll('<br>', '');
+        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(formula) && formula !== '0' && formula !== '') {
+        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. 
+                // 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(' ', '')
-                eval(formula);
+                let value = eval(formulaText);
+                console.log(value);
                 setIsValid(true);
             }
             catch (error) {
@@ -108,7 +150,6 @@ const FormulaCoponent = (props) => {
         else {
             setIsValid(false);
         }
-        // setContent(contentEditableDivRef.current.innerHTML);
     };
     function getCursorPosition(contentEditableElm) {
         const selection = window.getSelection();
@@ -119,47 +160,48 @@ const FormulaCoponent = (props) => {
         setContentEditableCursorIndex(clonedRange.toString().length);
     }
     const onConditionKeyDown = (event) => {
-        var _a;
         const content = event.target.textContent.trim();
         const lastChar = content.charAt(content.length - 1);
         const operators = ['%', '*', '-', '+', '/'];
+        let selection = window.getSelection();
         if (event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 38 || event.keyCode === 40) {
             let actElm = document.querySelector('.formulaSpanElm.activeSpanElm');
-            if (actElm)
-                actElm.classList.remove('activeSpanElm');
-            const selection = window.getSelection();
+            let spanElms = Array.from(document.querySelectorAll('.formulaSpanElm'));
             const range = document.createRange();
-            range.setStart(selection.focusNode, selection.focusOffset);
-            if (event.keyCode === 37 /* ArrowLeft */ || event.keyCode === 38 /* ArrowUp */) {
-                range.collapse(true);
+            // 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 */) && selection.focusOffset === 0) {
+                    activeIndex = activeIndex - 1;
+                }
+                else if ((event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40 /* ArrowDown */) && selection.focusOffset === selection.focusNode.textContent.length) {
+                    activeIndex = activeIndex + 1;
+                }
+                else {
+                    event.preventDefault();
+                    return;
+                }
+                actElm.classList.remove('activeSpanElm');
             }
-            else if (event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40 /* ArrowDown */) {
+            if (activeIndex !== null && activeIndex !== -1 && activeIndex && spanElms[activeIndex]) {
+                range.selectNodeContents(spanElms[activeIndex]); // Select the entire content of the element
                 range.collapse(false);
-            }
-            selection.removeAllRanges();
-            selection.addRange(range);
-            setContentEditableCursorIndex(range.startOffset);
-            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');
-            }
-        }
-        // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
-        if (event.keyCode === 8 || event.keyCode === 46 ||
-            (event.keyCode === 65 && event.ctrlKey) || (event.keyCode === 65 && event.ctrlKey) ||
-            event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 38 ||
-            event.keyCode === 40 || event.keyCode === 36 || event.keyCode === 35 || event.keyCode === 16) {
-            if (event.keyCode === 8 || event.keyCode === 46) {
-                let spanElms = document.querySelectorAll('.formulaSpanElm');
-                for (let i = 0; i < spanElms.length; i++) {
-                    if (((_a = spanElms[i]) === null || _a === void 0 ? void 0 : _a.classList.value) === 'formulaSpanElm activeSpanElm' && (spanElms[i].innerHTML === '' || spanElms[i].innerHTML === '<br>')) {
-                        spanElms[i - 1].classList.add('activeSpanElm');
-                    }
+                const selection = window.getSelection();
+                selection.removeAllRanges();
+                selection.addRange(range);
+                setContentEditableCursorIndex(range.startOffset);
+                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');
                 }
-                onChangeCondition();
             }
         }
         // Allow numbers, *, -, +, %, /, (, ), and single space
@@ -190,11 +232,12 @@ const FormulaCoponent = (props) => {
     };
     const onClickContentEditable = (e) => {
         var _a, _b, _c;
-        if (!e.target.classList.contains('formulaSpanElm')) {
-            let contentEditableElement = e.target;
+        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(contentEditableElement); // Select the entire content of the element
+            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
@@ -204,6 +247,9 @@ const FormulaCoponent = (props) => {
             (_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) => {
         var _a, _b;
@@ -235,6 +281,27 @@ const FormulaCoponent = (props) => {
         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: () => {
@@ -249,21 +316,23 @@ const FormulaCoponent = (props) => {
                                                 :
                                                     (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-4 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
                                                 return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator text-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.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 }, onKeyUp: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), onFocus: () => setFormulaPlaceholder(false), className: `condition_configure px-4 py-2 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.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-2 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) => 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'));
+                                    (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'));
             }
         }
     ];
     const addEventListenerForSpan = () => {
+        var _a;
         // Select all div elements with the specified class name
-        const divElements = document.querySelectorAll('.formulaSpanElm');
+        const spanElements = document.querySelectorAll('.formulaSpanElm');
+        (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
         // Loop through each div element
-        divElements.forEach((divElement) => {
+        spanElements.forEach((spanElement) => {
             // Add an event listener for the 'click' event to each div element
-            divElement.addEventListener('click', function (e) {
+            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');
@@ -271,10 +340,14 @@ const FormulaCoponent = (props) => {
                 // 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;
+            let formulatText = "";
             const pattern = /[a-f0-9]{24}/g;
             // const ids = props?.formulaValue.match(pattern);
             // console.log(ids)
@@ -297,8 +370,10 @@ const FormulaCoponent = (props) => {
                     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)
-                            formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm : `<span class='formulaSpanElm'></span>`;
+                        else if (z === 0 && chipElm && id) {
+                            let lastSpanIndex = formulatText.lastIndexOf('</span>');
+                            formulatText = textParts[z] ? formulatText.slice(0, lastSpanIndex) + `${textParts[z]}</span>` + chipElm : `<span class='formulaSpanElm'></span>`;
+                        }
                         else
                             formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` : `<span class='formulaSpanElm'></span>`;
                     }
@@ -317,6 +392,7 @@ const FormulaCoponent = (props) => {
         }
         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, "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)
@@ -352,4 +428,4 @@ const FormulaCoponent = (props) => {
                     }
                 })() }), (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"));
 };
-exports.default = FormulaCoponent;
+exports.default = FormulaComponent;

package/dist/types/components/formula-template/FormulaCoponent.d.ts

@@ -1,3 +1,3 @@
 import { FormulaTemplateTypes } from "../types/type";
-declare const FormulaCoponent: (props: FormulaTemplateTypes) => import("react/jsx-runtime").JSX.Element;
-export default FormulaCoponent;
+declare const FormulaComponent: (props: FormulaTemplateTypes) => import("react/jsx-runtime").JSX.Element;
+export default FormulaComponent;

package/package.json

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