@progress/kendo-angular-grid 18.0.0-develop.5 → 18.0.0-develop.7

package/column-resizing/column-handle.directive.d.ts

@@ -20,11 +20,13 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
     private cdr;
     private ctx;
     private columnInfoService;
+    isLast: boolean;
     columns: Array<ColumnBase>;
     column: ColumnBase;
     get visible(): string;
     get leftStyle(): number | null;
     get rightStyle(): number | null;
+    private get isConstrainedMode();
     private subscriptions;
     private rtl;
     autoFit(): void;
@@ -39,6 +41,7 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
     private updateWidth;
     private columnsForLevel;
     private getTableDelta;
+    private stopPropagation;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHandleDirective, [{ host: true; }, null, null, null, null, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnHandleDirective, "[kendoGridColumnHandle]", never, { "columns": { "alias": "columns"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnHandleDirective, "[kendoGridColumnHandle]", never, { "isLast": { "alias": "isLast"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, {}, never, never, true, never>;
 }

package/column-resizing/column-resize.interface.d.ts

@@ -4,6 +4,22 @@
 *-------------------------------------------------------------------------------------------*/
 import { Observable } from 'rxjs';
 import { ColumnBase } from '../columns/column-base';
+/**
+ * The type of the [`resizable`](slug:api_grid_gridcomponent#toc-resizable) property. [See example](slug:resizing_columns_grid#constrained-mode)
+ *
+ * The possible values are:
+ *
+ * * `constrained` - Adjacent columns resize only up to their outer borders.
+ * * `unconstrained` - Columns are resized relative to the entire component.
+ *
+ * ```html
+ * <kendo-grid [kendoGridBinding]="gridData" [height]="370" resizable="constrained">
+ *     <kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
+ *     ...
+ * </kendo-grid>
+ * ```
+ */
+export type ResizeMode = 'unconstrained' | 'constrained';
 /**
  * The returned type of the [`columnResize`](slug:api_grid_gridcomponent#toc-columnresize) event.
  */

package/column-resizing/column-resizing.service.d.ts

@@ -11,6 +11,10 @@ import * as i0 from "@angular/core";
  */
 export declare class ColumnResizingService {
     changes: EventEmitter<ColumnResizeAction>;
+    adjacentColumn: ColumnBase;
+    areColumnsReordered: boolean;
+    isShiftPressed: boolean;
+    originalWidth: number;
     private column;
     private resizedColumns;
     private tables;

package/column-resizing/table.directive.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { ColumnResizingService } from './column-resizing.service';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,14 +15,14 @@ export declare class TableDirective implements OnInit, OnDestroy {
     private service;
     private zone;
     private cdr;
+    private ctx;
     locked: boolean;
     virtualColumns: boolean;
     get minWidth(): number | null;
-    private originalWidth;
     private firstResize;
     private subscription;
     private autoFitSubscription;
-    constructor(element: ElementRef, renderer: Renderer2, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef);
+    constructor(element: ElementRef, renderer: Renderer2, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef, ctx: ContextService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private initState;

package/esm2022/column-resizing/column-handle.directive.mjs

@@ -35,15 +35,12 @@ const headerWidth = (handle) => handle.nativeElement.parentElement.offsetWidth;
 /**
  * @hidden
  */
-const allLeafColumns = columns => expandColumns(columns)
-    .filter(c => !c.isColumnGroup);
+const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.offsetWidth;
 /**
  * @hidden
  */
-const stopPropagation = ({ originalEvent: event }) => {
-    event.stopPropagation();
-    event.preventDefault();
-};
+const allLeafColumns = columns => expandColumns(columns)
+    .filter(c => !c.isColumnGroup);
 /**
  * @hidden
  */
@@ -94,9 +91,13 @@ export class ColumnHandleDirective {
     cdr;
     ctx;
     columnInfoService;
+    isLast;
     columns = [];
     column;
     get visible() {
+        if (this.isConstrainedMode && this.isLast) {
+            return 'none';
+        }
         return this.column.resizable ? 'block' : 'none';
     }
     get leftStyle() {
@@ -105,6 +106,13 @@ export class ColumnHandleDirective {
     get rightStyle() {
         return isTruthy(this.rtl) ? null : 0;
     }
+    get isConstrainedMode() {
+        const isConstrainedMode = this.ctx.grid?.resizable === 'constrained';
+        const isUnconstrainedMode = this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained';
+        const constrainedNoShift = isConstrainedMode && !this.service.isShiftPressed;
+        const unconstrainedWithShift = isUnconstrainedMode && this.service.isShiftPressed;
+        return constrainedNoShift || unconstrainedWithShift;
+    }
     subscriptions = new Subscription();
     rtl = false;
     autoFit() {
@@ -146,7 +154,7 @@ export class ColumnHandleDirective {
             .subscribe(this.resize.bind(this)));
         this.subscriptions.add(this.service.changes.pipe(filter(e => e.type === 'start'), filter(this.shouldUpdate.bind(this)), take(1) //on first resize only
         ).subscribe(this.initColumnWidth.bind(this)));
-        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(tap(stopPropagation), tap(() => this.service.start(this.column)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.service, this.draggable)))
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(tap(this.stopPropagation), tap(() => this.service.start(this.column)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.service, this.draggable)))
             .subscribe(({ pageX, originalX }) => {
             const delta = pageX - originalX;
             const percent = toPercentage(delta, this.column.resizeStartWidth || this.column.width);
@@ -173,6 +181,28 @@ export class ColumnHandleDirective {
     }
     initState() {
         this.column.resizeStartWidth = headerWidth(this.element);
+        let columns = [];
+        if (this.ctx.grid?.columns) {
+            columns = Array.from(this.ctx.grid?.columns) || [];
+        }
+        if (this.isConstrainedMode) {
+            if (this.service.areColumnsReordered) {
+                this.service.adjacentColumn = columns.find(c => c.orderIndex === this.column.orderIndex + 1);
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                this.service.resizedColumn({
+                    column: this.service.adjacentColumn,
+                    oldWidth: this.service.adjacentColumn.resizeStartWidth
+                });
+            }
+            else {
+                this.service.adjacentColumn = columns[this.column.leafIndex + 1];
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                this.service.resizedColumn({
+                    column: this.service.adjacentColumn,
+                    oldWidth: this.service.adjacentColumn.resizeStartWidth
+                });
+            }
+        }
         this.service.resizedColumn({
             column: this.column,
             oldWidth: this.column.resizeStartWidth
@@ -187,6 +217,14 @@ export class ColumnHandleDirective {
         if (isPresent(this.column.maxResizableWidth)) {
             newWidth = Math.min(newWidth, this.column.maxResizableWidth);
         }
+        if (this.isConstrainedMode) {
+            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
+        }
+        if (this.isConstrainedMode && isPresent(this.service.adjacentColumn.maxResizableWidth)) {
+            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
+            newWidth = Math.max(newWidth, maxAllowedResizableWidth);
+        }
         const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
         this.service.resizeTable(this.column, tableDelta);
@@ -199,6 +237,12 @@ export class ColumnHandleDirective {
         this.service.resizeTable(this.column, tableDelta);
     }
     updateWidth(column, width) {
+        if (this.isConstrainedMode && this.service.adjacentColumn) {
+            const adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
+            if (adjacentColumnNewWidth < (column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth)) {
+                this.service.adjacentColumn.width = adjacentColumnNewWidth;
+            }
+        }
         column.width = width;
         this.columnInfoService.hiddenColumns.forEach((col) => {
             if (isBlank(col.width) && isPresent(col.implicitWidth)) {
@@ -231,8 +275,13 @@ export class ColumnHandleDirective {
             return startWidth - maxWidth;
         }
     }
+    stopPropagation = ({ originalEvent: event }) => {
+        this.service.isShiftPressed = event.shiftKey;
+        event.stopPropagation();
+        event.preventDefault();
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ContextService }, { token: i4.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { isLast: "isLast", columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, decorators: [{
             type: Directive,
@@ -242,7 +291,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: i2.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ContextService }, { type: i4.ColumnInfoService }]; }, propDecorators: { columns: [{
+                }] }, { type: i0.ElementRef }, { type: i2.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ContextService }, { type: i4.ColumnInfoService }]; }, propDecorators: { isLast: [{
+                type: Input
+            }], columns: [{
                 type: Input
             }], column: [{
                 type: Input

package/esm2022/column-resizing/column-resizing.service.mjs

@@ -23,6 +23,10 @@ const resizeArgs = (column, extra) => Object.assign({
  */
 export class ColumnResizingService {
     changes = new EventEmitter();
+    adjacentColumn;
+    areColumnsReordered = false;
+    isShiftPressed = false;
+    originalWidth;
     column;
     resizedColumns;
     tables = [];
@@ -60,6 +64,7 @@ export class ColumnResizingService {
             resizedColumns: this.resizedColumns,
             type: 'end'
         });
+        this.adjacentColumn = null;
     }
     registerTable(tableMetadata) {
         this.tables.push(tableMetadata);

package/esm2022/column-resizing/table.directive.mjs

@@ -7,12 +7,14 @@ import { Observable } from 'rxjs';
 import { resizableColumns } from '../columns/column-common';
 import { ColumnResizingService } from './column-resizing.service';
 import { filter, tap, map, switchMap, bufferCount } from 'rxjs/operators';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-resizing.service";
+import * as i2 from "../common/provider.service";
 /**
  * @hidden
  */
-const columnsToResize = ({ columns }) => Math.max(1, resizableColumns(columns).length);
+const columnsToResize = ({ columns }) => Math.max(1, resizableColumns(columns).filter(c => !c.isColumnGroup).length);
 /**
  * @hidden
  */
@@ -42,21 +44,22 @@ export class TableDirective {
     service;
     zone;
     cdr;
+    ctx;
     locked = false;
     virtualColumns;
     get minWidth() {
         return this.firstResize ? 0 : null;
     }
-    originalWidth;
     firstResize = false;
     subscription;
     autoFitSubscription;
-    constructor(element, renderer, service, zone, cdr) {
+    constructor(element, renderer, service, zone, cdr, ctx) {
         this.element = element;
         this.renderer = renderer;
         this.service = service;
         this.zone = zone;
         this.cdr = cdr;
+        this.ctx = ctx;
     }
     ngOnInit() {
         const obs = this.service
@@ -79,15 +82,24 @@ export class TableDirective {
     }
     initState() {
         this.firstResize = true;
-        if (!this.virtualColumns || this.locked) {
-            this.originalWidth = offsetWidth(this.element.nativeElement);
+        const constrainedWithVirtualColumns = this.ctx.grid?.resizable === 'constrained' && this.virtualColumns;
+        if ((!this.virtualColumns || this.locked) || constrainedWithVirtualColumns) {
+            this.service.originalWidth = offsetWidth(this.element.nativeElement);
         }
     }
     resize(deltas) {
-        if (!this.virtualColumns || this.locked) {
-            const delta = deltas.reduce((sum, item) => sum + item, 0);
-            const width = this.originalWidth + delta;
-            this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
+        const constrainedModeNoShift = this.ctx.grid?.resizable === 'constrained' && !this.service.isShiftPressed;
+        const unconstrainedModeShift = (this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained') && this.service.isShiftPressed;
+        const isConstrainedMode = constrainedModeNoShift || unconstrainedModeShift;
+        if (isConstrainedMode) {
+            this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
+        }
+        else {
+            if (!this.virtualColumns || this.locked) {
+                const delta = deltas.reduce((sum, item) => sum + item, 0);
+                const width = this.service.originalWidth + delta;
+                this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
+            }
         }
         this.cdr.detectChanges();
     }
@@ -112,7 +124,7 @@ export class TableDirective {
         const footer = pipe(row('tfoot>tr'), cell(info.index), offsetWidth)(dom);
         return Math.max(header, data, footer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TableDirective, isStandalone: true, selector: "[kendoGridResizableTable]", inputs: { locked: "locked", virtualColumns: "virtualColumns" }, host: { properties: { "style.min-width": "this.minWidth" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, decorators: [{
@@ -121,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridResizableTable]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { locked: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i2.ContextService }]; }, propDecorators: { locked: [{
                 type: Input
             }], virtualColumns: [{
                 type: Input

package/esm2022/grid.component.mjs

@@ -1718,6 +1718,7 @@ export class GridComponent {
             expandedColumns[i].orderIndex = nextSourceIndex++;
         }
         this.updateIndicesForLevel(source.level + 1);
+        this.columnResizingService.areColumnsReordered = true;
     }
     updateIndicesForLevel(level) {
         const colsForParentLevel = this.allColumnsForLevel(level - 1);

package/esm2022/navigation/navigation.service.mjs

@@ -19,6 +19,7 @@ import { closest, contains, findFocusableChild, isVisible, matchesNodeName } fro
 import { DetailsService } from '../rendering/details/details.service';
 import { ScrollRequestService } from '../scrolling/scroll-request.service';
 import { ContextService } from '../common/provider.service';
+import { ColumnResizingService } from '../column-resizing/column-resizing.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/dom-events.service";
 import * as i2 from "@progress/kendo-angular-pager";
@@ -28,7 +29,8 @@ import * as i5 from "../rendering/details/details.service";
 import * as i6 from "./focus-root";
 import * as i7 from "../editing/edit.service";
 import * as i8 from "../common/provider.service";
-import * as i9 from "./focusable.directive";
+import * as i9 from "../column-resizing/column-resizing.service";
+import * as i10 from "./focusable.directive";
 const isInSameGrid = (element, gridElement) => closest(element, matchesNodeName('kendo-grid')) === gridElement;
 const matchHeaderCell = matchesNodeName('th');
 const matchDataCell = matchesNodeName('td');
@@ -62,6 +64,7 @@ const isNavigationKey = keyCode => isArrowKey(keyCode) ||
 const isInput = matchesNodeName('input');
 const isTextInput = element => element && isInput(element) && element.type.toLowerCase() === 'text';
 const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S/);
+const resizeStep = 10;
 /**
  * @hidden
  */
@@ -96,6 +99,7 @@ export class NavigationService {
     editService;
     cd;
     ctx;
+    resizeService;
     focusableParent;
     changes;
     cellKeydown = new EventEmitter();
@@ -130,6 +134,9 @@ export class NavigationService {
             });
         }
     }
+    get isColumnResizable() {
+        return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+    }
     viewport;
     columnViewport;
     activeRowIndex = 0;
@@ -148,7 +155,7 @@ export class NavigationService {
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
-    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, focusableParent) {
+    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, resizeService, focusableParent) {
         this.zone = zone;
         this.domEvents = domEvents;
         this.pagerContextService = pagerContextService;
@@ -159,6 +166,7 @@ export class NavigationService {
         this.editService = editService;
         this.cd = cd;
         this.ctx = ctx;
+        this.resizeService = resizeService;
         this.focusableParent = focusableParent;
         this.changes = this.cursor.changes;
     }
@@ -455,6 +463,10 @@ export class NavigationService {
                 }
                 break;
             case Keys.ArrowRight:
+                if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
+                    this.columnResize(true);
+                    break;
+                }
                 if (args.shiftKey) {
                     if (this.ctx.grid.blockArrowSelection) {
                         return;
@@ -467,6 +479,10 @@ export class NavigationService {
                 }
                 break;
             case Keys.ArrowLeft:
+                if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
+                    this.columnResize(false);
+                    break;
+                }
                 if (args.shiftKey) {
                     if (this.ctx.grid.blockArrowSelection) {
                         return;
@@ -575,6 +591,15 @@ export class NavigationService {
             args.preventDefault();
         }
     }
+    columnResize(onRightArrow) {
+        const column = this.ctx.grid.columnsContainer.leafColumnsToRender[this.activeCell.colIndex];
+        column.resizeStartWidth = Array.from(this.ctx.grid.wrapper.nativeElement.querySelectorAll('.k-grid-header th.k-header'))[this.activeCell.colIndex]['offsetWidth'];
+        this.resizeService.start(column);
+        this.resizeService.resizeColumns(onRightArrow ? resizeStep : -1 * resizeStep);
+        if (this.resizeService.resizeColumns.length > 0) {
+            this.resizeService.end();
+        }
+    }
     onContentKeydown(args) {
         if (!this.onCellKeydown(args)) {
             return;
@@ -719,11 +744,11 @@ export class NavigationService {
         const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
         rowSelectionService.changes.emit(ev);
     }
-    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.FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    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 });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.DomEventsService }, { type: i2.PagerContextService }, { type: i3.ScrollRequestService }, { type: i4.GroupsService }, { type: i5.DetailsService }, { type: i6.FocusRoot }, { type: i7.EditService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.FocusableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.DomEventsService }, { type: i2.PagerContextService }, { type: i3.ScrollRequestService }, { type: i4.GroupsService }, { type: i5.DetailsService }, { type: i6.FocusRoot }, { type: i7.EditService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.ColumnResizingService }, { type: i10.FocusableDirective, decorators: [{
                     type: Optional
                 }] }]; } });

package/esm2022/package-metadata.mjs

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

package/esm2022/rendering/header/header.component.mjs

@@ -634,6 +634,7 @@ export class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -688,6 +689,7 @@ export class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -709,7 +711,7 @@ export class HeaderComponent {
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -859,6 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -913,6 +916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>