@progress-chef/platform-shared-components 0.0.96 → 0.0.97

package/fesm2022/progress-chef-platform-shared-components.mjs

@@ -552,6 +552,12 @@ class ButtonComponent {
     }
     button_size() {
         let classStr = this.projectedIcon ? 'projected-icon ' : '';
+        if (this.size === 'small') {
+            this.fontType = 'BUTTON_SMALL';
+        }
+        if (this.size === 'medium') {
+            this.fontType = 'BUTTON_REGULAR';
+        }
         return classStr + 'btn-padding';
     }
     toTitleCase(str) {
@@ -4727,6 +4733,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class GridPaginationSpacerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer", ngImport: i0, template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i5.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-pagination-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
+        }] });
+
 class KebabMenuFilterPipe {
     transform(menu, ...args) {
         const dataItem = args[0];
@@ -4771,10 +4786,16 @@ const createFormGroup = (dataItem) => {
     return form;
 };
 class GridPaginationComponent {
+    set preSelected(value) {
+        this._preSelected = value;
+        this.initGrid();
+    }
+    set gridView(value) {
+        this._gridView = value;
+    }
     constructor(cdRef, renderer) {
         this.cdRef = cdRef;
         this.renderer = renderer;
-        this.gridView = { data: [], total: 0 };
         this.skip = 0;
         this.itemName = 'Items';
         this.showSelectAllMessage = false;
@@ -4813,7 +4834,8 @@ class GridPaginationComponent {
         this.data = [];
         this.selectColumn = '';
         this.rowDataOfClickedCell = new EventEmitter();
-        this.preSelected = [];
+        this._preSelected = [];
+        this._gridView = { data: [], total: 0 };
         this.preSelectedRecords = [];
         this.onPageChange = new EventEmitter();
         this.ignoreColumnCellClick = [];
@@ -4844,12 +4866,41 @@ class GridPaginationComponent {
         this.gridBottomSpace = 24;
         this.resizeHeight = 0;
         this.selectAllState = 'unchecked';
+        this.selectedItemCount = 0;
         this.selectedRows = [];
         this.disablePreSelectedRows = false;
         this.updatedData = new EventEmitter();
         this.allowEditingCell = false;
         this.columnContentNoWrap = false;
+        this.infiniteScrollLoader = false;
+        this.onscrollBottom = new EventEmitter();
+        this.isInfiniteScrollGrid = false;
+        this.gridLoading = false;
         this.columnTemplateDict = {};
+        /*
+         * This logic of dynamically calculating the height of grid need further brainstorming hence commented for now.
+         */
+        // getGridHeight() {
+        //   const windowHeight = window.innerHeight;
+        //   const viewport: any = document.getElementById('lib-grid');
+        //   const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
+        //   const gridHeight =
+        //     this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace; //grid should have 24px space at bottom
+        //   if (gridOffset + gridHeight >= windowHeight) {
+        //     this.height = windowHeight - (gridOffset + this.gridBottomSpace);
+        //   }
+        // }
+        // @HostListener('window:resize', ['$event'])
+        // resize(ev: any) {
+        //   if (ev.target.innerHeight > this.resizeHeight) {
+        //     this.resizeHeight = ev.target.innerHeight;
+        //     this.height = '100%';
+        //   }
+        //   if (this.resizeHeight > window.innerHeight) {
+        //     this.resizeHeight = 0;
+        //   }
+        //   this.getGridHeight();
+        // }
         this.rowClass = (args) => {
             if (this.selectedRows && this.disablePreSelectedRows) {
                 return {
@@ -4871,21 +4922,41 @@ class GridPaginationComponent {
             this.loadGridData();
         }
     }
+    scrollBottom() {
+        this.onscrollBottom.emit();
+    }
+    getPosition() {
+        if (this.showToolbar && this.infiniteScrollLoader) {
+            return 'both';
+        }
+        else if (this.showToolbar) {
+            return 'top';
+        }
+        else if (this.infiniteScrollLoader) {
+            return 'bottom';
+        }
+        else {
+            return;
+        }
+    }
     ngAfterContentInit() {
         if (!this.pageable) {
-            this.pageSize = this.gridView.data?.length;
+            this.pageSize = this._gridView.data?.length;
         }
         this.columnTemplates.forEach(x => this.columnTemplateDict[x.type] = x.template);
     }
     ngAfterViewInit() {
+        this.initGrid();
+    }
+    initGrid() {
         if (this.customExpandRowColumn) {
             this.expandRowIndex.forEach((id) => {
                 this.grid.expandRow(id);
             });
         }
-        this.selectedRows = this.preSelected;
+        this.selectedRows = this._preSelected;
         if (this.selectedRows?.length > 0) {
-            if (this.selectedRows?.length == this.gridView.total) {
+            if (this.selectedRows?.length == this._gridView.total) {
                 this.selectAllState = 'checked';
             }
             else {
@@ -4895,12 +4966,20 @@ class GridPaginationComponent {
         else {
             this.selectAllState = 'unchecked';
         }
-        this.initialGridHeight =
-            this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace;
-        // this.getGridHeight();
-        const gridContainer = this.gridElement?.nativeElement?.getElementsByClassName('k-grid-container')[0];
-        this.renderer.insertBefore(gridContainer.parentElement, this.selectAllMessageElement.nativeElement, gridContainer, true);
-        this.cdRef.detectChanges();
+        if (this.gridElement) {
+            this.initialGridHeight =
+                this.gridElement?.nativeElement?.offsetHeight + this.gridBottomSpace;
+            // this.getGridHeight();
+            const gridContainer = this.gridElement?.nativeElement?.getElementsByClassName('k-grid-container')[0];
+            if (gridContainer && this.selectAllMessageElement?.nativeElement) {
+                this.renderer.insertBefore(gridContainer.parentElement, this.selectAllMessageElement?.nativeElement, gridContainer, true);
+            }
+            const selectAllCheckbox = this.gridElement?.nativeElement?.querySelector('.select-all-header input');
+            if (selectAllCheckbox) {
+                this.renderer.setProperty(selectAllCheckbox, 'disabled', this.canEnableSelectAll());
+            }
+            this.cdRef.detectChanges();
+        }
     }
     selectAcrossPages(isSelected) {
         this.triggerSelectAllPagesEvent(isSelected);
@@ -4911,20 +4990,22 @@ class GridPaginationComponent {
     triggerSelectAllPagesEvent(isSelected) {
         this.allPagesSelected = isSelected;
         this.onSelectAllAcrossPages.emit(isSelected);
+        this.selectedItemCount = isSelected ? this._gridView.total : 0;
         console.log('triggerSelectAllPagesEvent : isSelected', isSelected);
     }
     addSelectAllMessage(selectAll) {
-        if (this.showSelectAllMessage && this.pageCount > 1) {
-            const elementResult = this.selectAllMessageElement.nativeElement.parentElement;
+        const elementResult = this.selectAllMessageElement?.nativeElement?.parentElement;
+        if (this.showSelectAllMessage && elementResult && (this.pageCount > 1 || this.isInfiniteScrollGrid)) {
+            const selectAllMsgElement = this.selectAllMessageElement?.nativeElement?.querySelector('.lib-grid-select-all-message-container');
             if (selectAll) {
                 this.savedHeight = elementResult.offsetHeight;
                 const beforeHeight = elementResult.offsetHeight;
-                this.selectAllMessageElement.nativeElement.classList.add('lib-grid-select-all-message-show');
+                selectAllMsgElement?.classList.add('lib-grid-select-all-message-show');
                 const afterHeight = elementResult.offsetHeight;
                 elementResult.style.height = (elementResult.offsetHeight - (afterHeight - beforeHeight)) + 'px';
             }
             else {
-                this.selectAllMessageElement.nativeElement.classList.remove('lib-grid-select-all-message-show');
+                selectAllMsgElement?.classList.remove('lib-grid-select-all-message-show');
                 if (this.allPagesSelected) {
                     this.triggerSelectAllPagesEvent(false);
                 }
@@ -4966,7 +5047,17 @@ class GridPaginationComponent {
             rows = this.selectedRows;
         }
         this.previousSelectAllState = this.selectAllState;
-        if (selectedRowsCount == this.gridView.total) {
+        this.selectAllState = this.getSelectAllState(selectedRowsCount);
+        if (this.selectAllState === 'unchecked' || this.selectAllState === 'indeterminate') {
+            this.addSelectAllMessage(false);
+        }
+        selectedRowData = rows.map(rowData => {
+            return this._gridView.data.find((data) => data[this.gridRowSelectByValue] === rowData);
+        });
+        this.selectedRowData.emit(selectedRowData);
+    }
+    getSelectAllState(selectedRowsCount) {
+        if (selectedRowsCount == this._gridView.total) {
             this.selectAllState = 'checked';
         }
         else if (selectedRowsCount == 0) {
@@ -4977,10 +5068,6 @@ class GridPaginationComponent {
             this.selectAllState = 'indeterminate';
             this.addSelectAllMessage(false);
         }
-        selectedRowData = rows.map(rowData => {
-            return this.gridView.data.find((data) => data[this.gridRowSelectByValue] === rowData);
-        });
-        this.selectedRowData.emit(selectedRowData);
     }
     onKebabClick(item, rowDetails) {
         this.kebabItemClick.emit({ action: item, rowDetails });
@@ -5008,9 +5095,9 @@ class GridPaginationComponent {
         this.sortDirection.emit(this.sort);
     }
     loadGridData() {
-        this.gridView = {
+        this._gridView = {
             data: orderBy(this.gridView?.data, this.sort),
-            total: this.gridView?.total,
+            total: this._gridView?.total,
         };
     }
     expandRow(id) {
@@ -5023,16 +5110,16 @@ class GridPaginationComponent {
     collapseRow(id) {
         this.grid.collapseRow(id);
         this.expandRowIndex.splice(this.expandRowIndex.indexOf(id), 1);
-        if (this.expandRowIndex?.length == 0) {
-            const windowHeight = window.innerHeight;
-            const viewport = document.getElementById('lib-grid');
-            const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
-            if (windowHeight > gridOffset + this.initialGridHeight) {
-                this.height = '100%';
-                return;
-            }
-            // this.getGridHeight();
-        }
+        // if (this.expandRowIndex?.length == 0) {
+        //   const windowHeight = window.innerHeight;
+        //   const viewport: any = document.getElementById('lib-grid');
+        //   const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
+        //   if (windowHeight > gridOffset + this.initialGridHeight) {
+        //     this.height = '100%';
+        //     return;
+        //   }
+        //   // this.getGridHeight();
+        // }
     }
     onDelete(rowDetails) {
         setTimeout(() => {
@@ -5041,34 +5128,11 @@ class GridPaginationComponent {
         this.deletedRowData.emit(rowDetails);
     }
     getHeaderHeight() {
-        if (this.gridView?.data?.length === 0) {
+        if (this._gridView?.data?.length === 0) {
             return 'hide-header';
         }
         return 'view-header';
     }
-    /*
-    * This logic of dynamically calculating the height of grid need further brainstorming hence commented for now.
-    */
-    // getGridHeight() {
-    //   const windowHeight = window.innerHeight;
-    //   const viewport: any = document.getElementById('lib-grid');
-    //   const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
-    //   const gridHeight =
-    //     this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace; //grid should have 24px space at bottom
-    //   if (gridOffset + gridHeight >= windowHeight) {
-    //     this.height = windowHeight - (gridOffset + this.gridBottomSpace);
-    //   }
-    // }
-    resize(ev) {
-        if (ev.target.innerHeight > this.resizeHeight) {
-            this.resizeHeight = ev.target.innerHeight;
-            this.height = '100%';
-        }
-        if (this.resizeHeight > window.innerHeight) {
-            this.resizeHeight = 0;
-        }
-        // this.getGridHeight();
-    }
     expandColumnClass() {
         if (this.selectedRows?.length > 0 && this.disablePreSelectedRows) {
             this.expandRowColumnWidth = 194;
@@ -5078,24 +5142,29 @@ class GridPaginationComponent {
         return '';
     }
     onSelectAllChange(checkedState) {
-        if (checkedState === 'checked' ||
-            (this.selectedRows?.length == this.gridView.total &&
-                this.disablePreSelectedRows)) {
-            this.preSelected = this.gridView.data
+        if (checkedState === 'checked') {
+            this._preSelected = this._gridView.data
                 .map((item) => item[this.gridRowSelectByValue])
                 .filter((id) => id);
             this.selectAllState = 'checked';
+            this.selectedItemCount = this._gridView.data.length;
         }
         else if (this.selectedRows?.length > 0 && this.disablePreSelectedRows) {
-            this.preSelected = this.selectedRows;
+            this._preSelected = this.selectedRows;
             this.selectAllState = 'indeterminate';
+            this.selectedItemCount = 0;
         }
         else {
-            this.preSelected = [];
+            this._preSelected = [];
             this.selectAllState = 'unchecked';
+            this.selectedItemCount = 0;
         }
         this.addSelectAllMessage(this.selectAllState === 'checked');
     }
+    canEnableSelectAll() {
+        return (this.selectedRows?.length == this._gridView.total &&
+            this.disablePreSelectedRows);
+    }
     cellCloseHandler(args) {
         let { formGroup, dataItem } = args;
         if (!formGroup.valid) {
@@ -5115,11 +5184,11 @@ class GridPaginationComponent {
         this.grid.cancelCell();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { gridView: "gridView", skip: "skip", itemName: "itemName", showSelectAllMessage: "showSelectAllMessage", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData" }, host: { listeners: { "window:resize": "resize($event)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\" [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement class=\"lib-grid-select-all-message-container\">\n      <div *ngIf=\"!allPagesSelected\" class=\"lib-grid-select-all-message\">\n        <lib-typography [defaultText]=\"'All '+gridView.data.length+' '+itemName+' on this page are selected.'\"\n          type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n            [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\"\n            type=\"BODY_SMALL\"></lib-typography></u>\n      </div>\n      <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n        <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n        <lib-typography [defaultText]=\"'All '+gridView.total+' '+itemName+' across all pages are selected.'\"\n          type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n            [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n      </div>\n    </div>\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { skip: "skip", itemName: "itemName", showSelectAllMessage: "showSelectAllMessage", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridHeight: "gridHeight", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", gridView: "gridView", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap", infiniteScrollLoader: "infiniteScrollLoader", isInfiniteScrollGrid: "isInfiniteScrollGrid", gridLoading: "gridLoading" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData", onscrollBottom: "onscrollBottom" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"gridHeight\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n    id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement>\n      <div class=\"lib-grid-select-all-message-container\" *ngIf=\"(selectedItemCount < _gridView.total)\">\n        <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n          <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n              [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n              type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n        <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n          <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n          <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n              [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n      </div>\n    </div>\n    <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n      <ng-content *ngIf=\"showToolbar && position === 'top'\"></ng-content>\n      <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n      <lib-loader *ngIf=\"infiniteScrollLoader && position === 'bottom'\" [type]=\"loaderType\" [size]=\"loaderSize\"\n        [themeColor]=\"loaderTheme\"></lib-loader>\n      <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n    </ng-template>\n\n    <ng-template kendoGridLoadingTemplate>\n      <div class=\"k-loading-color\"></div>\n        <div class=\"loading-container\">\n          <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n        </div>\n    </ng-template>\n\n    <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n    <ng-container *ngIf=\"this._gridView.total > 0\">\n      <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.LoadingTemplateDirective, selector: "[kendoGridLoadingTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "component", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer" }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\" [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement class=\"lib-grid-select-all-message-container\">\n      <div *ngIf=\"!allPagesSelected\" class=\"lib-grid-select-all-message\">\n        <lib-typography [defaultText]=\"'All '+gridView.data.length+' '+itemName+' on this page are selected.'\"\n          type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n            [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\"\n            type=\"BODY_SMALL\"></lib-typography></u>\n      </div>\n      <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n        <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n        <lib-typography [defaultText]=\"'All '+gridView.total+' '+itemName+' across all pages are selected.'\"\n          type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n            [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n      </div>\n    </div>\n    <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n\n    <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n\n    <ng-container *ngIf=\"this.gridView.total > 0\">\n      <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"] }]
+            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n    [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"gridHeight\"\n    (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n    id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement>\n      <div class=\"lib-grid-select-all-message-container\" *ngIf=\"(selectedItemCount < _gridView.total)\">\n        <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n          <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n              [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n              type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n        <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n          <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n          <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n              [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n      </div>\n    </div>\n    <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n      <ng-content *ngIf=\"showToolbar && position === 'top'\"></ng-content>\n      <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n      <lib-loader *ngIf=\"infiniteScrollLoader && position === 'bottom'\" [type]=\"loaderType\" [size]=\"loaderSize\"\n        [themeColor]=\"loaderTheme\"></lib-loader>\n      <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n    </ng-template>\n\n    <ng-template kendoGridLoadingTemplate>\n      <div class=\"k-loading-color\"></div>\n        <div class=\"loading-container\">\n          <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n        </div>\n    </ng-template>\n\n    <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n    <ng-container *ngIf=\"this._gridView.total > 0\">\n      <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n        [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <ng-template kendoGridDetailTemplate let-dataItem>\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\n      </ng-template>\n    </kendo-grid-column>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { columnTemplates: [{
                 type: ContentChildren,
                 args: [CustomColumnTemplate]
@@ -5138,11 +5207,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], gridElement: [{
                 type: ViewChild,
                 args: ['gridElement']
+            }], selectAllCheckbox: [{
+                type: ViewChild,
+                args: ['selectAllCheckbox']
             }], selectAllMessageElement: [{
                 type: ViewChild,
                 args: ['selectAllMessageElement']
-            }], gridView: [{
-                type: Input
             }], skip: [{
                 type: Input
             }], itemName: [{
@@ -5185,6 +5255,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], navigable: [{
                 type: Input
+            }], gridHeight: [{
+                type: Input
             }], gridRowSelectByValue: [{
                 type: Input
             }], noRecordsContent: [{
@@ -5211,6 +5283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], preSelected: [{
                 type: Input
+            }], gridView: [{
+                type: Input
             }], onPageChange: [{
                 type: Output
             }], ignoreColumnCellClick: [{
@@ -5255,20 +5329,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columnContentNoWrap: [{
                 type: Input
-            }], resize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
+            }], infiniteScrollLoader: [{
+                type: Input
+            }], onscrollBottom: [{
+                type: Output
+            }], isInfiniteScrollGrid: [{
+                type: Input
+            }], gridLoading: [{
+                type: Input
             }] } });
 
-class GridPaginationSpacerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer", ngImport: i0, template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i5.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-grid-pagination-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
-        }] });
-
 class GridPaginationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, declarations: [GridPaginationComponent,