@progress-chef/platform-shared-components 0.0.63 → 0.0.64

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

@@ -916,11 +916,11 @@ class DropdownComponent {
         this.modelChange.emit(ev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { id: "id", label: "label", data: "data", isDisabled: "isDisabled", clearButton: "clearButton", fillMode: "fillMode", filterable: "filterable", placeholder: "placeholder", itemDisabled: "itemDisabled", useAsComboBox: "useAsComboBox", selectedItem: "selectedItem", readonly: "readonly", rounded: "rounded", size: "size", suggest: "suggest", textField: "textField", value: "value", valueField: "valueField", valuePrimitive: "valuePrimitive", model: "model", control: "control", fontType: "fontType", focus: "focus", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", width: "width" }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: ["comboBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox *ngIf=\"_useAsComboBox\" #comboBox [id]=\"id\" [data]=\"data\" [style.width]=\"width\" [clearButton]=\"clearButton\" fillMode=\"outline\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [rounded]=\"rounded\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n  </kendo-combobox>\n  <kendo-dropdownlist *ngIf=\"!_useAsComboBox\"\n        [data]=\"data\"\n        [textField]=\"textField\"\n        [valueField]=\"valueField\"\n        [(ngModel)]=\"model\"\n        (selectionChange)=\"emitModelChange($event)\"\n        [itemDisabled]=\"_itemDisabled\"\n        [style.width]=\"width\"\n        [valuePrimitive]=\"valuePrimitive\"\n        [rounded]=\"rounded\"\n        [size]=\"size\"\n      >\n  </kendo-dropdownlist>\n</span>\n  \n", styles: [".checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i3$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i3$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "component", type: i3$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i3$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { id: "id", label: "label", data: "data", isDisabled: "isDisabled", clearButton: "clearButton", fillMode: "fillMode", filterable: "filterable", placeholder: "placeholder", itemDisabled: "itemDisabled", useAsComboBox: "useAsComboBox", selectedItem: "selectedItem", readonly: "readonly", rounded: "rounded", size: "size", suggest: "suggest", textField: "textField", value: "value", valueField: "valueField", valuePrimitive: "valuePrimitive", model: "model", control: "control", fontType: "fontType", focus: "focus", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", width: "width" }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: ["comboBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox *ngIf=\"_useAsComboBox\" #comboBox [id]=\"id\" [data]=\"data\" [style.width]=\"width\" [clearButton]=\"clearButton\" fillMode=\"outline\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" rounded=\"small\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n  </kendo-combobox>\n  <kendo-dropdownlist *ngIf=\"!_useAsComboBox\"\n        [data]=\"data\"\n        [textField]=\"textField\"\n        [valueField]=\"valueField\"\n        [(ngModel)]=\"model\"\n        (selectionChange)=\"emitModelChange($event)\"\n        [itemDisabled]=\"_itemDisabled\"\n        [style.width]=\"width\"\n        [valuePrimitive]=\"valuePrimitive\"\n        [rounded]=\"rounded\"\n        [size]=\"size\"\n      >\n  </kendo-dropdownlist>\n</span>\n  \n", styles: [".checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i3$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i3$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "component", type: i3$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i3$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dropdown', template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox *ngIf=\"_useAsComboBox\" #comboBox [id]=\"id\" [data]=\"data\" [style.width]=\"width\" [clearButton]=\"clearButton\" fillMode=\"outline\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [rounded]=\"rounded\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n  </kendo-combobox>\n  <kendo-dropdownlist *ngIf=\"!_useAsComboBox\"\n        [data]=\"data\"\n        [textField]=\"textField\"\n        [valueField]=\"valueField\"\n        [(ngModel)]=\"model\"\n        (selectionChange)=\"emitModelChange($event)\"\n        [itemDisabled]=\"_itemDisabled\"\n        [style.width]=\"width\"\n        [valuePrimitive]=\"valuePrimitive\"\n        [rounded]=\"rounded\"\n        [size]=\"size\"\n      >\n  </kendo-dropdownlist>\n</span>\n  \n", styles: [".checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"] }]
+            args: [{ selector: 'lib-dropdown', template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox *ngIf=\"_useAsComboBox\" #comboBox [id]=\"id\" [data]=\"data\" [style.width]=\"width\" [clearButton]=\"clearButton\" fillMode=\"outline\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" rounded=\"small\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n  </kendo-combobox>\n  <kendo-dropdownlist *ngIf=\"!_useAsComboBox\"\n        [data]=\"data\"\n        [textField]=\"textField\"\n        [valueField]=\"valueField\"\n        [(ngModel)]=\"model\"\n        (selectionChange)=\"emitModelChange($event)\"\n        [itemDisabled]=\"_itemDisabled\"\n        [style.width]=\"width\"\n        [valuePrimitive]=\"valuePrimitive\"\n        [rounded]=\"rounded\"\n        [size]=\"size\"\n      >\n  </kendo-dropdownlist>\n</span>\n  \n", styles: [".checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -3155,11 +3155,11 @@ class AlertWarningComponent {
         this.iconName = 'warning-filled';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertWarningComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertWarningComponent, selector: "lib-alert-warning", inputs: { iconName: "iconName" }, ngImport: i0, template: "<div class=\"container\">\n    <div class=\"column column-1\">\n        <lib-icon [name]=\"iconName\"></lib-icon>\n    </div>\n    <div class=\"column column-2\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".container{outline:auto;outline-color:#d68e00;display:flex;background-color:#ffe6b3;padding:.625rem 1rem 0rem;max-width:94.4rem;margin-bottom:.063rem;margin-top:1rem}.column-1{display:flex;background-color:#fbc457;color:#d68e00;outline:auto;height:2.25rem;width:2.25rem;justify-content:center;align-items:center;margin-left:3.625rem}.column-2{background-color:#ffe6b3;padding:0%;margin-left:1rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertWarningComponent, selector: "lib-alert-warning", inputs: { iconName: "iconName" }, ngImport: i0, template: "<div class=\"container\">\n    <div class=\"column column-1\">\n        <lib-icon [name]=\"iconName\"></lib-icon>\n    </div>\n    <div class=\"column column-2\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".container{outline:auto;outline-color:#d68e00;display:flex;background-color:#ffe6b3;padding:.625rem 1rem 0rem;max-width:94.4rem;margin-bottom:.063rem;margin-top:1rem}.column-1{display:flex;background-color:#fbc457;color:#d68e00;outline:auto;height:2.25rem;width:2.25rem;justify-content:center;align-items:center;margin-left:3.625rem;margin-top:.5rem}.column-2{background-color:#ffe6b3;padding:0%;margin-left:1rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertWarningComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-alert-warning', template: "<div class=\"container\">\n    <div class=\"column column-1\">\n        <lib-icon [name]=\"iconName\"></lib-icon>\n    </div>\n    <div class=\"column column-2\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".container{outline:auto;outline-color:#d68e00;display:flex;background-color:#ffe6b3;padding:.625rem 1rem 0rem;max-width:94.4rem;margin-bottom:.063rem;margin-top:1rem}.column-1{display:flex;background-color:#fbc457;color:#d68e00;outline:auto;height:2.25rem;width:2.25rem;justify-content:center;align-items:center;margin-left:3.625rem}.column-2{background-color:#ffe6b3;padding:0%;margin-left:1rem}\n"] }]
+            args: [{ selector: 'lib-alert-warning', template: "<div class=\"container\">\n    <div class=\"column column-1\">\n        <lib-icon [name]=\"iconName\"></lib-icon>\n    </div>\n    <div class=\"column column-2\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".container{outline:auto;outline-color:#d68e00;display:flex;background-color:#ffe6b3;padding:.625rem 1rem 0rem;max-width:94.4rem;margin-bottom:.063rem;margin-top:1rem}.column-1{display:flex;background-color:#fbc457;color:#d68e00;outline:auto;height:2.25rem;width:2.25rem;justify-content:center;align-items:center;margin-left:3.625rem;margin-top:.5rem}.column-2{background-color:#ffe6b3;padding:0%;margin-left:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { iconName: [{
                 type: Input
             }] } });
@@ -4400,10 +4400,17 @@ const createFormGroup = (dataItem) => {
     return form;
 };
 class GridPaginationComponent {
-    constructor(cdRef) {
+    constructor(cdRef, renderer) {
         this.cdRef = cdRef;
+        this.renderer = renderer;
         this.gridView = { data: [], total: 0 };
         this.skip = 0;
+        this.itemName = 'Items';
+        this.showSelectAllMessage = false;
+        this.allPagesSelected = false;
+        this.savedHeight = 0;
+        this.previousSelectAllState = 'unchecked';
+        this.onSelectAllAcrossPages = new EventEmitter();
         this.columnData = [];
         this.pageSize = 0;
         this.pageable = false;
@@ -4475,7 +4482,7 @@ class GridPaginationComponent {
         this.rowClass = (args) => {
             if (this.selectedRows && this.disablePreSelectedRows) {
                 return {
-                    'k-disabled': this.selectedRows.includes(args.dataItem[this.gridRowSelectByValue]),
+                    'k-disabled': this.selectedRows.includes(args.dataItem[this.gridRowSelectByValue]) || this.allPagesSelected,
                 };
             }
             return '';
@@ -4520,8 +4527,40 @@ class GridPaginationComponent {
         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();
     }
+    selectAcrossPages(isSelected) {
+        this.triggerSelectAllPagesEvent(isSelected);
+        if (!isSelected) {
+            this.onSelectAllChange(this.previousSelectAllState);
+        }
+    }
+    triggerSelectAllPagesEvent(isSelected) {
+        this.allPagesSelected = isSelected;
+        this.onSelectAllAcrossPages.emit(isSelected);
+        console.log('triggerSelectAllPagesEvent : isSelected', isSelected);
+    }
+    addSelectAllMessage(selectAll) {
+        if (this.showSelectAllMessage && this.pageCount > 1) {
+            const elementResult = this.selectAllMessageElement.nativeElement.parentElement;
+            if (selectAll) {
+                this.savedHeight = elementResult.offsetHeight;
+                const beforeHeight = elementResult.offsetHeight;
+                this.selectAllMessageElement.nativeElement.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');
+                if (this.allPagesSelected) {
+                    this.triggerSelectAllPagesEvent(false);
+                }
+                elementResult.style.height = this.savedHeight + 'px';
+            }
+        }
+    }
     pageChange(event) {
         this.onPageChange.emit(event);
     }
@@ -4553,14 +4592,17 @@ class GridPaginationComponent {
             selectedRowsCount = this.selectedRows?.length;
             rows = this.selectedRows;
         }
+        this.previousSelectAllState = this.selectAllState;
         if (selectedRowsCount == this.gridView.total) {
             this.selectAllState = 'checked';
         }
         else if (selectedRowsCount == 0) {
             this.selectAllState = 'unchecked';
+            this.addSelectAllMessage(false);
         }
         else {
             this.selectAllState = 'indeterminate';
+            this.addSelectAllMessage(false);
         }
         selectedRowData = rows.map(rowData => {
             return this.gridView.data.find((data) => data[this.gridRowSelectByValue] === rowData);
@@ -4675,6 +4717,7 @@ class GridPaginationComponent {
             this.preSelected = [];
             this.selectAllState = 'unchecked';
         }
+        this.addSelectAllMessage(this.selectAllState === 'checked');
     }
     cellCloseHandler(args) {
         let { formGroup, dataItem } = args;
@@ -4694,13 +4737,13 @@ class GridPaginationComponent {
         this.grid.closeCell();
         this.grid.cancelCell();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap" }, outputs: { 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 }], 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)\" [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.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]\" [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      <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: ["::ng-deep .k-grid tr{height:50px}::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}::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: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-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;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.ɵ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", 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)\" [sort]=\"sort\"\n    (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.'\" type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(true)\" class= \"select-all-handler\" [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\" 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.'\" type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(false)\" class= \"select-all-handler\" [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]\" [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      <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: ["::ng-deep .k-grid tr{height:50px}::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}::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: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-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;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" }] }); }
 }
 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)\" [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.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]\" [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      <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: ["::ng-deep .k-grid tr{height:50px}::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}::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: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-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;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 }]; }, propDecorators: { columnTemplates: [{
+            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)\" [sort]=\"sort\"\n    (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.'\" type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(true)\" class= \"select-all-handler\" [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\" 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.'\" type=\"BODY_SMALL\"></lib-typography>\n        <u><lib-typography (click)=\"selectAcrossPages(false)\" class= \"select-all-handler\" [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]\" [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      <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: ["::ng-deep .k-grid tr{height:50px}::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}::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: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-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px;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]
             }], templateRef: [{
@@ -4718,10 +4761,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], gridElement: [{
                 type: ViewChild,
                 args: ['gridElement']
+            }], selectAllMessageElement: [{
+                type: ViewChild,
+                args: ['selectAllMessageElement']
             }], gridView: [{
                 type: Input
             }], skip: [{
                 type: Input
+            }], itemName: [{
+                type: Input
+            }], onSelectAllAcrossPages: [{
+                type: Output
             }], columnData: [{
                 type: Input
             }], pageSize: [{