@churchillliving/se-ui-toolkit 6.53.507 → 6.53.509

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/bundles/churchillliving-se-ui-toolkit.umd.js +86 -50
  2. package/bundles/churchillliving-se-ui-toolkit.umd.js.map +1 -1
  3. package/churchillliving-se-ui-toolkit.metadata.json +1 -1
  4. package/esm2015/lib/components/base/grid/grid.component.js +94 -66
  5. package/fesm2015/churchillliving-se-ui-toolkit.js +78 -50
  6. package/fesm2015/churchillliving-se-ui-toolkit.js.map +1 -1
  7. package/lib/components/base/grid/grid.component.d.ts +7 -3
  8. package/package.json +1 -1
package/bundles/churchillliving-se-ui-toolkit.umd.js CHANGED
@@ -3779,6 +3779,7 @@
3779
3779
  this.ref = ref;
3780
3780
  this.inlineRowCancel = new i0.EventEmitter();
3781
3781
  this.serverFilters = {};
3782
+ this.rowsData = [];
3782
3783
  this.rowsDataCopy = [];
3783
3784
  this.roles = [];
3784
3785
  this.isColumnHidden = false;
@@ -3806,6 +3807,7 @@
3806
3807
  this.calendarFormat = 'mm/dd/y';
3807
3808
  this.setDropdownFilter = true;
3808
3809
  this.setDropdowndataValue = true;
3810
+ this.showFilterbtn = false;
3809
3811
  this.hideEditAllRowsBtn = true;
3810
3812
  //apply Add/Delete/Edit prop for the grid permission
3811
3813
  this.addRowPermission = true;
@@ -3819,6 +3821,7 @@
3819
3821
  this.editRowsRecords = {};
3820
3822
  // Maintains record of rows being edited
3821
3823
  this.editingRowKeys = {};
3824
+ this.currentUrl = currentUrl();
3822
3825
  // Selects items in the grid based on passed on data
3823
3826
  this.selectedRows = [];
3824
3827
  this.setGridRefreshTime = 0;
@@ -3881,8 +3884,6 @@
3881
3884
  this.reportButtons = [];
3882
3885
  this.rowHover = false;
3883
3886
  this.hideFilterOptions = false;
3884
- // Sets pagenation for the table Data.
3885
- this.setPaginationLength = [5, 10, 15, { showAll: 'All' }];
3886
3887
  // set the change in the rowData
3887
3888
  this.rowsChange = new i0.EventEmitter();
3888
3889
  // Input decorator to receive columns to be displayed in header
@@ -3898,6 +3899,8 @@
3898
3899
  this.pagination = false;
3899
3900
  // Optional prop to handle show CurrentPage Report
3900
3901
  this.showCurrentPageReport = false;
3902
+ // Displays total number of records
3903
+ this.totalRecords = 0;
3901
3904
  // Displays aggregate that fetch from records
3902
3905
  this.aggregatedResult = [];
3903
3906
  this.showconfirmDialog = true;
@@ -3943,6 +3946,7 @@
3943
3946
  // set the row When adding the new Row on Grid
3944
3947
  this.onGridRowAdd = new i0.EventEmitter();
3945
3948
  this.isGridHidden = false;
3949
+ this.rowsPerPageOptions = [5, 10, 15, { showAll: 'All' }];
3946
3950
  }
3947
3951
  Object.defineProperty(GridComponent.prototype, "activeTestMode", {
3948
3952
  set: function (val) {
@@ -3953,6 +3957,20 @@
3953
3957
  enumerable: false,
3954
3958
  configurable: true
3955
3959
  });
3960
+ Object.defineProperty(GridComponent.prototype, "setPaginationLength", {
3961
+ // Sets pagenation for the table Data.
3962
+ set: function (value) {
3963
+ if (value === null || value === void 0 ? void 0 : value.length) {
3964
+ this.rowsPerPageOptions = value;
3965
+ if (this.defaultRowNumber && !this.rowsPerPageOptions.includes(this.defaultRowNumber)) {
3966
+ this.rowsPerPageOptions.unshift(this.defaultRowNumber);
3967
+ }
3968
+ }
3969
+ },
3970
+ enumerable: false,
3971
+ configurable: true
3972
+ });
3973
+ ;
3956
3974
  Object.defineProperty(GridComponent.prototype, "rows", {
3957
3975
  /**
3958
3976
  * Stops the loader and sets the data to grid
@@ -3967,30 +3985,31 @@
3967
3985
  if (!this.dataKey) {
3968
3986
  this.dataKey = 'id';
3969
3987
  }
3970
- this.rowsData = this.gridService.setDataFields(data, this.dataKey);
3988
+ if ((data === null || data === void 0 ? void 0 : data.length) > 50 && !this.pagination) {
3989
+ var rowsData_1 = this.gridService.setDataFields(data, this.dataKey);
3990
+ var initializeData = __spreadArray([], __read(rowsData_1));
3991
+ this.rowsData = initializeData.splice(1, 40);
3992
+ setTimeout(function () {
3993
+ _this.rowsData = rowsData_1;
3994
+ }, 100);
3995
+ }
3996
+ else {
3997
+ this.rowsData = this.gridService.setDataFields(data, this.dataKey);
3998
+ }
3999
+ this.editRowsRecords = {};
4000
+ if (this.selectedRows) {
4001
+ setTimeout(function () {
4002
+ var selectedElementRef = _this.gridRow.find(function (x) { return x.nativeElement.id === _this.selectedRows[_this.dataKey]; });
4003
+ selectedElementRef &&
4004
+ selectedElementRef.nativeElement.scrollIntoView({ behavior: 'smooth' });
4005
+ }, 0);
4006
+ }
4007
+ //manipulate checkbox string value to true and false.
4008
+ this.changeCheckboxStringValue();
3971
4009
  }
3972
4010
  else {
3973
4011
  this.rowsData = [];
3974
4012
  }
3975
- // Cleaning the editing stack
3976
- // this.editingRowKeys = {};
3977
- this.editRowsRecords = {};
3978
- setTimeout(function () {
3979
- if (data && data.length > 0 && _this.selectedRows) {
3980
- var selectedElementRef = _this.gridRow.find(function (x) { return x.nativeElement.id === _this.selectedRows[_this.dataKey]; });
3981
- selectedElementRef &&
3982
- selectedElementRef.nativeElement.scrollIntoView({ behavior: 'smooth' });
3983
- }
3984
- }, 0);
3985
- if (this.columns && this.columns.length > 0) {
3986
- this.columns.forEach(function (column) {
3987
- if (column.type === exports.EGridColumnType.DROPDOWN && _this.setDropdowndataValue) {
3988
- _this.setDropdownValue(column, {}, false);
3989
- }
3990
- });
3991
- }
3992
- //manipulate checkbox string value to true and false.
3993
- this.changeCheckboxStringValue();
3994
4013
  }
3995
4014
  },
3996
4015
  enumerable: false,
@@ -4040,13 +4059,13 @@
4040
4059
  return serverFilterValues.filters.find(function (x) { return x.field === field; });
4041
4060
  });
4042
4061
  serverFilterValues.filters = serverFilterValues.filters.filter(function (obj) { var _a, _b; return (obj === null || obj === void 0 ? void 0 : obj.value) && ((_b = (_a = obj.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.length) > 0 && obj.field; });
4043
- this.gridService.softCachingFilters[((_c = this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id) + currentUrl()] = serverFilterValues;
4062
+ this.gridService.softCachingFilters[((_c = this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id) + this.currentUrl] = serverFilterValues;
4044
4063
  if (this.gridService.applyFilterEvent || this.autoLoadData === true) {
4045
4064
  // setting pagination page as first
4046
4065
  serverFilterValues.page = 1;
4047
4066
  this.autoLoadData = true;
4048
- if (this.defaultRows && this.pagination) {
4049
- serverFilterValues.pageSize = this.defaultRows;
4067
+ if (this.defaultRowNumber && this.pagination) {
4068
+ serverFilterValues.pageSize = this.defaultRowNumber;
4050
4069
  }
4051
4070
  if (this.gridService.applyFilterEvent) {
4052
4071
  this.isCheckBoxChangeEventCalled = false;
@@ -4062,6 +4081,20 @@
4062
4081
  enumerable: false,
4063
4082
  configurable: true
4064
4083
  });
4084
+ Object.defineProperty(GridComponent.prototype, "defaultRows", {
4085
+ // Sets number of rows to be shown the grid
4086
+ set: function (value) {
4087
+ if (value) {
4088
+ this.defaultRowNumber = value;
4089
+ if (!this.rowsPerPageOptions.includes(this.defaultRowNumber)) {
4090
+ this.rowsPerPageOptions.unshift(this.defaultRowNumber);
4091
+ }
4092
+ }
4093
+ },
4094
+ enumerable: false,
4095
+ configurable: true
4096
+ });
4097
+ ;
4065
4098
  Object.defineProperty(GridComponent.prototype, "selectedColumns", {
4066
4099
  get: function () {
4067
4100
  return this._selectedColumns;
@@ -4203,11 +4236,7 @@
4203
4236
  this.allowCaching = this.pagination;
4204
4237
  }
4205
4238
  else if ((_a = this.componentTableRef) === null || _a === void 0 ? void 0 : _a.id) {
4206
- localStorage.removeItem('SetFilters-' + ((_b = this.componentTableRef) === null || _b === void 0 ? void 0 : _b.id) + currentUrl());
4207
- }
4208
- // add defaultRow in pagination array
4209
- if (!this.setPaginationLength.includes(this.defaultRows)) {
4210
- this.setPaginationLength.unshift(this.defaultRows);
4239
+ localStorage.removeItem('SetFilters-' + ((_b = this.componentTableRef) === null || _b === void 0 ? void 0 : _b.id) + this.currentUrl);
4211
4240
  }
4212
4241
  var hasColumns = this.columns && this.columns.length > 0;
4213
4242
  if (hasColumns) {
@@ -4274,10 +4303,10 @@
4274
4303
  }
4275
4304
  var searchFilters;
4276
4305
  if (!_this.softCaching && ((_c = _this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id)) {
4277
- searchFilters = JSON.parse(localStorage.getItem('SetFilters-' + ((_d = _this.componentTableRef) === null || _d === void 0 ? void 0 : _d.id) + currentUrl()));
4306
+ searchFilters = JSON.parse(localStorage.getItem('SetFilters-' + ((_d = _this.componentTableRef) === null || _d === void 0 ? void 0 : _d.id) + _this.currentUrl));
4278
4307
  }
4279
4308
  else if ((_e = _this.componentTableRef) === null || _e === void 0 ? void 0 : _e.id) {
4280
- searchFilters = _this.gridService.softCachingFilters[((_f = _this.componentTableRef) === null || _f === void 0 ? void 0 : _f.id) + currentUrl()];
4309
+ searchFilters = _this.gridService.softCachingFilters[((_f = _this.componentTableRef) === null || _f === void 0 ? void 0 : _f.id) + _this.currentUrl];
4281
4310
  }
4282
4311
  if (!_this.hideFilter &&
4283
4312
  searchFilters &&
@@ -4371,6 +4400,10 @@
4371
4400
  }
4372
4401
  setTimeout(function () {
4373
4402
  var _a, _b;
4403
+ var globalFilterBtn = document.getElementById('searchGlobalFilterBtn');
4404
+ if (globalFilterBtn) {
4405
+ _this.showFilterbtn = true;
4406
+ }
4374
4407
  var classElement = document.getElementsByClassName('highlighted-row');
4375
4408
  if (classElement.length > 0) {
4376
4409
  classElement[0].scrollIntoView();
@@ -4440,7 +4473,7 @@
4440
4473
  };
4441
4474
  // set the format of currency && number && decimal && percent
4442
4475
  GridComponent.prototype.setNumericFormat = function (column, row) {
4443
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
4476
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
4444
4477
  row = objConvertToLower(row);
4445
4478
  var value = ((_a = row[column.field + '_obj']) === null || _a === void 0 ? void 0 : _a.displayText)
4446
4479
  ? (_b = row[column.field + '_obj']) === null || _b === void 0 ? void 0 : _b.displayText
@@ -4449,20 +4482,20 @@
4449
4482
  : row[(_g = column.displayField) === null || _g === void 0 ? void 0 : _g.toLowerCase()]
4450
4483
  ? row[column.displayField.toLowerCase()]
4451
4484
  : (((_j = row[((_h = column.field) === null || _h === void 0 ? void 0 : _h.toLowerCase()) + '_obj']) === null || _j === void 0 ? void 0 : _j.text) || ((_l = row[((_k = column.field) === null || _k === void 0 ? void 0 : _k.toLowerCase()) + '_obj']) === null || _l === void 0 ? void 0 : _l.text) === 0 || ((_o = row[((_m = column.field) === null || _m === void 0 ? void 0 : _m.toLowerCase()) + '_obj']) === null || _o === void 0 ? void 0 : _o.text) === null)
4452
- ? (_p = row[column.field.toLowerCase() + '_obj']) === null || _p === void 0 ? void 0 : _p.text : row[column.field.toLowerCase()];
4485
+ ? (_q = row[((_p = column.field) === null || _p === void 0 ? void 0 : _p.toLowerCase()) + '_obj']) === null || _q === void 0 ? void 0 : _q.text : row[(_r = column.field) === null || _r === void 0 ? void 0 : _r.toLowerCase()];
4453
4486
  if (this.typeOf(value) === 'number' && value === 0) {
4454
4487
  value = value.toString();
4455
4488
  }
4456
- var formatParams = (_q = column.format) === null || _q === void 0 ? void 0 : _q.formatParams;
4489
+ var formatParams = (_s = column.format) === null || _s === void 0 ? void 0 : _s.formatParams;
4457
4490
  var digitsInfo = formatParams === null || formatParams === void 0 ? void 0 : formatParams.digitsInfo;
4458
4491
  if (column.format && value) {
4459
- switch ((_r = column.format) === null || _r === void 0 ? void 0 : _r.type) {
4492
+ switch ((_t = column.format) === null || _t === void 0 ? void 0 : _t.type) {
4460
4493
  case exports.EGridFormatType.CURRENCY:
4461
- value = (_s = new Intl.NumberFormat((formatParams === null || formatParams === void 0 ? void 0 : formatParams.locale) ? formatParams.locale : 'en-US', {
4494
+ value = (_u = new Intl.NumberFormat((formatParams === null || formatParams === void 0 ? void 0 : formatParams.locale) ? formatParams.locale : 'en-US', {
4462
4495
  style: 'currency',
4463
4496
  currency: (formatParams === null || formatParams === void 0 ? void 0 : formatParams.currency) ? formatParams.currency : 'USD',
4464
4497
  minimumFractionDigits: digitsInfo ? digitsInfo : '2',
4465
- })) === null || _s === void 0 ? void 0 : _s.format(value);
4498
+ })) === null || _u === void 0 ? void 0 : _u.format(value);
4466
4499
  break;
4467
4500
  case exports.EGridFormatType.DECIMAL:
4468
4501
  value = parseFloat(value).toFixed(digitsInfo ? digitsInfo : '2');
@@ -4512,8 +4545,11 @@
4512
4545
  this.rowsData &&
4513
4546
  this.rowsData.length > 0 &&
4514
4547
  this.columns.length > 0) {
4515
- this.rowsData.forEach(function (row) {
4516
- _this.columns.forEach(function (column) {
4548
+ this.columns.forEach(function (column) {
4549
+ if (column.type === exports.EGridColumnType.DROPDOWN && _this.setDropdowndataValue) {
4550
+ _this.setDropdownValue(column, {}, false);
4551
+ }
4552
+ _this.rowsData.forEach(function (row) {
4517
4553
  if (column.type === exports.EGridColumnType.BOOLEAN) {
4518
4554
  if ((typeof (row[column.field] === 'string') &&
4519
4555
  (row[column.field] === '1' || row[column.field] === '0')) ||
@@ -4868,14 +4904,14 @@
4868
4904
  ((_b = _this.serverFilters) === null || _b === void 0 ? void 0 : _b.filters.length) > 0 &&
4869
4905
  (_this.allowCaching || _this.softCaching)) {
4870
4906
  if (!_this.softCaching && ((_c = _this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id)) {
4871
- localStorage.setItem('SetFilters-' + ((_d = _this.componentTableRef) === null || _d === void 0 ? void 0 : _d.id) + currentUrl(), JSON.stringify(_this.serverFilters));
4907
+ localStorage.setItem('SetFilters-' + ((_d = _this.componentTableRef) === null || _d === void 0 ? void 0 : _d.id) + _this.currentUrl, JSON.stringify(_this.serverFilters));
4872
4908
  }
4873
4909
  else if ((_e = _this.componentTableRef) === null || _e === void 0 ? void 0 : _e.id) {
4874
- _this.gridService.softCachingFilters[((_f = _this.componentTableRef) === null || _f === void 0 ? void 0 : _f.id) + currentUrl()] = _this.serverFilters;
4910
+ _this.gridService.softCachingFilters[((_f = _this.componentTableRef) === null || _f === void 0 ? void 0 : _f.id) + _this.currentUrl] = _this.serverFilters;
4875
4911
  }
4876
4912
  }
4877
4913
  else {
4878
- _this.gridService.softCachingFilters[((_g = _this.componentTableRef) === null || _g === void 0 ? void 0 : _g.id) + currentUrl()] = {};
4914
+ _this.gridService.softCachingFilters[((_g = _this.componentTableRef) === null || _g === void 0 ? void 0 : _g.id) + _this.currentUrl] = {};
4879
4915
  }
4880
4916
  var serverFilterValues = JSON.parse(JSON.stringify(_this.serverFilters));
4881
4917
  serverFilterValues.filters = (_this.serverFilters.filters || []).concat(_this.globalData);
@@ -5955,26 +5991,26 @@
5955
5991
  ((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a.toString().length) === 0) {
5956
5992
  var searchFilters = void 0;
5957
5993
  if (!this.softCaching && ((_b = this.componentTableRef) === null || _b === void 0 ? void 0 : _b.id)) {
5958
- searchFilters = JSON.parse(localStorage.getItem('SetFilters-' + ((_c = this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id) + currentUrl()));
5994
+ searchFilters = JSON.parse(localStorage.getItem('SetFilters-' + ((_c = this.componentTableRef) === null || _c === void 0 ? void 0 : _c.id) + this.currentUrl));
5959
5995
  }
5960
5996
  else if ((_d = this.componentTableRef) === null || _d === void 0 ? void 0 : _d.id) {
5961
- searchFilters = this.gridService.softCachingFilters[((_e = this.componentTableRef) === null || _e === void 0 ? void 0 : _e.id) + currentUrl()];
5997
+ searchFilters = this.gridService.softCachingFilters[((_e = this.componentTableRef) === null || _e === void 0 ? void 0 : _e.id) + this.currentUrl];
5962
5998
  }
5963
5999
  if (searchFilters && searchFilters.filters) {
5964
6000
  if (searchFilters.filters.length > 0) {
5965
6001
  var index = searchFilters.filters.findIndex(function (x) { return x.field === column.field; });
5966
6002
  if (index > -1) {
5967
6003
  if (searchFilters.filters.length === 1 && ((_f = this.componentTableRef) === null || _f === void 0 ? void 0 : _f.id)) {
5968
- this.gridService.softCachingFilters[((_g = this.componentTableRef) === null || _g === void 0 ? void 0 : _g.id) + currentUrl()] = [];
5969
- localStorage.removeItem('SetFilters-' + ((_h = this.componentTableRef) === null || _h === void 0 ? void 0 : _h.id) + currentUrl());
6004
+ this.gridService.softCachingFilters[((_g = this.componentTableRef) === null || _g === void 0 ? void 0 : _g.id) + this.currentUrl] = [];
6005
+ localStorage.removeItem('SetFilters-' + ((_h = this.componentTableRef) === null || _h === void 0 ? void 0 : _h.id) + this.currentUrl);
5970
6006
  }
5971
6007
  else {
5972
6008
  searchFilters.filters.splice(index, 1);
5973
6009
  if (!this.softCaching && ((_j = this.componentTableRef) === null || _j === void 0 ? void 0 : _j.id)) {
5974
- localStorage.setItem('SetFilters-' + ((_k = this.componentTableRef) === null || _k === void 0 ? void 0 : _k.id) + currentUrl(), JSON.stringify(searchFilters));
6010
+ localStorage.setItem('SetFilters-' + ((_k = this.componentTableRef) === null || _k === void 0 ? void 0 : _k.id) + this.currentUrl, JSON.stringify(searchFilters));
5975
6011
  }
5976
6012
  else if ((_l = this.componentTableRef) === null || _l === void 0 ? void 0 : _l.id) {
5977
- this.gridService.softCachingFilters[((_m = this.componentTableRef) === null || _m === void 0 ? void 0 : _m.id) + currentUrl()] = searchFilters;
6013
+ this.gridService.softCachingFilters[((_m = this.componentTableRef) === null || _m === void 0 ? void 0 : _m.id) + this.currentUrl] = searchFilters;
5978
6014
  }
5979
6015
  }
5980
6016
  }
@@ -6360,7 +6396,7 @@
6360
6396
  GridComponent.decorators = [
6361
6397
  { type: i0.Component, args: [{
6362
6398
  selector: 'se-grid',
6363
- 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=\"global-filter-buttons-wrapper\">\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 apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\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 ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n \" class='global-refresh global-btn'\n ></button>\n\n <!-- button for save all grid at once -->\n <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n icon=\"pi pi-check\" [label]=\"'Save'\"\n [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : '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=\"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 <!-- 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 *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\"\n [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n </div>\n\n <!-- header Button for Excel File on Grid -->\n <button *ngIf=\"allowExportToExcel\" type=\"button\" pButton icon=\"pi pi-file-excel\" (click)=\"exportExcel()\"\n class=\"p-button-success\" pTooltip=\"Export to Excel\" tooltipPosition=\"bottom\" pRipple></button>\n\n <!-- header Button for PDF File on Grid -->\n <button *ngIf=\"allowExportToPdf\" type=\"button\" pButton icon=\"pi pi-file-pdf\" (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2 p-ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n <ng-content></ng-content>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [alwaysShowPaginator]=\"pagination && totalRecords > 0\" [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\" \n [tableStyle]=\"{ 'max-height': scrollHeight }\"\n editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n <!-- [scrollHeight]=\"scrollHeight\" -->\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 <span class=\"th-content-wrapper\">\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 </span>\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 [style]=\"column.style\"\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 <span class=\"th-content-wrapper\">\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 </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'\">Actions</th>\n </tr>\n <tr *ngIf=\"filtering && !hideFilter\">\n <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n </th>\n <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n <!-- Text input on Header For Filter-->\n <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\" pInputText />\n </ng-template>\n </p-columnFilter>\n\n <!-- Numeric input on Header For Filter-->\n <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"></p-inputNumber>\n </ng-template>\n </p-columnFilter>\n\n <!-- lookup input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'lookup_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <div class=\"close-icon-wrapper grid-component lookup-filter-wrapper\">\n <div class=\"lookup-filter-input-wrapper\"> \n <input\n id=\"lookUp_filter\"\n class=\"grid-component lookup-filter\"\n autocomplete=\"off\"\n type=\"text\"\n [(ngModel)]=\"column.filterValue\"\n (click)=\"setFilterLookup(column)\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n </div> \n <div><button\n *ngIf=\"column.filterValue\"\n icon=\"pi pi-times\"\n pButton\n type=\"button\"\n (click)=\"lookupClearValue(column)\"\n ></button></div>\n </div>\n </ng-template>\n </p-columnFilter>\n\n <!-- checkbox on Header For Filter-->\n <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n (keydown)=\"backspaceEvent($event, column)\">\n </p-checkbox>\n </ng-template>\n </p-columnFilter>\n\n <!-- multiSelect on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n placeholder=\"Any\" optionLabel=\"label\">\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n\n <!-- dropdown on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n </ng-template>\n </p-columnFilter>\n\n <!-- calendar on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n </p-calendar>\n </ng-template>\n </p-columnFilter>\n\n <!-- Default Filter For Header -->\n <p-columnFilter [type]=\"\n column.type && column.type !== 'link' ? column.type : 'text'\n \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n </p-columnFilter>\n </span>\n </th>\n <th\n *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n </tr>\n </ng-template>\n\n <!-- Body columns on Grid -->\n <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n <tr [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n </td>\n\n <!-- first actions column -->\n <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class=\"setActionColumnWidth\">\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\n </se-grid-row-actions>\n </span>\n </td>\n\n <!-- Grid Rows Data Bindings Start -->\n <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style\" >\n <span class=\"td-content-wrapper\">\n\n <!-- Boolean column on Grid -->\n <span *ngSwitchCase=\"'boolean'\">\n <td *ngIf=\"!editing\">\n <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n [(ngModel)]=\" \n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y'||\n ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? Checked\n : unChecked\n \">\n </p-checkbox>\n </td>\n <td *ngIf=\"editing\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for edit checkBox -->\n <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n row[column.field] && \n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y' ||\n ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? editModeChecked\n : editModeunCkecked\n \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ row[column.field] }}\n </ng-template>\n </p-cellEditor>\n </td>\n </span>\n\n <!-- link column on Grid -->\n <span *ngSwitchCase=\"'link'\">\n <!-- link column for HyperLink Case -->\n <span *ngIf=\"column.allowSave === false\">\n <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n \n </span>\n <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\n </span>\n </span>\n <!-- link column for Edit Case -->\n <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : 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)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\" />\n </span>\n <span *ngIf=\"column.editable === false\" >\n <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\n </span>\n <span *ngIf=\"column.editLink === false\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\" [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n >\n <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n\n <!-- Iframe column on Grid -->\n <span *ngSwitchCase=\"'iframe'\">\n <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText\n ? column.displayText\n : row[column.field]\n\n \"\n > \n <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText ? column.displayText : row[column.field]\n }}\n </ng-template>\n </span>\n </span>\n\n <!-- dialog column on Grid -->\n <span *ngSwitchCase=\"'dialog'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\" \n [title]=\"setConditionBaseValue(row, column) \"\n >\n <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n <input\n readonly\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n pInputText\n (click)=\"selectLookupField(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n row[column.field]\"\n [name]=\"row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n />\n </span>\n <span\n *ngIf=\"column.editable === false || column.editable === undefined\n \" class=\"custom-link\"\n [class]=\"\n allowDisabled(column,row) ? 'disabled-link' : ''\n \" (click)=\"openGridDialog(column, row)\">\n\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n }}</ng-template>\n\n\n </span>\n </span>\n\n <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n row[column.field]\n | date: (column.format ? column.format : 'MM/dd/YY')\n \">\n <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n [timeOnly]=\"column.timeOnly\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\"\n [class]=\"row.disabled || allowDisabled(column,row) ? 'disabled-link' : ''\"\n (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\">\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n\n <!-- {{ setConditionBaseValue(row, column) }} -->\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- lookup Input column on Grid -->\n <span *ngSwitchCase=\"'lookup_input'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <div class=\"close-icon-wrapper\">\n <input readonly type=\"text\" pInputText\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n typeOf(row[column.field]) === 'object' ? row[column.field]?.text : 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 setLookupReadOnlyValue(row, column)\n }}\n </a>\n </span>\n <span *ngIf=\"!column.linkId\" [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n (click)=\"openLookupHyperlink(column, row)\">\n {{\n setLookupReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Numeric Input column on Grid -->\n <span *ngSwitchCase=\"'numeric'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for Currency && Decimal && Percent -->\n <span class=\"input-number\">\n <p-inputNumber [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" [class]=\"\n column.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \" [showButtons]=\"!column.format ? true : false\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n column.format &&\n column.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \" [currency]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.currency\n ? column.format.formatParams.currency\n : 'USD'\n \" [locale]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.locale\n ? column.format.formatParams.locale\n : 'en-US'\n \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n column.format &&\n column.format.type === 'percent' && \n '%'\n \n \">\n </p-inputNumber>\n </span>\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [title]=\"setNumericFormat(column, row)\">\n {{\n setNumericFormat(column, row)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Button column on Grid -->\n <span>\n <div *ngSwitchCase=\"'add_button'\">\n <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n </div>\n </span>\n\n <!-- Date column on Grid -->\n <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ setConditionBaseValue(row,column) }}\n </ng-template>\n </p-cellEditor>\n </span>\n <span *ngSwitchDefault>\n <span [ngSwitch]=\"column.type\">\n <!-- Dropdown column on Grid -->\n <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n setDropdwonReadOnlyValue(row, column)\n \">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n row[column.field+'_data']\n ? row[column.field+'_data']\n : column.data\n \"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n ? row[column.displayField]\n : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"!row[column.field+'_obj']?.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)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n </p-multiSelect>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [title]=\"\n row[column.displayField]\n ? row[column.displayField]\n : setMultiSelectData(column, row[column.field])\n \">\n {{\n row[column.displayField]\n ? row[column.displayField] :\n setMultiSelectData(column, row[column.field])\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- AutoComplete Search -->\n <span *ngSwitchCase=\"'AutoComplete'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-autoComplete \n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n [name]=\"column.header\"\n [suggestions]=\"column.data\" \n (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n row[column.field]?.text :\n row[column.field]\"\n [dropdown]=\"column.showOption\" \n (ngModelChange)=\"onChangeEvent(column, row)\"\n (click)=\"onClickEvent(column, row)\" \n (completeMethod)=\"autoSearch($event, column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\" \n [disabled]=\"allowDisabled(column,row)\" \n [multiple]=\"true\"\n (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n </p-autoComplete>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.displayField]\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n </span>\n </span>\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.field] && !column.displayField\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n value[column.field] : value[column.field] + ';' : value[column.field] }}\n </span>\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n <!-- Add Generate Report Button -->\n <span *ngSwitchCase=\"'report'\">\n <p-cellEditor>\n <ng-template pTemplate=\"output\">\n <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n <ng-template pTemplate=\"input\">\n <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <span *ngSwitchDefault>\n <!-- Input column on Grid -->\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <input pInputText type=\"text\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span (click)=\"onClickEvent(column, row)\" [title]=\"\n setTextBoxReadOnlyValue(row, column)\n \">\n {{\n setTextBoxReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n </span>\n \n </span>\n </td>\n <!-- Grid Rows Data Bindings End -->\n\n <!-- Action column on Grid -->\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class='setActionColumnWidth'>\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\n </se-grid-row-actions>\n </span>\n </td>\n </tr>\n </ng-template>\n\n <!-- Footer columns on Grid -->\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"aggregateFooter\">\n <td\n *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [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()) ||\n aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n <div [innerHTML]=\"aggr.aggrValue\">\n </div>\n </div>\n </div>\n </div>\n </td>\n <td\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n </tr>\n </ng-template>\n\n <!-- Footer for Empty Message columns on Grid -->\n <ng-template pTemplate=\"emptymessage\">\n <tr class=\"grid-component no-records-found\">\n <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n </tr>\n </ng-template>\n</p-table>\n</div>",
6399
+ 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=\"global-filter-buttons-wrapper\">\n\n <!-- button for apply value on Grid -->\n <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n [class]=\"\n searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n \"></button>\n\n <!-- button for clear value on Grid -->\n <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n \" class='global-refresh global-btn'\n ></button>\n\n <!-- button for save all grid at once -->\n <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n icon=\"pi pi-check\" [label]=\"'Save'\"\n [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : '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=\"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 <!-- 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 *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\"\n [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n </div>\n\n <!-- header Button for Excel File on Grid -->\n <button *ngIf=\"allowExportToExcel\" type=\"button\" pButton icon=\"pi pi-file-excel\" (click)=\"exportExcel()\"\n class=\"p-button-success\" pTooltip=\"Export to Excel\" tooltipPosition=\"bottom\" pRipple></button>\n\n <!-- header Button for PDF File on Grid -->\n <button *ngIf=\"allowExportToPdf\" type=\"button\" pButton icon=\"pi pi-file-pdf\" (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2 p-ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n <ng-content></ng-content>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [alwaysShowPaginator]=\"pagination && totalRecords > 0\" [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\" \n [tableStyle]=\"{ 'max-height': scrollHeight }\"\n editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n <!-- [scrollHeight]=\"scrollHeight\" -->\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 <span class=\"th-content-wrapper\">\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 </span>\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 [style]=\"column.style\"\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 <span class=\"th-content-wrapper\">\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 </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'\">Actions</th>\n </tr>\n <tr *ngIf=\"filtering && !hideFilter\">\n <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n </th>\n <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n <!-- Text input on Header For Filter-->\n <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\" pInputText />\n </ng-template>\n </p-columnFilter>\n\n <!-- Numeric input on Header For Filter-->\n <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"></p-inputNumber>\n </ng-template>\n </p-columnFilter>\n\n <!-- lookup input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'lookup_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <div class=\"close-icon-wrapper grid-component lookup-filter-wrapper\">\n <div class=\"lookup-filter-input-wrapper\"> \n <input\n id=\"lookUp_filter\"\n class=\"grid-component lookup-filter\"\n autocomplete=\"off\"\n type=\"text\"\n [(ngModel)]=\"column.filterValue\"\n (click)=\"setFilterLookup(column)\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n </div> \n <div><button\n *ngIf=\"column.filterValue\"\n icon=\"pi pi-times\"\n pButton\n type=\"button\"\n (click)=\"lookupClearValue(column)\"\n ></button></div>\n </div>\n </ng-template>\n </p-columnFilter>\n\n <!-- checkbox on Header For Filter-->\n <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n (keydown)=\"backspaceEvent($event, column)\">\n </p-checkbox>\n </ng-template>\n </p-columnFilter>\n\n <!-- multiSelect on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n placeholder=\"Any\" optionLabel=\"label\">\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n\n <!-- dropdown on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n </ng-template>\n </p-columnFilter>\n\n <!-- calendar on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n </p-calendar>\n </ng-template>\n </p-columnFilter>\n\n <!-- Default Filter For Header -->\n <p-columnFilter [type]=\"\n column.type && column.type !== 'link' ? column.type : 'text'\n \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n </p-columnFilter>\n </span>\n </th>\n <th\n *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n </tr>\n </ng-template>\n\n <!-- Body columns on Grid -->\n <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n <tr [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n </td>\n\n <!-- first actions column -->\n <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class=\"setActionColumnWidth\">\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\n </se-grid-row-actions>\n </span>\n </td>\n\n <!-- Grid Rows Data Bindings Start -->\n <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style\" >\n <span class=\"td-content-wrapper\">\n\n <!-- Boolean column on Grid -->\n <span *ngSwitchCase=\"'boolean'\">\n <td *ngIf=\"!editing\">\n <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n [(ngModel)]=\" \n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y'||\n ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? Checked\n : unChecked\n \">\n </p-checkbox>\n </td>\n <td *ngIf=\"editing\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for edit checkBox -->\n <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n row[column.field] && \n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y' ||\n ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? editModeChecked\n : editModeunCkecked\n \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ row[column.field] }}\n </ng-template>\n </p-cellEditor>\n </td>\n </span>\n\n <!-- link column on Grid -->\n <span *ngSwitchCase=\"'link'\">\n <!-- link column for HyperLink Case -->\n <span *ngIf=\"column.allowSave === false\">\n <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n \n </span>\n <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\n </span>\n </span>\n <!-- link column for Edit Case -->\n <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : 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)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\" />\n </span>\n <span *ngIf=\"column.editable === false\" >\n <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\n </span>\n <span *ngIf=\"column.editLink === false\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\" [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n >\n <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n\n <!-- Iframe column on Grid -->\n <span *ngSwitchCase=\"'iframe'\">\n <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText\n ? column.displayText\n : row[column.field]\n\n \"\n > \n <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText ? column.displayText : row[column.field]\n }}\n </ng-template>\n </span>\n </span>\n\n <!-- dialog column on Grid -->\n <span *ngSwitchCase=\"'dialog'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\" \n [title]=\"setConditionBaseValue(row, column) \"\n >\n <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n <input\n readonly\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n pInputText\n (click)=\"selectLookupField(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n row[column.field]\"\n [name]=\"row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n />\n </span>\n <span\n *ngIf=\"column.editable === false || column.editable === undefined\n \" class=\"custom-link\"\n [class]=\"\n allowDisabled(column,row) ? 'disabled-link' : ''\n \" (click)=\"openGridDialog(column, row)\">\n\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n }}</ng-template>\n\n\n </span>\n </span>\n\n <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n row[column.field]\n | date: (column.format ? column.format : 'MM/dd/YY')\n \">\n <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n [timeOnly]=\"column.timeOnly\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\"\n [class]=\"row.disabled || allowDisabled(column,row) ? 'disabled-link' : ''\"\n (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\">\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n\n <!-- {{ setConditionBaseValue(row, column) }} -->\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- lookup Input column on Grid -->\n <span *ngSwitchCase=\"'lookup_input'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <div class=\"close-icon-wrapper\">\n <input readonly type=\"text\" pInputText\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n typeOf(row[column.field]) === 'object' ? row[column.field]?.text : 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 setLookupReadOnlyValue(row, column)\n }}\n </a>\n </span>\n <span *ngIf=\"!column.linkId\" [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n (click)=\"openLookupHyperlink(column, row)\">\n {{\n setLookupReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Numeric Input column on Grid -->\n <span *ngSwitchCase=\"'numeric'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for Currency && Decimal && Percent -->\n <span class=\"input-number\">\n <p-inputNumber [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" [class]=\"\n column.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \" [showButtons]=\"!column.format ? true : false\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n column.format &&\n column.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \" [currency]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.currency\n ? column.format.formatParams.currency\n : 'USD'\n \" [locale]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.locale\n ? column.format.formatParams.locale\n : 'en-US'\n \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n column.format &&\n column.format.type === 'percent' && \n '%'\n \n \">\n </p-inputNumber>\n </span>\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [title]=\"setNumericFormat(column, row)\">\n {{\n setNumericFormat(column, row)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Button column on Grid -->\n <span>\n <div *ngSwitchCase=\"'add_button'\">\n <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n </div>\n </span>\n\n <!-- Date column on Grid -->\n <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ setConditionBaseValue(row,column) }}\n </ng-template>\n </p-cellEditor>\n </span>\n <span *ngSwitchDefault>\n <span [ngSwitch]=\"column.type\">\n <!-- Dropdown column on Grid -->\n <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n setDropdwonReadOnlyValue(row, column)\n \">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n row[column.field+'_data']\n ? row[column.field+'_data']\n : column.data\n \"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n ? row[column.displayField]\n : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"!row[column.field+'_obj']?.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)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n </p-multiSelect>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [title]=\"\n row[column.displayField]\n ? row[column.displayField]\n : setMultiSelectData(column, row[column.field])\n \">\n {{\n row[column.displayField]\n ? row[column.displayField] :\n setMultiSelectData(column, row[column.field])\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- AutoComplete Search -->\n <span *ngSwitchCase=\"'AutoComplete'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-autoComplete \n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n [name]=\"column.header\"\n [suggestions]=\"column.data\" \n (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n row[column.field]?.text :\n row[column.field]\"\n [dropdown]=\"column.showOption\" \n (ngModelChange)=\"onChangeEvent(column, row)\"\n (click)=\"onClickEvent(column, row)\" \n (completeMethod)=\"autoSearch($event, column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\" \n [disabled]=\"allowDisabled(column,row)\" \n [multiple]=\"true\"\n (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n </p-autoComplete>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.displayField]\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n </span>\n </span>\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.field] && !column.displayField\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n value[column.field] : value[column.field] + ';' : value[column.field] }}\n </span>\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n <!-- Add Generate Report Button -->\n <span *ngSwitchCase=\"'report'\">\n <p-cellEditor>\n <ng-template pTemplate=\"output\">\n <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n <ng-template pTemplate=\"input\">\n <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <span *ngSwitchDefault>\n <!-- Input column on Grid -->\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <input pInputText type=\"text\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span (click)=\"onClickEvent(column, row)\" [title]=\"\n setTextBoxReadOnlyValue(row, column)\n \">\n {{\n setTextBoxReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n </span>\n \n </span>\n </td>\n <!-- Grid Rows Data Bindings End -->\n\n <!-- Action column on Grid -->\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class='setActionColumnWidth'>\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\n </se-grid-row-actions>\n </span>\n </td>\n </tr>\n </ng-template>\n\n <!-- Footer columns on Grid -->\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"aggregateFooter\">\n <td\n *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [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()) ||\n aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n <div [innerHTML]=\"aggr.aggrValue\">\n </div>\n </div>\n </div>\n </div>\n </td>\n <td\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n </tr>\n </ng-template>\n\n <!-- Footer for Empty Message columns on Grid -->\n <ng-template pTemplate=\"emptymessage\">\n <tr class=\"grid-component no-records-found\">\n <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n </tr>\n </ng-template>\n</p-table>\n</div>",
6364
6400
  styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disabled-link,.disabled-link a,.disabled-link label,.disabled-link span,.disabled-link div,.disable-label-control,.disabled-link.custom-link,.disabled-link.custom-link a,.disabled-link.custom-link label,.disabled-link.custom-link span,.disabled-link.custom-link div,.disable-label-control.custom-link{pointer-events:none;color:#83baf8}.custom-link{color:#205dcf;font-size:12px}.custom-link:not(.disabled-link){cursor:pointer}.mr-2{margin-right:10px;display:block}.highlighted-row{background-color:#dee2e6!important}.hide-clear-filter-button{display:none!important}\n"]
6365
6401
  },] }
6366
6402
  ];