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

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -11991,6 +11991,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
             this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
             this.buttonElement?.setAttribute('aria-expanded', 'true');
             this.buttonElement?.setAttribute('aria-controls', popupId);
+            this.host.selected = true;
             const columnList = this.popupRef.content.instance;
             columnList.isLast = true;
             columnList.autoSync = this.autoSync;
@@ -12022,6 +12023,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
         this.popupRef = null;
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
         focusAnchor && this.buttonElement?.focus();
     }
     get buttonElement() {
@@ -12200,6 +12202,7 @@ class ColumnMenuItemComponent {
     ngZone;
     ctx;
     adaptiveGridService;
+    element;
     /**
      * @hidden
      */
@@ -12229,6 +12232,14 @@ class ColumnMenuItemComponent {
      * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
+    /**
+     * @hidden
+     */
+    indicatorIcon;
+    /**
+     * @hidden
+     */
+    indicatorSVGIcon;
     /**
      * Specifies the item text.
      */
@@ -12245,6 +12256,10 @@ class ColumnMenuItemComponent {
      * Specifies if the item is expanded.
      */
     expanded;
+    /**
+     * @hidden
+     */
+    focused;
     /**
      * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
      * Required to include the item in the column menu keyboard navigation sequence.
@@ -12279,10 +12294,11 @@ class ColumnMenuItemComponent {
         }
         return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
     }
-    constructor(ngZone, ctx, adaptiveGridService) {
+    constructor(ngZone, ctx, adaptiveGridService, element) {
         this.ngZone = ngZone;
         this.ctx = ctx;
         this.adaptiveGridService = adaptiveGridService;
+        this.element = element;
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -12340,8 +12356,8 @@ class ColumnMenuItemComponent {
     updateContentState() {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: ContextService }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: ContextService }, { token: AdaptiveGridService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    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: `
         <div *ngIf="contentTemplate; else content" class="k-expander">
             <ng-container [ngTemplateOutlet]="content"></ng-container>
         </div>
@@ -12353,6 +12369,7 @@ class ColumnMenuItemComponent {
                 (keydown.enter)="onClick($event)"
                 [class.k-selected]="selected"
                 [class.k-disabled]="disabled"
+                [class.k-focus]="focused"
                 role="button"
                 [attr.aria-expanded]="expanded"
                 [attr.aria-controls]="expanded ? contentId : undefined">
@@ -12361,11 +12378,11 @@ class ColumnMenuItemComponent {
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
                         class="k-columnmenu-indicators">
                     <kendo-icon-wrapper
-                        [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
-                        [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
+                        [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
+                        [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
                     </kendo-icon-wrapper>
                     <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
                 </span>
@@ -12451,6 +12468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (keydown.enter)="onClick($event)"
                 [class.k-selected]="selected"
                 [class.k-disabled]="disabled"
+                [class.k-focus]="focused"
                 role="button"
                 [attr.aria-expanded]="expanded"
                 [attr.aria-controls]="expanded ? contentId : undefined">
@@ -12459,11 +12477,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
                         class="k-columnmenu-indicators">
                     <kendo-icon-wrapper
-                        [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
-                        [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
+                        [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
+                        [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
                     </kendo-icon-wrapper>
                     <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
                 </span>
@@ -12490,7 +12508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [IconWrapperComponent, NgIf, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ContextService }, { type: AdaptiveGridService }]; }, propDecorators: { itemClick: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ContextService }, { type: AdaptiveGridService }, { type: i0.ElementRef }]; }, propDecorators: { itemClick: [{
                 type: Output
             }], expand: [{
                 type: Output
@@ -12500,6 +12518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], indicatorIcon: [{
+                type: Input
+            }], indicatorSVGIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -12508,6 +12530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], focused: [{
+                type: Input
             }], service: [{
                 type: Input
             }], column: [{
@@ -12563,7 +12587,7 @@ class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
         ></kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
@@ -12635,7 +12659,7 @@ class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
         ></kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
@@ -12763,7 +12787,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
@@ -12887,7 +12911,7 @@ class ColumnMenuStickComponent extends ColumnMenuItemBase {
            (itemClick)="toggleColumn()"
            [disabled]="disabled">
         </kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuStickComponent, decorators: [{
             type: Component,
@@ -12985,7 +13009,7 @@ class ColumnMenuLockComponent extends ColumnMenuItemBase {
             (itemClick)="toggleColumn()"
             [disabled]="disabled">
        </kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,
@@ -13130,7 +13154,7 @@ class ColumnMenuPositionComponent extends ColumnMenuItemBase {
                 </kendo-grid-columnmenu-stick>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, 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" }] });
+    `, 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
             type: Component,
@@ -13262,7 +13286,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
                 </kendo-grid-filter-menu-container>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
@@ -13565,7 +13589,7 @@ class ColumnMenuSortComponent extends ColumnMenuItemBase {
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,
@@ -20421,8 +20445,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1747666920,
-    version: '19.0.0-develop.24',
+    publishDate: 1747728167,
+    version: '19.0.0-develop.26',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -24324,6 +24348,7 @@ class FilterToolbarToolComponent {
     filterService;
     ctx;
     columnInfoService;
+    ngZone;
     adaptiveGridService;
     filterItems;
     menuItems;
@@ -24339,12 +24364,45 @@ class FilterToolbarToolComponent {
     columnMenuService;
     columns;
     filter;
+    activeFilterSVGIcon = filterIcon;
+    activeFilterIcon = 'k-i-filter';
+    isFilterApplied(column) {
+        if (!this.filter?.filters) {
+            return false;
+        }
+        if (Array.isArray(this.filter.filters)) {
+            for (const filterGroup of this.filter.filters) {
+                if (filterGroup.filters && Array.isArray(filterGroup.filters)) {
+                    for (const filter of filterGroup.filters) {
+                        if (filter.field === column.field) {
+                            return true;
+                        }
+                    }
+                }
+                else if (filterGroup.field === column.field) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    isItemFocused(filterItem) {
+        return this.currentFocusedItem === filterItem;
+    }
+    onItemFocus(item) {
+        this.currentFocusedItem = item;
+    }
+    onItemFocusOut() {
+        this.currentFocusedItem = null;
+    }
+    currentFocusedItem = null;
     subscriptions;
-    constructor(element, filterService, ctx, columnInfoService, adaptiveGridService) {
+    constructor(element, filterService, ctx, columnInfoService, ngZone, adaptiveGridService) {
         this.element = element;
         this.filterService = filterService;
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
+        this.ngZone = ngZone;
         this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
@@ -24355,7 +24413,9 @@ class FilterToolbarToolComponent {
         });
     }
     ngAfterViewInit() {
-        this.filterItems?.get(0)?.nativeElement.focus();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.filterItems?.get(0)?.nativeElement.focus();
+        });
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -24399,7 +24459,7 @@ class FilterToolbarToolComponent {
             menuItem.contentState = 'expanded';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: FilterService }, { token: ContextService }, { token: ColumnInfoService }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: FilterService }, { token: ContextService }, { token: ColumnInfoService }, { token: i0.NgZone }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolbarToolComponent, isStandalone: true, selector: "kendo-filter-toolbar-tool", outputs: { close: "close" }, viewQueries: [{ propertyName: "filterItems", predicate: ["filterItem"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["filterItem"], descendants: true }, { propertyName: "filterContainers", predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: `
         <div [style]="hostStyles">
             <kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
@@ -24408,9 +24468,14 @@ class FilterToolbarToolComponent {
                 tabindex="0"
                 [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
+                [indicatorSVGIcon]="isFilterApplied(column) ? activeFilterSVGIcon : null"
+                [indicatorIcon]="isFilterApplied(column) ? activeFilterIcon : null"
                 (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false">
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -24423,7 +24488,7 @@ class FilterToolbarToolComponent {
                 </ng-template>
             </kendo-grid-columnmenu-item>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { 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]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { 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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, decorators: [{
             type: Component,
@@ -24437,9 +24502,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 tabindex="0"
                 [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
+                [indicatorSVGIcon]="isFilterApplied(column) ? activeFilterSVGIcon : null"
+                [indicatorIcon]="isFilterApplied(column) ? activeFilterIcon : null"
                 (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false">
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -24456,7 +24526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgFor, KENDO_BUTTON, FilterMenuContainerComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FilterService }, { type: ContextService }, { type: ColumnInfoService }, { type: AdaptiveGridService }]; }, propDecorators: { filterItems: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FilterService }, { type: ContextService }, { type: ColumnInfoService }, { type: i0.NgZone }, { type: AdaptiveGridService }]; }, propDecorators: { filterItems: [{
                 type: ViewChildren,
                 args: ['filterItem', { read: ElementRef }]
             }], menuItems: [{
@@ -25684,7 +25754,7 @@ class AdaptiveRendererComponent {
                 {{messageFor('filterFilterButton')}}
             </button>
         </ng-template>
-    `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -26916,6 +26986,39 @@ class GridComponent {
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
+    get showPagerInput() {
+        return this._showPagerInput;
+    }
+    set showPagerInput(value) {
+        if (this._showPagerInput === value) {
+            return;
+        }
+        this._showPagerInput = value;
+    }
+    get showPagerPageText() {
+        return this._showPagerPageText;
+    }
+    set showPagerPageText(value) {
+        if (!this.normalizedPageableSettings?.responsive) {
+            this._showPagerPageText = true;
+        }
+        if (this._showPagerPageText === value) {
+            return;
+        }
+        this._showPagerPageText = value;
+    }
+    get showPagerItemsText() {
+        return this._showPagerItemsText;
+    }
+    set showPagerItemsText(value) {
+        if (!this.normalizedPageableSettings?.responsive) {
+            this._showPagerItemsText = true;
+        }
+        if (this._showPagerItemsText === value) {
+            return;
+        }
+        this._showPagerItemsText = value;
+    }
     get headerPadding() {
         if (isUniversal()) {
             return '';
@@ -26986,6 +27089,9 @@ class GridComponent {
     _navigable = ['table', 'pager', 'toolbar'];
     _size = 'medium';
     _loading = false;
+    _showPagerInput = true;
+    _showPagerPageText = true;
+    _showPagerItemsText = true;
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -27628,6 +27734,12 @@ class GridComponent {
         }
         this.pageChange.emit(event);
     }
+    /**
+     * @hidden
+     */
+    handlePagerVisibilityChange(prop, ev) {
+        this[prop] = ev;
+    }
     /**
      * @hidden
      */
@@ -28708,7 +28820,10 @@ class GridComponent {
             [pageSizeValues]="normalizedPageableSettings.pageSizes"
             [previousNext]="normalizedPageableSettings.previousNext"
             [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)">
+            (pageChange)="notifyPageChange('pager', $event)"
+            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
+            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
+            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
             <ng-template kendoPagerTemplate>
                 <ng-container
                     [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -29031,7 +29146,10 @@ class GridComponent {
             [pageSizeValues]="normalizedPageableSettings.pageSizes"
             [previousNext]="normalizedPageableSettings.previousNext"
             [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)">
+            (pageChange)="notifyPageChange('pager', $event)"
+            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
+            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
+            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
             <ng-template kendoPagerTemplate>
                 <ng-container 
                     [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -29079,12 +29197,13 @@ class GridComponent {
                     *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
                     [buttonCount]="normalizedPageableSettings.buttonCount">
                 </kendo-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input' || showPagerInput" [showPageText]="showPagerPageText"></kendo-pager-input>
                 <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
             </div>
             <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
                 [size]="size"
-                [pageSizes]="normalizedPageableSettings.pageSizes">
+                [pageSizes]="normalizedPageableSettings.pageSizes"
+                [showItemsText]="showPagerItemsText">
             </kendo-pager-page-sizes>
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
@@ -29094,7 +29213,7 @@ class GridComponent {
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, 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: i50.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i50.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i50.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i50.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i50.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i50.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i50.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i50.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i50.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 });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, 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: i50.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i50.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i50.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i50.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i50.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i50.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i50.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i50.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i50.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -29512,7 +29631,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [pageSizeValues]="normalizedPageableSettings.pageSizes"
             [previousNext]="normalizedPageableSettings.previousNext"
             [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)">
+            (pageChange)="notifyPageChange('pager', $event)"
+            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
+            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
+            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
             <ng-template kendoPagerTemplate>
                 <ng-container
                     [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -29835,7 +29957,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [pageSizeValues]="normalizedPageableSettings.pageSizes"
             [previousNext]="normalizedPageableSettings.previousNext"
             [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)">
+            (pageChange)="notifyPageChange('pager', $event)"
+            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
+            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
+            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
             <ng-template kendoPagerTemplate>
                 <ng-container 
                     [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
@@ -29883,12 +30008,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
                     [buttonCount]="normalizedPageableSettings.buttonCount">
                 </kendo-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-input [size]="size" *ngIf="normalizedPageableSettings.type === 'input' || showPagerInput" [showPageText]="showPagerPageText"></kendo-pager-input>
                 <kendo-pager-next-buttons [size]="size" *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
             </div>
             <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
                 [size]="size"
-                [pageSizes]="normalizedPageableSettings.pageSizes">
+                [pageSizes]="normalizedPageableSettings.pageSizes"
+                [showItemsText]="showPagerItemsText">
             </kendo-pager-page-sizes>
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
@@ -32586,6 +32712,12 @@ class SortCommandToolbarDirective {
     toolSubs = new Subscription();
     popupSubs;
     removeClickListener;
+    /**
+     * @hidden
+     */
+    isSortingApplied(sort) {
+        return isPresent$1(sort) && sort.length > 0 && sort.filter(item => item.dir !== undefined).length > 0;
+    }
     constructor(host, popupService, ctx, sortService, columnInfoService, ngZone, renderer, adaptiveGridService) {
         this.host = host;
         this.popupService = popupService;
@@ -32599,9 +32731,9 @@ class SortCommandToolbarDirective {
     ngOnInit() {
         this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
         this.toolSubs.add(this.sortService.changes.subscribe(sort => {
-            const isSortingApplied = isPresent$1(sort) && sort.length > 0 && sort.filter(item => item.dir !== undefined).length > 0;
-            this.host.showBadge = isSortingApplied;
+            this.host.showBadge = this.isSortingApplied(sort);
         }));
+        this.host.showBadge = this.isSortingApplied(this.ctx.grid.sort);
         const hasToolbarIcon = isPresent$1(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
         const hasOverflowIcon = isPresent$1(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
         const hasIcon = hasToolbarIcon && hasOverflowIcon;
@@ -32621,7 +32753,7 @@ class SortCommandToolbarDirective {
         }
         this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
         this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.setAttribute('title', this.ctx.localization.get('sortable'));
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('sortToolbarToolText'));
     }
     ngOnDestroy() {
         if (this.toolSubs) {
@@ -32667,13 +32799,16 @@ class SortCommandToolbarDirective {
         });
         this.adaptiveGridService.popupRef = this.popupRef;
         this.setPopupAttributes();
+        this.host.selected = true;
         this.ngZone.runOutsideAngular(() => {
             if (!isDocumentAvailable()) {
                 return;
             }
             this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
                 if (this.popupRef && !closest$1(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
-                    this.closePopup();
+                    this.ngZone.run(() => {
+                        this.closePopup();
+                    });
                 }
             });
         });
@@ -32709,6 +32844,7 @@ class SortCommandToolbarDirective {
     closePopup() {
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -32759,6 +32895,7 @@ class FilterToolWrapperComponent {
     columnInfoService;
     set ctx(ctx) {
         this._ctx = ctx;
+        this.filter = ctx.grid.filter;
         this.createPopup();
     }
     get ctx() {
@@ -32902,6 +33039,12 @@ class FilterCommandToolbarDirective {
     toolSubs = new Subscription();
     popupSubs;
     removeClickListener;
+    /**
+     * @hidden
+     */
+    isFilterApplied(filter) {
+        return isPresent$1(filter) && filter.filters?.length > 0;
+    }
     constructor(host, popupService, ctx, filterService, columnInfoService, ngZone, renderer, adaptiveGridService) {
         this.host = host;
         this.popupService = popupService;
@@ -32915,8 +33058,9 @@ class FilterCommandToolbarDirective {
     ngOnInit() {
         this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
         this.toolSubs.add(this.filterService.changes.subscribe(filter => {
-            this.host.showBadge = isPresent$1(filter) && filter.filters.length > 0;
+            this.host.showBadge = this.isFilterApplied(filter);
         }));
+        this.host.showBadge = this.isFilterApplied(this.ctx.grid.filter);
         const hasToolbarIcon = isPresent$1(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
         const hasOverflowIcon = isPresent$1(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
         const hasIcon = hasToolbarIcon && hasOverflowIcon;
@@ -32936,7 +33080,7 @@ class FilterCommandToolbarDirective {
         }
         this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
         this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.setAttribute('title', this.ctx.localization.get('filter'));
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('filterToolbarToolText'));
     }
     ngOnDestroy() {
         if (this.toolSubs) {
@@ -32981,13 +33125,16 @@ class FilterCommandToolbarDirective {
             });
             this.adaptiveGridService.popupRef = this.popupRef;
             this.setPopupAttributes();
+            this.host.selected = true;
             this.ngZone.runOutsideAngular(() => {
                 if (!isDocumentAvailable()) {
                     return;
                 }
                 this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
                     if (this.popupRef && !closest$1(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
-                        this.closePopup();
+                        this.ngZone.run(() => {
+                            this.closePopup();
+                        });
                     }
                 });
             });
@@ -33021,6 +33168,7 @@ class FilterCommandToolbarDirective {
     closePopup() {
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;