@progress/kendo-angular-grid 19.0.0-develop.24 → 19.0.0-develop.25

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 (25) hide show
  1. package/column-menu/column-menu-item.component.d.ts +16 -3
  2. package/esm2022/adaptiveness/adaptive-renderer.component.mjs +1 -1
  3. package/esm2022/column-menu/column-menu-autosize-all.component.mjs +1 -1
  4. package/esm2022/column-menu/column-menu-autosize.component.mjs +1 -1
  5. package/esm2022/column-menu/column-menu-chooser.component.mjs +1 -1
  6. package/esm2022/column-menu/column-menu-filter.component.mjs +1 -1
  7. package/esm2022/column-menu/column-menu-item.component.mjs +33 -11
  8. package/esm2022/column-menu/column-menu-lock.component.mjs +1 -1
  9. package/esm2022/column-menu/column-menu-position.component.mjs +1 -1
  10. package/esm2022/column-menu/column-menu-sort.component.mjs +1 -1
  11. package/esm2022/column-menu/column-menu-stick.component.mjs +1 -1
  12. package/esm2022/grid.component.mjs +65 -9
  13. package/esm2022/package-metadata.mjs +2 -2
  14. package/esm2022/rendering/toolbar/tools/column-chooser-tool.directive.mjs +2 -0
  15. package/esm2022/rendering/toolbar/tools/filter-command-tool.directive.mjs +14 -3
  16. package/esm2022/rendering/toolbar/tools/filter-tool-wrapper.component.mjs +1 -0
  17. package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs +56 -8
  18. package/esm2022/rendering/toolbar/tools/sort-command-tool.directive.mjs +14 -4
  19. package/fesm2022/progress-kendo-angular-grid.mjs +192 -44
  20. package/grid.component.d.ts +13 -0
  21. package/package.json +21 -21
  22. package/rendering/toolbar/tools/filter-command-tool.directive.d.ts +5 -0
  23. package/rendering/toolbar/tools/filter-toolbar-tool.component.d.ts +10 -2
  24. package/rendering/toolbar/tools/sort-command-tool.directive.d.ts +5 -0
  25. package/schematics/ngAdd/index.js +4 -4
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { EventEmitter, OnChanges, AfterViewInit, NgZone } from '@angular/core';
5
+ import { EventEmitter, OnChanges, AfterViewInit, NgZone, ElementRef } from '@angular/core';
6
6
  import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
7
7
  import { SVGIcon } from '@progress/kendo-svg-icons';
8
8
  import { ColumnMenuService } from './column-menu.service';
@@ -28,6 +28,7 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
28
28
  private ngZone;
29
29
  ctx: ContextService;
30
30
  adaptiveGridService: AdaptiveGridService;
31
+ element: ElementRef;
31
32
  /**
32
33
  * @hidden
33
34
  */
@@ -57,6 +58,14 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
57
58
  * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
58
59
  */
59
60
  svgIcon: SVGIcon;
61
+ /**
62
+ * @hidden
63
+ */
64
+ indicatorIcon: string;
65
+ /**
66
+ * @hidden
67
+ */
68
+ indicatorSVGIcon: SVGIcon;
60
69
  /**
61
70
  * Specifies the item text.
62
71
  */
@@ -73,6 +82,10 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
73
82
  * Specifies if the item is expanded.
74
83
  */
75
84
  expanded: boolean;
85
+ /**
86
+ * @hidden
87
+ */
88
+ focused: boolean;
76
89
  /**
77
90
  * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
78
91
  * Required to include the item in the column menu keyboard navigation sequence.
@@ -95,7 +108,7 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
95
108
  get hasFilters(): boolean;
96
109
  get expandedIcon(): string;
97
110
  get expandedSvgIcon(): SVGIcon;
98
- constructor(ngZone: NgZone, ctx: ContextService, adaptiveGridService: AdaptiveGridService);
111
+ constructor(ngZone: NgZone, ctx: ContextService, adaptiveGridService: AdaptiveGridService, element: ElementRef);
99
112
  ngAfterViewInit(): void;
100
113
  ngOnChanges(changes: any): void;
101
114
  /**
@@ -116,5 +129,5 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
116
129
  onClick(e: any): void;
117
130
  private updateContentState;
118
131
  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuItemComponent, never>;
119
- static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-grid-columnmenu-item", never, { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never, true, never>;
132
+ static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-grid-columnmenu-item", never, { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "indicatorIcon": { "alias": "indicatorIcon"; "required": false; }; "indicatorSVGIcon": { "alias": "indicatorSVGIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "service": { "alias": "service"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never, true, never>;
120
133
  }
@@ -660,7 +660,7 @@ export class AdaptiveRendererComponent {
660
660
  {{messageFor('filterFilterButton')}}
661
661
  </button>
662
662
  </ng-template>
663
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
663
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
664
664
  }
665
665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
666
666
  type: Component,
@@ -58,7 +58,7 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
58
58
  [svgIcon]="displayInlineFlexIcon"
59
59
  (itemClick)="autoSizeAllColumns()"
60
60
  ></kendo-grid-columnmenu-item>
61
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
61
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
62
62
  }
63
63
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
64
64
  type: Component,
@@ -64,7 +64,7 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
64
64
  [svgIcon]="maxWidthIcon"
65
65
  (itemClick)="autoSizeColumn()"
66
66
  ></kendo-grid-columnmenu-item>
67
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
67
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
68
68
  }
69
69
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
70
70
  type: Component,
@@ -118,7 +118,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
118
118
  </kendo-grid-columnlist>
119
119
  </ng-template>
120
120
  </kendo-grid-columnmenu-item>
121
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
121
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
122
122
  }
123
123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
124
124
  type: Component,
@@ -97,7 +97,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
97
97
  </kendo-grid-filter-menu-container>
98
98
  </ng-template>
99
99
  </kendo-grid-columnmenu-item>
100
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
100
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
101
101
  }
102
102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
103
103
  type: Component,
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input, Output, EventEmitter, ContentChild, NgZone } from '@angular/core';
5
+ import { Component, Input, Output, EventEmitter, ContentChild, NgZone, ElementRef } from '@angular/core';
6
6
  import { trigger, transition, style, animate, state } from '@angular/animations';
7
7
  import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
8
8
  import { chevronDownIcon, chevronRightIcon, chevronUpIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
@@ -37,6 +37,7 @@ export class ColumnMenuItemComponent {
37
37
  ngZone;
38
38
  ctx;
39
39
  adaptiveGridService;
40
+ element;
40
41
  /**
41
42
  * @hidden
42
43
  */
@@ -66,6 +67,14 @@ export class ColumnMenuItemComponent {
66
67
  * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
67
68
  */
68
69
  svgIcon;
70
+ /**
71
+ * @hidden
72
+ */
73
+ indicatorIcon;
74
+ /**
75
+ * @hidden
76
+ */
77
+ indicatorSVGIcon;
69
78
  /**
70
79
  * Specifies the item text.
71
80
  */
@@ -82,6 +91,10 @@ export class ColumnMenuItemComponent {
82
91
  * Specifies if the item is expanded.
83
92
  */
84
93
  expanded;
94
+ /**
95
+ * @hidden
96
+ */
97
+ focused;
85
98
  /**
86
99
  * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
87
100
  * Required to include the item in the column menu keyboard navigation sequence.
@@ -116,10 +129,11 @@ export class ColumnMenuItemComponent {
116
129
  }
117
130
  return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
118
131
  }
119
- constructor(ngZone, ctx, adaptiveGridService) {
132
+ constructor(ngZone, ctx, adaptiveGridService, element) {
120
133
  this.ngZone = ngZone;
121
134
  this.ctx = ctx;
122
135
  this.adaptiveGridService = adaptiveGridService;
136
+ this.element = element;
123
137
  }
124
138
  ngAfterViewInit() {
125
139
  this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -177,8 +191,8 @@ export class ColumnMenuItemComponent {
177
191
  updateContentState() {
178
192
  this.contentState = this.expanded ? 'expanded' : 'collapsed';
179
193
  }
180
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: i1.ContextService }, { token: i2.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
181
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service", column: "column" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
194
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: i1.ContextService }, { token: i2.AdaptiveGridService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
195
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", indicatorIcon: "indicatorIcon", indicatorSVGIcon: "indicatorSVGIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", focused: "focused", service: "service", column: "column" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
182
196
  <div *ngIf="contentTemplate; else content" class="k-expander">
183
197
  <ng-container [ngTemplateOutlet]="content"></ng-container>
184
198
  </div>
@@ -190,6 +204,7 @@ export class ColumnMenuItemComponent {
190
204
  (keydown.enter)="onClick($event)"
191
205
  [class.k-selected]="selected"
192
206
  [class.k-disabled]="disabled"
207
+ [class.k-focus]="focused"
193
208
  role="button"
194
209
  [attr.aria-expanded]="expanded"
195
210
  [attr.aria-controls]="expanded ? contentId : undefined">
@@ -198,11 +213,11 @@ export class ColumnMenuItemComponent {
198
213
  [name]="icon"
199
214
  [svgIcon]="svgIcon"></kendo-icon-wrapper>
200
215
  {{ text }}
201
- <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
216
+ <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
202
217
  class="k-columnmenu-indicators">
203
218
  <kendo-icon-wrapper
204
- [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
205
- [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
219
+ [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
220
+ [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
206
221
  </kendo-icon-wrapper>
207
222
  <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
208
223
  </span>
@@ -288,6 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
288
303
  (keydown.enter)="onClick($event)"
289
304
  [class.k-selected]="selected"
290
305
  [class.k-disabled]="disabled"
306
+ [class.k-focus]="focused"
291
307
  role="button"
292
308
  [attr.aria-expanded]="expanded"
293
309
  [attr.aria-controls]="expanded ? contentId : undefined">
@@ -296,11 +312,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
296
312
  [name]="icon"
297
313
  [svgIcon]="svgIcon"></kendo-icon-wrapper>
298
314
  {{ text }}
299
- <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
315
+ <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
300
316
  class="k-columnmenu-indicators">
301
317
  <kendo-icon-wrapper
302
- [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
303
- [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
318
+ [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
319
+ [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
304
320
  </kendo-icon-wrapper>
305
321
  <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
306
322
  </span>
@@ -327,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
327
343
  standalone: true,
328
344
  imports: [IconWrapperComponent, NgIf, NgTemplateOutlet]
329
345
  }]
330
- }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ContextService }, { type: i2.AdaptiveGridService }]; }, propDecorators: { itemClick: [{
346
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ContextService }, { type: i2.AdaptiveGridService }, { type: i0.ElementRef }]; }, propDecorators: { itemClick: [{
331
347
  type: Output
332
348
  }], expand: [{
333
349
  type: Output
@@ -337,6 +353,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
337
353
  type: Input
338
354
  }], svgIcon: [{
339
355
  type: Input
356
+ }], indicatorIcon: [{
357
+ type: Input
358
+ }], indicatorSVGIcon: [{
359
+ type: Input
340
360
  }], text: [{
341
361
  type: Input
342
362
  }], selected: [{
@@ -345,6 +365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
345
365
  type: Input
346
366
  }], expanded: [{
347
367
  type: Input
368
+ }], focused: [{
369
+ type: Input
348
370
  }], service: [{
349
371
  type: Input
350
372
  }], column: [{
@@ -89,7 +89,7 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
89
89
  (itemClick)="toggleColumn()"
90
90
  [disabled]="disabled">
91
91
  </kendo-grid-columnmenu-item>
92
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
92
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
93
93
  }
94
94
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
95
95
  type: Component,
@@ -138,7 +138,7 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
138
138
  </kendo-grid-columnmenu-stick>
139
139
  </ng-template>
140
140
  </kendo-grid-columnmenu-item>
141
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }] });
141
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }] });
142
142
  }
143
143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
144
144
  type: Component,
@@ -91,7 +91,7 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
91
91
  (itemClick)="toggleSort('desc')"
92
92
  [selected]="sortedDesc">
93
93
  </kendo-grid-columnmenu-item>
94
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
94
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
95
95
  }
96
96
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
97
97
  type: Component,
@@ -91,7 +91,7 @@ export class ColumnMenuStickComponent extends ColumnMenuItemBase {
91
91
  (itemClick)="toggleColumn()"
92
92
  [disabled]="disabled">
93
93
  </kendo-grid-columnmenu-item>
94
- `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
94
+ `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
95
95
  }
96
96
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuStickComponent, decorators: [{
97
97
  type: Component,
@@ -915,6 +915,39 @@ export class GridComponent {
915
915
  get scrollbarWidth() {
916
916
  return this.supportService.scrollbarWidth;
917
917
  }
918
+ get showPagerInput() {
919
+ return this._showPagerInput;
920
+ }
921
+ set showPagerInput(value) {
922
+ if (this._showPagerInput === value) {
923
+ return;
924
+ }
925
+ this._showPagerInput = value;
926
+ }
927
+ get showPagerPageText() {
928
+ return this._showPagerPageText;
929
+ }
930
+ set showPagerPageText(value) {
931
+ if (!this.normalizedPageableSettings?.responsive) {
932
+ this._showPagerPageText = true;
933
+ }
934
+ if (this._showPagerPageText === value) {
935
+ return;
936
+ }
937
+ this._showPagerPageText = value;
938
+ }
939
+ get showPagerItemsText() {
940
+ return this._showPagerItemsText;
941
+ }
942
+ set showPagerItemsText(value) {
943
+ if (!this.normalizedPageableSettings?.responsive) {
944
+ this._showPagerItemsText = true;
945
+ }
946
+ if (this._showPagerItemsText === value) {
947
+ return;
948
+ }
949
+ this._showPagerItemsText = value;
950
+ }
918
951
  get headerPadding() {
919
952
  if (isUniversal()) {
920
953
  return '';
@@ -985,6 +1018,9 @@ export class GridComponent {
985
1018
  _navigable = ['table', 'pager', 'toolbar'];
986
1019
  _size = 'medium';
987
1020
  _loading = false;
1021
+ _showPagerInput = true;
1022
+ _showPagerPageText = true;
1023
+ _showPagerItemsText = true;
988
1024
  get isVirtual() {
989
1025
  return this.scrollable === 'virtual';
990
1026
  }
@@ -1627,6 +1663,12 @@ export class GridComponent {
1627
1663
  }
1628
1664
  this.pageChange.emit(event);
1629
1665
  }
1666
+ /**
1667
+ * @hidden
1668
+ */
1669
+ handlePagerVisibilityChange(prop, ev) {
1670
+ this[prop] = ev;
1671
+ }
1630
1672
  /**
1631
1673
  * @hidden
1632
1674
  */
@@ -2707,7 +2749,10 @@ export class GridComponent {
2707
2749
  [pageSizeValues]="normalizedPageableSettings.pageSizes"
2708
2750
  [previousNext]="normalizedPageableSettings.previousNext"
2709
2751
  [type]="normalizedPageableSettings.type"
2710
- (pageChange)="notifyPageChange('pager', $event)">
2752
+ (pageChange)="notifyPageChange('pager', $event)"
2753
+ (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
2754
+ (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
2755
+ (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
2711
2756
  <ng-template kendoPagerTemplate>
2712
2757
  <ng-container
2713
2758
  [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -3030,7 +3075,10 @@ export class GridComponent {
3030
3075
  [pageSizeValues]="normalizedPageableSettings.pageSizes"
3031
3076
  [previousNext]="normalizedPageableSettings.previousNext"
3032
3077
  [type]="normalizedPageableSettings.type"
3033
- (pageChange)="notifyPageChange('pager', $event)">
3078
+ (pageChange)="notifyPageChange('pager', $event)"
3079
+ (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
3080
+ (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
3081
+ (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
3034
3082
  <ng-template kendoPagerTemplate>
3035
3083
  <ng-container
3036
3084
  [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -3078,12 +3126,13 @@ export class GridComponent {
3078
3126
  *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
3079
3127
  [buttonCount]="normalizedPageableSettings.buttonCount">
3080
3128
  </kendo-pager-numeric-buttons>
3081
- <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
3129
+ <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input' || showPagerInput" [showPageText]="showPagerPageText"></kendo-pager-input>
3082
3130
  <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
3083
3131
  </div>
3084
3132
  <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
3085
3133
  [size]="size"
3086
- [pageSizes]="normalizedPageableSettings.pageSizes">
3134
+ [pageSizes]="normalizedPageableSettings.pageSizes"
3135
+ [showItemsText]="showPagerItemsText">
3087
3136
  </kendo-pager-page-sizes>
3088
3137
  <kendo-pager-info *ngIf="normalizedPageableSettings.info">
3089
3138
  </kendo-pager-info>
@@ -3093,7 +3142,7 @@ export class GridComponent {
3093
3142
  <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
3094
3143
 
3095
3144
  <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
3096
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i27.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i27.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i27.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i27.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i27.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i27.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i27.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i27.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i27.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
3145
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i27.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i27.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i27.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i27.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i27.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i27.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i27.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i27.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i27.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
3097
3146
  }
3098
3147
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
3099
3148
  type: Component,
@@ -3511,7 +3560,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3511
3560
  [pageSizeValues]="normalizedPageableSettings.pageSizes"
3512
3561
  [previousNext]="normalizedPageableSettings.previousNext"
3513
3562
  [type]="normalizedPageableSettings.type"
3514
- (pageChange)="notifyPageChange('pager', $event)">
3563
+ (pageChange)="notifyPageChange('pager', $event)"
3564
+ (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
3565
+ (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
3566
+ (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
3515
3567
  <ng-template kendoPagerTemplate>
3516
3568
  <ng-container
3517
3569
  [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -3834,7 +3886,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3834
3886
  [pageSizeValues]="normalizedPageableSettings.pageSizes"
3835
3887
  [previousNext]="normalizedPageableSettings.previousNext"
3836
3888
  [type]="normalizedPageableSettings.type"
3837
- (pageChange)="notifyPageChange('pager', $event)">
3889
+ (pageChange)="notifyPageChange('pager', $event)"
3890
+ (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
3891
+ (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
3892
+ (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
3838
3893
  <ng-template kendoPagerTemplate>
3839
3894
  <ng-container
3840
3895
  [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -3882,12 +3937,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3882
3937
  *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
3883
3938
  [buttonCount]="normalizedPageableSettings.buttonCount">
3884
3939
  </kendo-pager-numeric-buttons>
3885
- <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
3940
+ <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input' || showPagerInput" [showPageText]="showPagerPageText"></kendo-pager-input>
3886
3941
  <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
3887
3942
  </div>
3888
3943
  <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
3889
3944
  [size]="size"
3890
- [pageSizes]="normalizedPageableSettings.pageSizes">
3945
+ [pageSizes]="normalizedPageableSettings.pageSizes"
3946
+ [showItemsText]="showPagerItemsText">
3891
3947
  </kendo-pager-page-sizes>
3892
3948
  <kendo-pager-info *ngIf="normalizedPageableSettings.info">
3893
3949
  </kendo-pager-info>
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1747666920,
14
- version: '19.0.0-develop.24',
13
+ publishDate: 1747671447,
14
+ version: '19.0.0-develop.25',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
@@ -149,6 +149,7 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
149
149
  this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
150
150
  this.buttonElement?.setAttribute('aria-expanded', 'true');
151
151
  this.buttonElement?.setAttribute('aria-controls', popupId);
152
+ this.host.selected = true;
152
153
  const columnList = this.popupRef.content.instance;
153
154
  columnList.isLast = true;
154
155
  columnList.autoSync = this.autoSync;
@@ -180,6 +181,7 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
180
181
  this.popupRef = null;
181
182
  this.buttonElement?.setAttribute('aria-expanded', 'false');
182
183
  this.buttonElement?.removeAttribute('aria-controls');
184
+ this.host.selected = false;
183
185
  focusAnchor && this.buttonElement?.focus();
184
186
  }
185
187
  get buttonElement() {
@@ -53,6 +53,12 @@ export class FilterCommandToolbarDirective {
53
53
  toolSubs = new Subscription();
54
54
  popupSubs;
55
55
  removeClickListener;
56
+ /**
57
+ * @hidden
58
+ */
59
+ isFilterApplied(filter) {
60
+ return isPresent(filter) && filter.filters?.length > 0;
61
+ }
56
62
  constructor(host, popupService, ctx, filterService, columnInfoService, ngZone, renderer, adaptiveGridService) {
57
63
  this.host = host;
58
64
  this.popupService = popupService;
@@ -66,8 +72,9 @@ export class FilterCommandToolbarDirective {
66
72
  ngOnInit() {
67
73
  this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
68
74
  this.toolSubs.add(this.filterService.changes.subscribe(filter => {
69
- this.host.showBadge = isPresent(filter) && filter.filters.length > 0;
75
+ this.host.showBadge = this.isFilterApplied(filter);
70
76
  }));
77
+ this.host.showBadge = this.isFilterApplied(this.ctx.grid.filter);
71
78
  const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
72
79
  const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
73
80
  const hasIcon = hasToolbarIcon && hasOverflowIcon;
@@ -87,7 +94,7 @@ export class FilterCommandToolbarDirective {
87
94
  }
88
95
  this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
89
96
  this.buttonElement?.setAttribute('aria-expanded', 'false');
90
- this.buttonElement?.setAttribute('title', this.ctx.localization.get('filter'));
97
+ this.buttonElement?.setAttribute('title', this.ctx.localization.get('filterToolbarToolText'));
91
98
  }
92
99
  ngOnDestroy() {
93
100
  if (this.toolSubs) {
@@ -132,13 +139,16 @@ export class FilterCommandToolbarDirective {
132
139
  });
133
140
  this.adaptiveGridService.popupRef = this.popupRef;
134
141
  this.setPopupAttributes();
142
+ this.host.selected = true;
135
143
  this.ngZone.runOutsideAngular(() => {
136
144
  if (!isDocumentAvailable()) {
137
145
  return;
138
146
  }
139
147
  this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
140
148
  if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
141
- this.closePopup();
149
+ this.ngZone.run(() => {
150
+ this.closePopup();
151
+ });
142
152
  }
143
153
  });
144
154
  });
@@ -172,6 +182,7 @@ export class FilterCommandToolbarDirective {
172
182
  closePopup() {
173
183
  this.buttonElement?.setAttribute('aria-expanded', 'false');
174
184
  this.buttonElement?.removeAttribute('aria-controls');
185
+ this.host.selected = false;
175
186
  if (this.popupRef) {
176
187
  this.popupRef.close();
177
188
  this.popupRef = null;
@@ -38,6 +38,7 @@ export class FilterToolWrapperComponent {
38
38
  columnInfoService;
39
39
  set ctx(ctx) {
40
40
  this._ctx = ctx;
41
+ this.filter = ctx.grid.filter;
41
42
  this.createPopup();
42
43
  }
43
44
  get ctx() {