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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2022/lib/atoms/button/button.component.mjs +12 -3
  2. package/esm2022/lib/atoms/clipboard/clipboard.component.mjs +1 -1
  3. package/esm2022/lib/atoms/dropdowntree/dropdowntree.component.mjs +1 -1
  4. package/esm2022/lib/molecules/dialog/confirmation-dialog/confirmation-dialog.component.mjs +1 -1
  5. package/esm2022/lib/molecules/grid-pagination/grid-pagination.component.mjs +137 -72
  6. package/fesm2022/progress-chef-platform-shared-components.mjs +156 -83
  7. package/fesm2022/progress-chef-platform-shared-components.mjs.map +1 -1
  8. package/lib/atoms/button/button.component.d.ts +2 -1
  9. package/lib/molecules/grid-pagination/grid-pagination.component.d.ts +17 -5
  10. package/package.json +1 -1
package/fesm2022/progress-chef-platform-shared-components.mjs CHANGED
@@ -545,12 +545,19 @@ class ButtonComponent {
545
545
  this.buttonClick = new EventEmitter();
546
546
  this.iconButton = false;
547
547
  this.projectedIcon = false;
548
+ this.formatFn = (value) => this.toTitleCase(value);
548
549
  }
549
550
  onButtonClick(e) {
550
551
  this.buttonClick.emit(e);
551
552
  }
552
553
  button_size() {
553
554
  let classStr = this.projectedIcon ? 'projected-icon ' : '';
555
+ if (this.size === 'small') {
556
+ this.fontType = 'BUTTON_SMALL';
557
+ }
558
+ if (this.size === 'medium') {
559
+ this.fontType = 'BUTTON_REGULAR';
560
+ }
554
561
  return classStr + 'btn-padding';
555
562
  }
556
563
  toTitleCase(str) {
@@ -559,11 +566,11 @@ class ButtonComponent {
559
566
  }).join(' ');
560
567
  }
561
568
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
562
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "lib-button", inputs: { size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", iconName: "iconName", disabled: "disabled", toggleable: "toggleable", iconPosition: "iconPosition", fontType: "fontType", width: "width", iconButton: "iconButton", projectedIcon: "projectedIcon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"toTitleCase(label)\" [type]=\"fontType\" class=\"text\">\n </lib-typography>\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 8px 0 0}.after{padding-left:8px}button:disabled{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}.btn-padding{padding:8px 16px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"], dependencies: [{ 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: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
569
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "lib-button", inputs: { size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", iconName: "iconName", disabled: "disabled", toggleable: "toggleable", iconPosition: "iconPosition", fontType: "fontType", width: "width", iconButton: "iconButton", projectedIcon: "projectedIcon", formatFn: "formatFn" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"formatFn(label)\" [type]=\"fontType\" class=\"text\">\n </lib-typography>\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 8px 0 0}.after{padding-left:8px}button:disabled{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}.btn-padding{padding:8px 16px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"], dependencies: [{ 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: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
563
570
  }
564
571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
565
572
  type: Component,
566
- args: [{ selector: 'lib-button', template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"toTitleCase(label)\" [type]=\"fontType\" class=\"text\">\n </lib-typography>\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 8px 0 0}.after{padding-left:8px}button:disabled{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}.btn-padding{padding:8px 16px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"] }]
573
+ args: [{ selector: 'lib-button', template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon-before btn-icon before\"></lib-icon>\n <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\" [projectedIcon]=\"projectedIcon\"></lib-icon>\n <lib-typography *ngIf=\"!iconButton\" [defaultText]=\"formatFn(label)\" [type]=\"fontType\" class=\"text\">\n </lib-typography>\n <lib-icon *ngIf=\"!iconButton && iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon-after btn-icon after\"></lib-icon>\n</button>\n", styles: [".btn-icon{top:1px;position:relative}.btn-icon-before{margin:0 8px 0 0}.after{padding-left:8px}button:disabled{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}.btn-padding{padding:8px 16px}.projected-icon{padding:0 6px!important;border:none!important}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"] }]
567
574
  }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { size: [{
568
575
  type: Input
569
576
  }], rounded: [{
@@ -592,6 +599,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
592
599
  type: Input
593
600
  }], projectedIcon: [{
594
601
  type: Input
602
+ }], formatFn: [{
603
+ type: Input
595
604
  }] } });
596
605
 
597
606
  class ButtonModule {
@@ -2061,7 +2070,7 @@ class DropdowntreeComponent {
2061
2070
  this.buttonClick.emit(e);
2062
2071
  }
2063
2072
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
2064
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdowntreeComponent, selector: "lib-dropdowntree", inputs: { childrenField: "childrenField", hasDefaultValue: "hasDefaultValue", isDisabled: "isDisabled", listHeight: "listHeight", value: "value", placeholder: "placeholder", clearButton: "clearButton", expandBy: "expandBy", expandedKeys: "expandedKeys", data: "data", textField: "textField", readonly: "readonly", valueField: "valueField", footerBtnLabel: "footerBtnLabel", footerBtnIcon: "footerBtnIcon", hasFooterBtn: "hasFooterBtn", rounded: "rounded", fillMode: "fillMode", size: "size", control: "control" }, outputs: { selectedItem: "selectedItem", buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n [alt]=\"dataItem.imageUrl\" class=\"image\" />\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n [alt]=\"dataItem.imageUrl\" class=\"image\" />\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"BODY_LARGE\"\n class=\"footer-btn\"></lib-button>\n </ng-template>\n\n</kendo-dropdowntree>\n", styles: [".dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{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 li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3$2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i3$2.DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: ["icon", "svgIcon", "loading", "clearButton", "data", "value", "textField", "valueField", "valueDepth", "hasChildren", "fetchChildren", "placeholder", "popupSettings", "dataItem", "listHeight", "disabled", "readonly", "valuePrimitive", "tabindex", "size", "rounded", "fillMode", "itemDisabled", "isNodeExpanded", "isNodeVisible", "loadOnDemand", "filterable", "filter", "focusableId", "adaptiveMode", "title", "subtitle"], outputs: ["open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "focus", "blur", "valueChange", "filterChange"], exportAs: ["kendoDropDownTree"] }, { kind: "directive", type: i3$2.DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: ["kendoDropDownTreeHierarchyBinding"] }, { kind: "directive", type: i3$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { kind: "directive", type: i3$2.NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon"], outputs: ["buttonClick"] }] }); }
2073
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdowntreeComponent, selector: "lib-dropdowntree", inputs: { childrenField: "childrenField", hasDefaultValue: "hasDefaultValue", isDisabled: "isDisabled", listHeight: "listHeight", value: "value", placeholder: "placeholder", clearButton: "clearButton", expandBy: "expandBy", expandedKeys: "expandedKeys", data: "data", textField: "textField", readonly: "readonly", valueField: "valueField", footerBtnLabel: "footerBtnLabel", footerBtnIcon: "footerBtnIcon", hasFooterBtn: "hasFooterBtn", rounded: "rounded", fillMode: "fillMode", size: "size", control: "control" }, outputs: { selectedItem: "selectedItem", buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n [alt]=\"dataItem.imageUrl\" class=\"image\" />\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n [alt]=\"dataItem.imageUrl\" class=\"image\" />\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n {{ dataItem.text }}\n </ng-template>\n\n <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"BODY_LARGE\"\n class=\"footer-btn\"></lib-button>\n </ng-template>\n\n</kendo-dropdowntree>\n", styles: [".dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{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 li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3$2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i3$2.DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: ["icon", "svgIcon", "loading", "clearButton", "data", "value", "textField", "valueField", "valueDepth", "hasChildren", "fetchChildren", "placeholder", "popupSettings", "dataItem", "listHeight", "disabled", "readonly", "valuePrimitive", "tabindex", "size", "rounded", "fillMode", "itemDisabled", "isNodeExpanded", "isNodeVisible", "loadOnDemand", "filterable", "filter", "focusableId", "adaptiveMode", "title", "subtitle"], outputs: ["open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "focus", "blur", "valueChange", "filterChange"], exportAs: ["kendoDropDownTree"] }, { kind: "directive", type: i3$2.DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: ["kendoDropDownTreeHierarchyBinding"] }, { kind: "directive", type: i3$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { kind: "directive", type: i3$2.NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn"], outputs: ["buttonClick"] }] }); }
2065
2074
  }
2066
2075
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, decorators: [{
2067
2076
  type: Component,
@@ -2230,7 +2239,7 @@ class ClipboardComponent {
2230
2239
  this.tooltipText = this.preCopyText;
2231
2240
  }
2232
2241
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
2233
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardData: "clipboardData", tooltipPosition: "tooltipPosition", preCopyText: "preCopyText", postCopyText: "postCopyText" }, ngImport: i0, template: "<lib-tooltip class=\"cb-tooltip\" [callout]=\"true\" [position]=\"tooltipPosition\"\n [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n <lib-button class=\"copy-button\" themeColor=\"primary\" label=\"Copy\" fillMode=\"outline\" iconName=\"copy\"\n iconPosition=\"before\" (buttonClick)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\"></lib-button>\n <div class=\"cb-tooltip-text tooltip-content\">\n {{tooltipText}}\n </div>\n</lib-tooltip>\n", styles: ["::ng-deep .cb-tooltip .copy-button .k-button-outline-primary:focus,::ng-deep .cb-tooltip .copy-button .k-button-outline-primary.k-focus{box-shadow:none!important}.cb-tooltip-text{padding:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon"], outputs: ["buttonClick"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }] }); }
2242
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardData: "clipboardData", tooltipPosition: "tooltipPosition", preCopyText: "preCopyText", postCopyText: "postCopyText" }, ngImport: i0, template: "<lib-tooltip class=\"cb-tooltip\" [callout]=\"true\" [position]=\"tooltipPosition\"\n [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n <lib-button class=\"copy-button\" themeColor=\"primary\" label=\"Copy\" fillMode=\"outline\" iconName=\"copy\"\n iconPosition=\"before\" (buttonClick)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\"></lib-button>\n <div class=\"cb-tooltip-text tooltip-content\">\n {{tooltipText}}\n </div>\n</lib-tooltip>\n", styles: ["::ng-deep .cb-tooltip .copy-button .k-button-outline-primary:focus,::ng-deep .cb-tooltip .copy-button .k-button-outline-primary.k-focus{box-shadow:none!important}.cb-tooltip-text{padding:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn"], outputs: ["buttonClick"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }] }); }
2234
2243
  }
2235
2244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, decorators: [{
2236
2245
  type: Component,
@@ -4063,7 +4072,7 @@ class ConfirmationDialogComponent {
4063
4072
  }
4064
4073
  }
4065
4074
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4066
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", inputs: { title: "title", secondaryBtnLabel: "secondaryBtnLabel", btnText: "btnText", type: "type", dialogInfoText: "dialogInfoText", dialogConfirmationText: "dialogConfirmationText", fillMode: "fillMode", themeColor: "themeColor", secondaryBtnFillMode: "secondaryBtnFillMode" }, outputs: { confirmationDialogCloseEvent: "confirmationDialogCloseEvent", popupEvent: "popupEvent" }, usesOnChanges: true, ngImport: i0, template: "<lib-dialog width=\"489px\" class=\"confirmation-dialog\">\n <lib-dialog-titlebar class=\"confirmation-title\" [title]=\"title\" titleFont=\"HEADING_MEDIUM\"\n [hideCloseIcon]=\"true\"></lib-dialog-titlebar>\n <div class=\"confirmation-popup-text\">\n <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogInfoText\"></lib-typography><br>\n <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogConfirmationText\"></lib-typography>\n </div>\n <lib-dialog-actions buttonLayout=\"end\" class=\"action-button\">\n <lib-button [label]=\"secondaryBtnLabel\" [fillMode]=\"secondaryBtnFillMode\" themeColor=\"primary\" (buttonClick)=\"dialogClose()\" width=\"144px\"></lib-button>\n <lib-button [label]=\"btnText\" [themeColor]=\"themeColor\" (buttonClick)=\"eventClicked()\" [fillMode]=\"fillMode\" width=\"144px\"></lib-button>\n </lib-dialog-actions>\n</lib-dialog>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon"], outputs: ["buttonClick"] }, { kind: "component", type: DialogComponent, selector: "lib-dialog", inputs: ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "opened"] }, { kind: "component", type: DialogTitlebarComponent, selector: "lib-dialog-titlebar", inputs: ["title", "titleFont", "hideCloseIcon"], outputs: ["closeDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "lib-dialog-actions", inputs: ["buttonLayout"] }] }); }
4075
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", inputs: { title: "title", secondaryBtnLabel: "secondaryBtnLabel", btnText: "btnText", type: "type", dialogInfoText: "dialogInfoText", dialogConfirmationText: "dialogConfirmationText", fillMode: "fillMode", themeColor: "themeColor", secondaryBtnFillMode: "secondaryBtnFillMode" }, outputs: { confirmationDialogCloseEvent: "confirmationDialogCloseEvent", popupEvent: "popupEvent" }, usesOnChanges: true, ngImport: i0, template: "<lib-dialog width=\"489px\" class=\"confirmation-dialog\">\n <lib-dialog-titlebar class=\"confirmation-title\" [title]=\"title\" titleFont=\"HEADING_MEDIUM\"\n [hideCloseIcon]=\"true\"></lib-dialog-titlebar>\n <div class=\"confirmation-popup-text\">\n <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogInfoText\"></lib-typography><br>\n <lib-typography type=\"BODY_MEDIUM\" [defaultText]=\"dialogConfirmationText\"></lib-typography>\n </div>\n <lib-dialog-actions buttonLayout=\"end\" class=\"action-button\">\n <lib-button [label]=\"secondaryBtnLabel\" [fillMode]=\"secondaryBtnFillMode\" themeColor=\"primary\" (buttonClick)=\"dialogClose()\" width=\"144px\"></lib-button>\n <lib-button [label]=\"btnText\" [themeColor]=\"themeColor\" (buttonClick)=\"eventClicked()\" [fillMode]=\"fillMode\" width=\"144px\"></lib-button>\n </lib-dialog-actions>\n</lib-dialog>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn"], outputs: ["buttonClick"] }, { kind: "component", type: DialogComponent, selector: "lib-dialog", inputs: ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "opened"] }, { kind: "component", type: DialogTitlebarComponent, selector: "lib-dialog-titlebar", inputs: ["title", "titleFont", "hideCloseIcon"], outputs: ["closeDialog"] }, { kind: "component", type: DialogActionsComponent, selector: "lib-dialog-actions", inputs: ["buttonLayout"] }] }); }
4067
4076
  }
4068
4077
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
4069
4078
  type: Component,
@@ -4724,6 +4733,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4724
4733
  }]
4725
4734
  }] });
4726
4735
 
4736
+ class GridPaginationSpacerComponent {
4737
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4738
+ 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"] }] }); }
4739
+ }
4740
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, decorators: [{
4741
+ type: Component,
4742
+ args: [{ selector: 'lib-grid-pagination-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
4743
+ }] });
4744
+
4727
4745
  class KebabMenuFilterPipe {
4728
4746
  transform(menu, ...args) {
4729
4747
  const dataItem = args[0];
@@ -4768,10 +4786,16 @@ const createFormGroup = (dataItem) => {
4768
4786
  return form;
4769
4787
  };
4770
4788
  class GridPaginationComponent {
4789
+ set preSelected(value) {
4790
+ this._preSelected = value;
4791
+ this.initGrid();
4792
+ }
4793
+ set gridView(value) {
4794
+ this._gridView = value;
4795
+ }
4771
4796
  constructor(cdRef, renderer) {
4772
4797
  this.cdRef = cdRef;
4773
4798
  this.renderer = renderer;
4774
- this.gridView = { data: [], total: 0 };
4775
4799
  this.skip = 0;
4776
4800
  this.itemName = 'Items';
4777
4801
  this.showSelectAllMessage = false;
@@ -4810,7 +4834,8 @@ class GridPaginationComponent {
4810
4834
  this.data = [];
4811
4835
  this.selectColumn = '';
4812
4836
  this.rowDataOfClickedCell = new EventEmitter();
4813
- this.preSelected = [];
4837
+ this._preSelected = [];
4838
+ this._gridView = { data: [], total: 0 };
4814
4839
  this.preSelectedRecords = [];
4815
4840
  this.onPageChange = new EventEmitter();
4816
4841
  this.ignoreColumnCellClick = [];
@@ -4841,12 +4866,41 @@ class GridPaginationComponent {
4841
4866
  this.gridBottomSpace = 24;
4842
4867
  this.resizeHeight = 0;
4843
4868
  this.selectAllState = 'unchecked';
4869
+ this.selectedItemCount = 0;
4844
4870
  this.selectedRows = [];
4845
4871
  this.disablePreSelectedRows = false;
4846
4872
  this.updatedData = new EventEmitter();
4847
4873
  this.allowEditingCell = false;
4848
4874
  this.columnContentNoWrap = false;
4875
+ this.infiniteScrollLoader = false;
4876
+ this.onscrollBottom = new EventEmitter();
4877
+ this.isInfiniteScrollGrid = false;
4878
+ this.gridLoading = false;
4849
4879
  this.columnTemplateDict = {};
4880
+ /*
4881
+ * This logic of dynamically calculating the height of grid need further brainstorming hence commented for now.
4882
+ */
4883
+ // getGridHeight() {
4884
+ // const windowHeight = window.innerHeight;
4885
+ // const viewport: any = document.getElementById('lib-grid');
4886
+ // const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
4887
+ // const gridHeight =
4888
+ // this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace; //grid should have 24px space at bottom
4889
+ // if (gridOffset + gridHeight >= windowHeight) {
4890
+ // this.height = windowHeight - (gridOffset + this.gridBottomSpace);
4891
+ // }
4892
+ // }
4893
+ // @HostListener('window:resize', ['$event'])
4894
+ // resize(ev: any) {
4895
+ // if (ev.target.innerHeight > this.resizeHeight) {
4896
+ // this.resizeHeight = ev.target.innerHeight;
4897
+ // this.height = '100%';
4898
+ // }
4899
+ // if (this.resizeHeight > window.innerHeight) {
4900
+ // this.resizeHeight = 0;
4901
+ // }
4902
+ // this.getGridHeight();
4903
+ // }
4850
4904
  this.rowClass = (args) => {
4851
4905
  if (this.selectedRows && this.disablePreSelectedRows) {
4852
4906
  return {
@@ -4868,21 +4922,41 @@ class GridPaginationComponent {
4868
4922
  this.loadGridData();
4869
4923
  }
4870
4924
  }
4925
+ scrollBottom() {
4926
+ this.onscrollBottom.emit();
4927
+ }
4928
+ getPosition() {
4929
+ if (this.showToolbar && this.infiniteScrollLoader) {
4930
+ return 'both';
4931
+ }
4932
+ else if (this.showToolbar) {
4933
+ return 'top';
4934
+ }
4935
+ else if (this.infiniteScrollLoader) {
4936
+ return 'bottom';
4937
+ }
4938
+ else {
4939
+ return;
4940
+ }
4941
+ }
4871
4942
  ngAfterContentInit() {
4872
4943
  if (!this.pageable) {
4873
- this.pageSize = this.gridView.data?.length;
4944
+ this.pageSize = this._gridView.data?.length;
4874
4945
  }
4875
4946
  this.columnTemplates.forEach(x => this.columnTemplateDict[x.type] = x.template);
4876
4947
  }
4877
4948
  ngAfterViewInit() {
4949
+ this.initGrid();
4950
+ }
4951
+ initGrid() {
4878
4952
  if (this.customExpandRowColumn) {
4879
4953
  this.expandRowIndex.forEach((id) => {
4880
4954
  this.grid.expandRow(id);
4881
4955
  });
4882
4956
  }
4883
- this.selectedRows = this.preSelected;
4957
+ this.selectedRows = this._preSelected;
4884
4958
  if (this.selectedRows?.length > 0) {
4885
- if (this.selectedRows?.length == this.gridView.total) {
4959
+ if (this.selectedRows?.length == this._gridView.total) {
4886
4960
  this.selectAllState = 'checked';
4887
4961
  }
4888
4962
  else {
@@ -4892,12 +4966,20 @@ class GridPaginationComponent {
4892
4966
  else {
4893
4967
  this.selectAllState = 'unchecked';
4894
4968
  }
4895
- this.initialGridHeight =
4896
- this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace;
4897
- // this.getGridHeight();
4898
- const gridContainer = this.gridElement?.nativeElement?.getElementsByClassName('k-grid-container')[0];
4899
- this.renderer.insertBefore(gridContainer.parentElement, this.selectAllMessageElement.nativeElement, gridContainer, true);
4900
- this.cdRef.detectChanges();
4969
+ if (this.gridElement) {
4970
+ this.initialGridHeight =
4971
+ this.gridElement?.nativeElement?.offsetHeight + this.gridBottomSpace;
4972
+ // this.getGridHeight();
4973
+ const gridContainer = this.gridElement?.nativeElement?.getElementsByClassName('k-grid-container')[0];
4974
+ if (gridContainer && this.selectAllMessageElement?.nativeElement) {
4975
+ this.renderer.insertBefore(gridContainer.parentElement, this.selectAllMessageElement?.nativeElement, gridContainer, true);
4976
+ }
4977
+ const selectAllCheckbox = this.gridElement?.nativeElement?.querySelector('.select-all-header input');
4978
+ if (selectAllCheckbox) {
4979
+ this.renderer.setProperty(selectAllCheckbox, 'disabled', this.canEnableSelectAll());
4980
+ }
4981
+ this.cdRef.detectChanges();
4982
+ }
4901
4983
  }
4902
4984
  selectAcrossPages(isSelected) {
4903
4985
  this.triggerSelectAllPagesEvent(isSelected);
@@ -4908,20 +4990,22 @@ class GridPaginationComponent {
4908
4990
  triggerSelectAllPagesEvent(isSelected) {
4909
4991
  this.allPagesSelected = isSelected;
4910
4992
  this.onSelectAllAcrossPages.emit(isSelected);
4993
+ this.selectedItemCount = isSelected ? this._gridView.total : 0;
4911
4994
  console.log('triggerSelectAllPagesEvent : isSelected', isSelected);
4912
4995
  }
4913
4996
  addSelectAllMessage(selectAll) {
4914
- if (this.showSelectAllMessage && this.pageCount > 1) {
4915
- const elementResult = this.selectAllMessageElement.nativeElement.parentElement;
4997
+ const elementResult = this.selectAllMessageElement?.nativeElement?.parentElement;
4998
+ if (this.showSelectAllMessage && elementResult && (this.pageCount > 1 || this.isInfiniteScrollGrid)) {
4999
+ const selectAllMsgElement = this.selectAllMessageElement?.nativeElement?.querySelector('.lib-grid-select-all-message-container');
4916
5000
  if (selectAll) {
4917
5001
  this.savedHeight = elementResult.offsetHeight;
4918
5002
  const beforeHeight = elementResult.offsetHeight;
4919
- this.selectAllMessageElement.nativeElement.classList.add('lib-grid-select-all-message-show');
5003
+ selectAllMsgElement?.classList.add('lib-grid-select-all-message-show');
4920
5004
  const afterHeight = elementResult.offsetHeight;
4921
5005
  elementResult.style.height = (elementResult.offsetHeight - (afterHeight - beforeHeight)) + 'px';
4922
5006
  }
4923
5007
  else {
4924
- this.selectAllMessageElement.nativeElement.classList.remove('lib-grid-select-all-message-show');
5008
+ selectAllMsgElement?.classList.remove('lib-grid-select-all-message-show');
4925
5009
  if (this.allPagesSelected) {
4926
5010
  this.triggerSelectAllPagesEvent(false);
4927
5011
  }
@@ -4963,7 +5047,17 @@ class GridPaginationComponent {
4963
5047
  rows = this.selectedRows;
4964
5048
  }
4965
5049
  this.previousSelectAllState = this.selectAllState;
4966
- if (selectedRowsCount == this.gridView.total) {
5050
+ this.selectAllState = this.getSelectAllState(selectedRowsCount);
5051
+ if (this.selectAllState === 'unchecked' || this.selectAllState === 'indeterminate') {
5052
+ this.addSelectAllMessage(false);
5053
+ }
5054
+ selectedRowData = rows.map(rowData => {
5055
+ return this._gridView.data.find((data) => data[this.gridRowSelectByValue] === rowData);
5056
+ });
5057
+ this.selectedRowData.emit(selectedRowData);
5058
+ }
5059
+ getSelectAllState(selectedRowsCount) {
5060
+ if (selectedRowsCount == this._gridView.total) {
4967
5061
  this.selectAllState = 'checked';
4968
5062
  }
4969
5063
  else if (selectedRowsCount == 0) {
@@ -4974,10 +5068,6 @@ class GridPaginationComponent {
4974
5068
  this.selectAllState = 'indeterminate';
4975
5069
  this.addSelectAllMessage(false);
4976
5070
  }
4977
- selectedRowData = rows.map(rowData => {
4978
- return this.gridView.data.find((data) => data[this.gridRowSelectByValue] === rowData);
4979
- });
4980
- this.selectedRowData.emit(selectedRowData);
4981
5071
  }
4982
5072
  onKebabClick(item, rowDetails) {
4983
5073
  this.kebabItemClick.emit({ action: item, rowDetails });
@@ -5005,9 +5095,9 @@ class GridPaginationComponent {
5005
5095
  this.sortDirection.emit(this.sort);
5006
5096
  }
5007
5097
  loadGridData() {
5008
- this.gridView = {
5098
+ this._gridView = {
5009
5099
  data: orderBy(this.gridView?.data, this.sort),
5010
- total: this.gridView?.total,
5100
+ total: this._gridView?.total,
5011
5101
  };
5012
5102
  }
5013
5103
  expandRow(id) {
@@ -5020,16 +5110,16 @@ class GridPaginationComponent {
5020
5110
  collapseRow(id) {
5021
5111
  this.grid.collapseRow(id);
5022
5112
  this.expandRowIndex.splice(this.expandRowIndex.indexOf(id), 1);
5023
- if (this.expandRowIndex?.length == 0) {
5024
- const windowHeight = window.innerHeight;
5025
- const viewport = document.getElementById('lib-grid');
5026
- const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
5027
- if (windowHeight > gridOffset + this.initialGridHeight) {
5028
- this.height = '100%';
5029
- return;
5030
- }
5031
- // this.getGridHeight();
5032
- }
5113
+ // if (this.expandRowIndex?.length == 0) {
5114
+ // const windowHeight = window.innerHeight;
5115
+ // const viewport: any = document.getElementById('lib-grid');
5116
+ // const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
5117
+ // if (windowHeight > gridOffset + this.initialGridHeight) {
5118
+ // this.height = '100%';
5119
+ // return;
5120
+ // }
5121
+ // // this.getGridHeight();
5122
+ // }
5033
5123
  }
5034
5124
  onDelete(rowDetails) {
5035
5125
  setTimeout(() => {
@@ -5038,34 +5128,11 @@ class GridPaginationComponent {
5038
5128
  this.deletedRowData.emit(rowDetails);
5039
5129
  }
5040
5130
  getHeaderHeight() {
5041
- if (this.gridView?.data?.length === 0) {
5131
+ if (this._gridView?.data?.length === 0) {
5042
5132
  return 'hide-header';
5043
5133
  }
5044
5134
  return 'view-header';
5045
5135
  }
5046
- /*
5047
- * This logic of dynamically calculating the height of grid need further brainstorming hence commented for now.
5048
- */
5049
- // getGridHeight() {
5050
- // const windowHeight = window.innerHeight;
5051
- // const viewport: any = document.getElementById('lib-grid');
5052
- // const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
5053
- // const gridHeight =
5054
- // this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace; //grid should have 24px space at bottom
5055
- // if (gridOffset + gridHeight >= windowHeight) {
5056
- // this.height = windowHeight - (gridOffset + this.gridBottomSpace);
5057
- // }
5058
- // }
5059
- resize(ev) {
5060
- if (ev.target.innerHeight > this.resizeHeight) {
5061
- this.resizeHeight = ev.target.innerHeight;
5062
- this.height = '100%';
5063
- }
5064
- if (this.resizeHeight > window.innerHeight) {
5065
- this.resizeHeight = 0;
5066
- }
5067
- // this.getGridHeight();
5068
- }
5069
5136
  expandColumnClass() {
5070
5137
  if (this.selectedRows?.length > 0 && this.disablePreSelectedRows) {
5071
5138
  this.expandRowColumnWidth = 194;
@@ -5075,24 +5142,29 @@ class GridPaginationComponent {
5075
5142
  return '';
5076
5143
  }
5077
5144
  onSelectAllChange(checkedState) {
5078
- if (checkedState === 'checked' ||
5079
- (this.selectedRows?.length == this.gridView.total &&
5080
- this.disablePreSelectedRows)) {
5081
- this.preSelected = this.gridView.data
5145
+ if (checkedState === 'checked') {
5146
+ this._preSelected = this._gridView.data
5082
5147
  .map((item) => item[this.gridRowSelectByValue])
5083
5148
  .filter((id) => id);
5084
5149
  this.selectAllState = 'checked';
5150
+ this.selectedItemCount = this._gridView.data.length;
5085
5151
  }
5086
5152
  else if (this.selectedRows?.length > 0 && this.disablePreSelectedRows) {
5087
- this.preSelected = this.selectedRows;
5153
+ this._preSelected = this.selectedRows;
5088
5154
  this.selectAllState = 'indeterminate';
5155
+ this.selectedItemCount = 0;
5089
5156
  }
5090
5157
  else {
5091
- this.preSelected = [];
5158
+ this._preSelected = [];
5092
5159
  this.selectAllState = 'unchecked';
5160
+ this.selectedItemCount = 0;
5093
5161
  }
5094
5162
  this.addSelectAllMessage(this.selectAllState === 'checked');
5095
5163
  }
5164
+ canEnableSelectAll() {
5165
+ return (this.selectedRows?.length == this._gridView.total &&
5166
+ this.disablePreSelectedRows);
5167
+ }
5096
5168
  cellCloseHandler(args) {
5097
5169
  let { formGroup, dataItem } = args;
5098
5170
  if (!formGroup.valid) {
@@ -5112,11 +5184,11 @@ class GridPaginationComponent {
5112
5184
  this.grid.cancelCell();
5113
5185
  }
5114
5186
  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 }); }
5115
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { gridView: "gridView", skip: "skip", itemName: "itemName", showSelectAllMessage: "showSelectAllMessage", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData" }, host: { listeners: { "window:resize": "resize($event)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\" [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n [sort]=\"sort\" (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n <div #selectAllMessageElement class=\"lib-grid-select-all-message-container\">\n <div *ngIf=\"!allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-typography [defaultText]=\"'All '+gridView.data.length+' '+itemName+' on this page are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\"\n type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n <lib-typography [defaultText]=\"'All '+gridView.total+' '+itemName+' across all pages are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n </div>\n <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n <ng-content></ng-content>\n </ng-template>\n\n <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </ng-template>\n\n <ng-container *ngIf=\"this.gridView.total > 0\">\n <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n <ng-template kendoGridHeaderTemplate>\n <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n </ng-template>\n </kendo-grid-checkbox-column>\n\n <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n {{item.title}}\n <span *ngIf=\"sort[0].field === item.field\">\n <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n </span>\n </ng-template>\n\n <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n <div class=\"tooltip-content\">\n <lib-typography defaultText=\"Remove\"></lib-typography>\n </div>\n </lib-tooltip>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n </kendo-dropdownbutton>\n </ng-template>\n </kendo-grid-column>\n </ng-container>\n\n <ng-template kendoGridDetailTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <div [ngClass]=\"expandColumnClass()\">\n <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n class=\"expand-column-text\">\n Already added\n </span>\n <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n </div>\n </ng-template>\n </kendo-grid-column>\n\n <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n </div>\n </ng-template>\n\n </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
5187
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { skip: "skip", itemName: "itemName", showSelectAllMessage: "showSelectAllMessage", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridHeight: "gridHeight", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", gridView: "gridView", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap", infiniteScrollLoader: "infiniteScrollLoader", isInfiniteScrollGrid: "isInfiniteScrollGrid", gridLoading: "gridLoading" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData", onscrollBottom: "onscrollBottom" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"gridHeight\"\n (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n id=\"lib-grid\" [rowClass]=\"rowClass\">\n <div #selectAllMessageElement>\n <div class=\"lib-grid-select-all-message-container\" *ngIf=\"(selectedItemCount < _gridView.total)\">\n <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n </div>\n </div>\n <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n <ng-content *ngIf=\"showToolbar && position === 'top'\"></ng-content>\n <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n <lib-loader *ngIf=\"infiniteScrollLoader && position === 'bottom'\" [type]=\"loaderType\" [size]=\"loaderSize\"\n [themeColor]=\"loaderTheme\"></lib-loader>\n <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n </ng-template>\n\n <ng-template kendoGridLoadingTemplate>\n <div class=\"k-loading-color\"></div>\n <div class=\"loading-container\">\n <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </div>\n </ng-template>\n\n <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </ng-template>\n <ng-container *ngIf=\"this._gridView.total > 0\">\n <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n <ng-template kendoGridHeaderTemplate>\n <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n </ng-template>\n </kendo-grid-checkbox-column>\n\n <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n {{item.title}}\n <span *ngIf=\"sort[0].field === item.field\">\n <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n </span>\n </ng-template>\n\n <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n <div class=\"tooltip-content\">\n <lib-typography defaultText=\"Remove\"></lib-typography>\n </div>\n </lib-tooltip>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n </kendo-dropdownbutton>\n </ng-template>\n </kendo-grid-column>\n </ng-container>\n\n <ng-template kendoGridDetailTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <div [ngClass]=\"expandColumnClass()\">\n <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n class=\"expand-column-text\">\n Already added\n </span>\n <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n </div>\n </ng-template>\n </kendo-grid-column>\n\n <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n </div>\n </ng-template>\n\n </kendo-grid>\n</div>", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.LoadingTemplateDirective, selector: "[kendoGridLoadingTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "component", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer" }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
5116
5188
  }
5117
5189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, decorators: [{
5118
5190
  type: Component,
5119
- args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\" [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n <kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n [sort]=\"sort\" (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\" [rowClass]=\"rowClass\">\n <div #selectAllMessageElement class=\"lib-grid-select-all-message-container\">\n <div *ngIf=\"!allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-typography [defaultText]=\"'All '+gridView.data.length+' '+itemName+' on this page are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n [defaultText]=\"'Select all '+gridView.total+' '+itemName+' from all pages'\"\n type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n <lib-typography [defaultText]=\"'All '+gridView.total+' '+itemName+' across all pages are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n </div>\n <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n <ng-content></ng-content>\n </ng-template>\n\n <ng-template *ngIf=\"this.gridView.total === 0\" kendoGridNoRecordsTemplate>\n <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </ng-template>\n\n <ng-container *ngIf=\"this.gridView.total > 0\">\n <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n <ng-template kendoGridHeaderTemplate>\n <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n </ng-template>\n </kendo-grid-checkbox-column>\n\n <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n {{item.title}}\n <span *ngIf=\"sort[0].field === item.field\">\n <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n </span>\n </ng-template>\n\n <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n <div class=\"tooltip-content\">\n <lib-typography defaultText=\"Remove\"></lib-typography>\n </div>\n </lib-tooltip>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n </kendo-dropdownbutton>\n </ng-template>\n </kendo-grid-column>\n </ng-container>\n\n <ng-template kendoGridDetailTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <div [ngClass]=\"expandColumnClass()\">\n <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n class=\"expand-column-text\">\n Already added\n </span>\n <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n </div>\n </ng-template>\n </kendo-grid-column>\n\n <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n </div>\n </ng-template>\n\n </kendo-grid>\n</div>\n", styles: ["::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"] }]
5191
+ args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"gridHeight\"\n (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n id=\"lib-grid\" [rowClass]=\"rowClass\">\n <div #selectAllMessageElement>\n <div class=\"lib-grid-select-all-message-container\" *ngIf=\"(selectedItemCount < _gridView.total)\">\n <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n type=\"BODY_SMALL\"></lib-typography>\n <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n </div>\n </div>\n </div>\n <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n <ng-content *ngIf=\"showToolbar && position === 'top'\"></ng-content>\n <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n <lib-loader *ngIf=\"infiniteScrollLoader && position === 'bottom'\" [type]=\"loaderType\" [size]=\"loaderSize\"\n [themeColor]=\"loaderTheme\"></lib-loader>\n <lib-grid-pagination-spacer *ngIf=\"infiniteScrollLoader && position === 'bottom'\"></lib-grid-pagination-spacer>\n </ng-template>\n\n <ng-template kendoGridLoadingTemplate>\n <div class=\"k-loading-color\"></div>\n <div class=\"loading-container\">\n <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </div>\n </ng-template>\n\n <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n </ng-template>\n <ng-container *ngIf=\"this._gridView.total > 0\">\n <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\" class=\"checkbox-column\">\n <ng-template kendoGridHeaderTemplate>\n <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n </ng-template>\n </kendo-grid-checkbox-column>\n\n <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n [width]=\"item.columnWidth\" [sortable]=\"item.sortable\" [editor]=\"item.editor\" [class]=\"item.class\">\n\n <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n {{item.title}}\n <span *ngIf=\"sort[0].field === item.field\">\n <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n </span>\n </ng-template>\n\n <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n <div class=\"tooltip-content\">\n <lib-typography defaultText=\"Remove\"></lib-typography>\n </div>\n </lib-tooltip>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n </kendo-dropdownbutton>\n </ng-template>\n </kendo-grid-column>\n </ng-container>\n\n <ng-template kendoGridDetailTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n </ng-template>\n\n <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n <div [ngClass]=\"expandColumnClass()\">\n <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n class=\"expand-column-text\">\n Already added\n </span>\n <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n </kendo-button>\n </div>\n </ng-template>\n </kendo-grid-column>\n\n <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n </div>\n </ng-template>\n\n </kendo-grid>\n</div>", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link .k-column-title,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link .k-column-title{text-overflow:clip!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}\n"] }]
5120
5192
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { columnTemplates: [{
5121
5193
  type: ContentChildren,
5122
5194
  args: [CustomColumnTemplate]
@@ -5135,11 +5207,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5135
5207
  }], gridElement: [{
5136
5208
  type: ViewChild,
5137
5209
  args: ['gridElement']
5210
+ }], selectAllCheckbox: [{
5211
+ type: ViewChild,
5212
+ args: ['selectAllCheckbox']
5138
5213
  }], selectAllMessageElement: [{
5139
5214
  type: ViewChild,
5140
5215
  args: ['selectAllMessageElement']
5141
- }], gridView: [{
5142
- type: Input
5143
5216
  }], skip: [{
5144
5217
  type: Input
5145
5218
  }], itemName: [{
@@ -5182,6 +5255,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5182
5255
  type: Input
5183
5256
  }], navigable: [{
5184
5257
  type: Input
5258
+ }], gridHeight: [{
5259
+ type: Input
5185
5260
  }], gridRowSelectByValue: [{
5186
5261
  type: Input
5187
5262
  }], noRecordsContent: [{
@@ -5208,6 +5283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5208
5283
  type: Output
5209
5284
  }], preSelected: [{
5210
5285
  type: Input
5286
+ }], gridView: [{
5287
+ type: Input
5211
5288
  }], onPageChange: [{
5212
5289
  type: Output
5213
5290
  }], ignoreColumnCellClick: [{
@@ -5252,20 +5329,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5252
5329
  type: Input
5253
5330
  }], columnContentNoWrap: [{
5254
5331
  type: Input
5255
- }], resize: [{
5256
- type: HostListener,
5257
- args: ['window:resize', ['$event']]
5332
+ }], infiniteScrollLoader: [{
5333
+ type: Input
5334
+ }], onscrollBottom: [{
5335
+ type: Output
5336
+ }], isInfiniteScrollGrid: [{
5337
+ type: Input
5338
+ }], gridLoading: [{
5339
+ type: Input
5258
5340
  }] } });
5259
5341
 
5260
- class GridPaginationSpacerComponent {
5261
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5262
- 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"] }] }); }
5263
- }
5264
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, decorators: [{
5265
- type: Component,
5266
- args: [{ selector: 'lib-grid-pagination-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
5267
- }] });
5268
-
5269
5342
  class GridPaginationModule {
5270
5343
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
5271
5344
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, declarations: [GridPaginationComponent,