@churchillliving/se-ui-toolkit 6.53.428 → 6.53.430

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

@@ -3854,8 +3854,6 @@
           this.pagination = false;
           // Optional prop to handle show CurrentPage Report
           this.showCurrentPageReport = false;
-          // Displays total number of records
-          this.totalRecords = 0;
           this.showconfirmDialog = true;
           this.saveAllData = false;
           this.columnActions = [];
@@ -5164,6 +5162,7 @@
                   if (!this.addDataKeyValue) {
                       delete newRowObj[this.dataKey];
                   }
+                  newRowObj = this.setRowsData(newRowObj);
                   if (this.saveAllRecord) {
                       this.saveRecordArray.push(newRowObj);
                   }
@@ -6211,22 +6210,27 @@
           var _this = this;
           if (Array.isArray(rowsData)) {
               rowsData.forEach(function (row) {
-                  var keys = Object.keys(row);
-                  if ((keys === null || keys === void 0 ? void 0 : keys.length) > 0) {
-                      keys.forEach(function (key) {
-                          if (key.includes('_obj')) {
-                              delete row[key];
-                          }
-                      });
-                  }
+                  row = _this.removeRowObj(row);
                   row = _this.gridService.setRowValue(row);
               });
           }
           else {
+              rowsData = this.removeRowObj(rowsData);
               rowsData = this.gridService.setRowValue(rowsData);
           }
           return rowsData;
       };
+      GridComponent.prototype.removeRowObj = function (row) {
+          var keys = Object.keys(row);
+          if ((keys === null || keys === void 0 ? void 0 : keys.length) > 0) {
+              keys.forEach(function (key) {
+                  if (key.includes('_obj')) {
+                      delete row[key];
+                  }
+              });
+          }
+          return row;
+      };
       GridComponent.prototype.applyDropdownFilter = function (filter, event) {
           filter(event.target);
       };
@@ -6292,7 +6296,7 @@
   GridComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-grid',
-                  template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\">\n    <!-- used to be in 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<!-- test -->\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && !hideFilter\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success' : 'hide-clear-filter-button'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && !hideFilter\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? '' : 'hide-clear-filter-button'\n      \" class='global-refresh global-btn p-mr-2 p-ml-2'\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 pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 p-ml-2 ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"p-mr-2 ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"columns\" [(ngModel)]=\"selectedColumns\" optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"  class=\"grid-component-multiselect-header-button p-mr-2 p-ml-2\" placeholder=\"Choose Columns\">\n    </p-multiSelect>\n  </span>\n\n  <!-- <button\n  pButton\n  *ngIf=\"showRefreshBtn\"\n  type=\"button\"\n  [label]=\"'Refresh'\"\n  icon=\"pi pi-refresh\"\n  (click)=\"refresh()\"\n  class=\"ui-button-info p-mr-2\"\n></button> -->\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button pButton *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\" type=\"button\" [label]=\"'Add'\" pAddRow\n    [table]=\"componentTableRef\" [newRow]=\"newGridRow\" [id]=\"dataKey\" pTooltip=\"Add New Row\" tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\" class=\"ui-button-info global-add-btn p-ml-3\" (click)=\"addNewRow(newGridRow, true)\" pRipple></button>\n\n  <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info p-mr-2 p-ml-2\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\"\n      [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </div>\n\n  <!-- header Button for Excel File on Grid -->\n  <button *ngIf=\"allowExportToExcel\" type=\"button\" pButton icon=\"pi pi-file-excel\" (click)=\"exportExcel()\"\n    class=\"p-button-success p-mt-0 p-mr-2 p-ml-2\" pTooltip=\"Export to Excel\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- header Button for PDF File on Grid -->\n  <button *ngIf=\"allowExportToPdf\" type=\"button\" pButton icon=\"pi pi-file-pdf\" (click)=\"exportPdf()\"\n    class=\"p-button-warning p-mr-2 p-ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n    <ng-content></ng-content>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n  [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [alwaysShowPaginator]=\"false\" [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n  class=\"grid-component-main-table\"\n  [rows]=\"defaultRows\" [totalRecords]=\"totalRecords\" [rowsPerPageOptions]=\"setPaginationLength\"\n  [showCurrentPageReport]=\"showCurrentPageReport\" currentPageReportTemplate=\"Showing {first} to {last} of {{\n    totalRecords\n  }} entries\" [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n  (onSort)=\"sortDisabled ?? handleSortChange($event)\" (onFilter)=\"handleFilterChange($event)\"\n  (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\" (onPage)=\"handleServerSidePagination($event)\" #dt\n  [dataKey]=\"dataKey\" [(selection)]=\"selectedRows\" selectionMode=\"multiple\" [scrollable]=\"scrollable\" [scrollHeight]=\"scrollHeight\"\n  editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n  [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n  <!-- header Button for Action on Grid -->\n  <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"p-d-flex p-jc-end\">\n    <span *ngFor=\"let rowAction of rowActions\">\n      <button pButton type=\"button\" [label]=\"rowAction.title\" [class]=\"rowAction.class\"\n        (click)=\"rowAction.onClick(selectedRows)\"></button>\n    </span>\n  </div>\n\n  <!-- header columns on Grid -->\n  <ng-template pTemplate=\"header\" let-cols>\n    <tr>\n      <th *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n        <div class=\"grid-component-table-header-inner-div-2\n              table-header-inner-div div-last-inner-html-is-icon\">\n          <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n          <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n            (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <th *ngIf=\"allowSelection && selectionType === 'single'\" \n            class=\"grid-component-selection\">\n        Select\n      </th>\n      <th\n        *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        Actions\n      </th>\n      <th *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n        [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n        class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n        <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n          <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n          <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n          <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n            [field]=\"column.field\"></p-sortIcon>\n        </div>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n        [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\" pInputText />\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Numeric input on Header For Filter-->\n          <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"></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 grid-component lookup-filter-wrapper\">\n                  <div class=\"lookup-filter-input-wrapper\"> \n                  <input\n                    id=\"lookUp_filter\"\n                    class=\"grid-component lookup-filter\"\n                    autocomplete=\"off\"\n                    type=\"text\"\n                    [(ngModel)]=\"column.filterValue\"\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>  \n                  <div><button\n                      *ngIf=\"column.filterValue\"\n                      icon=\"pi pi-times\"\n                      pButton\n                      type=\"button\"\n                      (click)=\"lookupClearValue(column)\"\n                    ></button></div>\n                </div>\n              </ng-template>\n            </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\">\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\" optionLabel=\"label\">\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n          </p-columnFilter>\n        </span>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [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 [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n      <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n        <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n        <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"></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 [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" >\n\n        <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n      <td *ngIf=\"!editing\">\n        <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n          (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (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              ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                ? Checked\n                : unChecked\n               \">\n        </p-checkbox>\n      </td>\n      <td *ngIf=\"editing\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for edit checkBox -->\n            <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n              [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(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                    ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                    ? editModeChecked\n                    : editModeunCkecked\n                \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ row[column.field] }}\n          </ng-template>\n        </p-cellEditor>\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 *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n            [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n          <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n      \n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n            [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n\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\n                *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.hideFieldValue?'':row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n                <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\" >\n              <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                  }}\n              </ng-template>\n              \n                </a>\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n               >\n                  <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                 {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                </a>\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [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          <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n          <ng-template #noIcon>\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          </ng-template>\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 && !row[column.field+'_obj']?.action?.hideFieldValue\">\n                  <input\n                  readonly\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    (click)=\"selectLookupField(column, row)\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                    row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : \n                    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=\"column.editable === false || column.editable === undefined\n                  \" class=\"custom-link\"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disabled-link' : ''\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.action?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                  }}</ng-template>\n\n\n              </span>\n            </span>\n\n            <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \">\n              <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                [timeOnly]=\"column.timeOnly\"\n                [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span class=\"custom-link\"\n              [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n             <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{row[column.field+'_obj']?.action?.hideFieldValue?'': setConditionBaseValue(row, column) }}</ng-template>\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 readonly type=\"text\" pInputText\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : column.displayField ? typeOf(row[column.displayField]) === 'object' ?\n                row[column.displayField].text : row[column.displayField] :\n                typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.text?.text ? row[column.field+'_obj']?.text?.text : row[column.field]\"\n                (keyup.tab)=\"selectLookupField(column, row)\" [disabled]=\"allowDisabled(column,row)\"\n                (click)=\"selectLookupField(column, row)\" [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\" (blur)=\"onFocusOutEvent(column, row)\" />\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\"\n                  (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                  setLookupReadOnlyValue(row, column)\n                }}\n              </a>\n            </span>\n            <span *ngIf=\"!column.linkId\" [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n              (click)=\"openLookupHyperlink(column, row)\">\n              {{\n                setLookupReadOnlyValue(row, column)\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 [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" [class]=\"\n                    column.errorMessage\n                      ? 'ng-invalid ng-dirty'\n                      : 'form-control'\n                  \" [showButtons]=\"!column.format ? true : false\"\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                  row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n                (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\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                  \" [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                  \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && \n                       '%'\n                      \n                  \">\n              </p-inputNumber>\n            </span>\n            <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                {{ row[column.field] }}\n              </span></ng-template>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span [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>\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n            [icon]=\"row[column.field+'_obj']?.action?.icon ? row[column.field+'_obj']?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field+'_obj']?.action?.displayText ? row[column.field+'_obj']?.action?.displayText : column.value\"\n            class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n        </div>\n      </span>\n\n      <!-- Date column on Grid -->\n      <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\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' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n              [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n              [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n              [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n              (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n              [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n              [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\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 *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-dropdown *ngIf=\"!row[column.field+'_obj']?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                  [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                  [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"!row[column.field+'_obj']?.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 [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                  [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n                  (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n                </p-multiSelect>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\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 *ngSwitchCase=\"'AutoComplete'\">\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                  (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                  [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] :\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                  row[column.field]?.text :\n                  row[column.field]\"\n                  [dropdown]=\"column.showOption\" \n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" \n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\" \n                  [disabled]=\"allowDisabled(column,row)\" \n                  [multiple]=\"true\"\n                  (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\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 ?\n                    value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                </span>\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !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 ?\n                    value[column.field] : value[column.field] + ';' : value[column.field] }}\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\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n              <ng-template pTemplate=\"input\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [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 pInputText type=\"text\" [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] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                    {{ row[column.field] }}\n                  </span></ng-template>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                setTextBoxReadOnlyValue(row, column)\n                                  \">\n                  {{\n                    setTextBoxReadOnlyValue(row, column)\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\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\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\n        *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\">\n        <div *ngFor=\"let innerColumn of selectedColumns\">\n          <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n            <div\n              *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\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr class=\"grid-component no-records-found\">\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n    </tr>\n  </ng-template>\n</p-table>\n</div>",
+                  template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\">\n    <!-- used to be in 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<!-- test -->\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && !hideFilter\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success' : 'hide-clear-filter-button'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && !hideFilter\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? '' : 'hide-clear-filter-button'\n      \" class='global-refresh global-btn p-mr-2 p-ml-2'\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 pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 p-ml-2 ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"p-mr-2 ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"columns\" [(ngModel)]=\"selectedColumns\" optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"  class=\"grid-component-multiselect-header-button p-mr-2 p-ml-2\" placeholder=\"Choose Columns\">\n    </p-multiSelect>\n  </span>\n\n  <!-- <button\n  pButton\n  *ngIf=\"showRefreshBtn\"\n  type=\"button\"\n  [label]=\"'Refresh'\"\n  icon=\"pi pi-refresh\"\n  (click)=\"refresh()\"\n  class=\"ui-button-info p-mr-2\"\n></button> -->\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button pButton *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\" type=\"button\" [label]=\"'Add'\" pAddRow\n    [table]=\"componentTableRef\" [newRow]=\"newGridRow\" [id]=\"dataKey\" pTooltip=\"Add New Row\" tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\" class=\"ui-button-info global-add-btn p-ml-3\" (click)=\"addNewRow(newGridRow, true)\" pRipple></button>\n\n  <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info p-mr-2 p-ml-2\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\"\n      [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </div>\n\n  <!-- header Button for Excel File on Grid -->\n  <button *ngIf=\"allowExportToExcel\" type=\"button\" pButton icon=\"pi pi-file-excel\" (click)=\"exportExcel()\"\n    class=\"p-button-success p-mt-0 p-mr-2 p-ml-2\" pTooltip=\"Export to Excel\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- header Button for PDF File on Grid -->\n  <button *ngIf=\"allowExportToPdf\" type=\"button\" pButton icon=\"pi pi-file-pdf\" (click)=\"exportPdf()\"\n    class=\"p-button-warning p-mr-2 p-ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n    <ng-content></ng-content>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n  [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [alwaysShowPaginator]=\"false\" [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n  class=\"grid-component-main-table\"\n  [rows]=\"defaultRows\" [totalRecords]=\"totalRecords\" [rowsPerPageOptions]=\"setPaginationLength\"\n  [showCurrentPageReport]=\"showCurrentPageReport\" currentPageReportTemplate=\"Showing {first} to {last} of {{\n    totalRecords\n  }} entries\" [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n  (onSort)=\"sortDisabled ?? handleSortChange($event)\" (onFilter)=\"handleFilterChange($event)\"\n  (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\" (onPage)=\"handleServerSidePagination($event)\" #dt\n  [dataKey]=\"dataKey\" [(selection)]=\"selectedRows\" selectionMode=\"multiple\" [scrollable]=\"scrollable\" [scrollHeight]=\"scrollHeight\"\n  editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n  [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n  <!-- header Button for Action on Grid -->\n  <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"p-d-flex p-jc-end\">\n    <span *ngFor=\"let rowAction of rowActions\">\n      <button pButton type=\"button\" [label]=\"rowAction.title\" [class]=\"rowAction.class\"\n        (click)=\"rowAction.onClick(selectedRows)\"></button>\n    </span>\n  </div>\n\n  <!-- header columns on Grid -->\n  <ng-template pTemplate=\"header\" let-cols>\n    <tr>\n      <th *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n        <div class=\"grid-component-table-header-inner-div-2\n              table-header-inner-div div-last-inner-html-is-icon\">\n          <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n          <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n            (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <th *ngIf=\"allowSelection && selectionType === 'single'\" \n            class=\"grid-component-selection\">\n        Select\n      </th>\n      <th\n        *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        Actions\n      </th>\n      <th *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n        [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n        class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n        <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n          <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n          <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n          <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n            [field]=\"column.field\"></p-sortIcon>\n        </div>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n        [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\" pInputText />\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Numeric input on Header For Filter-->\n          <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"></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 grid-component lookup-filter-wrapper\">\n                  <div class=\"lookup-filter-input-wrapper\"> \n                  <input\n                    id=\"lookUp_filter\"\n                    class=\"grid-component lookup-filter\"\n                    autocomplete=\"off\"\n                    type=\"text\"\n                    [(ngModel)]=\"column.filterValue\"\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>  \n                  <div><button\n                      *ngIf=\"column.filterValue\"\n                      icon=\"pi pi-times\"\n                      pButton\n                      type=\"button\"\n                      (click)=\"lookupClearValue(column)\"\n                    ></button></div>\n                </div>\n              </ng-template>\n            </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\">\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\" optionLabel=\"label\">\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n          </p-columnFilter>\n        </span>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [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 [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n      <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n        <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n        <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"></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 [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" >\n\n        <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n      <td *ngIf=\"!editing\">\n        <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n          (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (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              ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                ? Checked\n                : unChecked\n               \">\n        </p-checkbox>\n      </td>\n      <td *ngIf=\"editing\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for edit checkBox -->\n            <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n              [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(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                    ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                    ? editModeChecked\n                    : editModeunCkecked\n                \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ row[column.field] }}\n          </ng-template>\n        </p-cellEditor>\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 *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n            [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n          <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n      \n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n            [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n\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\n                *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.hideFieldValue?'':row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n                <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\" >\n              <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                  }}\n              </ng-template>\n              \n                </a>\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n               >\n                  <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                 {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                </a>\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [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          <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n          <ng-template #noIcon>\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          </ng-template>\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 && !row[column.field+'_obj']?.action?.hideFieldValue\">\n                  <input\n                  readonly\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    (click)=\"selectLookupField(column, row)\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                    row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : \n                    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=\"column.editable === false || column.editable === undefined\n                  \" class=\"custom-link\"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disabled-link' : ''\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.action?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                  }}</ng-template>\n\n\n              </span>\n            </span>\n\n            <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \">\n              <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                [timeOnly]=\"column.timeOnly\"\n                [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span class=\"custom-link\"\n              [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n             <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{row[column.field+'_obj']?.action?.hideFieldValue?'': setConditionBaseValue(row, column) }}</ng-template>\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 readonly type=\"text\" pInputText\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : column.displayField ? typeOf(row[column.displayField]) === 'object' ?\n                row[column.displayField].text : row[column.displayField] :\n                typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.text?.text ? row[column.field+'_obj']?.text?.text : row[column.field]\"\n                (keyup.tab)=\"selectLookupField(column, row)\" [disabled]=\"allowDisabled(column,row)\"\n                (click)=\"selectLookupField(column, row)\" [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\" (blur)=\"onFocusOutEvent(column, row)\" />\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\"\n                  (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                  setLookupReadOnlyValue(row, column)\n                }}\n              </a>\n            </span>\n            <span *ngIf=\"!column.linkId\" [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n              (click)=\"openLookupHyperlink(column, row)\">\n              {{\n                setLookupReadOnlyValue(row, column)\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 [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" [class]=\"\n                    column.errorMessage\n                      ? 'ng-invalid ng-dirty'\n                      : 'form-control'\n                  \" [showButtons]=\"!column.format ? true : false\"\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                  row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n                (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\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                  \" [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                  \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && \n                       '%'\n                      \n                  \">\n              </p-inputNumber>\n            </span>\n            <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                {{ row[column.field] }}\n              </span></ng-template>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span [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>\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n            [icon]=\"row[column.field+'_obj']?.action?.icon ? row[column.field+'_obj']?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field+'_obj']?.action?.displayText ? row[column.field+'_obj']?.action?.displayText : column.value\"\n            class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n        </div>\n      </span>\n\n      <!-- Date column on Grid -->\n      <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\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' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n              [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n              [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n              [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n              (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n              [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n              [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\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 *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-dropdown *ngIf=\"!row[column.field+'_obj']?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                  [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                  [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"!row[column.field+'_obj']?.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 [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                  [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n                  (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n                </p-multiSelect>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\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 *ngSwitchCase=\"'AutoComplete'\">\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                  (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                  [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] :\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                  row[column.field]?.text :\n                  row[column.field]\"\n                  [dropdown]=\"column.showOption\" \n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" \n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\" \n                  [disabled]=\"allowDisabled(column,row)\" \n                  [multiple]=\"true\"\n                  (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\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 ?\n                    value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                </span>\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !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 ?\n                    value[column.field] : value[column.field] + ';' : value[column.field] }}\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\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n              <ng-template pTemplate=\"input\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [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 pInputText type=\"text\" [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] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                    {{ row[column.field] }}\n                  </span></ng-template>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                setTextBoxReadOnlyValue(row, column)\n                                  \">\n                  {{\n                    setTextBoxReadOnlyValue(row, column)\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\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\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\n        *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\">\n        <div *ngFor=\"let innerColumn of selectedColumns\">\n          <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n            <div\n              *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\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr class=\"grid-component no-records-found\">\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n    </tr>\n  </ng-template>\n</p-table>\n</div>",
                   styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disabled-link,.disabled-link a,.disabled-link label,.disabled-link span,.disabled-link div,.disable-label-control,.disabled-link.custom-link,.disabled-link.custom-link a,.disabled-link.custom-link label,.disabled-link.custom-link span,.disabled-link.custom-link div,.disable-label-control.custom-link{pointer-events:none;color:#83baf8}.custom-link{color:#205dcf;font-size:12px}.custom-link:not(.disabled-link){cursor:pointer}.mr-2{margin-right:10px;display:block}.highlighted-row{background-color:#dee2e6!important}.hide-clear-filter-button{display:none!important}\n"]
               },] }
   ];
@@ -10106,7 +10110,7 @@
   SeGlobalFilterComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-global-filters',
-                  template: "<div class=\"global-filters-component-wrapper-div\">\n  <div\n    [class]=\"globalFilter.hidden ? 'globalFilterHidden' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n    *ngFor=\"let globalFilter of globalFilters\"\n  >\n    <div [ngSwitch]=\"globalFilter.type\">\n      <!-- Calender control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n              [placeholder]=\"'Select-Date'\"\n              [(ngModel)]=\"globalFilter.value\"\n              (keyup.enter)=\"applyFilters()\"\n              (onSelect)=\"selectDate(globalFilter, true)\"\n              [inputId]=\"globalFilter.field\"\n              [dateFormat]=\"calendarFormat\"\n              (onClose)=\"onFocusOutEvent(globalFilter)\"\n              appendTo=\"body\"\n              [showButtonBar]=\"true\"\n              [disabled]=\"globalFilter.disabled\"\n              (keyup)=\"calendarFocusEvent(globalFilter)\"\n            >\n            </p-calendar>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Calender Range -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n        >\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"              \n              class=\"custom-btn\"\n              (click)=\"showPrevious(globalFilter)\"\n              label=\"Previous {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} <<\"\n            >\n            <!-- [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\" -->\n          </button>\n            <label class=\"global-filters-label\"\n              >\n              <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n              <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n                {{  globalFilter.labelText ? globalFilter.labelText : '' }}\n              </span>\n              {{\n                startDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              to\n              {{\n                endDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              <span *ngIf=\"globalFilter.prefix===false\">\n                {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n              </span></label\n            >\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"              \n              class=\"custom-btn\"\n              (click)=\"showNext(globalFilter)\"\n              label=\"Next {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} >>\"\n            >\n            <!-- [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\" -->\n          </button>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Checkbox Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-checkbox\n          [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n            [binary]=\"true\"\n            (keyup.enter)=\"applyFilters()\"\n            [(ngModel)]=\"globalFilter.value\"\n            [disabled]=\"globalFilter.disabled\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (click)=\"onFocusOutEvent(globalFilter)\"\n          ></p-checkbox>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Spacer Control -->\n      <span *ngIf=\"!globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.SPACER\"\n        >\n          <span\n            [class]=\"\n            globalFilter.column\n                ? 'p-col-' + globalFilter.column\n                : ''\n            \"\n          ></span>\n        </div>\n      </span>\n\n      <!-- Dropdown Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-dropdown\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [name]=\"globalFilter.displayText\"\n            [showClear]=\"true\"\n            [styleClass]=\"globalFilter.field\"\n            (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n            [placeholder]=\"globalFilter.displayText\"\n            [options]=\"globalFilter.data || []\"\n            [optionLabel]=\"globalFilter.optionLabel\"\n            [optionValue]=\"globalFilter.optionValue\"\n            [filter]=\"globalFilter.allowSearch\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (keyup.enter)=\"applyFilters()\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-dropdown>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Input control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.INPUT\">\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"\">\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- NumericInput control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n        >\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <input\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n      \n      <!-- Date Range Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar \n            #rangeCalendar\n            [showButtonBar]=\"true\"\n\n            [inputId]=\"globalFilter.displayText\"\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n            [(ngModel)]=\"globalFilter.value\" \n            selectionMode=\"range\" \n            appendTo=\"body\"\n            (onSelect)=\"selectDate(globalFilter, true)\"\n            [dateFormat]=\"calendarFormat\"\n            (onClose)=\"onFocusOutEvent(globalFilter)\"\n            (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n            (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n            (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n            (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            (keyup.enter)=\"applyFilters(true, globalFilter)\"\n            \n            ></p-calendar>\n            <!-- todayButtonStyleClass=\"p-d-none\"\n            clearButtonStyleClass=\"p-ml-auto\" -->\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Numeric Range control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n        >\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex\">\n          <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.value\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1  grow-1 input-number'\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n              globalFilter.errorMessage\n            }}</span>\n          </div>\n          <span class=\"to-numeric\">To</span>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.valueTwo\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n              (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n        </div>\n        <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n          globalFilter.errorMessage\n        }}</span>\n        </div>\n      </span>\n\n      <!-- MultiSelect control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n        >\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-multiSelect\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [options]=\"globalFilter.data\"\n            optionLabel=\"label\"\n            (keyup.enter)=\"applyFilters()\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            optionValue=\"value\"\n            [appendTo]=\"'body'\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-multiSelect>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Lookup Control Field -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n        >\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <input\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [id]=\"globalFilter.field\"\n            type=\"text\"\n            pInputText\n            [(ngModel)]=\"globalFilter?.valueTwo?.text ? globalFilter.valueTwo.text : globalFilter.value\"\n            (blur)=\"onFocusOutEvent(globalFilter)\"\n            [name]=\"globalFilter.field\"\n            (keyup.enter)=\"applyFilters()\"\n            (click)=\"selectLookupField(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            class=\"form-control\"\n          />\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"global-search align-globalFilter-btn global-btn\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
+                  template: "<div class=\"global-filters-component-wrapper-div\">\n  <div\n    [class]=\"globalFilter.hidden ? 'globalFilterHidden' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n    *ngFor=\"let globalFilter of globalFilters\"\n  >\n    <div [ngSwitch]=\"globalFilter.type\">\n      <!-- Calender control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n              [placeholder]=\"'Select-Date'\"\n              [(ngModel)]=\"globalFilter.value\"\n              (keyup.enter)=\"applyFilters()\"\n              (onSelect)=\"selectDate(globalFilter, true)\"\n              [inputId]=\"globalFilter.field\"\n              [dateFormat]=\"calendarFormat\"\n              (onClose)=\"onFocusOutEvent(globalFilter)\"\n              appendTo=\"body\"\n              [showButtonBar]=\"true\"\n              [disabled]=\"globalFilter.disabled\"\n              (keyup)=\"calendarFocusEvent(globalFilter)\"\n            >\n            </p-calendar>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Calender Range -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n        >\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"              \n              class=\"custom-btn\"\n              (click)=\"showPrevious(globalFilter)\"\n              label=\"Previous {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} <<\"\n            >\n            <!-- [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\" -->\n          </button>\n            <label class=\"global-filters-label\"\n              >\n              <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n              <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n                {{  globalFilter.labelText ? globalFilter.labelText : '' }}\n              </span>\n              {{\n                startDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              to\n              {{\n                endDate\n                  | date\n                    : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n              }}\n              <span *ngIf=\"globalFilter.prefix===false\">\n                {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n              </span></label\n            >\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"              \n              class=\"custom-btn\"\n              (click)=\"showNext(globalFilter)\"\n              label=\"Next {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} >>\"\n            >\n            <!-- [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\" -->\n          </button>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Checkbox Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-checkbox\n          [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n            [binary]=\"true\"\n            (keyup.enter)=\"applyFilters()\"\n            [(ngModel)]=\"globalFilter.value\"\n            [disabled]=\"globalFilter.disabled\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (click)=\"onFocusOutEvent(globalFilter)\"\n          ></p-checkbox>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Spacer Control -->\n      <span *ngIf=\"!globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.SPACER\"\n        >\n          <span\n            [class]=\"\n            globalFilter.column\n                ? 'p-col-' + globalFilter.column\n                : ''\n            \"\n          ></span>\n        </div>\n      </span>\n\n      <!-- Dropdown Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-dropdown\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [name]=\"globalFilter.displayText\"\n            [showClear]=\"true\"\n            [styleClass]=\"globalFilter.field\"\n            (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n            [placeholder]=\"globalFilter.displayText\"\n            [options]=\"globalFilter.data || []\"\n            [optionLabel]=\"globalFilter.optionLabel\"\n            [optionValue]=\"globalFilter.optionValue\"\n            [filter]=\"globalFilter.allowSearch\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            (keyup.enter)=\"applyFilters()\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-dropdown>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Input control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.INPUT\">\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"\">\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- NumericInput control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n        >\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <input\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              (keyup.enter)=\"applyFilters()\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n      \n      <!-- Date Range Control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div class=\"global-filters-filter-div\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <p-calendar \n            #rangeCalendar\n            [showButtonBar]=\"true\"\n\n            [inputId]=\"globalFilter.displayText\"\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n            [(ngModel)]=\"globalFilter.value\" \n            selectionMode=\"range\" \n            appendTo=\"body\"\n            (onSelect)=\"selectDate(globalFilter, true)\"\n            [dateFormat]=\"calendarFormat\"\n            (onClose)=\"onFocusOutEvent(globalFilter)\"\n            (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n            (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n            (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n            (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n            [disabled]=\"globalFilter.disabled\"\n            (keyup.enter)=\"applyFilters(true, globalFilter)\"\n            \n            ></p-calendar>\n            <!-- todayButtonStyleClass=\"p-d-none\"\n            clearButtonStyleClass=\"p-ml-auto\" -->\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Numeric Range control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n        >\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div class=\"p-d-flex\">\n          <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.value\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1  grow-1 input-number'\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n              globalFilter.errorMessage\n            }}</span>\n          </div>\n          <span class=\"to-numeric\">To</span>\n          <div class=\"p-d-flex flex-nowrap align-items-center\">\n            <p-inputNumber\n            [showButtons]=\"false\"\n              [(ngModel)]=\"globalFilter.valueTwo\"\n              [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n              (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n              (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n              [disabled]=\"globalFilter.disabled\"\n            >\n            </p-inputNumber>\n            <span *ngIf=\"globalFilter.filtering\">\n              <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n            </span>\n          </div>\n        </div>\n        <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n          globalFilter.errorMessage\n        }}</span>\n        </div>\n      </span>\n\n      <!-- MultiSelect control -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n        >\n          <label class=\"\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <p-multiSelect\n            [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n            [(ngModel)]=\"globalFilter.value\"\n            [options]=\"globalFilter.data\"\n            optionLabel=\"label\"\n            (keyup.enter)=\"applyFilters()\"\n            (onChange)=\"onFocusOutEvent(globalFilter)\"\n            optionValue=\"value\"\n            [appendTo]=\"'body'\"\n            [disabled]=\"globalFilter.disabled\"\n          ></p-multiSelect>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n\n      <!-- Lookup Control Field -->\n      <span [hidden]=\"globalFilter.hidden\">\n        <div\n          class=\"global-filters-filter-div\"\n          *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n        >\n          <label class=\"global-filters-label\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\" class=\"required-star\">*</span>\n          </label>\n          <div>             \n            <input\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n              [id]=\"globalFilter.field\"\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter?.valueTwo?.text ? globalFilter.valueTwo.text : globalFilter.value\"\n              (blur)=\"onFocusOutEvent(globalFilter)\"\n              [name]=\"globalFilter.field\"\n              (keyup.enter)=\"applyFilters()\"\n              (click)=\"selectLookupField(globalFilter)\"\n              [disabled]=\"globalFilter.disabled\"\n              class=\"form-control\"\n            />\n            <span class=\"p-input-icon-right global-filter\">\n              <i class=\"pi pi-chevron-right lookup-input-icon global-filter\"></i>\n            </span>\n          </div>\n          <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n            globalFilter.errorMessage\n          }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"global-search align-globalFilter-btn global-btn\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
                   styles: [":host ::ng-deep .input-number .p-inputnumber-button-group{visibility:hidden}:host ::ng-deep .input-number:hover .p-inputnumber-button-group{visibility:visible}.error{color:red}.hide-Global-clear-filter-button{display:none}\n"]
               },] }
   ];