@churchillliving/se-ui-toolkit 6.53.187 → 6.53.189

package/bundles/churchillliving-se-ui-toolkit.umd.js

@@ -100,7 +100,7 @@
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
             return Reflect.metadata(metadataKey, metadataValue);
     }
-    function __awaiter$1(thisArg, _arguments, P, generator) {
+    function __awaiter$2(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 {
@@ -606,8 +606,9 @@
             if (baseUrl === void 0) { baseUrl = this.env.baseUrl; }
             return this.http.post("" + baseUrl + endpoint, data, { responseType: 'blob' });
         };
-        RequestService.prototype.get = function (endpoint, data) {
-            return this.http.post("" + this.env.baseUrl + endpoint + this.getCurrentRoute(), data);
+        RequestService.prototype.get = function (endpoint, data, baseUrl) {
+            if (baseUrl === void 0) { baseUrl = this.env.baseUrl; }
+            return this.http.post("" + baseUrl + endpoint + this.getCurrentRoute(), data);
         };
         RequestService.prototype.getRequest = function (endpoint) {
             return this.http.get("" + this.env.baseUrl + endpoint + this.getCurrentRoute());
@@ -720,7 +721,7 @@
         { type: RequestService }
     ]; };
 
-    var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    var __awaiter$1 = (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 {
@@ -794,7 +795,7 @@
             return url;
         };
         HyperlinkService.prototype.addHyperlinks = function (columns) {
-            return __awaiter(this, void 0, void 0, function () {
+            return __awaiter$1(this, void 0, void 0, function () {
                 var linkIds, params;
                 return __generator(this, function (_h) {
                     switch (_h.label) {
@@ -2046,6 +2047,39 @@
             }
         });
     }
+    function draggableDialog(id) {
+        var _a;
+        var dialogHeader = document.getElementsByClassName('p-dialog');
+        (_a = dialogHeader[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('id', "prefix_" + id);
+        var elmnt = document.getElementById("prefix_" + id);
+        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+        var dragMouseDown = function (e) {
+            e = e || window.event;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            document.onmouseup = closeDragElement;
+            document.onmousemove = elementDrag;
+        };
+        var elementDrag = function (e) {
+            e = e || window.event;
+            pos1 = pos3 - e.clientX;
+            pos2 = pos4 - e.clientY;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            elmnt.style.top = (elmnt === null || elmnt === void 0 ? void 0 : elmnt.offsetTop) - pos2 + 'px';
+            elmnt.style.left = (elmnt === null || elmnt === void 0 ? void 0 : elmnt.offsetLeft) - pos1 + 'px';
+        };
+        var closeDragElement = function () {
+            document.onmouseup = null;
+            document.onmousemove = null;
+        };
+        if (document.getElementById(elmnt === null || elmnt === void 0 ? void 0 : elmnt.id)) {
+            document.getElementById(elmnt === null || elmnt === void 0 ? void 0 : elmnt.id).onmousedown = dragMouseDown;
+        }
+        else {
+            elmnt.onmousedown = dragMouseDown;
+        }
+    }
     function calenderMinMaxValue(item, value, index) {
         var validation = 'equal';
         var validDate = new Date(item.validations[index].expression);
@@ -2060,6 +2094,25 @@
     }
     /* #endregion */
 
+    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 GridService = /** @class */ (function () {
         function GridService(datepipe, hyperlinkService, dropdownService, alertService, requestService) {
             this.datepipe = datepipe;
@@ -2113,7 +2166,8 @@
                         filter.value) ||
                     (typeof filter.value === 'boolean' && filter.value !== null) ||
                     filter.type === exports.GridFilterControlType.CALENDAR_RANGE) {
-                    if (filter.type === exports.GridFilterControlType.CALENDAR_RANGE && ((_b = (_a = filter.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.includes('|'))) {
+                    if (filter.type === exports.GridFilterControlType.CALENDAR_RANGE &&
+                        ((_b = (_a = filter.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.includes('|'))) {
                         // add filter for start date
                         globalData.push({
                             field: _this.setGlobalFilterField(filter),
@@ -2211,7 +2265,8 @@
                             item.validations[i].type == exports.EGridValidator.MINLENGTH &&
                             row[item.field].length < item.validations[i].expression) {
                             isValid =
-                                row[item.field] && row[item.field].length > item.validations[i].expression
+                                row[item.field] &&
+                                    row[item.field].length > item.validations[i].expression
                                     ? true
                                     : _this.setErrorMessage(item, item.header + " Minimum " + item.validations[i].expression + " characters");
                             break;
@@ -2220,7 +2275,8 @@
                             item.validations[i].type == exports.EGridValidator.MAXLENGTH &&
                             row[item.field].length > item.validations[i].expression) {
                             isValid =
-                                row[item.field] && row[item.field].length < item.validations[i].expression
+                                row[item.field] &&
+                                    row[item.field].length < item.validations[i].expression
                                     ? true
                                     : _this.setErrorMessage(item, item.header + " Maximum " + item.validations[i].expression + " characters");
                             break;
@@ -2229,11 +2285,15 @@
                             item.validations[i].type == exports.EGridValidator.MINIMUM &&
                             isValid) {
                             if (item.type === exports.EGridColumnType.DATE) {
-                                isValid = minMaxValidDate === 'minimum' ? _this.setErrorMessage(item, "Minimum " + valid + " " + item.validations[i].expression) : true;
+                                isValid =
+                                    minMaxValidDate === 'minimum'
+                                        ? _this.setErrorMessage(item, "Minimum " + valid + " " + item.validations[i].expression)
+                                        : true;
                             }
                             else if (row[item.field] < item.validations[i].expression) {
                                 isValid =
-                                    row[item.field] && row[item.field].length > item.validations[i].expression
+                                    row[item.field] &&
+                                        row[item.field].length > item.validations[i].expression
                                         ? true
                                         : _this.setErrorMessage(item, item.header + " Minimum " + valid + " " + item.validations[i].expression);
                             }
@@ -2242,11 +2302,15 @@
                             item.validations[i].type == exports.EGridValidator.MAXIMUM &&
                             isValid) {
                             if (item.type === exports.EGridColumnType.DATE) {
-                                isValid = minMaxValidDate === 'greater' ? _this.setErrorMessage(item, "Maximum " + valid + " " + item.validations[i].expression) : true;
+                                isValid =
+                                    minMaxValidDate === 'greater'
+                                        ? _this.setErrorMessage(item, "Maximum " + valid + " " + item.validations[i].expression)
+                                        : true;
                             }
                             else if (row[item.field] > item.validations[i].expression) {
                                 isValid =
-                                    row[item.field] && row[item.field].length < item.validations[i].expression
+                                    row[item.field] &&
+                                        row[item.field].length < item.validations[i].expression
                                         ? true
                                         : _this.setErrorMessage(item, item.header + " Maximum " + valid + " " + item.validations[i].expression);
                             }
@@ -2255,7 +2319,8 @@
                             item.validations[i].type == exports.EGridValidator.PATTERN &&
                             !row[item.field].match(item.validations[i].expression)) {
                             isValid =
-                                row[item.field] && row[item.field].match(item.validations[i].expression)
+                                row[item.field] &&
+                                    row[item.field].match(item.validations[i].expression)
                                     ? true
                                     : _this.setErrorMessage(item, "Enter valid " + valid);
                             break;
@@ -2273,7 +2338,8 @@
                             item.validations[i].type == exports.EGridValidator.PHONE &&
                             !((_a = row[item.field]) === null || _a === void 0 ? void 0 : _a.toString().match(/^(?=.*[0-9])[-()0-9\s]+$/))) {
                             isValid =
-                                row[item.field] && ((_b = row[item.field]) === null || _b === void 0 ? void 0 : _b.toString().match(/^(?=.*[0-9])[-()0-9\s]+$/))
+                                row[item.field] &&
+                                    ((_b = row[item.field]) === null || _b === void 0 ? void 0 : _b.toString().match(/^(?=.*[0-9])[-()0-9\s]+$/))
                                     ? true
                                     : _this.setErrorMessage(item, "Enter valid " + valid);
                             break;
@@ -2282,7 +2348,8 @@
                             item.validations[i].type == exports.EGridValidator.DECIMAL &&
                             !((_c = row[item.field]) === null || _c === void 0 ? void 0 : _c.toString().match(/^(0|[-()1-9]\d*)(\.\d+)?$/))) {
                             isValid =
-                                row[item.field] && ((_d = row[item.field]) === null || _d === void 0 ? void 0 : _d.toString().match(/^(0|[1-9]\d*)(\.\d+)?$/))
+                                row[item.field] &&
+                                    ((_d = row[item.field]) === null || _d === void 0 ? void 0 : _d.toString().match(/^(0|[1-9]\d*)(\.\d+)?$/))
                                     ? true
                                     : _this.setErrorMessage(item, "Enter " + item.validations[i].type + " for " + valid);
                             break;
@@ -2465,8 +2532,12 @@
         // add simple grid column without
         GridService.prototype.addColumn = function (columnInfo) {
             if (columnInfo.type === exports.EGridColumnType.DROPDOWN) {
-                columnInfo.optionLabel = columnInfo.optionLabel ? columnInfo.optionLabel : 'label';
-                columnInfo.optionValue = columnInfo.optionValue ? columnInfo.optionValue : 'value';
+                columnInfo.optionLabel = columnInfo.optionLabel
+                    ? columnInfo.optionLabel
+                    : 'label';
+                columnInfo.optionValue = columnInfo.optionValue
+                    ? columnInfo.optionValue
+                    : 'value';
             }
             else if (columnInfo.type === exports.EGridColumnType.DIALOG) {
                 if (!columnInfo.filtering && !columnInfo.filter) {
@@ -2478,6 +2549,8 @@
             }
             var column = {
                 allowSearch: columnInfo.allowSearch,
+                allowAutoCompleteSave: columnInfo.allowAutoCompleteSave,
+                uniqueKey: columnInfo.uniqueKey,
                 field: columnInfo.field,
                 header: columnInfo.header,
                 style: columnInfo.style,
@@ -2533,7 +2606,10 @@
         GridService.prototype.addInputColumn = function (filterColumnInfo, showFilter) {
             if (showFilter === void 0) { showFilter = true; }
             if (showFilter) {
-                filterColumnInfo.filter = { type: exports.GridFilterControlType.INPUT, showFilter: this.showFilterIcon(filterColumnInfo) };
+                filterColumnInfo.filter = {
+                    type: exports.GridFilterControlType.INPUT,
+                    showFilter: this.showFilterIcon(filterColumnInfo),
+                };
             }
             return this.addColumn(filterColumnInfo);
         };
@@ -2541,7 +2617,10 @@
         GridService.prototype.addNumericColumn = function (columnInfo, showFilter) {
             if (showFilter === void 0) { showFilter = true; }
             if (showFilter) {
-                columnInfo.filter = { type: exports.GridFilterControlType.NUMERICINPUT, showFilter: this.showFilterIcon(columnInfo) };
+                columnInfo.filter = {
+                    type: exports.GridFilterControlType.NUMERICINPUT,
+                    showFilter: this.showFilterIcon(columnInfo),
+                };
             }
             columnInfo.type = exports.EGridColumnType.NUMERIC;
             return this.addColumn(columnInfo);
@@ -2550,7 +2629,10 @@
         GridService.prototype.addCalendarColumn = function (columnInfo, showFilter) {
             if (showFilter === void 0) { showFilter = true; }
             if (showFilter) {
-                columnInfo.filter = { type: exports.GridFilterControlType.CALENDAR, showFilter: this.showFilterIcon(columnInfo) };
+                columnInfo.filter = {
+                    type: exports.GridFilterControlType.CALENDAR,
+                    showFilter: this.showFilterIcon(columnInfo),
+                };
             }
             columnInfo.type = columnInfo.type ? columnInfo.type : exports.EGridColumnType.DATE;
             return this.addColumn(columnInfo);
@@ -2559,8 +2641,11 @@
         GridService.prototype.addBooleanColumn = function (columnInfo, showFilter) {
             if (showFilter === void 0) { showFilter = true; }
             if (showFilter) {
-                columnInfo.type = exports.EGridColumnType.BOOLEAN,
-                    columnInfo.filter = { type: exports.GridFilterControlType.CHECKBOX, showFilter: this.showFilterIcon(columnInfo) };
+                (columnInfo.type = exports.EGridColumnType.BOOLEAN),
+                    (columnInfo.filter = {
+                        type: exports.GridFilterControlType.CHECKBOX,
+                        showFilter: this.showFilterIcon(columnInfo),
+                    });
             }
             return this.addColumn(columnInfo);
         };
@@ -2568,7 +2653,10 @@
         GridService.prototype.addLookUpColumn = function (columnInfo, showFilter) {
             if (showFilter === void 0) { showFilter = true; }
             if (showFilter) {
-                columnInfo.filter = { type: exports.GridFilterControlType.LOOKUP_INPUT, showFilter: this.showFilterIcon(columnInfo) };
+                columnInfo.filter = {
+                    type: exports.GridFilterControlType.LOOKUP_INPUT,
+                    showFilter: this.showFilterIcon(columnInfo),
+                };
             }
             columnInfo.type = exports.EGridColumnType.LOOKUP_INPUT;
             return this.addColumn(columnInfo);
@@ -2590,11 +2678,19 @@
         GridService.prototype.getAutoCompleteData = function (column, uniqueKey, filters, search) {
             var _this = this;
             if (search === void 0) { search = ''; }
-            this.requestService.get('/Data/Fetch', { uniqueKey: uniqueKey, filters: filters }).subscribe(function (response) {
+            this.requestService
+                .get('/Data/Fetch', { uniqueKey: uniqueKey, filters: filters })
+                .subscribe(function (response) {
                 var _g;
                 var _a;
+                //  console.log('get response', response, 'search was', search)
                 if (search) {
-                    var existInRecord = (_a = response.records) === null || _a === void 0 ? void 0 : _a.some(function (record) { var _a, _b; return record[column.displayField] && ((_b = (_a = record[column.displayField]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (search === null || search === void 0 ? void 0 : search.toLowerCase()); });
+                    var existInRecord = (_a = response.records) === null || _a === void 0 ? void 0 : _a.some(function (record) {
+                        var _a, _b;
+                        return record[column.displayField] &&
+                            ((_b = (_a = record[column.displayField]) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
+                                (search === null || search === void 0 ? void 0 : search.toLowerCase());
+                    });
                     if (!existInRecord) {
                         response.records.unshift((_g = {}, _g[column.displayField] = search, _g));
                     }
@@ -2602,15 +2698,55 @@
                 column.data = _this.setDataFields(response.records);
             });
         };
+        GridService.prototype.addAutoCompleteValue = function (uniqueKey, value, column) {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var newValue, i;
+                return __generator(this, function (_g) {
+                    newValue = {};
+                    for (i = 0; i < uniqueKey.values.length; i++) {
+                        if (uniqueKey.values[i].name.toLowerCase() == ((_a = column.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || uniqueKey.values[i].name.toLowerCase() == ((_b = column.displayField) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
+                            // console.log('matching Name', column.field, column.displayField, uniqueKey.values[i].name.toLowerCase())
+                            newValue[uniqueKey.values[i].name] = value;
+                        }
+                        else {
+                            newValue[uniqueKey.values[i].name] = uniqueKey.values[i].value;
+                        }
+                    }
+                    this.requestService
+                        .get('/Data/Save', { uniqueKey: uniqueKey.name, values: newValue })
+                        .subscribe(function (response) {
+                        (function (_g) {
+                            var error = _g.error;
+                            return error;
+                        });
+                        return 'success';
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
         // add simple dropdown grid column without
         GridService.prototype.addDropdownColumn = function (columnInfo, showFilter, dropDownProp) {
             if (showFilter === void 0) { showFilter = true; }
             var _a, _b, _c;
             columnInfo.type = exports.EGridColumnType.DROPDOWN;
-            columnInfo.optionLabel = columnInfo.optionLabel ? columnInfo.optionLabel : 'label';
-            columnInfo.optionValue = columnInfo.optionValue ? columnInfo.optionValue : 'value';
+            columnInfo.optionLabel = columnInfo.optionLabel
+                ? columnInfo.optionLabel
+                : 'label';
+            columnInfo.optionValue = columnInfo.optionValue
+                ? columnInfo.optionValue
+                : 'value';
             if (showFilter) {
-                columnInfo.filter = { type: exports.GridFilterControlType.DROPDOWN, data: !((_a = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _a === void 0 ? void 0 : _a.data) && !dropDownProp && columnInfo.data ? columnInfo.data : ((_b = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _b === void 0 ? void 0 : _b.data) ? (_c = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _c === void 0 ? void 0 : _c.data : [], showFilter: this.showFilterIcon(columnInfo) };
+                columnInfo.filter = {
+                    type: exports.GridFilterControlType.DROPDOWN,
+                    data: !((_a = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _a === void 0 ? void 0 : _a.data) && !dropDownProp && columnInfo.data
+                        ? columnInfo.data
+                        : ((_b = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _b === void 0 ? void 0 : _b.data)
+                            ? (_c = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _c === void 0 ? void 0 : _c.data
+                            : [],
+                    showFilter: this.showFilterIcon(columnInfo),
+                };
             }
             if (dropDownProp) {
                 columnInfo.dropDownProp = dropDownProp;
@@ -2630,11 +2766,23 @@
         GridService.prototype.addMultiSelectDropDownColumn = function (columnInfo, showFilter, multiSelectProp) {
             if (showFilter === void 0) { showFilter = true; }
             var _a, _b, _c;
-            columnInfo.optionLabel = columnInfo.optionLabel ? columnInfo.optionLabel : 'label';
-            columnInfo.optionValue = columnInfo.optionValue ? columnInfo.optionValue : 'value';
+            columnInfo.optionLabel = columnInfo.optionLabel
+                ? columnInfo.optionLabel
+                : 'label';
+            columnInfo.optionValue = columnInfo.optionValue
+                ? columnInfo.optionValue
+                : 'value';
             columnInfo.type = exports.EGridColumnType.MULTISELECT;
             if (showFilter) {
-                columnInfo.filter = { type: exports.GridFilterControlType.MULTISELECT, data: !((_a = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _a === void 0 ? void 0 : _a.data) && !multiSelectProp && columnInfo.data ? columnInfo.data : ((_b = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _b === void 0 ? void 0 : _b.data) ? (_c = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _c === void 0 ? void 0 : _c.data : [], showFilter: this.showFilterIcon(columnInfo) };
+                columnInfo.filter = {
+                    type: exports.GridFilterControlType.MULTISELECT,
+                    data: !((_a = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _a === void 0 ? void 0 : _a.data) && !multiSelectProp && columnInfo.data
+                        ? columnInfo.data
+                        : ((_b = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _b === void 0 ? void 0 : _b.data)
+                            ? (_c = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.filter) === null || _c === void 0 ? void 0 : _c.data
+                            : [],
+                    showFilter: this.showFilterIcon(columnInfo),
+                };
             }
             if (multiSelectProp) {
                 columnInfo.dropDownProp = multiSelectProp;
@@ -2668,7 +2816,7 @@
                 }
                 else {
                     column.data = res;
-                    if (column.filter && column.filter.type === "dropdown") {
+                    if (column.filter && column.filter.type === 'dropdown') {
                         column.filter.data = res;
                     }
                 }
@@ -2688,7 +2836,7 @@
                 hidden: filterColumnInfo.hidden,
                 style: filterColumnInfo.style,
                 tableAlias: filterColumnInfo.tableAlias,
-                permissions: filterColumnInfo.permissions
+                permissions: filterColumnInfo.permissions,
             };
             return column;
         };
@@ -2750,7 +2898,9 @@
                         (_a = document.getElementById('lookUp_filter')) === null || _a === void 0 ? void 0 : _a.focus();
                         var field = column.field;
                         var value = setDialogResponse(column, column === null || column === void 0 ? void 0 : column.lookupControl, res);
-                        column.value = (value === null || value === void 0 ? void 0 : value.value) ? value.value : res[field.toLowerCase()];
+                        column.value = (value === null || value === void 0 ? void 0 : value.value)
+                            ? value.value
+                            : res[field.toLowerCase()];
                     }
                 }, function (_g) {
                     var error = _g.error;
@@ -2760,14 +2910,21 @@
         };
         // Set Hyperlink field as a param Value
         GridService.prototype.setFieldAsLinkParam = function (columns, field, response) {
-            if (columns && columns.length > 0 && field && response.records && response.records.length > 0) {
+            if (columns &&
+                columns.length > 0 &&
+                field &&
+                response.records &&
+                response.records.length > 0) {
                 this.setDataFields(response.records).forEach(function (res) {
                     var obj = columns.find(function (x) { return x.field === field; });
                     if (obj && obj.params) {
                         var keys = Object.keys(obj.params);
                         keys.forEach(function (key) {
                             if (obj.params[key] && obj.params[key].toString().includes('{')) {
-                                var value = obj.params[key].replace('{', '').replace('}', '').toLowerCase();
+                                var value = obj.params[key]
+                                    .replace('{', '')
+                                    .replace('}', '')
+                                    .toLowerCase();
                                 obj.params[key] = res[value];
                             }
                         });
@@ -2776,16 +2933,22 @@
             }
         };
         GridService.prototype.hasAnyLinkColumn = function (columns) {
-            return columns && columns.some(function (x) { return x.type == exports.EGridColumnType.LINK || x.type == exports.EGridColumnType.IFRAME || x.type == exports.EGridColumnType.DIALOG ||
-                (x.linkId && x.type == exports.EGridColumnType.LOOKUP_INPUT); });
+            return (columns &&
+                columns.some(function (x) { return x.type == exports.EGridColumnType.LINK ||
+                    x.type == exports.EGridColumnType.IFRAME ||
+                    x.type == exports.EGridColumnType.DIALOG ||
+                    (x.linkId && x.type == exports.EGridColumnType.LOOKUP_INPUT); }));
         };
         GridService.prototype.setHyperlinks = function (fetchResponse, columns) {
             var _this = this;
             var records = [];
-            var data = fetchResponse && fetchResponse.records.length > 0 ? this.setDataFields(fetchResponse.records) : [];
+            var data = fetchResponse && fetchResponse.records.length > 0
+                ? this.setDataFields(fetchResponse.records)
+                : [];
             var newRow;
             return this.hyperlinkService
-                .addHyperlinks(columns).then(function (linksResponse) {
+                .addHyperlinks(columns)
+                .then(function (linksResponse) {
                 data.forEach(function (row) {
                     newRow = Object.assign({}, row);
                     columns.forEach(function (col) {
@@ -2805,7 +2968,8 @@
                         }
                         linksResponse.forEach(function (linkResponse) {
                             if ((col.type === exports.EGridColumnType.LINK ||
-                                col.type === exports.EGridColumnType.IFRAME || col.type === exports.EGridColumnType.LOOKUP_INPUT) &&
+                                col.type === exports.EGridColumnType.IFRAME ||
+                                col.type === exports.EGridColumnType.LOOKUP_INPUT) &&
                                 col.linkId &&
                                 col.params &&
                                 col.linkId === linkResponse.linkId) {
@@ -2961,7 +3125,9 @@
                             var _g;
                             return (Object.assign(Object.assign({}, prev), (_g = {}, _g[current.toLowerCase()] = x[current], _g)));
                         }, {});
-                        if (dataKey && dataKey.length > 0 && !((_c = Object.keys(result)) === null || _c === void 0 ? void 0 : _c.includes(dataKey))) {
+                        if (dataKey &&
+                            dataKey.length > 0 &&
+                            !((_c = Object.keys(result)) === null || _c === void 0 ? void 0 : _c.includes(dataKey))) {
                             result[dataKey] = index;
                         }
                         data.push(result);
@@ -3001,7 +3167,8 @@
                     var index = users.findIndex(function (i) { return i[field.toLowerCase()] === record[field.toLowerCase()]; });
                     if (index !== -1) {
                         if (users[index][field + '_obj']) {
-                            users[index][field + '_obj'].hyperlink = res[0][field + '_obj'].hyperlink;
+                            users[index][field + '_obj'].hyperlink =
+                                res[0][field + '_obj'].hyperlink;
                         }
                     }
                 }
@@ -3014,7 +3181,8 @@
                     var _a;
                     (_a = Object.keys(record)) === null || _a === void 0 ? void 0 : _a.forEach(function (key) {
                         if (key.toLowerCase() === configData.selectedValue.toLowerCase()) {
-                            if (configData.data.value && record[key] === configData.data.value) {
+                            if (configData.data.value &&
+                                record[key] === configData.data.value) {
                                 record['highlightRow'] = true;
                             }
                             else if (record[key] === configData.data.selection) {
@@ -3039,7 +3207,8 @@
             if (columns && columns.length > 0 && props && props.length > 0) {
                 var isMatched_1 = false;
                 if (filter && filter.field && records && records.length > 0) {
-                    isMatched_1 = records.some(function (x) { return objConvertToLower(x)[filter.field.toLowerCase()] === filter.value; });
+                    isMatched_1 = records.some(function (x) { return objConvertToLower(x)[filter.field.toLowerCase()] ===
+                        filter.value; });
                 }
                 props.map(function (prop) {
                     var col = {};
@@ -4098,6 +4267,9 @@
             if (componentName) {
                 this.pageLoggerService.savePageLoggerInfo((_b = this.router.url) === null || _b === void 0 ? void 0 : _b.substring(1), componentName);
             }
+            setTimeout(function () {
+                draggableDialog((column === null || column === void 0 ? void 0 : column.field) ? column === null || column === void 0 ? void 0 : column.field : column === null || column === void 0 ? void 0 : column.header);
+            }, 100);
             ref.onClose.subscribe(function (res) {
                 if (res && column.onReturn) {
                     column.onReturn(res);
@@ -4150,6 +4322,9 @@
                     if (componentName) {
                         _this.pageLoggerService.savePageLoggerInfo((_c = _this.router.url) === null || _c === void 0 ? void 0 : _c.substring(1), componentName);
                     }
+                    setTimeout(function () {
+                        draggableDialog((column === null || column === void 0 ? void 0 : column.field) ? column === null || column === void 0 ? void 0 : column.field : column === null || column === void 0 ? void 0 : column.header);
+                    }, 100);
                     ref.onClose.subscribe(function (data) {
                         if (data && column.onReturn) {
                             column.onReturn(data, _this.rowClickData);
@@ -5079,6 +5254,9 @@
                 var obj = this.setLookupDialogConfig(row, column, (_a = column.data) === null || _a === void 0 ? void 0 : _a.data);
                 obj['component'] = column.component;
                 var ref = this.openLookupDialog(obj);
+                setTimeout(function () {
+                    draggableDialog((column === null || column === void 0 ? void 0 : column.field) ? column === null || column === void 0 ? void 0 : column.field : column === null || column === void 0 ? void 0 : column.header);
+                }, 100);
                 ref.onClose.subscribe(function (res) {
                     if (res && column.onReturn) {
                         column.onReturn(res);
@@ -5111,6 +5289,9 @@
                 var obj_2 = this.setLookupDialogConfig(row, column, (_a = column.lookupControl.data) === null || _a === void 0 ? void 0 : _a.data);
                 obj_2['component'] = column.lookupControl.component;
                 var ref = this.openLookupDialog(obj_2);
+                setTimeout(function () {
+                    draggableDialog((column === null || column === void 0 ? void 0 : column.field) ? column === null || column === void 0 ? void 0 : column.field : column === null || column === void 0 ? void 0 : column.header);
+                }, 100);
                 ref.onClose.subscribe(function (res) {
                     if (column.onReturn) {
                         column.onReturn(res, row);
@@ -5173,17 +5354,40 @@
             }
             this.calenderPreviousValue = '';
         };
-        GridComponent.prototype.onFocusOutEvent = function (column, row) {
-            this.gridService.checkValidity([column], row);
-            if (column.type === exports.EGridColumnType.DATE) {
-                this.calenderChangeEvent(column, row);
-            }
-            if (column.onFocusOut) {
-                column.onFocusOut(row);
+        GridComponent.prototype.onAutoCompleteFocusOut = function (e, column) {
+            if (column.type == exports.EGridColumnType.AUTOCOMPLETE) {
+                if (column.allowAutoCompleteSave && e.target.value && !column.data.length) {
+                    ///check the correct format if data.contains cuz its an array of arrays with objects.
+                    if (confirm("Do you want to add " + e.target.value + " to the selection?")) {
+                        if (column.uniqueKey) {
+                            var message = this.gridService
+                                .addAutoCompleteValue(column.uniqueKey, e.target.value, column)
+                                .then(function () {
+                                console.log('after save', message);
+                                setTimeout(function () {
+                                    if (column.onReturn) {
+                                        column.onReturn(e.target.value, column);
+                                    }
+                                }, 500);
+                            });
+                        }
+                    }
+                }
             }
-            else if (column.onReturn &&
-                column.type !== exports.EGridColumnType.LOOKUP_INPUT) {
-                column.onReturn(row);
+        };
+        GridComponent.prototype.onFocusOutEvent = function (column, row) {
+            if (column.type !== exports.EGridColumnType.AUTOCOMPLETE || (!column.allowAutoCompleteSave)) {
+                this.gridService.checkValidity([column], row);
+                if (column.type === exports.EGridColumnType.DATE) {
+                    this.calenderChangeEvent(column, row);
+                }
+                if (column.onFocusOut) {
+                    column.onFocusOut(row);
+                }
+                else if (column.onReturn &&
+                    column.type !== exports.EGridColumnType.LOOKUP_INPUT) {
+                    column.onReturn(row);
+                }
             }
         };
         GridComponent.prototype.setFilterFocusOut = function (col, filter, event) {
@@ -5598,7 +5802,7 @@
     GridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'se-grid',
-                    template: "<p-confirmDialog\n  [style]=\"{ width: '50vw' }\"\n  *ngIf=\"useInlineCRUD\"\n  key=\"handleInlineCRUD\"\n></p-confirmDialog>\n<p-confirmDialog\n  [style]=\"{ width: '50vw' }\"\n  *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"\n></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\"\n  *ngIf=\"\n    allowColumnToggle ||\n    rowActions.length > 0 ||\n    useInlineCRUD ||\n    allowExportToExcel ||\n    allowExportToPdf ||\n    clearGridFilter\n  \"\n>\n<!-- button for apply filterValue on Grid -->\n  <button\n  *ngIf=\"filtering && !hideFilter\"\n  pButton\n  type=\"button\"\n  icon=\"pi pi-search\"\n  (click)=\"applyGirdFilterBtn()\"\n  [class]=\"\n  searchGridFilter ? 'p-button-success p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n  \"\n></button>\n\n<!-- button for clear filterValue on Grid -->\n    <button\n    *ngIf=\"filtering && !hideFilter\"\n    pButton\n    id=\"clearGridFilterValuesButton\"\n    type=\"button\"\n    icon=\"pi pi-replay\"\n    (click)=\"cleargridFiltersValue()\"\n    [class]=\"\n      clearGridFilter ? 'p-button-danger p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n    \"\n></button>\n\n<!-- button for edit all grid at once -->\n<!-- <button\n    pButton\n    *ngIf=\"hideEditAllRowsBtn && editAllRows\"\n    id=\"editBtnGlobalvalues\"\n    type=\"button\"\n    [label]=\"'Edit'\"\n    class=\"p-mr-2 ui-button-info\"\n    icon=\"pi pi-pencil\"\n    [class]=\"editRowPermission ? '' : 'p-disabled'\"\n    (click)=\"editAllRowsAtOnce()\"\n  ></button> -->\n\n  <!-- button for save all grid at once -->\n  <button\n    pButton\n    *ngIf=\"editAllRows && editRowPermission\"\n    id=\"saveAllGridValues\"\n    icon=\"pi pi-check\"\n    [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 ui-button-info'\"\n    type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"\n  ></button>\n\n  <!-- button for cancel all grid at once -->\n  <button\n    pButton\n    *ngIf=\"editAllRows\"\n    id=\"editBtnGlobalvalues\"\n    type=\"button\"\n    [label]=\"'Cancel'\"\n    icon=\"pi pi-times\"\n    class=\"p-mr-2 ui-button-info\"\n    (click)=\"cancelAllRowsAtOnce()\"\n  ></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect\n      [showToggleAll]=\"false\"\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"\n      [style]=\"{ minWidth: '200px' }\"\n      placeholder=\"Choose Columns\"\n    >\n    </p-multiSelect>\n  </span>\n\n  <!-- <button\n  pButton\n  *ngIf=\"showRefreshBtn\"\n  type=\"button\"\n  [label]=\"'Refresh'\"\n  icon=\"pi pi-refresh\"\n  (click)=\"refresh()\"\n  class=\"ui-button-info p-mr-2\"\n></button> -->\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button\n    pButton\n    *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\"\n    type=\"button\"\n    [label]=\"'Add'\"\n    pAddRow\n    [table]=\"componentTableRef\"\n    [newRow]=\"newGridRow\"\n    [id]=\"dataKey\"\n    pTooltip=\"Add New Row\"\n    tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\"\n    class=\"ui-button-info p-mr-2 p-ml-2\"\n    (click)=\"addNewRow(newGridRow, true)\"\n    pRipple\n  ></button>\n  \n<!-- header Button for Excel File on Grid -->\n<button\n *ngIf=\"allowExportToExcel\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-excel\"\n (click)=\"exportExcel()\"\n class=\"p-button-success p-mt-0 p-mx-2\"\n pTooltip=\"Export to Excel\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n\n<!-- header Button for PDF File on Grid -->\n<button\n *ngIf=\"allowExportToPdf\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-pdf\"\n (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2\"\n pTooltip=\"Export to Pdf\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n</div>\n\n<p-table\n  *ngIf=\"!isGridHidden\"\n  id=\"my-table\"\n  [value]=\"rowsData\"\n  [columns]=\"selectedColumns\"\n  sortMode=\"multiple\"\n  [lazy]=\"useServerSideEvents\"\n  [paginator]=\"pagination\"\n  [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n  [rows]=\"defaultRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"setPaginationLength\"\n  [showCurrentPageReport]=\"showCurrentPageReport\"\n  currentPageReportTemplate=\"Showing {first} to {last} of {{\n    totalRecords\n  }} entries\"\n  [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n  (onSort)=\"sortDisabled ?? handleSortChange($event)\"\n  (onFilter)=\"handleFilterChange($event)\"\n  (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\"\n  (onPage)=\"handleServerSidePagination($event)\"\n  #dt\n  [dataKey]=\"dataKey\"\n  [(selection)]=\"selectedRows\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  editMode=\"row\"\n  [editingRowKeys]=\"editingRowKeys\"\n  [autoLayout]=\"true\"\n  [rowHover]=\"rowHover\"\n  [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\"\n>\n   <!-- header Button for Action on Grid -->\n   <div\n   *ngIf=\"rowActions.length > 0 && rowActions.length > 0\"\n   class=\"p-d-flex p-jc-end\"\n >\n   <span *ngFor=\"let rowAction of rowActions\">\n     <button\n       pButton\n       type=\"button\"\n       [label]=\"rowAction.title\"\n       [class]=\"rowAction.class\"\n       (click)=\"rowAction.onClick(selectedRows)\"\n     ></button>\n   </span>\n </div>\n\n   <!-- header columns on Grid -->\n  <ng-template pTemplate=\"header\" let-cols>\n    <tr>\n      <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\" style=\"justify-content: center\">\n\n        <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n          <span class=\"flex-grow-1 p-mr-2\"> {{allowSelectionHeader}}   </span>\n          <p-tableHeaderCheckbox\n          *ngIf=\"selectionType === 'multiple'\"\n          binary=\"true\"\n          (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n          ></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <!-- <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n        Select\n      </th> -->\n      <th\n      *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n    >\n    Actions\n    </th>\n      <th\n        *ngFor=\"let column of cols\"\n        [pSortableColumn]=\"column.field\"\n        [style]=\"column.style\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n      >\n      <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n        <span class=\"flex-grow-1\">{{ column.header }}</span>\n        <span *ngIf=\"column.isRequired\">*</span>\n        <p-sortIcon\n          *ngIf=\"column.sorting !== false\"\n          [field]=\"column.field\"\n        ></p-sortIcon>\n      </div>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <!-- <th *ngIf=\"allowSelection\">\n        <p-tableHeaderCheckbox\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(rowsData)\"\n        ></p-tableHeaderCheckbox>\n      </th> -->\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th\n      *ngFor=\"let column of cols\"\n      [ngSwitch]=\"column?.filter?.type\"\n      [style]=\"column.style\"\n      [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\"\n      >\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter\n          [type]=\"'text'\"\n          [field]=\"column.field\"\n          *ngSwitchCase=\"'input'\"\n        >\n          <ng-template\n            pTemplate=\"filter\"\n            let-value\n            let-filter=\"filterCallback\"\n          >\n            <input\n              type=\"text\"\n              [(ngModel)]=\"column.value\"\n              (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n              (blur)=\"setFilterFocusOut(column, filter, $event)\"\n              (keydown)=\"backspaceEvent($event, column)\"\n              (keyup)=\"removingFilters($event, column)\"\n              pInputText\n            />\n          </ng-template>\n        </p-columnFilter>\n\n        <!-- Numeric input on Header For Filter-->\n        <p-columnFilter\n        [type]=\"'numeric'\"\n        [field]=\"column.field\"\n        *ngSwitchCase=\"'numeric_input'\"\n      >\n        <ng-template\n          pTemplate=\"filter\"\n          let-value\n          let-filter=\"filterCallback\"\n        >\n          <p-inputNumber\n            [(ngModel)]=\"column.value\"\n            (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n            (onBlur)=\"setFilterFocusOut(column, filter, $event)\"\n            (keydown)=\"backspaceEvent($event, column)\"\n            (keyup)=\"removingFilters($event, column)\"\n          ></p-inputNumber>\n        </ng-template>\n      </p-columnFilter>\n\n          <!-- lookup input on Header For Filter-->\n        <p-columnFilter\n            [type]=\"'text'\"\n            [field]=\"column.field\"\n            *ngSwitchCase=\"'lookup_input'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n            <div class=\"close-icon-wrapper\">\n              <input\n                id=\"lookUp_filter\"\n                autocomplete=\"off\"\n                type=\"text\"\n                [(ngModel)]=\"column.value\"\n                (click)=\"setFilterLookup(column)\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"\n                pInputText\n              />\n              <div><button *ngIf=\"column.value\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column)\"></button></div>\n            </div>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter\n            type=\"boolean\"\n            [field]=\"column.field\"\n            *ngSwitchCase=\"'checkbox'\"\n          >\n          <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-checkbox\n                [binary]=\"true\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\"\n                (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n              >\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'multi-select'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-multiSelect\n                [ngModel]=\"value\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\"\n                optionLabel=\"label\"\n              >\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'dropdown'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-dropdown\n                [showClear]=\"true\"\n                [placeholder]=\"'Select'\"\n                [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"\n              ></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'calendar'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-calendar\n                [placeholder]=\"'Select-Date'\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                appendTo=\"body\"\n                (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\"\n                hourFormat=\"12\"\n                (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\"\n                (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                (onClearClick)=\"backspaceEvent($event, column)\"\n              >\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter\n            [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \"\n            [field]=\"column.field\"\n            display=\"menu\"\n            *ngSwitchDefault\n          >\n          </p-columnFilter>\n        </span>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n    </tr>\n  </ng-template>\n\n  <!-- Body columns on Grid -->\n  <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n    <tr\n      [ngClass]=\"row.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? '' : 'noWrap'\"\n      (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\"\n      #gridRow\n      [id]=\"row[dataKey]\"\n    >\n      <td *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n        <p-tableRadioButton\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n        ></p-tableRadioButton>\n        <p-tableCheckbox\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"\n        ></p-tableCheckbox>\n      </td>\n\n       <!-- first actions column -->\n       <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i\n            [title]=\"action.tooltip\"\n            [class]=\"action.icon\"\n            (click)=\"handleActionClick($event, action, row)\"\n          ></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [hideDeleteBtn]=\"hideDeleteBtn\"\n          [hideEditBtn]=\"hideEditBtn\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"editAllRows\"\n          >\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td\n        *ngFor=\"let column of selectedColumns\"\n        [ngSwitch]=\"column.type\"\n        [style]=\"column.style\"\n      >\n\n      <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n          <td *ngIf=\"!editing\">\n            <p-checkbox\n              [disabled]=\"true\"\n              [binary]=\"true\"\n              (click)=\"selectedRow(row)\"\n              (blur)=\"onFocusOutEvent(column, row)\"\n              [(ngModel)]=\"\n                row[column.field] &&\n                (row[column.field].toString() === '1' ||\n                  row[column.field].toString().toLowerCase() === 'true' ||\n                  row[column.field].toString().toLowerCase() === 'y')\n                  ? checked\n                  : unChecked\n              \"\n            >\n            </p-checkbox>\n          </td>\n          <td *ngIf=\"editing\">\n            <span *ngSwitchCase=\"'boolean'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <!-- for edit checkBox -->\n                  <p-checkbox\n                  (click)=\"onClickEvent(column, row)\"\n                  (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  [binary]=\"true\"\n                  [(ngModel)]=\"\n                  row[column.field] &&\n                  (row[column.field].toString() === '1' ||\n                    row[column.field].toString().toLowerCase() === 'true' ||\n                    row[column.field].toString().toLowerCase() === 'y')\n                    ? editModeChecked\n                    : editModeunCkecked\n                \"\n                  (blur)=\"onFocusOutEvent(column, row)\"\n                ></p-checkbox>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  {{ row[column.field] }}\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span\n              *ngIf=\"column.target !== '_self'\"\n              (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"\n              [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n            >\n              <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                {{\n                  setConditionBaseValue(row, column)\n                }}\n              </a>\n            </span>\n            <span\n              *ngIf=\"column.target === '_self'\"\n              (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"\n              [class]=\"column.editable === false ? '' :  allowDisabled(column,row) ? 'disable-link' : ''\"\n            >\n              <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n                {{\n                  setConditionBaseValue(row, column)\n                }}\n              </a>\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input\n                *ngIf=\"!row.isNew\"\n                pInputText\n                (click)=\"onClickEvent(column, row)\"\n                type=\"text\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                (blur)=\"onFocusOutEvent(column, row)\"\n                (change)=\"onChangeEvent(column, row)\"\n              />\n              <input\n                pInputText\n                *ngIf=\"row.isNew\"\n                type=\"text\"\n                (click)=\"onClickEvent(column, row)\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                (blur)=\"onFocusOutEvent(column, row)\"\n                (change)=\"onChangeEvent(column, row)\"\n              />\n            </span>\n            <span *ngIf=\"column.editable === false\" \n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span>\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                  </a>\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span\n            class=\"custom-link\"\n            (click)=\"\n              gridIFrame(column, row[column.field + '_obj'].hyperlink, row)\n            \"\n            [title]=\"\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText\n                ? column.displayText\n                : row[column.field]\n            \"\n          >\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText ? column.displayText : row[column.field]\n            }}\n          </span>\n        </span>\n\n        <!-- dialog column on Grid -->\n        <span *ngSwitchCase=\"'dialog'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\"\n                [title]=\"setConditionBaseValue(row, column)\"\n              >\n                <span *ngIf=\"column.editable === true\">\n                  <input\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"\n                    column.editable === false || column.editable === undefined\n                  \"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n                  \"\n                  (click)=\"openGridDialog(column, row)\"\n                >\n                  {{ !column.displayText && row.isNew ? '' : setConditionBaseValue(row, column) }}\n                </span>\n              </span>\n\n              <span\n                *ngIf=\"row[column.field + '_secondType'] === 'date'\"\n                [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \"\n              >\n                <p-calendar\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\"\n                  hourFormat=\"12\"\n                  [showTime]=\"column.showTime\"\n                  (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                ></p-calendar>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span\n              [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n                (click)=\"openGridDialog(column, row)\"\n                *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n                [title]=\"setConditionBaseValue(row, column)\"\n              >\n                {{ setConditionBaseValue(row, column) }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n              <input\n                readonly\n                type=\"text\"\n                pInputText\n                [(ngModel)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n                row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [name]=\"row[column.field]\"\n                (keyup.tab)=\"selectLookupField(column, row)\"\n                [disabled]=\"allowDisabled(column,row)\"\n                (click)=\"selectLookupField(column, row)\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              \t(blur)=\"onFocusOutEvent(column, row)\"\n              />\n              <div *ngIf=\"!allowDisabled(column,row)\"><button *ngIf=\"row[column.field] && typeOf(row[column.field]) === 'object'\n                ? row[column.field].text\n                : row[column.field] && !column.disabled\"  icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column,row)\"></button></div>\n            </div>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span *ngIf=\"column.linkId\">\n                <a [href]=\"row[column.field + '_obj']?.hyperlink\" [target]=\"column.target === '_self' ? '' :  '_blank'\"> \n                  {{\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.action ?  row[column.field]?.text : row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field]\n                  }}\n                </a>\n              </span>\n              <span\n              *ngIf=\"!column.linkId\"\n                [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n                (click)=\"openLookupHyperlink(column, row)\"\n              >\n                {{\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.action ?  row[column.field]?.text : row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field]\n                }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- Numeric Input column on Grid -->\n        <span *ngSwitchCase=\"'numeric'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for Currency && Decimal && Percent -->\n              <span class=\"input-number\">\n                <p-inputNumber\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [class]=\"\n                    column.errorMessage\n                      ? 'ng-invalid ng-dirty'\n                      : 'form-control'\n                  \"\n                  [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\"\n                  [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\n                  \"\n                  [currency]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.currency\n                      ? column.format.formatParams.currency\n                      : 'USD'\n                  \"\n                  [locale]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.locale\n                      ? column.format.formatParams.locale\n                      : 'en-US'\n                  \"\n                  [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                  [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                  [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && !column?.format?.formatParams?.allowCalculate \n                      ? '%'\n                      : ''\n                  \"\n                >\n                </p-inputNumber>\n              </span>\n              <ng-template #locked_field\n                ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                  {{ row[column.field] }}\n                </span></ng-template\n              >\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span\n              [title]=\"setNumericFormat(column, row)\">\n                {{\n                  setNumericFormat(column, row)\n                }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        \n      <!-- Button column on Grid -->\n      <span [title]=\"column.value ? column.value : column.icon\">\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\"\n            pButton\n            type=\"button\"\n            [icon]=\"row[column.field]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n            [name]=\"column.header\"\n            class=\"merge-btn\"\n            [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.action?.displayText : column.value\"\n            [ngStyle]=\"{\n              background: column.color ? column.color : ''\n            }\"\n            (click)=\"onClickButton(column, row)\"\n          ></button>\n        </div>\n      </span>\n\n        <!-- Date column on Grid -->\n        <span\n          *ngSwitchCase=\"'date'\"\n          [title]=\"setConditionBaseValue(row,column)\"\n        >\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\"\n                hourFormat=\"12\"\n                [defaultDate]=\"defaultDate\"\n                [stepMinute] = \"column.minutesInterval ? column.minutesInterval : 1\"\n                [showTime]=\"column.showTime\"\n                [timeOnly]=\"column.timeOnly\"\n                [dateFormat]=\"column.format ? column.format : calendarFormat\"\n                (keyup)=\"calenderInputValue(column, row)\"\n                (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"\n              ></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span\n              *ngSwitchCase=\"'dropdown'\"\n              [class]=\"dropdownInput ? '' : 'output-dropdown'\"\n              [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \"\n            >\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown\n                    *ngIf=\"!row[column.field]?.action?.hidden\"\n                    [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\"\n                    [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\"\n                    (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\"\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\"\n                    [filter]=\"column.allowSearch\"\n                  ></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field]?.action?.hidden\">\n                    {{\n                      setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n             <!-- MultiSelect column on Grid -->\n             <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    [options]=\"column.data\"\n                    [optionLabel]=\"column.optionLabel\"\n                    [optionValue]=\"column.optionValue\"\n                    (onChange)=\"onChangeEvent(column, row)\"\n                    (onPanelShow)=\"showOption(column, row)\"\n                    (click)=\"onClickEvent(column, row)\"\n                    [appendTo]=\"'body'\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  >\n                  </p-multiSelect>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span\n                    [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\n                    \"\n                  >\n                    {{\n                      row[column.displayField]\n                        ? row[column.displayField] :\n                        setMultiSelectData(column, row[column.field])\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- AutoComplete Search -->\n            <span\n            *ngSwitchCase=\"'AutoComplete'\"\n            >\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-autoComplete\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [name]=\"column.header\"\n                  [suggestions]=\"column.data\"\n                  [field]=\"column.displayField\"\n                  [(ngModel)]=\"row[column.field]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : typeOf(row[column.field]) === 'object' && row[column.field]?.text ? row[column.field]?.text : row[column.field]\" \n                  [dropdown]=\"column.showOption\"\n                  (onChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\"\n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  [multiple]=\"true\"\n                >\n                </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                        {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ? value[column.displayField]  : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>  \n         <!-- Add Generate Report Button -->\n         <span *ngSwitchCase=\"'report'\">    \n          <p-cellEditor>   \n            <ng-template pTemplate=\"output\">\n      <se-generate-report-btn [repId]=\"column.reportId\" [params]=\"column.params\" [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n      </ng-template>\n      </p-cellEditor>\n        </span>\n\n            <span *ngSwitchDefault>\n              <!-- Input column on Grid -->\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <input\n                    pInputText\n                    type=\"text\"\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                     row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\"\n                    *ngIf=\"column.field !== dataKey; else locked_field\"\n                  />\n                  <ng-template #locked_field\n                    ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template\n                  >\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span\n                    (click)=\"onClickEvent(column, row)\"\n                    [title]=\"\n                    column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    \"\n                  >\n                    {{\n                      row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      </td>\n       <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i\n            [title]=\"action.tooltip\"\n            [class]=\"action.icon\"\n            (click)=\"handleActionClick($event, action, row)\"\n          ></i>\n        </span>\n      </td>\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [hideDeleteBtn]=\"hideDeleteBtn\"\n          [hideEditBtn]=\"hideEditBtn\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"editAllRows\"\n          >\n          </se-grid-row-actions>\n        </span>\n      </td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer columns on Grid -->\n  <ng-template pTemplate=\"footer\">\n    <tr *ngIf=\"aggregateFooter\">\n      <td *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" [style]=\"outerColumn.style\">\n      <div *ngFor=\"let innerColumn of selectedColumns\">\n        <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n          <div *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field.toLowerCase() === outerColumn.field.toLowerCase()) || aggr.displayField && aggr.displayField.toLowerCase() === outerColumn.field.toLowerCase())\">\n             <div [innerHTML]=\"aggr.aggrValue\">\n             </div>\n        </div>\n        </div>\n        </div>\n      </td>\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n    </tr>\n  </ng-template>\n</p-table>\n",
+                    template: "<p-confirmDialog\n  [style]=\"{ width: '50vw' }\"\n  *ngIf=\"useInlineCRUD\"\n  key=\"handleInlineCRUD\"\n></p-confirmDialog>\n<p-confirmDialog\n  [style]=\"{ width: '50vw' }\"\n  *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"\n></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\"\n  *ngIf=\"\n    allowColumnToggle ||\n    rowActions.length > 0 ||\n    useInlineCRUD ||\n    allowExportToExcel ||\n    allowExportToPdf ||\n    clearGridFilter\n  \"\n>\n<!-- button for apply filterValue on Grid -->\n  <button\n  *ngIf=\"filtering && !hideFilter\"\n  pButton\n  type=\"button\"\n  icon=\"pi pi-search\"\n  (click)=\"applyGirdFilterBtn()\"\n  [class]=\"\n  searchGridFilter ? 'p-button-success p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n  \"\n></button>\n\n<!-- button for clear filterValue on Grid -->\n    <button\n    *ngIf=\"filtering && !hideFilter\"\n    pButton\n    id=\"clearGridFilterValuesButton\"\n    type=\"button\"\n    icon=\"pi pi-replay\"\n    (click)=\"cleargridFiltersValue()\"\n    [class]=\"\n      clearGridFilter ? 'p-button-danger p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n    \"\n></button>\n\n<!-- button for edit all grid at once -->\n<!-- <button\n    pButton\n    *ngIf=\"hideEditAllRowsBtn && editAllRows\"\n    id=\"editBtnGlobalvalues\"\n    type=\"button\"\n    [label]=\"'Edit'\"\n    class=\"p-mr-2 ui-button-info\"\n    icon=\"pi pi-pencil\"\n    [class]=\"editRowPermission ? '' : 'p-disabled'\"\n    (click)=\"editAllRowsAtOnce()\"\n  ></button> -->\n\n  <!-- button for save all grid at once -->\n  <button\n    pButton\n    *ngIf=\"editAllRows && editRowPermission\"\n    id=\"saveAllGridValues\"\n    icon=\"pi pi-check\"\n    [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 ui-button-info'\"\n    type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"\n  ></button>\n\n  <!-- button for cancel all grid at once -->\n  <button\n    pButton\n    *ngIf=\"editAllRows\"\n    id=\"editBtnGlobalvalues\"\n    type=\"button\"\n    [label]=\"'Cancel'\"\n    icon=\"pi pi-times\"\n    class=\"p-mr-2 ui-button-info\"\n    (click)=\"cancelAllRowsAtOnce()\"\n  ></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect\n      [showToggleAll]=\"false\"\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"\n      [style]=\"{ minWidth: '200px' }\"\n      placeholder=\"Choose Columns\"\n    >\n    </p-multiSelect>\n  </span>\n\n  <!-- <button\n  pButton\n  *ngIf=\"showRefreshBtn\"\n  type=\"button\"\n  [label]=\"'Refresh'\"\n  icon=\"pi pi-refresh\"\n  (click)=\"refresh()\"\n  class=\"ui-button-info p-mr-2\"\n></button> -->\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button\n    pButton\n    *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\"\n    type=\"button\"\n    [label]=\"'Add'\"\n    pAddRow\n    [table]=\"componentTableRef\"\n    [newRow]=\"newGridRow\"\n    [id]=\"dataKey\"\n    pTooltip=\"Add New Row\"\n    tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\"\n    class=\"ui-button-info p-mr-2 p-ml-2\"\n    (click)=\"addNewRow(newGridRow, true)\"\n    pRipple\n  ></button>\n  \n<!-- header Button for Excel File on Grid -->\n<button\n *ngIf=\"allowExportToExcel\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-excel\"\n (click)=\"exportExcel()\"\n class=\"p-button-success p-mt-0 p-mx-2\"\n pTooltip=\"Export to Excel\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n\n<!-- header Button for PDF File on Grid -->\n<button\n *ngIf=\"allowExportToPdf\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-pdf\"\n (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2\"\n pTooltip=\"Export to Pdf\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n</div>\n\n<p-table\n  *ngIf=\"!isGridHidden\"\n  id=\"my-table\"\n  [value]=\"rowsData\"\n  [columns]=\"selectedColumns\"\n  sortMode=\"multiple\"\n  [lazy]=\"useServerSideEvents\"\n  [paginator]=\"pagination\"\n  [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n  [rows]=\"defaultRows\"\n  [totalRecords]=\"totalRecords\"\n  [rowsPerPageOptions]=\"setPaginationLength\"\n  [showCurrentPageReport]=\"showCurrentPageReport\"\n  currentPageReportTemplate=\"Showing {first} to {last} of {{\n    totalRecords\n  }} entries\"\n  [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n  (onSort)=\"sortDisabled ?? handleSortChange($event)\"\n  (onFilter)=\"handleFilterChange($event)\"\n  (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\"\n  (onPage)=\"handleServerSidePagination($event)\"\n  #dt\n  [dataKey]=\"dataKey\"\n  [(selection)]=\"selectedRows\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  editMode=\"row\"\n  [editingRowKeys]=\"editingRowKeys\"\n  [autoLayout]=\"true\"\n  [rowHover]=\"rowHover\"\n  [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\"\n>\n   <!-- header Button for Action on Grid -->\n   <div\n   *ngIf=\"rowActions.length > 0 && rowActions.length > 0\"\n   class=\"p-d-flex p-jc-end\"\n >\n   <span *ngFor=\"let rowAction of rowActions\">\n     <button\n       pButton\n       type=\"button\"\n       [label]=\"rowAction.title\"\n       [class]=\"rowAction.class\"\n       (click)=\"rowAction.onClick(selectedRows)\"\n     ></button>\n   </span>\n </div>\n\n   <!-- header columns on Grid -->\n  <ng-template pTemplate=\"header\" let-cols>\n    <tr>\n      <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\" style=\"justify-content: center\">\n\n        <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n          <span class=\"flex-grow-1 p-mr-2\"> {{allowSelectionHeader}}   </span>\n          <p-tableHeaderCheckbox\n          *ngIf=\"selectionType === 'multiple'\"\n          binary=\"true\"\n          (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n          ></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <!-- <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n        Select\n      </th> -->\n      <th\n      *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n    >\n    Actions\n    </th>\n      <th\n        *ngFor=\"let column of cols\"\n        [pSortableColumn]=\"column.field\"\n        [style]=\"column.style\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n      >\n      <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n        <span class=\"flex-grow-1\">{{ column.header }}</span>\n        <span *ngIf=\"column.isRequired\">*</span>\n        <p-sortIcon\n          *ngIf=\"column.sorting !== false\"\n          [field]=\"column.field\"\n        ></p-sortIcon>\n      </div>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <!-- <th *ngIf=\"allowSelection\">\n        <p-tableHeaderCheckbox\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(rowsData)\"\n        ></p-tableHeaderCheckbox>\n      </th> -->\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th\n      *ngFor=\"let column of cols\"\n      [ngSwitch]=\"column?.filter?.type\"\n      [style]=\"column.style\"\n      [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\"\n      >\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter\n          [type]=\"'text'\"\n          [field]=\"column.field\"\n          *ngSwitchCase=\"'input'\"\n        >\n          <ng-template\n            pTemplate=\"filter\"\n            let-value\n            let-filter=\"filterCallback\"\n          >\n            <input\n              type=\"text\"\n              [(ngModel)]=\"column.value\"\n              (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n              (blur)=\"setFilterFocusOut(column, filter, $event)\"\n              (keydown)=\"backspaceEvent($event, column)\"\n              (keyup)=\"removingFilters($event, column)\"\n              pInputText\n            />\n          </ng-template>\n        </p-columnFilter>\n\n        <!-- Numeric input on Header For Filter-->\n        <p-columnFilter\n        [type]=\"'numeric'\"\n        [field]=\"column.field\"\n        *ngSwitchCase=\"'numeric_input'\"\n      >\n        <ng-template\n          pTemplate=\"filter\"\n          let-value\n          let-filter=\"filterCallback\"\n        >\n          <p-inputNumber\n            [(ngModel)]=\"column.value\"\n            (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n            (onBlur)=\"setFilterFocusOut(column, filter, $event)\"\n            (keydown)=\"backspaceEvent($event, column)\"\n            (keyup)=\"removingFilters($event, column)\"\n          ></p-inputNumber>\n        </ng-template>\n      </p-columnFilter>\n\n          <!-- lookup input on Header For Filter-->\n        <p-columnFilter\n            [type]=\"'text'\"\n            [field]=\"column.field\"\n            *ngSwitchCase=\"'lookup_input'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n            <div class=\"close-icon-wrapper\">\n              <input\n                id=\"lookUp_filter\"\n                autocomplete=\"off\"\n                type=\"text\"\n                [(ngModel)]=\"column.value\"\n                (click)=\"setFilterLookup(column)\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"\n                pInputText\n              />\n              <div><button *ngIf=\"column.value\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column)\"></button></div>\n            </div>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter\n            type=\"boolean\"\n            [field]=\"column.field\"\n            *ngSwitchCase=\"'checkbox'\"\n          >\n          <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-checkbox\n                [binary]=\"true\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\"\n                (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n              >\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'multi-select'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-multiSelect\n                [ngModel]=\"value\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\"\n                optionLabel=\"label\"\n              >\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'dropdown'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-dropdown\n                [showClear]=\"true\"\n                [placeholder]=\"'Select'\"\n                [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"\n              ></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter\n            [field]=\"column.field\"\n            matchMode=\"in\"\n            [showMenu]=\"false\"\n            *ngSwitchCase=\"'calendar'\"\n          >\n            <ng-template\n              pTemplate=\"filter\"\n              let-value\n              let-filter=\"filterCallback\"\n            >\n              <p-calendar\n                [placeholder]=\"'Select-Date'\"\n                [(ngModel)]=\"column.value\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                appendTo=\"body\"\n                (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\"\n                hourFormat=\"12\"\n                (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\"\n                (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\"\n                (onClearClick)=\"backspaceEvent($event, column)\"\n              >\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter\n            [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \"\n            [field]=\"column.field\"\n            display=\"menu\"\n            *ngSwitchDefault\n          >\n          </p-columnFilter>\n        </span>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n    </tr>\n  </ng-template>\n\n  <!-- Body columns on Grid -->\n  <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n    <tr\n      [ngClass]=\"row.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? '' : 'noWrap'\"\n      (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\"\n      #gridRow\n      [id]=\"row[dataKey]\"\n    >\n      <td *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n        <p-tableRadioButton\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n        ></p-tableRadioButton>\n        <p-tableCheckbox\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"\n        ></p-tableCheckbox>\n      </td>\n\n       <!-- first actions column -->\n       <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i\n            [title]=\"action.tooltip\"\n            [class]=\"action.icon\"\n            (click)=\"handleActionClick($event, action, row)\"\n          ></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [hideDeleteBtn]=\"hideDeleteBtn\"\n          [hideEditBtn]=\"hideEditBtn\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"editAllRows\"\n          >\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td\n        *ngFor=\"let column of selectedColumns\"\n        [ngSwitch]=\"column.type\"\n        [style]=\"column.style\"\n      >\n\n      <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n          <td *ngIf=\"!editing\">\n            <p-checkbox\n              [disabled]=\"true\"\n              [binary]=\"true\"\n              (click)=\"selectedRow(row)\"\n              (blur)=\"onFocusOutEvent(column, row)\"\n              [(ngModel)]=\"\n                row[column.field] &&\n                (row[column.field].toString() === '1' ||\n                  row[column.field].toString().toLowerCase() === 'true' ||\n                  row[column.field].toString().toLowerCase() === 'y')\n                  ? checked\n                  : unChecked\n              \"\n            >\n            </p-checkbox>\n          </td>\n          <td *ngIf=\"editing\">\n            <span *ngSwitchCase=\"'boolean'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <!-- for edit checkBox -->\n                  <p-checkbox\n                  (click)=\"onClickEvent(column, row)\"\n                  (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  [binary]=\"true\"\n                  [(ngModel)]=\"\n                  row[column.field] &&\n                  (row[column.field].toString() === '1' ||\n                    row[column.field].toString().toLowerCase() === 'true' ||\n                    row[column.field].toString().toLowerCase() === 'y')\n                    ? editModeChecked\n                    : editModeunCkecked\n                \"\n                  (blur)=\"onFocusOutEvent(column, row)\"\n                ></p-checkbox>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  {{ row[column.field] }}\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span\n              *ngIf=\"column.target !== '_self'\"\n              (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"\n              [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n            >\n              <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                {{\n                  setConditionBaseValue(row, column)\n                }}\n              </a>\n            </span>\n            <span\n              *ngIf=\"column.target === '_self'\"\n              (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"\n              [class]=\"column.editable === false ? '' :  allowDisabled(column,row) ? 'disable-link' : ''\"\n            >\n              <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n                {{\n                  setConditionBaseValue(row, column)\n                }}\n              </a>\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input\n                *ngIf=\"!row.isNew\"\n                pInputText\n                (click)=\"onClickEvent(column, row)\"\n                type=\"text\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                (blur)=\"onFocusOutEvent(column, row)\"\n                (change)=\"onChangeEvent(column, row)\"\n              />\n              <input\n                pInputText\n                *ngIf=\"row.isNew\"\n                type=\"text\"\n                (click)=\"onClickEvent(column, row)\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                (blur)=\"onFocusOutEvent(column, row)\"\n                (change)=\"onChangeEvent(column, row)\"\n              />\n            </span>\n            <span *ngIf=\"column.editable === false\" \n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span>\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\n                  </a>\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span\n            class=\"custom-link\"\n            (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\"\n            [title]=\"\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText\n                ? column.displayText\n                : row[column.field]\n            \"\n          >\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText ? column.displayText : row[column.field]\n            }}\n          </span>\n        </span>\n\n        <!-- dialog column on Grid -->\n        <span *ngSwitchCase=\"'dialog'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\"\n                [title]=\"setConditionBaseValue(row, column)\"\n              >\n                <span *ngIf=\"column.editable === true\">\n                  <input\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"\n                    column.editable === false || column.editable === undefined\n                  \"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n                  \"\n                  (click)=\"openGridDialog(column, row)\"\n                >\n                  {{ !column.displayText && row.isNew ? '' : setConditionBaseValue(row, column) }}\n                </span>\n              </span>\n\n              <span\n                *ngIf=\"row[column.field + '_secondType'] === 'date'\"\n                [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \"\n              >\n                <p-calendar\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\"\n                  hourFormat=\"12\"\n                  [showTime]=\"column.showTime\"\n                  (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                ></p-calendar>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span\n              [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n                (click)=\"openGridDialog(column, row)\"\n                *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n                [title]=\"setConditionBaseValue(row, column)\"\n              >\n                {{ setConditionBaseValue(row, column) }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n              <input\n                readonly\n                type=\"text\"\n                pInputText\n                [(ngModel)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n                row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [name]=\"row[column.field]\"\n                (keyup.tab)=\"selectLookupField(column, row)\"\n                [disabled]=\"allowDisabled(column,row)\"\n                (click)=\"selectLookupField(column, row)\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              \t(blur)=\"onFocusOutEvent(column, row)\"\n              />\n              <div *ngIf=\"!allowDisabled(column,row)\"><button *ngIf=\"row[column.field] && typeOf(row[column.field]) === 'object'\n                ? row[column.field].text\n                : row[column.field] && !column.disabled\"  icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column,row)\"></button></div>\n            </div>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span *ngIf=\"column.linkId\">\n                <a [href]=\"row[column.field + '_obj']?.hyperlink\" [target]=\"column.target === '_self' ? '' :  '_blank'\"> \n                  {{\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.action ?  row[column.field]?.text : row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field]\n                  }}\n                </a>\n              </span>\n              <span\n              *ngIf=\"!column.linkId\"\n                [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n                (click)=\"openLookupHyperlink(column, row)\"\n              >\n                {{\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.action ?  row[column.field]?.text : row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field]\n                }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- Numeric Input column on Grid -->\n        <span *ngSwitchCase=\"'numeric'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for Currency && Decimal && Percent -->\n              <span class=\"input-number\">\n                <p-inputNumber\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [class]=\"\n                    column.errorMessage\n                      ? 'ng-invalid ng-dirty'\n                      : 'form-control'\n                  \"\n                  [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\"\n                  [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\n                  \"\n                  [currency]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.currency\n                      ? column.format.formatParams.currency\n                      : 'USD'\n                  \"\n                  [locale]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.locale\n                      ? column.format.formatParams.locale\n                      : 'en-US'\n                  \"\n                  [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                  [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                  [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && !column?.format?.formatParams?.allowCalculate \n                      ? '%'\n                      : ''\n                  \"\n                >\n                </p-inputNumber>\n              </span>\n              <ng-template #locked_field\n                ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                  {{ row[column.field] }}\n                </span></ng-template\n              >\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span\n              [title]=\"setNumericFormat(column, row)\">\n                {{\n                  setNumericFormat(column, row)\n                }}\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        \n      <!-- Button column on Grid -->\n      <span [title]=\"column.value ? column.value : column.icon\">\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\"\n            pButton\n            type=\"button\"\n            [icon]=\"row[column.field]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n            [name]=\"column.header\"\n            class=\"merge-btn\"\n            [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.action?.displayText : column.value\"\n            [ngStyle]=\"{\n              background: column.color ? column.color : ''\n            }\"\n            (click)=\"onClickButton(column, row)\"\n          ></button>\n        </div>\n      </span>\n\n        <!-- Date column on Grid -->\n        <span\n          *ngSwitchCase=\"'date'\"\n          [title]=\"setConditionBaseValue(row,column)\"\n        >\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\"\n                hourFormat=\"12\"\n                [defaultDate]=\"defaultDate\"\n                [stepMinute] = \"column.minutesInterval ? column.minutesInterval : 1\"\n                [showTime]=\"column.showTime\"\n                [timeOnly]=\"column.timeOnly\"\n                [dateFormat]=\"column.format ? column.format : calendarFormat\"\n                (keyup)=\"calenderInputValue(column, row)\"\n                (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"\n              ></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span\n              *ngSwitchCase=\"'dropdown'\"\n              [class]=\"dropdownInput ? '' : 'output-dropdown'\"\n              [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \"\n            >\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown\n                    *ngIf=\"!row[column.field]?.action?.hidden\"\n                    [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\"\n                    [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\"\n                    (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\"\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\"\n                    [filter]=\"column.allowSearch\"\n                  ></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field]?.action?.hidden\">\n                    {{\n                      setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n             <!-- MultiSelect column on Grid -->\n             <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    [options]=\"column.data\"\n                    [optionLabel]=\"column.optionLabel\"\n                    [optionValue]=\"column.optionValue\"\n                    (onChange)=\"onChangeEvent(column, row)\"\n                    (onPanelShow)=\"showOption(column, row)\"\n                    (click)=\"onClickEvent(column, row)\"\n                    [appendTo]=\"'body'\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  >\n                  </p-multiSelect>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span\n                    [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\n                    \"\n                  >\n                    {{\n                      row[column.displayField]\n                        ? row[column.displayField] :\n                        setMultiSelectData(column, row[column.field])\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- AutoComplete Search -->\n            <span\n            *ngSwitchCase=\"'AutoComplete'\"\n            >\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-autoComplete\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [name]=\"column.header\"\n                  [suggestions]=\"column.data\"\n                  [field]=\"column.displayField\"\n                  [(ngModel)]=\"row[column.field]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : typeOf(row[column.field]) === 'object' && row[column.field]?.text ? row[column.field]?.text : row[column.field]\" \n                  [dropdown]=\"column.showOption\"\n                  (onChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\"\n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  [multiple]=\"true\"\n                  (keydown.enter)=\"onAutoCompleteFocusOut($event, column)\"\n                >\n                </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                        {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ? value[column.displayField]  : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>  \n         <!-- Add Generate Report Button -->\n         <span *ngSwitchCase=\"'report'\">    \n          <p-cellEditor>   \n            <ng-template pTemplate=\"output\">\n      <se-generate-report-btn [repId]=\"column.reportId\" [params]=\"column.params\" [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n      </ng-template>\n      </p-cellEditor>\n        </span>\n\n            <span *ngSwitchDefault>\n              <!-- Input column on Grid -->\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <input\n                    pInputText\n                    type=\"text\"\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                     row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\"\n                    *ngIf=\"column.field !== dataKey; else locked_field\"\n                  />\n                  <ng-template #locked_field\n                    ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template\n                  >\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span\n                    (click)=\"onClickEvent(column, row)\"\n                    [title]=\"\n                    column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    \"\n                  >\n                    {{\n                      row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      </td>\n       <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i\n            [title]=\"action.tooltip\"\n            [class]=\"action.icon\"\n            (click)=\"handleActionClick($event, action, row)\"\n          ></i>\n        </span>\n      </td>\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [hideDeleteBtn]=\"hideDeleteBtn\"\n          [hideEditBtn]=\"hideEditBtn\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"editAllRows\"\n          >\n          </se-grid-row-actions>\n        </span>\n      </td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer columns on Grid -->\n  <ng-template pTemplate=\"footer\">\n    <tr *ngIf=\"aggregateFooter\">\n      <td *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" [style]=\"outerColumn.style\">\n      <div *ngFor=\"let innerColumn of selectedColumns\">\n        <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n          <div *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field.toLowerCase() === outerColumn.field.toLowerCase()) || aggr.displayField && aggr.displayField.toLowerCase() === outerColumn.field.toLowerCase())\">\n             <div [innerHTML]=\"aggr.aggrValue\">\n             </div>\n        </div>\n        </div>\n        </div>\n      </td>\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n    </tr>\n  </ng-template>\n</p-table>\n",
                     styles: [".action-btn{margin-right:10px;cursor:pointer}:host ::ng-deep .two-action-btn{flex:0!important;flex-basis:6%!important}:host ::ng-deep .three-action-btn{flex:0!important;flex-basis:8%!important}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .horizontal-scroll .p-datatable{position:relative;width:calc(100vw - 263px);overflow:auto;height:calc(100vh - 134px)}:host ::ng-deep .horizontal-scroll .p-datatable th,:host ::ng-deep .horizontal-scroll .p-datatable td{min-width:150px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:0 1rem!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td span{vertical-align:middle}:host ::ng-deep td[ng-reflect-ng-switch=multi-select] span{overflow:visible!important}:host ::ng-deep td[ng-reflect-ng-switch=dropdown] span{overflow:visible!important}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 0}:host ::ng-deep .input-number input{border:0;padding:0 10px 0 0;outline:none!important;box-shadow:none!important}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:12px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disable-link{color:#e4b7b8;pointer-events:none;text-decoration:underline;opacity:.5}.hyperlink{color:#cc7272;text-decoration:underline;cursor:pointer}.custom-link{color:#205dcf;cursor:pointer;font-size:12px}.setActionColumnWidth{display:flex}.noWrap td span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.highlighted-row{background-color:#dee2e6!important}td[ng-reflect-ng-switch=AutoComplete] span{overflow:visible!important}.hide-clear-filter-button{display:none!important}#hide-border{border-bottom:0!important}p-celleditor p-inputnumber{border:0}.merge-btn{margin-top:2px;line-height:14px}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
                 },] }
     ];
@@ -6609,6 +6813,9 @@
                 height: ((_b = formField.hyperlink) === null || _b === void 0 ? void 0 : _b.height) ? formField.hyperlink.height : '80%',
                 data: { value: (_c = formField.hyperlink) === null || _c === void 0 ? void 0 : _c.link, iFrameId: formField.label },
             });
+            setTimeout(function () {
+                draggableDialog(formField === null || formField === void 0 ? void 0 : formField.field);
+            }, 100);
             ref.onClose.subscribe(function (res) {
                 if (res) {
                     if (formField.onReturn) {
@@ -6643,6 +6850,9 @@
                 if (componentName) {
                     this.pageLoggerService.savePageLoggerInfo((_h = this.router.url) === null || _h === void 0 ? void 0 : _h.substring(1), componentName);
                 }
+                setTimeout(function () {
+                    draggableDialog((formField === null || formField === void 0 ? void 0 : formField.field) ? formField === null || formField === void 0 ? void 0 : formField.field : formField === null || formField === void 0 ? void 0 : formField.label);
+                }, 100);
                 dialog.onClose.subscribe(function (res) {
                     if (res) {
                         if (formField.onReturn) {
@@ -6664,6 +6874,9 @@
                 data: { value: ((_b = formField.label.labelControl.hyperlink) === null || _b === void 0 ? void 0 : _b.link) ? formField.label.labelControl.hyperlink.link : '', iFrameId: formField.label.name },
             });
             this.pageLoggerService.savePageLoggerInfo((_c = this.router.url) === null || _c === void 0 ? void 0 : _c.substring(1), 'IframeComponent');
+            setTimeout(function () {
+                draggableDialog((formField === null || formField === void 0 ? void 0 : formField.field) ? formField === null || formField === void 0 ? void 0 : formField.field : formField === null || formField === void 0 ? void 0 : formField.label);
+            }, 100);
             ref.onClose.subscribe(function (res) {
                 if (res) {
                     if (formField.onReturn) {
@@ -6916,6 +7129,9 @@
                 formField.label.labelControl &&
                 formField.label.labelControl.lookupControl) {
                 var ref = this.setDialogData(formField, formField.label.labelControl.lookupControl);
+                setTimeout(function () {
+                    draggableDialog((formField === null || formField === void 0 ? void 0 : formField.field) ? formField === null || formField === void 0 ? void 0 : formField.field : formField === null || formField === void 0 ? void 0 : formField.label);
+                }, 100);
                 ref.onClose.subscribe(function (res) {
                     if (res) {
                         formField.value = setDialogResponse(formField, formField === null || formField === void 0 ? void 0 : formField.label.labelControl.lookupControl, res);
@@ -6939,6 +7155,9 @@
                 this.lookupFocusOut = true;
                 var value_1 = formField.value;
                 var ref = this.setDialogData(formField, formField.lookupControl);
+                setTimeout(function () {
+                    draggableDialog((formField === null || formField === void 0 ? void 0 : formField.field) ? formField === null || formField === void 0 ? void 0 : formField.field : formField === null || formField === void 0 ? void 0 : formField.label);
+                }, 100);
                 ref.onClose.subscribe(function (res) {
                     var _a;
                     if (formField.field) {
@@ -7022,6 +7241,9 @@
                     disabledText: formfield.disabledText,
                 },
             });
+            setTimeout(function () {
+                draggableDialog((formfield === null || formfield === void 0 ? void 0 : formfield.field) ? formfield === null || formfield === void 0 ? void 0 : formfield.field : formfield === null || formfield === void 0 ? void 0 : formfield.label);
+            }, 100);
             dialogRef.onClose.subscribe(function (data) {
                 if (data && formfield.onReturn) {
                     formfield.onReturn(data);
@@ -7152,7 +7374,7 @@
         { type: i0.Component, args: [{
                     selector: 'se-form',
                     template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" key=\"cancelButton\" ></p-confirmDialog>\n<form *ngIf=\"!isFormHidden && form\">\n  <div *ngIf=\"loading\">\n    <p-progressSpinner class=\"progress-spinner p-progress-spinner-circle custom-spinner\"></p-progressSpinner>\n  </div>\n  <div class=\"p-d-flex p-flex-wrap container w-100 my-5\">\n    <span [ngClass]=\"{ 'fixed-height': stickyActions }\">\n      <div *ngFor=\"let formSection of form.formSections\" [class]=\"!formSection.hidden ? 'card w-100' : ''\">\n        <span (click)=\"clickedSection(formSection)\">\n          <div *ngIf=\"!formSection ? '' : sectionDisabled(formSection)\">\n            <div  *ngIf=\"!formSection.hidden\" [class]=\"formSection.class\">\n              <p-accordion>\n                <p-accordionTab [selected]=\"formSection.expanded === false ? false : true\"\n                  [disabled]=\"formSection.accordionDisabled\" [ngClass]=\"!formSection.showAccordion ? 'hide-accordian' : ''\">\n                  <p-header>\n                    <i [class]=\"formSection.icon\" class=\"p-mr-1 p-pl-2\"></i><span class=\"p-pl-4\">{{ formSection.name\n                      }}</span>\n                  </p-header>\n\n                  <div class=\"p-d-flex p-ai-center p-col\">\n                    <label *ngIf=\"!formSection.showAccordion\" for=\"name\" class=\"p-mb-0 p-d-flex p-ai-center p-mr-3\">\n                      <i [class]=\"formSection.icon\" class=\"p-mr-1\"></i>\n                      <b> {{ formSection.name }} </b>\n                    </label>\n\n                    <div\n                    *ngFor=\"let link of formSection.links\"\n                    [class]=\"formSection.disabled ? 'disabled-link' : ''\"\n                    >\n                      <label\n                      class=\"p-mr-3\"\n                      [class]=\"link.name ? 'custom-link' : ''\"\n                      (click)=\"link.onClick()\"\n                      >\n                        {{ link.name }}\n                      </label>\n                    </div>\n                  </div>\n\n                  <div class=\"p-d-flex p-flex-wrap\">\n                    <div\n                      [class]=\"formField.column\n                        ? 'p-col-' + formField.column + setClassName(formField)\n                        : form.column\n                        ? 'p-col-' + form.column + setClassName(formField)\n                        : 'p-col-12 p-md-3 p-d-flex p-flex-column' + setClassName(formField)\"\n                        [ngClass]=\"formField.control === 'break_line' ? 'break-line' : ''\"\n                      *ngFor=\"let formField of formSection.fields; let formFieldIndex = index\"\n                    >\n                      <!-- labelControl Hyperlink on Lookup Control Field-->\n                      <div *ngIf=\"formField.label?.labelControl\">\n                        <div\n                        class=\"link-label custom-link p-mt-1\"\n                        *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target !== '_iframe'\"\n                        >\n                          <a\n                          class=\"pl-2\"\n                          tabindex=\"-1\"\n                          (click)=\"formField.onClick ? onClickEvent(formField) : '' \"\n                          [target]=\"formField.label.labelControl?.hyperlink?.target\"\n                          [href]=\"formField.label.labelControl?.hyperlink?.link\"\n                          [title]=\"formField.label.name\"\n                          >\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                        <div\n                        class=\"link-label custom-link p-mt-1\"\n                        *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target === '_iframe'\"\n                        >\n                        <a\n                            class=\"pl-2\"\n                            tabindex=\"-1\"\n                            (click)=\"loadLabelControlIFrame(formField)\"\n                            [title]=\"formField.label.name\"\n                          >\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                          <!-- labelControl on addTextbox -->\n                          <div\n                          class=\"link-label custom-link p-mt-1\"\n                          *ngIf=\"formField.label && formField.label.labelControl && formField.label.labelControl.lookupControl\"\n                        >\n                          <a\n                          tabindex=\"-1\"\n                          [class]=\"formField.label.disabled ? 'disable-label-control' : 'pl-2'\"\n                            (click)=\"selectLookupLabel(formField)\"\n                            [title]=\"formField.label.name\"\n                          >\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                      </div>\n                      <div [ngSwitch]=\"formField.control\">\n\n                        <!-- Spacer Control -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                            class=\"p-d-flex p-flex-column\"\n                            *ngSwitchCase=\"dynamicCase.SPACER\"\n                          >\n                          <span [class]=\"formField.column? 'p-col-' +formField.column : ''\"></span>\n                          </div>\n                        </span>\n\n                        <!-- Input TextArea -->\n                        <span *ngIf=\"!formField.hidden\">\n\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.TEXTAREA\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                  formField.label.onClick && formField.label.onClick()\n                                  \"\n                                  [title]=\"formField.label.labelControl\n                                  ? ''\n                                  : formField.label.onClick\n                                  ? formField.label.name\n                                  : formField.label\">\n                                  {{\n                                    formField.label.labelControl\n                                      ? ''\n                                      : formField.label.onClick\n                                      ? formField.label.name\n                                      : formField.label\n                                  }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <textarea\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                              pInputTextarea\n                              [rows]=\"formField.row ? formField.row : 1 \"\n                              (change)=\"onChangeEvent(formField)\"\n                              (click)=\"handleClickEvent(formField)\"\n                              [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\"\n                              [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{height: formField.height ? formField.height : ''}\"\n                              (blur)=\"onFocusOutEvent(formField)\"\n                              ></textarea>\n                          </div>\n                        </span>\n\n                        <!-- Text Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                          class=\"p-d-flex p-flex-column\"\n                          *ngSwitchCase=\"dynamicCase.INPUT\"\n                          >\n                          <span\n                          [class]=\"formField.disabled && !formField.showBottomBorder ? 'disabled-link' : ''\"\n                          >\n                            <label\n                            *ngIf=\"!formField.label.labelControl\"\n                            [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                            (click)=\"formField.label.onClick && formField.label.onClick()\"\n                            [title]=\"formField.label && typeOf(formField.label) === 'object'\n                            ? formField.label.name\n                            : formField.label\"\n                            >\n                              {{\n                              formField.label && typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                              <span *ngIf=\"formField.isPassword\">&nbsp; \n                                <i *ngIf=\"formField.textType=='password';else hideButton\" class=\"pi pi-eye\" (click)=\"changePasswordType(formField)\"></i>\n                                <ng-template #hideButton>\n                                  <i  class=\"pi pi-eye-slash\" (click)=\"changePasswordType(formField)\"></i>\n                                </ng-template>\n                              </span>\n                            </label>\n                          </span>\n                            <input\n                              [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\"\n                                [id]=\"formField.showBottomBorder ? 'remove-boder' : ''\"\n                                [type]=\"formField.textType ? formField.textType : 'text'\"\n                                pInputText\n                                [(ngModel)]=\"\n                                formField.value &&\n                                  typeOf(formField.value) === 'object'\n                                  ? formField.value.text\n                                  : formField.value\n                              \"\n                              (change)=\"onChangeEvent(formField)\"\n                              [name]=\"formField.field ? formField.field : formField.label\"\n                              (click)=\"handleClickEvent(formField)\"\n                              [disabled]=\"formField.disabled\"\n                              (blur)=\"onFocusOutEvent(formField)\"\n                            />\n                            <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                          </div>\n                        </span>\n\n                        <!-- Number Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                            class=\"p-d-flex p-flex-column\"\n                            *ngSwitchCase=\"dynamicCase.NUMERIC\"\n                          >\n                            <label\n                              [class]=\"\n                                formField.label.onClick ? 'custom-link' : ''\n                              \"\n                              (click)=\"\n                                formField.label.onClick &&\n                                  formField.label.onClick()\n                              \"\n                              [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\"\n                            >\n                              {{\n                                formField.label.labelControl\n                                  ? ''\n                                  : formField.label.onClick\n                                  ? formField.label.name\n                                  : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <!-- for Currency && number && Decimal && Percent -->\n                            <span\n                              class=\"input-number\"\n                            >\n                              <p-inputNumber\n                                [class]=\"\n                                    formField.errorMessage\n                                      ? 'ng-invalid ng-dirty'\n                                      : 'form-control'\n                                  \"\n                                [(ngModel)]=\"formField.value\"\n                                [name]=\"formField.field\"\n                                (ngModelChange)=\"onChangeEvent(formField)\"\n                                (click)=\"selectLookupField(formField)\"\n                                [disabled]=\"formField.disabled\"\n                                (onBlur)=\"onFocusOutEvent(formField)\"\n                                [mode]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency'\n                                    ? 'currency'\n                                    : 'decimal'\n                                \"\n                                [currency]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency' &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.currency\n                                    ? formField.format.formatParams.currency\n                                    : 'USD'\n                                \"\n                                [locale]=\"formField.format &&\n                                formField.format.type === 'currency' &&\n                                formField.format.formatParams &&\n                                formField.format.formatParams.locale\n                                  ? formField.format.formatParams.locale\n                                  : 'en-US'\n                              \"\n                                [minFractionDigits]=\"\n                                  formField.format &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.digitsInfo\n                                    ? formField.format.formatParams.digitsInfo\n                                    : formField.format &&\n                                      (formField.format.type === 'decimal' || formField.format.type === 'currency')\n                                    ? '2'\n                                    : '0'\n                                \"\n                                [suffix]=\"\n                                  formField.format &&\n                                  formField.format.type === 'percent' && !formField?.format?.formatParams?.allowCalculate\n                                    ? '%'\n                                    : ''\n                                \"\n                              >\n                              </p-inputNumber>\n                            </span>\n                            <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Password Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.PASSWORD\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \"\n                          [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <input\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                              type=\"password\"\n                              (click)=\"handleClickEvent(formField)\"\n                              (change)=\"onChangeEvent(formField)\"\n                              pInputText\n                              [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\"\n                              (blur)=\"onFocusOutEvent(formField)\"\n                              />\n                              <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Checkbox -->\n                        <span [class]=\"formField.class\" *ngIf=\"!formField.hidden\">\n                          <div class=\"p-0 p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n                            <label *ngIf=\"!formField.label.labelControl\"\n                              [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                formField.label.onClick && formField.label.onClick()\n                              \" [title]=\"formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\">{{\n                              formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                              <p-checkbox\n                                class=\"p-d-flex p-ai-center\"\n                                [binary]=\"true\"\n                                [name]=\"formField.field\"\n                                (click)=\"onClickEvent(formField)\"\n                                (change)=\"onChangeEvent(formField)\"\n                                [(ngModel)]=\"formField.value\"\n                                [disabled]=\"formField.disabled\"\n                                (onChange)=\"onFocusOutEvent(formField)\"\n                              >\n                              </p-checkbox>\n                            <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                          </div>\n                        </span>\n\n                        <!-- Calendar -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n                            <span\n                                [class]=\"formField.disabled ? 'disabled-link' : ''\"\n                            >\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \"\n                          [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                          {{\n                            formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                          }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                          </span>\n                            <p-calendar\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty ' + formField.field\n                                  : 'form-control '+ formField.field\n                              \"\n                              [showButtonBar]=\"true\"\n                              [todayButtonStyleClass]=\"formField.timeOnly ? 'hide-today-btn' : ''\"\n                              [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\"\n                              [disabled]=\"formField.disabled\" hourFormat=\"12\"\n                              [defaultDate]=\"defaultDate\"\n                              [stepMinute] = \"formField.minutesInterval ? formField.minutesInterval : 1\"\n                              [showTime]=\"formField.showTime\"\n                              (onShow)=\"setCalenderDate(formField)\"\n                              [timeOnly]=\"formField.timeOnly\"\n                              [view]=\"formField.monthOnly ? 'month' : 'date' \"\n                              (click)=\"handleClickEvent(formField)\"\n                              [dateFormat]=\"formField.format ? formField.format.type : calendarFormat\"\n                              (ngModelChange)=\"calendarChangeValue(formField)\"\n                              (onInput)=\"calenderInputValue(formField)\"\n                              (onClose)=\"onFocusOutEvent(formField)\">\n                            </p-calendar>\n                            <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                          </div>\n                        </span>\n\n                        <!-- Dropdown -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.DROPDOWN\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \"\n                          [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                          {{\n                            formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                          }}\n                              <span *ngIf=\"formField.requiredField && !formField.label?.labelControl\">*</span>\n                            </label>\n                            <p-dropdown\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                              autocomplete=\"off\"\n                              [styleClass]='formField.field'\n                              [placeholder]=\"formField.value\"\n                              [options]=\"formField.data\"\n                              [filter]=\"formField.allowSearch\"\n                              [(ngModel)]=\"formField.value\"\n                              [optionLabel]=\"formField.optionLabel\"\n                              [optionValue]=\"formField.optionValue\"\n                              [name]=\"formField.field\"\n                              (keyup.Tab)=\"tabFocusEvent(formField)\"\n                              (click)=\"clearDropdownValue(formField)\"\n                              [disabled]=\"formField.disabled\"\n                              (onBlur)=\"onFocusOutEvent(formField)\"\n                              [showClear]=\"formField.value ? true : false\"\n                              (onChange)=\"onClearValue(formField, $event)\"\n                              [autoDisplayFirst]=\"formField.value > 0 ? true : false\"\n                              >\n                            </p-dropdown>\n                            <span\n                            *ngIf=\"\n                              !formField?.isValid &&\n                              !formField.hidden\n                            \"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                          </div>\n                        </span>\n\n                        <!-- AutoComplete Search -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.AUTOCOMPLETE\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                              (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\">\n                              {{\n                                formField.label.labelControl\n                                  ? ''\n                                  : formField.label.onClick\n                                  ? formField.label.name\n                                  : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <span class=\"p-fluid\">\n                              <p-autoComplete\n                              [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                                [suggestions]=\"formField.data\"\n                                [(ngModel)]=\"formField.value\"\n                                (onChange)=\"onChangeEvent(formField)\"\n                                (click)=\"handleClickEvent(formField)\"\n                                (completeMethod)=\"autoSearch($event, formField)\"\n                                [dropdown]=\"formField.showOption\"\n                                [field]=\"formField.displayField\"\n                                [name]=\"formField.label\"\n                                [multiple]=\"true\"\n                                [disabled]=\"formField.disabled\"\n                                (onBlur)=\"onFocusOutEvent(formField)\">\n                              </p-autoComplete>\n                            </span>\n                          </div>\n                        </span>\n\n                        <!-- Multi-select -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \"\n                          [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <p-multiSelect\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                              [(ngModel)]=\"formField.value\"\n                              [options]=\"formField.data\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\" [appendTo]=\"'body'\"\n                              [name]=\"formField.field\"\n                              (onChange)=\"onChangeEvent(formField)\"\n                              (click)=\"formField.onClick ? formField.onClick() : ''\"\n                              [disabled]=\"formField.disabled\" (blur)=\"onFocusOutEvent(formField)\">\n                            </p-multiSelect>\n                          </div>\n                        </span>\n\n                        <!-- Hyperlink-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                            [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \"\n                            [title]=\"formField.label\"\n                            *ngSwitchCase=\"dynamicCase.HYPERLINK\"\n                          >\n                            <div\n                              *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.component\n                              \"\n                              (click)=\"hyperlinkDialog(formField)\"\n                            >\n                              {{ formField.label }}\n                            </div>\n                            <div\n                            [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \"\n                              *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target !== '_iframe' &&\n                                !formField.hyperlink.component\n                              \"\n                            >\n                              <a\n                                class=\"pl-2\"\n                                tabindex=\"-1\"\n                                [href]=\"sanitizeUrl(formField.hyperlink?.link)\"\n                                [target]=\"formField.hyperlink?.target\"\n                                (click)=\"handleClickEvent(formField)\"\n                                [title]=\"formField.label\"\n                              >\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </a>\n                            </div>\n                            <div\n                              *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target === '_iframe' &&\n                                !formField.hyperlink.component\n                              \"\n                            >\n                              <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadIFrame(formField)\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </a>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Lookup Control Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.LOOKUP_INPUT\">\n                            <span\n                            [class]=\"formField.disabled ? 'disabled-link' : ''\"\n                          >\n                            <label\n                            *ngIf=\"!formField.label.labelControl\"\n                            [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                            (click)=\"formField.label.onClick && formField.label.onClick()\n                          \"\n                          [title]=\"typeOf(formField.label) === 'object'\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                          </span>\n                          <div class=\"close-icon-wrapper\">\n                            <input\n                            [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \"\n                              type=\"text\" pInputText [(ngModel)]=\"formField.value && typeOf(formField.value) === 'object'\n                              ? formField.value.text\n                              : formField.value\"\n                              autocomplete=\"off\"\n                              [id]=\"formField.field\"\n                              [name]=\"formField.field\"\n                              (click)=\"selectLookupField(formField)\"\n                              [disabled]=\"formField.disabled\"\n                              (keyup.Tab)=\"selectLookupField(formField)\"\n                              readonly\n                              (keydown)=\"$event.preventDefault()\"\n                            />\n                            <div><button *ngIf=\"formField.value && !formField.disabled\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(formField)\"></button></div>\n                          </div>\n                            <span\n                            *ngIf=\"!formField?.isValid\"\n                            class=\"error\"\n                            >{{ formField.errorMessage }}</span\n                          >\n                          </div>\n                        </span>\n\n                        <!-- File Upload Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                            class=\"p-d-flex p-flex-column\"\n                            *ngSwitchCase=\"dynamicCase.FILE_UPLOAD\"\n                          >\n                            <span\n                              [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \"\n                            >\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n                            <se-file-upload\n                              [allowMultiple]=\"formField.selectMultipleFiles\"\n                              [acceptFileTypes]=\"formField.SetfileTypes\"\n                              [fields]=\"formField\"\n                              (fileUrl)=\"setFileUrls($event)\"\n                              (uploadFileOnReturn)=\"fileOnchangeEvent()\"\n                            ></se-file-upload>\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                            }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Display  Card field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div\n                            class=\"p-d-flex p-flex-column\"\n                            *ngSwitchCase=\"dynamicCase.CARD\"\n                          >\n                            <span\n                              [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \"\n                            >\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n\n                            <se-card\n                            [card]=\"formField.card\"\n                            (onDeleteCard)=\"fileOnchangeEvent()\"\n                            (selectedCard)=\"selectedCardClickEvent($event)\"\n                          ></se-card>\n\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                            }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Note Detail Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.NOTE_FIELD\">\n                            <div [class]=\"formField.disabled\n                              ? 'disabled-link'\n                              : 'link-label custom-link'\n                            \"\n                            >\n                              <span class=\"pl-2\" (click)=\"\n                              !formField.disabled\n                                ? handleNoteFieldDialog(formField)\n                                : ''\n                            \"\n                            [title]=\"formField.label.labelControl\n                            ? ''\n                            : formField.label.onClick\n                            ? formField.label.name\n                            : formField.label\">{{formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label}}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </span>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Dynamic Component Container-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div id=\"{{formSection.name}}-{{formFieldIndex}}\"\n                            #dynamicComponentContainer\n                            *ngSwitchCase=\"dynamicCase.COMPONENT\"\n                          ></div>\n                        </span>\n\n                        <!-- Header component-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div  *ngSwitchCase=\"dynamicCase.SECTION_HEADER\">\n                            <label [class]=\"formField.class\">\n                              <b> {{ formField.label }} </b>\n                            </label>\n                          </div>\n                        </span>\n\n                        <!-- Add OnClick Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.ADD_BUTTON\">\n                            <button\n                              pButton\n                              type=\"button\"\n                              [icon]=\"formField.icon\"\n                              [label]=\"formField.label\"\n                              [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{background: formField.color ? formField.color : ''}\"\n                              (click)=\"onClickEvent(formField)\"\n                            ></button>\n                          </div>\n                        </span>\n                        <!-- Add Generate Report Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.REPORT\">          \n                        <se-generate-report-btn [repId]=\"formField.reportId\" [params]=\"formField.params\"  [showDialog]=\"formField.showDialog\"></se-generate-report-btn>\n                          </div>\n                        </span>\n                        \n\n                        <!-- Add Input Switch -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.SWITCH\">\n                            <div>\n                              <label [title]=\"formField.label\">\n                              {{ formField.label }}\n                              </label>\n                            </div>\n                            <p-inputSwitch\n                              [name]=\"formField.label ? formField.label: 'switch'\"\n                              [(ngModel)]=\"formField.value\"\n                              [disabled]=\"formField.disabled\"\n                              (click)=\"onClickEvent(formField)\"\n                            ></p-inputSwitch>\n                          </div>\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </p-accordionTab>\n              </p-accordion>\n            </div>\n           </div>\n        </span>\n\n      </div>\n    </span>\n\n    <!-- save and close buttons -->\n    <div\n    class=\"p-col-12 p-d-flex p-jc-end\"\n    [ngClass]=\"{ sticky: stickyActions }\"\n    >\n      <!-- save button -->\n      <button\n      *ngIf=\"!hideSaveButton\"\n      [disabled]=\"isFormDisabled\"\n      pButton\n      type=\"button\"\n      icon=\"pi pi-check\"\n      label=\"Save\"\n      class=\"p-button-success\"\n      (click)=\"onSaveForm()\"\n      ></button>\n\n      <!-- close button -->\n      <button\n      *ngIf=\"!hideCancelButton\"\n      [disabled]=\"isFormDisabled\"\n      (click)=\"onCancelForm()\"\n      pButton type=\"button\"\n      icon=\"pi pi-times\"\n      label=\"Cancel\"\n      class=\"p-button-danger p-ml-3\"\n      ></button>\n    </div>\n  </div>\n</form>\n",
-                    styles: ["*{font-family:\"Lato\",sans-serif}.fa-solid,.fa-light,.fa-regular,.fa-thin,.fa-duotone{font-family:\"Font Awesome 6 Pro\"!important}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.break-line{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .toast-error{background:black!important}:host ::ng-deep .p-float-label label{margin-top:-.5rem!important}:host ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:0}:host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .input-number{border:0;border-radius:2px}:host ::ng-deep .input-number input{border:0;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:10.8px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .close-icon-wrapper{position:relative}:host ::ng-deep div[ng-reflect-ng-switch=lookup_input] span .close-icon-wrapper input{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;cursor:pointer}:host ::ng-deep .hide-today-btn{visibility:hidden}label{margin:0 0 5px}span,textarea{width:100%}.error{color:red}.link-label{display:flex;align-items:center;height:39px;margin-top:22px}.link-label a{color:#4e87f1;cursor:pointer;font-size:12px;text-decoration:none}.custom-link{color:#4e87f1;cursor:pointer;font-size:12px}.label-custom-link{font-size:12px}.hidden{display:none!important}.sticky{width:calc(100% - 260px);position:fixed;bottom:0;right:0}.fixed-height{height:calc(100vh - 65px)}.disabled-link label{pointer-events:none;opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{pointer-events:none;opacity:.5}.disabled-link div{color:#636363}.disable-label-control{pointer-events:none}#remove-boder{border:none!important}input[type=text]{cursor:pointer}.progress-spinner{position:fixed;z-index:999;height:60px;width:60px;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0}.progress-spinner:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000026}:host ::ng-deep .custom-spinner .p-progress-spinner-circle{stroke:#000!important}:host ::ng-deep .p-progress-spinner{height:60px!important;width:60px!important}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
+                    styles: ["*{font-family:\"Lato\",sans-serif}.fa-solid,.fa-light,.fa-regular,.fa-thin,.fa-duotone{font-family:\"Font Awesome 6 Pro\"!important}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.break-line{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .toast-error{background:black!important}:host ::ng-deep .p-float-label label{margin-top:-.5rem!important}:host ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:0}:host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .input-number{border:0;border-radius:2px}:host ::ng-deep .input-number input{border:0;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:10.8px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .close-icon-wrapper{position:relative}:host ::ng-deep div[ng-reflect-ng-switch=lookup_input] span .close-icon-wrapper input{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;cursor:pointer}:host ::ng-deep .hide-today-btn{visibility:hidden}label{margin:0 0 5px}span,textarea{width:100%}.error{color:red}.link-label{display:flex;align-items:center;height:39px;margin-top:22px}.link-label a{color:#4e87f1;cursor:pointer;font-size:12px;text-decoration:none}.custom-link{color:#4e87f1;cursor:pointer;font-size:12px}.label-custom-link{font-size:12px}.hidden{display:none!important}.sticky{width:calc(100% - 260px);position:fixed;bottom:0;right:0}.fixed-height{height:calc(100vh - 65px)}.disabled-link label{pointer-events:none;opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{pointer-events:none;opacity:.5}.disabled-link div{color:#636363}.disable-label-control{pointer-events:none}#remove-boder{border:none!important}input[type=text]{cursor:pointer}.progress-spinner{position:fixed;z-index:999;height:60px;width:60px;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0}.progress-spinner:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000026}.p-dialog{position:absolute!important}:host ::ng-deep .custom-spinner .p-progress-spinner-circle{stroke:#000!important}:host ::ng-deep .p-progress-spinner{height:60px!important;width:60px!important}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
                 },] }
     ];
     /** @nocollapse */
@@ -9517,6 +9739,7 @@
     exports.closeIFrame = closeIFrame;
     exports.currentUrl = currentUrl;
     exports.disableEditRowColumn = disableEditRowColumn;
+    exports.draggableDialog = draggableDialog;
     exports.enabledEditRowColumn = enabledEditRowColumn;
     exports.fileComponent = fileComponent;
     exports.findKeysAndValue = findKeysAndValue;