sccoreui 6.3.19 → 6.3.20

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

@@ -4,15 +4,29 @@ 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]);
@@ -20,6 +34,330 @@ 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: () => {
@@ -27,10 +365,120 @@ 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.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions })] }), "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.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"));
             },
         },
     ];
+    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);
@@ -45,12 +493,7 @@ const FormulaComponent = (props) => {
                         }
                         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: 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" }))] })));
+                            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, { 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, { 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" })));
@@ -74,10 +517,6 @@ const FormulaComponent = (props) => {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                     }
-                })() }), (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"));
+                })() }), (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 = FormulaComponent;

package/package.json

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

package/dist/assets/App.css

@@ -1,96 +0,0 @@
-@import url("./assets/theme.css");
-@import url("./assets/sccoreui.css");
-@import url("./assets/sccoreicons.css");
-@import url("./assets/flex.css");
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
-:root {
-  --fw-600: 600;
-  --fw-400: 400;
-  --fs-24: 24px;
-  --fs-18: 18px;
-  --fs-16: 16px;
-  --lh: 24px;
-  --fs-14: 14px;
-  --grey-bg: #101828;
-  --border-none: border-none;
-}
-
-body {
-  font-family: "Lato", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: var(--lh);
-  padding: 0;
-  margin: 0;
-}
-
-code {
-  font-family: "Lato", sans-serif;
-}
-
-h1 {
-  font-size: var(--fs-24);
-  font-weight: var(--fw-600);
-}
-
-h2 {
-  font-size: var(--fs-18);
-  font-weight: var(--fw-600);
-}
-
-h3 {
-  font-size: var(--fs-16);
-  font-weight: var(--fw-400);
-}
-
-.progress-container {
-  isolation: isolate;
-}
-.progress-container::before {
-  content: "";
-  background-color: var(--gray-200);
-  position: absolute;
-  z-index: -1;
-}
-.progress-container.horizontal::before {
-  height: 2px;
-  width: 100%;
-  top: 11%;
-}
-.progress-container.vertical::before {
-  height: 100%;
-  width: 2px;
-  left: 5%;
-  top: 0;
-}
-
-.progressbar {
-  z-index: -1;
-  transition: all 0.6s ease;
-}
-.progressbar.horizontal {
-  left: 0;
-  height: 2px;
-  top: 11%;
-}
-.progressbar.vertical {
-  width: 2px;
-  left: 5%;
-  top: 0;
-}
-
-.progress-step-item.horizontal:nth-of-type(1) {
-  transform: translateX(-50%);
-}
-.progress-step-item.horizontal:last-child {
-  transform: translateX(50%);
-}
-.progress-step-item.vertical {
-  transform: translateY(50%);
-}
-.progress-step-item.vertical:nth-of-type(1) {
-  transform: translateY(-5%);
-}
-.progress-step-item.vertical:last-child {
-  transform: translateY(100%);
-}/*# sourceMappingURL=App.css.map */

package/dist/assets/App.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["App.scss","App.css"],"names":[],"mappings":"AAAQ,iCAAA;AACA,oCAAA;AACA,uCAAA;AACA,gCAAA;AACA,kGAAA;AAER;EACE,aAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,UAAA;EACA,aAAA;EACA,kBAAA;EACA,0BAAA;ACAF;;ADmBA;EACE,+BAAA;EACA,mCAAA;EACA,kCAAA;EACA,sBAAA;EACA,UAAA;EACA,SAAA;AChBF;;ADmBA;EACE,+BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADmBA;EACE,uBAAA;EACA,0BAAA;AChBF;;ADqBA;EACE,kBAAA;AClBF;ADoBE;EACE,WAAA;EACA,iCAAA;EACA,kBAAA;EACA,WAAA;AClBJ;ADqBE;EACE,WAAA;EACA,WAAA;EACA,QAAA;ACnBJ;ADsBE;EACE,YAAA;EACA,UAAA;EACA,QAAA;EACA,MAAA;ACpBJ;;ADwBA;EACE,WAAA;EACA,yBAAA;ACrBF;ADuBE;EACE,OAAA;EACA,WAAA;EACA,QAAA;ACrBJ;ADwBE;EACE,UAAA;EACA,QAAA;EACA,MAAA;ACtBJ;;AD8BI;EACE,2BAAA;AC3BN;AD8BI;EACE,0BAAA;AC5BN;ADgCE;EACE,0BAAA;AC9BJ;ADgCI;EACE,0BAAA;AC9BN;ADiCI;EACE,2BAAA;AC/BN","file":"App.css"}