sccoreui 6.3.97 → 6.3.99

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

@@ -18,7 +18,7 @@ const InputTextField = (props) => {
                     // <label className="font-medium text-base mb-1" htmlFor={name}>
                     //   {label}
                     // </label>
-                    (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_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" }) })))] })));
+                    (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : 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" }) })))] })));
 };
 const InputNumberField = (props) => {
     const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits, inputNumberProps = {}, isRequired = false, value, } = props;
@@ -29,7 +29,7 @@ const InputNumberField = (props) => {
                 (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
                         const { value, name } = field;
                         return ((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({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (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 }, inputNumberProps))] }))) : ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (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 }, inputNumberProps))) }));
-                    } })), 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
+                    } })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const InputCurrencyField = (props) => {
     const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, useGrouping = false, min, max, maxLength, className, validate, disabled, isLoading, inputNumberProps = {}, isRequired = false, value, } = props;
@@ -40,7 +40,7 @@ const InputCurrencyField = (props) => {
                 (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
                         const { value, name } = field;
                         return ((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({ name: name, value: value, "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (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, useGrouping: useGrouping }, inputNumberProps))] })));
-                    } })), 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
+                    } })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const InputTextAreaField = (props) => {
     const [charCount, setCharCount] = (0, react_1.useState)(0);
@@ -57,7 +57,7 @@ const InputTextAreaField = (props) => {
                                     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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
+                                } }, 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 === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
 };
 const DropDownField = (props) => {
     const { errors, touched, name, length, label, onFocus, 
@@ -71,7 +71,7 @@ const DropDownField = (props) => {
                             onFocus && onFocus();
                         }, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { 
                         // onChange={(e: any) => onChange && onChange(e)}
-                        options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search", emptyMessage: emptyMessage ? emptyMessage : "No Data Found", emptyFilterMessage: emptyFilterMessage ? emptyFilterMessage : "No Results Found" }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
+                        options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search", emptyMessage: emptyMessage ? emptyMessage : "No Data Found", emptyFilterMessage: emptyFilterMessage ? emptyFilterMessage : "No Results Found" }))) })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
 };
 const MultiSelectField = (props) => {
     const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false, value, } = props;
@@ -79,7 +79,7 @@ const MultiSelectField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (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 === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : 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 === null || errors === void 0 ? void 0 : 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)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
 };
 const PhoneNumberField = (props) => {
     const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading, isRequired = false, value, } = props;

package/dist/components/formula-template/{FormulaCoponent.js → FormulaComponent.js}

@@ -28,7 +28,9 @@ 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, formulaValue: props === null || props === void 0 ? void 0 : props.formulaValue, priceConditioRef: priceConditioRef, onChange: (e) => (props === null || props === void 0 ? void 0 : props.onSaveFormula) && (props === null || props === void 0 ? void 0 : props.onSaveFormula(e)) })] }), "formula__dev"));
+                                                : "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions, formulaValue: props === null || props === void 0 ? void 0 : props.formulaValue, priceConditioRef: priceConditioRef, onChange: (e) => {
+                                (props === null || props === void 0 ? void 0 : props.onSaveFormula) && (props === null || props === void 0 ? void 0 : props.onSaveFormula(e));
+                            } })] }), "formula__dev"));
             },
         },
     ];

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

@@ -7,15 +7,16 @@ const menu_1 = require("primereact/menu");
 const react_1 = require("react");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const virtualization_component_1 = tslib_1.__importDefault(require("./virtualization-component"));
 // import { InputText } from "primereact/inputtext";
 // import { Checkbox } from "primereact/checkbox";
 const ListBoxDropdown = (props) => {
     const boxRef = (0, react_1.useRef)();
     const { selectAll, 
     // onSelectAll,
-    onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef, 
+    onSelectionChange, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef, 
     // buttonClassName,
-    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, virtualScrollerOptions, } = props;
+    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, virtualScrollerOptions, virtualScroll } = props;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     // const [checked, setChecked] = useState<boolean>(false);
@@ -29,13 +30,15 @@ const ListBoxDropdown = (props) => {
             onChange(e);
         }
     };
-    (0, react_1.useEffect)(() => {
-        setSelectedItems(values);
-    }, [values]);
     const handleScroll = (e) => {
         if (optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current)
             optionsMenuRef.current.hide(e);
     };
+    (0, react_1.useEffect)(() => {
+        if (!virtualScroll) {
+            setSelectedItems(values);
+        }
+    }, [values]);
     (0, react_1.useEffect)(() => {
         if (scrollElementId) {
             let elm = document.getElementById(`${scrollElementId}`);
@@ -106,35 +109,38 @@ const ListBoxDropdown = (props) => {
                             template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
                                     ? listBoxParentClassName +
                                         " list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
-                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), onFilterValueChange: onFilterValueChange, virtualScrollerOptions: virtualScrollerOptions, options: selectedOptionNone
-                                            ? listItems.length === selectedItems.length
-                                                ? []
-                                                : listItems
-                                            : listItems, optionLabel: optionLabel, className: `${listBoxclassName
-                                            ? listBoxclassName
-                                            : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ", 
-                                        // filterTemplate={() => (
-                                        //   <div className="p-input-icon-right w-full">
-                                        //     {
-                                        //         inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
-                                        //         <SvgComponent icon="x-close" size={18} />
-                                        //       </span>
-                                        //     }
-                                        //     <InputText
-                                        //       id="email"
-                                        //       value={inpValue}
-                                        //       onChange={(e) => {
-                                        //         setInpValue(e.target.value);
-                                        //       }}
-                                        //       disabled={false}
-                                        //       placeholder="Search"
-                                        //       className="font-normal text-gray-500 hover:text-gray-900 w-full"
-                                        //     />
-                                        //   </div>
-                                        // )}
-                                        emptyFilterMessage: emptyFilterMessage
-                                            ? emptyFilterMessage
-                                            : "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
+                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), virtualScroll ?
+                                        (0, jsx_runtime_1.jsx)(virtualization_component_1.default, { emptyFilterMessage: emptyFilterMessage, listBoxclassName: listBoxclassName, emptyMessage: emptyMessage, multiple: multiple, onSelectionChange: onSelectionChange, listClassName: listClassName, filterPlaceholder: filterPlaceholder, optionTemplate: optionTemplate, optionLabel: optionLabel, values: values })
+                                        :
+                                            (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), onFilterValueChange: onFilterValueChange, virtualScrollerOptions: virtualScrollerOptions, options: selectedOptionNone
+                                                    ? listItems.length === selectedItems.length
+                                                        ? []
+                                                        : listItems
+                                                    : listItems, optionLabel: optionLabel, className: `${listBoxclassName
+                                                    ? listBoxclassName
+                                                    : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search ", 
+                                                // filterTemplate={() => (
+                                                //   <div className="p-input-icon-right w-full">
+                                                //     {
+                                                //         inpValue?.length > 0 && <span className="p-input-suffix" onClick={removeItems}>
+                                                //         <SvgComponent icon="x-close" size={18} />
+                                                //       </span>
+                                                //     }
+                                                //     <InputText
+                                                //       id="email"
+                                                //       value={inpValue}
+                                                //       onChange={(e) => {
+                                                //         setInpValue(e.target.value);
+                                                //       }}
+                                                //       disabled={false}
+                                                //       placeholder="Search"
+                                                //       className="font-normal text-gray-500 hover:text-gray-900 w-full"
+                                                //     />
+                                                //   </div>
+                                                // )}
+                                                emptyFilterMessage: emptyFilterMessage
+                                                    ? emptyFilterMessage
+                                                    : "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
                     ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "data_label", title: dataLabel })) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
                                 (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const inputtext_1 = require("primereact/inputtext");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const hooks_1 = require("primereact/hooks");
+const skeleton_1 = require("primereact/skeleton");
+function RowVirtualizerDynamic(props) {
+    var _a, _b;
+    const { optionTemplate, optionLabel, filterPlaceholder, values, multiple = false, onSelectionChange, fetchData } = props;
+    const parentRef = React.useRef(null);
+    const initialFetch = {
+        pageIndex: 0,
+        pageSize: 100,
+        searchTerm: ""
+    };
+    const [loading, setLoading] = React.useState(true);
+    const pageIndex = React.useRef(0);
+    const [inputValue, debouncedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
+    const [enabled] = React.useState(true);
+    const [data, setData] = React.useState([]);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: data.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 45,
+        enabled,
+    });
+    // 👇 Scroll handler
+    const handleScroll = () => {
+        const el = parentRef.current;
+        if (!el)
+            return;
+        const scrollOffset = el.scrollTop + el.clientHeight;
+        const threshold = el.scrollHeight - 100;
+        if (scrollOffset >= threshold) {
+            setLoading(true);
+            // near bottom, simulate fetch
+            fetchMoreData(Object.assign(Object.assign({}, initialFetch), { pageIndex: pageIndex.current }));
+        }
+    };
+    const fetchMoreData = (props) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            const data = yield fetchData(props);
+            if (data) {
+                setData(prev => [
+                    ...prev,
+                    ...data // simulate fetch
+                ]);
+                setLoading(false);
+                pageIndex.current = pageIndex.current + 1;
+            }
+        }
+        catch (error) {
+            setLoading(false);
+        }
+    });
+    React.useEffect(() => {
+        fetchMoreData(Object.assign(Object.assign({}, initialFetch), { searchTerm: debouncedValue }));
+    }, [debouncedValue]);
+    // 👇 Attach scroll event
+    React.useEffect(() => {
+        const el = parentRef.current;
+        el && el.addEventListener('scroll', handleScroll);
+        return () => el.removeEventListener('scroll', handleScroll);
+    }, []);
+    const items = virtualizer.getVirtualItems();
+    const handleSelect = (item) => {
+        const isSelected = values.includes(item === null || item === void 0 ? void 0 : item.id);
+        let newSelection;
+        if (!multiple) {
+            newSelection = (item === null || item === void 0 ? void 0 : item.id) ? [item.id] : [];
+        }
+        else {
+            newSelection = isSelected
+                ? values.filter((val) => val !== (item === null || item === void 0 ? void 0 : item.id))
+                : [...values, item === null || item === void 0 ? void 0 : item.id];
+        }
+        onSelectionChange && onSelectionChange(newSelection);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'p-listbox' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-listbox-header", "data-pc-section": "header" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-listbox-filter-container", "data-pc-section": "filtercontainer" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'p-input-icon-right flex-order-1' }, { children: [inputValue === "" ?
+                                (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md", size: 12 }) })) :
+                                (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer", onClick: (e) => {
+                                        e.stopPropagation();
+                                        setInputValue("");
+                                    } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 12 }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: filterPlaceholder, className: 'w-full' })] })) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: parentRef, className: "List w-full bg-gray shadow-3", style: {
+                    height: 400,
+                    overflowY: 'auto',
+                    contain: 'strict',
+                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                        height: virtualizer.getTotalSize(),
+                        width: '100%',
+                        position: 'relative',
+                    } }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-listbox-list', style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            transform: `translateY(${(_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
+                        } }, { children: items.map((virtualRow) => {
+                            var _a, _b;
+                            return ((0, jsx_runtime_1.jsx)("li", Object.assign({ "data-index": virtualRow.index, ref: virtualizer.measureElement, onClick: () => handleSelect(data[virtualRow.index]), className: `p-listbox-item ${virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'} ${values.includes((_a = data[virtualRow.index]) === null || _a === void 0 ? void 0 : _a.id) ? "p-highlight" : ""} cursor-pointer` }, { children: loading ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: '30px', width: '100%' }) : (0, jsx_runtime_1.jsx)("div", { children: optionTemplate ? optionTemplate(data[virtualRow.index]) : (0, jsx_runtime_1.jsx)("div", { children: (_b = data[virtualRow.index]) === null || _b === void 0 ? void 0 : _b[optionLabel] }) }) }), virtualRow.key));
+                        }) })) })) }))] })));
+}
+exports.default = RowVirtualizerDynamic;

package/dist/components/virtual-scroll-list-box/VirtualScrollListBox.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+function RowVirtualizerDynamic() {
+    var _a, _b;
+    const parentRef = React.useRef(null);
+    const [enabled] = React.useState(true);
+    const [data, setData] = React.useState(() => new Array(100).fill('Initial row'));
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: data.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 45,
+        enabled,
+    });
+    // 👇 Scroll handler
+    const handleScroll = () => {
+        const el = parentRef.current;
+        if (!el)
+            return;
+        const scrollOffset = el.scrollTop + el.clientHeight;
+        const threshold = el.scrollHeight - 100;
+        if (scrollOffset >= threshold) {
+            // near bottom, simulate fetch
+            fetchMoreData();
+        }
+    };
+    const fetchMoreData = () => {
+        setData(prev => [
+            ...prev,
+            ...new Array(50).fill('New row added') // simulate fetch
+        ]);
+    };
+    // 👇 Attach scroll event
+    React.useEffect(() => {
+        const el = parentRef.current;
+        el && el.addEventListener('scroll', handleScroll);
+        return () => el.removeEventListener('scroll', handleScroll);
+    }, []);
+    const items = virtualizer.getVirtualItems();
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: parentRef, className: "List", style: {
+            height: 400,
+            width: 400,
+            overflowY: 'auto',
+            contain: 'strict',
+        } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                height: virtualizer.getTotalSize(),
+                width: '100%',
+                position: 'relative',
+            } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${(_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
+                } }, { children: items.map((virtualRow) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-index": virtualRow.index, ref: virtualizer.measureElement, className: virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { padding: '10px 0' } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Row ", virtualRow.index] }), (0, jsx_runtime_1.jsx)("div", { children: data[virtualRow.index] })] })) }), virtualRow.key))) })) })) })));
+}
+exports.default = RowVirtualizerDynamic;

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.CustomSlider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.ScMultiSelect = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
 exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Steps = exports.SlideMenu = exports.PanelMenu = exports.Menubar = exports.Menu = exports.Dock = exports.ContextMenu = exports.Toolbar = exports.SplitterPanel = exports.Splitter = exports.ScrollPanel = exports.Panel = exports.Fieldset = exports.DeferredContent = exports.Timeline = exports.TreeTable = exports.Tree = exports.PickList = exports.OrganizationChart = exports.OrderList = exports.DataScroller = exports.TriStateCheckbox = exports.TreeSelect = exports.SelectButton = exports.MultiStateCheckbox = exports.Mention = exports.ListBox = exports.Knob = exports.Editor = exports.CascadeSelect = exports.FilterOperator = exports.FilterMatchMode = exports.Slider = exports.Galleria = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = exports.Chart = void 0;
-exports.AGCharts = exports.SCLoader = exports.AGGridComponent = exports.useOverlayScrollListener = exports.useOverlayListener = exports.useClickOutside = exports.CustomColorPicker = exports.ListBoxDropdown = exports.FroalaEditorTextBox = exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.FormulaCoponent = exports.MultiSelectDropDown = exports.Terminal = exports.StyleClass = void 0;
+exports.AGCharts = exports.SCLoader = exports.AGGridComponent = exports.useOverlayScrollListener = exports.useOverlayListener = exports.useClickOutside = exports.CustomColorPicker = exports.ListBoxDropdown = exports.FroalaEditorTextBox = exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.ExpressionRenderer = exports.FormulaComponent = exports.MultiSelectDropDown = exports.Terminal = exports.StyleClass = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -208,8 +208,10 @@ var terminal_1 = require("./components/terminal/terminal");
 Object.defineProperty(exports, "Terminal", { enumerable: true, get: function () { return tslib_1.__importDefault(terminal_1).default; } });
 var multi_select_dropdown_1 = require("./components/multi-select-dropdown/multi-select-dropdown");
 Object.defineProperty(exports, "MultiSelectDropDown", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_dropdown_1).default; } });
-var FormulaCoponent_1 = require("./components/formula-template/FormulaCoponent");
-Object.defineProperty(exports, "FormulaCoponent", { enumerable: true, get: function () { return tslib_1.__importDefault(FormulaCoponent_1).default; } });
+var FormulaComponent_1 = require("./components/formula-template/FormulaComponent");
+Object.defineProperty(exports, "FormulaComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(FormulaComponent_1).default; } });
+var ExpressionRender_1 = require("./components/formula-template/ExpressionRender");
+Object.defineProperty(exports, "ExpressionRenderer", { enumerable: true, get: function () { return tslib_1.__importDefault(ExpressionRender_1).default; } });
 var date_picker_1 = require("./components/date-picker/date-picker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
 var treeDropdownSelect_1 = require("./components/treeDropdownSelect/treeDropdownSelect");

package/dist/types/components/list-box-dropdown/virtualization-component.d.ts

@@ -0,0 +1,2 @@
+declare function RowVirtualizerDynamic(props: any): import("react/jsx-runtime").JSX.Element;
+export default RowVirtualizerDynamic;

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

@@ -267,6 +267,8 @@ export interface ListBoxDropdownTypes {
     dataLabel?: any;
     onFilterValueChange?: (payload: any) => void;
     virtualScrollerOptions?: any;
+    virtualScroll?: boolean;
+    onSelectionChange?: (data: any) => void;
 }
 export interface DatePickerTypes {
     value: any;

package/dist/types/components/virtual-scroll-list-box/VirtualScrollListBox.d.ts

@@ -0,0 +1,2 @@
+declare function RowVirtualizerDynamic(): import("react/jsx-runtime").JSX.Element;
+export default RowVirtualizerDynamic;

package/dist/types/index.d.ts

@@ -34,7 +34,7 @@ export { default as Tag } from "./components/carousel/tag";
 export { default as OverlayPanel } from "./components/overlays/overlay-panel";
 export { default as InputNumber } from "./components/input/input-number";
 export { default as Toast } from "./components/toast/toast";
-export { DataView, DataViewLayoutOptions } from "./components/data-view/data-view";
+export { DataView, DataViewLayoutOptions, } from "./components/data-view/data-view";
 export { default as SplitButton } from "./components/button/split-button";
 export { default as SpeedDial } from "./components/button/speed-dial";
 export { default as InputMask } from "./components/input/input-mask";
@@ -84,27 +84,28 @@ export { default as Menu } from "./components/menu/menu";
 export { default as Menubar } from "./components/menubar/menubar";
 export { default as PanelMenu } from "./components/panel-menu/panelMenu";
 export { default as SlideMenu } from "./components/slide-menu/slide-menu";
-export { default as Steps } from './components/steps/steps';
+export { default as Steps } from "./components/steps/steps";
 export { default as TieredMenu } from "./components/tiered-menu/tieredMenu";
 export { default as Message } from "./components/message/Message";
 export { default as Messages } from "./components/messages/messages";
 export { default as BlockUI } from "./components/block-ui/blockUI";
-export { Inplace, InplaceDisplay, InplaceContent } from "./components/inplace/inplace";
+export { Inplace, InplaceDisplay, InplaceContent, } from "./components/inplace/inplace";
 export { default as ScrollTop } from "./components/scroll-top/scrollTop";
 export { default as StyleClass } from "./components/style-class/styleClass";
 export { default as Terminal } from "./components/terminal/terminal";
-export { default as MultiSelectDropDown } from './components/multi-select-dropdown/multi-select-dropdown';
-export { default as FormulaCoponent } from './components/formula-template/FormulaCoponent';
+export { default as MultiSelectDropDown } from "./components/multi-select-dropdown/multi-select-dropdown";
+export { default as FormulaComponent } from "./components/formula-template/FormulaComponent";
+export { default as ExpressionRenderer } from "./components/formula-template/ExpressionRender";
 export { default as DatePicker } from "./components/date-picker/date-picker";
-export { default as TreeDropdownSelect } from './components/treeDropdownSelect/treeDropdownSelect';
+export { default as TreeDropdownSelect } from "./components/treeDropdownSelect/treeDropdownSelect";
 export { default as FormComponent } from "./components/form/form";
 export { default as FormFields } from "./components/form/form-fields/form-fields";
 export { default as FroalaTextEditor } from "./components/froala-editor/FroalaEditor";
 export { default as FroalaEditorTextBox } from "./components/froala-editor/FroalaEditorTextBox";
-export { default as ListBoxDropdown } from './components/list-box-dropdown/list-box-dropdown';
+export { default as ListBoxDropdown } from "./components/list-box-dropdown/list-box-dropdown";
 export { default as CustomColorPicker } from "./components/custom-color-picker/color-picker";
-export { useClickOutside, useOverlayListener, useOverlayScrollListener } from 'primereact/hooks';
-export { default as AGGridComponent } from './components/ag-grid/parent-for-grid';
+export { useClickOutside, useOverlayListener, useOverlayScrollListener, } from "primereact/hooks";
+export { default as AGGridComponent } from "./components/ag-grid/parent-for-grid";
 export { default as SCLoader } from "./components/loader/Loader";
 export { default as AGCharts } from "./components/ag-charts/AGCharts";
 import { DropdownChangeEvent } from "primereact/dropdown";
@@ -118,7 +119,7 @@ import { RadioButtonChangeEvent } from "primereact/radiobutton";
 import { CarouselResponsiveOption } from "primereact/carousel";
 import { MenuItem, MenuItemOptions } from "primereact/menuitem";
 import { AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { CalendarChangeEvent } from "primereact/calendar";
+import { CalendarChangeEvent, CalendarProps } from "primereact/calendar";
 import { CascadeSelectChangeEvent } from "primereact/cascadeselect";
 import { ChipsChangeEvent } from "primereact/chips";
 import { InputMaskChangeEvent } from "primereact/inputmask";
@@ -143,5 +144,5 @@ import { TreeExpandedKeysType, TreeMultipleSelectionKeys, TreeCheckboxSelectionK
 import { TreeTableExpandedKeysType, TreeTableSelectionEvent, TreeTableSelectionKeysType, TreeTablePageEvent, TreeTableEvent } from "primereact/treetable";
 import { TabPanelHeaderTemplateOptions } from "primereact/tabview";
 import { ToastMessage } from "primereact/toast";
-import { EditorTextChangeEvent } from 'primereact/editor';
-export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent, RadioButtonChangeEvent, CustomActionEvent, StepItem, FormComponentProps, TextFieldProps, TextAreaFieldProps, NumberFieldProps, DropDownFieldProps, MultiSelectProps, StepsItemProps, TeamDataItem, CustomerAbout, CustomerDataItem, RangeSliderProps, GalleriaResponsiveOptions, AutoCompleteCompleteEvent, CalendarChangeEvent, CascadeSelectChangeEvent, ChipsChangeEvent, InputMaskChangeEvent, InputSwitchChangeEvent, KnobChangeEvent, ListBoxChangeEvent, MentionSearchEvent, MentionItemTemplateOptions, MultiSelectChangeEvent, MultiStateCheckboxChangeEvent, RatingChangeEvent, SelectButtonChangeEvent, TreeSelectChangeEvent, TriStateCheckboxChangeEvent, ToggleButtonChangeEvent, DataTableFilterMeta, ColumnFilterElementTemplateOptions, InputNumberChangeEvent, DataTableSelectEvent, DataTableUnselectEvent, DataTableDataSelectableEvent, DataTableCellSelection, DataTableCellClassNameOptions, DataTableExpandedRows, DataTableRowEvent, DataTableValueArray, ColumnEvent, ColumnEditorOptions, DataTableRowEditCompleteEvent, DataTableSelectAllChangeEvent, DataTablePageEvent, DataTableSortEvent, DataTableFilterEvent, ColumnBodyOptions, VirtualScrollerLazyEvent, VirtualScrollerLoadingTemplateOptions, DataTableRowToggleEvent, PaginatorPageChangeEvent, PaginatorJumpToPageInputOptions, PaginatorCurrentPageReportOptions, PaginatorRowsPerPageDropdownOptions, PaginatorLastPageLinkOptions, PaginatorNextPageLinkOptions, PaginatorPageLinksOptions, PaginatorPrevPageLinkOptions, PaginatorFirstPageLinkOptions, TreeExpandedKeysType, TreeMultipleSelectionKeys, TreeCheckboxSelectionKeys, TreeEventNodeEvent, TreeNodeTemplateOptions, TreeTogglerTemplateOptions, TreeDragDropEvent, TreeTableExpandedKeysType, TreeTableSelectionEvent, TreeTableSelectionKeysType, TreeTablePageEvent, TreeTableEvent, VirtualScrollerTemplateOptions, TabPanelHeaderTemplateOptions, MenuItemOptions, ToastMessage, EditorTextChangeEvent, SCLoaderProps, };
+import { EditorTextChangeEvent } from "primereact/editor";
+export type { CalendarProps, DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent, RadioButtonChangeEvent, CustomActionEvent, StepItem, FormComponentProps, TextFieldProps, TextAreaFieldProps, NumberFieldProps, DropDownFieldProps, MultiSelectProps, StepsItemProps, TeamDataItem, CustomerAbout, CustomerDataItem, RangeSliderProps, GalleriaResponsiveOptions, AutoCompleteCompleteEvent, CalendarChangeEvent, CascadeSelectChangeEvent, ChipsChangeEvent, InputMaskChangeEvent, InputSwitchChangeEvent, KnobChangeEvent, ListBoxChangeEvent, MentionSearchEvent, MentionItemTemplateOptions, MultiSelectChangeEvent, MultiStateCheckboxChangeEvent, RatingChangeEvent, SelectButtonChangeEvent, TreeSelectChangeEvent, TriStateCheckboxChangeEvent, ToggleButtonChangeEvent, DataTableFilterMeta, ColumnFilterElementTemplateOptions, InputNumberChangeEvent, DataTableSelectEvent, DataTableUnselectEvent, DataTableDataSelectableEvent, DataTableCellSelection, DataTableCellClassNameOptions, DataTableExpandedRows, DataTableRowEvent, DataTableValueArray, ColumnEvent, ColumnEditorOptions, DataTableRowEditCompleteEvent, DataTableSelectAllChangeEvent, DataTablePageEvent, DataTableSortEvent, DataTableFilterEvent, ColumnBodyOptions, VirtualScrollerLazyEvent, VirtualScrollerLoadingTemplateOptions, DataTableRowToggleEvent, PaginatorPageChangeEvent, PaginatorJumpToPageInputOptions, PaginatorCurrentPageReportOptions, PaginatorRowsPerPageDropdownOptions, PaginatorLastPageLinkOptions, PaginatorNextPageLinkOptions, PaginatorPageLinksOptions, PaginatorPrevPageLinkOptions, PaginatorFirstPageLinkOptions, TreeExpandedKeysType, TreeMultipleSelectionKeys, TreeCheckboxSelectionKeys, TreeEventNodeEvent, TreeNodeTemplateOptions, TreeTogglerTemplateOptions, TreeDragDropEvent, TreeTableExpandedKeysType, TreeTableSelectionEvent, TreeTableSelectionKeysType, TreeTablePageEvent, TreeTableEvent, VirtualScrollerTemplateOptions, TabPanelHeaderTemplateOptions, MenuItemOptions, ToastMessage, EditorTextChangeEvent, SCLoaderProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.3.97",
+  "version": "6.3.99",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -56,6 +56,7 @@
     "@ag-grid-enterprise/status-bar": "^31.3.2",
     "@ag-grid-enterprise/viewport-row-model": "^31.3.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@tanstack/react-virtual": "^3.13.6",
     "@types/react": "18",
     "@types/react-dom": "18",
     "@yaireo/tagify": "^4.33.2",

package/dist/pages/RowGroupingServerside/DragandDropFeatures.js

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