@churchillliving/se-ui-toolkit 6.53.98 → 6.53.100

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

@@ -746,8 +746,8 @@
                         else {
                             return resolve('');
                         }
-                    }, function (_a) {
-                        var error = _a.error;
+                    }, function (_h) {
+                        var error = _h.error;
                         reject(error);
                     });
                 }
@@ -761,8 +761,8 @@
                         else {
                             return resolve('');
                         }
-                    }, function (_a) {
-                        var error = _a.error;
+                    }, function (_h) {
+                        var error = _h.error;
                         reject(error);
                     });
                 }
@@ -786,8 +786,8 @@
         HyperlinkService.prototype.addHyperlinks = function (columns) {
             return __awaiter(this, void 0, void 0, function () {
                 var linkIds, params;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             linkIds = [];
                             if (!(columns && Array.isArray(columns))) return [3 /*break*/, 2];
@@ -804,7 +804,7 @@
                             return [4 /*yield*/, this.buildUrl(linkIds, params).then(function (res) {
                                     return res;
                                 })];
-                        case 1: return [2 /*return*/, _a.sent()];
+                        case 1: return [2 /*return*/, _h.sent()];
                         case 2:
                             if (!columns.linkId) return [3 /*break*/, 4];
                             linkIds.push(columns.linkId);
@@ -812,12 +812,60 @@
                             return [4 /*yield*/, this.buildUrl(linkIds, params).then(function (res) {
                                     return res;
                                 })];
-                        case 3: return [2 /*return*/, _a.sent()];
+                        case 3: return [2 /*return*/, _h.sent()];
                         case 4: return [2 /*return*/];
                     }
                 });
             });
         };
+        HyperlinkService.prototype.setLinkParamValues = function (_h, field, params) {
+            var formSections = _h.formSections;
+            return formSections === null || formSections === void 0 ? void 0 : formSections.map(function (section) {
+                return section.fields.map(function (formField) {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    var isLabelLink = formField.label && typeof formField.label === 'object';
+                    if (((_a = formField.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase()) ||
+                        (isLabelLink &&
+                            ((_c = (_b = formField.label) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase())) ||
+                        (formField.label &&
+                            typeof formField.label === 'string' &&
+                            ((_d = formField.label) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase()))) {
+                        var newLink_1 = isLabelLink
+                            ? (_f = (_e = formField.label) === null || _e === void 0 ? void 0 : _e.labelControl) === null || _f === void 0 ? void 0 : _f.orignalLink
+                            : (_g = formField.hyperlink) === null || _g === void 0 ? void 0 : _g.link;
+                        if (newLink_1 && newLink_1.length > 0) {
+                            return params.map(function (paramObj) {
+                                var _a, _b, _c, _d;
+                                if ((typeof paramObj.value === 'object' && paramObj.value) ||
+                                    (typeof paramObj.value === 'string' && ((_a = paramObj.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+                                    // removing https:// or http:// from hyperlink param value
+                                    if ((((_b = paramObj.value) === null || _b === void 0 ? void 0 : _b.toString().includes('https://')) || ((_c = paramObj.value) === null || _c === void 0 ? void 0 : _c.toString().includes('http://'))) &&
+                                        (newLink_1.includes('https://') || newLink_1.includes('http://'))) {
+                                        paramObj.value = paramObj.value.replace('https://', '').replace('http://', '');
+                                    }
+                                    var paramName = paramObj.name.toLowerCase();
+                                    var paramFormat = !paramObj.value
+                                        ? '{{' + paramName + '}}'
+                                        : paramName;
+                                    if (newLink_1.localeCompare(paramFormat)) {
+                                        var setLink = paramFormat !== '{{' + paramFormat + '}}'
+                                            ? '{{' + paramFormat + '}}'
+                                            : paramFormat;
+                                        newLink_1 = newLink_1.replace(new RegExp(setLink, 'ig'), (_d = (paramObj.value)) === null || _d === void 0 ? void 0 : _d.toTrim());
+                                        if (newLink_1 && !newLink_1.startsWith('http')) {
+                                            newLink_1 = "http://" + newLink_1;
+                                        }
+                                    }
+                                    return isLabelLink
+                                        ? (formField.label.labelControl.hyperlink.link = newLink_1)
+                                        : (formField.hyperlink.link = newLink_1);
+                                }
+                            });
+                        }
+                    }
+                });
+            });
+        };
         HyperlinkService.prototype.setSidebarLink = function (response, sidebar) {
             response.forEach(function (res) {
                 sidebar.forEach(function (item) {
@@ -971,24 +1019,6 @@
             close.click();
         }
     }
-    function setAddComponentData(_k, id, value) {
-        var formSections = _k.formSections;
-        formSections === null || formSections === void 0 ? void 0 : formSections.forEach(function (section) {
-            section.fields.forEach(function (field) {
-                var _a;
-                if (field.control === exports.EFormControl.COMPONENT && field.componentControl && ((_a = field.componentControl) === null || _a === void 0 ? void 0 : _a.id) === id) {
-                    var keys = Object.keys(value);
-                    keys.forEach(function (key) {
-                        var _k;
-                        var _a;
-                        field.componentControl.data = Object.assign(Object.assign({}, (_a = field.componentControl) === null || _a === void 0 ? void 0 : _a.data), (_k = {}, _k[key] = value[key], _k));
-                    });
-                    changeDynamicFormState(id, field.componentControl.data);
-                }
-                ;
-            });
-        });
-    }
     function toDecimal(value) {
         if (value) {
             return parseFloat(value.toString()).toFixed(2);
@@ -1142,54 +1172,6 @@
         });
         return formSections;
     }
-    function setLinkParamValues(_k, field, params) {
-        var formSections = _k.formSections;
-        return formSections === null || formSections === void 0 ? void 0 : formSections.map(function (section) {
-            return section.fields.map(function (formField) {
-                var _a, _b, _c, _d, _e, _f, _g;
-                var isLabelLink = formField.label && typeof formField.label === 'object';
-                if (((_a = formField.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase()) ||
-                    (isLabelLink &&
-                        ((_c = (_b = formField.label) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase())) ||
-                    (formField.label &&
-                        typeof formField.label === 'string' &&
-                        ((_d = formField.label) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === (field === null || field === void 0 ? void 0 : field.toLowerCase()))) {
-                    var newLink_1 = isLabelLink
-                        ? (_f = (_e = formField.label) === null || _e === void 0 ? void 0 : _e.labelControl) === null || _f === void 0 ? void 0 : _f.orignalLink
-                        : (_g = formField.hyperlink) === null || _g === void 0 ? void 0 : _g.link;
-                    if (newLink_1 && newLink_1.length > 0) {
-                        return params.map(function (paramObj) {
-                            var _a, _b, _c;
-                            if ((typeof paramObj.value === 'object' && paramObj.value) ||
-                                (typeof paramObj.value === 'string' && ((_a = paramObj.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
-                                // removing https:// or http:// from hyperlink param value
-                                if ((((_b = paramObj.value) === null || _b === void 0 ? void 0 : _b.toString().includes('https://')) || ((_c = paramObj.value) === null || _c === void 0 ? void 0 : _c.toString().includes('http://'))) &&
-                                    (newLink_1.includes('https://') || newLink_1.includes('http://'))) {
-                                    paramObj.value = paramObj.value.replace('https://', '').replace('http://', '');
-                                }
-                                var paramName = paramObj.name.toLowerCase();
-                                var paramFormat = !paramObj.value
-                                    ? '{{' + paramName + '}}'
-                                    : paramName;
-                                if (newLink_1.localeCompare(paramFormat)) {
-                                    var setLink = paramFormat !== '{{' + paramFormat + '}}'
-                                        ? '{{' + paramFormat + '}}'
-                                        : paramFormat;
-                                    newLink_1 = newLink_1.replace(new RegExp(setLink, 'ig'), toTrim(paramObj.value));
-                                    if (newLink_1 && !newLink_1.startsWith('http')) {
-                                        newLink_1 = "http://" + newLink_1;
-                                    }
-                                }
-                                return isLabelLink
-                                    ? (formField.label.labelControl.hyperlink.link = newLink_1)
-                                    : (formField.hyperlink.link = newLink_1);
-                            }
-                        });
-                    }
-                }
-            });
-        });
-    }
     function setSidebarLinkParamValues(link, params) {
         var newLink = link;
         if (params && params.length > 0) {
@@ -1202,7 +1184,7 @@
         }
         return newLink;
     }
-    function setFormPropValues(_k, field, props) {
+    function setFormFieldProp(_k, field, props) {
         var formSections = _k.formSections;
         return formSections === null || formSections === void 0 ? void 0 : formSections.map(function (section) {
             return section.fields.map(function (formField) {
@@ -1447,22 +1429,6 @@
             return '';
         }
     }
-    function setSidebarPropValues(sidebar, section, props) {
-        sidebar.map(function (sidebarItem) {
-            var _a;
-            if (((_a = sidebarItem.section) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === section.toLowerCase()) {
-                props.map(function (prop) {
-                    var _a, _b;
-                    if (((_a = prop.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'data' && ((_b = sidebarItem.data) === null || _b === void 0 ? void 0 : _b.data)) {
-                        sidebarItem.data.data = prop.value;
-                    }
-                    else {
-                        return setPropValue(sidebarItem, prop);
-                    }
-                });
-            }
-        });
-    }
     function setSectionPropValues(_k, sectionName, props) {
         var formSections = _k.formSections;
         formSections === null || formSections === void 0 ? void 0 : formSections.map(function (section) {
@@ -3338,6 +3304,7 @@
             this.addDataKeyValue = false;
             this.globalData = [];
             this.sortDisabled = false;
+            this.hideRefreshBtn = true;
             // Stores selected columns
             this._selectedColumns = [];
             // Boolean prop to allow horizontal Scroll on Table.
@@ -4252,6 +4219,7 @@
          */
         GridComponent.prototype.handleServerSideEvents = function (event) {
             var _this = this;
+            this.gridfilter = event;
             setTimeout(function () {
                 var _a, _b;
                 if (_this.selectedColumns && _this.selectedColumns.length > 0) {
@@ -5284,6 +5252,10 @@
                 column.onReturn(event.query, column, row);
             }
         };
+        // Refresh grid
+        GridComponent.prototype.refresh = function () {
+            this.handleServerSideEvents(this.gridfilter);
+        };
         // Remove FilterValues
         GridComponent.prototype.cleargridFiltersValue = function () {
             var _this = this;
@@ -5482,7 +5454,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=\"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  <!-- header Button for Adding new Row on Grid -->\n  <button\n    pButton\n    *ngIf=\"useInlineCRUD && addRowPermission && !hideOnRowAddBtn\"\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\"\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 ? 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 }\">\n        Select\n      </th>\n      <th\n      *ngIf=\"setActionColumnAsFirst && 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        <p-sortIcon\n          *ngIf=\"column.sorting !== false\"\n          [field]=\"column.field\"\n        ></p-sortIcon>\n      </div>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && 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=\"setActionColumnAsFirst\" [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 && 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        ></p-tableRadioButton>\n        <p-tableCheckbox\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row)\"\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'\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"disabledSaveBtn\"\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\">\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                (click)=\"openLink(row[column.field + '_obj']?.hyperlink)\"\n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\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?.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)]=\"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                  [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'\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"disabledSaveBtn\"\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=\"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=\"hideRefreshBtn\"\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 && !hideOnRowAddBtn\"\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\"\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 ? 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 }\">\n        Select\n      </th>\n      <th\n      *ngIf=\"setActionColumnAsFirst && 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        <p-sortIcon\n          *ngIf=\"column.sorting !== false\"\n          [field]=\"column.field\"\n        ></p-sortIcon>\n      </div>\n      </th>\n      <th *ngIf=\"!setActionColumnAsFirst && 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=\"setActionColumnAsFirst\" [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 && 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        ></p-tableRadioButton>\n        <p-tableCheckbox\n          [value]=\"row\"\n          *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row)\"\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'\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"disabledSaveBtn\"\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\">\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                (click)=\"openLink(row[column.field + '_obj']?.hyperlink)\"\n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                    {{\n                      setConditionBaseValue(row, column)\n                    }}\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?.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)]=\"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                  [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'\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions\n          [editing]=\"editing\"\n          [editRowPermission]=\"editRowPermission\"\n          [deleteRowPermission]=\"deleteRowPermission\"\n          [row]=\"row\"\n          (onRowEditInitBtn)=\"onRowEditInit($event)\"\n          (deleteRecordBtn)=\"deleteRecord($event)\"\n          (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n          (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n          [editAllRows]=\"disabledSaveBtn\"\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}#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"]
                 },] }
     ];
@@ -5509,6 +5481,7 @@
         table: [{ type: i0.ViewChild, args: ['dt',] }],
         selectedRows: [{ type: i0.Input }],
         addDataKeyValue: [{ type: i0.Input }],
+        hideRefreshBtn: [{ type: i0.Input }],
         horizontalScroll: [{ type: i0.Input }],
         loading: [{ type: i0.Input }],
         autoLoadData: [{ type: i0.Input }],
@@ -5942,6 +5915,25 @@
                 return _this.addFormField(fieldInfo);
             });
         };
+        // load component on form
+        FormService.prototype.setAddComponentData = function (_e, id, value) {
+            var formSections = _e.formSections;
+            formSections === null || formSections === void 0 ? void 0 : formSections.forEach(function (section) {
+                section.fields.forEach(function (field) {
+                    var _a;
+                    if (field.control === exports.EFormControl.COMPONENT && field.componentControl && ((_a = field.componentControl) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                        var keys = Object.keys(value);
+                        keys.forEach(function (key) {
+                            var _e;
+                            var _a;
+                            field.componentControl.data = Object.assign(Object.assign({}, (_a = field.componentControl) === null || _a === void 0 ? void 0 : _a.data), (_e = {}, _e[key] = value[key], _e));
+                        });
+                        changeDynamicFormState(id, field.componentControl.data);
+                    }
+                    ;
+                });
+            });
+        };
         FormService.prototype.getCardList = function (uniqueKey, filters, sorts) {
             var _this = this;
             if (filters === void 0) { filters = []; }
@@ -8191,7 +8183,7 @@
                         uniqueKey: record.isuniquekey,
                         filters: []
                     }).subscribe(function (response) {
-                        setFormPropValues(_this.dynamicForm, record.paramname, [
+                        setFormFieldProp(_this.dynamicForm, record.paramname, [
                             { name: 'data', value: response.records },
                         ]);
                     }, function (error) {
@@ -9048,6 +9040,22 @@
             }
             return false;
         };
+        SideBarService.prototype.setSidebarPropValues = function (sidebar, section, props) {
+            sidebar.map(function (sidebarItem) {
+                var _a;
+                if (((_a = sidebarItem.section) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === section.toLowerCase()) {
+                    props.map(function (prop) {
+                        var _a, _b;
+                        if (((_a = prop.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'data' && ((_b = sidebarItem.data) === null || _b === void 0 ? void 0 : _b.data)) {
+                            sidebarItem.data.data = prop.value;
+                        }
+                        else {
+                            return setPropValue(sidebarItem, prop);
+                        }
+                    });
+                }
+            });
+        };
         return SideBarService;
     }());
     /** @nocollapse */ SideBarService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function SideBarService_Factory() { return new SideBarService(); }, token: SideBarService, providedIn: "root" });
@@ -9310,7 +9318,6 @@
     exports.objConvertToLower = objConvertToLower;
     exports.onDynamicFormStateChange = onDynamicFormStateChange;
     exports.removeActiveIconClass = removeActiveIconClass;
-    exports.setAddComponentData = setAddComponentData;
     exports.setAllFormFieldsValues = setAllFormFieldsValues;
     exports.setAndFilter = setAndFilter;
     exports.setAutoCompleteData = setAutoCompleteData;
@@ -9321,22 +9328,21 @@
     exports.setEditFormFields = setEditFormFields;
     exports.setFilter = setFilter;
     exports.setFormField = setFormField;
+    exports.setFormFieldProp = setFormFieldProp;
     exports.setFormFieldValue = setFormFieldValue;
     exports.setFormFields = setFormFields;
-    exports.setFormPropValues = setFormPropValues;
     exports.setGlobalFilterPropValues = setGlobalFilterPropValues;
     exports.setGridLookupData = setGridLookupData;
     exports.setHyperlink = setHyperlink;
     exports.setHyperlinkComponentData = setHyperlinkComponentData;
     exports.setHyperlinkParamValue = setHyperlinkParamValue;
-    exports.setLinkParamValues = setLinkParamValues;
     exports.setLookupData = setLookupData;
     exports.setMinutesInterval = setMinutesInterval;
+    exports.setPropValue = setPropValue;
     exports.setSaveCardValues = setSaveCardValues;
     exports.setSaveFormValues = setSaveFormValues;
     exports.setSectionPropValues = setSectionPropValues;
     exports.setSidebarLinkParamValues = setSidebarLinkParamValues;
-    exports.setSidebarPropValues = setSidebarPropValues;
     exports.setTimeInDate = setTimeInDate;
     exports.setUpdatedRecord = setUpdatedRecord;
     exports.toBoolean = toBoolean;