@churchillliving/se-ui-toolkit 6.53.339 → 6.53.355

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

@@ -2693,11 +2693,26 @@
                       }
                   });
               }
+              else if (column.type === exports.EGridColumnType.DATE) {
+                  //convert date into time format
+                  rowsData.forEach(function (row) {
+                      if (column.timeOnly && column.saveAsString) {
+                          row[column.field] = _this.datepipe.transform(row[column.field], 'hh:mm a');
+                      }
+                      else if (!column.timeOnly && column.showTime) {
+                          row[column.field] = _this.datepipe.transform(row[column.field], 'yyyy-MM-dd HH:mm:ss');
+                      }
+                      else if (row[column.field] && !column.timeOnly && column.saveAsString) {
+                          row[column.field] = row[column.field].toLocaleDateString();
+                      }
+                  });
+              }
           });
           return rowsData;
       };
       // get allowSave true || undefine row
       GridService.prototype.getAllowSaveRow = function (rowInfo, columns) {
+          var _this = this;
           if (rowInfo === void 0) { rowInfo = {}; }
           var row = Object.assign({}, rowInfo);
           row = objConvertToLower(row);
@@ -2727,6 +2742,18 @@
                       row[column.field.toLowerCase()] = value === true || (value === null || value === void 0 ? void 0 : value.toString()) === 'Y' || (value === null || value === void 0 ? void 0 : value.toString()) === '1' ? true : false;
                   }
               }
+              else if (column.type === exports.EGridColumnType.DATE) {
+                  //convert date into time format
+                  if (column.timeOnly && column.saveAsString) {
+                      row[column.field] = _this.datepipe.transform(row[column.field], 'hh:mm a');
+                  }
+                  else if (!column.timeOnly && column.showTime) {
+                      row[column.field] = _this.datepipe.transform(row[column.field], 'yyyy-MM-dd HH:mm:ss');
+                  }
+                  else if (row[column.field] && !column.timeOnly && column.saveAsString) {
+                      row[column.field] = row[column.field].toLocaleDateString();
+                  }
+              }
           });
           return row;
       };
@@ -2910,7 +2937,6 @@
           var _a, _b;
           return __awaiter(this, void 0, void 0, function () {
               var newValue, i;
-              var _this = this;
               return __generator(this, function (_g) {
                   newValue = {};
                   for (i = 0; i < uniqueKey.values.length; i++) {
@@ -2922,24 +2948,16 @@
                           newValue[uniqueKey.values[i].name] = this.getSoftCodingValue(uniqueKey.values[i].value, row);
                       }
                   }
-                  return [2 /*return*/, new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                          return __generator(this, function (_g) {
-                              switch (_g.label) {
-                                  case 0: return [4 /*yield*/, this.requestService
-                                          .get('/Data/Save', { uniqueKey: uniqueKey.name, values: newValue })
-                                          .subscribe(function (response) {
-                                          (function (_g) {
-                                              var error = _g.error;
-                                              return reject(error);
-                                          });
-                                          return resolve('success');
-                                      })];
-                                  case 1:
-                                      _g.sent();
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
+                  this.requestService
+                      .get('/Data/Save', { uniqueKey: uniqueKey.name, values: newValue })
+                      .subscribe(function (response) {
+                      (function (_g) {
+                          var error = _g.error;
+                          return error;
+                      });
+                      return 'success';
+                  });
+                  return [2 /*return*/];
               });
           });
       };
@@ -3614,7 +3632,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-iframe',
                   template: "<iframe [src]=\"url\" [id]=\"id\" frameborder=\"0\" (load)=\"iframeLoaded()\"></iframe>\n",
-                  styles: ["iframe{width:100%;height:100%}\n"]
+                  styles: [""]
               },] }
   ];
   /** @nocollapse */
@@ -3744,7 +3762,7 @@
           // Boolean prop to check where selected is allowed or not.
           this.allowSelection = false;
           // Set column width of selected row.
-          this.selectionColumnWidth = '80px';
+          //@Input() selectionColumnWidth: string = '80px';
           // set selection checkBox header
           this.allowSelectionHeader = '';
           // Boolean prop to hide the save button on top of grid.
@@ -4168,12 +4186,12 @@
                           _this.setFilterFocusOut(column);
                       }
                       // add "flex-shrink: 0" for flex-basis Style
-                      if (column.style && column.style.includes('flex-basis')) {
-                          var style = column.style + ' !important; flex-shrink: 0 !important';
-                          column.style = style.includes(';;')
-                              ? style.replace(';;', ';')
-                              : style;
-                      }
+                      // if (column.style && column.style.includes('flex-basis')) {
+                      //   let style = column.style + ' !important; flex-shrink: 0 !important';
+                      //   column.style = style.includes(';;')
+                      //     ? style.replace(';;', ';')
+                      //     : style;
+                      // }
                       // set DisplayText when value is in curly brackets.
                       _this.setDisplayTextValue(column);
                       //Aggregate scenario
@@ -4833,7 +4851,14 @@
                       ((_a = col.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (key === null || key === void 0 ? void 0 : key.toLowerCase()) &&
                       value &&
                       value.length > 0) {
-                      var newValue = value.map(function (x) { return x[col.displayField ? col.displayField : col.field]; });
+                      if (col.displayField) {
+                          selectedRow[col.field].forEach(function (row) {
+                              var _a;
+                              row[((_a = col.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()) + '_temp'] = row[col.displayField];
+                              row[col.displayField] = row[col.field];
+                          });
+                      }
+                      var newValue = value.map(function (x) { return x[col.displayField]; });
                       if ((_b = newValue === null || newValue === void 0 ? void 0 : newValue.toString()) === null || _b === void 0 ? void 0 : _b.includes(';')) {
                           row[col.field] = (_e = (_d = (_c = newValue === null || newValue === void 0 ? void 0 : newValue.toString()) === null || _c === void 0 ? void 0 : _c.replaceAll(';', ',')) === null || _d === void 0 ? void 0 : _d.split(',')) === null || _e === void 0 ? void 0 : _e.map(function (x) {
                               var _45;
@@ -5008,6 +5033,7 @@
               }
               // Saving AutoComplete Data
               if (column.type === exports.EGridColumnType.AUTOCOMPLETE &&
+                  column.displayField &&
                   ((_h = selectedRow[column.field]) === null || _h === void 0 ? void 0 : _h.length) > 0) {
                   automCompleteTempData = __spreadArray([], __read(selectedRow[column.field]));
                   selectedRow[column.field] = (_l = (_k = (_j = selectedRow[column.field]) === null || _j === void 0 ? void 0 : _j.map(function (row) {
@@ -5716,6 +5742,7 @@
       GridComponent.prototype.onAutoCompleteFocusOut = function (e, column, row) {
           if (column.type == exports.EGridColumnType.AUTOCOMPLETE) {
               if (column.allowAutoCompleteSave && e.target.value && !column.data.length) {
+                  ///check the correct format if data.contains cuz its an array of arrays with objects.
                   if (confirm("Do you want to add " + e.target.value + " to the selection?")) {
                       if (column.uniqueKey) {
                           var message = this.gridService
@@ -6210,8 +6237,8 @@
   GridComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-grid',
-                  template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\" *ngIf=\"\n    allowColumnToggle ||\n    rowActions.length > 0 ||\n    useInlineCRUD ||\n    allowExportToExcel ||\n    allowExportToPdf ||\n    clearGridFilter\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 p-mr-2 p-ml-1' : '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 ? 'p-button-danger p-mr-2 p-ml-1' : 'hide-clear-filter-button'\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 &&!hideGridSaveButton\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-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\" [style]=\"{ minWidth: '200px' }\" 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 p-mr-2 p-ml-2\" (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 [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-mx-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\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n  [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\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'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n        <div style=\"display: flex;align-items: center;margin: 0 auto;\">\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'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\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        [style]=\"column?.type === 'multiple' ? 'justify-content: center' : column.style\">\n        <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n          <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n          <span *ngIf=\"column.isRequired\">*</span>\n          <p-sortIcon *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.value\" (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.value\" (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 [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'lookup_input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <div class=\"close-icon-wrapper\">\n                <input id=\"lookUp_filter\" autocomplete=\"off\" type=\"text\" [(ngModel)]=\"column.value\"\n                  (click)=\"setFilterLookup(column)\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                  (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                  (keyup)=\"removingFilters($event, column)\" pInputText />\n                <div><button *ngIf=\"column.value\" icon=\"pi pi-times\" pButton type=\"button\"\n                    (click)=\"lookupClearValue(column)\"></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.value\"\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]=\"value\" [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.value\" (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.value\"\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]\" [pSelectableRow]=\"row\">\n\n\n      <td *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\">\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\" [style]=\"column.style\">\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)\"\n            [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n            <!-- <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              {{\n              setConditionBaseValue(row, column)\n              }}\n            </a> -->\n            <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              setConditionBaseValue(row, column)\n              }}\n          </ng-template>\n        </a>\n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"\n            [class]=\"column.editable === false ? '' :  allowDisabled(column,row) ? 'disable-link' : ''\">\n            <!-- <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n              {{\n              setConditionBaseValue(row, column)\n              }}\n            </a> -->\n            <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n              <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n              {{\n                setConditionBaseValue(row, column)\n                }}\n            </ng-template>\n          </a>\n          </span>\n        </span>\n        <!-- link column for Edit Case -->\n        <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\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]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" (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]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\"\n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                {{\n                setConditionBaseValue(row, column)\n                }}\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                  {{\n                  setConditionBaseValue(row, column)\n                  }}\n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span>\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                  {{\n                  setConditionBaseValue(row, column)\n                  }}\n                </a>\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span 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\">\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)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"column.editable === false || column.editable === undefined\n                  \" [class]=\"\n                  allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ !column.displayText && row.isNew ? '' : 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]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span\n              [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n              <i *ngIf=\"column.icon; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{ 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)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n                row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [name]=\"row[column.field]\"\n\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                typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text :\n                row[column.displayField]\n                ? row[column.displayField]\n                : row[column.field]\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              typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text :\n              row[column.displayField]\n              ? row[column.displayField]\n              : row[column.field]\n              }}\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- Numeric Input column on Grid -->\n      <span *ngSwitchCase=\"'numeric'\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for Currency && Decimal && Percent -->\n            <span class=\"input-number\">\n              <p-inputNumber [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)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.action?.displayText : column.value\"\n            [ngStyle]=\"{\n              background: column.color ? column.color : ''\n            }\" (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)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [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]?.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]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.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] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                     row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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                    column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    \">\n                  {{\n                  row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText :\n                  row[column.displayField]\n                  ? row[column.displayField]\n                  : row[column.field]\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n      </span>\n      </td>\n      <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\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 *ngFor=\"let outerColumn of selectedColumns\" [style]=\"outerColumn.style\">\n        <div *ngFor=\"let innerColumn of selectedColumns\">\n          <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n            <div\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>\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n    </tr>\n  </ng-template>\n</p-table>",
-                  styles: [".action-btn{margin-right:10px;cursor:pointer}:host ::ng-deep .two-action-btn{flex:0!important;flex-basis:6%!important}:host ::ng-deep .three-action-btn{flex:0!important;flex-basis:8%!important}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .horizontal-scroll .p-datatable{position:relative;width:calc(100vw - 263px);overflow:auto;height:calc(100vh - 134px)}:host ::ng-deep .horizontal-scroll .p-datatable th,:host ::ng-deep .horizontal-scroll .p-datatable td{min-width:150px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:0 1rem!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td span{vertical-align:middle}:host ::ng-deep td[ng-reflect-ng-switch=multi-select] span{overflow:visible!important}:host ::ng-deep td[ng-reflect-ng-switch=dropdown] span{overflow:visible!important}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 0}:host ::ng-deep .input-number input{border:0;padding:0 10px 0 0;outline:none!important;box-shadow:none!important}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:12px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disable-link{color:#e4b7b8;pointer-events:none;text-decoration:underline;opacity:.5}.hyperlink{color:#cc7272;text-decoration:underline;cursor:pointer}.custom-link{color:#205dcf;cursor:pointer;font-size:12px}.setActionColumnWidth{display:flex}.noWrap td span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.highlighted-row{background-color:#dee2e6!important}td[ng-reflect-ng-switch=AutoComplete] span{overflow:visible!important}.hide-clear-filter-button{display:none!important}#hide-border{border-bottom:0!important}p-celleditor p-inputnumber{border:0}.merge-btn{margin-top:2px;line-height:14px}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
+                  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\" *ngIf=\"\n    allowColumnToggle ||\n    rowActions.length > 0 ||\n    useInlineCRUD ||\n    allowExportToExcel ||\n    allowExportToPdf ||\n    clearGridFilter\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 p-mr-2 p-ml-1' : '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'\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 &&!hideGridSaveButton\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-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\" 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\" (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 [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-mx-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\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\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.value\" (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.value\" (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\">\n                  <input\n                    id=\"lookUp_filter\"\n                    autocomplete=\"off\"\n                    type=\"text\"\n                    [(ngModel)]=\"column.value\"\n                    (click)=\"setFilterLookup(column)\"\n                    (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                    (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                    (keydown)=\"backspaceEvent($event, column)\"\n                    (keyup)=\"removingFilters($event, column)\"\n                    pInputText\n                  />\n                  <div><button\n                      *ngIf=\"column.value\"\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.value\"\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]=\"value\" [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.value\" (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.value\"\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)\"\n            [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n            <!-- <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              {{\n              setConditionBaseValue(row, column)\n              }}\n            </a> -->\n            <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              setConditionBaseValue(row, column)\n              }}\n          </ng-template>\n        </a>\n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"\n            [class]=\"column.editable === false ? '' :  allowDisabled(column,row) ? 'disable-link' : ''\">\n            <!-- <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n              {{\n              setConditionBaseValue(row, column)\n              }}\n            </a> -->\n            <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n              <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n              {{\n                setConditionBaseValue(row, column)\n                }}\n            </ng-template>\n          </a>\n          </span>\n        </span>\n        <!-- link column for Edit Case -->\n        <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\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]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" (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]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\"\n                [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n                {{\n                setConditionBaseValue(row, column)\n                }}\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                  {{\n                  setConditionBaseValue(row, column)\n                  }}\n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span>\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n                  {{\n                  setConditionBaseValue(row, column)\n                  }}\n                </a>\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span 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\">\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)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"column.editable === false || column.editable === undefined\n                  \" [class]=\"\n                  allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ !column.displayText && row.isNew ? '' : 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]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span\n              [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n              <i *ngIf=\"column.icon; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{ 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)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n                row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [name]=\"row[column.field]\"\n\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                typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text :\n                row[column.displayField]\n                ? row[column.displayField]\n                : row[column.field]\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              typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text :\n              row[column.displayField]\n              ? row[column.displayField]\n              : row[column.field]\n              }}\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- Numeric Input column on Grid -->\n      <span *ngSwitchCase=\"'numeric'\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for Currency && Decimal && Percent -->\n            <span class=\"input-number\">\n              <p-inputNumber [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)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.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)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [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]?.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]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field]?.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] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n                     row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\" [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                    column.displayText ? column.displayText : \n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : row[column.field]\n                    \">\n                  {{\n                  row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText :\n                  row[column.displayField]\n                  ? row[column.displayField]\n                  : row[column.field]\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n      </span>\n      </td>\n      <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\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 *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>",
+                  styles: [":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}.disable-link{opacity:.5}.hide-clear-filter-button{display:none!important}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -6247,7 +6274,6 @@
       loading: [{ type: i0.Input }],
       autoLoadData: [{ type: i0.Input }],
       allowSelection: [{ type: i0.Input }],
-      selectionColumnWidth: [{ type: i0.Input }],
       allowSelectionHeader: [{ type: i0.Input }],
       hideGridSaveButton: [{ type: i0.Input }],
       hideGridCancelButton: [{ type: i0.Input }],
@@ -6805,7 +6831,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-notes',
                   template: "<textarea\n  class=\"p-col-12 notes\"\n  pInputTextarea\n  [disabled]=\"disabledText\"\n  [(ngModel)]=\"note\"\n  #name=\"ngModel\"\n  required\n></textarea>\n<span\n  *ngIf=\"name.invalid && (name.dirty || name.touched)\"\n  class=\"validationClass\"\n>\n  Note can not be empty\n</span>\n\n<div *ngIf=\"!disabledText\" class=\"p-col-12 p-d-flex p-jc-end\">\n  <button\n    pButton\n    type=\"submit\"\n    icon=\"pi pi-check\"\n    label=\"OK\"\n    class=\"p-button-success\"\n    (click)=\"handleOk()\"\n    [disabled]=\"name.invalid\"\n  ></button>\n\n  <!-- Close button -->\n  <button\n    pButton\n    type=\"button\"\n    icon=\"pi pi-times\"\n    label=\"Cancel\"\n    class=\"p-button-danger p-ml-3\"\n    (click)=\"handleCancel()\"\n  ></button>\n</div>\n",
-                  styles: [".notes{min-height:350px}.validationClass{color:red}\n"]
+                  styles: [".validationClass{color:red}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -7847,8 +7873,8 @@
   FormComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-form',
-                  template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" key=\"cancelButton\"></p-confirmDialog>\n<form *ngIf=\"!isFormHidden && form\">\n  <div *ngIf=\"loading\">\n    <p-progressSpinner class=\"progress-spinner p-progress-spinner-circle custom-spinner\"></p-progressSpinner>\n  </div>\n  <div class=\"p-d-flex p-flex-wrap container w-100 my-5\">\n    <span [ngClass]=\"{ 'fixed-height': stickyActions }\">\n      <div *ngFor=\"let formSection of form.formSections\" [class]=\"!formSection.hidden ? 'card w-100' : ''\">\n        <span (click)=\"clickedSection(formSection)\">\n          <div *ngIf=\"!formSection ? '' : sectionDisabled(formSection)\">\n            <div [class]=\"formSection.hidden ? 'hidden' : formSection.class\">\n              <p-accordion>\n                <p-accordionTab [selected]=\"formSection.expanded === false ? false : true\"\n                  [disabled]=\"formSection.accordionDisabled\"\n                  [ngClass]=\"!formSection.showAccordion ? 'hide-accordian' : ''\">\n                  <p-header>\n                    <i [class]=\"formSection.icon\" class=\"p-mr-1 p-pl-2\"></i><span class=\"p-pl-4\">{{ formSection.name\n                      }}</span>\n                  </p-header>\n\n                  <div class=\"p-d-flex p-ai-center p-col\">\n                    <label *ngIf=\"!formSection.showAccordion\" for=\"name\" class=\"p-mb-0 p-d-flex p-ai-center p-mr-3\">\n                      <i [class]=\"formSection.icon\" class=\"p-mr-1\"></i>\n                      <b> {{ formSection.name }} </b>\n                    </label>\n\n                    <div *ngFor=\"let link of formSection.links\" [class]=\"formSection.disabled ? 'disabled-link' : ''\">\n                      <label class=\"p-mr-3\" [class]=\"link.name ? 'custom-link' : ''\" (click)=\"link.onClick()\">\n                        {{ link.name }}\n                      </label>\n                    </div>\n                  </div>\n\n                  <div class=\"p-d-flex p-flex-wrap\">\n                    <div [class]=\"formField.column\n                        ? 'p-col-' + formField.column + setClassName(formField)\n                        : form.column\n                        ? 'p-col-' + form.column + setClassName(formField)\n                        : 'p-col-12 p-md-3 p-d-flex p-flex-column' + setClassName(formField)\"\n                      [ngClass]=\"formField.control === 'break_line' ? 'break-line' : ''\"\n                      *ngFor=\"let formField of formSection.fields; let formFieldIndex = index\">\n                      <!-- labelControl Hyperlink on Lookup Control Field-->\n                      <div *ngIf=\"formField.label?.labelControl\">\n                        <div class=\"link-label custom-link p-mt-1\"\n                          *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target !== '_iframe'\">\n                          <a class=\"pl-2\" tabindex=\"-1\" (click)=\"formField.onClick ? onClickEvent(formField) : '' \"\n                            [target]=\"formField.label.labelControl?.hyperlink?.target\"\n                            [href]=\"formField.label.labelControl?.hyperlink?.link\" [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                        <div class=\"link-label custom-link p-mt-1\"\n                          *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target === '_iframe'\">\n                          <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadLabelControlIFrame(formField)\"\n                            [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                        <!-- labelControl on addTextbox -->\n                        <div class=\"link-label custom-link p-mt-1\"\n                          *ngIf=\"formField.label && formField.label.labelControl && formField.label.labelControl.lookupControl\">\n                          <a tabindex=\"-1\" [class]=\"formField.label.disabled ? 'disable-label-control' : 'pl-2'\"\n                            (click)=\"selectLookupLabel(formField)\" [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\">*</span>\n                          </a>\n                        </div>\n                      </div>\n                      <div [ngSwitch]=\"formField.control\">\n\n                        <!-- Spacer Control -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.SPACER\">\n                            <span [class]=\"formField.column? 'p-col-' +formField.column : ''\"></span>\n                          </div>\n                        </span>\n\n                        <!-- Input TextArea -->\n                        <span *ngIf=\"!formField.hidden\">\n\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.TEXTAREA\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                  formField.label.onClick && formField.label.onClick()\n                                  \" [title]=\"formField.label.labelControl\n                                  ? ''\n                                  : formField.label.onClick\n                                  ? formField.label.name\n                                  : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <textarea [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" pInputTextarea [rows]=\"formField.row ? formField.row : 1 \"\n                              (change)=\"onChangeEvent(formField)\" (click)=\"handleClickEvent(formField)\"\n                              [(ngModel)]=\"formField.value\" [name]=\"formField.field\" [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{height: formField.height ? formField.height : ''}\"\n                              (blur)=\"onFocusOutEvent(formField)\"></textarea>\n                          </div>\n                        </span>\n\n                        <!-- Text Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.INPUT\">\n                            <span [class]=\"formField.disabled && !formField.showBottomBorder ? 'disabled-link' : ''\">\n                              <label *ngIf=\"!formField.label.labelControl\"\n                                [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                                (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label && typeOf(formField.label) === 'object'\n                            ? formField.label.name\n                            : formField.label\">\n                                {{\n                                formField.label && typeOf(formField.label) === 'object'\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                                <span *ngIf=\"formField.isPassword\">&nbsp;\n                                  <i *ngIf=\"formField.textType=='password';else hideButton\" class=\"pi pi-eye\"\n                                    (click)=\"changePasswordType(formField)\"></i>\n                                  <ng-template #hideButton>\n                                    <i class=\"pi pi-eye-slash\" (click)=\"changePasswordType(formField)\"></i>\n                                  </ng-template>\n                                </span>\n                              </label>\n                            </span>\n                            <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\" [id]=\"formField.showBottomBorder ? 'remove-boder' : ''\"\n                              [type]=\"formField.textType ? formField.textType : 'text'\" pInputText [(ngModel)]=\"\n                                formField.value &&\n                                  typeOf(formField.value) === 'object'\n                                  ? formField.value.text\n                                  : formField.value\n                              \" (change)=\"onChangeEvent(formField)\"\n                              [name]=\"formField.field ? formField.field : formField.label\"\n                              (click)=\"handleClickEvent(formField)\" [disabled]=\"formField.disabled\"\n                              (blur)=\"onFocusOutEvent(formField)\" />\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Number Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n                            <label [class]=\"\n                                formField.label.onClick ? 'custom-link' : ''\n                              \" (click)=\"\n                                formField.label.onClick &&\n                                  formField.label.onClick()\n                              \" [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <!-- for Currency && number && Decimal && Percent -->\n                            <span class=\"input-number\">\n                              <p-inputNumber [class]=\"\n                                    formField.errorMessage\n                                      ? 'ng-invalid ng-dirty'\n                                      : 'form-control'\n                                  \" [(ngModel)]=\"formField.value\" [name]=\"formField.field\"\n                                (ngModelChange)=\"onChangeEvent(formField)\" (click)=\"selectLookupField(formField)\"\n                                [disabled]=\"formField.disabled\" (onBlur)=\"onFocusOutEvent(formField)\" [mode]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency'\n                                    ? 'currency'\n                                    : 'decimal'\n                                \" [currency]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency' &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.currency\n                                    ? formField.format.formatParams.currency\n                                    : 'USD'\n                                \" [locale]=\"formField.format &&\n                                formField.format.type === 'currency' &&\n                                formField.format.formatParams &&\n                                formField.format.formatParams.locale\n                                  ? formField.format.formatParams.locale\n                                  : 'en-US'\n                              \" [minFractionDigits]=\"\n                                  formField.format &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.digitsInfo\n                                    ? formField.format.formatParams.digitsInfo\n                                    : formField.format &&\n                                      (formField.format.type === 'decimal' || formField.format.type === 'currency')\n                                    ? '2'\n                                    : '0'\n                                \" [suffix]=\"\n                                  formField.format &&\n                                  formField.format.type === 'percent' && \n                                     '%'\n                                    \n                                \">\n                              </p-inputNumber>\n                            </span>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Password Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.PASSWORD\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" type=\"password\" (click)=\"handleClickEvent(formField)\"\n                              (change)=\"onChangeEvent(formField)\" pInputText [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\" (blur)=\"onFocusOutEvent(formField)\" />\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Checkbox -->\n                        <span [class]=\"formField.class\" *ngIf=\"!formField.hidden\">\n                          <div class=\"p-0 p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n                            <label *ngIf=\"!formField.label.labelControl\"\n                              [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                formField.label.onClick && formField.label.onClick()\n                              \" [title]=\"formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\">{{\n                              formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <p-checkbox class=\"p-d-flex p-ai-center\" [binary]=\"true\" [name]=\"formField.field\"\n                              (click)=\"onClickEvent(formField)\" (change)=\"onChangeEvent(formField)\"\n                              [(ngModel)]=\"formField.value\" [disabled]=\"formField.disabled\"\n                              (onChange)=\"onFocusOutEvent(formField)\">\n                            </p-checkbox>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Calendar -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n                            <span [class]=\"formField.disabled ? 'disabled-link' : ''\">\n                              <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                                {{\n                                formField.label.labelControl\n                                ? ''\n                                : formField.label.onClick\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n                            <p-calendar [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty ' + formField.field\n                                  : 'form-control '+ formField.field\n                              \" [showButtonBar]=\"!formField.timeOnly\" [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\" [disabled]=\"formField.disabled\" hourFormat=\"12\"\n                              [defaultDate]=\"defaultDate\"\n                              [stepMinute]=\"formField.minutesInterval ? formField.minutesInterval : 1\"\n                              [showTime]=\"formField.showTime\" (onShow)=\"setCalenderDate(formField)\"\n                              [timeOnly]=\"formField.timeOnly\" [view]=\"formField.monthOnly ? 'month' : 'date' \"\n                              (click)=\"handleClickEvent(formField)\"\n                              [dateFormat]=\"formField?.format?.type ? formField.format?.type : calendarFormat\"\n                              (ngModelChange)=\"calendarChangeValue(formField)\" (onInput)=\"calenderInputValue(formField)\"\n                              (onClose)=\"onFocusOutEvent(formField)\">\n                            </p-calendar>\n                            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Dropdown -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.DROPDOWN\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField && !formField.label?.labelControl\">*</span>\n                            </label>\n                            <p-dropdown [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" autocomplete=\"off\" [styleClass]='formField.field' [placeholder]=\"formField.value\"\n                              [options]=\"formField.data\" [filter]=\"formField.allowSearch\" [(ngModel)]=\"formField.value\"\n                              [optionLabel]=\"formField.optionLabel\" [optionValue]=\"formField.optionValue\"\n                              [name]=\"formField.field\" (keyup.Tab)=\"tabFocusEvent(formField)\"\n                              (click)=\"clearDropdownValue(formField)\" [disabled]=\"formField.disabled\"\n                              (onBlur)=\"onFocusOutEvent(formField)\" [showClear]=\"formField.value ? true : false\"\n                              (onChange)=\"onClearValue(formField, $event)\"\n                              [autoDisplayFirst]=\"formField.value > 0 ? true : false\">\n                            </p-dropdown>\n                            <span *ngIf=\"\n                              !formField?.isValid &&\n                              !formField.hidden\n                            \" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- AutoComplete Search -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.AUTOCOMPLETE\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                              (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <span class=\"p-fluid\">\n                              <p-autoComplete [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" [suggestions]=\"formField.data\" [(ngModel)]=\"formField.value\"\n                                (onChange)=\"onChangeEvent(formField)\" (click)=\"handleClickEvent(formField)\"\n                                (completeMethod)=\"autoSearch($event, formField)\" [dropdown]=\"formField.showOption\"\n                                [field]=\"formField.displayField\" [name]=\"formField.label\" [multiple]=\"true\"\n                                [disabled]=\"formField.disabled\" (onBlur)=\"onFocusOutEvent(formField)\">\n                              </p-autoComplete>\n                            </span>\n                          </div>\n                        </span>\n\n                        <!-- Multi-select -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\">*</span>\n                            </label>\n                            <p-multiSelect [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" [(ngModel)]=\"formField.value\" [options]=\"formField.data\" optionLabel=\"label\"\n                              optionValue=\"value\" [appendTo]=\"'body'\" [name]=\"formField.field\"\n                              (onChange)=\"onChangeEvent(formField)\"\n                              (click)=\"formField.onClick ? formField.onClick() : ''\" [disabled]=\"formField.disabled\"\n                              (blur)=\"onFocusOutEvent(formField)\">\n                            </p-multiSelect>\n                          </div>\n                        </span>\n\n                        <!-- Hyperlink-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \" [title]=\"formField.label\" *ngSwitchCase=\"dynamicCase.HYPERLINK\">\n                            <div *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.component\n                              \" (click)=\"hyperlinkDialog(formField)\">\n                              {{ formField.label }}\n                            </div>\n                            <div [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \" *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target !== '_iframe' &&\n                                !formField.hyperlink.component\n                              \">\n                              <a class=\"pl-2\" tabindex=\"-1\" [href]=\"sanitizeUrl(formField.hyperlink?.link)\"\n                                [target]=\"formField.hyperlink?.target\" (click)=\"handleClickEvent(formField)\"\n                                [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </a>\n                            </div>\n                            <div *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target === '_iframe' &&\n                                !formField.hyperlink.component\n                              \">\n                              <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadIFrame(formField)\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </a>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Lookup Control Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.LOOKUP_INPUT\">\n                            <span [class]=\"formField.disabled ? 'disabled-link' : ''\">\n                              <label *ngIf=\"!formField.label.labelControl\"\n                                [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"typeOf(formField.label) === 'object'\n                          ? formField.label.name\n                          : formField.label\">\n                                {{\n                                typeOf(formField.label) === 'object'\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n                            <div class=\"close-icon-wrapper\">\n                              <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" type=\"text\" pInputText [(ngModel)]=\"formField.value && typeOf(formField.value) === 'object'\n                              ? formField.value.text\n                              : formField.value\" autocomplete=\"off\" [id]=\"formField.field\" [name]=\"formField.field\"\n                                (click)=\"selectLookupField(formField)\" [disabled]=\"formField.disabled\"\n                                (keyup.Tab)=\"selectLookupField(formField)\" readonly\n                                (keydown)=\"$event.preventDefault()\" />\n                              <div><button *ngIf=\"formField.value && !formField.disabled\" icon=\"pi pi-times\" pButton\n                                  type=\"button\" (click)=\"lookupClearValue(formField)\"></button></div>\n                            </div>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- File Upload Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.FILE_UPLOAD\">\n                            <span [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \">\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n                            <se-file-upload [allowMultiple]=\"formField.selectMultipleFiles\"\n                              [acceptFileTypes]=\"formField.SetfileTypes\" [fields]=\"formField\"\n                              (fileUrl)=\"setFileUrls($event)\"\n                              (uploadFileOnReturn)=\"fileOnchangeEvent()\"></se-file-upload>\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                              }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Display  Card field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CARD\">\n                            <span [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \">\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </label>\n                            </span>\n\n                            <se-card [card]=\"formField.card\" [setCardData]=\"setCardData\"\n                              (selectedCard)=\"selectedCardClickEvent($event)\"></se-card>\n\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                              }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Note Detail Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.NOTE_FIELD\">\n                            <div [class]=\"formField.disabled\n                              ? 'disabled-link'\n                              : 'link-label custom-link'\n                            \">\n                              <span class=\"pl-2\" (click)=\"\n                              !formField.disabled\n                                ? handleNoteFieldDialog(formField)\n                                : ''\n                            \" [title]=\"formField.label.labelControl\n                            ? ''\n                            : formField.label.onClick\n                            ? formField.label.name\n                            : formField.label\">{{formField.label.labelControl\n                                ? ''\n                                : formField.label.onClick\n                                ? formField.label.name\n                                : formField.label}}\n                                <span *ngIf=\"formField.requiredField\">*</span>\n                              </span>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Dynamic Component Container-->\n                        <span [class]=\"formField.hidden ? 'hidden' : ''\">\n                          <div id=\"{{formSection.name}}-{{formFieldIndex}}\" #dynamicComponentContainer\n                            *ngSwitchCase=\"dynamicCase.COMPONENT\"></div>\n                        </span>\n\n                        <!-- Header component-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.SECTION_HEADER\">\n                            <label [class]=\"formField.class\">\n                              <b> {{ formField.label }} </b>\n                            </label>\n                          </div>\n                        </span>\n\n                        <!-- Add OnClick Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.ADD_BUTTON\">\n                            <button pButton type=\"button\" [icon]=\"formField.icon\" [label]=\"formField.label\"\n                              [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{background: formField.color ? formField.color : ''}\"\n                              (click)=\"onClickEvent(formField)\"></button>\n                          </div>\n                        </span>\n                        <!-- Add Generate Report Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.REPORT\">\n                            <se-generate-report-btn [repId]=\"formField.reportId\" [label]=\"formField.label\"\n                              [params]=\"formField.params\" [showDialog]=\"formField.showDialog\"></se-generate-report-btn>\n                          </div>\n                        </span>\n\n\n                        <!-- Add Input Switch -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.SWITCH\">\n                            <div>\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                              </label>\n                            </div>\n                            <p-inputSwitch [name]=\"formField.label ? formField.label: 'switch'\"\n                              [(ngModel)]=\"formField.value\" [disabled]=\"formField.disabled\"\n                              (click)=\"onClickEvent(formField)\"></p-inputSwitch>\n                          </div>\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </p-accordionTab>\n              </p-accordion>\n            </div>\n          </div>\n        </span>\n      </div>\n    </span>\n\n    <!-- save and close buttons -->\n    <div class=\"p-col-12 p-d-flex p-jc-end\" [ngClass]=\"{ sticky: stickyActions }\">\n      <div class=\"inner-sticky\">\n        <!-- save button -->\n        <button *ngIf=\"!hideSaveButton\" [disabled]=\"isFormDisabled\" pButton type=\"button\" icon=\"pi pi-check\"\n          label=\"Save\" class=\"p-button-success\" (click)=\"onSaveForm()\"></button>\n\n        <!-- close button -->\n        <button *ngIf=\"!hideCancelButton\" [disabled]=\"isFormDisabled\" (click)=\"onCancelForm()\" pButton type=\"button\"\n          icon=\"pi pi-times\" label=\"Cancel\" class=\"p-button-danger p-ml-3\"></button>\n\n\n        <!-- dynamic buttons -->\n        <ng-container *ngFor=\"let button of formButtons\">\n          <button *ngIf=\"!button.hidden\" pButton type=\"button\" [label]=\"button.label\" [icon]=\"button.icon ? button.icon : ''\"\n            class=\"p-button-success p-ml-3\" (click)=\"onNewButtonClick(button)\">\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</form>",
-                  styles: ["*{font-family:\"Lato\",sans-serif}.fa-solid,.fa-light,.fa-regular,.fa-thin,.fa-duotone{font-family:\"Font Awesome 6 Pro\"!important}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.break-line{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .toast-error{background:black!important}:host ::ng-deep .p-float-label label{margin-top:-.5rem!important}:host ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:0}:host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .input-number{border:0;border-radius:2px}:host ::ng-deep .input-number input{border:0;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:10.8px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .close-icon-wrapper{position:relative}:host ::ng-deep div[ng-reflect-ng-switch=lookup_input] span .close-icon-wrapper input{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;cursor:pointer}:host ::ng-deep .hide-today-btn{visibility:hidden}:host ::ng-deep .show-today-btn{background:rgba(33,150,243,.04);color:#2196f3;border-color:transparent}label{margin:0 0 5px}span,textarea{width:100%}.error{color:red}.link-label{display:flex;align-items:center;height:39px;margin-top:22px}.link-label a{color:#4e87f1;cursor:pointer;font-size:12px;text-decoration:none}.custom-link{color:#4e87f1;cursor:pointer;font-size:12px}.label-custom-link{font-size:12px}.hidden{display:none!important}.sticky{width:calc(100% - 260px);position:fixed;bottom:0;right:0}.fixed-height{height:calc(100vh - 65px)}.disabled-link label{pointer-events:none;opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{pointer-events:none;opacity:.5}.disabled-link div{color:#636363}.disable-label-control{pointer-events:none}#remove-boder{border:none!important}input[type=text]{cursor:pointer}.progress-spinner{position:fixed;z-index:999;height:60px;width:60px;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0}.progress-spinner:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000026}.p-dialog{position:absolute!important}:host ::ng-deep .custom-spinner .p-progress-spinner-circle{stroke:#000!important}:host ::ng-deep .p-progress-spinner{height:60px!important;width:60px!important}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
+                  template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" key=\"cancelButton\"></p-confirmDialog>\n<form *ngIf=\"!isFormHidden && form\">\n  <div *ngIf=\"loading\">\n    <p-progressSpinner class=\"progress-spinner p-progress-spinner-circle custom-spinner\"></p-progressSpinner>\n  </div>\n  <div class=\"p-flex-wrap\">\n    <span [ngClass]=\"{ 'fixed-height': stickyActions }\">\n      <div *ngFor=\"let formSection of form.formSections\" [class]=\"!formSection.hidden ? 'card w-100' : ''\">\n        <span (click)=\"clickedSection(formSection)\">\n          <div *ngIf=\"!formSection ? '' : sectionDisabled(formSection)\">\n            <div [class]=\"formSection.hidden ? 'hidden' : formSection.class\">\n              <p-accordion>\n                <p-accordionTab [selected]=\"formSection.expanded === false ? false : true\"\n                  [disabled]=\"formSection.accordionDisabled\"\n                  [ngClass]=\"!formSection.showAccordion ? 'hide-accordian' : ''\">\n                  <p-header>\n                    <i [class]=\"formSection.icon\" class=\"p-mr-1 p-pl-2\"></i><span class=\"p-pl-4\">{{ formSection.name\n                      }}</span>\n                  </p-header>\n\n                  <div class=\"p-d-flex p-ai-center p-col form-component accordion-header-wrapper\">\n                    <label *ngIf=\"!formSection.showAccordion\" for=\"name\" class=\"accordionHeaderName p-d-flex p-ai-center\">\n                      <i [class]=\"formSection.icon\" class=\"\"></i>\n                      <div> {{ formSection.name }} </div>\n                    </label>\n\n                    <div *ngFor=\"let link of formSection.links\" [class]=\"formSection.disabled ? 'disabled-link' : ''\">\n                      <label class=\"p-mr-3\" [class]=\"link.name ? 'custom-link' : ''\" (click)=\"link.onClick()\">\n                        {{ link.name }}\n                      </label>\n                    </div>\n                  </div>\n\n                  <div class=\"p-d-flex p-flex-wrap form-component form-body-wrapper\">\n                    <div [class]=\"formField.column\n                        ? 'p-col-' + formField.column + setClassName(formField)\n                        : form.column\n                        ? 'p-col-' + form.column + setClassName(formField)\n                        : 'p-col-12 p-md-3 p-d-flex p-flex-column' + setClassName(formField)\"\n                      [ngClass]=\"formField.control === 'break_line' ? 'break-line' : ''\"\n                      *ngFor=\"let formField of formSection.fields; let formFieldIndex = index\">\n                      <!-- labelControl Hyperlink on Lookup Control Field-->\n                      <div *ngIf=\"formField.label?.labelControl\">\n                        <div class=\"link-label custom-link\"\n                          *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target !== '_iframe'\">\n                          <a class=\"pl-2\" tabindex=\"-1\" (click)=\"formField.onClick ? onClickEvent(formField) : '' \"\n                            [target]=\"formField.label.labelControl?.hyperlink?.target\"\n                            [href]=\"formField.label.labelControl?.hyperlink?.link\" [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                          </a>\n                        </div>\n                        <div class=\"link-label custom-link\"\n                          *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target === '_iframe'\">\n                          <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadLabelControlIFrame(formField)\"\n                            [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                          </a>\n                        </div>\n                        <!-- labelControl on addTextbox -->\n                        <div class=\"link-label custom-link\"\n                          *ngIf=\"formField.label && formField.label.labelControl && formField.label.labelControl.lookupControl\">\n                          <a tabindex=\"-1\" [class]=\"formField.label.disabled ? 'disable-label-control' : 'pl-2'\"\n                            (click)=\"selectLookupLabel(formField)\" [title]=\"formField.label.name\">\n                            {{ formField.label.name }}\n                            <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                          </a>\n                        </div>\n                      </div>\n                      <div [ngSwitch]=\"formField.control\">\n\n                        <!-- Spacer Control -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.SPACER\">\n                            <span [class]=\"formField.column? 'p-col-' +formField.column : ''\"></span>\n                          </div>\n                        </span>\n\n                        <!-- Input TextArea -->\n                        <span *ngIf=\"!formField.hidden\">\n\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.TEXTAREA\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                  formField.label.onClick && formField.label.onClick()\n                                  \" [title]=\"formField.label.labelControl\n                                  ? ''\n                                  : formField.label.onClick\n                                  ? formField.label.name\n                                  : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <textarea [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" pInputTextarea [rows]=\"formField.row ? formField.row : 1 \"\n                              (change)=\"onChangeEvent(formField)\" (click)=\"handleClickEvent(formField)\"\n                              [(ngModel)]=\"formField.value\" [name]=\"formField.field\" [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{height: formField.height ? formField.height : ''}\"\n                              (blur)=\"onFocusOutEvent(formField)\"></textarea>\n                          </div>\n                        </span>\n\n                        <!-- Text Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.INPUT\">\n                            <span [class]=\"formField.disabled && !formField.showBottomBorder ? 'disabled-link' : ''\">\n                              <label *ngIf=\"!formField.label.labelControl\"\n                                [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                                (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label && typeOf(formField.label) === 'object'\n                            ? formField.label.name\n                            : formField.label\">\n                                {{\n                                formField.label && typeOf(formField.label) === 'object'\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                                <span *ngIf=\"formField.isPassword\">&nbsp;\n                                  <i *ngIf=\"formField.textType=='password';else hideButton\" class=\"pi pi-eye\"\n                                    (click)=\"changePasswordType(formField)\"></i>\n                                  <ng-template #hideButton>\n                                    <i class=\"pi pi-eye-slash\" (click)=\"changePasswordType(formField)\"></i>\n                                  </ng-template>\n                                </span>\n                              </label>\n                            </span>\n                            <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\" [id]=\"formField.showBottomBorder ? 'remove-boder' : ''\"\n                              [type]=\"formField.textType ? formField.textType : 'text'\" pInputText [(ngModel)]=\"\n                                formField.value &&\n                                  typeOf(formField.value) === 'object'\n                                  ? formField.value.text\n                                  : formField.value\n                              \" (change)=\"onChangeEvent(formField)\"\n                              [name]=\"formField.field ? formField.field : formField.label\"\n                              (click)=\"handleClickEvent(formField)\" [disabled]=\"formField.disabled\"\n                              (blur)=\"onFocusOutEvent(formField)\" />\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Number Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n                            <label [class]=\"\n                                formField.label.onClick ? 'custom-link' : ''\n                              \" (click)=\"\n                                formField.label.onClick &&\n                                  formField.label.onClick()\n                              \" [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <!-- for Currency && number && Decimal && Percent -->\n                            <span class=\"input-number\">\n                              <p-inputNumber [class]=\"\n                                    formField.errorMessage\n                                      ? 'ng-invalid ng-dirty'\n                                      : 'form-control'\n                                  \" [(ngModel)]=\"formField.value\" [name]=\"formField.field\"\n                                (ngModelChange)=\"onChangeEvent(formField)\" (click)=\"selectLookupField(formField)\"\n                                [disabled]=\"formField.disabled\" (onBlur)=\"onFocusOutEvent(formField)\" [mode]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency'\n                                    ? 'currency'\n                                    : 'decimal'\n                                \" [currency]=\"\n                                  formField.format &&\n                                  formField.format.type === 'currency' &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.currency\n                                    ? formField.format.formatParams.currency\n                                    : 'USD'\n                                \" [locale]=\"formField.format &&\n                                formField.format.type === 'currency' &&\n                                formField.format.formatParams &&\n                                formField.format.formatParams.locale\n                                  ? formField.format.formatParams.locale\n                                  : 'en-US'\n                              \" [minFractionDigits]=\"\n                                  formField.format &&\n                                  formField.format.formatParams &&\n                                  formField.format.formatParams.digitsInfo\n                                    ? formField.format.formatParams.digitsInfo\n                                    : formField.format &&\n                                      (formField.format.type === 'decimal' || formField.format.type === 'currency')\n                                    ? '2'\n                                    : '0'\n                                \" [suffix]=\"\n                                  formField.format &&\n                                  formField.format.type === 'percent' && \n                                     '%'\n                                    \n                                \">\n                              </p-inputNumber>\n                            </span>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Password Input -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.PASSWORD\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" type=\"password\" (click)=\"handleClickEvent(formField)\"\n                              (change)=\"onChangeEvent(formField)\" pInputText [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\" (blur)=\"onFocusOutEvent(formField)\" />\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                            <span *ngIf=\"formField.required\"> * </span>\n                          </div>\n                        </span>\n\n                        <!-- Checkbox -->\n                        <span [class]=\"formField.class\" *ngIf=\"!formField.hidden\">\n                          <div class=\"p-0 p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n                            <label *ngIf=\"!formField.label.labelControl\"\n                              [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                                formField.label.onClick && formField.label.onClick()\n                              \" [title]=\"formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\">{{\n                              formField.label &&\n                              typeOf(formField.label) === 'object'\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <p-checkbox class=\"p-d-flex p-ai-center\" [binary]=\"true\" [name]=\"formField.field\"\n                              (click)=\"onClickEvent(formField)\" (change)=\"onChangeEvent(formField)\"\n                              [(ngModel)]=\"formField.value\" [disabled]=\"formField.disabled\"\n                              (onChange)=\"onFocusOutEvent(formField)\">\n                            </p-checkbox>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Calendar -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n                            <span [class]=\"formField.disabled ? 'disabled-link' : ''\">\n                              <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                                {{\n                                formField.label.labelControl\n                                ? ''\n                                : formField.label.onClick\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </label>\n                            </span>\n                            <p-calendar [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty ' + formField.field\n                                  : 'form-control '+ formField.field\n                              \" [showButtonBar]=\"!formField.timeOnly\" [(ngModel)]=\"formField.value\"\n                              [name]=\"formField.field\" [disabled]=\"formField.disabled\" hourFormat=\"12\"\n                              [defaultDate]=\"defaultDate\"\n                              [stepMinute]=\"formField.minutesInterval ? formField.minutesInterval : 1\"\n                              [showTime]=\"formField.showTime\" (onShow)=\"setCalenderDate(formField)\"\n                              [timeOnly]=\"formField.timeOnly\" [view]=\"formField.monthOnly ? 'month' : 'date' \"\n                              (click)=\"handleClickEvent(formField)\"\n                              [dateFormat]=\"formField?.format?.type ? formField.format?.type : calendarFormat\"\n                              (ngModelChange)=\"calendarChangeValue(formField)\" (onInput)=\"calenderInputValue(formField)\"\n                              (onClose)=\"onFocusOutEvent(formField)\">\n                            </p-calendar>\n                            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Dropdown -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.DROPDOWN\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.labelControl\n                          ? ''\n                          : formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField && !formField.label?.labelControl\" class=\"required-star\">*</span>\n                            </label>\n                            <p-dropdown [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" autocomplete=\"off\" [styleClass]='formField.field' [placeholder]=\"formField.value\"\n                              [options]=\"formField.data\" [filter]=\"formField.allowSearch\" [(ngModel)]=\"formField.value\"\n                              [optionLabel]=\"formField.optionLabel\" [optionValue]=\"formField.optionValue\"\n                              [name]=\"formField.field\" (keyup.Tab)=\"tabFocusEvent(formField)\"\n                              (click)=\"clearDropdownValue(formField)\" [disabled]=\"formField.disabled\"\n                              (onBlur)=\"onFocusOutEvent(formField)\" [showClear]=\"formField.value ? true : false\"\n                              (onChange)=\"onClearValue(formField, $event)\"\n                              [autoDisplayFirst]=\"formField.value > 0 ? true : false\">\n                            </p-dropdown>\n                            <span *ngIf=\"\n                              !formField?.isValid &&\n                              !formField.hidden\n                            \" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- AutoComplete Search -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.AUTOCOMPLETE\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n                              (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\">\n                              {{\n                              formField.label.labelControl\n                              ? ''\n                              : formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <span class=\"p-fluid\">\n                              <p-autoComplete [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" [suggestions]=\"formField.data\" [(ngModel)]=\"formField.value\"\n                                (onChange)=\"onChangeEvent(formField)\" (click)=\"handleClickEvent(formField)\"\n                                (completeMethod)=\"autoSearch($event, formField)\" [dropdown]=\"formField.showOption\"\n                                [field]=\"formField.displayField\" [name]=\"formField.label\" [multiple]=\"true\"\n                                [disabled]=\"formField.disabled\" (onBlur)=\"onFocusOutEvent(formField)\">\n                              </p-autoComplete>\n                            </span>\n                          </div>\n                        </span>\n\n                        <!-- Multi-select -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n                            <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n                            formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"formField.label.onClick\n                          ? formField.label.name\n                          : formField.label\">\n                              {{\n                              formField.label.onClick\n                              ? formField.label.name\n                              : formField.label\n                              }}\n                              <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                            </label>\n                            <p-multiSelect [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" [(ngModel)]=\"formField.value\" [options]=\"formField.data\" optionLabel=\"label\"\n                              optionValue=\"value\" [appendTo]=\"'body'\" [name]=\"formField.field\"\n                              (onChange)=\"onChangeEvent(formField)\"\n                              (click)=\"formField.onClick ? formField.onClick() : ''\" [disabled]=\"formField.disabled\"\n                              (blur)=\"onFocusOutEvent(formField)\">\n                            </p-multiSelect>\n                          </div>\n                        </span>\n\n                        <!-- Hyperlink-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \" [title]=\"formField.label\" *ngSwitchCase=\"dynamicCase.HYPERLINK\">\n                            <div *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.component\n                              \" (click)=\"hyperlinkDialog(formField)\">\n                              {{ formField.label }}\n                            </div>\n                            <div [class]=\"\n                              formField.disabled\n                                ? 'disabled-link'\n                                : 'link-label custom-link'\n                            \" *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target !== '_iframe' &&\n                                !formField.hyperlink.component\n                              \">\n                              <a class=\"pl-2\" tabindex=\"-1\" [href]=\"sanitizeUrl(formField.hyperlink?.link)\"\n                                [target]=\"formField.hyperlink?.target\" (click)=\"handleClickEvent(formField)\"\n                                [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </a>\n                            </div>\n                            <div *ngIf=\"\n                                formField.hyperlink &&\n                                formField.hyperlink.target === '_iframe' &&\n                                !formField.hyperlink.component\n                              \">\n                              <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadIFrame(formField)\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </a>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Lookup Control Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.LOOKUP_INPUT\">\n                            <span [class]=\"formField.disabled ? 'disabled-link' : ''\">\n                              <label *ngIf=\"!formField.label.labelControl\"\n                                [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"formField.label.onClick && formField.label.onClick()\n                          \" [title]=\"typeOf(formField.label) === 'object'\n                          ? formField.label.name\n                          : formField.label\">\n                                {{\n                                typeOf(formField.label) === 'object'\n                                ? formField.label.name\n                                : formField.label\n                                }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </label>\n                            </span>\n                            <div class=\"close-icon-wrapper\">\n\n                              <span class=\"p-input-icon-right\">\n                                <i class=\"pi pi-chevron-right lookup-input-icon\"></i>\n                              <input [class]=\"\n                                formField.errorMessage\n                                  ? 'ng-invalid ng-dirty'\n                                  : 'form-control'\n                              \" \n                              class=\"form-component lookup-input\"\n                              type=\"text\" pInputText [(ngModel)]=\"formField.value && typeOf(formField.value) === 'object'\n                              ? formField.value.text\n                              : formField.value\" autocomplete=\"off\" [id]=\"formField.field\" [name]=\"formField.field\"\n                                (click)=\"selectLookupField(formField)\" [disabled]=\"formField.disabled\"\n                                (keyup.Tab)=\"selectLookupField(formField)\" readonly\n                                (keydown)=\"$event.preventDefault()\" />\n                                </span>\n                              <div>\n                                <button *ngIf=\"formField.value && !formField.disabled\" icon=\"pi pi-times\" pButton\n                                  class=\"lookup-clear-icon-button\"\n                                  type=\"button\" (click)=\"lookupClearValue(formField)\"></button>\n                                  \n                                </div>\n                            </div>\n                            <span *ngIf=\"!formField?.isValid\" class=\"error\">{{ formField.errorMessage }}</span>\n                          </div>\n                        </span>\n\n                        <!-- File Upload Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.FILE_UPLOAD\">\n                            <span [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \">\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </label>\n                            </span>\n                            <se-file-upload [allowMultiple]=\"formField.selectMultipleFiles\"\n                              [acceptFileTypes]=\"formField.SetfileTypes\" [fields]=\"formField\"\n                              (fileUrl)=\"setFileUrls($event)\"\n                              (uploadFileOnReturn)=\"fileOnchangeEvent()\"></se-file-upload>\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                              }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Display  Card field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CARD\">\n                            <span [class]=\"\n                                formField.disabled ? 'disabled-link' : ''\n                              \">\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </label>\n                            </span>\n\n                            <se-card [card]=\"formField.card\" [setCardData]=\"setCardData\"\n                              (selectedCard)=\"selectedCardClickEvent($event)\"></se-card>\n\n                            <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n                              formField.errorMessage\n                              }}</span>\n                          </div>\n                        </span>\n\n                        <!-- Note Detail Field -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.NOTE_FIELD\">\n                            <div [class]=\"formField.disabled\n                              ? 'disabled-link'\n                              : 'link-label custom-link'\n                            \">\n                              <span class=\"pl-2\" (click)=\"\n                              !formField.disabled\n                                ? handleNoteFieldDialog(formField)\n                                : ''\n                            \" [title]=\"formField.label.labelControl\n                            ? ''\n                            : formField.label.onClick\n                            ? formField.label.name\n                            : formField.label\">{{formField.label.labelControl\n                                ? ''\n                                : formField.label.onClick\n                                ? formField.label.name\n                                : formField.label}}\n                                <span *ngIf=\"formField.requiredField\" class=\"required-star\">*</span>\n                              </span>\n                            </div>\n                          </div>\n                        </span>\n\n                        <!-- Dynamic Component Container-->\n                        <span [class]=\"formField.hidden ? 'hidden' : ''\">\n                          <div id=\"{{formSection.name}}-{{formFieldIndex}}\" #dynamicComponentContainer\n                            *ngSwitchCase=\"dynamicCase.COMPONENT\"></div>\n                        </span>\n\n                        <!-- Header component-->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.SECTION_HEADER\">\n                            <label [class]=\"formField.class\">\n                              <b> {{ formField.label }} </b>\n                            </label>\n                          </div>\n                        </span>\n\n                        <!-- Add OnClick Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.ADD_BUTTON\">\n                            <button pButton type=\"button\" [icon]=\"formField.icon\" [label]=\"formField.label\"\n                              [disabled]=\"formField.disabled\"\n                              [ngStyle]=\"{background: formField.color ? formField.color : ''}\"\n                              (click)=\"onClickEvent(formField)\"></button>\n                          </div>\n                        </span>\n                        <!-- Add Generate Report Button -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.REPORT\">\n                            <se-generate-report-btn [repId]=\"formField.reportId\" [label]=\"formField.label\"\n                              [params]=\"formField.params\" [showDialog]=\"formField.showDialog\"></se-generate-report-btn>\n                          </div>\n                        </span>\n\n\n                        <!-- Add Input Switch -->\n                        <span *ngIf=\"!formField.hidden\">\n                          <div *ngSwitchCase=\"dynamicCase.SWITCH\">\n                            <div>\n                              <label [title]=\"formField.label\">\n                                {{ formField.label }}\n                              </label>\n                            </div>\n                            <p-inputSwitch [name]=\"formField.label ? formField.label: 'switch'\"\n                              [(ngModel)]=\"formField.value\" [disabled]=\"formField.disabled\"\n                              (click)=\"onClickEvent(formField)\"></p-inputSwitch>\n                          </div>\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </p-accordionTab>\n              </p-accordion>\n            </div>\n          </div>\n        </span>\n      </div>\n    </span>\n\n    <!-- save and close buttons -->\n    <div class=\"p-col-12 p-d-flex p-jc-end\" [ngClass]=\"{ sticky: stickyActions }\">\n      <div class=\"inner-sticky form-component actions-buttons-wrapper-div\">\n        <!-- save button -->\n        <button *ngIf=\"!hideSaveButton\" [disabled]=\"isFormDisabled\" pButton type=\"button\" icon=\"pi pi-check\"\n          label=\"Save\" class=\"p-button-success\" (click)=\"onSaveForm()\"></button>\n\n        <!-- close button -->\n        <button *ngIf=\"!hideCancelButton\" [disabled]=\"isFormDisabled\" (click)=\"onCancelForm()\" pButton type=\"button\"\n          icon=\"pi pi-times\" label=\"Cancel\" class=\"p-button-danger p-ml-3\"></button>\n\n\n        <!-- dynamic buttons -->\n        <button *ngFor=\"let button of formButtons\" pButton type=\"button\" [label]=\"button.label\"\n          [icon]=\"button.icon ? button.icon : ''\" class=\"p-button-success p-ml-3\" (click)=\"onNewButtonClick(button)\">\n\n        </button>\n      </div>\n    </div>\n  </div>\n</form>",
+                  styles: [":host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .hide-today-btn{visibility:hidden}.error{color:red}.hidden{display:none!important}.disabled-link label{opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{opacity:.5}.progress-spinner{z-index:999}.progress-spinner:before{content:\"\"}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -7941,7 +7967,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-gallery',
                   template: "<div class=\"col-lg-5 p-0\">\n    <div class=\"col-lg-12 pl-48\">\n        <div *ngIf='galleryImage != undefined' [ngStyle]=\"{width:width}\">\n            <p-galleria [(value)]=\"galleryImage\"   [responsiveOptions]=\"responsiveOptions\">\n                <ng-template pTemplate=\"item\" let-item>\n                    <img [src]=\"item.big\" [ngStyle]=\"{width:width}\"/>\n                </ng-template>\n                <ng-template pTemplate=\"thumbnail\" let-item>\n                    <div class=\"p-nogutter p-justify-center\">\n                        <img [src]=\"item.small\" [alt]=\"item.label\" [ngStyle]=\"{width:'90%'}\" />\n                    </div>\n                </ng-template>\n            </p-galleria>\n        </div>\n    </div>\n</div>",
-                  styles: [".bg-chck-wrapper{margin-bottom:50px;margin-top:19px;padding-left:66px}.bg-chck-wrapper img{margin-left:24px}.bg-chck-wrapper i{font-size:20px;color:var(--black)}.pl-48{padding-left:48px}@media (max-width: 1366px){.property-gallery ngx-gallery{width:100%!important}}\n"]
+                  styles: ["@media (max-width: 1366px){.property-gallery ngx-gallery{width:100%!important}}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8026,7 +8052,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-filter-menu',
                   template: "<p-dropdown\n  class=\"filter\"\n  [options]=\"filterOptions\"\n  [(ngModel)]=\"globalFilter.matchMode\"\n  appendTo=\"body\"\n></p-dropdown>\n",
-                  styles: ["@charset \"UTF-8\";:host ::ng-deep .p-dropdown{width:14rem}:host ::ng-deep .filter .p-dropdown{width:36px;height:36px}:host ::ng-deep .filter .p-inputtext{display:none}:host ::ng-deep .filter .p-dropdown{width:36px;border-radius:50%!important;border:0px}:host ::ng-deep .filter .p-dropdown:hover{background:rgba(0,0,0,.05)}:host ::ng-deep .filter .pi-chevron-down:before{content:\"\\e94c\"}:host ::ng-deep .filter .p-dropdown .p-dropdown-trigger{width:36px}:host ::ng-deep .filter .p-dropdown .p-dropdown-clear-icon{display:none!important}\n"]
+                  styles: [":host ::ng-deep .filter .p-inputtext{display:none}:host ::ng-deep .filter .p-dropdown .p-dropdown-clear-icon{display:none!important}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8124,8 +8150,8 @@
   MenuBarComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-menu-bar',
-                  template: "<div class=\"wrapper\" *ngIf=\"hiddenPanelMenu\">\n  <div\n    *ngIf=\"!isMenubarHidden\"\n    class=\"p-p-0 sidebar\"\n    [style]=\"{ backgroundColor: menuBackColor }\"\n    [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n  >\n  <div class=\"p-d-flex p-ai-center toggle-btn\">\n    <p-avatar\n          pBadge\n          (click)=\"clickEvent()\"\n          icon=\"pi pi-user\"\n          size=\"xlarge\"\n          shape=\"circle\"\n          class=\"p-pr-3\"\n          [title]=\"toolTip\"\n        ></p-avatar>\n      <button class=\"toggle-btn hover-scale\" (click)=\"toggleSidebar()\">\n        <i\n          class=\"pi pi-fw toggle-icon\"\n          [pTooltip]=\"toggleMenu ? 'Expand' : 'Collapse'\"\n          [ngClass]=\"toggleMenu ? 'pi-chevron-right' : 'pi-chevron-left'\"\n        ></i>\n        \n        <span>{{ menuTitle }}</span>\n      </button>\n    </div>\n    <nav\n      class=\"navbar navbar-expand-lg navbar-light bg-light p-p-0 grow-1\"\n      [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n    >\n      <p-panelMenu [model]=\"menuBarItems\" class=\"menuSidebar\"></p-panelMenu>\n    </nav>\n    <div class=\"nav-footer p-m-2\" [innerHtml]=\"menuFooter\"></div>\n  </div>\n</div>\n",
-                  styles: ["@charset \"UTF-8\";.wrapper{position:relative;z-index:1}div.sidebar{height:100vh;overflow:visible;background:#f8f9fa;position:sticky;top:0;display:flex;flex-direction:column}.toggle-btn:hover button{background-color:#e9ecef}.grow-1{flex-grow:1}.p-panelmenu .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important}.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header>a{padding-left:1.25rem!important;padding-right:1.25rem!important}.p-panelmenu .p-panelmenu-panel .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important}.navbar-nav{flex-direction:row;flex-wrap:wrap}.navbar-nav .nav-item{padding:0 7.5px}.sidebar .navbar{width:260px;overflow:auto;transition:width .5s;-webkit-transition:width .5s}.sidebar .navbar.hide-nav{width:95px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.toggle-btn{width:100%;padding:1rem;border:0px;color:#495057;background:#f8f9fa;font-weight:600;border-radius:3px;transition:box-shadow .2s;text-align:left;cursor:pointer;display:flex;align-items:center}.toggle-btn.hover-scale:hover i{font-size:18px!important}.toggle-btn i{margin-right:.5rem;font-size:9px;font-weight:bold;color:#262626}.toggle-btn:hover{background:#e9ecef;border-color:#dee2e6}.hide-nav .toggle-btn span{display:none}.hide-nav .toggle-btn{justify-content:center}:host ::ng-deep .p-menuitem-link-active{background:#eee!important}:host ::ng-deep .p-menuitem-link-active:focus{box-shadow:unset!important}:host ::ng-deep .p-menuitem{margin:3px}:host ::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus,:host ::ng-deep .p-panelmenu .p-panelmenu-header>a:focus{box-shadow:unset!important}:host ::ng-deep .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important}:host ::ng-deep .p-menuitem-icon{font-size:20px}:host ::ng-deep .p-menuitem-text{font-size:14px;white-space:nowrap}:host ::ng-deep .p-menuitem-text,:host ::ng-deep .p-panelmenu-icon,:host ::ng-deep .nav-footer{transition:opacity 1s;-webkit-transition:opacity 1s}:host ::ng-deep .hide-nav .p-menuitem-text,:host ::ng-deep .hide-nav .p-panelmenu-icon,:host ::ng-deep .hide-nav+.nav-footer{display:none;opacity:0}:host ::ng-deep .p-panelmenu-header-link{position:relative}:host ::ng-deep .p-panelmenu-header-link .p-panelmenu-icon{position:absolute;right:8px}:host ::ng-deep .p-panelmenu-header-link .pi-chevron-right:before{content:\"\\e902\"}:host ::ng-deep .p-panelmenu-header-link .pi-chevron-down:before{content:\"\\e901\"}.toggle-icon{position:absolute;top:48%;right:5px;color:#fff!important;z-index:9}\n"]
+                  template: "<div class=\"wrapper menu-bar-wrapper main-menu-bar menu-bar-component\" *ngIf=\"hiddenPanelMenu\">\n  <div\n    *ngIf=\"!isMenubarHidden\"\n    class=\"p-p-0 sidebar\"\n    [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n  >\n  <!-- [style]=\"{ backgroundColor: menuBackColor }\" -->\n  <div class=\"p-d-flex p-ai-center toggle-btn\">\n    <p-avatar\n          pBadge\n          (click)=\"clickEvent()\"\n          icon=\"pi pi-user\"\n          size=\"xlarge\"\n          shape=\"circle\"\n          class=\"p-pr-3\"\n          [title]=\"toolTip\"\n        ></p-avatar>\n      <button class=\"toggle-btn hover-scale\" (click)=\"toggleSidebar()\">\n        <i\n          class=\"pi pi-fw toggle-icon\"\n          [pTooltip]=\"toggleMenu ? 'Expand' : 'Collapse'\"\n          [ngClass]=\"toggleMenu ? 'pi-chevron-right' : 'pi-chevron-left'\"\n        ></i>\n        \n        <span>{{ menuTitle }}</span>\n      </button>\n    </div>\n    <nav\n      class=\"navbar navbar-expand-lg navbar-light bg-light p-p-0 grow-1\"\n      [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n    >\n      <p-panelMenu [model]=\"menuBarItems\" class=\"menuSidebar\"></p-panelMenu>\n    </nav>\n    <div class=\"nav-footer p-m-2\" [innerHtml]=\"menuFooter\"></div>\n  </div>\n</div>\n",
+                  styles: [".wrapper{position:relative;z-index:1}.hide-nav .p-menuitem-text,.hide-nav .p-panelmenu-icon,.hide-nav+.nav-footer{display:none;opacity:0}.toggle-icon{position:absolute;top:48%;right:5px;z-index:9}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8137,7 +8163,6 @@
   MenuBarComponent.propDecorators = {
       hiddenPanelMenu: [{ type: i0.Input }],
       toolTip: [{ type: i0.Input }],
-      menuBackColor: [{ type: i0.Input }],
       menuItems: [{ type: i0.Input }],
       menuFooter: [{ type: i0.Input }],
       menuTitle: [{ type: i0.Input }],
@@ -8420,7 +8445,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-sidebar',
                   template: "<span\n  *ngIf=\"!isSidebarHidden && sidebarItemsList && sidebarItemsList.length > 0\"\n>\n<span *ngIf=\"!navHidden\">\n  <nav\n  *ngIf=\"!collapseSidebar\"\n  class=\"navbar navbar-expand-lg navbar-light bg-light p-p-0 grow-1\"\n  [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n  >\n  <button class=\"toggle-btn\" (click)=\"toggleSidebar()\">\n    <i\n      class=\"pi pi-fw toggle-icon\"\n      [ngClass]=\"toggleMenu ? 'pi-chevron-left' : 'pi-chevron-right'\"\n    ></i>\n    <span>{{ menuTitle }}</span>\n  </button>\n  <p-panelMenu [model]=\"menuItems\" (click)=\"clickedMenu(menuItems)\"></p-panelMenu>\n  </nav>\n</span>\n  \n  <span *ngIf=\"collapseSidebar\" class=\"navbar navbar-expand-lg navbar-light bg-light p-p-0 grow-1\"\n    class='hide-nav'>\n    <p-panelMenu [model]=\"menuItems\" (click)=\"clickedMenu(menuItems)\"></p-panelMenu>\n  </span>\n</span>",
-                  styles: [":host ::ng-deep .p-menu{width:auto!important}:host ::ng-deep .p-menu .p-menuitem-link:not(.p-disabled):hover{background:none}:host ::ng-deep .p-menu .p-menuitem-link .p-menuitem-icon:hover{color:#54bdf2}:host ::ng-deep .active-icon .p-menuitem-link .p-menuitem-icon{color:#54bdf2}:host ::ng-deep .p-disabled{pointer-events:all!important}:host ::ng-deep .p-panelmenu-header-link .p-panelmenu-icon:before{display:none}:host ::ng-deep .p-panelmenu .p-panelmenu-content{padding:0;border:0}:host ::ng-deep .p-panelmenu .p-panelmenu-header>a,:host ::ng-deep .toggle-btn{background:#fff!important}:host ::ng-deep .toggle-btn{border-top:1px solid #dee2e6!important}.menuSidebar{position:sticky;top:0}div.sidebar{height:100vh;overflow-y:auto;background:#fff!important;position:sticky;top:0;display:flex;flex-direction:column}.p-panelmenu .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important;background:#fff!important}.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header>a{padding-left:1.25rem!important;padding-right:1.25rem!important}.p-panelmenu .p-panelmenu-panel .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important}.navbar-nav{flex-direction:row;flex-wrap:wrap}.navbar-nav .nav-item{padding:0 7.5px}.grow-1{flex-grow:1}.sidebar .navbar{width:260px;overflow:auto;transition:width .5s;-webkit-transition:width .5s}.sidebar .navbar.hide-nav{width:67.7px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.toggle-btn{width:100%;padding:1rem;border:0px;color:#495057;background:#f8f9fa;font-weight:600;border-radius:3px;transition:box-shadow .2s;text-align:left;cursor:pointer;display:flex;align-items:center}.toggle-btn i{margin-right:.5rem;font-size:9px;font-weight:bold;color:#262626}.toggle-btn:hover{background:#e9ecef;border-color:#dee2e6}.hide-nav .toggle-btn span{display:none}.hide-nav .toggle-btn{justify-content:center}.toggle-icon{position:absolute;top:44%;left:4px;z-index:9}:host ::ng-deep .p-menuitem-link-active{background:#eee!important}:host ::ng-deep .p-menuitem-link-active:focus{box-shadow:unset!important}:host ::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus,:host ::ng-deep .p-panelmenu .p-panelmenu-header>a:focus{box-shadow:unset!important}:host ::ng-deep .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header>a{border-left:0px!important;border-right:0px!important}:host ::ng-deep .p-menuitem-icon{font-size:20px}:host ::ng-deep .p-menuitem-text{font-size:14px;white-space:nowrap}:host ::ng-deep .p-menuitem-text,:host ::ng-deep .p-panelmenu-icon,:host ::ng-deep .nav-footer{transition:opacity 1s;-webkit-transition:opacity 1s}:host ::ng-deep .hide-nav .p-menuitem-text,:host ::ng-deep .hide-nav .p-panelmenu-icon,:host ::ng-deep .hide-nav+.nav-footer{display:none;opacity:0}\n"]
+                  styles: [":host ::ng-deep .p-menu{width:auto!important}:host ::ng-deep .p-panelmenu-header-link .p-panelmenu-icon:before{display:none}.sidebar .navbar{width:260px;overflow:auto;transition:width .5s;-webkit-transition:width .5s}.hide-nav .toggle-btn span{display:none}.toggle-icon{position:absolute;top:44%;left:4px;z-index:9}:host ::ng-deep .hide-nav .p-menuitem-text,:host ::ng-deep .hide-nav .p-panelmenu-icon,:host ::ng-deep .hide-nav+.nav-footer{display:none;opacity:0}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8523,8 +8548,8 @@
   HeaderComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-header',
-                  template: "<div *ngIf=\"!isHeaderHidden && headers\" class=\"card p-sticky p-m-2\">\n  <div class=\"header-list p-p-1 p-d-flex\">\n    <div\n      [class]=\"'p-md-' + headerField.column + ' p-sm-6 p-col-12 p-py-0'\"\n      class=\"header-list-item p-jc-center\"\n      *ngFor=\"let headerField of headers.fields\"\n    >\n      <div [ngSwitch]=\"headerField.control\">\n        <!-- For Dropdown -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div\n            class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n            *ngSwitchCase=\"dynamicCase.DROPDOWN\"\n          >\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <p-dropdown\n              [placeholder]=\"headerField.label\"\n              [options]=\"headerField.data\"\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            >\n            </p-dropdown>\n          </div>\n        </span>\n        \n        <!-- For label  -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div\n            class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n            *ngSwitchCase=\"dynamicCase.LABEL\"\n          >\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <!-- for value -->\n            <Span *ngIf=\"!headerField.format\">\n            <label for=\"\">{{ headerField.value }}</label> \n          </Span>\n\n             <!-- for currency -->\n             <span\n             *ngIf=\"\n               headerField.format && headerField.format.type === 'currency'\n             \"\n           >\n             <label>{{\n               headerField.value\n                 | currency\n                   : (headerField.format.formatParams &&\n                     headerField.format.formatParams.currency\n                       ? headerField.format.formatParams.currency\n                       : 'USD')\n             }}</label>\n           </span>\n\n             <!-- for percent -->\n             <span *ngIf=\"headerField.format && headerField.format.type === 'percent'\">\n              <label >{{ headerField.value }}%</label>\n              </span>\n\n               <!-- for decimal -->\n               <span\n               *ngIf=\"\n                 headerField.format && headerField.format.type === 'decimal'\n               \"\n             >\n               <label>{{\n                 headerField.value\n                   | number\n                     : (headerField.format.formatParams &&\n                       headerField.format.formatParams.digitsInfo\n                         ? '2.' +\n                           headerField.format.formatParams.digitsInfo +\n                           '-8'\n                         : '2.2-8')\n               }}</label>\n             </span>\n          </div>\n        </span>\n\n        <!-- Text Input -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div *ngSwitchCase=\"dynamicCase.INPUT\">\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <input\n              class=\"p-mr-2 form-control\"\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            />\n          </div>\n        </span>\n\n        <!-- Number Input -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n            <label>{{ headerField.label }}</label>\n            <input\n              class=\"flex-grow-1 p-mr-2 form-control\"\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            />\n          </div>\n        </span>\n\n        <!-- Checkbox -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n            <label>{{ headerField.label }}</label>\n            <p-checkbox\n              class=\"p-d-flex p-ai-center\"\n              [(ngModel)]=\"headerField.value\"\n              binary=\"true\"\n            ></p-checkbox>\n          </div>\n        </span>\n\n        <!-- Calendar -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n            <label>{{ headerField.label }}</label>\n            <p-calendar\n              class=\"flex-grow-1 p-mr-2\"\n              [placeholder]=\"headerField.label\"\n              [showButtonBar]=\"!headerField.timeOnly\"\n              [(ngModel)]=\"headerField.value\"\n              hourFormat=\"12\"\n              dataType=\"string\"\n              [timeOnly]=\"headerField.timeOnly\"\n              [showTime]=\"headerField.showTime\"\n              [dateFormat]=\"headerField.format ? headerField.format.dateType : 'mm/dd/yy'\"\n            >\n            </p-calendar>\n          </div>\n        </span>\n\n        <!-- Multi-select -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n            <label>{{ headerField.label }}</label>\n            <p-multiSelect\n              [(ngModel)]=\"headerField.value\"\n              [options]=\"headerField.data\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [appendTo]=\"'body'\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            >\n            </p-multiSelect>\n          </div>\n        </span>\n\n        <!-- Button -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.BUTTON\">\n            <button\n              pButton\n              pRipple\n              type=\"button\"\n              label=\"{{ headerField.label }}\"\n              class=\"{{ headerField.class }}\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            ></button>\n          </div>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                  styles: ["*{font-family:\"Lato\",sans-serif}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.header-list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0 10px}.header-list-item{font-size:16px;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px;text-align:center;position:relative}.header-list-item:after{content:\"\";border-right:1px solid rgba(0,0,0,.2);width:0px;height:20px;display:block;position:absolute;top:calc(50% - 10px);right:0}.header-list-item:last-child:after{display:none}.header-list-item b{margin-right:15px}.card.p-sticky{position:sticky;z-index:1;top:0;background:#eee}\n"]
+                  template: "<div *ngIf=\"!isHeaderHidden && headers\" class=\"card p-sticky header-component\">\n  <div class=\"header-list p-p-1 p-d-flex\">\n    <div\n      [class]=\"'p-md-' + headerField.column + ' p-sm-6 p-col-12 p-py-0'\"\n      class=\"header-list-item section-wrapper-in-header\"\n      *ngFor=\"let headerField of headers.fields\"\n    >\n      <div [ngSwitch]=\"headerField.control\">\n        <!-- For Dropdown -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div\n            class=\"p-d-flex p-flex-wrap section-wrapper-in-header p-ai-center\"\n            *ngSwitchCase=\"dynamicCase.DROPDOWN\"\n          >\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <p-dropdown\n              [placeholder]=\"headerField.label\"\n              [options]=\"headerField.data\"\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            >\n            </p-dropdown>\n          </div>\n        </span>\n        \n        <!-- For label  -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div\n            class=\"p-d-flex p-flex-wrap section-wrapper-in-header p-ai-center\"\n            *ngSwitchCase=\"dynamicCase.LABEL\"\n          >\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <!-- for value -->\n            <Span *ngIf=\"!headerField.format\">\n            <label for=\"\">{{ headerField.value }}</label> \n          </Span>\n\n             <!-- for currency -->\n             <span\n             *ngIf=\"\n               headerField.format && headerField.format.type === 'currency'\n             \"\n           >\n             <label>{{\n               headerField.value\n                 | currency\n                   : (headerField.format.formatParams &&\n                     headerField.format.formatParams.currency\n                       ? headerField.format.formatParams.currency\n                       : 'USD')\n             }}</label>\n           </span>\n\n             <!-- for percent -->\n             <span *ngIf=\"headerField.format && headerField.format.type === 'percent'\">\n              <label >{{ headerField.value }}%</label>\n              </span>\n\n               <!-- for decimal -->\n               <span\n               *ngIf=\"\n                 headerField.format && headerField.format.type === 'decimal'\n               \"\n             >\n               <label>{{\n                 headerField.value\n                   | number\n                     : (headerField.format.formatParams &&\n                       headerField.format.formatParams.digitsInfo\n                         ? '2.' +\n                           headerField.format.formatParams.digitsInfo +\n                           '-8'\n                         : '2.2-8')\n               }}</label>\n             </span>\n          </div>\n        </span>\n\n        <!-- Text Input -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div *ngSwitchCase=\"dynamicCase.INPUT\">\n            <b\n              ><label for=\"\">{{ headerField.label }}</label></b\n            >\n            <input\n              class=\"p-mr-2 form-control\"\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            />\n          </div>\n        </span>\n\n        <!-- Number Input -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n            <label>{{ headerField.label }}</label>\n            <input\n              class=\"flex-grow-1 p-mr-2 form-control\"\n              type=\"number\"\n              pInputText\n              [(ngModel)]=\"headerField.value\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            />\n          </div>\n        </span>\n\n        <!-- Checkbox -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n            <label>{{ headerField.label }}</label>\n            <p-checkbox\n              class=\"p-d-flex p-ai-center\"\n              [(ngModel)]=\"headerField.value\"\n              binary=\"true\"\n            ></p-checkbox>\n          </div>\n        </span>\n\n        <!-- Calendar -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n            <label>{{ headerField.label }}</label>\n            <p-calendar\n              class=\"flex-grow-1 p-mr-2\"\n              [placeholder]=\"headerField.label\"\n              [showButtonBar]=\"!headerField.timeOnly\"\n              [(ngModel)]=\"headerField.value\"\n              hourFormat=\"12\"\n              dataType=\"string\"\n              [timeOnly]=\"headerField.timeOnly\"\n              [showTime]=\"headerField.showTime\"\n              [dateFormat]=\"headerField.format ? headerField.format.dateType : 'mm/dd/yy'\"\n            >\n            </p-calendar>\n          </div>\n        </span>\n\n        <!-- Multi-select -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n            <label>{{ headerField.label }}</label>\n            <p-multiSelect\n              [(ngModel)]=\"headerField.value\"\n              [options]=\"headerField.data\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [appendTo]=\"'body'\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            >\n            </p-multiSelect>\n          </div>\n        </span>\n\n        <!-- Button -->\n        <span *ngIf=\"!headerField.hidden\">\n          <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.BUTTON\">\n            <button\n              pButton\n              pRipple\n              type=\"button\"\n              label=\"{{ headerField.label }}\"\n              class=\"{{ headerField.class }}\"\n              (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n            ></button>\n          </div>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                  styles: [".header-list-item:after{content:\"\"}.header-list-item:last-child:after{display:none}.card.p-sticky{position:sticky;z-index:1;top:0}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8600,7 +8625,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-loader',
                   template: "<span\n  *ngIf=\"isLoading\"\n  [ngClass]=\"isDarkBackground ? 'spinner-light' : 'spinner-dark'\"\n>\n  <p-progressSpinner\n    styleClass=\"custom-spinner\"\n    strokeWidth=\"4\"\n    fill=\"transparent\"\n    animationDuration=\".8s\"\n  ></p-progressSpinner>\n</span>\n",
-                  styles: [":host ::ng-deep .spinner-dark .p-progress-spinner{width:100vw!important;background:rgba(0,0,0,.2);height:100vh!important;position:absolute!important;top:50%;left:50%;z-index:9;transform:translate(-50%,-50%)}:host ::ng-deep .spinner-light .p-progress-spinner{width:100vw!important;height:100vh!important;position:absolute!important;top:50%!important;left:50%!important;z-index:9;transform:translate(-50%,-50%)}:host ::ng-deep .p-progress-spinner-svg{width:100px!important}\n"]
+                  styles: [":host ::ng-deep .spinner-dark .p-progress-spinner{top:50%;left:50%;z-index:9;transform:translate(-50%,-50%)}:host ::ng-deep .spinner-light .p-progress-spinner{z-index:9;transform:translate(-50%,-50%)}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8743,7 +8768,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-caption',
                   template: "<!-- add Caption on DisplayImage Component -->\n<div class=\"caption-form\">\n  <se-form\n    *ngIf=\"dynamicForm\"\n    [form]=\"dynamicForm\"\n    (saveForm)=\"saveForm($event)\"\n    (cancelForm)=\"cancelForm($event)\"\n  >\n  </se-form>\n</div>\n",
-                  styles: [":host ::ng-deep .p-accordion .p-accordion-content{border:0;padding:0 10px}:host ::ng-deep .p-accordion-content div:first-child{padding:0}:host ::ng-deep .caption-form span div{flex-direction:row!important;align-items:center}:host ::ng-deep .caption-form span div span{margin-right:10px;width:100px}:host ::ng-deep .caption-form div input{width:100%}:host ::ng-deep .caption-form .sticky{bottom:15px;width:unset!important;right:25px!important}:host ::ng-deep .caption-form .fixed-height{height:unset}:host ::ng-deep .caption-form span.error{display:none}\n"]
+                  styles: [":host ::ng-deep .caption-form span.error{display:none}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -8892,7 +8917,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-card',
                   template: "<!-- Display Files Card -->\n<p-confirmDialog key=\"handlecolumnActions\"></p-confirmDialog>\n<div\n  cdkDropList\n  cdkDropListOrientation=\"horizontal\"\n  class=\"example-list\"\n  (cdkDropListDropped)=\"dragAndDrop($event)\"\n>\n  <div \n  class=\"p-d-flex cards-wrapper\" \n  [ngStyle]=\"{ width: width, height: height }\" \n  *ngIf=\"data\" \n  [class]=\"card && card.class ? card.class : ''\">\n    <div\n      cdkDrag\n      class=\"example-box p-d-flex p-flex-column cards-wrapper\"\n      [class]=\"\n        card && card.width && card.width.length > 0\n          ? 'p-col-' + card.width\n          : 'p-col-3'\n      \"\n      *ngFor=\"let file of data; let i = index\"\n      (click)=\"onClickEvent(file,i)\"\n      [ngClass]=\"file.selectedCard ? file.selectedCard : ''\"\n    >\n      <!-- start cards image functionality -->\n      <se-file\n        [url]=\"file.blobfileurl\"\n        [type]=\"file.fileextension\"\n        [caption]=\"file?.filecaption\"\n        [height]=\"card?.height\"\n        [allowDownloadFile]=\"card?.allowDownload\"\n        [allowEditableCaption]=\"card?.allowEditableCaption\"\n        [allowDeleteFile]=\"card?.allowDelete\"\n        [name]=\"file.blobfileurl\"\n        [id]=\"file.fileextension\"\n        (onDeleteEvent)=\"deleteImage($event)\"\n        (onSaveEvent)=\"saveCaption($event)\"\n      ></se-file>\n      <!-- End cards image functionality -->\n\n      <!-- start form functionality in card -->\n      <se-form\n        class=\"form-content\"\n        [form]=\"file.dynamicform\"\n        [hideSaveButton]=\"true\"\n        [hideCancelButton]=\"true\"\n      ></se-form>\n      <!-- End form functionality in card -->\n    </div>\n  </div>\n\n  <!-- in case of form and data is empty or null -->\n  <div *ngIf=\"dynamicForm && (!data || data.length == 0)\">\n    <se-form\n      cdkDrag\n      *ngIf=\"dynamicForm\"\n      [form]=\"dynamicForm\"\n      [hideSaveButton]=\"true\"\n      [hideCancelButton]=\"true\"\n    ></se-form>\n  </div>\n</div>\n",
-                  styles: [":host ::ng-deep .custom-card .action-buttons{display:flex;justify-content:flex-end;background-color:#eee;position:absolute;top:0;left:0;width:100%;visibility:hidden}:host ::ng-deep .custom-card .p-card-body{padding:0}:host ::ng-deep .custom-card .p-card-content{padding:0}:host ::ng-deep .custom-card .p-button.p-button-icon-only{padding:5px;height:unset}:host ::ng-deep .custom-card .image-wrapper:hover .action-buttons{visibility:visible}:host ::ng-deep .form-content .fixed-height{height:unset!important}:host ::ng-deep .p-accordion-content{border:1px solid lightgray;border-top:1px solid lightgray;border-radius:10px!important;box-shadow:1px 1px 1px #0003,1px 1px 1px inset #0003}:host ::ng-deep .card-active .p-accordion-content{background:#eee!important}.cards-wrapper{padding:10px;overflow:auto}.custom-card{width:100%;height:400px}.custom-card .image-wrapper{position:relative}.custom-card .image-wrapper img{width:100%;height:300px}.custom-card h4{margin:auto;text-align:center;width:90%;height:27px;padding-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list span{height:unset!important}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.header-icons{background-color:#eee;text-align:right;opacity:0}.example-box:hover .header-icons{opacity:1}.card-active{transform:scale(1.1);transition:all .2s linear;z-index:999}\n"]
+                  styles: [":host ::ng-deep .custom-card .action-buttons{visibility:hidden}:host ::ng-deep .custom-card .image-wrapper:hover .action-buttons{visibility:visible}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:hover .header-icons{opacity:1}.card-active{transform:scale(1.1);transition:all .2s linear;z-index:999}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -9000,7 +9025,7 @@
       { type: i0.Component, args: [{
                   selector: 'se-file',
                   template: "<div class=\"p-d-flex cards-wrapper\">\n  <div\n    class=\"example-box\"\n    [class]=\"width && width.length > 0 ? 'p-col-' + width : 'p-col-12'\"\n  >\n    <p-card class=\"custom-card\">\n      <div class=\"image-wrapper\">\n        <!-- Start image file type cases -->\n        <div [ngSwitch]=\"type\">\n          <img\n            alt=\"ImageCard\"\n            [src]=\"url\"\n            [name]=\"name\"\n            [id]=\"id\"\n            *ngSwitchCase=\"'.image'\"\n            [ngStyle]=\"{ height: height }\"\n          />\n\n          <img\n            alt=\"ImageCard\"\n            src=\"../../../../assets/images/pdf-file.png\"\n            [name]=\"name\"\n            [id]=\"id\"\n            *ngSwitchCase=\"'.pdf'\"\n            [ngStyle]=\"{ height: height }\"\n          />\n          <img\n            alt=\"ImageCard\"\n            src=\"../../../../assets/images/xls.png\"\n            [name]=\"name\"\n            [id]=\"id\"\n            *ngSwitchCase=\"'.excel'\"\n            [ngStyle]=\"{ height: height }\"\n          />\n          <img\n            alt=\"ImageCard\"\n            src=\"../../../../assets/images/doc.png\"\n            [name]=\"name\"\n            [id]=\"id\"\n            *ngSwitchCase=\"'.document'\"\n            [ngStyle]=\"{ height: height }\"\n          />\n        </div>\n        <!-- End image file type cases -->\n\n        <!-- start caption functionality-->\n        <div class=\"edit-caption\">\n          <h4\n            class=\"example-box\"\n            (click)=\"captionClickEvent()\"\n            [title]=\"caption\"\n            *ngIf=\"!editableCaption\"\n          >\n            {{ caption }}\n          </h4>\n          <div\n          class=\"p-d-flex p-flex-column p-ai-end\" \n          *ngIf=\"editableCaption && allowEditableCaption\"\n          >\n            <input\n              type=\"text\"\n              name=\"caption\"\n              [(ngModel)]=\"caption\"\n              pInputText\n              (blur)=\"captionSave(id, name, url, type, caption)\"\n            />\n            <div class=\"icons\">\n              <i\n                class=\"pi pi-check\"\n                (click)=\"captionSave(id, name, url, type, caption)\"\n              ></i>\n              <i class=\"pi pi-times\" (click)=\"cancel()\"></i>\n            </div>\n          </div>\n          <!-- End caption functionality-->\n\n          <!-- start header action button functionality -->\n          <div class=\"action-buttons\">\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-arrow-circle-down\"\n              (click)=\"downloadFile(url)\"\n              class=\"p-button-rounded p-button-text\"\n              *ngIf=\"allowDownloadFile\"\n            ></button>\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              (click)=\"onDeleteFile(id, name, url, type, caption)\"\n              class=\"p-button-rounded p-button-text\"\n              *ngIf=\"allowDeleteFile\"\n            ></button>\n          </div>\n          <!-- End header action button functionality -->\n        </div>\n      </div>\n    </p-card>\n  </div>\n</div>\n",
-                  styles: [":host ::ng-deep .custom-card .action-buttons{display:flex;justify-content:flex-end;background-color:#eee;position:absolute;top:0;left:0;width:100%;visibility:hidden}:host ::ng-deep .custom-card .p-card-body{padding:0}:host ::ng-deep .custom-card .p-card-content{padding:0}:host ::ng-deep .custom-card .p-button.p-button-icon-only{padding:5px;height:unset}:host ::ng-deep .custom-card .image-wrapper:hover .action-buttons{visibility:visible}.cards-wrapper{width:100%;overflow:auto}.custom-card{width:100%;height:400px}.custom-card .image-wrapper{position:relative}.custom-card .image-wrapper img{width:100%;height:300px}.custom-card h4{cursor:pointer;margin:auto;text-align:center;width:90%;height:27px;padding-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.custom-card .edit-caption input{height:27px;width:100%}.custom-card .edit-caption .icons{position:absolute;right:0;bottom:2px;background-color:#fff;height:24px}.custom-card .edit-caption .icons i{cursor:pointer;margin:5px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box{padding:0 0 1px}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]
+                  styles: [":host ::ng-deep .custom-card .action-buttons{visibility:hidden}:host ::ng-deep .custom-card .image-wrapper:hover .action-buttons{visibility:visible}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]
               },] }
   ];
   /** @nocollapse */
@@ -9274,7 +9299,7 @@
           this.showInput = false;
           this.filter = '';
           this.hideClearFilterBtn = true;
-          this.calendarFormat = 'mm/dd/y';
+          this.calendarFormat = 'mm/dd/yy';
       }
       Object.defineProperty(SeGlobalFilterComponent.prototype, "activeTestMode", {
           set: function (val) {
@@ -9715,8 +9740,8 @@
   SeGlobalFilterComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-global-filters',
-                  template: "<div class=\"p-d-flex p-flex-wrap p-flex-row row\">\n  <div\n    [class]=\"globalFilter.hidden ? '' : 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=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-ai-center\">\n            <button\n              pButton\n              type=\"button\"\n              [disabled]=\"globalFilter.disabled\"\n              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showPrevious(globalFilter)\"\n              label=\"Previous {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} <<\"\n            ></button>\n            <label class=\"size-10\"\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              [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n              class=\"custom-btn\"\n              (click)=\"showNext(globalFilter)\"\n              label=\"Next {{\n                globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n              }} >>\"\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=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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=\"p-d-flex p-flex-column\"\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=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.INPUT\">\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</span>\n          </label>\n          <div class=\"p-d-flex p-flex-nowrap align-items-center\">\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"globalFilter.value\"\n              [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1'\"\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=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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            (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=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n        >\n          <label for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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            (onChange)=\"onFocusOutEvent(globalFilter)\"\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=\"p-d-flex p-flex-column\"\n          *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n        >\n          <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n            <span *ngIf=\"globalFilter.requiredField\">*</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.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=\"p-button-success align-globalFilter-btn p-mb-2\"\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 ? 'p-button-success p-mb-2 align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
-                  styles: ["*{font-family:\"Lato\",sans-serif}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.size-10{font-size:10px}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.center-content+app-sidebar{position:relative}.row{margin-left:-.5rem;margin-right:-.5rem}p-calendar{display:flex;justify-content:stretch}p-checkbox{height:42px}.p-dialog .p-dialog-content{overflow:visible!important}:host ::ng-deep input,:host ::ng-deep p-calendar,:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .custom-btn button{background:#efefef;border:#eee;border-radius:0;padding:5px 15px;font-size:12px;color:#585858;margin:0 5px}:host ::ng-deep .custom-btn button:hover{background-color:#dad5d5;color:#000}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 6px}:host ::ng-deep .input-number input{margin:-8px -23px -8px -8px;border:0;padding-right:10px;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:6;border:0;background-color:#fff}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .input-number .p-inputnumber-button-group{visibility:hidden}:host ::ng-deep .input-number:hover .p-inputnumber-button-group{visibility:visible}:host ::ng-deep .to-numeric{font-size:13px;margin:3px;color:#636363;padding-top:4px}.error{color:red}.hide-Global-clear-filter-button{display:none}.align-globalFilter-btn{float:left;margin:10px 5px 0 0}\n"]
+                  template: "<div class=\"global-filters-component-wrapper-div\">\n  <div\n    [class]=\"globalFilter.hidden ? '' : 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            (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            (onChange)=\"onFocusOutEvent(globalFilter)\"\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.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",
+                  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"]
               },] }
   ];
   /** @nocollapse */
@@ -9819,7 +9844,7 @@
   GridRowActionsComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-grid-row-actions',
-                  template: "<!-- onRow Edit Button on Grid -->\n<button\n*ngIf=\"!editing && editRowPermission && !hideEditBtn\"\npButton\npRipple\ntype=\"button\"\npInitEditableRow\nicon=\"pi pi-pencil\"\n(click)=\"onRowEditInit(row)\"\n[class]=\"editAllRows || row['edit_btn'] ? 'pButtonHide editRow' : 'p-button-rounded p-button-text editRow'\"\n></button>\n<!-- onRow Edit delete Button on Grid -->\n<button\npButton\ntype=\"button\"\nicon=\"pi pi-trash\"\n(click)=\"deleteRecord(row)\"\nclass=\"p-button-rounded p-button-text\"\n*ngIf=\"!hideDeleteBtn && row.isNew !== true && deleteRowPermission && !row['delete_btn']\">\n</button>\n<!-- onRow Edit Save Button on Grid -->\n<button\n*ngIf=\"editing\"\npButton\npRipple\nid=\"saveSingleGridValue\"\ntype=\"button\"\npSaveEditableRow\nicon=\"pi pi-check\"\n(click)=\"onRowEditSave(row)\"\n[class]=\"editAllRows ? 'pButtonHide saveRow' : 'p-button-rounded p-button-text p-button-success p-mr-2 saveRow'\"\n></button>\n<!-- onRow Edit Cancel Button on Grid -->\n<button\n*ngIf=\"editing\"\npButton\npRipple\ntype=\"button\"\nicon=\"pi pi-times\"\n(click)=\"onRowEditCancel(row)\"\n[class]=\"editAllRows ? 'pButtonHide cancelRow' : 'p-button-rounded p-button-text p-button-danger cancelRow'\"\n></button>",
+                  template: "<!-- onRow Edit Button on Grid -->\n<button\n*ngIf=\"!editing && editRowPermission && !hideEditBtn\"\npButton\npRipple\ntype=\"button\"\npInitEditableRow\nicon=\"pi pi-pencil\"\n(click)=\"onRowEditInit(row)\"\n[class]=\"editAllRows || row['edit_btn'] ? 'pButtonHide editRow' : 'p-button-rounded p-button-text editRow'\"\n></button>\n<!-- onRow Edit delete Button on Grid -->\n<button\npButton\ntype=\"button\"\nicon=\"pi pi-trash\"\n(click)=\"deleteRecord(row)\"\nclass=\"p-button-rounded p-button-text\"\n*ngIf=\"row.isNew !== true && deleteRowPermission && !row['delete_btn']\">\n</button>\n<!-- onRow Edit Save Button on Grid -->\n<button\n*ngIf=\"editing\"\npButton\npRipple\nid=\"saveSingleGridValue\"\ntype=\"button\"\npSaveEditableRow\nicon=\"pi pi-check\"\n(click)=\"onRowEditSave(row)\"\n[class]=\"editAllRows ? 'pButtonHide saveRow' : 'p-button-rounded p-button-text p-button-success p-mr-2 saveRow'\"\n></button>\n<!-- onRow Edit Cancel Button on Grid -->\n<button\n*ngIf=\"editing\"\npButton\npRipple\ntype=\"button\"\nicon=\"pi pi-times\"\n(click)=\"onRowEditCancel(row)\"\n[class]=\"editAllRows ? 'pButtonHide cancelRow' : 'p-button-rounded p-button-text p-button-danger cancelRow'\"\n></button>",
                   styles: [".pButtonHide{display:none}\n"]
               },] }
   ];