sccoreui 5.9.62 → 5.9.64

package/dist/components/ag-grid/advancedFeature/custom-sort.js

@@ -8,11 +8,10 @@ const overlaypanel_1 = require("primereact/overlaypanel");
 const radiobutton_1 = require("primereact/radiobutton");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
-const constants_1 = require("../constants");
 const context_provider_1 = require("../context-provider");
 function Sort() {
     var _a;
-    const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
+    const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, callGrid, columnData, sortModelText, sortOptions } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const showShort = (0, react_1.useRef)(null);
     const [sortInfo, setSortInfo] = (0, react_1.useState)();
     const sortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
@@ -89,9 +88,9 @@ function Sort() {
     }, [sortValue, sortBy]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer sc_icon_hover flex align-items-center border-round ${isOverlayOpened || featureDetails.sort.isSortable
                     ? "bg-primary-50"
-                    : ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "icon-32x32 hover:bg-primary-50", text: true, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
+                    : ""}` }, { children: [featureDetails.sort.isSortable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "flex align-items-center text-primary-400 ml-3" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.onSelectedSort) ? sortModelText.onSelectedSort : `Selected` }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "icon-32x32 hover:bg-primary-50", text: true, onClick: (event) => onClickSort(event), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "switch-vertical-02", size: 16, color: isOverlayOpened || featureDetails.sort.isSortable
                                 ? "text-gray-700"
-                                : "text-gray-700" }) })] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
+                                : "text-gray-700" }) })] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
                             if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
                                 const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
                                 return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `${isSelected && "bg-primary-25"} cursor-pointer border-round-md flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { id: "tableSort", checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `cursor-pointer ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
@@ -99,12 +98,12 @@ function Sort() {
                             else {
                                 return null;
                             }
-                        }) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_a = constants_1.COLUMN_SORT_OPTIONS.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
+                        }) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `p-1 my-0 ${showBorder ? "border-top-1 border-gray-200" : ""}` }, { children: (_a = sortOptions.filter((each) => each.dataType === sortType)) === null || _a === void 0 ? void 0 : _a.map((eachOption, index) => {
                             const seletedSort = eachOption.label === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.label);
                             return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: `cursor-pointer ${seletedSort && "bg-primary-25"} cursor-pointer border-round-md pl-0 px-3 py-2 flex align-items-center gap-2`, onClick: () => {
                                     onSelectSortType(eachOption);
                                     // setSortBy(eachOption);
                                 } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === 0 ? "arrow-down" : "arrow-up", size: 20 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${seletedSort && "text-primary-400 font-semibold"} text-gray-700 font-medium text-base` }, { children: eachOption.label }))] }), index));
-                        }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: "Apply" }))] }))] }))] })));
+                        }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between px-3 py-2 border-top-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: false, id: "column_sort_dropdown", outlined: true, onClick: (e) => clearSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.clearAction) ? sortModelText.clearAction : "Clear" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: isApplyDisable, id: "column_sort_dropdown", onClick: (e) => applyTableSort(e) }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.applyAction) ? sortModelText.applyAction : "Apply" }))] }))] }))] })));
 }
 exports.default = Sort;

package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js

@@ -11,7 +11,7 @@ const inputnumber_1 = require("primereact/inputnumber");
 const calendar_1 = require("primereact/calendar");
 const multi_select_dropdown_1 = tslib_1.__importDefault(require("../../../../multi-select-dropdown/multi-select-dropdown"));
 const Condtions = (props) => {
-    const { columnName, condition, value, columnsArray, conditionsArray, index, id, setEnbleApply, updateconditionsArray, removeConditionFromArray, addEmptyCondition, condtionslenght, conditionType, conditionTypes, handleConditionType } = props;
+    const { columnName, condition, value, columnsArray, conditionsArray, index, id, setEnbleApply, updateconditionsArray, removeConditionFromArray, addEmptyCondition, condtionslenght, conditionType, conditionTypes, handleConditionType, filterModelText } = props;
     const onAddCondtion = (index) => {
         addEmptyCondition(index);
     };
@@ -50,7 +50,7 @@ const Condtions = (props) => {
         const dataType = (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.columnType) ? selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.columnType : selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.dataType;
         switch (dataType === null || dataType === void 0 ? void 0 : dataType.toLowerCase()) {
             case "string": {
-                return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem focus:shadow-none lh-44 h-44", value: value, placeholder: "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
+                return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem focus:shadow-none lh-44 h-44", value: value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input) ? filterModelText.elementThreePlaceHolder_Input : "Enter", onChange: (event) => handleDynamicFieldState(event.target.value) }));
             }
             case "integer": {
                 const handleOnchangeEvent = (eventValue) => {
@@ -81,7 +81,7 @@ const Condtions = (props) => {
                     }
                 };
                 if (condition === "9" || condition === "20") {
-                    return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left lh-44 h-44  w-12rem dropdown-focus-none", value: value.includes(",") ? value.replace(",", "-") : value, placeholder: "Enter", onChange: (event) => handleOnchangeEvent(event.target.value) })
+                    return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left lh-44 h-44  w-12rem dropdown-focus-none", value: value.includes(",") ? value.replace(",", "-") : value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input) ? filterModelText.elementThreePlaceHolder_Input : "Enter", onChange: (event) => handleOnchangeEvent(event.target.value) })
                     // <div className="flex">
                     //     <InputNumber
                     //         disabled={!condition}
@@ -100,7 +100,7 @@ const Condtions = (props) => {
                     // </div>
                     );
                 }
-                return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem lh-44 h-44 remove-focus", value: value, type: "number", placeholder: "Enter", onChange: (event) => { var _a; return handleDynamicFieldState((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace("-", '')); } }));
+                return ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, { disabled: !condition, className: "border-noround-left w-12rem lh-44 h-44 remove-focus", value: value, type: "number", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input_Number) ? filterModelText.elementThreePlaceHolder_Input_Number : "Enter", onChange: (event) => { var _a; return handleDynamicFieldState((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace("-", '')); } }));
             }
             case "single": {
                 // let optionValue = selectedColumn?.options.find((each: any) => each[selectedColumn['key']] === value)
@@ -109,7 +109,7 @@ const Condtions = (props) => {
                     handleDynamicFieldState(`${value}`);
                     // }
                 };
-                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown  border-noround-left  dropdown-focus-none", value: parseInt(value), options: selectedColumn.options, optionLabel: "label", placeholder: "Select", disabled: !condition, onChange: (event) => handleOnchangeEvent(event.value) }));
+                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown  border-noround-left  dropdown-focus-none", value: parseInt(value), options: selectedColumn.options, optionLabel: "label", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", disabled: !condition, onChange: (event) => handleOnchangeEvent(event.value) }));
             }
             case "date": {
                 const convertDateToISO = (date) => {
@@ -126,23 +126,24 @@ const Condtions = (props) => {
                     handleDynamicFieldState(valueString);
                 };
                 if (condition === "9" || condition === "20") {
-                    return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: true, disabled: !condition, selectionMode: "range", placeholder: "Select", className: "condtion-dropdown border-noround-left  filter-calendar", value: (value === null || value === void 0 ? void 0 : value.includes(",")) ? (_a = value === null || value === void 0 ? void 0 : value.split(",")) === null || _a === void 0 ? void 0 : _a.map((date) => date ? new Date(date) : null) : null, onChange: (event) => handleOnchangeEvent(event.value) }));
+                    return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: true, disabled: !condition, selectionMode: "range", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: "condtion-dropdown border-noround-left  filter-calendar", value: (value === null || value === void 0 ? void 0 : value.includes(",")) ? (_a = value === null || value === void 0 ? void 0 : value.split(",")) === null || _a === void 0 ? void 0 : _a.map((date) => date ? new Date(date) : null) : null, onChange: (event) => handleOnchangeEvent(event.value) }));
                 }
-                return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: "single", placeholder: "Select", className: "condtion-dropdown border-noround-left  filter-calendar", value: value, onChange: (event) => handleDynamicFieldState(event.value) }));
+                return ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { readOnlyInput: true, showTime: false, disabled: !condition, selectionMode: "single", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Calender) ? filterModelText.elementThreePlaceHolder_Calender : "Select", className: "condtion-dropdown border-noround-left  filter-calendar", value: value, onChange: (event) => handleDynamicFieldState(event.value) }));
             }
             case "multi": {
-                return ((0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, { className: "filter-multi-dropdown w-12rem ", value: value, hidePanelHeader: true, maxSelectedLabels: 1, onChange: (event) => handleDynamicFieldState(event.value), placeholder: "Select", options: selectedColumn.options, dropdownType: "default", optionLabel: "name" }));
+                return ((0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, { className: "filter-multi-dropdown w-12rem ", value: value, hidePanelHeader: true, maxSelectedLabels: 1, onChange: (event) => handleDynamicFieldState(event.value), placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_MultiSelect) ? filterModelText.elementThreePlaceHolder_MultiSelect : "Select", options: selectedColumn.options, dropdownType: "default", optionLabel: "name" }));
             }
             case "decimal": {
-                return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { className: "border-noround-left  w-12rem filter-input-decimal", value: value, placeholder: "Enter", onChange: (event) => handleDynamicFieldState(event.target.value), maxFractionDigits: 2 }));
+                return ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { className: "border-noround-left  w-12rem filter-input-decimal", value: value, placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_Input_Number) ? filterModelText.elementThreePlaceHolder_Input_Number : "Enter", onChange: (event) => handleDynamicFieldState(event.target.value), maxFractionDigits: 2 }));
             }
             case "percent": {
-                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", value: value, options: [], optionLabel: "name", placeholder: "Select", onChange: (event) => handleDynamicFieldState(event.value) }));
+                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", value: value, options: [], optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", onChange: (event) => handleDynamicFieldState(event.value) }));
             }
             default:
-                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", options: [], value: value, optionLabel: "name", placeholder: "Select", disabled: true }));
+                return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown border-noround-left w-12rem dropdown-focus-none", options: [], value: value, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementThreePlaceHolder_DropDown) ? filterModelText.elementThreePlaceHolder_DropDown : "Select", disabled: true }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex filter-dropdowns align-items-center" }, { children: [index !== 0 ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown w-6rem mr-2 remove-focus", options: conditionTypes, optionLabel: "label", placeholder: "Select", value: conditionType, disabled: index !== 1, onChange: (event) => handleConditionType(event.target.value) }) : "", (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: `condtion-dropdown dropdown-focus-none border-noround-right w-12rem`, options: columnsArray, optionLabel: "name", placeholder: "Select", value: columnsArray.find((item) => item.code === columnName.code), onChange: (event) => onUpdateColumnName(event.value) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround remove-focus border-x-none w-12rem", options: conditionsArray.filter((each) => each.datatypes.includes(columnName === null || columnName === void 0 ? void 0 : columnName.dataType)).map((option) => { return Object.assign(Object.assign({}, option), { name: option.name.toLowerCase().split(' ').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') }); }), value: condition, disabled: columnName === '', optionLabel: "name", placeholder: "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-15rem" }), renderDynamicField(columnName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center ml-4 gap-3 mr-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "focus:shadow-none sc_icon_hover h-auto p-0", onClick: () => onAddCondtion(index), disabled: false }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 20, color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, disabled: condtionslenght === 1, className: "focus:shadow-none sc_icon_hover h-auto p-0", onClick: () => onRemoveCondtion(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
+    console.log(filterModelText);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex filter-dropdowns align-items-center" }, { children: [index !== 0 ? (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condtion-dropdown w-6rem mr-2 remove-focus", options: conditionTypes, optionLabel: "label", placeholder: "Select", value: conditionType, disabled: index !== 1, onChange: (event) => handleConditionType(event.target.value) }) : "", (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: `condtion-dropdown dropdown-focus-none border-noround-right w-12rem`, options: columnsArray, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementOnePlaceHolder) ? filterModelText.elementOnePlaceHolder : "Select", value: columnsArray.find((item) => item.code === columnName.code), onChange: (event) => onUpdateColumnName(event.value) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround remove-focus border-x-none w-12rem", options: conditionsArray.filter((each) => each.datatypes.includes(columnName === null || columnName === void 0 ? void 0 : columnName.dataType)).map((option) => { return Object.assign(Object.assign({}, option), { name: option.name.toLowerCase().split(' ').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') }); }), value: condition, disabled: columnName === '', optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementTwoPlaceHolder) ? filterModelText.elementTwoPlaceHolder : "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-15rem" }), renderDynamicField(columnName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center ml-4 gap-3 mr-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "focus:shadow-none sc_icon_hover h-auto p-0", onClick: () => onAddCondtion(index), disabled: false }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 20, color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, disabled: condtionslenght === 1, className: "focus:shadow-none sc_icon_hover h-auto p-0", onClick: () => onRemoveCondtion(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
 };
 exports.default = Condtions;

package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js

@@ -13,7 +13,7 @@ const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"))
 const context_provider_1 = require("../../context-provider");
 const inputtext_1 = require("primereact/inputtext");
 const TableFilter = () => {
-    const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate } = (0, react_1.useContext)(context_provider_1.FeatureContext);
+    const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const columnId = "field";
     const columnName = "headerName";
     const showFilter = (0, react_1.useRef)(null);
@@ -97,7 +97,7 @@ const TableFilter = () => {
     };
     const renderCondtion = (conditions, key) => {
         const { columnName, condition, value, id } = conditions;
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-end" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnbleApply: (value) => setEnbleApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: updateconditionsArray, addEmptyCondition: addEmptyCondition, removeConditionFromArray: removeConditionFromArray, condtionslenght: conditionsArray.length }, key) })));
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center justify-content-end" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnbleApply: (value) => setEnbleApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: updateconditionsArray, addEmptyCondition: addEmptyCondition, removeConditionFromArray: removeConditionFromArray, condtionslenght: conditionsArray.length, filterModelText: filterModelText }, key) })));
     };
     const createViewFromFilters = () => {
         const newFilters = conditionsArray.map((condition) => {
@@ -143,12 +143,12 @@ const TableFilter = () => {
                     : "bg-white"}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => onClickFilter(e), className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isOverlayOpened ||
                                 (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
                                 ? "#243DC6"
-                                : "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} Selected`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
+                                : "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter) ? filterModelText.onSelectedFilter : "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
                                         onresetFilter();
-                                    } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] })) })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: "Filters" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 pr-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-auto flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
+                                    } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] })) })), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showFilter, onShow: () => setIsOverlayOpened(true), onHide: filterLogoToggle, className: "table-filter-overlay" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader) ? filterModelText.subHeader : "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 pr-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-auto flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
                                     return ((0, jsx_runtime_1.jsx)("div", { children: renderCondtion(eachCondition, index) }, index));
-                                }) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "focus:shadow-none font-semibold", label: "Reset Filter", onClick: onresetFilter }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 focus:shadow-none mr-3", label: "Create View", onClick: () => setDisplayInput(true), disabled: !allFieldsFilled, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-suffix` }, { children: [displayInput && ((0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setViewName(""), className: "p-0 h-auto", disabled: !viewName.length, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) })] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: "Enter", value: viewName, onChange: (e) => setViewName(e.target.value), className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full px-3 mr-3" })] }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold text-gray-600 p-1 focus:shadow-none text-white w-4rem", label: "Apply", onClick: onApplyFilter, disabled: !allFieldsFilled })] }))] }))] }) }))] }));
+                                }) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "focus:shadow-none font-semibold", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.resetFilterAction) ? filterModelText.resetFilterAction : "Reset Filter", onClick: onresetFilter }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 focus:shadow-none mr-3", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewAction) ? filterModelText.createViewAction : "Create view", onClick: () => setDisplayInput(true), disabled: !allFieldsFilled, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-suffix` }, { children: [displayInput && ((0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setViewName(""), className: "p-0 h-auto", disabled: !viewName.length, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) })] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewInputPlaceHolder) ? filterModelText.createViewInputPlaceHolder : "Enter", value: viewName, onChange: (e) => setViewName(e.target.value), className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full px-3 mr-3" })] }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold text-gray-600 p-1 focus:shadow-none text-white w-4rem", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.applyAction) ? filterModelText.applyAction : "Apply", onClick: onApplyFilter, disabled: !allFieldsFilled })] }))] }))] }) }))] }));
 };
 exports.default = TableFilter;

package/dist/components/ag-grid/advancedFeature/record-detail.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const context_provider_1 = require("../context-provider");
 function RecordDetail() {
-    const { totalRecords } = (0, react_1.useContext)(context_provider_1.FeatureContext);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-2" }, { children: `Total ${totalRecords} records` })));
+    const { totalRecords, recordDetailModelText } = (0, react_1.useContext)(context_provider_1.FeatureContext);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-2" }, { children: (recordDetailModelText === null || recordDetailModelText === void 0 ? void 0 : recordDetailModelText.totalRecordHeader) ? `${recordDetailModelText.totalRecordHeader}  ${totalRecords}  ` : `Total ${totalRecords} records` })));
 }
 exports.default = RecordDetail;

package/dist/components/ag-grid/context-provider.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const helper_1 = require("./helper");
 exports.FeatureContext = (0, react_1.createContext)(null);
 function MyProvider({ children, value }) {
-    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate } = value;
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions } = value;
     // States for sort
     const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
     const [sortValue, setSortValue] = (0, react_1.useState)({});
@@ -20,7 +20,7 @@ function MyProvider({ children, value }) {
         // Returns based on length of filterQueries present
         return length === 0 ? [0] : Array.from({ length }, (_, index) => index);
     });
-    const conditionTypes = [{ id: 1, label: "AND" }, { id: 2, label: "OR" }];
+    const conditionTypes = filterConditions ? filterConditions : [{ id: 1, label: "AND" }, { id: 2, label: "OR" }];
     const [conditionType, setConditionType] = (0, react_1.useState)((defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.logicalOperator) ? conditionTypes.find((item) => item.id === (defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.logicalOperator)) :
         conditionTypes[0]);
     const [globalFilters, setGlobalFilters] = (0, react_1.useState)([]);
@@ -71,7 +71,11 @@ function MyProvider({ children, value }) {
             setViewName,
             viewName,
             createView,
-            enableViewCreate
+            enableViewCreate,
+            filterModelText,
+            sortModelText,
+            recordDetailModelText,
+            sortOptions
         } }, { children: children })));
 }
 exports.default = MyProvider;

package/dist/components/ag-grid/parent-for-grid.js

@@ -12,7 +12,7 @@ const constants_1 = require("./constants");
 const loading_component_1 = tslib_1.__importDefault(require("./loading-component"));
 const helper_1 = require("./helper");
 function ParentForGrid(props) {
-    var _a;
+    var _a, _b, _c, _d;
     const [gridData, setGridData] = (0, react_1.useState)({
         rowData: [],
         columnData: props === null || props === void 0 ? void 0 : props.columnData,
@@ -173,11 +173,11 @@ function ParentForGrid(props) {
         else if (props.rowModelType === constants_1.ROWMODELTYPE.INFINITE) {
             const dataSource = {
                 getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                    var _b;
+                    var _e;
                     const startRow = params.startRow;
                     const endRow = params.endRow;
                     const result = yield getData(startRow, endRow, currentFeatures);
-                    if (((_b = result === null || result === void 0 ? void 0 : result.rowData) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    if (((_e = result === null || result === void 0 ? void 0 : result.rowData) === null || _e === void 0 ? void 0 : _e.length) > 0) {
                         gridRef.current.api.hideOverlay();
                         params.successCallback(result === null || result === void 0 ? void 0 : result.rowData, result === null || result === void 0 ? void 0 : result.actualEndRow);
                     }
@@ -267,7 +267,12 @@ function ParentForGrid(props) {
                                 initialFeature,
                                 defaultFilters,
                                 createView: props === null || props === void 0 ? void 0 : props.createView,
-                                enableViewCreate: (_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.enableViewCreate
+                                enableViewCreate: (_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.enableViewCreate,
+                                filterModelText: (_b = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _b === void 0 ? void 0 : _b.filterModelText,
+                                sortModelText: (_c = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _c === void 0 ? void 0 : _c.sortModelText,
+                                recordDetailModelText: (_d = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _d === void 0 ? void 0 : _d.recordDetailModelText,
+                                sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions) ? props.sortOptions : constants_1.COLUMN_SORT_OPTIONS,
+                                filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions
                             } }, { children: (0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props }) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady, gridRef: gridRef })] }) })) }) }));
 }
 exports.default = ParentForGrid;

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

@@ -9,12 +9,17 @@ const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 // import { InputText } from "primereact/inputtext";
 const checkbox_1 = require("primereact/checkbox");
-const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }) => {
+const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle,
+// onShow,
+// onHide,
+// onFocus,
+ }) => {
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     const optionsMenuRef = (0, react_1.useRef)();
     const [checked, setChecked] = (0, react_1.useState)(false);
     const onSelectOption = (e) => {
+        setChecked(e.value.length === listItems.length);
         setSelectedItems(e.value);
         onChange(e);
     };
@@ -59,25 +64,37 @@ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, head
     //   e.preventDefault()
     // }
     const onSelectAllItem = (e) => {
-        setChecked(e.checked);
+        e.stopPropagation();
+        setChecked(!checked);
         if (onSelectAll)
-            onSelectAll(e.checked);
-        e.preventDefault();
+            onSelectAll(!checked);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, className: menuClassName ? menuClassName : "", ref: optionsMenuRef, model: [
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu
+                // onShow={(e: any) => onShow && onShow(e)}
+                // onHide={(e: any) => onHide && onHide(e)}
+                // onFocus={(e: any) => onFocus && onFocus(e)}
+                // popup
+                , { 
+                    // onShow={(e: any) => onShow && onShow(e)}
+                    // onHide={(e: any) => onHide && onHide(e)}
+                    // onFocus={(e: any) => onFocus && onFocus(e)}
+                    // popup
+                    popup: true, ref: optionsMenuRef, id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", 
+                    // ref={optionsMenuRef}
+                    model: [
                         {
                             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() }), selectAll && ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", 
+                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", onClick: (e) => onSelectAllItem(e), 
                                         // onClick={() => {
                                         //   if (onSelectAll) onSelectAll();
                                         // }}
-                                        className: "text-primary-400 bg-white pt-0 px-2 flex gap-2 align-items-center w-full font-semibold absolute z-4  text-left focus:shadow-none", style: { top: "10em" }, link: true }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: e => onSelectAllItem(e) }), " ", (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }))), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { 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: `${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && " mt-8 pt-2"}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName
+                                        className: "text-primary-400 bg-white pt-0 px-2 flex gap-2 align-items-center w-full font-semibold absolute z-4  text-left focus:shadow-none", style: { top: "10em" }, link: true }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked }), " ", (0, jsx_runtime_1.jsx)("span", { children: checked ? "Select All" : "Unselect All" })] })), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { 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: `${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && " mt-8 pt-2"}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName
                                             ? listBoxclassName
                                             : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max  ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto mx-2`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems &&
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max  ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto mx-2`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true }) })), selectedItems &&
                             (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                 var _a, _b;
                                 return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName

package/dist/pages/aggrid/AgGrid.js

@@ -0,0 +1,257 @@
+"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 parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const axios_1 = tslib_1.__importDefault(require("axios"));
+const Types_1 = require("../../components/ag-grid/Types");
+// import IdCell from "./id-cell";
+const constants_1 = require("../../components/ag-grid/constants");
+// import { Dropdown } from "primereact/dropdown";
+const custom_dropdown_1 = tslib_1.__importDefault(require("../../components/ag-grid/custom-dropdown"));
+const BulkAction_1 = tslib_1.__importDefault(require("./BulkAction"));
+// import { ATTRIBUTEDATATYPES } from "../../components/ag-grid/constants";
+const AgGridPage = () => {
+    const [rowData, setRowData] = (0, react_1.useState)([]);
+    const [shouldRefetch, setShouldRefetch] = (0, react_1.useState)(false);
+    const [defaultFilters, setDefaultFilters] = (0, react_1.useState)([]);
+    const deleteComponent = () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "bg-white", onClick: () => setShouldRefetch(true) }, { children: "Delete" })) });
+    };
+    const noRowsOverlayComponent = () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { children: "No Rows, message from products" }) });
+    };
+    const [columnDefs] = (0, react_1.useState)([
+        {
+            pinned: "left",
+            lockPosition: "left",
+            cellClass: "lock-pinned",
+            suppressMovable: true,
+            enableHeaderCheckbox: true,
+            enableChildCheckbox: true,
+            id: "101",
+            headerName: "ID",
+            field: "id",
+            isSortable: false,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: true,
+            isFilterable: false,
+            cellStyle: { borderRight: "1px solid #ccc" },
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return {
+                        component: custom_dropdown_1.default,
+                        params: {
+                            style: { color: "#5577CC" },
+                        },
+                    };
+                }
+                else {
+                    return undefined;
+                }
+            },
+        },
+        {
+            lockPinned: true,
+            id: "102",
+            headerName: "Title",
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return {
+                        component: custom_dropdown_1.default,
+                        params: {
+                            style: { color: "#5577CC" },
+                        },
+                    };
+                }
+                else {
+                    return undefined;
+                }
+            },
+            field: "name",
+            isSortable: true,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: false,
+            isFilterable: false,
+        },
+        {
+            lockPinned: true,
+            id: "103",
+            headerName: "Body",
+            field: "body",
+            isSortable: true,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: false,
+            isFilterable: true,
+        },
+        {
+            lockPinned: true,
+            id: "103",
+            headerName: "Status",
+            field: "status",
+            isSortable: true,
+            columnType: "single",
+            options: [
+                { id: constants_1.STATUSLIST.DRAFT, label: "Draft", value: constants_1.STATUSLIST.DRAFT },
+                { id: constants_1.STATUSLIST.ACTIVE, label: "Active", value: constants_1.STATUSLIST.ACTIVE },
+                {
+                    id: constants_1.STATUSLIST.INACTIVE,
+                    label: "Inactive",
+                    value: constants_1.STATUSLIST.INACTIVE,
+                },
+            ],
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.BOOLEAN,
+            editable: false,
+            isFilterable: true,
+        },
+        {
+            pinned: "right",
+            lockPosition: "rigth",
+            cellClass: "lock-pinned",
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return () => null;
+                }
+                else {
+                    return { component: deleteComponent };
+                }
+            },
+        },
+    ]);
+    // const [selectedCity, setSelectedCity] = useState(null);
+    const pinnedTopRowData = (0, react_1.useMemo)(() => {
+        return [
+            { id: "1",
+                name: "nitesh",
+                body: "working out"
+            }
+        ];
+    }, []);
+    // Remove items from - button
+    const removeItem = (checkboxSelectionDetails) => {
+        const unSelectedData = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.excludedRecords;
+        const selectedData = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.includedRecords;
+        const isIternminite = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.isIndeterminate;
+        console.log(checkboxSelectionDetails, 'coming in remove item products');
+        let updatedRowData = [];
+        if (isIternminite) {
+            updatedRowData = unSelectedData;
+        }
+        else if ((selectedData === null || selectedData === void 0 ? void 0 : selectedData.length) && !(isIternminite)) {
+            const childIds = new Set(selectedData === null || selectedData === void 0 ? void 0 : selectedData.map(child => child.id));
+            updatedRowData = rowData.filter(parent => !childIds.has(parent.id));
+        }
+        console.log(updatedRowData, 'result data from remove items in products');
+        return updatedRowData;
+    };
+    const getCheckedRows = (checkedRows) => {
+        console.log(checkedRows, 'checked rows in products');
+    };
+    const getRowData = (startRow, endRow, featureDetails) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(featureDetails, 'feature details in page for filter queries');
+        const features = featureDetails;
+        // const conditionToRemoveItem = features.checkBoxSelection.allBoxChecked || features.checkBoxSelection.isIndeterminate || features.checkBoxSelection.includedRecords.length || features.checkBoxSelection.excludedRecords.length
+        if (featureDetails.isRemoveClicked) {
+            const result = removeItem(features.checkBoxSelection);
+            const output = {
+                totalRecords: result.length,
+                rowData: result
+            };
+            return yield output;
+        }
+        let totalRecords = 500;
+        const serverSideUrl = `https://jsonplaceholder.typicode.com/comments?_start=${startRow}&_end=${endRow}`;
+        const clientSideUrl = "https://jsonplaceholder.typicode.com/comments?_limit=20";
+        console.log(serverSideUrl, clientSideUrl);
+        const result = yield axios_1.default.get(serverSideUrl);
+        result.data[2].isSelected = true;
+        const outputData = result === null || result === void 0 ? void 0 : result.data.map((item) => {
+            item.status = "Active";
+            return item;
+        });
+        let output = {
+            totalRecords: totalRecords,
+            rowData: outputData
+        };
+        if (featureDetails.searchedText === "data") {
+            output = {
+                totalRecords: 0,
+                rowData: []
+            };
+        }
+        setRowData(result.data);
+        setShouldRefetch(false);
+        return output;
+    });
+    const style = {
+        height: "100vh",
+        width: "100%"
+    };
+    const conditionsToDisplay = {
+        displayFilter: true,
+        displaySort: true,
+        displaySearch: true,
+        displayRefresh: true,
+        displayRemoveItems: true,
+        displayBulkAction: true,
+        enableViewCreate: true
+    };
+    console.log(pinnedTopRowData, defaultFilters);
+    const createView = (viewDetails) => {
+        console.log(viewDetails, 'parsed value for create view');
+    };
+    const selectFilter = () => {
+        const defaultFilters = [
+            {
+                columnName: {
+                    name: "Body",
+                    code: "body",
+                    dataType: "string",
+                },
+                condition: 5,
+                value: "data",
+                id: "0.028544677566825438",
+                isActive: true,
+                logicalOperator: 1, // number
+            },
+        ];
+        setShouldRefetch(true);
+        setDefaultFilters(defaultFilters);
+    };
+    const dynamicText = {
+        filterModelText: {
+            header: "Filter",
+            subHeader: "Streamline Your Search With Filters",
+            resetFilterAction: "Reset Filter",
+            createViewInputPlaceHolder: "Enter",
+            createViewAction: "Create View",
+            applyAction: "Apply",
+            elementOnePlaceHolder: "Select",
+            elementTwoPlaceHolder: "Select",
+            elementThreePlaceHolder_Input: "Enter Text",
+            elementThreePlaceHolder_Input_Number: "Enter Number",
+            elementThreePlaceHolder_DropDown: "Select",
+            elementThreePlaceHolder_MultiSelect: "Select",
+            elementThreePlaceHolder_Calender: "Select Date",
+            onSelectedFilter: "Selected"
+        },
+        sortModelText: {
+            header: "Column Sorting",
+            clearAction: "Clear",
+            applyAction: "Apply",
+            onSelectedSort: "Selected"
+        },
+        recordDetailModelText: {
+            totalRecordHeader: "Total Records"
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: selectFilter }, { children: "Select Filter" })), (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { columnData: columnDefs, style: style, getRowData: getRowData, conditionsToDisplay: conditionsToDisplay, rowModelType: constants_1.ROWMODELTYPE.INFINITE, 
+                // pinnedTopRowData={pinnedTopRowData}
+                bulkActionComponent: BulkAction_1.default, getCheckedRows: getCheckedRows, shouldRefetch: shouldRefetch, noRowsOverlayComponent: noRowsOverlayComponent, defaultFilters: defaultFilters, createView: createView, dynamicText: dynamicText, sortOptions: constants_1.COLUMN_SORT_OPTIONS, filterConditions: [{ id: 1, label: "AND" }, { id: 2, label: "OR" }] })] }));
+};
+exports.default = AgGridPage;

package/dist/pages/aggrid/BulkAction.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function BulkAction() {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "Bulk Action " }));
+}
+exports.default = BulkAction;