@solidstarters/solid-core-ui 1.1.210 → 1.1.212

package/dist/components/common/SolidExport.js

@@ -1,49 +1,4 @@
 "use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormik } from "formik";
 import './solid-export.css';
@@ -55,70 +10,63 @@ import { Dropdown } from "primereact/dropdown";
 import { Dialog } from "primereact/dialog";
 import { InputText } from "primereact/inputtext";
 import { useCreateExportTemplateMutation, useDeleteExportTemplateMutation, useGetExportTemplatesQuery } from "../../redux/api/exportTemplateApi";
-import { downloadFileWithProgress } from "../../helpers/downloadFileWithProgress";
+import { downloadFileWithProgress } from '../../helpers/downloadFileWithProgress';
 import { DownloadProgressToast } from "./DownloadProgressToast";
 import { Checkbox } from "primereact/checkbox";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
-export var SolidExport = function (_a) {
-    var listViewMetaData = _a.listViewMetaData, filters = _a.filters;
-    var toast = useRef(null);
-    var entityApi = createSolidEntityApi("userViewMetadata");
-    var useUpsertSolidEntityMutation = entityApi.useUpsertSolidEntityMutation;
-    var upsertUserView = useUpsertSolidEntityMutation()[0];
-    if (!(listViewMetaData === null || listViewMetaData === void 0 ? void 0 : listViewMetaData.data))
+export const SolidExport = ({ listViewMetaData, filters }) => {
+    const toast = useRef(null);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+    if (!listViewMetaData?.data)
         return null;
-    var solidView = listViewMetaData.data.solidView;
-    var solidFieldsMetadata = listViewMetaData.data.solidFieldsMetadata;
+    const solidView = listViewMetaData.data.solidView;
+    const solidFieldsMetadata = listViewMetaData.data.solidFieldsMetadata;
     if (!solidView || !solidFieldsMetadata)
         return null;
-    var checkedFieldNames = new Set(solidView.layout.children.map(function (col) { return col.attrs.name; }));
+    const checkedFieldNames = new Set(solidView.layout.children.map((col) => col.attrs.name));
     // const allColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(
     //   ([key, field]) => ({
     //     name: field.displayName,
     //     key,
     //   })
     // );
-    var excludedTypes = new Set(['mediaSingle', 'mediaMultiple']);
-    var allColumns = Object.entries(solidFieldsMetadata)
-        .filter(function (_a) {
-        var field = _a[1];
-        return !excludedTypes.has(field.type);
-    })
-        .map(function (_a) {
-        var key = _a[0], field = _a[1];
-        return ({
-            name: field.displayName,
-            key: key,
-        });
-    });
-    var createExportTemplate = useCreateExportTemplateMutation()[0];
-    var deleteExportTemplate = useDeleteExportTemplateMutation()[0];
-    var templatesData = useGetExportTemplatesQuery({}).data;
-    var formik = useFormik({
+    const excludedTypes = new Set(['mediaSingle', 'mediaMultiple']);
+    const allColumns = Object.entries(solidFieldsMetadata)
+        .filter(([, field]) => !excludedTypes.has(field.type))
+        .map(([key, field]) => ({
+        name: field.displayName,
+        key,
+    }));
+    const [createExportTemplate] = useCreateExportTemplateMutation();
+    const [deleteExportTemplate] = useDeleteExportTemplateMutation();
+    const { data: templatesData } = useGetExportTemplatesQuery({});
+    const formik = useFormik({
         initialValues: {
-            selectedColumns: allColumns.filter(function (col) { return checkedFieldNames.has(col.key); }),
+            selectedColumns: allColumns.filter((col) => checkedFieldNames.has(col.key)),
         },
-        onSubmit: function (values) {
+        onSubmit: (values) => {
             // console.log("Selected columns:", values.selectedColumns);
         }
     });
-    var selectedColumns = formik.values.selectedColumns;
-    var availableColumns = allColumns.filter(function (col) { return !selectedColumns.some(function (selected) { return selected.key === col.key; }); });
-    var moveToSelected = function (col) {
-        formik.setFieldValue("selectedColumns", __spreadArray(__spreadArray([], selectedColumns, true), [col], false));
+    const { selectedColumns } = formik.values;
+    const availableColumns = allColumns.filter((col) => !selectedColumns.some((selected) => selected.key === col.key));
+    const moveToSelected = (col) => {
+        formik.setFieldValue("selectedColumns", [...selectedColumns, col]);
     };
-    var moveToAvailable = function (col) {
-        formik.setFieldValue("selectedColumns", selectedColumns.filter(function (c) { return c.key !== col.key; }));
+    const moveToAvailable = (col) => {
+        formik.setFieldValue("selectedColumns", selectedColumns.filter((c) => c.key !== col.key));
     };
-    var _b = useState(null), selectedTemplate = _b[0], setSelectedTemplate = _b[1];
-    var _c = useState({
+    const [selectedTemplate, setSelectedTemplate] = useState(null);
+    const [selectedFormat, setSelectedFormat] = useState({
         name: "CSV",
         code: "csv",
         icon: (_jsx("svg", { fill: "#000000", width: "16", height: "16", viewBox: "0 0 318.188 318.188", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { children: [_jsx("rect", { x: "182.882", y: "155.008", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "132.689", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "88.053", width: "33.713", height: "15" }), _jsx("rect", { x: "182.882", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "101.592", y: "155.008", width: "33.713", height: "15" }), _jsx("polygon", { points: "112.09,123.663 112.09,123.662 118.286,113.621 124.548,123.662 134.588,123.662 123.647,107.909 133.82,91.54 123.911,91.54 118.33,101.472 112.53,91.54 102.906,91.54 112.925,107.228 102.269,123.663" }), _jsx("path", { d: "M201.02,249.514c-0.339,1.27-0.73,3.015-1.174,5.236c-0.445,2.222-0.741,4.073-0.889,5.555 c-0.127-2.053-0.847-5.691-2.158-10.918l-6.316-23.519h-14.092l15.139,46.401h14.759l15.202-46.401h-14.027L201.02,249.514z" }), _jsx("rect", { x: "142.457", y: "110.371", width: "33.713", height: "15" }), _jsx("rect", { x: "142.457", y: "88.053", width: "33.713", height: "15" }), _jsx("path", { d: "M283.149,52.723L232.624,2.197C231.218,0.79,229.311,0,227.321,0H40.342c-4.142,0-7.5,3.358-7.5,7.5v303.188 c0,4.142,3.358,7.5,7.5,7.5h237.504c4.142,0,7.5-3.358,7.5-7.5V58.025C285.346,56.036,284.556,54.129,283.149,52.723z M234.821,25.606l24.918,24.919h-24.918V25.606z M47.842,15h171.979v10.263H47.842V15z M47.842,303.188V40.263h171.979v17.763 c0,4.143,3.358,7.5,7.5,7.5h43.024v237.662H47.842z" }), _jsx("rect", { x: "142.457", y: "132.689", width: "33.713", height: "15" }), _jsx("path", { d: "M122.372,235.484c1.969,0,3.809,0.275,5.523,0.826c1.713,0.55,3.428,1.227,5.141,2.031l3.841-9.871 c-4.57-2.18-9.362-3.27-14.378-3.27c-4.591,0-8.585,0.98-11.98,2.937c-3.396,1.957-5.999,4.755-7.808,8.395 c-1.81,3.64-2.714,7.86-2.714,12.663c0,7.682,1.867,13.553,5.602,17.615c3.734,4.063,9.104,6.094,16.107,6.094 c4.888,0,9.268-0.857,13.14-2.57v-10.602c-1.947,0.805-3.883,1.492-5.808,2.063c-1.926,0.571-3.915,0.857-5.967,0.857 c-6.793,0-10.188-4.464-10.188-13.393c0-4.295,0.836-7.665,2.507-10.109C117.062,236.707,119.39,235.484,122.372,235.484z" }), _jsx("path", { d: "M163.57,244.594c-4.169-1.904-6.724-3.216-7.665-3.936c-0.942-0.719-1.412-1.533-1.412-2.443 c-0.002-0.847,0.368-1.556,1.11-2.127c0.74-0.571,1.925-0.857,3.555-0.857c3.152,0,6.897,0.995,11.234,2.984l3.841-9.681 c-4.994-2.222-9.892-3.333-14.694-3.333c-5.439,0-9.713,1.196-12.822,3.587c-3.111,2.392-4.666,5.724-4.666,9.997 c0,2.285,0.365,4.264,1.095,5.936s1.851,3.152,3.364,4.443s3.782,2.624,6.809,3.999c3.343,1.503,5.4,2.497,6.173,2.983 c0.771,0.486,1.333,0.968,1.682,1.444c0.35,0.476,0.524,1.031,0.524,1.666c0,1.016-0.435,1.847-1.302,2.491 c-0.868,0.647-2.233,0.969-4.095,0.969c-2.158,0-4.527-0.344-7.109-1.032c-2.581-0.687-5.067-1.645-7.458-2.872v11.172 c2.264,1.079,4.443,1.836,6.538,2.27c2.095,0.434,4.687,0.65,7.775,0.65c3.703,0,6.93-0.619,9.681-1.856 c2.75-1.238,4.856-2.973,6.315-5.205c1.461-2.232,2.191-4.787,2.191-7.665c0-3.131-0.777-5.729-2.333-7.792 C170.346,248.323,167.569,246.393,163.57,244.594z" }), _jsx("rect", { x: "142.457", y: "155.008", width: "33.713", height: "15" })] }) }) }) })),
-    }), selectedFormat = _c[0], setSelectedFormat = _c[1];
-    var _d = useState([]), templateOptions = _d[0], setTemplateOptions = _d[1];
+    });
+    const [templateOptions, setTemplateOptions] = useState([]);
     //loading hardcode format
-    var _e = useState([
+    const [formatOptions, setFormatOptions] = useState([
         {
             name: "CSV",
             code: "csv",
@@ -129,142 +77,116 @@ export var SolidExport = function (_a) {
             code: "excel",
             icon: (_jsx("svg", { version: "1.1", id: "Layer_1", x: "0px", y: "0px", fill: "#000000", viewBox: "0 0 512 512", width: "16", height: "16", children: _jsx("g", { children: _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { d: "M447.168,134.56c-0.535-1.288-1.318-2.459-2.304-3.445l-128-128c-2.003-1.988-4.709-3.107-7.531-3.115H74.667\n              C68.776,0,64,4.776,64,10.667v490.667C64,507.224,68.776,512,74.667,512h362.667c5.891,0,10.667-4.776,10.667-10.667V138.667\n              C447.997,137.256,447.714,135.86,447.168,134.56z M320,36.416L411.584,128H320V36.416z M426.667,490.667H85.333V21.333h213.333\n              v117.333c0,5.891,4.776,10.667,10.667,10.667h117.333V490.667z" }), _jsx("path", { d: "M128,181.333v256c0,5.891,4.776,10.667,10.667,10.667h234.667c5.891,0,10.667-4.776,10.667-10.667v-256\n              c0-5.891-4.776-10.667-10.667-10.667H138.667C132.776,170.667,128,175.442,128,181.333z M320,192h42.667v42.667H320V192z\n              M320,256h42.667v42.667H320V256z M320,320h42.667v42.667H320V320z M320,384h42.667v42.667H320V384z M213.333,192h85.333v42.667\n              h-85.333V192z M213.333,256h85.333v42.667h-85.333V256z M213.333,320h85.333v42.667h-85.333V320z M213.333,384h85.333v42.667\n              h-85.333V384z M149.333,192H192v42.667h-42.667V192z M149.333,256H192v42.667h-42.667V256z M149.333,320H192v42.667h-42.667V320z\n              M149.333,384H192v42.667h-42.667V384z" })] }) }) }) })),
         },
-    ]), formatOptions = _e[0], setFormatOptions = _e[1];
-    var _f = useState(false), isDialogVisible = _f[0], setIsDialogVisible = _f[1];
-    var _g = useState(""), newTemplateName = _g[0], setNewTemplateName = _g[1];
-    var steps = [
+    ]);
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const [newTemplateName, setNewTemplateName] = useState("");
+    const steps = [
         { label: 'Export', value: 'export' },
         { label: 'Summary', value: 'summary' },
     ];
-    var _h = useState('export'), currentStepValue = _h[0], setCurrentStepValue = _h[1];
-    useEffect(function () {
-        if ((templatesData === null || templatesData === void 0 ? void 0 : templatesData.records) && templatesData.records.length > 0) {
-            var templates = templatesData.records.map(function (template) { return ({
+    const [currentStepValue, setCurrentStepValue] = useState('export');
+    useEffect(() => {
+        if (templatesData?.records && templatesData.records.length > 0) {
+            const templates = templatesData.records.map((template) => ({
                 name: template.templateName,
                 code: template.id,
                 fields: template.fields,
                 templateFormat: template.templateFormat
-            }); });
-            setTemplateOptions(__spreadArray([], templates, true));
+            }));
+            setTemplateOptions([...templates]);
         }
     }, [templatesData]);
-    var handleAddTemplate = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var tname, customSelectedFields, fieldsData, exportData, response, newAddedTemplate_1, err_1;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    setIsDialogVisible(false);
-                    tname = newTemplateName.trim();
-                    if (!(((selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || tname) && selectedFormat)) return [3 /*break*/, 5];
-                    setNewTemplateName("");
-                    setIsDialogVisible(false);
-                    customSelectedFields = selectedColumns.map(function (col) { return col.key; });
-                    fieldsData = JSON.stringify(customSelectedFields);
-                    exportData = {
-                        templateName: tname || (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || "",
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
-                        notifyOnEmail: true,
-                        fields: fieldsData,
-                        modelMetadataId: (_a = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _a === void 0 ? void 0 : _a.id,
-                    };
-                    _d.label = 1;
-                case 1:
-                    _d.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, createExportTemplate(exportData).unwrap()];
-                case 2:
-                    response = _d.sent();
-                    (_b = toast === null || toast === void 0 ? void 0 : toast.current) === null || _b === void 0 ? void 0 : _b.show({
-                        severity: "success",
-                        summary: "Template Added",
-                        detail: "Template Saved",
-                    });
-                    newAddedTemplate_1 = {
-                        name: (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || "",
-                        code: response.data.id,
-                        fields: customSelectedFields,
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
-                    };
-                    setTemplateOptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newAddedTemplate_1], false); });
-                    // ✅ Select the newly added template
-                    setSelectedTemplate(newAddedTemplate_1);
-                    // ✅ Re-assign the selected format from options list
-                    setSelectedFormat(formatOptions.find(function (format) { return format.code === (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code); }) || null);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_1 = _d.sent();
-                    console.error(ERROR_MESSAGES.TEMPLATE_FAILED, err_1);
-                    return [3 /*break*/, 4];
-                case 4: return [3 /*break*/, 6];
-                case 5:
-                    (_c = toast === null || toast === void 0 ? void 0 : toast.current) === null || _c === void 0 ? void 0 : _c.show({
-                        severity: "error",
-                        summary: ERROR_MESSAGES.TEMPLATE_FAILED,
-                        detail: ERROR_MESSAGES.TEMPLATE_FAILED,
-                    });
-                    _d.label = 6;
-                case 6: return [2 /*return*/];
+    const handleAddTemplate = async () => {
+        setIsDialogVisible(false);
+        const tname = newTemplateName.trim();
+        if ((selectedTemplate?.name || tname) && selectedFormat) {
+            setNewTemplateName("");
+            setIsDialogVisible(false);
+            let customSelectedFields = selectedColumns.map((col) => col.key);
+            const fieldsData = JSON.stringify(customSelectedFields);
+            const exportData = {
+                templateName: tname || selectedTemplate?.name || "",
+                templateFormat: selectedFormat?.code || "",
+                notifyOnEmail: true,
+                fields: fieldsData,
+                modelMetadataId: solidView?.model?.id,
+            };
+            try {
+                const response = await createExportTemplate(exportData).unwrap();
+                toast?.current?.show({
+                    severity: "success",
+                    summary: "Template Added",
+                    detail: "Template Saved",
+                });
+                let newAddedTemplate = {
+                    name: selectedTemplate?.name || "",
+                    code: response.data.id,
+                    fields: customSelectedFields,
+                    templateFormat: selectedFormat?.code || "",
+                };
+                setTemplateOptions((prev) => [...prev, newAddedTemplate]);
+                // ✅ Select the newly added template
+                setSelectedTemplate(newAddedTemplate);
+                // ✅ Re-assign the selected format from options list
+                setSelectedFormat(formatOptions.find((format) => format.code === selectedFormat?.code) || null);
             }
-        });
-    }); };
-    var panelFooterTemplate = function () { return (_jsx("div", { className: "p-1", children: _jsx(Button, { label: "Add New Template", icon: "pi pi-plus", className: "p-button", onClick: function () { return setIsDialogVisible(true); } }) })); };
-    var _j = useState(0), progress = _j[0], setProgress = _j[1];
-    var _k = useState(false), showProgress = _k[0], setShowProgress = _k[1];
-    var _l = useState(""), message = _l[0], setMessage = _l[1];
-    var _m = useState(""), messageDescription = _m[0], setMessageDescription = _m[1];
-    var _o = useState("In Progress"), status = _o[0], setStatus = _o[1];
-    var _p = useState(false), checkApplyFilter = _p[0], setCheckedApplyFilter = _p[1];
-    var downloadHandlers = {
-        onProgress: function (value) {
+            catch (err) {
+                console.error(ERROR_MESSAGES.TEMPLATE_FAILED, err);
+            }
+        }
+        else {
+            toast?.current?.show({
+                severity: "error",
+                summary: ERROR_MESSAGES.TEMPLATE_FAILED,
+                detail: ERROR_MESSAGES.TEMPLATE_FAILED,
+            });
+        }
+    };
+    const panelFooterTemplate = () => (_jsx("div", { className: "p-1", children: _jsx(Button, { label: "Add New Template", icon: "pi pi-plus", className: "p-button", onClick: () => setIsDialogVisible(true) }) }));
+    const [progress, setProgress] = useState(0);
+    const [showProgress, setShowProgress] = useState(false);
+    const [message, setMessage] = useState("");
+    const [messageDescription, setMessageDescription] = useState("");
+    const [status, setStatus] = useState("In Progress");
+    const [checkApplyFilter, setCheckedApplyFilter] = useState(false);
+    const downloadHandlers = {
+        onProgress: (value) => {
             setProgress(value);
         },
-        onStatusChange: function (statusType, msg, submsg) {
+        onStatusChange: (statusType, msg, submsg) => {
             setStatus(statusType);
             setMessage(msg);
             setMessageDescription(submsg);
             setShowProgress(true);
         },
     };
-    var handleDownload = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var id, tname, customSelectedFields, fieldsData, exportData, err_2;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    id = (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code) ? selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.code : null;
-                    tname = (newTemplateName === null || newTemplateName === void 0 ? void 0 : newTemplateName.trim()) || (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name) || null;
-                    customSelectedFields = selectedColumns.map(function (col) { return col.key; });
-                    fieldsData = JSON.stringify(customSelectedFields);
-                    exportData = {
-                        id: id,
-                        templateName: tname,
-                        templateFormat: (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) || "",
-                        notifyOnEmail: true,
-                        fields: fieldsData,
-                        modelMetadataId: (_a = solidView === null || solidView === void 0 ? void 0 : solidView.model) === null || _a === void 0 ? void 0 : _a.id,
-                    };
-                    // setNewTemplateName("");
-                    setIsDialogVisible(false);
-                    _b.label = 1;
-                case 1:
-                    _b.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, downloadFileWithProgress("/export-template/startExport/sync", downloadHandlers, filters, checkApplyFilter, exportData)];
-                case 2:
-                    _b.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_2 = _b.sent();
-                    console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, err_2);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleTemplateChange = function (e) {
-        var selected = templateOptions.find(function (option) { return option.code === e.value.code; });
+    const handleDownload = async () => {
+        const id = selectedTemplate?.code ? selectedTemplate?.code : null;
+        const tname = newTemplateName?.trim() || selectedTemplate?.name || null;
+        let customSelectedFields = selectedColumns.map((col) => col.key);
+        const fieldsData = JSON.stringify(customSelectedFields);
+        const exportData = {
+            id: id,
+            templateName: tname,
+            templateFormat: selectedFormat?.code || "",
+            notifyOnEmail: true,
+            fields: fieldsData,
+            modelMetadataId: solidView?.model?.id,
+        };
+        // setNewTemplateName("");
+        setIsDialogVisible(false);
+        try {
+            await downloadFileWithProgress(`/export-template/startExport/sync`, downloadHandlers, filters, checkApplyFilter, exportData);
+        }
+        catch (err) {
+            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, err);
+        }
+    };
+    const handleTemplateChange = (e) => {
+        const selected = templateOptions.find((option) => option.code === e.value.code);
         setSelectedTemplate(selected || null);
         if (selected) {
-            var fields = [];
+            let fields = [];
             if (typeof selected.fields === "string") {
                 try {
                     fields = JSON.parse(selected.fields);
@@ -276,75 +198,59 @@ export var SolidExport = function (_a) {
             else if (Array.isArray(selected.fields)) {
                 fields = selected.fields;
             }
-            var selectedFields = fields.map(function (field) {
-                var _a;
-                return ({
-                    key: field,
-                    name: ((_a = solidFieldsMetadata[field]) === null || _a === void 0 ? void 0 : _a.displayName) || field,
-                });
-            });
+            const selectedFields = fields.map((field) => ({
+                key: field,
+                name: solidFieldsMetadata[field]?.displayName || field,
+            }));
             formik.setFieldValue("selectedColumns", selectedFields);
             setSelectedTemplate(selected);
-            var format = formatOptions.find(function (f) { return f.code === selected.templateFormat; });
+            const format = formatOptions.find(f => f.code === selected.templateFormat);
             setSelectedFormat(format || null);
         }
         else {
             setSelectedTemplate(null);
         }
     };
-    var renderSourceItem = function (item) { return (_jsx("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 SolidCustomPicklistItemWrapper SolidCustomPicklistSourceItem", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { onClick: function () { return moveToSelected(item); }, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { opacity: "0.4", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5", fill: "white", stroke: "#D9D9D9" }), _jsx("path", { d: "M7.42857 8.57143H4V7.42857H7.42857V4H8.57143V7.42857H12V8.57143H8.57143V12H7.42857V8.57143Z", fill: "#4B4D52" })] }) }), _jsx("label", { htmlFor: item.key, className: "text-sm font-semibold ml-2", children: item.name })] }) }, item.key)); };
-    var renderTargetItem = function (item) { return (_jsxs("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 pr-2 gap-2 SolidCustomPicklistItemWrapper", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.46672 11.7331C7.46672 12.0997 7.33616 12.4136 7.07505 12.6747C6.81394 12.9359 6.50005 13.0664 6.13338 13.0664C5.76672 13.0664 5.45283 12.9359 5.19172 12.6747C4.9306 12.4136 4.80005 12.0997 4.80005 11.7331C4.80005 11.3664 4.9306 11.0525 5.19172 10.7914C5.45283 10.5303 5.76672 10.3997 6.13338 10.3997C6.50005 10.3997 6.81394 10.5303 7.07505 10.7914C7.33616 11.0525 7.46672 11.3664 7.46672 11.7331ZM7.46672 7.73307C7.46672 8.09974 7.33616 8.41363 7.07505 8.67474C6.81394 8.93585 6.50005 9.06641 6.13338 9.06641C5.76672 9.06641 5.45283 8.93585 5.19172 8.67474C4.9306 8.41363 4.80005 8.09974 4.80005 7.73307C4.80005 7.36641 4.9306 7.05252 5.19172 6.79141C5.45283 6.5303 5.76672 6.39974 6.13338 6.39974C6.50005 6.39974 6.81394 6.5303 7.07505 6.79141C7.33616 7.05252 7.46672 7.36641 7.46672 7.73307ZM7.46672 3.73307C7.46672 4.09974 7.33616 4.41363 7.07505 4.67474C6.81394 4.93585 6.50005 5.06641 6.13338 5.06641C5.76672 5.06641 5.45283 4.93585 5.19172 4.67474C4.9306 4.41363 4.80005 4.09974 4.80005 3.73307C4.80005 3.36641 4.9306 3.05252 5.19172 2.79141C5.45283 2.5303 5.76672 2.39974 6.13338 2.39974C6.50005 2.39974 6.81394 2.5303 7.07505 2.79141C7.33616 3.05252 7.46672 3.36641 7.46672 3.73307Z", fill: "black", "fill-opacity": "0.25" }), _jsx("path", { d: "M11.7333 11.7331C11.7333 12.0997 11.6028 12.4136 11.3417 12.6747C11.0805 12.9359 10.7667 13.0664 10.4 13.0664C10.0333 13.0664 9.71943 12.9359 9.45832 12.6747C9.19721 12.4136 9.06665 12.0997 9.06665 11.7331C9.06665 11.3664 9.19721 11.0525 9.45832 10.7914C9.71943 10.5303 10.0333 10.3997 10.4 10.3997C10.7667 10.3997 11.0805 10.5303 11.3417 10.7914C11.6028 11.0525 11.7333 11.3664 11.7333 11.7331ZM11.7333 7.73307C11.7333 8.09974 11.6028 8.41363 11.3417 8.67474C11.0805 8.93585 10.7667 9.06641 10.4 9.06641C10.0333 9.06641 9.71943 8.93585 9.45832 8.67474C9.19721 8.41363 9.06665 8.09974 9.06665 7.73307C9.06665 7.36641 9.19721 7.05252 9.45832 6.79141C9.71943 6.5303 10.0333 6.39974 10.4 6.39974C10.7667 6.39974 11.0805 6.5303 11.3417 6.79141C11.6028 7.05252 11.7333 7.36641 11.7333 7.73307ZM11.7333 3.73307C11.7333 4.09974 11.6028 4.41363 11.3417 4.67474C11.0805 4.93585 10.7667 5.06641 10.4 5.06641C10.0333 5.06641 9.71943 4.93585 9.45832 4.67474C9.19721 4.41363 9.06665 4.09974 9.06665 3.73307C9.06665 3.36641 9.19721 3.05252 9.45832 2.79141C9.71943 2.5303 10.0333 2.39974 10.4 2.39974C10.7667 2.39974 11.0805 2.5303 11.3417 2.79141C11.6028 3.05252 11.7333 3.36641 11.7333 3.73307Z", fill: "black", "fill-opacity": "0.25" })] }), _jsx("span", { className: "text-sm font-semibold flex-1 ", children: item.name }), _jsxs("svg", { width: "16", height: "16", onClick: function () { return moveToAvailable(item); }, cursor: 'pointer', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "16", height: "16", rx: "8", fill: "#F0F0F0" }), _jsx("path", { d: "M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z", fill: "#4B4D52" })] })] }, item.key)); };
-    var maxVisibleRows = Math.max(availableColumns.length, selectedColumns.length);
-    var renderEmptyRow = function (index) { return (_jsx("div", { className: "SolidCustomPicklistItemWrapper" }, "empty-".concat(index))); };
+    const renderSourceItem = (item) => (_jsx("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 SolidCustomPicklistItemWrapper SolidCustomPicklistSourceItem", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { onClick: () => moveToSelected(item), width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { opacity: "0.4", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5", fill: "white", stroke: "#D9D9D9" }), _jsx("path", { d: "M7.42857 8.57143H4V7.42857H7.42857V4H8.57143V7.42857H12V8.57143H8.57143V12H7.42857V8.57143Z", fill: "#4B4D52" })] }) }), _jsx("label", { htmlFor: item.key, className: "text-sm font-semibold ml-2", children: item.name })] }) }, item.key));
+    const renderTargetItem = (item) => (_jsxs("div", { className: "flex justify-content-start align-items-center border-top-1 w-full p-1 pr-2 gap-2 SolidCustomPicklistItemWrapper", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.46672 11.7331C7.46672 12.0997 7.33616 12.4136 7.07505 12.6747C6.81394 12.9359 6.50005 13.0664 6.13338 13.0664C5.76672 13.0664 5.45283 12.9359 5.19172 12.6747C4.9306 12.4136 4.80005 12.0997 4.80005 11.7331C4.80005 11.3664 4.9306 11.0525 5.19172 10.7914C5.45283 10.5303 5.76672 10.3997 6.13338 10.3997C6.50005 10.3997 6.81394 10.5303 7.07505 10.7914C7.33616 11.0525 7.46672 11.3664 7.46672 11.7331ZM7.46672 7.73307C7.46672 8.09974 7.33616 8.41363 7.07505 8.67474C6.81394 8.93585 6.50005 9.06641 6.13338 9.06641C5.76672 9.06641 5.45283 8.93585 5.19172 8.67474C4.9306 8.41363 4.80005 8.09974 4.80005 7.73307C4.80005 7.36641 4.9306 7.05252 5.19172 6.79141C5.45283 6.5303 5.76672 6.39974 6.13338 6.39974C6.50005 6.39974 6.81394 6.5303 7.07505 6.79141C7.33616 7.05252 7.46672 7.36641 7.46672 7.73307ZM7.46672 3.73307C7.46672 4.09974 7.33616 4.41363 7.07505 4.67474C6.81394 4.93585 6.50005 5.06641 6.13338 5.06641C5.76672 5.06641 5.45283 4.93585 5.19172 4.67474C4.9306 4.41363 4.80005 4.09974 4.80005 3.73307C4.80005 3.36641 4.9306 3.05252 5.19172 2.79141C5.45283 2.5303 5.76672 2.39974 6.13338 2.39974C6.50005 2.39974 6.81394 2.5303 7.07505 2.79141C7.33616 3.05252 7.46672 3.36641 7.46672 3.73307Z", fill: "black", "fill-opacity": "0.25" }), _jsx("path", { d: "M11.7333 11.7331C11.7333 12.0997 11.6028 12.4136 11.3417 12.6747C11.0805 12.9359 10.7667 13.0664 10.4 13.0664C10.0333 13.0664 9.71943 12.9359 9.45832 12.6747C9.19721 12.4136 9.06665 12.0997 9.06665 11.7331C9.06665 11.3664 9.19721 11.0525 9.45832 10.7914C9.71943 10.5303 10.0333 10.3997 10.4 10.3997C10.7667 10.3997 11.0805 10.5303 11.3417 10.7914C11.6028 11.0525 11.7333 11.3664 11.7333 11.7331ZM11.7333 7.73307C11.7333 8.09974 11.6028 8.41363 11.3417 8.67474C11.0805 8.93585 10.7667 9.06641 10.4 9.06641C10.0333 9.06641 9.71943 8.93585 9.45832 8.67474C9.19721 8.41363 9.06665 8.09974 9.06665 7.73307C9.06665 7.36641 9.19721 7.05252 9.45832 6.79141C9.71943 6.5303 10.0333 6.39974 10.4 6.39974C10.7667 6.39974 11.0805 6.5303 11.3417 6.79141C11.6028 7.05252 11.7333 7.36641 11.7333 7.73307ZM11.7333 3.73307C11.7333 4.09974 11.6028 4.41363 11.3417 4.67474C11.0805 4.93585 10.7667 5.06641 10.4 5.06641C10.0333 5.06641 9.71943 4.93585 9.45832 4.67474C9.19721 4.41363 9.06665 4.09974 9.06665 3.73307C9.06665 3.36641 9.19721 3.05252 9.45832 2.79141C9.71943 2.5303 10.0333 2.39974 10.4 2.39974C10.7667 2.39974 11.0805 2.5303 11.3417 2.79141C11.6028 3.05252 11.7333 3.36641 11.7333 3.73307Z", fill: "black", "fill-opacity": "0.25" })] }), _jsx("span", { className: "text-sm font-semibold flex-1 ", children: item.name }), _jsxs("svg", { width: "16", height: "16", onClick: () => moveToAvailable(item), cursor: 'pointer', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "16", height: "16", rx: "8", fill: "#F0F0F0" }), _jsx("path", { d: "M5.6 11L5 10.4L7.4 8L5 5.6L5.6 5L8 7.4L10.4 5L11 5.6L8.6 8L11 10.4L10.4 11L8 8.6L5.6 11Z", fill: "#4B4D52" })] })] }, item.key));
+    const maxVisibleRows = Math.max(availableColumns.length, selectedColumns.length);
+    const renderEmptyRow = (index) => (_jsx("div", { className: "SolidCustomPicklistItemWrapper" }, `empty-${index}`));
     // Dialog footer (Save and Cancel buttons)
-    var dialogFooter = (_jsxs("div", { children: [_jsx(Button, { label: "Save", className: "p-button rounded", onClick: function () { return handleAddTemplate(); }, disabled: !newTemplateName.trim() }), _jsx(Button, { label: "Cancel", className: "ExportCancelButton", onClick: function () {
+    const dialogFooter = (_jsxs("div", { children: [_jsx(Button, { label: "Save", className: "p-button rounded", onClick: () => handleAddTemplate(), disabled: !newTemplateName.trim() }), _jsx(Button, { label: "Cancel", className: "ExportCancelButton", onClick: () => {
                     setNewTemplateName("");
                     setIsDialogVisible(false);
                 } })] }));
-    var handleDeleteTemplate = function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, deleteExportTemplate(id).unwrap()];
-                case 1:
-                    response = _b.sent();
-                    setTemplateOptions(function (prev) { return prev.filter(function (template) { return template.code !== id; }); });
-                    (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                        severity: "success",
-                        summary: "Template Deleted",
-                        detail: "Template Deleted",
-                    });
-                    return [2 /*return*/];
-            }
+    const handleDeleteTemplate = async (id) => {
+        const response = await deleteExportTemplate(id).unwrap();
+        setTemplateOptions((prev) => prev.filter((template) => template.code !== id));
+        toast?.current?.show({
+            severity: "success",
+            summary: "Template Deleted",
+            detail: "Template Deleted",
         });
-    }); };
-    var itemTemplate = function (option) {
-        return (_jsxs("div", { className: "flex align-items-center justify-content-between w-full py-1", children: [_jsx("span", { className: "ExportDropdownText", children: option.name }), _jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 24 24", fill: "none", style: { right: 0 }, className: "ExportDropdownIcon", onClick: function (e) {
+    };
+    const itemTemplate = (option) => {
+        return (_jsxs("div", { className: "flex align-items-center justify-content-between w-full py-1", children: [_jsx("span", { className: "ExportDropdownText", children: option.name }), _jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 24 24", fill: "none", style: { right: 0 }, className: "ExportDropdownIcon", onClick: (e) => {
                         e.stopPropagation(); // Prevent triggering selection
                         handleDeleteTemplate(option.code);
                     }, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z", fill: "#ff3d32" }) })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsx("div", { className: "p-0", children: currentStepValue === 'export' &&
-                    _jsxs(_Fragment, { children: [_jsxs("div", { className: "SolidExportControls mx-2 gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { inputId: "applyFilters", onChange: function (e) { return setCheckedApplyFilter(!!e.checked); }, checked: checkApplyFilter }), _jsx("label", { htmlFor: "applyFilters", className: "ml-2", children: "  Apply Filters" })] }), _jsx(Dropdown, { value: selectedFormat, onChange: function (e) { return setSelectedFormat(e.value); }, options: formatOptions, optionLabel: "name", placeholder: "Format ...", className: "p-dropdown p-outlined", 
+                    _jsxs(_Fragment, { children: [_jsxs("div", { className: "SolidExportControls mx-2 gap-2", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Checkbox, { inputId: "applyFilters", onChange: e => setCheckedApplyFilter(!!e.checked), checked: checkApplyFilter }), _jsx("label", { htmlFor: "applyFilters", className: "ml-2", children: "  Apply Filters" })] }), _jsx(Dropdown, { value: selectedFormat, onChange: (e) => setSelectedFormat(e.value), options: formatOptions, optionLabel: "name", placeholder: "Format ...", className: "p-dropdown p-outlined", 
                                         // 👇 Render icon + text for dropdown list options
-                                        itemTemplate: function (option) {
-                                            var isSelected = (selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.code) === option.code;
-                                            var iconColor = isSelected ? "#722ED1" : "#000000"; // Blue for selected
+                                        itemTemplate: (option) => {
+                                            const isSelected = selectedFormat?.code === option.code;
+                                            const iconColor = isSelected ? "#722ED1" : "#000000"; // Blue for selected
                                             return (_jsxs("div", { className: "flex items-center gap-2 ", children: [React.cloneElement(option.icon, { fill: iconColor }), _jsx("span", { children: option.name })] }));
                                         }, 
                                         // 👇 Render icon + text for selected value display
-                                        valueTemplate: function (option) {
+                                        valueTemplate: (option) => {
                                             if (!option)
                                                 return "Format ...";
                                             return (_jsxs("div", { className: "flex items-center gap-2 h-1rem", children: [React.cloneElement(option.icon, { fill: "#722ED1" }), _jsx("span", { children: option.name })] }));
-                                        } }), _jsx(Dropdown, { value: selectedTemplate, onChange: function (e) { return handleTemplateChange(e); }, options: templateOptions, optionLabel: "name", placeholder: "Template ", className: "p-dropdown hidden md:flex", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }), _jsx(Button, { className: "p-button hidden md:flex", label: "Export", disabled: !selectedFormat, onClick: function () { return handleDownload(); } }), _jsx(Button, { className: "p-button md:hidden", label: "Export", disabled: !selectedFormat, onClick: function () { return handleDownload(); }, size: "small" })] }), _jsx("div", { className: "col-12 sm:col-6 p-0 ", children: _jsx(Dropdown, { value: selectedTemplate, onChange: function (e) { return handleTemplateChange(e); }, options: templateOptions, optionLabel: "name", placeholder: "Template", className: "p-dropdown md:hidden w-full mt-2 p-inputtext-sm", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }) }), _jsxs(Dialog, { header: "Save Export Template", className: "solid-confirm-dialog", visible: isDialogVisible, style: { width: "20rem", right: "0" }, footer: dialogFooter, onHide: function () {
+                                        } }), _jsx(Dropdown, { value: selectedTemplate, onChange: (e) => handleTemplateChange(e), options: templateOptions, optionLabel: "name", placeholder: "Template ", className: "p-dropdown hidden md:flex", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }), _jsx(Button, { className: "p-button hidden md:flex", label: "Export", disabled: !selectedFormat, onClick: () => handleDownload() }), _jsx(Button, { className: "p-button md:hidden", label: "Export", disabled: !selectedFormat, onClick: () => handleDownload(), size: "small" })] }), _jsx("div", { className: "col-12 sm:col-6 p-0 ", children: _jsx(Dropdown, { value: selectedTemplate, onChange: (e) => handleTemplateChange(e), options: templateOptions, optionLabel: "name", placeholder: "Template", className: "p-dropdown md:hidden w-full mt-2 p-inputtext-sm", itemTemplate: itemTemplate, panelFooterTemplate: panelFooterTemplate }) }), _jsxs(Dialog, { header: "Save Export Template", className: "solid-confirm-dialog", visible: isDialogVisible, style: { width: "20rem", right: "0" }, footer: dialogFooter, onHide: () => {
                                     setNewTemplateName("");
                                     setIsDialogVisible(false);
-                                }, children: [_jsx("label", { htmlFor: "templateName", className: "text-color-secondary", children: "Title" }), _jsx(InputText, { id: "templateName", name: "templateName", value: newTemplateName, onChange: function (e) { return setNewTemplateName(e.target.value); }, placeholder: "Enter template name", className: "w-full", autoFocus: true })] }), _jsx("div", { className: "SolidCustomPicklist mt-2", children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold SolidCustomPicklistSourceHeader", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Available Fields" }), _jsxs("div", { children: [availableColumns.map(renderSourceItem), Array.from({ length: maxVisibleRows - availableColumns.length }).map(function (_, i) {
-                                                            return renderEmptyRow(i);
-                                                        })] })] }), _jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Selected Fields" }), _jsxs("div", { children: [selectedColumns.map(renderTargetItem), Array.from({ length: maxVisibleRows - selectedColumns.length }).map(function (_, i) {
-                                                            return renderEmptyRow(i);
-                                                        })] })] })] }) })] }) }), _jsx(DownloadProgressToast, { visible: showProgress, progress: progress, message: message, submessage: messageDescription, status: status, onClose: function () { return setShowProgress(false); } })] }));
+                                }, children: [_jsx("label", { htmlFor: "templateName", className: "text-color-secondary", children: "Title" }), _jsx(InputText, { id: "templateName", name: "templateName", value: newTemplateName, onChange: (e) => setNewTemplateName(e.target.value), placeholder: "Enter template name", className: "w-full", autoFocus: true })] }), _jsx("div", { className: "SolidCustomPicklist mt-2", children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold SolidCustomPicklistSourceHeader", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Available Fields" }), _jsxs("div", { children: [availableColumns.map(renderSourceItem), Array.from({ length: maxVisibleRows - availableColumns.length }).map((_, i) => renderEmptyRow(i))] })] }), _jsxs("div", { className: "w-6", children: [_jsx("div", { className: "text-sm font-semibold", style: { padding: '12px 16px', background: '#F3FAFF' }, children: "Selected Fields" }), _jsxs("div", { children: [selectedColumns.map(renderTargetItem), Array.from({ length: maxVisibleRows - selectedColumns.length }).map((_, i) => renderEmptyRow(i))] })] })] }) })] }) }), _jsx(DownloadProgressToast, { visible: showProgress, progress: progress, message: message, submessage: messageDescription, status: status, onClose: () => setShowProgress(false) })] }));
 };
 //# sourceMappingURL=SolidExport.js.map