@churchillliving/se-ui-toolkit 6.53.467 → 6.53.469

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('primeng/api'), require('@angular/core'), require('primeng/dynamicdialog'), require('file-saver'), require('jspdf'), require('@angular/common'), require('ngx-toastr'), require('@angular/common/http'), require('rxjs'), require('@angular/platform-browser'), require('@angular/router'), require('primeng/table'), require('primeng/multiselect'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('primeng/tabview'), require('primeng/dropdown'), require('primeng/calendar'), require('primeng/button'), require('primeng/ripple'), require('primeng/checkbox'), require('primeng/inputtext'), require('primeng/tristatecheckbox'), require('primeng/inputtextarea'), require('primeng/tooltip'), require('primeng/panelmenu'), require('ngx-cookie-service'), require('@angular/cdk/portal'), require('primeng/menu'), require('primeng/galleria'), require('primeng/autocomplete'), require('primeng/accordion'), require('primeng/confirmdialog'), require('primeng/messages'), require('primeng/progressspinner'), require('primeng/inputnumber'), require('primeng/avatar'), require('primeng/card'), require('@angular/cdk/drag-drop'), require('primeng/inputswitch')) :
-  typeof define === 'function' && define.amd ? define('@churchillliving/se-ui-toolkit', ['exports', 'primeng/api', '@angular/core', 'primeng/dynamicdialog', 'file-saver', 'jspdf', '@angular/common', 'ngx-toastr', '@angular/common/http', 'rxjs', '@angular/platform-browser', '@angular/router', 'primeng/table', 'primeng/multiselect', '@angular/forms', '@angular/platform-browser/animations', 'primeng/tabview', 'primeng/dropdown', 'primeng/calendar', 'primeng/button', 'primeng/ripple', 'primeng/checkbox', 'primeng/inputtext', 'primeng/tristatecheckbox', 'primeng/inputtextarea', 'primeng/tooltip', 'primeng/panelmenu', 'ngx-cookie-service', '@angular/cdk/portal', 'primeng/menu', 'primeng/galleria', 'primeng/autocomplete', 'primeng/accordion', 'primeng/confirmdialog', 'primeng/messages', 'primeng/progressspinner', 'primeng/inputnumber', 'primeng/avatar', 'primeng/card', '@angular/cdk/drag-drop', 'primeng/inputswitch'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.churchillliving = global.churchillliving || {}, global.churchillliving["se-ui-toolkit"] = {}), global.api, global.ng.core, global.dynamicdialog, global.fileSaver, global.jsPDF, global.ng.common, global.ngxToastr, global.ng.common.http, global.rxjs, global.ng.platformBrowser, global.ng.router, global.table, global.multiselect, global.ng.forms, global.ng.platformBrowser.animations, global.tabview, global.dropdown, global.calendar, global.button, global.ripple, global.checkbox, global.inputtext, global.tristatecheckbox, global.inputtextarea, global.tooltip, global.panelmenu, global.ngxCookieService, global.ng.cdk.portal, global.menu, global.galleria, global.autocomplete, global.accordion, global.confirmdialog, global.messages, global.progressspinner, global.inputnumber, global.avatar, global.card, global.ng.cdk.dragDrop, global.inputswitch));
-})(this, (function (exports, api, i0, dynamicdialog, fileSaver, jsPDF, i1$1, ngxToastr, i1, rxjs, platformBrowser, router, table, multiselect, forms, animations, tabview, dropdown, calendar, button, ripple, checkbox, inputtext, tristatecheckbox, inputtextarea, tooltip, panelmenu, ngxCookieService, portal, menu, galleria, autocomplete, accordion, confirmdialog, messages, progressspinner, inputnumber, avatar, card, dragDrop, inputswitch) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('primeng/api'), require('@angular/core'), require('primeng/dynamicdialog'), require('file-saver'), require('jspdf'), require('@angular/common'), require('ngx-toastr'), require('@angular/common/http'), require('rxjs'), require('@angular/platform-browser'), require('@angular/router'), require('primeng/table'), require('primeng/multiselect'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('primeng/tabview'), require('primeng/dropdown'), require('primeng/calendar'), require('primeng/button'), require('primeng/ripple'), require('primeng/checkbox'), require('primeng/inputtext'), require('primeng/tristatecheckbox'), require('primeng/inputtextarea'), require('primeng/tooltip'), require('primeng/panelmenu'), require('ngx-cookie-service'), require('@angular/cdk/portal'), require('primeng/menu'), require('primeng/galleria'), require('primeng/autocomplete'), require('primeng/accordion'), require('primeng/confirmdialog'), require('primeng/messages'), require('primeng/progressspinner'), require('primeng/inputnumber'), require('primeng/avatar'), require('primeng/card'), require('@angular/cdk/drag-drop'), require('primeng/inputswitch'), require('projects/se-ui-toolkit/src/lib/services/report.service')) :
+  typeof define === 'function' && define.amd ? define('@churchillliving/se-ui-toolkit', ['exports', 'primeng/api', '@angular/core', 'primeng/dynamicdialog', 'file-saver', 'jspdf', '@angular/common', 'ngx-toastr', '@angular/common/http', 'rxjs', '@angular/platform-browser', '@angular/router', 'primeng/table', 'primeng/multiselect', '@angular/forms', '@angular/platform-browser/animations', 'primeng/tabview', 'primeng/dropdown', 'primeng/calendar', 'primeng/button', 'primeng/ripple', 'primeng/checkbox', 'primeng/inputtext', 'primeng/tristatecheckbox', 'primeng/inputtextarea', 'primeng/tooltip', 'primeng/panelmenu', 'ngx-cookie-service', '@angular/cdk/portal', 'primeng/menu', 'primeng/galleria', 'primeng/autocomplete', 'primeng/accordion', 'primeng/confirmdialog', 'primeng/messages', 'primeng/progressspinner', 'primeng/inputnumber', 'primeng/avatar', 'primeng/card', '@angular/cdk/drag-drop', 'primeng/inputswitch', 'projects/se-ui-toolkit/src/lib/services/report.service'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.churchillliving = global.churchillliving || {}, global.churchillliving["se-ui-toolkit"] = {}), global.api, global.ng.core, global.i1, global.fileSaver, global.jsPDF, global.ng.common, global.ngxToastr, global.ng.common.http, global.rxjs, global.ng.platformBrowser, global.ng.router, global.table, global.multiselect, global.ng.forms, global.ng.platformBrowser.animations, global.tabview, global.dropdown, global.calendar, global.button, global.ripple, global.checkbox, global.inputtext, global.tristatecheckbox, global.inputtextarea, global.tooltip, global.panelmenu, global.ngxCookieService, global.ng.cdk.portal, global.menu, global.galleria, global.autocomplete, global.accordion, global.confirmdialog, global.messages, global.progressspinner, global.inputnumber, global.avatar, global.card, global.ng.cdk.dragDrop, global.inputswitch, global.report_service));
+})(this, (function (exports, api, i0, i1, fileSaver, jsPDF, i1$2, ngxToastr, i1$1, rxjs, platformBrowser, router, table, multiselect, forms, animations, tabview, dropdown, calendar, button, ripple, checkbox, inputtext, tristatecheckbox, inputtextarea, tooltip, panelmenu, ngxCookieService, portal, menu, galleria, autocomplete, accordion, confirmdialog, messages, progressspinner, inputnumber, avatar, card, dragDrop, inputswitch, report_service) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,9 +25,10 @@
   }
 
   var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+  var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1);
   var jsPDF__default = /*#__PURE__*/_interopDefaultLegacy(jsPDF);
-  var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-  var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+  var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
+  var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
 
   /******************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -596,8 +597,8 @@
   ];
   /** @nocollapse */
   AlertPopUpComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
-      { type: dynamicdialog.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
+      { type: i1.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
   ]; };
 
   var AlertService = /** @class */ (function () {
@@ -681,7 +682,7 @@
   /** @nocollapse */
   AlertService.ctorParameters = function () { return [
       { type: ngxToastr.ToastrService },
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
       { type: api.ConfirmationService }
   ]; };
 
@@ -729,7 +730,7 @@
   ];
   /** @nocollapse */
   RequestService.ctorParameters = function () { return [
-      { type: i1.HttpClient },
+      { type: i1$1.HttpClient },
       { type: undefined, decorators: [{ type: i0.Inject, args: ['env',] }] }
   ]; };
 
@@ -1147,7 +1148,7 @@
               return value;
           }
           else {
-              return i1$1.formatDate(value, 'MM/dd/yyyy', 'en-US');
+              return i1$2.formatDate(value, 'MM/dd/yyyy', 'en-US');
           }
       }
       else {
@@ -1162,7 +1163,7 @@
               return value;
           }
           else {
-              return i1$1.formatDate(value, 'MM/dd/yyyy hh:mm a', 'en-US');
+              return i1$2.formatDate(value, 'MM/dd/yyyy hh:mm a', 'en-US');
           }
       }
       else {
@@ -3595,7 +3596,7 @@
   ];
   /** @nocollapse */
   GridService.ctorParameters = function () { return [
-      { type: i1$1.DatePipe },
+      { type: i1$2.DatePipe },
       { type: HyperlinkService },
       { type: DropdownService },
       { type: AlertService },
@@ -3700,8 +3701,8 @@
   /** @nocollapse */
   IframeComponent.ctorParameters = function () { return [
       { type: platformBrowser.DomSanitizer },
-      { type: dynamicdialog.DynamicDialogRef, decorators: [{ type: i0.Optional }] },
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] }
+      { type: i1.DynamicDialogRef, decorators: [{ type: i0.Optional }] },
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] }
   ]; };
 
   var PageLoggerService = /** @class */ (function () {
@@ -6325,25 +6326,25 @@
   GridComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-grid',
-                  template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-ai-center 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\" [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        <div class=\"grid-component-table-header-inner-div-2\n              table-header-inner-div div-last-inner-html-is-icon\">\n          <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n          <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n            (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <th *ngIf=\"allowSelection && selectionType === 'single'\" \n            class=\"grid-component-selection\">\n        Select\n      </th>\n      <th\n        *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        Actions\n      </th>\n      <th *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n        [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n        class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n        <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n          <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n          <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n          <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n            [field]=\"column.field\"></p-sortIcon>\n        </div>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n        [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\" pInputText />\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Numeric input on Header For Filter-->\n          <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"></p-inputNumber>\n            </ng-template>\n          </p-columnFilter>\n\n            <!-- lookup input on Header For Filter-->\n            <p-columnFilter\n              [type]=\"'text'\"\n              [field]=\"column.field\"\n              *ngSwitchCase=\"'lookup_input'\"\n            >\n              <ng-template\n                pTemplate=\"filter\"\n                let-value\n                let-filter=\"filterCallback\"\n              >\n                <div class=\"close-icon-wrapper grid-component lookup-filter-wrapper\">\n                  <div class=\"lookup-filter-input-wrapper\"> \n                  <input\n                    id=\"lookUp_filter\"\n                    class=\"grid-component lookup-filter\"\n                    autocomplete=\"off\"\n                    type=\"text\"\n                    [(ngModel)]=\"column.filterValue\"\n                    (click)=\"setFilterLookup(column)\"\n                    (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                    (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                    (keydown)=\"backspaceEvent($event, column)\"\n                    (keyup)=\"removingFilters($event, column)\"\n                    pInputText\n                  />\n                  </div>  \n                  <div><button\n                      *ngIf=\"column.filterValue\"\n                      icon=\"pi pi-times\"\n                      pButton\n                      type=\"button\"\n                      (click)=\"lookupClearValue(column)\"\n                    ></button></div>\n                </div>\n              </ng-template>\n            </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\">\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\" optionLabel=\"label\">\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n          </p-columnFilter>\n        </span>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n    </tr>\n  </ng-template>\n\n  <!-- Body columns on Grid -->\n  <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n    <tr [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n      <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n        <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n        <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n      </td>\n\n      <!-- first actions column -->\n      <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" >\n\n        <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n      <td *ngIf=\"!editing\">\n        <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n          (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n          [(ngModel)]=\" \n            row[column.field] &&\n            (row[column.field].toString() === '1' ||\n              row[column.field].toString().toLowerCase() === 'true' ||\n              row[column.field].toString().toLowerCase() === 'y'||\n              ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                ? Checked\n                : unChecked\n               \">\n        </p-checkbox>\n      </td>\n      <td *ngIf=\"editing\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for edit checkBox -->\n            <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n              [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                  row[column.field] &&   \n                  (row[column.field].toString() === '1' ||\n                    row[column.field].toString().toLowerCase() === 'true' ||\n                    row[column.field].toString().toLowerCase() === 'y' ||\n                    ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                    ? editModeChecked\n                    : editModeunCkecked\n                \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ row[column.field] }}\n          </ng-template>\n        </p-cellEditor>\n      </td>\n      </span>\n\n      <!-- link column on Grid -->\n      <span *ngSwitchCase=\"'link'\">\n        <!-- link column for HyperLink Case -->\n        <span *ngIf=\"column.allowSave === false\">\n          <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n            [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n          <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n      \n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n            [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n\n          </span>\n        </span>\n        <!-- link column for Edit Case -->\n        <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.hideFieldValue?'':row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n                <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\" >\n              <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                  }}\n              </ng-template>\n              \n                </a>\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n               >\n                  <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                 {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                </a>\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText\n                ? column.displayText\n                : row[column.field]\n\n            \"\n          >  \n          <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n          <ng-template #noIcon>\n          {{\n            row[column.field + '_obj'] &&\n            (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n            ? row[column.field] : row[column.field + '_obj']?.displayText\n            ? row[column.field + '_obj'].displayText\n            : column.displayText ? column.displayText : row[column.field]\n          }}\n          </ng-template>\n          </span>\n        </span>\n\n        <!-- dialog column on Grid -->\n        <span *ngSwitchCase=\"'dialog'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\" \n                [title]=\"setConditionBaseValue(row, column) \"\n              >\n                <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.action?.hideFieldValue\">\n                  <input\n                  readonly\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    (click)=\"selectLookupField(column, row)\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                    row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : \n                    row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"column.editable === false || column.editable === undefined\n                  \" class=\"custom-link\"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disabled-link' : ''\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.action?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                  }}</ng-template>\n\n\n              </span>\n            </span>\n\n            <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \">\n              <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                [timeOnly]=\"column.timeOnly\"\n                [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span class=\"custom-link\"\n              [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n             <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{row[column.field+'_obj']?.action?.hideFieldValue?'': setConditionBaseValue(row, column) }}</ng-template>\n\n              <!-- {{ setConditionBaseValue(row, column) }} -->\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- lookup Input column on Grid -->\n      <span *ngSwitchCase=\"'lookup_input'\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <div class=\"close-icon-wrapper\">\n              <input readonly type=\"text\" pInputText\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField  ?\n                row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] :\n                typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.text?.text ? row[column.field+'_obj']?.text?.text : \n                column.displayField ? row[column.displayField] : 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']?.action && row[column.field+'_obj']?.action?.displayField ?\n                  row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n                (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\n                  \" [currency]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.currency\n                      ? column.format.formatParams.currency\n                      : 'USD'\n                  \" [locale]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.locale\n                      ? column.format.formatParams.locale\n                      : 'en-US'\n                  \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && \n                       '%'\n                      \n                  \">\n              </p-inputNumber>\n            </span>\n            <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                {{ row[column.field] }}\n              </span></ng-template>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span [title]=\"setNumericFormat(column, row)\">\n              {{\n              setNumericFormat(column, row)\n              }}\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- Button column on Grid -->\n      <span>\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n            [icon]=\"row[column.field+'_obj']?.action?.icon ? row[column.field+'_obj']?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field+'_obj']?.action?.displayText ? row[column.field+'_obj']?.action?.displayText : column.value\"\n            class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n        </div>\n      </span>\n\n      <!-- Date column on Grid -->\n      <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <p-calendar\n              [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n              [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n              [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n              [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n              [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n              (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n              [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n              [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ setConditionBaseValue(row,column) }}\n          </ng-template>\n        </p-cellEditor>\n      </span>\n      <span *ngSwitchDefault>\n        <span [ngSwitch]=\"column.type\">\n          <!-- Dropdown column on Grid -->\n          <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-dropdown *ngIf=\"!row[column.field+'_obj']?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                  [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                  [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"!row[column.field+'_obj']?.action?.hidden\">\n                  {{\n                  setDropdwonReadOnlyValue(row, column)\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <!-- MultiSelect column on Grid -->\n          <span *ngSwitchCase=\"'multi-select'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-multiSelect [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                  [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n                  (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n                </p-multiSelect>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\n                    \">\n                  {{\n                  row[column.displayField]\n                  ? row[column.displayField] :\n                  setMultiSelectData(column, row[column.field])\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <!-- AutoComplete Search -->\n          <span *ngSwitchCase=\"'AutoComplete'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-autoComplete \n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                  [name]=\"column.header\"\n                  [suggestions]=\"column.data\" \n                  (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                  [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] :\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                  row[column.field]?.text :\n                  row[column.field]\"\n                  [dropdown]=\"column.showOption\" \n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" \n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\" \n                  [disabled]=\"allowDisabled(column,row)\" \n                  [multiple]=\"true\"\n                  (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                </p-autoComplete>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                  <span *ngFor=\"let value of row[column.field]; let i = index\">\n                    {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                    value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                </span>\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                  <span *ngFor=\"let value of row[column.field]; let i = index\">\n                    {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                    value[column.field] : value[column.field] + ';' : value[column.field] }}\n                  </span>\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n          <!-- Add Generate Report Button -->\n          <span *ngSwitchCase=\"'report'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"output\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n              <ng-template pTemplate=\"input\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <span *ngSwitchDefault>\n            <!-- Input column on Grid -->\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <input pInputText type=\"text\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                    {{ row[column.field] }}\n                  </span></ng-template>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                setTextBoxReadOnlyValue(row, column)\n                                  \">\n                  {{\n                    setTextBoxReadOnlyValue(row, column)\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n      </span>\n      </td>\n      <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer columns on Grid -->\n  <ng-template pTemplate=\"footer\">\n    <tr *ngIf=\"aggregateFooter\">\n      <td\n        *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\">\n        <div *ngFor=\"let innerColumn of selectedColumns\">\n          <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n            <div\n              *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) || aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n              <div [innerHTML]=\"aggr.aggrValue\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr class=\"grid-component no-records-found\">\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n    </tr>\n  </ng-template>\n</p-table>\n</div>",
+                  template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-ai-center 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        <div class=\"grid-component-table-header-inner-div-2\n              table-header-inner-div div-last-inner-html-is-icon\">\n          <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n          <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n            (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n        </div>\n      </th>\n      <th *ngIf=\"allowSelection && selectionType === 'single'\" \n            class=\"grid-component-selection\">\n        Select\n      </th>\n      <th\n        *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        Actions\n      </th>\n      <th *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n        [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n        [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n        class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n        <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n          <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n          <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n          <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n            [field]=\"column.field\"></p-sortIcon>\n        </div>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n    </tr>\n    <tr *ngIf=\"filtering && !hideFilter\">\n      <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n      <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n      </th>\n      <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n        [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n        <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n          <!-- Text input on Header For Filter-->\n          <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\" pInputText />\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Numeric input on Header For Filter-->\n          <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                (keyup)=\"removingFilters($event, column)\"></p-inputNumber>\n            </ng-template>\n          </p-columnFilter>\n\n            <!-- lookup input on Header For Filter-->\n            <p-columnFilter\n              [type]=\"'text'\"\n              [field]=\"column.field\"\n              *ngSwitchCase=\"'lookup_input'\"\n            >\n              <ng-template\n                pTemplate=\"filter\"\n                let-value\n                let-filter=\"filterCallback\"\n              >\n                <div class=\"close-icon-wrapper grid-component lookup-filter-wrapper\">\n                  <div class=\"lookup-filter-input-wrapper\"> \n                  <input\n                    id=\"lookUp_filter\"\n                    class=\"grid-component lookup-filter\"\n                    autocomplete=\"off\"\n                    type=\"text\"\n                    [(ngModel)]=\"column.filterValue\"\n                    (click)=\"setFilterLookup(column)\"\n                    (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                    (blur)=\"setFilterFocusOut(column, filter, $event)\"\n                    (keydown)=\"backspaceEvent($event, column)\"\n                    (keyup)=\"removingFilters($event, column)\"\n                    pInputText\n                  />\n                  </div>  \n                  <div><button\n                      *ngIf=\"column.filterValue\"\n                      icon=\"pi pi-times\"\n                      pButton\n                      type=\"button\"\n                      (click)=\"lookupClearValue(column)\"\n                    ></button></div>\n                </div>\n              </ng-template>\n            </p-columnFilter>\n\n          <!-- checkbox on Header For Filter-->\n          <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n                (keydown)=\"backspaceEvent($event, column)\">\n              </p-checkbox>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- multiSelect on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n                (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n                placeholder=\"Any\" optionLabel=\"label\">\n              </p-multiSelect>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- dropdown on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n                [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n                [options]=\"column.filter.data || []\"\n                (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- calendar on Header For Filter-->\n          <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n            <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n              <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n                [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n                [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n                (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n              </p-calendar>\n            </ng-template>\n          </p-columnFilter>\n\n          <!-- Default Filter For Header  -->\n          <p-columnFilter [type]=\"\n              column.type && column.type !== 'link' ? column.type : 'text'\n            \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n          </p-columnFilter>\n        </span>\n      </th>\n      <th\n        *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n    </tr>\n  </ng-template>\n\n  <!-- Body columns on Grid -->\n  <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n    <tr [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n      [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n      [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n      <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n        <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n          (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n        <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n          (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n      </td>\n\n      <!-- first actions column -->\n      <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class=\"setActionColumnWidth\">\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n\n      <!-- Grid Rows Data Bindings Start -->\n      <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" >\n\n        <!-- Boolean column on Grid -->\n        <span *ngSwitchCase=\"'boolean'\">\n      <td *ngIf=\"!editing\">\n        <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n          (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n          [(ngModel)]=\" \n            row[column.field] &&\n            (row[column.field].toString() === '1' ||\n              row[column.field].toString().toLowerCase() === 'true' ||\n              row[column.field].toString().toLowerCase() === 'y'||\n              ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n              row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                ? Checked\n                : unChecked\n               \">\n        </p-checkbox>\n      </td>\n      <td *ngIf=\"editing\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <!-- for edit checkBox -->\n            <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n              [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                  row[column.field] &&   \n                  (row[column.field].toString() === '1' ||\n                    row[column.field].toString().toLowerCase() === 'true' ||\n                    row[column.field].toString().toLowerCase() === 'y' ||\n                    ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                    row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                    ? editModeChecked\n                    : editModeunCkecked\n                \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ row[column.field] }}\n          </ng-template>\n        </p-cellEditor>\n      </td>\n      </span>\n\n      <!-- link column on Grid -->\n      <span *ngSwitchCase=\"'link'\">\n        <!-- link column for HyperLink Case -->\n        <span *ngIf=\"column.allowSave === false\">\n          <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n            [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n          <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n      \n          </span>\n          <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n            [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n            [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n              <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                }}\n              </ng-template>\n            </a>\n\n          </span>\n        </span>\n        <!-- link column for Edit Case -->\n        <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.hideFieldValue?'':row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n                <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (change)=\"onChangeEvent(column, row)\" />\n              </span>\n              <span *ngIf=\"column.editable === false\" >\n              <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                {{\n                  row[column.field+'_obj']?.action?.hideFieldValue?'':\n                  setConditionBaseValue(row, column)\n                  }}\n              </ng-template>\n              \n                </a>\n              </span>\n              <span *ngIf=\"column.editLink === false\">\n                <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                  [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                </a>\n              </span>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n               >\n                  <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                 {{\n                    row[column.field+'_obj']?.action?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                </a>\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n      </span>\n\n      <!-- Iframe column on Grid -->\n      <span *ngSwitchCase=\"'iframe'\">\n        <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                ? row[column.field] : row[column.field + '_obj']?.displayText\n                ? row[column.field + '_obj'].displayText\n                : column.displayText\n                ? column.displayText\n                : row[column.field]\n\n            \"\n          >  \n          <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n          <ng-template #noIcon>\n          {{\n            row[column.field + '_obj'] &&\n            (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n            ? row[column.field] : row[column.field + '_obj']?.displayText\n            ? row[column.field + '_obj'].displayText\n            : column.displayText ? column.displayText : row[column.field]\n          }}\n          </ng-template>\n          </span>\n        </span>\n\n        <!-- dialog column on Grid -->\n        <span *ngSwitchCase=\"'dialog'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <span\n                *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\" \n                [title]=\"setConditionBaseValue(row, column) \"\n              >\n                <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.action?.hideFieldValue\">\n                  <input\n                  readonly\n                    [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    type=\"text\"\n                    pInputText\n                    (click)=\"selectLookupField(column, row)\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                    row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : \n                    row[column.field]\"\n                    [name]=\"row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\"\n                  />\n                </span>\n                <span\n                  *ngIf=\"column.editable === false || column.editable === undefined\n                  \" class=\"custom-link\"\n                  [class]=\"\n                  allowDisabled(column,row) ? 'disabled-link' : ''\n                  \" (click)=\"openGridDialog(column, row)\">\n\n                <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.action?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                  }}</ng-template>\n\n\n              </span>\n            </span>\n\n            <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n                  row[column.field]\n                    | date: (column.format ? column.format : 'MM/dd/YY')\n                \">\n              <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                [timeOnly]=\"column.timeOnly\"\n                [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\"\n                [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n            </span>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span class=\"custom-link\"\n              [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n              (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n              [title]=\"setConditionBaseValue(row, column)\">\n             <i *ngIf=\"column.icon && !row[column.field+'_obj']?.action?.hideFieldValue ; else noIcon\" [class]=\"column.icon\"></i>\n              <ng-template #noIcon>{{row[column.field+'_obj']?.action?.hideFieldValue?'': setConditionBaseValue(row, column) }}</ng-template>\n\n              <!-- {{ setConditionBaseValue(row, column) }} -->\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- lookup Input column on Grid -->\n      <span *ngSwitchCase=\"'lookup_input'\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <div class=\"close-icon-wrapper\">\n              <input readonly type=\"text\" pInputText\n                [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField  ?\n                row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] :\n                typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.text?.text ? row[column.field+'_obj']?.text?.text : \n                column.displayField ? row[column.displayField] : 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']?.action && row[column.field+'_obj']?.action?.displayField ?\n                  row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n                (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n                    column.format &&\n                    column.format.type === 'currency'\n                      ? 'currency'\n                      : 'decimal'\n                  \" [currency]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.currency\n                      ? column.format.formatParams.currency\n                      : 'USD'\n                  \" [locale]=\"\n                    column.format &&\n                    column.format.type === 'currency' &&\n                    column.format.formatParams &&\n                    column.format.formatParams.locale\n                      ? column.format.formatParams.locale\n                      : 'en-US'\n                  \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n                [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n                    column.format &&\n                    column.format.type === 'percent' && \n                       '%'\n                      \n                  \">\n              </p-inputNumber>\n            </span>\n            <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                {{ row[column.field] }}\n              </span></ng-template>\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            <span [title]=\"setNumericFormat(column, row)\">\n              {{\n              setNumericFormat(column, row)\n              }}\n            </span>\n          </ng-template>\n        </p-cellEditor>\n      </span>\n\n      <!-- Button column on Grid -->\n      <span>\n        <div *ngSwitchCase=\"'add_button'\">\n          <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n            [icon]=\"row[column.field+'_obj']?.action?.icon ? row[column.field+'_obj']?.action?.icon : column.icon\"\n            [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n            [label]=\"row[column.field+'_obj']?.action?.displayText ? row[column.field+'_obj']?.action?.displayText : column.value\"\n            class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n        </div>\n      </span>\n\n      <!-- Date column on Grid -->\n      <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n        <p-cellEditor>\n          <ng-template pTemplate=\"input\">\n            <p-calendar\n              [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n              [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n              [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n              [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n              [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n              (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n              [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n                row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n              [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            <!-- [todayButtonStyleClass]=\"column.timeOnly ? 'hide-today-btn' : 'show-today-btn'\" -->\n          </ng-template>\n          <ng-template pTemplate=\"output\">\n            {{ setConditionBaseValue(row,column) }}\n          </ng-template>\n        </p-cellEditor>\n      </span>\n      <span *ngSwitchDefault>\n        <span [ngSwitch]=\"column.type\">\n          <!-- Dropdown column on Grid -->\n          <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n              setDropdwonReadOnlyValue(row, column)\n              \">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-dropdown *ngIf=\"!row[column.field+'_obj']?.action?.hidden\" [options]=\"\n                      row[column.field+'_data']\n                        ? row[column.field+'_data']\n                        : column.data\n                    \"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                    ? row[column.displayField]\n                    : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                  [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                  [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                  (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"!row[column.field+'_obj']?.action?.hidden\">\n                  {{\n                  setDropdwonReadOnlyValue(row, column)\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <!-- MultiSelect column on Grid -->\n          <span *ngSwitchCase=\"'multi-select'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-multiSelect [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                  [(ngModel)]=\"typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.action ? row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] : row[column.field+'_obj']?.text : row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                  [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n                  (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n                </p-multiSelect>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span [title]=\"\n                      row[column.displayField]\n                        ? row[column.displayField]\n                        : setMultiSelectData(column, row[column.field])\n                    \">\n                  {{\n                  row[column.displayField]\n                  ? row[column.displayField] :\n                  setMultiSelectData(column, row[column.field])\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <!-- AutoComplete Search -->\n          <span *ngSwitchCase=\"'AutoComplete'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <p-autoComplete \n                  [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                  [name]=\"column.header\"\n                  [suggestions]=\"column.data\" \n                  (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                  [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField?.toLowerCase() ?\n                  row[row[column.field+'_obj']?.action?.displayField.toLowerCase()] :\n                  typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                  row[column.field]?.text :\n                  row[column.field]\"\n                  [dropdown]=\"column.showOption\" \n                  (ngModelChange)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickEvent(column, row)\" \n                  (completeMethod)=\"autoSearch($event, column, row)\"\n                  (onBlur)=\"onFocusOutEvent(column, row)\" \n                  [disabled]=\"allowDisabled(column,row)\" \n                  [multiple]=\"true\"\n                  (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                </p-autoComplete>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                  <span *ngFor=\"let value of row[column.field]; let i = index\">\n                    {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                    value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                  </span>\n                </span>\n                <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                  <span *ngFor=\"let value of row[column.field]; let i = index\">\n                    {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                    value[column.field] : value[column.field] + ';' : value[column.field] }}\n                  </span>\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n          <!-- Add Generate Report Button -->\n          <span *ngSwitchCase=\"'report'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"output\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n              <ng-template pTemplate=\"input\">\n                <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n                  [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n\n          <span *ngSwitchDefault>\n            <!-- Input column on Grid -->\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <input pInputText type=\"text\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                  [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"\n                  (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                  (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                    {{ row[column.field] }}\n                  </span></ng-template>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                setTextBoxReadOnlyValue(row, column)\n                                  \">\n                  {{\n                    setTextBoxReadOnlyValue(row, column)\n                  }}\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n      </span>\n      </td>\n      <!-- Grid Rows Data Bindings End -->\n\n      <!-- Action column on Grid -->\n      <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n          <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n        </span>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n        <span class='setActionColumnWidth'>\n          <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n            [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n            [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n            (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n            [editAllRows]=\"editAllRows\">\n          </se-grid-row-actions>\n        </span>\n      </td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer columns on Grid -->\n  <ng-template pTemplate=\"footer\">\n    <tr *ngIf=\"aggregateFooter\">\n      <td\n        *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n      <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\">\n        <div *ngFor=\"let innerColumn of selectedColumns\">\n          <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n            <div\n              *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) || aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n              <div [innerHTML]=\"aggr.aggrValue\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </td>\n      <td\n        *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n        [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n        [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n    </tr>\n  </ng-template>\n\n  <!-- Footer for Empty Message columns on Grid -->\n  <ng-template pTemplate=\"emptymessage\">\n    <tr class=\"grid-component no-records-found\">\n      <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n    </tr>\n  </ng-template>\n</p-table>\n</div>",
                   styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .filter-btn{margin-right:5px}: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"]
               },] }
   ];
   /** @nocollapse */
   GridComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
       { type: GridService },
       { type: AlertService },
       { type: AuthenticationService },
       { type: i0.ElementRef },
-      { type: i1$1.DecimalPipe },
+      { type: i1$2.DecimalPipe },
       { type: PageLoggerService },
       { type: i0.ChangeDetectorRef },
       { type: router.Router },
-      { type: i1$1.DatePipe },
+      { type: i1$2.DatePipe },
       { type: api.ConfirmationService },
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
-      { type: dynamicdialog.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
+      { type: i1.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
   ]; };
   GridComponent.propDecorators = {
       gridRow: [{ type: i0.ViewChildren, args: ['gridRow',] }],
@@ -6926,8 +6927,8 @@
   ];
   /** @nocollapse */
   NotesComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DynamicDialogRef },
-      { type: dynamicdialog.DynamicDialogConfig }
+      { type: i1.DynamicDialogRef },
+      { type: i1.DynamicDialogConfig }
   ]; };
 
   var FormComponent = /** @class */ (function () {
@@ -8073,12 +8074,12 @@
       { type: FormService },
       { type: AlertService },
       { type: platformBrowser.DomSanitizer },
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
       { type: i0.ComponentFactoryResolver },
       { type: i0.ChangeDetectorRef },
       { type: router.Router },
       { type: i0.ElementRef },
-      { type: i1$1.DatePipe },
+      { type: i1$2.DatePipe },
       { type: GridService },
       { type: PageLoggerService }
   ]; };
@@ -8373,6 +8374,7 @@
       ESidebarAction["NAVIGATION"] = "navigation";
       ESidebarAction["OPENDIALOG"] = "dialog";
       ESidebarAction["IFRAME"] = "_iframe";
+      ESidebarAction["REPORT"] = "report";
   })(exports.ESidebarAction || (exports.ESidebarAction = {}));
 
   var SideBarService = /** @class */ (function () {
@@ -8464,11 +8466,309 @@
       { type: i0.ApplicationRef }
   ]; };
 
+  var ReportFilterComponent = /** @class */ (function () {
+      function ReportFilterComponent(config, requestService, formService, alertService) {
+          this.config = config;
+          this.requestService = requestService;
+          this.formService = formService;
+          this.alertService = alertService;
+          this.formFields = [];
+      }
+      ReportFilterComponent.prototype.ngOnInit = function () {
+          this.createDynamicFields();
+      };
+      ReportFilterComponent.prototype.initializeForm = function () {
+          var _this = this;
+          var _a, _b;
+          this.dynamicForm = {
+              formSections: [
+                  {
+                      fields: __spreadArray(__spreadArray([], __read(this.formFields)), [
+                          {
+                              label: 'Download Report',
+                              control: exports.EFormControl.ADD_BUTTON,
+                              hidden: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hideGenerateReportBtn,
+                              onClick: function () {
+                                  _this.downloadReport();
+                              },
+                          }
+                      ])
+                  }
+              ]
+          };
+      };
+      ReportFilterComponent.prototype.createDynamicFields = function () {
+          var _this = this;
+          var _a;
+          this.requestService.getOne('/ReportConfig/ById', (_a = this.config.data) === null || _a === void 0 ? void 0 : _a.Id).subscribe(function (data) {
+              var reportJson = JSON.parse(data === null || data === void 0 ? void 0 : data.report);
+              _this.formFields = reportJson === null || reportJson === void 0 ? void 0 : reportJson.FormFields;
+              _this.setParamFieldValue();
+              _this.initializeForm();
+              // set dropdown data based on matched field.
+              _this.setDropDownData(reportJson);
+          }, function (error) {
+              _this.initializeForm();
+              _this.alertService.error(error);
+          });
+      };
+      ReportFilterComponent.prototype.setParamFieldValue = function () {
+          var _this = this;
+          var _a;
+          if (this.config.data && ((_a = this.config.data.param) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+              this.config.data.param.forEach(function (param) {
+                  _this.formFields.forEach(function (field) {
+                      var _a;
+                      var matchKey = (_a = Object.keys(param)) === null || _a === void 0 ? void 0 : _a.find(function (key) { var _a; return (key === null || key === void 0 ? void 0 : key.toLowerCase()) === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+                      if (matchKey && matchKey.length > 0) {
+                          field.value = param[matchKey];
+                      }
+                  });
+              });
+          }
+      };
+      ReportFilterComponent.prototype.setDropDownData = function (reportJson) {
+          var _this = this;
+          var _a;
+          (_a = reportJson.Parameters) === null || _a === void 0 ? void 0 : _a.forEach(function (record) {
+              if (record.isuniquekey) {
+                  _this.requestService.get('/Data/Fetch', {
+                      uniqueKey: record.isuniquekey,
+                      filters: []
+                  }).subscribe(function (response) {
+                      _this.formService.setFormFieldProp(_this.dynamicForm, record.paramname, [
+                          { name: 'data', value: response.records },
+                      ]);
+                  }, function (error) {
+                      _this.alertService.apiError(error);
+                  });
+              }
+          });
+      };
+      ReportFilterComponent.prototype.getFilters = function () {
+          var _a, _b;
+          var filters = [];
+          (_b = (_a = this.dynamicForm) === null || _a === void 0 ? void 0 : _a.formSections) === null || _b === void 0 ? void 0 : _b.forEach(function (section) {
+              var _a;
+              (_a = section.fields) === null || _a === void 0 ? void 0 : _a.forEach(function (field) {
+                  if (field && field.value) {
+                      filters.push({ field: field.field, matchMode: 'equal', operator: 'and', value: field.value });
+                  }
+                  ;
+              });
+          });
+          return filters;
+      };
+      ReportFilterComponent.prototype.downloadReport = function () {
+          var _this = this;
+          var _a, _b;
+          var filters = this.getFilters();
+          this.requestService.download('/Report/Generate', { Id: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.Id, filters: filters })
+              .subscribe(function (response) {
+              var _a, _b, _c, _d;
+              var newBlob = new Blob([response.body], { type: 'application/pdf' });
+              var data = window.URL.createObjectURL(newBlob);
+              var a = document.createElement('a');
+              a.href = data;
+              var header = (_a = response === null || response === void 0 ? void 0 : response.headers) === null || _a === void 0 ? void 0 : _a.get('Content-Disposition');
+              var fileName = (_d = (_c = (_b = header === null || header === void 0 ? void 0 : header.split('filename=')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.split(";")[0]) === null || _d === void 0 ? void 0 : _d.replaceAll(/\"/g, '');
+              a.download = fileName;
+              document.body.appendChild(a);
+              a.click();
+              document.body.removeChild(a);
+          }, function (error) {
+              _this.alertService.apiError(error);
+          });
+      };
+      return ReportFilterComponent;
+  }());
+  ReportFilterComponent.decorators = [
+      { type: i0.Component, args: [{
+                  selector: 'se-report-filter',
+                  template: "<se-form  \n*ngIf=\"dynamicForm\"\n[form]=\"dynamicForm\"\n[hideSaveButton]=\"true\"\n[hideCancelButton]=\"true\"\n>\n</se-form>\n",
+                  styles: [""]
+              },] }
+  ];
+  /** @nocollapse */
+  ReportFilterComponent.ctorParameters = function () { return [
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
+      { type: RequestService },
+      { type: FormService },
+      { type: AlertService }
+  ]; };
+
+  var ReportService = /** @class */ (function () {
+      function ReportService(dialogService, requestService, alertService) {
+          this.dialogService = dialogService;
+          this.requestService = requestService;
+          this.alertService = alertService;
+          this.formFields = [];
+          this.paramsCopy = [];
+      }
+      ReportService.prototype.downloadReport = function (repId, params, showDialog, form) {
+          var _this = this;
+          if (showDialog === void 0) { showDialog = false; }
+          if (form === void 0) { form = {}; }
+          params === null || params === void 0 ? void 0 : params.forEach(function (p) {
+              _this.paramsCopy.push(Object.assign({}, p));
+          });
+          this.createDynamicFields(repId, params, showDialog, form);
+      };
+      ReportService.prototype.createDynamicFields = function (repId, params, showDialog, form) {
+          var _this = this;
+          this.requestService
+              .getOne('/ReportConfig/ById', repId)
+              .subscribe(function (data) {
+              if (data) {
+                  var reportJson = JSON.parse(data === null || data === void 0 ? void 0 : data.report);
+                  _this.formFields = reportJson === null || reportJson === void 0 ? void 0 : reportJson.FormFields;
+              }
+              _this.generateReport(repId, params, showDialog, form);
+          }, function (error) {
+              _this.alertService.error(error);
+          });
+      };
+      ReportService.prototype.generateReport = function (repId, params, showDialog, form) {
+          if (showDialog === void 0) { showDialog = false; }
+          if (form === void 0) { form = {}; }
+          this.getFormFieldValues(form, params);
+          if ((this.formFields.some(function (field) { return !field.hidden; }) &&
+              showDialog === undefined) ||
+              showDialog === true) {
+              this.dialogService.open(ReportFilterComponent, {
+                  width: '80%',
+                  height: '100%',
+                  header: 'Generate Report',
+                  style: { background: '#fff' },
+                  data: { Id: repId, param: params },
+              });
+          }
+          else {
+              this.downloadQuickReport(params, repId);
+          }
+      };
+      ReportService.prototype.getFormFieldValues = function (form, params) {
+          var _a;
+          if (((_a = this.paramsCopy) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+              this.paramsCopy.forEach(function (paramCopy) {
+                  var _a, _b;
+                  var key = Object.keys(paramCopy)[0];
+                  if (paramCopy[key] === '' || !paramCopy[key]) {
+                      (_a = form === null || form === void 0 ? void 0 : form.formSections) === null || _a === void 0 ? void 0 : _a.forEach(function (section) {
+                          section.fields.forEach(function (field) {
+                              var _a;
+                              if (key.toString().toLowerCase() === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
+                                  params.forEach(function (origParam) {
+                                      var origKey = Object.keys(origParam)[0];
+                                      if (origKey == key) {
+                                          //origParam[origKey] = field.value;
+                                          if (field.control == exports.EFormControl.CALENDAR) {
+                                              origParam[origKey] = field.value ? field.value.toLocaleDateString() : null;
+                                          }
+                                          else {
+                                              origParam[origKey] = field.value;
+                                          }
+                                      }
+                                  });
+                              }
+                          });
+                      });
+                  }
+                  else if (paramCopy[key].toString().includes('{') &&
+                      paramCopy[key].toString().includes('}')) {
+                      var newValue = paramCopy[key].replace('{', '').replace('}', '');
+                      (_b = form === null || form === void 0 ? void 0 : form.formSections) === null || _b === void 0 ? void 0 : _b.forEach(function (section) {
+                          section.fields.forEach(function (field) {
+                              var _a;
+                              if (newValue.toString().toLowerCase() === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
+                                  params.forEach(function (origParam) {
+                                      var origKey = Object.keys(origParam)[0];
+                                      if (origKey == key) {
+                                          if (field.control == exports.EFormControl.CALENDAR) {
+                                              origParam[origKey] = field.value ? field.value.toLocaleDateString() : null;
+                                          }
+                                          else {
+                                              origParam[origKey] = field.value;
+                                          }
+                                      }
+                                  });
+                              }
+                          });
+                      });
+                  }
+              });
+          }
+      };
+      ReportService.prototype.downloadQuickReport = function (params, repId) {
+          var _this = this;
+          var filters = [];
+          if (params && params.length > 0) {
+              params.forEach(function (param) {
+                  Object.keys(param).map(function (key) { return filters.push({
+                      field: key,
+                      matchMode: 'equal',
+                      operator: 'and',
+                      value: param[key],
+                  }); });
+              });
+          }
+          else {
+              filters = this.getFilters();
+          }
+          this.requestService
+              .download('/Report/Generate', { Id: repId, filters: filters })
+              .subscribe(function (response) {
+              var _a, _b, _c, _d;
+              var newBlob = new Blob([response.body], { type: 'application/pdf' });
+              var data = window.URL.createObjectURL(newBlob);
+              var a = document.createElement('a');
+              a.href = data;
+              var header = (_a = response === null || response === void 0 ? void 0 : response.headers) === null || _a === void 0 ? void 0 : _a.get('Content-Disposition');
+              var fileName = (_d = (_c = (_b = header === null || header === void 0 ? void 0 : header.split('filename=')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.split(';')[0]) === null || _d === void 0 ? void 0 : _d.replaceAll(/\"/g, '');
+              a.download = fileName;
+              document.body.appendChild(a);
+              a.click();
+              document.body.removeChild(a);
+          }, function (error) {
+              _this.alertService.apiError(error);
+          });
+      };
+      ReportService.prototype.getFilters = function () {
+          var filters = [];
+          this.formFields.forEach(function (field) {
+              var _a, _b;
+              if (field && ((_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                  filters.push({
+                      field: field.field,
+                      matchMode: 'equal',
+                      operator: 'and',
+                      value: field.value,
+                  });
+              }
+          });
+          return filters;
+      };
+      return ReportService;
+  }());
+  /** @nocollapse */ ReportService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ReportService_Factory() { return new ReportService(i0__namespace.ɵɵinject(i1__namespace$2.DialogService), i0__namespace.ɵɵinject(RequestService), i0__namespace.ɵɵinject(AlertService)); }, token: ReportService, providedIn: "root" });
+  ReportService.decorators = [
+      { type: i0.Injectable, args: [{
+                  providedIn: 'root'
+              },] }
+  ];
+  /** @nocollapse */
+  ReportService.ctorParameters = function () { return [
+      { type: i1.DialogService },
+      { type: RequestService },
+      { type: AlertService }
+  ]; };
+
   var SidebarComponent = /** @class */ (function () {
-      function SidebarComponent(instance, authService, dialogService, router, pageLoggerService, hyperlinkService, sidebarService) {
+      function SidebarComponent(instance, authService, dialogService, reportService, router, pageLoggerService, hyperlinkService, sidebarService) {
           this.instance = instance;
           this.authService = authService;
           this.dialogService = dialogService;
+          this.reportService = reportService;
           this.router = router;
           this.pageLoggerService = pageLoggerService;
           this.hyperlinkService = hyperlinkService;
@@ -8544,6 +8844,9 @@
                   else if (x.action && x.action === exports.ESidebarAction.IFRAME) {
                       _this.loadIFrame(x, item);
                   }
+                  else if (x.action && x.action === exports.ESidebarAction.REPORT) {
+                      _this.downloadReport(x);
+                  }
                   else {
                       _this.handleActiveItem(item);
                   }
@@ -8620,6 +8923,10 @@
               disabled: menu.disabled,
           }); });
       };
+      SidebarComponent.prototype.downloadReport = function (menu) {
+          console.log('menu: ', menu);
+          this.reportService.downloadReport(menu.reportId, menu.params, menu.showDialog);
+      };
       SidebarComponent.prototype.loadIFrame = function (menu, item) {
           var _this = this;
           var _a, _b, _c, _d;
@@ -8791,7 +9098,8 @@
   SidebarComponent.ctorParameters = function () { return [
       { type: i0.Renderer2 },
       { type: AuthenticationService },
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
+      { type: ReportService },
       { type: router.Router },
       { type: PageLoggerService },
       { type: HyperlinkService },
@@ -8895,7 +9203,7 @@
   /** @nocollapse */
   HeaderComponent.ctorParameters = function () { return [
       { type: AuthenticationService },
-      { type: i1$1.DatePipe }
+      { type: i1$2.DatePipe }
   ]; };
   HeaderComponent.propDecorators = {
       headers: [{ type: i0.Input }]
@@ -9115,8 +9423,8 @@
       { type: FormService },
       { type: RequestService },
       { type: AlertService },
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
-      { type: dynamicdialog.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
+      { type: i1.DynamicDialogRef, decorators: [{ type: i0.Optional }] }
   ]; };
 
   var CardComponent = /** @class */ (function () {
@@ -9261,7 +9569,7 @@
   ];
   /** @nocollapse */
   CardComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
       { type: GridService },
       { type: api.ConfirmationService }
   ]; };
@@ -9386,299 +9694,28 @@
       allowDeleteFile: [{ type: i0.Input }]
   };
 
-  var ReportFilterComponent = /** @class */ (function () {
-      function ReportFilterComponent(config, requestService, formService, alertService) {
-          this.config = config;
-          this.requestService = requestService;
-          this.formService = formService;
-          this.alertService = alertService;
-          this.formFields = [];
-      }
-      ReportFilterComponent.prototype.ngOnInit = function () {
-          this.createDynamicFields();
-      };
-      ReportFilterComponent.prototype.initializeForm = function () {
-          var _this = this;
-          var _a, _b;
-          this.dynamicForm = {
-              formSections: [
-                  {
-                      fields: __spreadArray(__spreadArray([], __read(this.formFields)), [
-                          {
-                              label: 'Download Report',
-                              control: exports.EFormControl.ADD_BUTTON,
-                              hidden: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hideGenerateReportBtn,
-                              onClick: function () {
-                                  _this.downloadReport();
-                              },
-                          }
-                      ])
-                  }
-              ]
-          };
-      };
-      ReportFilterComponent.prototype.createDynamicFields = function () {
-          var _this = this;
-          var _a;
-          this.requestService.getOne('/ReportConfig/ById', (_a = this.config.data) === null || _a === void 0 ? void 0 : _a.Id).subscribe(function (data) {
-              var reportJson = JSON.parse(data === null || data === void 0 ? void 0 : data.report);
-              _this.formFields = reportJson === null || reportJson === void 0 ? void 0 : reportJson.FormFields;
-              _this.setParamFieldValue();
-              _this.initializeForm();
-              // set dropdown data based on matched field.
-              _this.setDropDownData(reportJson);
-          }, function (error) {
-              _this.initializeForm();
-              _this.alertService.error(error);
-          });
-      };
-      ReportFilterComponent.prototype.setParamFieldValue = function () {
-          var _this = this;
-          var _a;
-          if (this.config.data && ((_a = this.config.data.param) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-              this.config.data.param.forEach(function (param) {
-                  _this.formFields.forEach(function (field) {
-                      var _a;
-                      var matchKey = (_a = Object.keys(param)) === null || _a === void 0 ? void 0 : _a.find(function (key) { var _a; return (key === null || key === void 0 ? void 0 : key.toLowerCase()) === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
-                      if (matchKey && matchKey.length > 0) {
-                          field.value = param[matchKey];
-                      }
-                  });
-              });
-          }
-      };
-      ReportFilterComponent.prototype.setDropDownData = function (reportJson) {
-          var _this = this;
-          var _a;
-          (_a = reportJson.Parameters) === null || _a === void 0 ? void 0 : _a.forEach(function (record) {
-              if (record.isuniquekey) {
-                  _this.requestService.get('/Data/Fetch', {
-                      uniqueKey: record.isuniquekey,
-                      filters: []
-                  }).subscribe(function (response) {
-                      _this.formService.setFormFieldProp(_this.dynamicForm, record.paramname, [
-                          { name: 'data', value: response.records },
-                      ]);
-                  }, function (error) {
-                      _this.alertService.apiError(error);
-                  });
-              }
-          });
-      };
-      ReportFilterComponent.prototype.getFilters = function () {
-          var _a, _b;
-          var filters = [];
-          (_b = (_a = this.dynamicForm) === null || _a === void 0 ? void 0 : _a.formSections) === null || _b === void 0 ? void 0 : _b.forEach(function (section) {
-              var _a;
-              (_a = section.fields) === null || _a === void 0 ? void 0 : _a.forEach(function (field) {
-                  if (field && field.value) {
-                      filters.push({ field: field.field, matchMode: 'equal', operator: 'and', value: field.value });
-                  }
-                  ;
-              });
-          });
-          return filters;
-      };
-      ReportFilterComponent.prototype.downloadReport = function () {
-          var _this = this;
-          var _a, _b;
-          var filters = this.getFilters();
-          this.requestService.download('/Report/Generate', { Id: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.Id, filters: filters })
-              .subscribe(function (response) {
-              var _a, _b, _c, _d;
-              var newBlob = new Blob([response.body], { type: 'application/pdf' });
-              var data = window.URL.createObjectURL(newBlob);
-              var a = document.createElement('a');
-              a.href = data;
-              var header = (_a = response === null || response === void 0 ? void 0 : response.headers) === null || _a === void 0 ? void 0 : _a.get('Content-Disposition');
-              var fileName = (_d = (_c = (_b = header === null || header === void 0 ? void 0 : header.split('filename=')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.split(";")[0]) === null || _d === void 0 ? void 0 : _d.replaceAll(/\"/g, '');
-              a.download = fileName;
-              document.body.appendChild(a);
-              a.click();
-              document.body.removeChild(a);
-          }, function (error) {
-              _this.alertService.apiError(error);
-          });
-      };
-      return ReportFilterComponent;
-  }());
-  ReportFilterComponent.decorators = [
-      { type: i0.Component, args: [{
-                  selector: 'se-report-filter',
-                  template: "<se-form  \n*ngIf=\"dynamicForm\"\n[form]=\"dynamicForm\"\n[hideSaveButton]=\"true\"\n[hideCancelButton]=\"true\"\n>\n</se-form>\n",
-                  styles: [""]
-              },] }
-  ];
-  /** @nocollapse */
-  ReportFilterComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
-      { type: RequestService },
-      { type: FormService },
-      { type: AlertService }
-  ]; };
-
   //import { EFormControl, IDynamicForm } from '@churchillliving/se-ui-toolkit';
   var GenerateReportBtnComponent = /** @class */ (function () {
-      function GenerateReportBtnComponent(dialogService, requestService, alertService) {
-          this.dialogService = dialogService;
-          this.requestService = requestService;
-          this.alertService = alertService;
-          this.formFields = [];
-          this.paramsCopy = [];
+      function GenerateReportBtnComponent(reportService) {
+          this.reportService = reportService;
       }
       GenerateReportBtnComponent.prototype.ngOnInit = function () {
-          var _this = this;
-          this.params.forEach(function (p) {
-              _this.paramsCopy.push(Object.assign({}, p));
-          });
-          this.createDynamicFields();
       };
       GenerateReportBtnComponent.prototype.reportClickEvent = function () {
-          this.getFormFieldValues();
-          if ((this.formFields.some(function (field) { return !field.hidden; }) &&
-              this.showDialog === undefined) ||
-              this.showDialog === true) {
-              this.dialogService.open(ReportFilterComponent, {
-                  width: '80%',
-                  height: '100%',
-                  header: 'Generate Report',
-                  data: { Id: this.repId, param: this.params },
-              });
-          }
-          else {
-              this.downloadQuickReport();
-          }
-      };
-      GenerateReportBtnComponent.prototype.createDynamicFields = function () {
-          var _this = this;
-          this.requestService
-              .getOne('/ReportConfig/ById', this.repId)
-              .subscribe(function (data) {
-              if (data) {
-                  var reportJson = JSON.parse(data === null || data === void 0 ? void 0 : data.report);
-                  _this.formFields = reportJson === null || reportJson === void 0 ? void 0 : reportJson.FormFields;
-              }
-          }, function (error) {
-              _this.alertService.error(error);
-          });
-      };
-      GenerateReportBtnComponent.prototype.getFilters = function () {
-          var filters = [];
-          this.formFields.forEach(function (field) {
-              var _a, _b;
-              if (field && ((_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                  filters.push({
-                      field: field.field,
-                      matchMode: 'equal',
-                      operator: 'and',
-                      value: field.value,
-                  });
-              }
-          });
-          return filters;
-      };
-      GenerateReportBtnComponent.prototype.getFormFieldValues = function () {
-          var _this = this;
-          var _a;
-          if (((_a = this.paramsCopy) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-              this.paramsCopy.forEach(function (paramCopy) {
-                  var _a, _b, _c, _d;
-                  var key = Object.keys(paramCopy)[0];
-                  if (paramCopy[key] === '' || !paramCopy[key]) {
-                      (_b = (_a = _this.form) === null || _a === void 0 ? void 0 : _a.formSections) === null || _b === void 0 ? void 0 : _b.forEach(function (section) {
-                          section.fields.forEach(function (field) {
-                              var _a;
-                              if (key.toString().toLowerCase() === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
-                                  _this.params.forEach(function (origParam) {
-                                      var origKey = Object.keys(origParam)[0];
-                                      if (origKey == key) {
-                                          //origParam[origKey] = field.value;
-                                          if (field.control == exports.EFormControl.CALENDAR) {
-                                              origParam[origKey] = field.value ? field.value.toLocaleDateString() : null;
-                                          }
-                                          else {
-                                              origParam[origKey] = field.value;
-                                          }
-                                      }
-                                  });
-                              }
-                          });
-                      });
-                  }
-                  else if (paramCopy[key].toString().includes('{') &&
-                      paramCopy[key].toString().includes('}')) {
-                      var newValue = paramCopy[key].replace('{', '').replace('}', '');
-                      (_d = (_c = _this.form) === null || _c === void 0 ? void 0 : _c.formSections) === null || _d === void 0 ? void 0 : _d.forEach(function (section) {
-                          section.fields.forEach(function (field) {
-                              var _a;
-                              if (newValue.toString().toLowerCase() === ((_a = field.field) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
-                                  _this.params.forEach(function (origParam) {
-                                      var origKey = Object.keys(origParam)[0];
-                                      if (origKey == key) {
-                                          if (field.control == exports.EFormControl.CALENDAR) {
-                                              origParam[origKey] = field.value ? field.value.toLocaleDateString() : null;
-                                          }
-                                          else {
-                                              origParam[origKey] = field.value;
-                                          }
-                                      }
-                                  });
-                              }
-                          });
-                      });
-                  }
-              });
-              //console.log('new params', this.params);
-          }
-      };
-      GenerateReportBtnComponent.prototype.downloadQuickReport = function () {
-          var _this = this;
-          var filters = [];
-          if (this.params && this.params.length > 0) {
-              this.params.forEach(function (param) {
-                  Object.keys(param).map(function (key) { return filters.push({
-                      field: key,
-                      matchMode: 'equal',
-                      operator: 'and',
-                      value: param[key],
-                  }); });
-              });
-          }
-          else {
-              filters = this.getFilters();
-          }
-          this.requestService
-              .download('/Report/Generate', { Id: this.repId, filters: filters })
-              .subscribe(function (response) {
-              var _a, _b, _c, _d;
-              var newBlob = new Blob([response.body], { type: 'application/pdf' });
-              var data = window.URL.createObjectURL(newBlob);
-              var a = document.createElement('a');
-              a.href = data;
-              var header = (_a = response === null || response === void 0 ? void 0 : response.headers) === null || _a === void 0 ? void 0 : _a.get('Content-Disposition');
-              var fileName = (_d = (_c = (_b = header === null || header === void 0 ? void 0 : header.split('filename=')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.split(';')[0]) === null || _d === void 0 ? void 0 : _d.replaceAll(/\"/g, '');
-              a.download = fileName;
-              document.body.appendChild(a);
-              a.click();
-              document.body.removeChild(a);
-          }, function (error) {
-              _this.alertService.apiError(error);
-          });
+          this.reportService.downloadReport(this.repId, this.params, this.showDialog, this.form);
       };
       return GenerateReportBtnComponent;
   }());
   GenerateReportBtnComponent.decorators = [
       { type: i0.Component, args: [{
                   selector: 'se-generate-report-btn',
-                  template: "<button\n  class=\"report-btn generate-report-btn\"\n  pButton\n  type=\"button\"\n  [label]=\"label ? label : 'Generate Report'\"\n  (click)=\"reportClickEvent()\"\n></button>\n",
+                  template: "<button\n  class=\"report-btn generate-report-btn\"\n  pButton\n  type=\"button\"\n  id=\"reportbtn\"\n  [label]=\"label ? label : 'Generate Report'\"\n  (click)=\"reportClickEvent()\"\n></button>\n",
                   styles: [""]
               },] }
   ];
   /** @nocollapse */
   GenerateReportBtnComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DialogService },
-      { type: RequestService },
-      { type: AlertService }
+      { type: report_service.ReportService }
   ]; };
   GenerateReportBtnComponent.propDecorators = {
       repId: [{ type: i0.Input }],
@@ -10160,11 +10197,11 @@
   ];
   /** @nocollapse */
   SeGlobalFilterComponent.ctorParameters = function () { return [
-      { type: i1$1.DatePipe },
-      { type: dynamicdialog.DynamicDialogRef, decorators: [{ type: i0.Optional }] },
-      { type: dynamicdialog.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
+      { type: i1$2.DatePipe },
+      { type: i1.DynamicDialogRef, decorators: [{ type: i0.Optional }] },
+      { type: i1.DynamicDialogConfig, decorators: [{ type: i0.Optional }] },
       { type: GridService },
-      { type: dynamicdialog.DialogService },
+      { type: i1.DialogService },
       { type: AlertService },
       { type: i0.ElementRef }
   ]; };
@@ -10220,7 +10257,7 @@
   ];
   /** @nocollapse */
   SeFilterComponent.ctorParameters = function () { return [
-      { type: dynamicdialog.DialogService }
+      { type: i1.DialogService }
   ]; };
   SeFilterComponent.propDecorators = {
       globalFilters: [{ type: i0.Input }],
@@ -10322,9 +10359,9 @@
                       SeFilterComponent,
                       AlertPopUpComponent
                   ],
-                  providers: [dynamicdialog.DialogService, AlertService, i1$1.DecimalPipe, i1$1.DatePipe, RequestService],
+                  providers: [i1.DialogService, AlertService, i1$2.DecimalPipe, i1$2.DatePipe, RequestService],
                   imports: [
-                      i1$1.CommonModule,
+                      i1$2.CommonModule,
                       table.TableModule,
                       panelmenu.PanelMenuModule,
                       menu.MenuModule,
@@ -10666,7 +10703,8 @@
   exports["ɵb"] = AddRowDirective;
   exports["ɵc"] = NotesComponent;
   exports["ɵd"] = AppFilterMenuComponent;
-  exports["ɵe"] = AlertPopUpComponent;
+  exports["ɵe"] = ReportService;
+  exports["ɵf"] = AlertPopUpComponent;
   Object.keys(api).forEach(function (k) {
     if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
       enumerable: true,