sccoreui 5.4.1 → 5.4.2

package/dist/App.scss

@@ -857,9 +857,32 @@ button[aria-expanded="true"] {
 
 .condition_attribute_list_sect{
   height: 215px;
+    .attr_chip {
+      transition: all 0.1s;
+      &:hover{
+        transform: scale(1.05);
+        // transition: all 0.2s;
+      }
+    }
+  
 }
 
 .condition_configure{
   height: 224px;
   outline: none;
+  line-height: 30px;
+  letter-spacing: 2px;
+  .formulaChipElm {
+    line-height: 24px;
+    letter-spacing: 0px;
+    margin: 2px;
+    float: left;
+  }
+  .formulaSpanElm {
+    font-size: 16px;
+    margin: 2px 0;
+    float: left;
+    min-width: 6px;
+    height: 32px;
+  }
 }

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

@@ -14,7 +14,7 @@ const sccoreui_1 = require("sccoreui");
 const InputTextField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading } = props;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ?
-                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: `${className}  ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))) }))] })
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))) }))] })
                 :
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }), 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" }) }))] })));
 };
@@ -22,16 +22,16 @@ const InputNumberField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits } = props;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
             (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ?
-                                (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))] }))
+                                (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))] }))
                                 :
-                                    (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name })) })) })), 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.jsx)(inputnumber_1.InputNumber, Object.assign({ maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name })) })) })), 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.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
 };
 const InputCurrencyField = (props) => {
     const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))] }))) })), 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: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))] }))) })), 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.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
 };
@@ -43,21 +43,21 @@ const InputTextAreaField = (props) => {
     }, [values[name]]);
     (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }));
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ?
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: maxLength, className: `pt-2  ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '20px', right: '12px' } }, { children: [charCount, "/", maxLength] }))] })) })), 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: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: maxLength, className: `pt-2 ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '20px', right: '12px' } }, { children: [charCount, "/", maxLength] }))] })) })), 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.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
 };
 const DropDownField = (props) => {
     const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading } = props;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))) })), 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: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { 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 }))) })), 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.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
 };
 const MultiSelectField = (props) => {
     const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter } = props;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))) })), 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: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))) })), 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.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
 };

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

@@ -0,0 +1,310 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dropdown_1 = require("primereact/dropdown");
+const inputtext_1 = require("primereact/inputtext");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const menu_1 = require("primereact/menu");
+const FormulaCoponent = (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 operators = {
+        "addition": '+',
+        "subtraction": '-',
+        "multiplication": '*',
+        "division": '÷',
+        "percentile": '%',
+        "openBracket": "(",
+        "closeBracket": ")",
+    };
+    const onSelecteItem = (item) => {
+        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 h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 border-round-sm p-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> `;
+        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>`;
+            setContent(str);
+        }
+        else {
+            if (document.querySelector('.formulaSpanElm.activeSpanElm').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);
+            }
+            else {
+                // let sliptText = document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML.split(document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(contentEditableCursorIndex))
+                const firstPart = `<span class="formulaSpanElm activeSpanElm">` + document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(0, contentEditableCursorIndex);
+                // const secondPart = document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(contentEditableCursorIndex) + `</span>`;
+                let contentSplit = contentEditableDivRef.current.innerHTML.split(firstPart);
+                let str = contentSplit[0] + firstPart + `</span>` + chipElm + `<span class="formulaSpanElm">` + contentSplit[1];
+                setContent(str);
+                // 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);
+            }
+        }
+        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.
+        let elements = contentEditableDivRef.current.children;
+        let formula = '';
+        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);
+            }
+            else
+                formula = formula + (element.innerHTML ? element.innerHTML : ' ');
+        }
+        // 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 !== '') {
+            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 total = eval(formula);
+                console.log(total);
+                setIsValid(true);
+            }
+            catch (error) {
+                setIsValid(false);
+            }
+        }
+        else {
+            setIsValid(false);
+        }
+        // setContent(contentEditableDivRef.current.innerHTML);
+    };
+    function getCursorPosition(contentEditableElm) {
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        const clonedRange = range.cloneRange();
+        clonedRange.selectNodeContents(contentEditableElm);
+        clonedRange.setEnd(range.endContainer, range.endOffset);
+        return clonedRange.toString().length;
+    }
+    const onConditionKeyDown = (event) => {
+        var _a, _b;
+        const content = event.target.textContent.trim();
+        const lastChar = content.charAt(content.length - 1);
+        const operators = ['%', '*', '-', '+', '/'];
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            let spanElms = document.querySelectorAll('.formulaSpanElm');
+            for (let i = 0; i < spanElms.length; i++) {
+                if (spanElms[i]) {
+                    if (((_a = spanElms[i]) === null || _a === void 0 ? void 0 : _a.classList.value) === 'formulaSpanElm activeSpanElm') {
+                        (_b = spanElms[i]) === null || _b === void 0 ? void 0 : _b.classList.remove('activeSpanElm');
+                        let curentSpan = (event.key === 'ArrowLeft' || event.key === 'ArrowUp') ? i === 0 ? spanElms[i] : spanElms[i - 1] : (spanElms.length - 1) === i ? spanElms[i] : spanElms[i + 1];
+                        curentSpan === null || curentSpan === void 0 ? void 0 : curentSpan.classList.add('activeSpanElm');
+                        i = spanElms.length;
+                        return;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+        }
+        // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
+        if (event.key === 'Backspace' || event.key === 'Delete' ||
+            (event.key === 'a' && event.ctrlKey) || (event.key === 'A' && event.ctrlKey) ||
+            event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' ||
+            event.key === 'ArrowDown' || event.key === 'Home' || event.key === 'End' || event.key === 'Shift') {
+            return;
+        }
+        // Allow numbers, *, -, +, %, /, (, ), and single space
+        if (!((event.key >= '0' && event.key <= '9') ||
+            event.key === '*' || event.key === '-' || event.key === '+' ||
+            event.key === '%' || event.key === '/' || event.key === '(' ||
+            event.key === ')' || (event.key !== ' ' && event.target.textContent.trim().slice(-1) === ' '))) {
+            event.preventDefault();
+        }
+        // Prevent new lines (enter keypress)
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+        const cursorPosition = getCursorPosition(event.target);
+        // Prevent entering operators continuously after each other
+        if (operators.includes(event.key) && operators.includes(lastChar) && operators.includes(content[cursorPosition - 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; 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(e.target.value.toLowerCase()); });
+            setFieldOptions(opts);
+        }
+        else {
+            setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
+        }
+    };
+    const handleKeyPress = (event) => {
+        if ((event.key === 'Delete' || event.key === 'Backspace') && contentEditableDivRef.current) {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const cursorElement = range.startContainer.parentElement;
+                if (cursorElement === null || cursorElement === void 0 ? void 0 : cursorElement.classList.contains('formulaChipElm')) {
+                    cursorElement.remove();
+                    setContent(contentEditableDivRef.current.innerHTML);
+                    event.preventDefault();
+                    return;
+                }
+            }
+        }
+    };
+    const onClickContentEditable = (e) => {
+        var _a, _b, _c;
+        if (!e.target.classList.contains('formulaSpanElm')) {
+            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.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();
+        }
+    };
+    const onAddOperator = (event, operator) => {
+        var _a, _b;
+        let elm = document.querySelector('.activeSpanElm');
+        const operators = ['%', '*', '-', '+', '/'];
+        const lastChar = (_a = elm.innerHTML) === null || _a === void 0 ? void 0 : _a.charAt(((_b = elm.innerHTML) === null || _b === void 0 ? void 0 : _b.length) - 1);
+        // const cursorPosition = getCursorPosition(elm);
+        // Prevent entering operators coonChangeCondition(str);ntinuously after each other
+        if (lastChar && operators.includes(lastChar)) {
+            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);
+        props.onSaveFormula(formula);
+    };
+    const menuContent = [
+        {
+            template: () => {
+                return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(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" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4  h-2rem 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) &&
+                                                    (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 py-2 border-top-1 border-gray-200" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex aling-items-center w-full" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full flex align-items-cente justify-content-center w-2rem absolute left-0" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (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' }, { 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 bg-blue-100 text-gray-600 cursor-pointer item_chip border-round-sm p-1', 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-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.jsx)("div", { onClick: (e) => onClickContentEditable(e), ref: contentEditableDivRef, onKeyDownCapture: handleKeyPress, dangerouslySetInnerHTML: { __html: content }, onKeyDown: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), className: `condition_configure px-4 py-2 h-17rem overflow-auto w-full `, contentEditable: true })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_footer_section flex align-items-center p-2" }, { 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" }, { 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 = () => {
+        // Select all div elements with the specified class name
+        const divElements = document.querySelectorAll('.formulaSpanElm');
+        // Loop through each div element
+        divElements.forEach(function (divElement) {
+            // Add an event listener for the 'click' event to each div element
+            divElement.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');
+                let index = getCursorPosition(e.target);
+                setContentEditableCursorIndex(index);
+                // Your event handler code here
+            });
+            divElement.addEventListener('keydown', function (e) {
+                var _a;
+                (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
+                e.target.classList.add('activeSpanElm');
+                let index = getCursorPosition(e.target);
+                setContentEditableCursorIndex(index);
+            });
+        });
+    };
+    const onShowMenu = () => {
+        if (props === null || props === void 0 ? void 0 : props.formulaValue) {
+            let formulatText;
+            const pattern = /[a-f0-9]{24}/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 item = fieldOptions.find((x) => x.id === id[0]);
+                const 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" 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 !== '');
+                console.log('Text:', textParts);
+                if (textParts.length > 0) {
+                    for (let z = 0; z < textParts.length; z++) {
+                        if (z === 0 && (splitText.length - 1) === i)
+                            formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm + `<span class='formulaSpanElm'></span>` : `<span class='formulaSpanElm'></span>`;
+                        else if (z === 0)
+                            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);
+        }
+        setTimeout(() => {
+            addEventListenerForSpan();
+        }, 1000);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden", style: { width: "432px" } }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { optionLabel: "name", placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : 'Select', value: 0, className: "sc_animate w-10rem price_list_manage_price_rule_condition_dropdown border-right-1 border-gray-300 border-none border-noround\t", options: props === null || props === void 0 ? void 0 : props.options }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-auto cursor-pointer", onClick: (e) => { var _a; return (_a = priceConditioRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: onShowMenu, popup: true, popupAlignment: "left", className: 'price_condition_menu p-0', model: menuContent, ref: priceConditioRef, id: "price_condition_menu" })] }), "asadssadsasdsdadasd"));
+};
+exports.default = FormulaCoponent;

package/dist/components/froala-editor/FroalaEditor.js

@@ -10,7 +10,7 @@ require("froala-editor/js/plugins.pkgd.min.js");
 // import { SvgComponent } from 'sccoreui';
 // import SvgComponent from '../../directives/svg-component';
 // import { Bold, Italic } from '../../assets/svg/svg';
-const FroalaTextEditor = ({ onChange, value, placeholderText, id, className }) => {
+const FroalaTextEditor = ({ onChange, value, placeholderText, id, className, maxlength = 255 }) => {
     const editorRef = (0, react_1.useRef)(null);
     // const html = ``;
     const [editorContent, setEditorContent] = (0, react_1.useState)(value);
@@ -54,7 +54,7 @@ const FroalaTextEditor = ({ onChange, value, placeholderText, id, className }) =
                 fontFamilyDefaultSelection: 'sans-serif',
                 placeholderText: placeholderText,
                 key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
-                charCounterCount: false,
+                charCounterMax: maxlength,
                 toolbarSticky: false,
                 quickInsertEnabled: false,
                 toolbarInline: false,

package/dist/directives/svg-icons.js

@@ -9170,5 +9170,22 @@ exports.iconList = [
         </svg>
             `,
     },
+    {
+        name: "open-bracket",
+        svg: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 11 11" fill="none">
+      <path d="M1.28496 4.66473C1.28496 5.36398 1.37154 6.04824 1.54468 6.71753C1.71783 7.38348 1.96923 8.01114 2.29887 8.60051C2.32884 8.66044 2.34716 8.71372 2.35382 8.76034C2.36048 8.80695 2.35715 8.84691 2.34383 8.88021C2.33051 8.91683 2.31053 8.9468 2.28389 8.97011C2.26058 8.99342 2.23394 9.01506 2.20398 9.03504L1.72948 9.32973C1.47975 8.9468 1.26831 8.56555 1.09516 8.18595C0.922017 7.80969 0.780502 7.4301 0.67062 7.04717C0.560738 6.66092 0.480823 6.27134 0.430877 5.87842C0.38093 5.48218 0.355957 5.07762 0.355957 4.66473C0.355957 4.25516 0.38093 3.85393 0.430877 3.46102C0.480823 3.06477 0.560738 2.67519 0.67062 2.29227C0.780502 1.90602 0.922017 1.52309 1.09516 1.1435C1.26831 0.763906 1.47975 0.382648 1.72948 -0.000274658L2.20398 0.29441C2.23394 0.314388 2.26058 0.336031 2.28389 0.35934C2.31053 0.382648 2.33051 0.412616 2.34383 0.449243C2.35715 0.482541 2.36048 0.522498 2.35382 0.569115C2.34716 0.615732 2.32884 0.669008 2.29887 0.728944C1.96923 1.32164 1.71783 1.95097 1.54468 2.61692C1.37154 3.28287 1.28496 3.96547 1.28496 4.66473Z" fill="#667085"/>
+    </svg>
+  
+  
+            `,
+    },
+    {
+        name: "close-bracket",
+        svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 11 11" fill="none">
+    <path d="M1.6555 4.66473C1.6555 3.96547 1.56893 3.28287 1.39578 2.61692C1.22263 1.95097 0.9729 1.32164 0.646583 0.728944C0.616615 0.669008 0.598302 0.615732 0.591642 0.569115C0.584983 0.522498 0.586648 0.482541 0.596637 0.449243C0.609956 0.412616 0.62827 0.382648 0.651578 0.35934C0.678216 0.336031 0.706519 0.314388 0.736487 0.29441L1.21597 -0.000274658C1.46238 0.382648 1.67215 0.763906 1.8453 1.1435C2.01845 1.52309 2.15996 1.90602 2.26984 2.29227C2.37973 2.67519 2.45964 3.06477 2.50959 3.46102C2.55953 3.85393 2.58451 4.25516 2.58451 4.66473C2.58451 5.07762 2.55953 5.48218 2.50959 5.87842C2.45964 6.27134 2.37973 6.66092 2.26984 7.04717C2.15996 7.4301 2.01845 7.80969 1.8453 8.18595C1.67215 8.56555 1.46238 8.9468 1.21597 9.32973L0.736487 9.03504C0.706519 9.01506 0.678216 8.99342 0.651578 8.97011C0.62827 8.9468 0.609956 8.91683 0.596637 8.88021C0.586648 8.84691 0.584983 8.80695 0.591642 8.76034C0.598302 8.71372 0.616615 8.66044 0.646583 8.60051C0.9729 8.01114 1.22263 7.38348 1.39578 6.71753C1.56893 6.04824 1.6555 5.36398 1.6555 4.66473Z" fill="#667085"/>
+    </svg>
+            `,
+    },
 ];
 // console.log(iconList.length)

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

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

package/dist/types/components/froala-editor/FroalaEditor.d.ts

@@ -2,5 +2,5 @@ import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/js/plugins.pkgd.min.js';
 import { FroalaTextEditorTypes } from '../types/type';
-declare const FroalaTextEditor: ({ onChange, value, placeholderText, id, className }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
+declare const FroalaTextEditor: ({ onChange, value, placeholderText, id, className, maxlength }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
 export default FroalaTextEditor;

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

@@ -185,6 +185,7 @@ export interface FroalaTextEditorTypes {
     id: string;
     className?: string;
     isLoading?: boolean;
+    maxlength?: number;
 }
 export interface ListBoxDropdownTypes {
     values: any;
@@ -278,7 +279,7 @@ export interface ConfigurValueOptionsTypes {
     value: number;
     optionType: "INCREASE_BY_VALUE" | "DECREASE_BY_VALUE" | "INCREASE_BY_PERCENTAGE" | "DECREASE_BY_PERCENTAGE" | "MANUAL" | "CALCULATION";
 }
-type MathematicalOperator = "+" | "-" | "*" | "/" | "%";
+type MathematicalOperator = "addition" | "subtraction" | "multiplication" | "division" | "percentile" | "openBracket" | "closeBracket";
 export interface FormulaTemplateTypes {
     className?: string;
     inputClassName?: string;
@@ -287,11 +288,16 @@ export interface FormulaTemplateTypes {
     inputPlaceholder?: string;
     headerTemplate?: React.ReactNode;
     headerTemplateClassName?: string;
-    formulaOperators?: MathematicalOperator[];
+    formulaOperators: MathematicalOperator[];
     formulaElemectClassName?: string;
     formulaElemectPlaceholder?: string;
+    formulaValue: string;
     fieldOptionTemplateTitle?: string;
-    fieldOptionSearchPlaceholder?: string;
+    fieldOptions: any[];
+    fieldFilter?: boolean | undefined;
+    fieldFilterEmptyMessage?: string;
+    fieldFilterOption?: string;
+    fieldOptionFilterPlaceholder?: string;
     fieldOptionTemplate?: React.ReactNode;
     fieldOptionClassName?: string;
     formulaChipTemplate?: React.ReactNode;

package/package.json

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

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

@@ -1,105 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dropdown_1 = require("primereact/dropdown");
-const inputtext_1 = require("primereact/inputtext");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const menu_1 = require("primereact/menu");
-const FormulaTemplate = (props) => {
-    console.log(props);
-    const priceConditioRef = (0, react_1.useRef)(null);
-    const [isValid, setIsValid] = (0, react_1.useState)(false);
-    const [selectedAttr, setSelectedAttr] = (0, react_1.useState)();
-    const attributes = [
-        {
-            id: '34t3246324687',
-            name: 'Test1',
-            code: '34sdf'
-        },
-        {
-            id: '34t32463287',
-            name: 'Test2',
-            code: 't34sdf'
-        },
-        {
-            id: '34t32464687',
-            name: 'Test3',
-            code: 'dshbf'
-        },
-        {
-            id: '34t32324687',
-            name: 'Test4',
-            code: '323sdf'
-        },
-        {
-            id: '3446324687',
-            name: 'Test5',
-            code: '30edf'
-        },
-        {
-            id: '34324687',
-            name: 'Test6',
-            code: '343sdf'
-        }
-    ];
-    const onSelecteAttr = (attr) => {
-        if (selectedAttr) {
-            if (selectedAttr.find((id) => id === attr.id))
-                setSelectedAttr(selectedAttr.filter((id) => id !== attr.id));
-            else
-                setSelectedAttr([attr.id, ...selectedAttr]);
-        }
-        else
-            setSelectedAttr([attr.id]);
-    };
-    const onChangeCondition = (e) => {
-        let equation = e.target.textContent.replace(/[a-zA-Z0-9<>]+/g, '0');
-        const regex = /^(?!.*(?:\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
-        if (!regex.test(equation)) {
-            try {
-                // let total = eval(equation)
-                setIsValid(true);
-            }
-            catch (error) {
-                setIsValid(false);
-            }
-        }
-        else {
-            setIsValid(false);
-        }
-    };
-    const onConditionKeyDown = (event) => {
-        // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
-        if (event.key === 'Backspace' || event.key === 'Delete' ||
-            (event.key === 'a' && event.ctrlKey) || (event.key === 'A' && event.ctrlKey) ||
-            event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' ||
-            event.key === 'ArrowDown' || event.key === 'Home' || event.key === 'End') {
-            return;
-        }
-        // Allow numbers, *, -, +, %, /, (, ), and single space
-        if (!((event.key >= '0' && event.key <= '9') ||
-            event.key === '*' || event.key === '-' || event.key === '+' ||
-            event.key === '%' || event.key === '/' || event.key === '(' ||
-            event.key === ')' || (event.key === ' ' && event.target.textContent.trim().slice(-1) !== ' '))) {
-            event.preventDefault();
-        }
-        // Prevent new lines (enter keypress)
-        if (event.key === 'Enter') {
-            event.preventDefault();
-        }
-    };
-    const menuContent = [
-        {
-            template: () => {
-                return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(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" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 border-bottom-1 border-gray-200 h-2rem flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + ' (0)', " "] }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 py-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex aling-items-center w-full" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full flex align-items-cente justify-content-center w-3rem absolute left-0" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "pl-12 w-full", placeholder: props.fieldOptionSearchPlaceholder })] })) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_attribute_list_sect overflow-auto flex flex-column row-gap-2 px-4 py-2` }, { children: attributes.map((attr) => {
-                                                return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ onClick: () => onSelecteAttr(attr), className: `h-3rem hover:bg-primary-25 flex justify-content-between cursor-pointer align-items-center p-3 border-round-lg ${(selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.find((id) => id === attr.id)) && 'bg-primary-25'}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "attr_name max-w-14rem text-md text-gray-700 font-semibold overflow-hidden text-overflow-ellipsis white-space-nowrap", title: attr.name }, { children: attr.name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "scan", className: "mr-1", size: 14 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "attr_code text-sm max-w-13rem overflow-hidden text-overflow-ellipsis white-space-nowrap", title: attr.code }, { children: attr.code }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.find((id) => id === attr.id)) &&
-                                                                (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", color: "#162578", size: 20 }) }))] })));
-                                            }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-4 align-items-center border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "divide-01", size: 20 }) }))] })), (0, jsx_runtime_1.jsx)("div", { onKeyDown: (e) => onConditionKeyDown(e), onInput: (e) => onChangeCondition(e), className: `condition_configure px-4 py-2 h-17rem overflow-auto w-full`, contentEditable: true })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_footer_section flex align-items-center p-2" }, { 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" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ 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 }) }))] }))] })));
-            }
-        }
-    ];
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden", style: { width: "432px" } }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { optionLabel: "name", placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : 'Select', value: 0, className: "sc_animate w-10rem price_list_manage_price_rule_condition_dropdown border-right-1 border-gray-300 border-none border-noround\t", options: props === null || props === void 0 ? void 0 : props.options }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-auto cursor-pointer", onClick: (e) => { var _a; return (_a = priceConditioRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { popup: true, popupAlignment: "left", className: 'price_condition_menu p-0', model: menuContent, ref: priceConditioRef, id: "price_condition_menu" })] })));
-};
-exports.default = FormulaTemplate;

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

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