@progress/kendo-angular-grid 19.3.0-develop.31 → 19.3.0-develop.32

package/esm2022/grid.component.mjs

@@ -1546,6 +1546,7 @@ export class GridComponent {
      */
     closeRow(index) {
         this.editService.close(index);
+        this.isStacked && (this.navigationService.stackedCellEntered = false);
     }
     /**
      * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).

package/esm2022/navigation/default-focusable-element.mjs

@@ -15,7 +15,6 @@ const isNavigable = element => !element.disabled && (isButton(element) || isNavi
  */
 export class DefaultFocusableElement {
     renderer;
-    ctx;
     get enabled() {
         return this.focusable && !this.focusable.disabled;
     }
@@ -24,9 +23,8 @@ export class DefaultFocusableElement {
     }
     element;
     focusable;
-    constructor(host, renderer, ctx) {
+    constructor(host, renderer) {
         this.renderer = renderer;
-        this.ctx = ctx;
         this.element = host.nativeElement;
         this.focusable = findFocusable(this.element, false) || this.element;
     }
@@ -34,17 +32,7 @@ export class DefaultFocusableElement {
         return this.canFocus() && isNavigable(this.element);
     }
     toggle(active) {
-        if (this.ctx.grid?.isStacked) {
-            if (active) {
-                this.renderer.setAttribute(this.focusable, 'tabindex', '0');
-            }
-            else {
-                this.renderer.removeAttribute(this.focusable, 'tabindex');
-            }
-        }
-        else {
-            this.renderer.setAttribute(this.focusable, 'tabindex', active ? '0' : '-1');
-        }
+        this.renderer.setAttribute(this.focusable, 'tabIndex', active ? '0' : '-1');
     }
     focus() {
         if (this.focusable) {

package/esm2022/navigation/focusable.directive.mjs

@@ -70,7 +70,7 @@ export class FocusableDirective {
     }
     ngAfterViewInit() {
         if (!this.element && this.ctx.navigable) {
-            this.element = new DefaultFocusableElement(this.hostElement, this.renderer, this.ctx);
+            this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
         }
         if (this.group && this.element) {
             this.toggle(this.group.isActive);

package/esm2022/navigation/navigation.service.mjs

@@ -230,6 +230,14 @@ export class NavigationService {
         // Timeout if focusOut doesn't fire very soon
         interval(0).pipe(take(1))))))
             .subscribe(() => this.onTabout()));
+        this.subs.add(this.domEvents.cellClick
+            .subscribe(() => {
+            if (this.isStackedMode) {
+                const stackedCells = this.activeCell.focusGroup.focusableChildren;
+                const currFocusedIndex = stackedCells.findIndex(el => el.hasFocus() || el.hostElement?.nativeElement === document.activeElement);
+                currFocusedIndex > -1 && (this.stackedFocusedCellIndex = currFocusedIndex);
+            }
+        }));
         if (this.focusableParent) {
             const element = new GridFocusableElement(this);
             this.focusableParent.registerElement(element);
@@ -678,6 +686,9 @@ export class NavigationService {
         const confirm = !args.defaultPrevented && args.keyCode === Keys.Enter && isTextInput(args.target);
         if (args.keyCode === Keys.Escape || args.keyCode === Keys.F2 || confirm) {
             if (this.tableCellEntered && args.keyCode === Keys.F2 && this.activeRow.dataRowIndex > -1) {
+                if (this.editService.isEditingCell()) {
+                    return;
+                }
                 this.zone.run(() => {
                     this.editService.beginEdit(this.activeRow.dataRowIndex);
                 });
@@ -854,6 +865,7 @@ export class NavigationService {
         const stackedCell = closest(target, (el) => hasClasses(el, 'k-grid-stack-cell'));
         const tableCell = closest(target, (el) => hasClasses(el, 'k-table-td'));
         const isInStackedCell = closest(target, (el) => hasClasses(el, 'k-grid-stack-content'));
+        const isInCommandCell = closest(target, (el) => hasClasses(el, 'k-command-cell'));
         if (!stackedCell || !tableCell) {
             return;
         }
@@ -875,7 +887,9 @@ export class NavigationService {
             this.editService.closeCell(args);
             this.activeCell.focusGroup.activate();
             this.activeCell.focusGroup.focusableChildren[this.stackedFocusedCellIndex]?.focus();
-            args.preventDefault();
+            if (!isInCommandCell) {
+                args.preventDefault();
+            }
         }
     }
     stackedFocusedCellIndex = -1;
@@ -889,29 +903,24 @@ export class NavigationService {
             return;
         }
         const stackedCells = this.activeCell.focusGroup.focusableChildren;
-        let nextIndex;
+        const currFocusedIndex = stackedCells.findIndex(el => el.hasFocus() || el.hostElement?.nativeElement === document.activeElement);
         if (args.shiftKey) {
-            nextIndex = this.stackedFocusedCellIndex - 1;
-            if (nextIndex < 0) {
-                nextIndex = stackedCells.length - 1;
+            if (currFocusedIndex === 0) {
+                args.stopImmediatePropagation();
+                args.preventDefault();
+            }
+            else {
+                this.stackedFocusedCellIndex = currFocusedIndex - 1;
             }
         }
         else {
-            nextIndex = this.stackedFocusedCellIndex + 1;
-            if (nextIndex >= stackedCells.length) {
-                nextIndex = 0;
+            if (currFocusedIndex === stackedCells.length - 1) {
+                args.stopImmediatePropagation();
+                args.preventDefault();
             }
-        }
-        let nextStackedCell = stackedCells[nextIndex];
-        if (nextStackedCell) {
-            if (nextStackedCell.hasFocus() || (isDocumentAvailable() && document.activeElement === nextStackedCell.hostElement.nativeElement)) {
-                // next cell is already focused (as a focusable child of the previous one), skip to the next one
-                nextIndex = args.shiftKey ? this.stackedFocusedCellIndex - 2 : this.stackedFocusedCellIndex + 2;
-                nextStackedCell = stackedCells[nextIndex];
+            else {
+                this.stackedFocusedCellIndex = currFocusedIndex + 1;
             }
-            nextStackedCell.focus();
-            this.stackedFocusedCellIndex = nextIndex;
-            args.preventDefault();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: i1.DomEventsService }, { token: i2.PagerContextService }, { token: i3.ScrollRequestService }, { token: i4.GroupsService }, { token: i5.DetailsService }, { token: i6.FocusRoot }, { token: i7.EditService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.ColumnResizingService }, { token: i10.FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754576745,
-    version: '19.3.0-develop.31',
+    publishDate: 1754579625,
+    version: '19.3.0-develop.32',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/cell.component.mjs

@@ -223,7 +223,7 @@ export class CellComponent {
                     [class.k-grid-stack-edit-cell]="isEdited(col)"
                     [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
                     [class.k-command-cell]="isCommand(col)"
-                    kendoGridFocusable>
+                    [kendoGridFocusable]="!isCommand(col)">
                     <div class="k-grid-stack-header">
                         <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
                             {{col.displayTitle}}
@@ -431,7 +431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [class.k-grid-stack-edit-cell]="isEdited(col)"
                     [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
                     [class.k-command-cell]="isCommand(col)"
-                    kendoGridFocusable>
+                    [kendoGridFocusable]="!isCommand(col)">
                     <div class="k-grid-stack-header">
                         <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
                             {{col.displayTitle}}

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

@@ -758,7 +758,6 @@ const isNavigable = element => !element.disabled && (isButton(element) || isNavi
  */
 class DefaultFocusableElement {
     renderer;
-    ctx;
     get enabled() {
         return this.focusable && !this.focusable.disabled;
     }
@@ -767,9 +766,8 @@ class DefaultFocusableElement {
     }
     element;
     focusable;
-    constructor(host, renderer, ctx) {
+    constructor(host, renderer) {
         this.renderer = renderer;
-        this.ctx = ctx;
         this.element = host.nativeElement;
         this.focusable = findFocusable(this.element, false) || this.element;
     }
@@ -777,17 +775,7 @@ class DefaultFocusableElement {
         return this.canFocus() && isNavigable(this.element);
     }
     toggle(active) {
-        if (this.ctx.grid?.isStacked) {
-            if (active) {
-                this.renderer.setAttribute(this.focusable, 'tabindex', '0');
-            }
-            else {
-                this.renderer.removeAttribute(this.focusable, 'tabindex');
-            }
-        }
-        else {
-            this.renderer.setAttribute(this.focusable, 'tabindex', active ? '0' : '-1');
-        }
+        this.renderer.setAttribute(this.focusable, 'tabIndex', active ? '0' : '-1');
     }
     focus() {
         if (this.focusable) {
@@ -956,7 +944,7 @@ class FocusableDirective {
     }
     ngAfterViewInit() {
         if (!this.element && this.ctx.navigable) {
-            this.element = new DefaultFocusableElement(this.hostElement, this.renderer, this.ctx);
+            this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
         }
         if (this.group && this.element) {
             this.toggle(this.group.isActive);
@@ -3590,6 +3578,14 @@ class NavigationService {
         // Timeout if focusOut doesn't fire very soon
         interval(0).pipe(take(1))))))
             .subscribe(() => this.onTabout()));
+        this.subs.add(this.domEvents.cellClick
+            .subscribe(() => {
+            if (this.isStackedMode) {
+                const stackedCells = this.activeCell.focusGroup.focusableChildren;
+                const currFocusedIndex = stackedCells.findIndex(el => el.hasFocus() || el.hostElement?.nativeElement === document.activeElement);
+                currFocusedIndex > -1 && (this.stackedFocusedCellIndex = currFocusedIndex);
+            }
+        }));
         if (this.focusableParent) {
             const element = new GridFocusableElement(this);
             this.focusableParent.registerElement(element);
@@ -4038,6 +4034,9 @@ class NavigationService {
         const confirm = !args.defaultPrevented && args.keyCode === Keys.Enter && isTextInput(args.target);
         if (args.keyCode === Keys.Escape || args.keyCode === Keys.F2 || confirm) {
             if (this.tableCellEntered && args.keyCode === Keys.F2 && this.activeRow.dataRowIndex > -1) {
+                if (this.editService.isEditingCell()) {
+                    return;
+                }
                 this.zone.run(() => {
                     this.editService.beginEdit(this.activeRow.dataRowIndex);
                 });
@@ -4214,6 +4213,7 @@ class NavigationService {
         const stackedCell = closest(target, (el) => hasClasses$1(el, 'k-grid-stack-cell'));
         const tableCell = closest(target, (el) => hasClasses$1(el, 'k-table-td'));
         const isInStackedCell = closest(target, (el) => hasClasses$1(el, 'k-grid-stack-content'));
+        const isInCommandCell = closest(target, (el) => hasClasses$1(el, 'k-command-cell'));
         if (!stackedCell || !tableCell) {
             return;
         }
@@ -4235,7 +4235,9 @@ class NavigationService {
             this.editService.closeCell(args);
             this.activeCell.focusGroup.activate();
             this.activeCell.focusGroup.focusableChildren[this.stackedFocusedCellIndex]?.focus();
-            args.preventDefault();
+            if (!isInCommandCell) {
+                args.preventDefault();
+            }
         }
     }
     stackedFocusedCellIndex = -1;
@@ -4249,29 +4251,24 @@ class NavigationService {
             return;
         }
         const stackedCells = this.activeCell.focusGroup.focusableChildren;
-        let nextIndex;
+        const currFocusedIndex = stackedCells.findIndex(el => el.hasFocus() || el.hostElement?.nativeElement === document.activeElement);
         if (args.shiftKey) {
-            nextIndex = this.stackedFocusedCellIndex - 1;
-            if (nextIndex < 0) {
-                nextIndex = stackedCells.length - 1;
+            if (currFocusedIndex === 0) {
+                args.stopImmediatePropagation();
+                args.preventDefault();
+            }
+            else {
+                this.stackedFocusedCellIndex = currFocusedIndex - 1;
             }
         }
         else {
-            nextIndex = this.stackedFocusedCellIndex + 1;
-            if (nextIndex >= stackedCells.length) {
-                nextIndex = 0;
+            if (currFocusedIndex === stackedCells.length - 1) {
+                args.stopImmediatePropagation();
+                args.preventDefault();
             }
-        }
-        let nextStackedCell = stackedCells[nextIndex];
-        if (nextStackedCell) {
-            if (nextStackedCell.hasFocus() || (isDocumentAvailable() && document.activeElement === nextStackedCell.hostElement.nativeElement)) {
-                // next cell is already focused (as a focusable child of the previous one), skip to the next one
-                nextIndex = args.shiftKey ? this.stackedFocusedCellIndex - 2 : this.stackedFocusedCellIndex + 2;
-                nextStackedCell = stackedCells[nextIndex];
+            else {
+                this.stackedFocusedCellIndex = currFocusedIndex + 1;
             }
-            nextStackedCell.focus();
-            this.stackedFocusedCellIndex = nextIndex;
-            args.preventDefault();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i53.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnResizingService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -19716,7 +19713,7 @@ class CellComponent {
                     [class.k-grid-stack-edit-cell]="isEdited(col)"
                     [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
                     [class.k-command-cell]="isCommand(col)"
-                    kendoGridFocusable>
+                    [kendoGridFocusable]="!isCommand(col)">
                     <div class="k-grid-stack-header">
                         <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
                             {{col.displayTitle}}
@@ -19924,7 +19921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [class.k-grid-stack-edit-cell]="isEdited(col)"
                     [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
                     [class.k-command-cell]="isCommand(col)"
-                    kendoGridFocusable>
+                    [kendoGridFocusable]="!isCommand(col)">
                     <div class="k-grid-stack-header">
                         <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
                             {{col.displayTitle}}
@@ -21998,8 +21995,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754576745,
-    version: '19.3.0-develop.31',
+    publishDate: 1754579625,
+    version: '19.3.0-develop.32',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -30600,6 +30597,7 @@ class GridComponent {
      */
     closeRow(index) {
         this.editService.close(index);
+        this.isStacked && (this.navigationService.stackedCellEntered = false);
     }
     /**
      * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).

package/navigation/default-focusable-element.d.ts

@@ -4,18 +4,16 @@
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, Renderer2 } from '@angular/core';
 import { FocusableElement } from './focusable-element.interface';
-import { ContextService } from '../common/provider.service';
 /**
  * @hidden
  */
 export declare class DefaultFocusableElement implements FocusableElement {
     private renderer;
-    private ctx;
     private get enabled();
     private get visible();
     private element;
     private focusable;
-    constructor(host: ElementRef, renderer: Renderer2, ctx: ContextService);
+    constructor(host: ElementRef, renderer: Renderer2);
     isNavigable(): boolean;
     toggle(active: boolean): void;
     focus(): void;

package/navigation/navigation.service.d.ts

@@ -126,7 +126,7 @@ export declare class NavigationService implements OnDestroy {
     private calculateRowspanOffset;
     private get isStackedMode();
     private handleStackedKeydown;
-    private stackedFocusedCellIndex;
+    stackedFocusedCellIndex: number;
     tableCellEntered: boolean;
     stackedCellEntered: boolean;
     private handleStackedTabNavigation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "19.3.0-develop.31",
+  "version": "19.3.0-develop.32",
   "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",
@@ -26,7 +26,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1754576745,
+      "publishDate": 1754579625,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -39,29 +39,29 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.31",
-    "@progress/kendo-angular-common": "19.3.0-develop.31",
-    "@progress/kendo-angular-dateinputs": "19.3.0-develop.31",
-    "@progress/kendo-angular-layout": "19.3.0-develop.31",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.31",
-    "@progress/kendo-angular-dropdowns": "19.3.0-develop.31",
-    "@progress/kendo-angular-excel-export": "19.3.0-develop.31",
-    "@progress/kendo-angular-icons": "19.3.0-develop.31",
-    "@progress/kendo-angular-inputs": "19.3.0-develop.31",
-    "@progress/kendo-angular-conversational-ui": "19.3.0-develop.31",
-    "@progress/kendo-angular-intl": "19.3.0-develop.31",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.31",
-    "@progress/kendo-angular-label": "19.3.0-develop.31",
-    "@progress/kendo-angular-pager": "19.3.0-develop.31",
-    "@progress/kendo-angular-pdf-export": "19.3.0-develop.31",
-    "@progress/kendo-angular-popup": "19.3.0-develop.31",
-    "@progress/kendo-angular-toolbar": "19.3.0-develop.31",
-    "@progress/kendo-angular-utils": "19.3.0-develop.31",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.32",
+    "@progress/kendo-angular-common": "19.3.0-develop.32",
+    "@progress/kendo-angular-dateinputs": "19.3.0-develop.32",
+    "@progress/kendo-angular-layout": "19.3.0-develop.32",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.32",
+    "@progress/kendo-angular-dropdowns": "19.3.0-develop.32",
+    "@progress/kendo-angular-excel-export": "19.3.0-develop.32",
+    "@progress/kendo-angular-icons": "19.3.0-develop.32",
+    "@progress/kendo-angular-inputs": "19.3.0-develop.32",
+    "@progress/kendo-angular-conversational-ui": "19.3.0-develop.32",
+    "@progress/kendo-angular-intl": "19.3.0-develop.32",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.32",
+    "@progress/kendo-angular-label": "19.3.0-develop.32",
+    "@progress/kendo-angular-pager": "19.3.0-develop.32",
+    "@progress/kendo-angular-pdf-export": "19.3.0-develop.32",
+    "@progress/kendo-angular-popup": "19.3.0-develop.32",
+    "@progress/kendo-angular-toolbar": "19.3.0-develop.32",
+    "@progress/kendo-angular-utils": "19.3.0-develop.32",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.31",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.32",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

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