@churchillliving/se-ui-toolkit 6.53.721 → 6.53.723

package/fesm2022/churchillliving-se-ui-toolkit.mjs

@@ -352,11 +352,18 @@ var EHyperlink;
  * Modify this.value directly to receive effect
  */
 var formstate = new Subject();
+var columnsState = new Subject();
 var cardState = new Subject();
 var routeChange = new Subject();
 function changeDynamicFormState(id, data, loadComponent) {
     formstate.next({ id, data, loadComponent });
 }
+function changeColumnsState(pageSetting) {
+    columnsState.next(pageSetting);
+}
+function onColumnsStateChange() {
+    return columnsState.asObservable();
+}
 function onDynamicFormStateChange() {
     return formstate.asObservable();
 }
@@ -2366,7 +2373,7 @@ class GridService {
                 return filter.value;
         }
     }
-    checkValidity(columns, row) {
+    checkValidity(columns, row, singleCell = false) {
         let isValid = true;
         columns.map((item) => {
             if (item.validations && !item.disabled) {
@@ -2375,7 +2382,8 @@ class GridService {
                 for (let i = 0; i < item.validations.length; i++) {
                     const minMaxValidDate = calendarMinMaxValue(item, row[item.field], i);
                     const valid = item.validations && item.header;
-                    if (item.validations[i].type == EGridValidator.REQUIRED &&
+                    if (!singleCell &&
+                        item.validations[i].type == EGridValidator.REQUIRED &&
                         !row[item.field] &&
                         !item.hidden &&
                         valid) {
@@ -5452,7 +5460,7 @@ class GridComponent {
         this.setDropdownFilter = true;
         this.setDropdowndataValue = true;
         this.showFilterbtn = false;
-        this.filterOptions = [];
+        this.userSetting = {};
         //apply Add/Delete/Edit prop for the grid permission
         this.addRowPermission = true;
         this.deleteRowPermission = true;
@@ -5589,7 +5597,7 @@ class GridComponent {
         //Dispatch output event trigger on add, update and delete row
         this.onGridRowActions = new EventEmitter();
         //set Multiselect Toggle Columns
-        this.showDefaultColumns = [];
+        this.alwaysHidden = false;
         // set property softCaching for setting the values of gridFilter
         this.softCaching = true;
         this.editAllRows = false;
@@ -5617,9 +5625,10 @@ class GridComponent {
         return this._selectedColumns;
     }
     set selectedColumns(val) {
-        this._selectedColumns = val;
-        if (this.showDefaultColumns.length) {
-            localStorage.setItem("fieldName", JSON.stringify(this.selectedColumns));
+        this._selectedColumns = this.columns?.filter((col) => val.includes(col));
+        if (this.alwaysHidden) {
+            const selectedFields = val.map((x) => x.field);
+            this.setMultiSelectToggleColumn(selectedFields);
         }
     }
     // browser close event
@@ -5659,28 +5668,68 @@ class GridComponent {
         this.refreshGridTerminator();
     }
     // set Multiselect Toggle Column //
-    setMultiSelectToggleColumn() {
-        this.filterOptions = [...this.columns];
-        this._selectedColumns = this.setSelectedColumns();
-        if (JSON.parse(localStorage.getItem("fieldName"))?.length > 0) {
-            const data = JSON.parse(localStorage.getItem("fieldName"));
-            this._selectedColumns = this.columns?.filter((col) => data.find((x) => x.field?.toLowerCase() === col.field?.toLowerCase()));
-            this._selectedColumns = [...this._selectedColumns];
+    setMultiSelectToggleColumn(selectedFields = []) {
+        if (this.userSetting?.pageSettings?.length > 0) {
+            const matchUrl = this.userSetting?.pageSettings?.findIndex((page) => page?.url === this.router.url);
+            if (matchUrl > -1) {
+                const matchGrid = this.userSetting?.pageSettings[matchUrl]?.gridSettings?.findIndex((gridSetting) => gridSetting?.gridId === this.componentTableRef?.id);
+                if (matchGrid > -1) {
+                    this.userSetting?.pageSettings[matchUrl]?.gridSettings.splice(matchGrid, 1);
+                }
+            }
+            this.setgridSettings(selectedFields, matchUrl);
         }
         else {
-            this.selectedColumns = [...this._selectedColumns];
+            this.userSetting.pageSettings = [];
+            this.setgridSettings(selectedFields);
         }
     }
-    setSelectedColumns() {
-        let selectedColumns = [];
-        if (this.columns?.length > 0 && this.showDefaultColumns?.length > 0) {
-            this.columns.forEach((col) => {
-                if (this.showDefaultColumns.some((selectedCol) => selectedCol?.toLowerCase() === col.field?.toLowerCase())) {
-                    selectedColumns.push(col);
+    getSelectedColFromLocalStrorage(selectedColumn) {
+        let arr = [];
+        if (selectedColumn && selectedColumn?.pageSettings?.length > 0) {
+            const matchUrl = selectedColumn?.pageSettings?.findIndex((page) => page?.url === this.router.url);
+            if (matchUrl > -1) {
+                const matchGrid = selectedColumn?.pageSettings[matchUrl]?.gridSettings?.find((gridSetting) => gridSetting?.gridId === this.componentTableRef?.id);
+                if (matchGrid && matchGrid.selectedColumns?.length > 0) {
+                    this.columns.forEach((column) => {
+                        if (matchGrid.selectedColumns.some((fieldName) => fieldName.toLowerCase() === column.field?.toLowerCase())) {
+                            arr.push(column);
+                        }
+                    });
                 }
+            }
+        }
+        if (arr?.length > 0) {
+            return arr;
+        }
+        else {
+            return selectedColumn;
+        }
+    }
+    setgridSettings(selectedFields, matchUrl) {
+        if (selectedFields.length > 0) {
+            let gridSettings = [];
+            gridSettings.push({
+                gridId: this.componentTableRef?.id,
+                selectedColumns: selectedFields
             });
+            const pageSetting = {
+                url: this.router.url,
+                gridSettings: gridSettings,
+                lastUpdated: new Date()
+            };
+            this.userSetting.lastUpdated = new Date();
+            if (matchUrl > -1) {
+                this.userSetting.pageSettings[matchUrl] = pageSetting;
+            }
+            else {
+                this.userSetting.pageSettings.push(pageSetting);
+            }
+            const pageInfo = JSON.stringify(this.userSetting);
+            console.log('this.userSetting: ', this.userSetting);
+            localStorage.setItem('selectedColumns', pageInfo);
+            changeColumnsState({ pageSetting: pageInfo });
         }
-        return selectedColumns;
     }
     // apply user role permissions on grid columns
     applyColumnsPermissions() {
@@ -5770,6 +5819,7 @@ class GridComponent {
     }
     ngOnChanges(change) {
         if (!this.isCheckBoxChangeEventCalled && !this.gridService.rowUpdate) {
+            let getSelectedCol = [];
             if (this.allowCaching !== false && this.pagination) {
                 this.allowCaching = this.pagination;
             }
@@ -5783,13 +5833,16 @@ class GridComponent {
             const hasColumns = this.columns && this.columns.length > 0;
             if (hasColumns) {
                 this.columns = this.gridService.setColumnFields(this.columns);
-                // this.columns = this.gridService.setColumnFields(this.columns?.filter((x) => (!x.hidden || x.allowToggle)));
+                if (this.alwaysHidden) {
+                    this.columns = this.columns?.filter((x) => !x.hidden);
+                    getSelectedCol = this.getSelectedColFromLocalStrorage(JSON.parse(localStorage.getItem('selectedColumns')));
+                }
                 this.roles = this.authService.getUserRoles();
                 // apply user role permissions on grid columns
                 this.applyColumnsPermissions();
                 // apply global permissions on entire grid
                 this.applyGridPermissions();
-                this._selectedColumns = this.columns?.filter((x) => !x.hidden); // || x.allowToggle);
+                this._selectedColumns = this.columns?.filter((x) => !x.hidden);
                 this.cd.detectChanges();
                 // checking filter exist or not
                 const filter = this._selectedColumns.some((column) => column.filtering === undefined || column.filtering === true);
@@ -5923,20 +5976,12 @@ class GridComponent {
                 }
                 else {
                     this._selectedColumns = [];
-                    this.columns.forEach((x, i) => {
-                        if (!x.hidden) {
-                            if (this.selectedColumns[i]) {
-                                x.value = this.selectedColumns[i].value;
-                            }
-                            this._selectedColumns.push(x);
-                        }
-                    });
-                }
-                if (this.columns?.length > 0 && this.showDefaultColumns.length > 0) {
-                    this.setMultiSelectToggleColumn();
-                }
-                else {
-                    localStorage.removeItem("fieldName");
+                    if (this.alwaysHidden && getSelectedCol?.length > 0) {
+                        this.setSelectColumns(getSelectedCol);
+                    }
+                    else {
+                        this.setSelectColumns(this.columns);
+                    }
                 }
                 if (change.rows) {
                     setTimeout(() => {
@@ -5965,6 +6010,16 @@ class GridComponent {
         }
         this.isCheckBoxChangeEventCalled = false;
     }
+    setSelectColumns(columns) {
+        columns?.forEach((x, i) => {
+            if (!x.hidden) {
+                if (this.selectedColumns[i]) {
+                    x.value = this.selectedColumns[i].value;
+                }
+                this._selectedColumns.push(x);
+            }
+        });
+    }
     autoCompleteSelectedValue(row, column, value) {
         if (column.optionLabel) {
             const valueKey = column.optionValue ? column.optionValue : column.field;
@@ -6866,8 +6921,11 @@ class GridComponent {
         this.gridService.rowUpdate = false;
     }
     // check the validation of the field
-    gridValidation(columns, row) {
-        if (!this.gridService.checkValidity(columns, row)) {
+    gridValidation(columns, row, singleCell = false) {
+        if (singleCell == true) {
+            columns = [{ ...columns }];
+        }
+        if (!this.gridService.checkValidity(columns, row, singleCell)) {
             let errorMessageDetails = '';
             columns?.forEach((column) => {
                 if (column.errorMessage) {
@@ -6875,18 +6933,40 @@ class GridComponent {
                 }
             });
             let isRequired = columns.some((column) => column.errorMessage && !row[column.field]);
-            if (isRequired) {
+            if (isRequired && !singleCell) {
                 this.alertService.error(errorMessageDetails, 5000, 'REQUIRED FIELD');
             }
             else {
                 this.alertService.error(errorMessageDetails, 5000, 'INVALID FIELD');
+                if (singleCell) {
+                    this.setErrorCell(columns[0], row);
+                }
             }
             return false;
         }
         else {
+            if (singleCell) {
+                this.setErrorCell(columns[0], row);
+            }
             return true;
         }
     }
+    setErrorCell(column, row) {
+        if (column.errorMessage) {
+            console.log('error message: ', column.errorMessage);
+            if (row[column.field.toLowerCase() + '_obj']) {
+                row[column.field.toLowerCase() + '_obj'] = { ...row[column.field + '_obj'], errorMessage: column.errorMessage };
+            }
+            else {
+                row[column.field.toLowerCase() + '_obj'] = { errorMessage: column.errorMessage };
+            }
+        }
+        else {
+            if (row[column.field.toLowerCase() + '_obj']) {
+                delete row[column.field.toLowerCase() + '_obj'].errorMessage;
+            }
+        }
+    }
     /**
      *
      * @param row : any
@@ -7635,6 +7715,7 @@ class GridComponent {
     // Invoke onChange Event
     onChangeEvent(column, row) {
         // set dropdown displayField value base on optionLabel & optionValue.
+        this.gridValidation(column, row, true);
         this.displayFieldDropdownValue(column, row);
         this.onClearValue(column, row);
         this.browserCloseEvent(true);
@@ -7921,11 +8002,11 @@ class GridComponent {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GridComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DialogService }, { token: FormService }, { token: GridService }, { token: AlertService }, { token: AuthenticationService }, { token: i0.ElementRef }, { token: i2$1.DecimalPipe }, { token: PageLoggerService }, { token: HyperlinkService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i2$1.DatePipe }, { token: i10.ConfirmationService }, { token: i1.DynamicDialogConfig, optional: true }, { token: i1.DynamicDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: GridComponent, selector: "se-grid", inputs: { activeTestMode: "activeTestMode", selectedRows: "selectedRows", setGridRefreshTime: "setGridRefreshTime", addDataKeyValue: "addDataKeyValue", showRefreshBtn: "showRefreshBtn", hideRefreshBtn: "hideRefreshBtn", horizontalScroll: "horizontalScroll", hideDeleteBtn: "hideDeleteBtn", hideEditBtn: "hideEditBtn", hideAddBtn: "hideAddBtn", loading: "loading", autoLoadData: "autoLoadData", rowStyle: "rowStyle", allowSelection: "allowSelection", selectionColumnWidth: "selectionColumnWidth", allowSelectionHeader: "allowSelectionHeader", hideGridSaveButton: "hideGridSaveButton", hideGridCancelButton: "hideGridCancelButton", allowExportToPdf: "allowExportToPdf", allowExportToExcel: "allowExportToExcel", setActionColumnAsFirst: "setActionColumnAsFirst", useInlineCRUD: "useInlineCRUD", rowActions: "rowActions", selectionType: "selectionType", dataKey: "dataKey", clearGridFilter: "clearGridFilter", searchGridFilter: "searchGridFilter", scrollable: "scrollable", scrollHeight: "scrollHeight", tableStyle: "tableStyle", wordWrap: "wordWrap", newGridRow: "newGridRow", filtering: "filtering", reportButtons: "reportButtons", rowHover: "rowHover", hideFilterOptions: "hideFilterOptions", setPaginationLength: "setPaginationLength", rows: "rows", globalFilterData: "globalFilterData", columns: "columns", permissions: "permissions", allowColumnToggle: "allowColumnToggle", hideFilter: "hideFilter", lookupFilters: "lookupFilters", pagination: "pagination", showCurrentPageReport: "showCurrentPageReport", totalRecords: "totalRecords", aggregatedResult: "aggregatedResult", showconfirmDialog: "showconfirmDialog", saveAllData: "saveAllData", defaultRows: "defaultRows", columnActions: "columnActions", useServerSideEvents: "useServerSideEvents", allowCaching: "allowCaching", showDefaultColumns: "showDefaultColumns", softCaching: "softCaching", editAllRows: "editAllRows" }, outputs: { inlineRowCancel: "inlineRowCancel", rowsChange: "rowsChange", onRowClick: "onRowClick", onCheckBoxFilterClick: "onCheckBoxFilterClick", onRowCheckBox: "onRowCheckBox", onSortChange: "onSortChange", onFilterChange: "onFilterChange", onMultiSelectionChange: "onMultiSelectionChange", onApplyFilter: "onApplyFilter", isIncludedAllColumns: "isIncludedAllColumns", onServerSideEventChange: "onServerSideEventChange", onPageChange: "onPageChange", onRowUpdate: "onRowUpdate", onCancelAllRows: "onCancelAllRows", onRowDelete: "onRowDelete", onRowAdd: "onRowAdd", onGridRowActions: "onGridRowActions", onGridRowEdit: "onGridRowEdit", onGridRowAdd: "onGridRowAdd" }, host: { listeners: { "window:beforeunload": "beforeunloadHandler($event)" } }, viewQueries: [{ propertyName: "panelOverlayViewContainer", first: true, predicate: ["viewContainerRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "gridRow", predicate: ["gridRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"global-filter-buttons-wrapper\">\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n      \" class='global-refresh global-btn'\n    ></button>\n\n  <!-- button for save all grid at once -->\n  <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"filterOptions && showDefaultColumns.length ? filterOptions : 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    \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 mr-2 ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info mr-2 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  <ng-content></ng-content>\n\n  <ng-container  *ngFor=\"let reportButton of reportButtons\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\" [icon]=\"reportButton.icon\" [class]=\"reportButton.class\"\n    [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </ng-container>\n\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    [resizableColumns]=\"true\" [autoLayout]=\"true\"\n     responsiveLayout=\"scroll\" columnResizeMode=\"expand\"\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]=\"tableStyle\"\n    [scrollHeight]=\"scrollHeight\"\n    editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n    [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n    <!-- [tableStyle]=\"'max-height: ' + scrollHeight + '; ' + tableStyle\" -->\n    <!-- [tableStyle]=\"{ 'max-height': scrollHeight }\" -->\n    <!-- header Button for Action on Grid -->\n    <!-- [scrollHeight]=\"'flex'\" -->\n\n    <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"flex justify-content-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 pResizableColumn *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-2\n                  table-header-inner-div div-last-inner-html-is-icon\">\n              <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n              <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n                (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n            </div>\n          </span>\n        </th>\n        <th pResizableColumn *ngIf=\"allowSelection && selectionType === 'single'\" \n              class=\"grid-component-selection\">\n          Select\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n          [style]=\"column.style\"\n          [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n          [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n          class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n              <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n              <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n              <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n                [field]=\"column.field\"></p-sortIcon>\n            </div>\n        </span>\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n        <th pResizableColumn *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        </th>\n        <th pResizableColumn *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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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                class=\"no-filter-icon\"\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]=\"column.field?.toLowerCase() + '_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 class=\"direct-wrapper-close-icon-lookup\">\n                      <button\n                        *ngIf=\"column.filterValue\"\n                        icon=\"pi pi-times\"\n                        pButton\n                        type=\"button\"\n                        (click)=\"lookupClearValue(column)\">\n                      </button>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-columnFilter>\n\n            <!-- checkbox on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" 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 class=\"no-filter-icon\" [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 || []\" \n                [appendTo]=\"'body'\" [name]=\"column.field\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                [optionValue]=\"column.optionValue\"\n                 [optionLabel]=\"column.optionLabel\"\n                  (blur)=\"setFilterFocusOut(column, filter, $event)\" \n                  (keydown)=\"backspaceEvent($event, column)\">\n                </p-multiSelect>\n              </ng-template>\n            </p-columnFilter>\n\n            <!-- dropdown on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 pResizableColumn\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 \n      [style]=\"rowStyle\"\n      [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n        [class]=\"wordWrap ? 'p-selectable-row wordWrapTrue' : 'wordWrapFalse p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n        [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n        <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n          <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n            (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n          <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n            (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n        </td>\n\n        <!-- first actions column -->\n        <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n          <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n            <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n          </span>\n        </td>\n        <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class=\"setActionColumnWidth\">\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n\n        <!-- Grid Rows Data Bindings Start -->\n        <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style \" \n        (mouseenter)=\"(column.onHover && column.onHover.component) && addDynamicPanelOverlayComponent(column.onHover)&& overlayPanel.show($event)\"\n        (mouseleave)=\"(column.onHover && column.onHover.component)  && overlayPanel.hide()\"\n        >\n          <span class=\"td-content-wrapper\">\n\n          <!-- Boolean column on Grid -->\n          <span *ngSwitchCase=\"'boolean'\"\n          >\n        <td *ngIf=\"!editing\">\n          <p-checkbox \n          [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n            (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n            [(ngModel)]=\" \n              row[column.field] &&\n              (row[column.field].toString() === '1' ||\n                row[column.field].toString().toLowerCase() === 'true' ||\n                row[column.field].toString().toLowerCase() === 'y'||\n                ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                  ? Checked\n                  : unChecked\n                \">\n          </p-checkbox>\n        </td>\n        <td *ngIf=\"editing\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for edit checkBox -->\n              <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                    row[column.field] &&   \n                    (row[column.field].toString() === '1' ||\n                      row[column.field].toString().toLowerCase() === 'true' ||\n                      row[column.field].toString().toLowerCase() === 'y' ||\n                      ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                      ? editModeChecked\n                      : editModeunCkecked\n                  \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ row[column.field] }}\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n              [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n        \n            </span>\n            <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n              [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n              <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                  <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                  <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                </span>\n                <span *ngIf=\"column.editable === false\" >\n                <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                  [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                  </a>\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                    [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                    <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                    {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  \n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n                >\n                    <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                  {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  </a>\n\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n                row[column.field + '_obj'] &&\n                (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                  ? row[column.field] : row[column.field + '_obj']?.displayText\n                  ? row[column.field + '_obj'].displayText\n                  : column.displayText\n                  ? column.displayText\n                  : row[column.field]\n\n              \"\n            >  \n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n              ? row[column.field] : row[column.field + '_obj']?.displayText\n              ? row[column.field + '_obj'].displayText\n              : column.displayText ? column.displayText : row[column.field]\n            }}\n            </ng-template>\n            </span>\n          </span>\n\n          <!-- dialog column on Grid -->\n          <span *ngSwitchCase=\"'dialog'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"column?.filter?.type !== 'calendar' && !row?.hidegridbtn\" \n                  [title]=\"setConditionBaseValue(row, column) \"\n                >\n                  <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n                    <input\n                    readonly\n                      [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                      [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                      type=\"text\"\n                      pInputText\n                      (click)=\"selectLookupField(column, row)\"\n                      [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                      row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n                      row[column.field]\"\n                      [name]=\"row[column.field]\"\n                      [disabled]=\"allowDisabled(column,row)\"\n                      (blur)=\"onFocusOutEvent(column, row)\"\n                    />\n                    \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, $event)\">\n\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                  <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                    }}</ng-template>\n\n\n                </span>\n              </span>\n              <span *ngIf=\"column?.filter?.type === 'calendar'\" [title]=\"\n                    row[column.field]\n                      | date: (column.format ? column.format : 'MM/dd/YY')\n                  \">\n                <p-calendar [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n              </span>\n            </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span class=\"custom-link\"\n                    [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n                    (click)=\"openGridDialog(column, row)\"\n                    [title]=\"setConditionBaseValue(row, column)\">\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                    <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n                <!-- {{ setConditionBaseValue(row, column) }}\n                   *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\" -->\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n                <input readonly type=\"text\" pInputText\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField  ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n                  typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n                  column.displayField ? row[column.displayField?.toLowerCase()] : 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]=\"row[column.field.toLowerCase()+'_obj']?.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                row[column.field.toLowerCase()+'_obj']?.errorMessage\n                        ? 'ng-invalid ng-dirty'\n                        : 'form-control'\n                    \" [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\" (onFocus)=\"onFocusEvent(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 *ngSwitchCase=\"'add_button'\">\n          <div>\n            <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n              [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n              [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n              [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n              class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n          </div>\n        </span>        \n\n        <!-- Date column on Grid -->\n        <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"row[column.field.toLowerCase()+'_obj']?.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)=\"calendarInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n                setDropdwonReadOnlyValue(row, column)\n                \">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n                        row[column.field+'_data']\n                          ? row[column.field+'_data']\n                          : column.data\n                      \"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\" [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field+'_obj']?.hidden\">\n                    {{\n                    setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- MultiSelect column on Grid -->\n            <!-- [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n            row[column.field]\" -->\n            <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                    [(ngModel)]=\"row[column.field]\"\n                     [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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                    [name]=\"column.header\"\n                    [suggestions]=\"column.data\" \n                    (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                    [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                    row[column.field]?.text :\n                    row[column.field]\"\n                    [dropdown]=\"column.showOption\" \n                    (ngModelChange)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickEvent(column, row)\" \n                    (completeMethod)=\"autoSearch($event, column, row)\"\n                    (onBlur)=\"onFocusOutEvent(column, row)\" \n                    [disabled]=\"allowDisabled(column,row)\" \n                    [multiple]=\"true\"\n                    (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                  </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                    </span>\n                  </span>\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.field] : value[column.field] + ';' : value[column.field] }}\n                    </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n            <!-- Add Generate Report Button -->\n            <span *ngSwitchCase=\"'report'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"output\">\n                  <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\" [class]=\"column.class\"\n                    [showDialog]=\"column.showDialog\" [icon]=\"column.icon\"></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\" [icon]=\"column.icon\" [class]=\"column.class\"\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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                  <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                  setTextBoxReadOnlyValue(row, column)\n                                    \">\n                    {{\n                      setTextBoxReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      \n          </span>\n        </td>\n        <!-- Grid Rows Data Bindings End -->\n\n        <!-- Action column on Grid -->\n        <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n          class=\"for-buttons\"\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          class=\"for-buttons\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class='setActionColumnWidth'>\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer columns on Grid -->\n    <ng-template pTemplate=\"footer\">\n      <tr *ngIf=\"aggregateFooter\">\n        <td\n          *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [style]=\"outerColumn.style\">\n          <div *ngFor=\"let innerColumn of selectedColumns\">\n            <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n              <div\n                *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) ||\n                  aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n                <div [innerHTML]=\"aggr.aggrValue\">\n                </div>\n              </div>\n            </div>  \n          </div>\n        </td>\n        <td\n          *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer for Empty Message columns on Grid -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"grid-component no-records-found\">\n        <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n      </tr>\n    </ng-template>\n  </p-table>  \n  <p-overlayPanel\n  [style]=\"overlayPanelStyle\" #overlayPanel>\n    <ng-container #viewContainerRef></ng-container>\n  </p-overlayPanel>\n</div>", styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .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}:host ::ng-deep .p-datatable-resizable-table>.p-datatable-thead>tr>th{overflow:visible!important}:host ::ng-deep .p-multiselect .p-multiselect-trigger{top:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i11.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i11.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i11.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i11.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i11.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i11.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i11.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "component", type: i11.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i14.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "directive", type: i4$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i18.InputText, selector: "[pInputText]" }, { kind: "component", type: i21.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i22.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "component", type: i23.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i24$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: GridRowActionsComponent, selector: "se-grid-row-actions", inputs: ["editing", "editRowPermission", "deleteRowPermission", "hideDeleteBtn", "hideEditBtn", "editAllRows", "row"], outputs: ["onRowEditInitBtn", "deleteRecordBtn", "onRowEditSaveBtn", "onRowEditCancelBtn"] }, { kind: "directive", type: AddRowDirective, selector: "[pAddRow]", inputs: ["table", "newRow", "id"] }, { kind: "component", type: GenerateReportBtnComponent, selector: "se-generate-report-btn", inputs: ["repId", "label", "icon", "params", "class", "showDialog", "form"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: GridComponent, selector: "se-grid", inputs: { activeTestMode: "activeTestMode", selectedRows: "selectedRows", setGridRefreshTime: "setGridRefreshTime", addDataKeyValue: "addDataKeyValue", showRefreshBtn: "showRefreshBtn", hideRefreshBtn: "hideRefreshBtn", horizontalScroll: "horizontalScroll", hideDeleteBtn: "hideDeleteBtn", hideEditBtn: "hideEditBtn", hideAddBtn: "hideAddBtn", loading: "loading", autoLoadData: "autoLoadData", rowStyle: "rowStyle", allowSelection: "allowSelection", selectionColumnWidth: "selectionColumnWidth", allowSelectionHeader: "allowSelectionHeader", hideGridSaveButton: "hideGridSaveButton", hideGridCancelButton: "hideGridCancelButton", allowExportToPdf: "allowExportToPdf", allowExportToExcel: "allowExportToExcel", setActionColumnAsFirst: "setActionColumnAsFirst", useInlineCRUD: "useInlineCRUD", rowActions: "rowActions", selectionType: "selectionType", dataKey: "dataKey", clearGridFilter: "clearGridFilter", searchGridFilter: "searchGridFilter", scrollable: "scrollable", scrollHeight: "scrollHeight", tableStyle: "tableStyle", wordWrap: "wordWrap", newGridRow: "newGridRow", filtering: "filtering", reportButtons: "reportButtons", rowHover: "rowHover", hideFilterOptions: "hideFilterOptions", setPaginationLength: "setPaginationLength", rows: "rows", globalFilterData: "globalFilterData", columns: "columns", permissions: "permissions", allowColumnToggle: "allowColumnToggle", hideFilter: "hideFilter", lookupFilters: "lookupFilters", pagination: "pagination", showCurrentPageReport: "showCurrentPageReport", totalRecords: "totalRecords", aggregatedResult: "aggregatedResult", showconfirmDialog: "showconfirmDialog", saveAllData: "saveAllData", defaultRows: "defaultRows", columnActions: "columnActions", useServerSideEvents: "useServerSideEvents", allowCaching: "allowCaching", alwaysHidden: "alwaysHidden", softCaching: "softCaching", editAllRows: "editAllRows" }, outputs: { inlineRowCancel: "inlineRowCancel", rowsChange: "rowsChange", onRowClick: "onRowClick", onCheckBoxFilterClick: "onCheckBoxFilterClick", onRowCheckBox: "onRowCheckBox", onSortChange: "onSortChange", onFilterChange: "onFilterChange", onMultiSelectionChange: "onMultiSelectionChange", onApplyFilter: "onApplyFilter", isIncludedAllColumns: "isIncludedAllColumns", onServerSideEventChange: "onServerSideEventChange", onPageChange: "onPageChange", onRowUpdate: "onRowUpdate", onCancelAllRows: "onCancelAllRows", onRowDelete: "onRowDelete", onRowAdd: "onRowAdd", onGridRowActions: "onGridRowActions", onGridRowEdit: "onGridRowEdit", onGridRowAdd: "onGridRowAdd" }, host: { listeners: { "window:beforeunload": "beforeunloadHandler($event)" } }, viewQueries: [{ propertyName: "panelOverlayViewContainer", first: true, predicate: ["viewContainerRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "gridRow", predicate: ["gridRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n  key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"global-filter-buttons-wrapper\">\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n      \" class='global-refresh global-btn'\n    ></button>\n\n  <!-- button for save all grid at once -->\n  <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"columns\" [(ngModel)]=\"selectedColumns\" optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"  class=\"grid-component-multiselect-header-button\" placeholder=\"Choose Columns\">\n    </p-multiSelect>\n  </span>\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button pButton *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\" type=\"button\" [label]=\"'Add'\" pAddRow\n    [table]=\"componentTableRef\" [newRow]=\"newGridRow\" [id]=\"dataKey\" pTooltip=\"Add New Row\" tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\" class=\"ui-button-info global-add-btn\" (click)=\"addNewRow(newGridRow, true)\" pRipple></button>\n\n    \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 mr-2 ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info mr-2 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  <ng-content></ng-content>\n\n  <ng-container  *ngFor=\"let reportButton of reportButtons\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\" [icon]=\"reportButton.icon\" [class]=\"reportButton.class\"\n    [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </ng-container>\n\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    [resizableColumns]=\"true\" [autoLayout]=\"true\"\n     responsiveLayout=\"scroll\" columnResizeMode=\"expand\"\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]=\"tableStyle\"\n    [scrollHeight]=\"scrollHeight\"\n    editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n    [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n    <!-- [tableStyle]=\"'max-height: ' + scrollHeight + '; ' + tableStyle\" -->\n    <!-- [tableStyle]=\"{ 'max-height': scrollHeight }\" -->\n    <!-- header Button for Action on Grid -->\n    <!-- [scrollHeight]=\"'flex'\" -->\n\n    <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"flex justify-content-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 pResizableColumn *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-2\n                  table-header-inner-div div-last-inner-html-is-icon\">\n              <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n              <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n                (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n            </div>\n          </span>\n        </th>\n        <th pResizableColumn *ngIf=\"allowSelection && selectionType === 'single'\" \n              class=\"grid-component-selection\">\n          Select\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n          [style]=\"column.style\"\n          [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n          [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n          class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n              <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n              <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n              <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n                [field]=\"column.field\"></p-sortIcon>\n            </div>\n        </span>\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n        <th pResizableColumn *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        </th>\n        <th pResizableColumn *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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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                class=\"no-filter-icon\"\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]=\"column.field?.toLowerCase() + '_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 class=\"direct-wrapper-close-icon-lookup\">\n                      <button\n                        *ngIf=\"column.filterValue\"\n                        icon=\"pi pi-times\"\n                        pButton\n                        type=\"button\"\n                        (click)=\"lookupClearValue(column)\">\n                      </button>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-columnFilter>\n\n            <!-- checkbox on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" 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 class=\"no-filter-icon\" [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 || []\" \n                [appendTo]=\"'body'\" [name]=\"column.field\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                [optionValue]=\"column.optionValue\"\n                 [optionLabel]=\"column.optionLabel\"\n                  (blur)=\"setFilterFocusOut(column, filter, $event)\" \n                  (keydown)=\"backspaceEvent($event, column)\">\n                </p-multiSelect>\n              </ng-template>\n            </p-columnFilter>\n\n            <!-- dropdown on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 pResizableColumn\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 \n      [style]=\"rowStyle\"\n      [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n        [class]=\"wordWrap ? 'p-selectable-row wordWrapTrue' : 'wordWrapFalse p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n        [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n        <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n          <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n            (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n          <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n            (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n        </td>\n\n        <!-- first actions column -->\n        <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n          <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n            <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n          </span>\n        </td>\n        <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class=\"setActionColumnWidth\">\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n\n        <!-- Grid Rows Data Bindings Start -->\n        <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style \" \n        (mouseenter)=\"(column.onHover && column.onHover.component) && addDynamicPanelOverlayComponent(column.onHover)&& overlayPanel.show($event)\"\n        (mouseleave)=\"(column.onHover && column.onHover.component)  && overlayPanel.hide()\"\n        >\n          <span class=\"td-content-wrapper\">\n\n          <!-- Boolean column on Grid -->\n          <span *ngSwitchCase=\"'boolean'\"\n          >\n        <td *ngIf=\"!editing\">\n          <p-checkbox \n          [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n            (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n            [(ngModel)]=\" \n              row[column.field] &&\n              (row[column.field].toString() === '1' ||\n                row[column.field].toString().toLowerCase() === 'true' ||\n                row[column.field].toString().toLowerCase() === 'y'||\n                ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                  ? Checked\n                  : unChecked\n                \">\n          </p-checkbox>\n        </td>\n        <td *ngIf=\"editing\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for edit checkBox -->\n              <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                    row[column.field] &&   \n                    (row[column.field].toString() === '1' ||\n                      row[column.field].toString().toLowerCase() === 'true' ||\n                      row[column.field].toString().toLowerCase() === 'y' ||\n                      ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                      ? editModeChecked\n                      : editModeunCkecked\n                  \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ row[column.field] }}\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n              [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n        \n            </span>\n            <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n              [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n              <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                  <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                  <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                </span>\n                <span *ngIf=\"column.editable === false\" >\n                <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                  [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                  </a>\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                    [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                    <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                    {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  \n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n                >\n                    <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                  {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  </a>\n\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n                row[column.field + '_obj'] &&\n                (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                  ? row[column.field] : row[column.field + '_obj']?.displayText\n                  ? row[column.field + '_obj'].displayText\n                  : column.displayText\n                  ? column.displayText\n                  : row[column.field]\n\n              \"\n            >  \n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n              ? row[column.field] : row[column.field + '_obj']?.displayText\n              ? row[column.field + '_obj'].displayText\n              : column.displayText ? column.displayText : row[column.field]\n            }}\n            </ng-template>\n            </span>\n          </span>\n\n          <!-- dialog column on Grid -->\n          <span *ngSwitchCase=\"'dialog'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"column?.filter?.type !== 'calendar' && !row?.hidegridbtn\" \n                  [title]=\"setConditionBaseValue(row, column) \"\n                >\n                  <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n                    <input\n                    readonly\n                      [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                      [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                      type=\"text\"\n                      pInputText\n                      (click)=\"selectLookupField(column, row)\"\n                      [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                      row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n                      row[column.field]\"\n                      [name]=\"row[column.field]\"\n                      [disabled]=\"allowDisabled(column,row)\"\n                      (blur)=\"onFocusOutEvent(column, row)\"\n                    />\n                    \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, $event)\">\n\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                  <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                    }}</ng-template>\n\n\n                </span>\n              </span>\n              <span *ngIf=\"column?.filter?.type === 'calendar'\" [title]=\"\n                    row[column.field]\n                      | date: (column.format ? column.format : 'MM/dd/YY')\n                  \">\n                <p-calendar [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n              </span>\n            </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span class=\"custom-link\"\n                    [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n                    (click)=\"openGridDialog(column, row)\"\n                    [title]=\"setConditionBaseValue(row, column)\">\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                    <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n                <!-- {{ setConditionBaseValue(row, column) }}\n                   *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\" -->\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n                <input readonly type=\"text\" pInputText\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField  ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n                  typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n                  column.displayField ? row[column.displayField?.toLowerCase()] : 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]=\"row[column.field.toLowerCase()+'_obj']?.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                row[column.field.toLowerCase()+'_obj']?.errorMessage\n                        ? 'ng-invalid ng-dirty'\n                        : 'form-control'\n                    \" [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\" (onFocus)=\"onFocusEvent(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 *ngSwitchCase=\"'add_button'\">\n          <div>\n            <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n              [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n              [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n              [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n              class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n          </div>\n        </span>        \n\n        <!-- Date column on Grid -->\n        <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"row[column.field.toLowerCase()+'_obj']?.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)=\"calendarInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n                setDropdwonReadOnlyValue(row, column)\n                \">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n                        row[column.field+'_data']\n                          ? row[column.field+'_data']\n                          : column.data\n                      \"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\" [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field+'_obj']?.hidden\">\n                    {{\n                    setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- MultiSelect column on Grid -->\n            <!-- [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n            row[column.field]\" -->\n            <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                    [(ngModel)]=\"row[column.field]\"\n                     [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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                    [name]=\"column.header\"\n                    [suggestions]=\"column.data\" \n                    (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                    [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                    row[column.field]?.text :\n                    row[column.field]\"\n                    [dropdown]=\"column.showOption\" \n                    (ngModelChange)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickEvent(column, row)\" \n                    (completeMethod)=\"autoSearch($event, column, row)\"\n                    (onBlur)=\"onFocusOutEvent(column, row)\" \n                    [disabled]=\"allowDisabled(column,row)\" \n                    [multiple]=\"true\"\n                    (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                  </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                    </span>\n                  </span>\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.field] : value[column.field] + ';' : value[column.field] }}\n                    </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n            <!-- Add Generate Report Button -->\n            <span *ngSwitchCase=\"'report'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"output\">\n                  <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\" [class]=\"column.class\"\n                    [showDialog]=\"column.showDialog\" [icon]=\"column.icon\"></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\" [icon]=\"column.icon\" [class]=\"column.class\"\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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                  <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                  setTextBoxReadOnlyValue(row, column)\n                                    \">\n                    {{\n                      setTextBoxReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      \n          </span>\n        </td>\n        <!-- Grid Rows Data Bindings End -->\n\n        <!-- Action column on Grid -->\n        <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n          class=\"for-buttons\"\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          class=\"for-buttons\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class='setActionColumnWidth'>\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer columns on Grid -->\n    <ng-template pTemplate=\"footer\">\n      <tr *ngIf=\"aggregateFooter\">\n        <td\n          *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [style]=\"outerColumn.style\">\n          <div *ngFor=\"let innerColumn of selectedColumns\">\n            <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n              <div\n                *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) ||\n                  aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n                <div [innerHTML]=\"aggr.aggrValue\">\n                </div>\n              </div>\n            </div>  \n          </div>\n        </td>\n        <td\n          *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer for Empty Message columns on Grid -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"grid-component no-records-found\">\n        <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n      </tr>\n    </ng-template>\n  </p-table>  \n  <p-overlayPanel\n  [style]=\"overlayPanelStyle\" #overlayPanel>\n    <ng-container #viewContainerRef></ng-container>\n  </p-overlayPanel>\n</div>", styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .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}:host ::ng-deep .p-datatable-resizable-table>.p-datatable-thead>tr>th{overflow:visible!important}:host ::ng-deep .p-multiselect .p-multiselect-trigger{top:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i11.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i11.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i11.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i11.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i11.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i11.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i11.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "component", type: i11.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i14.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "directive", type: i4$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i18.InputText, selector: "[pInputText]" }, { kind: "component", type: i21.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i22.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "component", type: i23.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i24$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: GridRowActionsComponent, selector: "se-grid-row-actions", inputs: ["editing", "editRowPermission", "deleteRowPermission", "hideDeleteBtn", "hideEditBtn", "editAllRows", "row"], outputs: ["onRowEditInitBtn", "deleteRecordBtn", "onRowEditSaveBtn", "onRowEditCancelBtn"] }, { kind: "directive", type: AddRowDirective, selector: "[pAddRow]", inputs: ["table", "newRow", "id"] }, { kind: "component", type: GenerateReportBtnComponent, selector: "se-generate-report-btn", inputs: ["repId", "label", "icon", "params", "class", "showDialog", "form"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GridComponent, decorators: [{
             type: 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=\"global-filter-buttons-wrapper\">\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n      \" class='global-refresh global-btn'\n    ></button>\n\n  <!-- button for save all grid at once -->\n  <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"filterOptions && showDefaultColumns.length ? filterOptions : 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    \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 mr-2 ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info mr-2 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  <ng-content></ng-content>\n\n  <ng-container  *ngFor=\"let reportButton of reportButtons\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\" [icon]=\"reportButton.icon\" [class]=\"reportButton.class\"\n    [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </ng-container>\n\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    [resizableColumns]=\"true\" [autoLayout]=\"true\"\n     responsiveLayout=\"scroll\" columnResizeMode=\"expand\"\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]=\"tableStyle\"\n    [scrollHeight]=\"scrollHeight\"\n    editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n    [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n    <!-- [tableStyle]=\"'max-height: ' + scrollHeight + '; ' + tableStyle\" -->\n    <!-- [tableStyle]=\"{ 'max-height': scrollHeight }\" -->\n    <!-- header Button for Action on Grid -->\n    <!-- [scrollHeight]=\"'flex'\" -->\n\n    <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"flex justify-content-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 pResizableColumn *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-2\n                  table-header-inner-div div-last-inner-html-is-icon\">\n              <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n              <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n                (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n            </div>\n          </span>\n        </th>\n        <th pResizableColumn *ngIf=\"allowSelection && selectionType === 'single'\" \n              class=\"grid-component-selection\">\n          Select\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n          [style]=\"column.style\"\n          [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n          [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n          class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n              <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n              <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n              <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n                [field]=\"column.field\"></p-sortIcon>\n            </div>\n        </span>\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n        <th pResizableColumn *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        </th>\n        <th pResizableColumn *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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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                class=\"no-filter-icon\"\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]=\"column.field?.toLowerCase() + '_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 class=\"direct-wrapper-close-icon-lookup\">\n                      <button\n                        *ngIf=\"column.filterValue\"\n                        icon=\"pi pi-times\"\n                        pButton\n                        type=\"button\"\n                        (click)=\"lookupClearValue(column)\">\n                      </button>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-columnFilter>\n\n            <!-- checkbox on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" 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 class=\"no-filter-icon\" [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 || []\" \n                [appendTo]=\"'body'\" [name]=\"column.field\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                [optionValue]=\"column.optionValue\"\n                 [optionLabel]=\"column.optionLabel\"\n                  (blur)=\"setFilterFocusOut(column, filter, $event)\" \n                  (keydown)=\"backspaceEvent($event, column)\">\n                </p-multiSelect>\n              </ng-template>\n            </p-columnFilter>\n\n            <!-- dropdown on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 pResizableColumn\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 \n      [style]=\"rowStyle\"\n      [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n        [class]=\"wordWrap ? 'p-selectable-row wordWrapTrue' : 'wordWrapFalse p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n        [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n        <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n          <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n            (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n          <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n            (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n        </td>\n\n        <!-- first actions column -->\n        <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n          <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n            <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n          </span>\n        </td>\n        <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class=\"setActionColumnWidth\">\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n\n        <!-- Grid Rows Data Bindings Start -->\n        <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style \" \n        (mouseenter)=\"(column.onHover && column.onHover.component) && addDynamicPanelOverlayComponent(column.onHover)&& overlayPanel.show($event)\"\n        (mouseleave)=\"(column.onHover && column.onHover.component)  && overlayPanel.hide()\"\n        >\n          <span class=\"td-content-wrapper\">\n\n          <!-- Boolean column on Grid -->\n          <span *ngSwitchCase=\"'boolean'\"\n          >\n        <td *ngIf=\"!editing\">\n          <p-checkbox \n          [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n            (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n            [(ngModel)]=\" \n              row[column.field] &&\n              (row[column.field].toString() === '1' ||\n                row[column.field].toString().toLowerCase() === 'true' ||\n                row[column.field].toString().toLowerCase() === 'y'||\n                ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                  ? Checked\n                  : unChecked\n                \">\n          </p-checkbox>\n        </td>\n        <td *ngIf=\"editing\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for edit checkBox -->\n              <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                    row[column.field] &&   \n                    (row[column.field].toString() === '1' ||\n                      row[column.field].toString().toLowerCase() === 'true' ||\n                      row[column.field].toString().toLowerCase() === 'y' ||\n                      ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                      ? editModeChecked\n                      : editModeunCkecked\n                  \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ row[column.field] }}\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n              [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n        \n            </span>\n            <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n              [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n              <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                  <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                  <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                </span>\n                <span *ngIf=\"column.editable === false\" >\n                <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                  [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                  </a>\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                    [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                    <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                    {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  \n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n                >\n                    <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                  {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  </a>\n\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n                row[column.field + '_obj'] &&\n                (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                  ? row[column.field] : row[column.field + '_obj']?.displayText\n                  ? row[column.field + '_obj'].displayText\n                  : column.displayText\n                  ? column.displayText\n                  : row[column.field]\n\n              \"\n            >  \n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n              ? row[column.field] : row[column.field + '_obj']?.displayText\n              ? row[column.field + '_obj'].displayText\n              : column.displayText ? column.displayText : row[column.field]\n            }}\n            </ng-template>\n            </span>\n          </span>\n\n          <!-- dialog column on Grid -->\n          <span *ngSwitchCase=\"'dialog'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"column?.filter?.type !== 'calendar' && !row?.hidegridbtn\" \n                  [title]=\"setConditionBaseValue(row, column) \"\n                >\n                  <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n                    <input\n                    readonly\n                      [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                      [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                      type=\"text\"\n                      pInputText\n                      (click)=\"selectLookupField(column, row)\"\n                      [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                      row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n                      row[column.field]\"\n                      [name]=\"row[column.field]\"\n                      [disabled]=\"allowDisabled(column,row)\"\n                      (blur)=\"onFocusOutEvent(column, row)\"\n                    />\n                    \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, $event)\">\n\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                  <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                    }}</ng-template>\n\n\n                </span>\n              </span>\n              <span *ngIf=\"column?.filter?.type === 'calendar'\" [title]=\"\n                    row[column.field]\n                      | date: (column.format ? column.format : 'MM/dd/YY')\n                  \">\n                <p-calendar [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n              </span>\n            </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span class=\"custom-link\"\n                    [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n                    (click)=\"openGridDialog(column, row)\"\n                    [title]=\"setConditionBaseValue(row, column)\">\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                    <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n                <!-- {{ setConditionBaseValue(row, column) }}\n                   *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\" -->\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n                <input readonly type=\"text\" pInputText\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField  ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n                  typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n                  column.displayField ? row[column.displayField?.toLowerCase()] : 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]=\"row[column.field.toLowerCase()+'_obj']?.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                row[column.field.toLowerCase()+'_obj']?.errorMessage\n                        ? 'ng-invalid ng-dirty'\n                        : 'form-control'\n                    \" [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\" (onFocus)=\"onFocusEvent(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 *ngSwitchCase=\"'add_button'\">\n          <div>\n            <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n              [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n              [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n              [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n              class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n          </div>\n        </span>        \n\n        <!-- Date column on Grid -->\n        <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"row[column.field.toLowerCase()+'_obj']?.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)=\"calendarInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n                setDropdwonReadOnlyValue(row, column)\n                \">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n                        row[column.field+'_data']\n                          ? row[column.field+'_data']\n                          : column.data\n                      \"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\" [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field+'_obj']?.hidden\">\n                    {{\n                    setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- MultiSelect column on Grid -->\n            <!-- [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n            row[column.field]\" -->\n            <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                    [(ngModel)]=\"row[column.field]\"\n                     [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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                    [name]=\"column.header\"\n                    [suggestions]=\"column.data\" \n                    (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                    [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                    row[column.field]?.text :\n                    row[column.field]\"\n                    [dropdown]=\"column.showOption\" \n                    (ngModelChange)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickEvent(column, row)\" \n                    (completeMethod)=\"autoSearch($event, column, row)\"\n                    (onBlur)=\"onFocusOutEvent(column, row)\" \n                    [disabled]=\"allowDisabled(column,row)\" \n                    [multiple]=\"true\"\n                    (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                  </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                    </span>\n                  </span>\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.field] : value[column.field] + ';' : value[column.field] }}\n                    </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n            <!-- Add Generate Report Button -->\n            <span *ngSwitchCase=\"'report'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"output\">\n                  <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\" [class]=\"column.class\"\n                    [showDialog]=\"column.showDialog\" [icon]=\"column.icon\"></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\" [icon]=\"column.icon\" [class]=\"column.class\"\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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                  <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                  setTextBoxReadOnlyValue(row, column)\n                                    \">\n                    {{\n                      setTextBoxReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      \n          </span>\n        </td>\n        <!-- Grid Rows Data Bindings End -->\n\n        <!-- Action column on Grid -->\n        <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n          class=\"for-buttons\"\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          class=\"for-buttons\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class='setActionColumnWidth'>\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer columns on Grid -->\n    <ng-template pTemplate=\"footer\">\n      <tr *ngIf=\"aggregateFooter\">\n        <td\n          *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [style]=\"outerColumn.style\">\n          <div *ngFor=\"let innerColumn of selectedColumns\">\n            <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n              <div\n                *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) ||\n                  aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n                <div [innerHTML]=\"aggr.aggrValue\">\n                </div>\n              </div>\n            </div>  \n          </div>\n        </td>\n        <td\n          *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer for Empty Message columns on Grid -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"grid-component no-records-found\">\n        <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n      </tr>\n    </ng-template>\n  </p-table>  \n  <p-overlayPanel\n  [style]=\"overlayPanelStyle\" #overlayPanel>\n    <ng-container #viewContainerRef></ng-container>\n  </p-overlayPanel>\n</div>", styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .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}:host ::ng-deep .p-datatable-resizable-table>.p-datatable-thead>tr>th{overflow:visible!important}:host ::ng-deep .p-multiselect .p-multiselect-trigger{top:6px}\n"] }]
+            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=\"global-filter-buttons-wrapper\">\n\n  <!-- button for apply value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n    [class]=\"\n  searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n  \"></button>\n\n  <!-- button for clear value on Grid -->\n  <button *ngIf=\"filtering && (!hideFilter || showFilterbtn)\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n    icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n      clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n      \" class='global-refresh global-btn'\n    ></button>\n\n  <!-- button for save all grid at once -->\n  <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n    icon=\"pi pi-check\" [label]=\"'Save'\"\n    [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'ui-button-info'\" type=\"button\"\n    (click)=\"saveAllRowsAtOnce()\"></button>\n\n  <!-- button for cancel all grid at once -->\n  <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n    icon=\"pi pi-times\" class=\"ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n  <!-- header Button for multiSelect on Grid -->\n  <span *ngIf=\"allowColumnToggle\">\n    <p-multiSelect [showToggleAll]=\"false\" [options]=\"columns\" [(ngModel)]=\"selectedColumns\" optionLabel=\"header\"\n      selectedItemsLabel=\"{0} columns selected\"  class=\"grid-component-multiselect-header-button\" placeholder=\"Choose Columns\">\n    </p-multiSelect>\n  </span>\n\n  <!-- header Button for Adding new Row on Grid -->\n  <button pButton *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\" type=\"button\" [label]=\"'Add'\" pAddRow\n    [table]=\"componentTableRef\" [newRow]=\"newGridRow\" [id]=\"dataKey\" pTooltip=\"Add New Row\" tooltipPosition=\"bottom\"\n    icon=\"pi pi-plus\" class=\"ui-button-info global-add-btn\" (click)=\"addNewRow(newGridRow, true)\" pRipple></button>\n\n    \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 mr-2 ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n\n  <!-- <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info mr-2 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  <ng-content></ng-content>\n\n  <ng-container  *ngFor=\"let reportButton of reportButtons\">\n    <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\" [icon]=\"reportButton.icon\" [class]=\"reportButton.class\"\n    [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n  </ng-container>\n\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    [resizableColumns]=\"true\" [autoLayout]=\"true\"\n     responsiveLayout=\"scroll\" columnResizeMode=\"expand\"\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]=\"tableStyle\"\n    [scrollHeight]=\"scrollHeight\"\n    editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n    [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n    <!-- [tableStyle]=\"'max-height: ' + scrollHeight + '; ' + tableStyle\" -->\n    <!-- [tableStyle]=\"{ 'max-height': scrollHeight }\" -->\n    <!-- header Button for Action on Grid -->\n    <!-- [scrollHeight]=\"'flex'\" -->\n\n    <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"flex justify-content-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 pResizableColumn *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-2\n                  table-header-inner-div div-last-inner-html-is-icon\">\n              <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n              <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n                (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n            </div>\n          </span>\n        </th>\n        <th pResizableColumn *ngIf=\"allowSelection && selectionType === 'single'\" \n              class=\"grid-component-selection\">\n          Select\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n          [style]=\"column.style\"\n          [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n          [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n          class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n          <span class=\"th-content-wrapper\">\n            <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\">        \n              <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n              <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n              <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n                [field]=\"column.field\"></p-sortIcon>\n            </div>\n        </span>\n        </th>\n        <th pResizableColumn\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 pResizableColumn *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n        <th pResizableColumn *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n        </th>\n        <th pResizableColumn *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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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                class=\"no-filter-icon\"\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]=\"column.field?.toLowerCase() + '_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 class=\"direct-wrapper-close-icon-lookup\">\n                      <button\n                        *ngIf=\"column.filterValue\"\n                        icon=\"pi pi-times\"\n                        pButton\n                        type=\"button\"\n                        (click)=\"lookupClearValue(column)\">\n                      </button>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-columnFilter>\n\n            <!-- checkbox on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" 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 class=\"no-filter-icon\" [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 || []\" \n                [appendTo]=\"'body'\" [name]=\"column.field\"\n                (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n                [optionValue]=\"column.optionValue\"\n                 [optionLabel]=\"column.optionLabel\"\n                  (blur)=\"setFilterFocusOut(column, filter, $event)\" \n                  (keydown)=\"backspaceEvent($event, column)\">\n                </p-multiSelect>\n              </ng-template>\n            </p-columnFilter>\n\n            <!-- dropdown on Header For Filter-->\n            <p-columnFilter class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 class=\"no-filter-icon\" [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 pResizableColumn\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 \n      [style]=\"rowStyle\"\n      [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n        [class]=\"wordWrap ? 'p-selectable-row wordWrapTrue' : 'wordWrapFalse p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n        [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n        <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n          <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n            (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n          <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n            (click)=\"multiCheckBoxOnclick(row, $event)\"></p-tableCheckbox>\n        </td>\n\n        <!-- first actions column -->\n        <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n          <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n            <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n          </span>\n        </td>\n        <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class=\"setActionColumnWidth\">\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n\n        <!-- Grid Rows Data Bindings Start -->\n        <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" [style]=\"column.style \" \n        (mouseenter)=\"(column.onHover && column.onHover.component) && addDynamicPanelOverlayComponent(column.onHover)&& overlayPanel.show($event)\"\n        (mouseleave)=\"(column.onHover && column.onHover.component)  && overlayPanel.hide()\"\n        >\n          <span class=\"td-content-wrapper\">\n\n          <!-- Boolean column on Grid -->\n          <span *ngSwitchCase=\"'boolean'\"\n          >\n        <td *ngIf=\"!editing\">\n          <p-checkbox \n          [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n            (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (blur)=\"onFocusOutEvent(column, row)\" \n            [(ngModel)]=\" \n              row[column.field] &&\n              (row[column.field].toString() === '1' ||\n                row[column.field].toString().toLowerCase() === 'true' ||\n                row[column.field].toString().toLowerCase() === 'y'||\n                ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                  ? Checked\n                  : unChecked\n                \">\n          </p-checkbox>\n        </td>\n        <td *ngIf=\"editing\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <!-- for edit checkBox -->\n              <p-checkbox (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n                [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(ngModel)]=\"\n                    row[column.field] &&   \n                    (row[column.field].toString() === '1' ||\n                      row[column.field].toString().toLowerCase() === 'true' ||\n                      row[column.field].toString().toLowerCase() === 'y' ||\n                      ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n                      row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n                      ? editModeChecked\n                      : editModeunCkecked\n                  \" (blur)=\"onFocusOutEvent(column, row)\"></p-checkbox>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ row[column.field] }}\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        </span>\n\n        <!-- link column on Grid -->\n        <span *ngSwitchCase=\"'link'\">\n          <!-- link column for HyperLink Case -->\n          <span *ngIf=\"column.allowSave === false\">\n            <span *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n              [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n            <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n        \n            </span>\n            <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n              [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n              [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n              <a  [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n                <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n                <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                  }}\n                </ng-template>\n              </a>\n\n            </span>\n          </span>\n          <!-- link column for Edit Case -->\n          <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n                  <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                  <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n                    [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (change)=\"onChangeEvent(column, row)\" />\n                </span>\n                <span *ngIf=\"column.editable === false\" >\n                <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n                  [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                  <ng-template #noIcon>\n                  {{\n                    row[column.field+'_obj']?.hideFieldValue?'':\n                    setConditionBaseValue(row, column)\n                    }}\n                </ng-template>\n                \n                  </a>\n                </span>\n                <span *ngIf=\"column.editLink === false\">\n                  <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\"\n                    [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disabled-link' : ''\">\n                    <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                    {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  \n                  </a>\n                </span>\n              </ng-template>\n              <ng-template pTemplate=\"output\">\n                <span  class=\"custom-link\"  [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n                  <a  (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n                >\n                    <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n                    <ng-template #noIcon>\n                  {{\n                      row[column.field+'_obj']?.hideFieldValue?'':\n                      setConditionBaseValue(row, column)\n                      }}\n                  </ng-template>\n                  </a>\n\n                </span>\n              </ng-template>\n            </p-cellEditor>\n          </span>\n        </span>\n\n        <!-- Iframe column on Grid -->\n        <span *ngSwitchCase=\"'iframe'\">\n          <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [title]=\"\n                row[column.field + '_obj'] &&\n                (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n                  ? row[column.field] : row[column.field + '_obj']?.displayText\n                  ? row[column.field + '_obj'].displayText\n                  : column.displayText\n                  ? column.displayText\n                  : row[column.field]\n\n              \"\n            >  \n            <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n            <ng-template #noIcon>\n            {{\n              row[column.field + '_obj'] &&\n              (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n              ? row[column.field] : row[column.field + '_obj']?.displayText\n              ? row[column.field + '_obj'].displayText\n              : column.displayText ? column.displayText : row[column.field]\n            }}\n            </ng-template>\n            </span>\n          </span>\n\n          <!-- dialog column on Grid -->\n          <span *ngSwitchCase=\"'dialog'\">\n            <p-cellEditor>\n              <ng-template pTemplate=\"input\">\n                <span\n                  *ngIf=\"column?.filter?.type !== 'calendar' && !row?.hidegridbtn\" \n                  [title]=\"setConditionBaseValue(row, column) \"\n                >\n                  <span *ngIf=\"column.editable === true && !row[column.field+'_obj']?.hideFieldValue\">\n                    <input\n                    readonly\n                      [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                      [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                      type=\"text\"\n                      pInputText\n                      (click)=\"selectLookupField(column, row)\"\n                      [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                      row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n                      row[column.field]\"\n                      [name]=\"row[column.field]\"\n                      [disabled]=\"allowDisabled(column,row)\"\n                      (blur)=\"onFocusOutEvent(column, row)\"\n                    />\n                    \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, $event)\">\n\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                  <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n                    }}</ng-template>\n\n\n                </span>\n              </span>\n              <span *ngIf=\"column?.filter?.type === 'calendar'\" [title]=\"\n                    row[column.field]\n                      | date: (column.format ? column.format : 'MM/dd/YY')\n                  \">\n                <p-calendar [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                  [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n                  [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n                  [timeOnly]=\"column.timeOnly\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n                    row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                  [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n              </span>\n            </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span class=\"custom-link\"\n                    [class]=\"row.disabled   || allowDisabled(column,row) ? 'disabled-link' : ''\"\n                    (click)=\"openGridDialog(column, row)\"\n                    [title]=\"setConditionBaseValue(row, column)\">\n                  <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n                    <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\n                <!-- {{ setConditionBaseValue(row, column) }}\n                   *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\" -->\n\n              </span>\n            </ng-template>\n          </p-cellEditor>\n        </span>\n\n        <!-- lookup Input column on Grid -->\n        <span *ngSwitchCase=\"'lookup_input'\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <div class=\"close-icon-wrapper\">\n                <input readonly type=\"text\" pInputText\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField  ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] :\n                  typeOf(row[column.field+'_obj']?.text) === 'object' && row[column.field+'_obj']?.text?.hasOwnProperty('text') ? row[column.field+'_obj']?.text?.text : \n                  column.displayField ? row[column.displayField?.toLowerCase()] : 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]=\"row[column.field.toLowerCase()+'_obj']?.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                row[column.field.toLowerCase()+'_obj']?.errorMessage\n                        ? 'ng-invalid ng-dirty'\n                        : 'form-control'\n                    \" [showButtons]=\"!column.format ? true : false\"\n                  [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n                  [disabled]=\"allowDisabled(column,row)\" (onFocus)=\"onFocusEvent(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 *ngSwitchCase=\"'add_button'\">\n          <div>\n            <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n              [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n              [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n              [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n              class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n          </div>\n        </span>        \n\n        <!-- Date column on Grid -->\n        <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\n          <p-cellEditor>\n            <ng-template pTemplate=\"input\">\n              <p-calendar\n                [class]=\"row[column.field.toLowerCase()+'_obj']?.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)=\"calendarInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n                [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n                [showButtonBar]=\"!column.timeOnly\"></p-calendar>\n            </ng-template>\n            <ng-template pTemplate=\"output\">\n              {{ setConditionBaseValue(row,column) }}\n            </ng-template>\n          </p-cellEditor>\n        </span>\n        <span *ngSwitchDefault>\n          <span [ngSwitch]=\"column.type\">\n            <!-- Dropdown column on Grid -->\n            <span *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n                setDropdwonReadOnlyValue(row, column)\n                \">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n                        row[column.field+'_data']\n                          ? row[column.field+'_data']\n                          : column.data\n                      \"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n                      ? row[column.displayField]\n                      : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n                    [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n                    [optionValue]=\"column.optionValue\" [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n                    (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"!row[column.field+'_obj']?.hidden\">\n                    {{\n                    setDropdwonReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n\n            <!-- MultiSelect column on Grid -->\n            <!-- [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n            row[column.field]\" -->\n            <span *ngSwitchCase=\"'multi-select'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"input\">\n                  <p-multiSelect [class]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n                    [(ngModel)]=\"row[column.field]\"\n                     [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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" \n                    [name]=\"column.header\"\n                    [suggestions]=\"column.data\" \n                    (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n                    [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n                    [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n                    typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n                    row[column.field]?.text :\n                    row[column.field]\"\n                    [dropdown]=\"column.showOption\" \n                    (ngModelChange)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickEvent(column, row)\" \n                    (completeMethod)=\"autoSearch($event, column, row)\"\n                    (onBlur)=\"onFocusOutEvent(column, row)\" \n                    [disabled]=\"allowDisabled(column,row)\" \n                    [multiple]=\"true\"\n                    (keydown.enter)=\"onAutoCompleteFocusOut($event, column, row)\">\n                  </p-autoComplete>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.displayField]\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n                    </span>\n                  </span>\n                  <span *ngIf=\"row[column.field] && row[column.field][0] &&  row[column.field][0][column.field] && !column.displayField\">\n                    <span *ngFor=\"let value of row[column.field]; let i = index\">\n                      {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ?\n                      value[column.field] : value[column.field] + ';' : value[column.field] }}\n                    </span>\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n            <!-- Add Generate Report Button -->\n            <span *ngSwitchCase=\"'report'\">\n              <p-cellEditor>\n                <ng-template pTemplate=\"output\">\n                  <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\" [class]=\"column.class\"\n                    [showDialog]=\"column.showDialog\" [icon]=\"column.icon\"></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\" [icon]=\"column.icon\" [class]=\"column.class\"\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]=\"row[column.field.toLowerCase()+'_obj']?.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n                    [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n                    [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : row[column.field]\"\n                    [disabled]=\"allowDisabled(column,row)\"\n                    (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n                    (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n                  <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n                      {{ row[column.field] }}\n                    </span></ng-template>\n                </ng-template>\n                <ng-template pTemplate=\"output\">\n                  <span (click)=\"onClickEvent(column, row)\" [title]=\"\n                  setTextBoxReadOnlyValue(row, column)\n                                    \">\n                    {{\n                      setTextBoxReadOnlyValue(row, column)\n                    }}\n                  </span>\n                </ng-template>\n              </p-cellEditor>\n            </span>\n          </span>\n        </span>\n      \n          </span>\n        </td>\n        <!-- Grid Rows Data Bindings End -->\n\n        <!-- Action column on Grid -->\n        <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\"\n          class=\"for-buttons\"\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          class=\"for-buttons\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n          <span class='setActionColumnWidth'>\n            <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n              [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n              [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n              (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n              [editAllRows]=\"editAllRows\">\n            </se-grid-row-actions>\n          </span>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer columns on Grid -->\n    <ng-template pTemplate=\"footer\">\n      <tr *ngIf=\"aggregateFooter\">\n        <td\n          *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n        <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\" [style]=\"outerColumn.style\">\n          <div *ngFor=\"let innerColumn of selectedColumns\">\n            <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n              <div\n                *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field?.toLowerCase() === outerColumn.field?.toLowerCase()) ||\n                  aggr.displayField && aggr.displayField?.toLowerCase() === outerColumn.field?.toLowerCase())\">\n                <div [innerHTML]=\"aggr.aggrValue\">\n                </div>\n              </div>\n            </div>  \n          </div>\n        </td>\n        <td\n          *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n          [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n          [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n      </tr>\n    </ng-template>\n\n    <!-- Footer for Empty Message columns on Grid -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"grid-component no-records-found\">\n        <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n      </tr>\n    </ng-template>\n  </p-table>  \n  <p-overlayPanel\n  [style]=\"overlayPanelStyle\" #overlayPanel>\n    <ng-container #viewContainerRef></ng-container>\n  </p-overlayPanel>\n</div>", styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .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}:host ::ng-deep .p-datatable-resizable-table>.p-datatable-thead>tr>th{overflow:visible!important}:host ::ng-deep .p-multiselect .p-multiselect-trigger{top:6px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: FormService }, { type: GridService }, { type: AlertService }, { type: AuthenticationService }, { type: i0.ElementRef }, { type: i2$1.DecimalPipe }, { type: PageLoggerService }, { type: HyperlinkService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i2$1.DatePipe }, { type: i10.ConfirmationService }, { type: i1.DynamicDialogConfig, decorators: [{
                     type: Optional
                 }] }, { type: i1.DynamicDialogRef, decorators: [{
@@ -8081,7 +8162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 type: Output
             }], allowCaching: [{
                 type: Input
-            }], showDefaultColumns: [{
+            }], alwaysHidden: [{
                 type: Input
             }], softCaching: [{
                 type: Input
@@ -11470,5 +11551,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertService, AuthenticationService, CaptionComponent, CardComponent, CardService, DropdownService, EAggregateFormat, EButtonClass, EDayRange, EFilterValidator, EFormControl, EFormatType, EGlobalFilterFormatType, EGridAggregate, EGridColumnType, EGridFormatType, EGridFormatter, EGridRowAction, EGridRowPropName, EGridSelectionType, EGridSortDirection, EGridValidator, EGridlink, EHeaderFormatType, EHyperlink, EMatchMode, EOperator, EPermissionType, ESelectFileType, ESideBar, ESidebarAction, ESystemConfig, EValidator, FileUploadComponent, FormComponent, FormService, GalleryComponent, GenerateReportBtnComponent, GridComponent, GridFilterControlType, GridRowActionsComponent, GridService, GridUpdateComponent, HeaderComponent, HeaderService, HyperlinkService, IGridServerSideEvent, IframeComponent, LoaderComponent, LoaderService, MenuBarComponent, PageLoggerService, ReportFilterComponent, ReportService, RequestService, SEToolkitModule, SeFilterComponent, SeGlobalFilterComponent, SideBarService, SidebarComponent, SystemConfigService, ToolkitDialogService, addNewFieldInForm, autoSetLookupData, calendarMinMaxValue, changeDynamicCardState, changeDynamicFormState, clickSectionHighlight, closeIFrame, currentUrl, disableEditRowColumn, draggableDialog, enabledEditRowColumn, fileComponent, findKeysAndValue, formatFormFieldValue, getFieldData, getFormField, getFormFieldValue, getFormFieldValueAsString, getFormFields, getGlobalFilters, getGridFilters, getMatchKey, getOrigDataFieldValue, getOrigDataFieldValueAsString, getResponseHeaderFileName, getSectionFieldValue, hasRole, highlightLeftSidebar, objConvertToLower, onDynamicCardStateChange, onDynamicFormStateChange, onRouteChangeEvent, removeActiveIconClass, routeChangeEvent, setAllFormFieldsValues, setAndFilter, setAutoCompleteData, setCardFieldsData, setDataFields, setDialogData, setDialogResponse, setEditFormFields, setFilter, setFormField, setFormFields, setGlobalFilterPropValues, setGridLookupData, setHyperlink, setHyperlinkComponentData, setHyperlinkParamValue, setLookupData, setMinutesInterval, setPropValue, setSaveCardValues, setSaveFormValues, setSectionPropValues, setSidebarLinkParamValues, setTimeInDate, setUpdatedRecord, toBoolean, toDecimal, toShortDate, toShortDateTime, toTrim, toasterModuleforRoot };
+export { AlertService, AuthenticationService, CaptionComponent, CardComponent, CardService, DropdownService, EAggregateFormat, EButtonClass, EDayRange, EFilterValidator, EFormControl, EFormatType, EGlobalFilterFormatType, EGridAggregate, EGridColumnType, EGridFormatType, EGridFormatter, EGridRowAction, EGridRowPropName, EGridSelectionType, EGridSortDirection, EGridValidator, EGridlink, EHeaderFormatType, EHyperlink, EMatchMode, EOperator, EPermissionType, ESelectFileType, ESideBar, ESidebarAction, ESystemConfig, EValidator, FileUploadComponent, FormComponent, FormService, GalleryComponent, GenerateReportBtnComponent, GridComponent, GridFilterControlType, GridRowActionsComponent, GridService, GridUpdateComponent, HeaderComponent, HeaderService, HyperlinkService, IGridServerSideEvent, IframeComponent, LoaderComponent, LoaderService, MenuBarComponent, PageLoggerService, ReportFilterComponent, ReportService, RequestService, SEToolkitModule, SeFilterComponent, SeGlobalFilterComponent, SideBarService, SidebarComponent, SystemConfigService, ToolkitDialogService, addNewFieldInForm, autoSetLookupData, calendarMinMaxValue, changeColumnsState, changeDynamicCardState, changeDynamicFormState, clickSectionHighlight, closeIFrame, currentUrl, disableEditRowColumn, draggableDialog, enabledEditRowColumn, fileComponent, findKeysAndValue, formatFormFieldValue, getFieldData, getFormField, getFormFieldValue, getFormFieldValueAsString, getFormFields, getGlobalFilters, getGridFilters, getMatchKey, getOrigDataFieldValue, getOrigDataFieldValueAsString, getResponseHeaderFileName, getSectionFieldValue, hasRole, highlightLeftSidebar, objConvertToLower, onColumnsStateChange, onDynamicCardStateChange, onDynamicFormStateChange, onRouteChangeEvent, removeActiveIconClass, routeChangeEvent, setAllFormFieldsValues, setAndFilter, setAutoCompleteData, setCardFieldsData, setDataFields, setDialogData, setDialogResponse, setEditFormFields, setFilter, setFormField, setFormFields, setGlobalFilterPropValues, setGridLookupData, setHyperlink, setHyperlinkComponentData, setHyperlinkParamValue, setLookupData, setMinutesInterval, setPropValue, setSaveCardValues, setSaveFormValues, setSectionPropValues, setSidebarLinkParamValues, setTimeInDate, setUpdatedRecord, toBoolean, toDecimal, toShortDate, toShortDateTime, toTrim, toasterModuleforRoot };
 //# sourceMappingURL=churchillliving-se-ui-toolkit.mjs.map