@progress/kendo-angular-grid 13.3.1-develop.1 → 13.4.0-develop.10

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692175201,
-    version: '13.3.1-develop.1',
+    publishDate: 1692972014,
+    version: '13.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-numeric-buttons.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { ContextService } from '../common/provider.service';
 import { PagerContextService } from './pager-context.service';
 import { PagerElementComponent } from './pager-element.component';
@@ -19,7 +19,6 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
     constructor(ctx, cd, pagerContext) {
         super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
     }
     /**
      * @hidden
@@ -89,10 +88,12 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
     }
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <select
+            #select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             kendoGridFocusable
+            [style.display]="'none'"
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             [ngClass]="{
@@ -119,7 +120,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -169,8 +170,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
         <select
+            #select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             kendoGridFocusable
+            [style.display]="'none'"
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             [ngClass]="{
@@ -197,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -241,9 +244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], numbersElement: [{
+                type: ViewChild,
+                args: ['numbers', { read: ElementRef }]
             }], buttonCount: [{
                 type: Input
             }] } });

package/esm2020/pager/pager-page-sizes.component.mjs

@@ -109,7 +109,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: i6.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: i6.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/pager/pager.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, HostListener, NgZone, Optional, Inject } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, HostListener, NgZone, Optional, Inject, ViewChild } from '@angular/core';
 import { normalize } from './pager-settings';
 import { PagerTemplateDirective } from './pager-template.directive';
 import { anyChanged, replaceMessagePlaceholder } from '../utils';
@@ -16,6 +16,9 @@ import { FocusGroup } from '../navigation/focus-group';
 import { FocusRoot, FOCUS_ROOT_ACTIVE } from '../navigation/focus-root';
 import { findFocusableChild, findLastFocusableChild } from '../rendering/common/dom-queries';
 import { ContextService } from '../common/provider.service';
+import { PagerInfoComponent } from './pager-info.component';
+import { PagerPageSizesComponent } from './pager-page-sizes.component';
+import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./pager-context.service";
 import * as i2 from "../navigation/navigation.service";
@@ -59,18 +62,33 @@ export class PagerComponent {
             if (this.template || !element) {
                 return;
             }
-            const width = element.offsetWidth;
-            if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-mobile-md');
-                this.renderer.addClass(element, 'k-pager-mobile-sm');
-            }
-            else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-mobile-md');
-                this.renderer.removeClass(element, 'k-pager-mobile-sm');
-            }
-            else {
-                this.clearResponsiveClasses();
-            }
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const width = element.offsetWidth;
+                    if (this.numericButtons) {
+                        const selectElement = this.numericButtons.selectElement.nativeElement;
+                        const numbersElement = this.numericButtons.numbersElement.nativeElement;
+                        this.renderer.removeStyle(numbersElement, 'display');
+                        this.renderer.setStyle(selectElement, 'display', 'none');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.removeStyle(selectElement, 'display');
+                            this.renderer.setStyle(numbersElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerInfo) {
+                        this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_LARGE) {
+                            this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerPageSizes) {
+                        this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        }
+                    }
+                });
+            });
         };
     }
     set options(value) {
@@ -189,12 +207,10 @@ export class PagerComponent {
         }
         const changesInTemplate = changes['template'];
         if (changesInTemplate) {
-            // eslint-disable-next-line no-unused-expressions
-            changesInTemplate.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+            changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
         }
         if (changes['options']) {
-            // eslint-disable-next-line no-unused-expressions
-            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveClasses();
+            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
         }
     }
     ngOnDestroy() {
@@ -220,11 +236,6 @@ export class PagerComponent {
             }
         });
     }
-    clearResponsiveClasses() {
-        const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-mobile-sm');
-        this.renderer.removeClass(element, 'k-pager-mobile-md');
-    }
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.pagerEnabled &&
             target === this.element.nativeElement &&
@@ -247,6 +258,18 @@ export class PagerComponent {
             this.cellContext.focusGroup = this.focusGroup;
         }
     }
+    clearResponsiveStyling() {
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (this.numericButtons) {
+                    this.renderer.removeStyle(this.numericButtons.numbersElement.nativeElement, 'display');
+                    this.renderer.setStyle(this.numericButtons.selectElement.nativeElement, 'display', 'none');
+                }
+                this.pagerInfo && this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                this.pagerPageSizes && this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+            });
+        });
+    }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.ContextService }, { token: CELL_CONTEXT, optional: true }, { token: i4.FocusRoot }, { token: i5.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
 PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
@@ -260,7 +283,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
-        }], usesOnChanges: true, ngImport: i0, template: `
+        }], viewQueries: [{ propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
@@ -274,20 +297,21 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -329,20 +353,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -360,7 +385,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: i4.FocusRoot }, { type: i5.FocusGroup }]; }, propDecorators: { total: [{
+                }] }, { type: i4.FocusRoot }, { type: i5.FocusGroup }]; }, propDecorators: { pagerInfo: [{
+                type: ViewChild,
+                args: [PagerInfoComponent, { read: ElementRef }]
+            }], pagerPageSizes: [{
+                type: ViewChild,
+                args: [PagerPageSizesComponent, { read: ElementRef }]
+            }], numericButtons: [{
+                type: ViewChild,
+                args: [PagerNumericButtonsComponent]
+            }], total: [{
                 type: Input
             }], skip: [{
                 type: Input

package/esm2020/rendering/footer/footer.component.mjs

@@ -42,7 +42,7 @@ export class FooterComponent {
     }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return { ...column.style, ...stickyStyles };
+        return { ...column.footerStyle, ...stickyStyles };
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });

package/esm2020/rendering/groups-expand.directive.mjs

@@ -101,7 +101,15 @@ export class ExpandGroupDirective {
             this.expandedGroupKeys.push(key);
         }
         else {
-            const index = this.expandedGroupKeys.indexOf(key);
+            const index = this.expandedGroupKeys.findIndex(group => {
+                if (this.expandGroupBy) {
+                    return group === key;
+                }
+                else if (key.parentGroupKeys?.length === 0) {
+                    return group.value === key.value;
+                }
+                return JSON.stringify(group) === JSON.stringify(key);
+            });
             this.expandedGroupKeys.splice(index, 1);
         }
         this.expandedGroupKeysChange.emit(this.expandedGroupKeys.slice());

package/esm2020/rendering/header/header.component.mjs

@@ -31,6 +31,7 @@ import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../../common/provider.service';
 import { ColumnReorderEvent } from '../../dragdrop/column-reorder-event';
 import { ColumnsContainer } from '../../columns/columns-container';
+import { NavigationService } from '../../navigation/navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -40,20 +41,21 @@ import * as i5 from "../../common/id.service";
 import * as i6 from "../../common/sort.service";
 import * as i7 from "./../../common/column-info.service";
 import * as i8 from "../../common/provider.service";
-import * as i9 from "../../filtering/menu/filter-menu.component";
-import * as i10 from "../../column-menu/column-menu.component";
-import * as i11 from "@progress/kendo-angular-icons";
-import * as i12 from "../../filtering/filter-row.component";
-import * as i13 from "@angular/common";
-import * as i14 from "../../navigation/logical-row.directive";
-import * as i15 from "../../navigation/logical-cell.directive";
-import * as i16 from "../../dragdrop/drop-target.directive";
-import * as i17 from "@progress/kendo-angular-common";
-import * as i18 from "../../dragdrop/draggable-column.directive";
-import * as i19 from "../common/template-context.directive";
-import * as i20 from "../../selection/selectall-checkbox.directive";
-import * as i21 from "../../navigation/focusable.directive";
-import * as i22 from "../../column-resizing/column-handle.directive";
+import * as i9 from "../../navigation/navigation.service";
+import * as i10 from "../../filtering/menu/filter-menu.component";
+import * as i11 from "../../column-menu/column-menu.component";
+import * as i12 from "@progress/kendo-angular-icons";
+import * as i13 from "../../filtering/filter-row.component";
+import * as i14 from "@angular/common";
+import * as i15 from "../../navigation/logical-row.directive";
+import * as i16 from "../../navigation/logical-cell.directive";
+import * as i17 from "../../dragdrop/drop-target.directive";
+import * as i18 from "@progress/kendo-angular-common";
+import * as i19 from "../../dragdrop/draggable-column.directive";
+import * as i20 from "../common/template-context.directive";
+import * as i21 from "../../selection/selectall-checkbox.directive";
+import * as i22 from "../../navigation/focusable.directive";
+import * as i23 from "../../column-resizing/column-handle.directive";
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -79,7 +81,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 export class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService, navigationService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
@@ -89,6 +91,7 @@ export class HeaderComponent {
         this.columnInfoService = columnInfoService;
         this.cd = cd;
         this.contextService = contextService;
+        this.navigationService = navigationService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -223,6 +226,9 @@ export class HeaderComponent {
             return 'descending';
         }
     }
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      *
      * @param column
@@ -333,7 +339,7 @@ export class HeaderComponent {
     }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return { ...column.style, ...stickyStyles };
+        return { ...column.headerStyle, ...stickyStyles };
     }
     toggleDirection(field, allowUnsort, initialDirection) {
         const descriptor = this.sortDescriptor(field);
@@ -450,7 +456,7 @@ export class HeaderComponent {
         });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
@@ -502,7 +508,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -668,7 +676,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i10.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i11.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i12.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i13.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i15.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i17.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i18.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i19.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i20.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i21.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i22.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i23.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -724,7 +732,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -892,7 +902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.NavigationService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input