@progress-chef/platform-shared-components 0.0.6 → 0.0.7

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

@@ -36,7 +36,7 @@ import * as i2$5 from '@progress/kendo-angular-tooltip';
 import { TooltipsModule } from '@progress/kendo-angular-tooltip';
 import * as i2$6 from '@progress/kendo-angular-dialog';
 import { DialogsModule, DialogModule as DialogModule$1 } from '@progress/kendo-angular-dialog';
-import * as i4$1 from '@progress/kendo-angular-grid';
+import * as i5 from '@progress/kendo-angular-grid';
 import { GridComponent, GridModule } from '@progress/kendo-angular-grid';
 import { orderBy } from '@progress/kendo-data-query';
 
@@ -3151,7 +3151,7 @@ class LibGridComponent {
         this.deletedRowData.emit(rowDetails);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LibGridComponent, selector: "lib-grid", inputs: { gridData: "gridData", 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", height: "height", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", expandRowColumnWidth: "expandRowColumnWidth", expandRows: "expandRows", showDeleteColumn: "showDeleteColumn" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", deletedRowData: "deletedRowData" }, 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 }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" [pageSize]=\"pageSize\" [selectable]=\"selectableSettings\" [pageable]=\"pageable\"\n  [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\" [resizable]=\"resizable\"\n  [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" (change)=\"setSelectableSettings()\"\n  (selectionChange)=\"onSelectionChange($event)\" [kendoGridSelectBy]=\"gridRowSelectByValue\"\n  (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\" (cellClick)=\"cellClickHandler($event)\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridData.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"gridData.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" class=\"grid-column\">\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\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n          <kendo-button [svgIcon]=\"deleteIcon\" title=\"delete\" fillMode=\"clear\" (click)=\"onDelete(dataItem)\"\n            class=\"trash-icon\"></kendo-button>\n          <div class=\"tooltip-content\">\n            <p>Remove</p>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton [svgIcon]=\"icon\" fillMode=\"clear\" [data]=\"kebabList\" class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\"\n          [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\"></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\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n</kendo-grid>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-menu-group .k-item.k-focus>.k-link{box-shadow:none}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:left;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep .k-column-title{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid .k-hierarchy-cell{width:0;display:none}::ng-deep .k-grid th.k-header{border-width:0}::ng-deep .kebab-column,::ng-deep .delete-column,::ng-deep .grid-column,::ng-deep .checkbox-column{border-left:hidden!important}::ng-deep .checkbox-column{padding:.75rem 0rem .5rem 1rem!important}::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px 8px 8px 16px}::ng-deep .k-grid th.k-header input.k-checkbox{margin-left:.5rem}::ng-deep .arrow-btn{padding:.5rem!important}::ng-deep .trash-icon path{color:#dc267f!important}::ng-deep kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .delete-column{padding:8px 0}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ 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: i4$1.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: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i4$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LibGridComponent, selector: "lib-grid", inputs: { gridData: "gridData", 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", height: "height", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", expandRowColumnWidth: "expandRowColumnWidth", expandRows: "expandRows", showDeleteColumn: "showDeleteColumn" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", deletedRowData: "deletedRowData" }, 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 }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" [pageSize]=\"pageSize\" [selectable]=\"selectableSettings\" [pageable]=\"pageable\"\n  [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\" [resizable]=\"resizable\"\n  [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" (change)=\"setSelectableSettings()\"\n  (selectionChange)=\"onSelectionChange($event)\" [kendoGridSelectBy]=\"gridRowSelectByValue\"\n  (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\" (cellClick)=\"cellClickHandler($event)\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridData.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"gridData.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" class=\"grid-column\">\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\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n          <kendo-button [svgIcon]=\"deleteIcon\" title=\"delete\" fillMode=\"clear\" (click)=\"onDelete(dataItem)\"\n            class=\"trash-icon\"></kendo-button>\n          <div class=\"tooltip-content\">\n            <p>Remove</p>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton [svgIcon]=\"icon\" fillMode=\"clear\" [data]=\"kebabList\" class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\"\n          [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\"></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\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n</kendo-grid>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-menu-group .k-item.k-focus>.k-link{box-shadow:none}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:left;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep .k-column-title{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid .k-hierarchy-cell{width:0;display:none}::ng-deep .k-grid th.k-header{border-width:0}::ng-deep .kebab-column,::ng-deep .delete-column,::ng-deep .grid-column,::ng-deep .checkbox-column{border-left:hidden!important}::ng-deep .checkbox-column{padding:.75rem 0rem .5rem 1rem!important}::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px 8px 8px 16px}::ng-deep .k-grid th.k-header input.k-checkbox{margin-left:.5rem}::ng-deep .arrow-btn{padding:.5rem!important}::ng-deep .trash-icon path{color:#dc267f!important}::ng-deep kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .delete-column{padding:8px 0}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ 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: 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.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { 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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibGridComponent, decorators: [{
             type: Component,
@@ -3255,7 +3255,7 @@ class GridSpacerComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridSpacerComponent, selector: "lib-grid-spacer", ngImport: i0, template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i4$1.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridSpacerComponent, selector: "lib-grid-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: GridSpacerComponent, decorators: [{
             type: Component,
@@ -3333,7 +3333,7 @@ class GridFormComponent {
         this.formGroup = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridFormComponent, selector: "lib-grid-form", inputs: { showToolbar: "showToolbar", noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ 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: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i3$3.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: i4$1.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: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4$1.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i4$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4$1.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "component", type: i4$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i4$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i4$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i4$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i4$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { 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: GridSpacerComponent, selector: "lib-grid-spacer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridFormComponent, selector: "lib-grid-form", inputs: { showToolbar: "showToolbar", noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ 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: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i3$3.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { 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.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i5.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i5.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "component", type: i5.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i5.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i5.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i5.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i5.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { 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: GridSpacerComponent, selector: "lib-grid-spacer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, decorators: [{
             type: Component,
@@ -3491,10 +3491,12 @@ class GridPaginationComponent {
         this.hideKebabRowIndex = [];
         this.gridBottomSpace = 24;
         this.resizeHeight = 0;
+        this.selectAllState = 'unchecked';
+        this.selectedRows = [];
         this.rowClass = (args) => {
             if (this.preSelected) {
                 return {
-                    'k-disabled': this.preSelected.includes(args.dataItem[this.gridRowSelectByValue]),
+                    'k-disabled': this.selectedRows.includes(args.dataItem[this.gridRowSelectByValue]),
                 };
             }
             return '';
@@ -3502,6 +3504,7 @@ class GridPaginationComponent {
         this.setSelectableSettings();
     }
     ngOnInit() {
+        this.selectedRows = this.preSelected;
         for (let column of this.columnData) {
             column.sortable = column.sortable == undefined ? true : column.sortable;
         }
@@ -3574,6 +3577,18 @@ class GridPaginationComponent {
       console.log(this.extractDataItems)
       this.selectedRowData.emit(this.extractDataItems);
     } */
+    selectedKeysChange(rows) {
+        const selectedRowsCount = rows.length;
+        if (selectedRowsCount == this.gridView.total) {
+            this.selectAllState = 'checked';
+        }
+        else if (selectedRowsCount == 0) {
+            this.selectAllState = 'unchecked';
+        }
+        else {
+            this.selectAllState = 'indeterminate';
+        }
+    }
     onSelectionChange(args) {
         for (let row = 0; row < args.selectedRows.length; row++) {
             var found = false;
@@ -3651,7 +3666,7 @@ class GridPaginationComponent {
             const windowHeight = window.innerHeight;
             const viewport = document.getElementById('lib-grid');
             const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
-            if (windowHeight > (gridOffset + this.initialGridHeight)) {
+            if (windowHeight > gridOffset + this.initialGridHeight) {
                 this.height = '100%';
                 return;
             }
@@ -3697,12 +3712,28 @@ class GridPaginationComponent {
         this.expandRowColumnWidth = 56;
         return '';
     }
+    onSelectAllChange(checkedState) {
+        if (checkedState === 'checked') {
+            this.preSelected = this.gridView.data
+                .map((item) => item[this.gridRowSelectByValue])
+                .filter((id) => id);
+            this.selectAllState = 'checked';
+        }
+        else if (this.selectedRows.length > 0) {
+            this.preSelected = this.selectedRows;
+            this.selectAllState = 'indeterminate';
+        }
+        else {
+            this.preSelected = [];
+            this.selectAllState = 'unchecked';
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, deps: [], 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", 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" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData" }, 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 }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\" >\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()\" (selectionChange)=\"onSelectionChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\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\">\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.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\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [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=\"preSelected.includes(dataItem[gridRowSelectByValue])\" class=\"expand-column-text\">\n          Already added\n        </span>\n        <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n          fillMode=\"none\" class=\"arrow-btn\">\n        </kendo-button>\n        <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n          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    <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  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::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:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::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{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-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left: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}\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", "fontSize", "type"] }, { kind: "component", type: i4$1.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: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i4$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4$1.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i4$1.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i4$1.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i4$1.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i4$1.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i4$1.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i4$1.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: "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: { gridView: "gridView", skip: "skip", 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" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData" }, 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 }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\" >\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()\" (selectionChange)=\"onSelectionChange($event)\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 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 [state]=\"selectAllState\"\n          (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\">\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.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\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [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])\" class=\"expand-column-text\">\n          Already added\n        </span>\n        <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n          fillMode=\"none\" class=\"arrow-btn\">\n        </kendo-button>\n        <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n          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    <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  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::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:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::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{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-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left: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}\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", "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: "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)\" >\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()\" (selectionChange)=\"onSelectionChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\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\">\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.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\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [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=\"preSelected.includes(dataItem[gridRowSelectByValue])\" class=\"expand-column-text\">\n          Already added\n        </span>\n        <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n          fillMode=\"none\" class=\"arrow-btn\">\n        </kendo-button>\n        <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n          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    <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  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::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:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::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{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-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left: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}\n"] }]
+            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\" >\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()\" (selectionChange)=\"onSelectionChange($event)\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 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 [state]=\"selectAllState\"\n          (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\">\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.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\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [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])\" class=\"expand-column-text\">\n          Already added\n        </span>\n        <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n          fillMode=\"none\" class=\"arrow-btn\">\n        </kendo-button>\n        <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n          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    <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  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::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:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::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{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-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left: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}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { templateRef: [{
                 type: ContentChild,
                 args: ['multiColumnData']
@@ -3820,7 +3851,7 @@ class GridPaginationSpacerComponent {
     ngOnInit() {
     }
     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: i4$1.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
+    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,