@progress/kendo-angular-grid 15.0.2-develop.1 → 15.0.2-develop.11

package/column-menu/column-list.component.d.ts

@@ -42,11 +42,11 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private allColumns;
     private domSubscriptions;
     constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, listNavigationService: ColumnListKeyboardNavigation);
-    isDisabled(column: any): boolean;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    isDisabled(column: any): boolean;
     cancelChanges(): void;
     applyChanges(): void;
     onTab(e: Event): void;
@@ -54,6 +54,7 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private forEachCheckBox;
     private updateDisabled;
     private updateColumnState;
+    private setDisabledState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnListComponent, "kendo-grid-columnlist", never, { "columns": "columns"; "autoSync": "autoSync"; "ariaLabel": "ariaLabel"; "allowHideAll": "allowHideAll"; "applyText": "applyText"; "resetText": "resetText"; "actionsClass": "actionsClass"; "isLast": "isLast"; "isExpanded": "isExpanded"; "service": "service"; }, { "reset": "reset"; "apply": "apply"; "columnChange": "columnChange"; }, never, never>;
 }

package/common/provider.service.d.ts

@@ -22,6 +22,7 @@ export declare class ContextService {
     grid: GridComponent;
     topToolbarNavigation: GridToolbarNavigationService;
     bottomToolbarNavigation: GridToolbarNavigationService;
+    navigable: boolean;
     constructor(renderer: Renderer2, localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;

package/esm2020/column-menu/column-list.component.mjs

@@ -58,10 +58,6 @@ export class ColumnListComponent {
     get columns() {
         return this._columns;
     }
-    isDisabled(column) {
-        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
-            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
-    }
     ngOnInit() {
         if (!this.element) {
             return;
@@ -105,6 +101,7 @@ export class ColumnListComponent {
     ngAfterViewInit() {
         this.listNavigationService.items = this.options.toArray();
         this.listNavigationService.toggle(0, true);
+        this.updateDisabled();
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -120,6 +117,10 @@ export class ColumnListComponent {
     ngOnDestroy() {
         this.domSubscriptions.unsubscribe();
     }
+    isDisabled(column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+    }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
             element.checked = !this.columns[index].hidden;
@@ -167,16 +168,16 @@ export class ColumnListComponent {
             if (checkbox.checked) {
                 checkedItems.push({ checkbox, index });
             }
-            checkbox.disabled = false;
+            this.setDisabledState(checkbox, false);
         });
         if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            checkedItems[0].checkbox.disabled = true;
+            this.setDisabledState(checkedItems[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
             const columns = this.columns;
             const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
             if (checkedUnlocked.length === 1) {
-                checkedUnlocked[0].checkbox.disabled = true;
+                this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
         }
     }
@@ -194,6 +195,14 @@ export class ColumnListComponent {
             this.hasUnlockedFiltered = false;
         }
     }
+    setDisabledState(element, disabled) {
+        element.disabled = disabled;
+        const parent = element.parentElement;
+        const classCommand = disabled ? 'addClass' : 'removeClass';
+        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
+        this.renderer[classCommand](parent, 'k-disabled');
+        this.renderer[attributeCommand](parent, 'aria-disabled', disabled ? 'true' : undefined);
+    }
 }
 ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
 ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
@@ -210,7 +219,7 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"
@@ -255,7 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"

package/esm2020/editing-directives/editing-directive-base.mjs

@@ -5,7 +5,7 @@
 import { Input, Directive } from '@angular/core';
 import { GridComponent } from '../grid.component';
 import { LocalEditService } from './local-edit.service';
-import { Observable } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
@@ -18,6 +18,7 @@ export class EditingDirectiveBase {
     constructor(grid, localDataChangesService) {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
+        this.subscriptions = new Subscription();
         this.defaultEditService = this.createDefaultService();
     }
     // Consider adding support for the dependency injection of the service to allow for specifying a generic service without code.
@@ -35,7 +36,7 @@ export class EditingDirectiveBase {
      * @hidden
      */
     ngOnInit() {
-        this.subscriptions = this.grid.add.subscribe(this.addHandler.bind(this));
+        this.subscriptions.add(this.grid.add.subscribe(this.addHandler.bind(this)));
         this.subscriptions.add(this.grid.remove.subscribe(this.removeHandler.bind(this)));
         this.subscriptions.add(this.grid.cancel.subscribe(this.cancelHandler.bind(this)));
         this.subscriptions.add(this.grid.save.subscribe(this.saveHandler.bind(this)));

package/esm2020/grid.component.mjs

@@ -618,8 +618,12 @@ export class GridComponent {
     set navigable(value) {
         if (typeof value === 'boolean') {
             this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
+            this.ctx.navigable = value;
             return;
         }
+        else {
+            this.ctx.navigable = value.includes('table');
+        }
         this._navigable = value;
     }
     get navigable() {

package/esm2020/navigation/focusable.directive.mjs

@@ -5,7 +5,9 @@
 import { Directive, ElementRef, Inject, Input, Optional, Renderer2, SkipSelf } from '@angular/core';
 import { DefaultFocusableElement } from './default-focusable-element';
 import { CELL_CONTEXT } from '../rendering/common/cell-context';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
 /**
  * A directive that controls the way focusable elements receive
  * [focus in a navigable Grid]({% slug keyboard_navigation_grid %}).
@@ -24,10 +26,11 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class FocusableDirective {
-    constructor(cellContext, hostElement, renderer) {
+    constructor(cellContext, hostElement, renderer, ctx) {
         this.cellContext = cellContext;
         this.hostElement = hostElement;
         this.renderer = renderer;
+        this.ctx = ctx;
         this.active = true;
         this._enabled = true;
         if (this.cellContext) {
@@ -58,7 +61,7 @@ export class FocusableDirective {
         return this._enabled;
     }
     ngAfterViewInit() {
-        if (!this.element) {
+        if (!this.element && this.ctx.navigable) {
             this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
         }
         if (this.group && this.element) {
@@ -112,7 +115,7 @@ export class FocusableDirective {
         this.element = element;
     }
 }
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
@@ -132,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [CELL_CONTEXT]
                 }, {
                     type: SkipSelf
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { enabled: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ContextService }]; }, propDecorators: { enabled: [{
                 type: Input,
                 args: ['kendoGridFocusable']
             }] } });

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: 1707209593,
-    version: '15.0.2-develop.1',
+    publishDate: 1708345697,
+    version: '15.0.2-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -2968,10 +2968,11 @@ const EMPTY_CELL_CONTEXT = {};
  * ```
  */
 class FocusableDirective {
-    constructor(cellContext, hostElement, renderer) {
+    constructor(cellContext, hostElement, renderer, ctx) {
         this.cellContext = cellContext;
         this.hostElement = hostElement;
         this.renderer = renderer;
+        this.ctx = ctx;
         this.active = true;
         this._enabled = true;
         if (this.cellContext) {
@@ -3002,7 +3003,7 @@ class FocusableDirective {
         return this._enabled;
     }
     ngAfterViewInit() {
-        if (!this.element) {
+        if (!this.element && this.ctx.navigable) {
             this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
         }
         if (this.group && this.element) {
@@ -3056,7 +3057,7 @@ class FocusableDirective {
         this.element = element;
     }
 }
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
@@ -3077,7 +3078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         args: [CELL_CONTEXT]
                     }, {
                         type: SkipSelf
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }];
     }, propDecorators: { enabled: [{
                 type: Input,
                 args: ['kendoGridFocusable']
@@ -4532,8 +4533,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1707209593,
-    version: '15.0.2-develop.1',
+    publishDate: 1708345697,
+    version: '15.0.2-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -12639,10 +12640,6 @@ class ColumnListComponent {
     get columns() {
         return this._columns;
     }
-    isDisabled(column) {
-        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
-            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
-    }
     ngOnInit() {
         if (!this.element) {
             return;
@@ -12686,6 +12683,7 @@ class ColumnListComponent {
     ngAfterViewInit() {
         this.listNavigationService.items = this.options.toArray();
         this.listNavigationService.toggle(0, true);
+        this.updateDisabled();
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -12701,6 +12699,10 @@ class ColumnListComponent {
     ngOnDestroy() {
         this.domSubscriptions.unsubscribe();
     }
+    isDisabled(column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+    }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
             element.checked = !this.columns[index].hidden;
@@ -12748,16 +12750,16 @@ class ColumnListComponent {
             if (checkbox.checked) {
                 checkedItems.push({ checkbox, index });
             }
-            checkbox.disabled = false;
+            this.setDisabledState(checkbox, false);
         });
         if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            checkedItems[0].checkbox.disabled = true;
+            this.setDisabledState(checkedItems[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
             const columns = this.columns;
             const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
             if (checkedUnlocked.length === 1) {
-                checkedUnlocked[0].checkbox.disabled = true;
+                this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
         }
     }
@@ -12775,6 +12777,14 @@ class ColumnListComponent {
             this.hasUnlockedFiltered = false;
         }
     }
+    setDisabledState(element, disabled) {
+        element.disabled = disabled;
+        const parent = element.parentElement;
+        const classCommand = disabled ? 'addClass' : 'removeClass';
+        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
+        this.renderer[classCommand](parent, 'k-disabled');
+        this.renderer[attributeCommand](parent, 'aria-disabled', disabled ? 'true' : undefined);
+    }
 }
 ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
 ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
@@ -12791,7 +12801,7 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"
@@ -12836,7 +12846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"
@@ -20543,8 +20553,12 @@ class GridComponent {
     set navigable(value) {
         if (typeof value === 'boolean') {
             this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
+            this.ctx.navigable = value;
             return;
         }
+        else {
+            this.ctx.navigable = value.includes('table');
+        }
         this._navigable = value;
     }
     get navigable() {
@@ -26078,6 +26092,7 @@ class EditingDirectiveBase {
     constructor(grid, localDataChangesService) {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
+        this.subscriptions = new Subscription();
         this.defaultEditService = this.createDefaultService();
     }
     // Consider adding support for the dependency injection of the service to allow for specifying a generic service without code.
@@ -26095,7 +26110,7 @@ class EditingDirectiveBase {
      * @hidden
      */
     ngOnInit() {
-        this.subscriptions = this.grid.add.subscribe(this.addHandler.bind(this));
+        this.subscriptions.add(this.grid.add.subscribe(this.addHandler.bind(this)));
         this.subscriptions.add(this.grid.remove.subscribe(this.removeHandler.bind(this)));
         this.subscriptions.add(this.grid.cancel.subscribe(this.cancelHandler.bind(this)));
         this.subscriptions.add(this.grid.save.subscribe(this.saveHandler.bind(this)));

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

@@ -503,6 +503,76 @@ const CELL_CONTEXT = new InjectionToken('grid-cell-context');
  */
 const EMPTY_CELL_CONTEXT = {};
 
+/**
+ * @hidden
+ */
+class GridToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.navigableElements = [];
+        this.currentActiveIndex = 0;
+        this.defaultFocusableSelector = `
+        [kendogridtoolbarfocusable],
+        [kendogridaddcommand],
+        [kendogridcancelcommand],
+        [kendogrideditcommand],
+        [kendogridremovecommand],
+        [kendogridsavecommand],
+        [kendogridexcelcommand],
+        [kendogridpdfcommand]
+    `;
+    }
+    notify() {
+        // ensure focusable elements are in the same order as in the DOM
+        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
+        this.currentActiveIndex = 0;
+        this.updateFocus();
+    }
+    focus() {
+        this.navigableElements[this.currentActiveIndex]?.focus();
+    }
+    updateFocus() {
+        if (!this.navigableElements.length) {
+            return;
+        }
+        this.navigableElements.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
+        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
+            this.navigableElements[this.currentActiveIndex].focus();
+        }
+    }
+}
+GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ *
+ * The Context service is used to provide common
+ * services and DI tokens for a Grid instance.
+ *
+ * This keeps the constructor parameters stable
+ * and a avoids dependency cycles between components.
+ */
+class ContextService {
+    constructor(renderer, localization) {
+        this.renderer = renderer;
+        this.localization = localization;
+        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+    }
+}
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
+
 /**
  * A directive that controls the way focusable elements receive
  * [focus in a navigable Grid]({% slug keyboard_navigation_grid %}).
@@ -521,10 +591,11 @@ const EMPTY_CELL_CONTEXT = {};
  * ```
  */
 class FocusableDirective {
-    constructor(cellContext, hostElement, renderer) {
+    constructor(cellContext, hostElement, renderer, ctx) {
         this.cellContext = cellContext;
         this.hostElement = hostElement;
         this.renderer = renderer;
+        this.ctx = ctx;
         this.active = true;
         this._enabled = true;
         if (this.cellContext) {
@@ -555,7 +626,7 @@ class FocusableDirective {
         return this._enabled;
     }
     ngAfterViewInit() {
-        if (!this.element) {
+        if (!this.element && this.ctx.navigable) {
             this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
         }
         if (this.group && this.element) {
@@ -609,7 +680,7 @@ class FocusableDirective {
         this.element = element;
     }
 }
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
@@ -629,7 +700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [CELL_CONTEXT]
                 }, {
                     type: SkipSelf
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { enabled: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }]; }, propDecorators: { enabled: [{
                 type: Input,
                 args: ['kendoGridFocusable']
             }] } });
@@ -1454,76 +1525,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }] });
 
-/**
- * @hidden
- */
-class GridToolbarNavigationService {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.navigableElements = [];
-        this.currentActiveIndex = 0;
-        this.defaultFocusableSelector = `
-        [kendogridtoolbarfocusable],
-        [kendogridaddcommand],
-        [kendogridcancelcommand],
-        [kendogrideditcommand],
-        [kendogridremovecommand],
-        [kendogridsavecommand],
-        [kendogridexcelcommand],
-        [kendogridpdfcommand]
-    `;
-    }
-    notify() {
-        // ensure focusable elements are in the same order as in the DOM
-        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
-        this.currentActiveIndex = 0;
-        this.updateFocus();
-    }
-    focus() {
-        this.navigableElements[this.currentActiveIndex]?.focus();
-    }
-    updateFocus() {
-        if (!this.navigableElements.length) {
-            return;
-        }
-        this.navigableElements.forEach(el => {
-            this.renderer.setAttribute(el, 'tabindex', '-1');
-        });
-        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
-        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
-            this.navigableElements[this.currentActiveIndex].focus();
-        }
-    }
-}
-GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
-/**
- * @hidden
- *
- * The Context service is used to provide common
- * services and DI tokens for a Grid instance.
- *
- * This keeps the constructor parameters stable
- * and a avoids dependency cycles between components.
- */
-class ContextService {
-    constructor(renderer, localization) {
-        this.renderer = renderer;
-        this.localization = localization;
-        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
-        this.bottomToolbarNavigation = new GridToolbarNavigationService(this.renderer);
-    }
-}
-ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
-
 const isInSameGrid = (element, gridElement) => closest(element, matchesNodeName('kendo-grid')) === gridElement;
 const matchHeaderCell = matchesNodeName('th');
 const matchDataCell = matchesNodeName('td');
@@ -4500,8 +4501,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1707209593,
-    version: '15.0.2-develop.1',
+    publishDate: 1708345697,
+    version: '15.0.2-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -12571,10 +12572,6 @@ class ColumnListComponent {
     get columns() {
         return this._columns;
     }
-    isDisabled(column) {
-        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
-            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
-    }
     ngOnInit() {
         if (!this.element) {
             return;
@@ -12618,6 +12615,7 @@ class ColumnListComponent {
     ngAfterViewInit() {
         this.listNavigationService.items = this.options.toArray();
         this.listNavigationService.toggle(0, true);
+        this.updateDisabled();
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -12633,6 +12631,10 @@ class ColumnListComponent {
     ngOnDestroy() {
         this.domSubscriptions.unsubscribe();
     }
+    isDisabled(column) {
+        return !(this.allowHideAll || this.hasFiltered || column.hidden || this.columns.find(current => current !== column && !current.hidden)) ||
+            (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
+    }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
             element.checked = !this.columns[index].hidden;
@@ -12680,16 +12682,16 @@ class ColumnListComponent {
             if (checkbox.checked) {
                 checkedItems.push({ checkbox, index });
             }
-            checkbox.disabled = false;
+            this.setDisabledState(checkbox, false);
         });
         if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            checkedItems[0].checkbox.disabled = true;
+            this.setDisabledState(checkedItems[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
             const columns = this.columns;
             const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
             if (checkedUnlocked.length === 1) {
-                checkedUnlocked[0].checkbox.disabled = true;
+                this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
         }
     }
@@ -12707,6 +12709,14 @@ class ColumnListComponent {
             this.hasUnlockedFiltered = false;
         }
     }
+    setDisabledState(element, disabled) {
+        element.disabled = disabled;
+        const parent = element.parentElement;
+        const classCommand = disabled ? 'addClass' : 'removeClass';
+        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
+        this.renderer[classCommand](parent, 'k-disabled');
+        this.renderer[attributeCommand](parent, 'aria-disabled', disabled ? 'true' : undefined);
+    }
 }
 ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
 ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
@@ -12723,7 +12733,7 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"
@@ -12768,7 +12778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <input 
                     class="k-checkbox k-checkbox-md k-rounded-md" 
                     type="checkbox" 
-                    [attr.data-index]="index" 
+                    [attr.data-index]="index"
                     [checked]="!column.hidden" 
                     tabindex="-1"
                     [attr.aria-hidden]="true"
@@ -20456,8 +20466,12 @@ class GridComponent {
     set navigable(value) {
         if (typeof value === 'boolean') {
             this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
+            this.ctx.navigable = value;
             return;
         }
+        else {
+            this.ctx.navigable = value.includes('table');
+        }
         this._navigable = value;
     }
     get navigable() {
@@ -25975,6 +25989,7 @@ class EditingDirectiveBase {
     constructor(grid, localDataChangesService) {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
+        this.subscriptions = new Subscription();
         this.defaultEditService = this.createDefaultService();
     }
     // Consider adding support for the dependency injection of the service to allow for specifying a generic service without code.
@@ -25992,7 +26007,7 @@ class EditingDirectiveBase {
      * @hidden
      */
     ngOnInit() {
-        this.subscriptions = this.grid.add.subscribe(this.addHandler.bind(this));
+        this.subscriptions.add(this.grid.add.subscribe(this.addHandler.bind(this)));
         this.subscriptions.add(this.grid.remove.subscribe(this.removeHandler.bind(this)));
         this.subscriptions.add(this.grid.cancel.subscribe(this.cancelHandler.bind(this)));
         this.subscriptions.add(this.grid.save.subscribe(this.saveHandler.bind(this)));

package/navigation/focusable.directive.d.ts

@@ -5,6 +5,7 @@
 import { AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { FocusableElement } from './focusable-element.interface';
 import { CellContext } from '../rendering/common/cell-context';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * A directive that controls the way focusable elements receive
@@ -27,6 +28,7 @@ export declare class FocusableDirective implements FocusableElement, AfterViewIn
     private cellContext;
     private hostElement;
     private renderer;
+    private ctx;
     private active;
     private group;
     private element;
@@ -36,7 +38,7 @@ export declare class FocusableDirective implements FocusableElement, AfterViewIn
      */
     set enabled(value: any);
     get enabled(): any;
-    constructor(cellContext: CellContext, hostElement: ElementRef, renderer: Renderer2);
+    constructor(cellContext: CellContext, hostElement: ElementRef, renderer: Renderer2, ctx: ContextService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -63,6 +65,6 @@ export declare class FocusableDirective implements FocusableElement, AfterViewIn
      * @hidden
      */
     registerElement(element: FocusableElement): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FocusableDirective, [{ optional: true; skipSelf: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FocusableDirective, [{ optional: true; skipSelf: true; }, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FocusableDirective, "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", never, { "enabled": "kendoGridFocusable"; }, {}, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "15.0.2-develop.1",
+  "version": "15.0.2-develop.11",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,25 +33,26 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "15.0.2-develop.1",
-    "@progress/kendo-angular-common": "15.0.2-develop.1",
-    "@progress/kendo-angular-dateinputs": "15.0.2-develop.1",
-    "@progress/kendo-angular-layout": "15.0.2-develop.1",
-    "@progress/kendo-angular-dropdowns": "15.0.2-develop.1",
-    "@progress/kendo-angular-excel-export": "15.0.2-develop.1",
-    "@progress/kendo-angular-icons": "15.0.2-develop.1",
-    "@progress/kendo-angular-inputs": "15.0.2-develop.1",
-    "@progress/kendo-angular-intl": "15.0.2-develop.1",
-    "@progress/kendo-angular-l10n": "15.0.2-develop.1",
-    "@progress/kendo-angular-label": "15.0.2-develop.1",
-    "@progress/kendo-angular-pdf-export": "15.0.2-develop.1",
-    "@progress/kendo-angular-popup": "15.0.2-develop.1",
-    "@progress/kendo-angular-utils": "15.0.2-develop.1",
-    "rxjs": "^6.5.3 || ^7.0.0"
+    "@progress/kendo-angular-buttons": "15.0.2-develop.11",
+    "@progress/kendo-angular-common": "15.0.2-develop.11",
+    "@progress/kendo-angular-dateinputs": "15.0.2-develop.11",
+    "@progress/kendo-angular-layout": "15.0.2-develop.11",
+    "@progress/kendo-angular-dropdowns": "15.0.2-develop.11",
+    "@progress/kendo-angular-excel-export": "15.0.2-develop.11",
+    "@progress/kendo-angular-icons": "15.0.2-develop.11",
+    "@progress/kendo-angular-inputs": "15.0.2-develop.11",
+    "@progress/kendo-angular-intl": "15.0.2-develop.11",
+    "@progress/kendo-angular-l10n": "15.0.2-develop.11",
+    "@progress/kendo-angular-label": "15.0.2-develop.11",
+    "@progress/kendo-angular-pdf-export": "15.0.2-develop.11",
+    "@progress/kendo-angular-popup": "15.0.2-develop.11",
+    "@progress/kendo-angular-utils": "15.0.2-develop.11",
+    "rxjs": "^6.5.3 || ^7.0.0",
+    "@progress/kendo-angular-spreadsheet": "15.0.2-develop.11"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "15.0.2-develop.1",
+    "@progress/kendo-angular-schematics": "15.0.2-develop.11",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

@@ -4,13 +4,13 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '15.0.2-develop.1',
+            '@progress/kendo-angular-treeview': '15.0.2-develop.11',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '15.0.2-develop.1',
+            '@progress/kendo-angular-dialog': '15.0.2-develop.11',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^2.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '15.0.2-develop.1'
+            '@progress/kendo-angular-progressbar': '15.0.2-develop.11'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }