@progress/kendo-angular-grid 7.2.4 → 7.3.0-dev.202208190713

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

@@ -17,7 +17,7 @@ import * as i0 from "@angular/core";
  *     template: `
  *       <kendo-grid [data]="data" [columnMenu]="true">
  *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-close" (click)="service.close()"
+ *              <span class="k-icon k-i-x" (click)="service.close()"
  *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
  *              <kendo-grid-columnmenu-sort [service]="service">
  *              </kendo-grid-columnmenu-sort>

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

@@ -38,6 +38,7 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
     private sizeToFit;
     private updateWidth;
     private columnsForLevel;
+    private getTableDelta;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHandleDirective, [{ host: true; }, null, null, null, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnHandleDirective, "[kendoGridColumnHandle]", never, { "columns": "columns"; "column": "column"; }, {}, never>;
 }

package/columns/column-base.d.ts

@@ -59,9 +59,15 @@ export declare class ColumnBase {
      */
     reorderable: boolean;
     /**
-     * The width (in pixels) below which the user is not able to resize the column by using the UI.
+     * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+     * @default 10
      */
     minResizableWidth: number;
+    /**
+     * The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+     * By default, the maximum width is not restricted.
+     */
+    maxResizableWidth: number;
     /**
      * The title of the column.
      */
@@ -618,5 +624,5 @@ export declare class ColumnBase {
      */
     constructor(parent?: ColumnBase, idService?: IdService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnBase, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnBase, "kendo-grid-column-base", never, { "resizable": "resizable"; "reorderable": "reorderable"; "minResizableWidth": "minResizableWidth"; "title": "title"; "width": "width"; "autoSize": "autoSize"; "locked": "locked"; "sticky": "sticky"; "hidden": "hidden"; "media": "media"; "lockable": "lockable"; "stickable": "stickable"; "columnMenu": "columnMenu"; "includeInChooser": "includeInChooser"; "style": "style"; "headerStyle": "headerStyle"; "filterStyle": "filterStyle"; "footerStyle": "footerStyle"; "cssClass": "class"; "headerClass": "headerClass"; "filterClass": "filterClass"; "footerClass": "footerClass"; }, {}, ["footerTemplate", "headerTemplates", "columnMenuTemplates"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnBase, "kendo-grid-column-base", never, { "resizable": "resizable"; "reorderable": "reorderable"; "minResizableWidth": "minResizableWidth"; "maxResizableWidth": "maxResizableWidth"; "title": "title"; "width": "width"; "autoSize": "autoSize"; "locked": "locked"; "sticky": "sticky"; "hidden": "hidden"; "media": "media"; "lockable": "lockable"; "stickable": "stickable"; "columnMenu": "columnMenu"; "includeInChooser": "includeInChooser"; "style": "style"; "headerStyle": "headerStyle"; "filterStyle": "filterStyle"; "footerStyle": "footerStyle"; "cssClass": "class"; "headerClass": "headerClass"; "filterClass": "filterClass"; "footerClass": "footerClass"; }, {}, ["footerTemplate", "headerTemplates", "columnMenuTemplates"], never>;
 }

package/columns/column-group.component.d.ts

@@ -78,6 +78,10 @@ export declare class ColumnGroupComponent extends ColumnBase {
      * @hidden
      */
     minResizableWidth: number;
+    /**
+     * @hidden
+     */
+    maxResizableWidth: number;
     /**
      * @hidden
      */

package/esm2015/column-menu/column-menu-sort.component.js

@@ -82,13 +82,13 @@ ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
-            icon="sort-asc-sm"
+            icon="sort-asc-small"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
-            icon="sort-desc-sm"
+            icon="sort-desc-small"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>
@@ -100,13 +100,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
-            icon="sort-asc-sm"
+            icon="sort-asc-small"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
-            icon="sort-desc-sm"
+            icon="sort-desc-small"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>

package/esm2015/column-menu/column-menu.service.js

@@ -17,7 +17,7 @@ import * as i1 from "./../filtering/menu/menu-tabbing.service";
  *     template: `
  *       <kendo-grid [data]="data" [columnMenu]="true">
  *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-close" (click)="service.close()"
+ *              <span class="k-icon k-i-x" (click)="service.close()"
  *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
  *              <kendo-grid-columnmenu-sort [service]="service">
  *              </kendo-grid-columnmenu-sort>

package/esm2015/column-resizing/column-handle.directive.js

@@ -172,9 +172,11 @@ export class ColumnHandleDirective {
         if (isTruthy(this.rtl)) {
             delta *= -1;
         }
-        const newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
-        const tableDelta = newWidth > this.column.minResizableWidth ?
-            delta : this.column.minResizableWidth - this.column.resizeStartWidth;
+        let newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
+        if (isPresent(this.column.maxResizableWidth)) {
+            newWidth = Math.min(newWidth, this.column.maxResizableWidth);
+        }
+        const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
         this.service.resizeTable(this.column, tableDelta);
     }
@@ -199,6 +201,25 @@ export class ColumnHandleDirective {
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    getTableDelta(newWidth, delta) {
+        const minWidth = this.column.minResizableWidth;
+        const maxWidth = this.column.maxResizableWidth;
+        const startWidth = this.column.resizeStartWidth;
+        const isAboveMin = newWidth > minWidth;
+        const isBelowMax = newWidth < maxWidth;
+        const isInBoundaries = isPresent(maxWidth) ?
+            isAboveMin && isBelowMax :
+            isAboveMin;
+        if (isInBoundaries) {
+            return delta;
+        }
+        else if (newWidth <= minWidth) {
+            return minWidth - startWidth;
+        }
+        else {
+            return startWidth - maxWidth;
+        }
+    }
 }
 ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: i4.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
 ColumnHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnHandleDirective, 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 });

package/esm2015/columns/column-base.js

@@ -55,7 +55,8 @@ export class ColumnBase {
          */
         this.reorderable = true;
         /**
-         * The width (in pixels) below which the user is not able to resize the column by using the UI.
+         * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+         * @default 10
          */
         this.minResizableWidth = 10;
         this._locked = false;
@@ -232,7 +233,7 @@ export class ColumnBase {
     }
 }
 ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, decorators: [{
             type: Component,
             args: [{
@@ -245,6 +246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], minResizableWidth: [{
                 type: Input
+            }], maxResizableWidth: [{
+                type: Input
             }], title: [{
                 type: Input
             }], width: [{

package/esm2015/dragdrop/draggable-column.directive.js

@@ -18,8 +18,8 @@ import * as i5 from "../navigation/navigation.service";
  */
 const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'));
 const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {

package/esm2015/grouping/group-header.component.js

@@ -101,7 +101,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
                         class="k-icon"
-                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                     </a>
@@ -171,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
                         class="k-icon"
-                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                     </a>

package/esm2015/grouping/group-indicator.component.js

@@ -37,11 +37,11 @@ GroupIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: { group: "group", groupTitle: "groupTitle" }, outputs: { directionChange: "directionChange", remove: "remove" }, host: { properties: { "class.k-group-indicator": "this.groupIndicatorClass" } }, ngImport: i0, template: `
         <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
             <span class="k-icon"
-                [class.k-i-sort-asc-sm]="dir === 'asc'"
-                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+                [class.k-i-sort-asc-small]="dir === 'asc'"
+                [class.k-i-sort-desc-small]="dir === 'desc'"></span>
             {{groupTitle}}</a>
         <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-button-icon k-icon k-i-group-delete"></span>
+            <span class="k-button-icon k-icon k-i-x"></span>
         </a>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupIndicatorComponent, decorators: [{
@@ -52,11 +52,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
             <span class="k-icon"
-                [class.k-i-sort-asc-sm]="dir === 'asc'"
-                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+                [class.k-i-sort-asc-small]="dir === 'asc'"
+                [class.k-i-sort-desc-small]="dir === 'desc'"></span>
             {{groupTitle}}</a>
         <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-button-icon k-icon k-i-group-delete"></span>
+            <span class="k-button-icon k-icon k-i-x"></span>
         </a>
     `
                 }]

package/esm2015/navigation/focus-group.js

@@ -23,6 +23,7 @@ export class FocusGroup {
     }
     ngOnDestroy() {
         this.root.unregisterGroup(this);
+        this.active = true;
     }
     registerElement(element) {
         this.unregisterElement(element);

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1659455016,
+    publishDate: 1660893095,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/pager/pager-next-buttons.component.js

@@ -53,7 +53,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-arrow-e': true
+                    'k-i-caret-alt-right': true
                 }">
             </span>
         </span>
@@ -73,7 +73,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-seek-e': true
+                    'k-i-caret-alt-to-right': true
                 }">
             </span>
         </span>
@@ -100,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-arrow-e': true
+                    'k-i-caret-alt-right': true
                 }">
             </span>
         </span>
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-seek-e': true
+                    'k-i-caret-alt-to-right': true
                 }">
             </span>
         </span>

package/esm2015/pager/pager-prev-buttons.component.js

@@ -53,7 +53,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                   [attr.aria-label]="textFor('pagerFirstPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-seek-w': true
+                    'k-i-caret-alt-to-left': true
                   }">
             </span>
         </span>
@@ -73,7 +73,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                   [attr.aria-label]="textFor('pagerPreviousPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-arrow-w': true
+                    'k-i-caret-alt-left': true
                   }">
             </span>
         </span>
@@ -100,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                   [attr.aria-label]="textFor('pagerFirstPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-seek-w': true
+                    'k-i-caret-alt-to-left': true
                   }">
             </span>
         </span>
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                   [attr.aria-label]="textFor('pagerPreviousPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-arrow-w': true
+                    'k-i-caret-alt-left': true
                   }">
             </span>
         </span>

package/esm2015/rendering/header/header.component.js

@@ -160,8 +160,8 @@ export class HeaderComponent {
         const state = this.sortDescriptor(field);
         return {
             'k-icon': isPresent(state.dir),
-            'k-i-sort-desc-sm': state.dir === "desc",
-            'k-i-sort-asc-sm': state.dir === "asc"
+            'k-i-sort-desc-small': state.dir === "desc",
+            'k-i-sort-asc-small': state.dir === "asc"
         };
     }
     sortState(column) {

package/fesm2015/kendo-angular-grid.js

@@ -2836,7 +2836,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1659455016,
+    publishDate: 1660893095,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -3367,7 +3367,8 @@ class ColumnBase {
          */
         this.reorderable = true;
         /**
-         * The width (in pixels) below which the user is not able to resize the column by using the UI.
+         * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+         * @default 10
          */
         this.minResizableWidth = 10;
         this._locked = false;
@@ -3544,7 +3545,7 @@ class ColumnBase {
     }
 }
 ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, decorators: [{
             type: Component,
             args: [{
@@ -3557,6 +3558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], minResizableWidth: [{
                 type: Input
+            }], maxResizableWidth: [{
+                type: Input
             }], title: [{
                 type: Input
             }], width: [{
@@ -6642,6 +6645,7 @@ class FocusGroup {
     }
     ngOnDestroy() {
         this.root.unregisterGroup(this);
+        this.active = true;
     }
     registerElement(element) {
         this.unregisterElement(element);
@@ -6807,7 +6811,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                   [attr.aria-label]="textFor('pagerFirstPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-seek-w': true
+                    'k-i-caret-alt-to-left': true
                   }">
             </span>
         </span>
@@ -6827,7 +6831,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                   [attr.aria-label]="textFor('pagerPreviousPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-arrow-w': true
+                    'k-i-caret-alt-left': true
                   }">
             </span>
         </span>
@@ -6854,7 +6858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                   [attr.aria-label]="textFor('pagerFirstPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-seek-w': true
+                    'k-i-caret-alt-to-left': true
                   }">
             </span>
         </span>
@@ -6874,7 +6878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                   [attr.aria-label]="textFor('pagerPreviousPage')"
                   [ngClass]="{
                     'k-icon': true,
-                    'k-i-arrow-w': true
+                    'k-i-caret-alt-left': true
                   }">
             </span>
         </span>
@@ -7330,7 +7334,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-arrow-e': true
+                    'k-i-caret-alt-right': true
                 }">
             </span>
         </span>
@@ -7350,7 +7354,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-seek-e': true
+                    'k-i-caret-alt-to-right': true
                 }">
             </span>
         </span>
@@ -7377,7 +7381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-arrow-e': true
+                    'k-i-caret-alt-right': true
                 }">
             </span>
         </span>
@@ -7397,7 +7401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
                 [ngClass]="{
                     'k-icon':true,
-                    'k-i-seek-e': true
+                    'k-i-caret-alt-to-right': true
                 }">
             </span>
         </span>
@@ -8168,11 +8172,11 @@ GroupIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: { group: "group", groupTitle: "groupTitle" }, outputs: { directionChange: "directionChange", remove: "remove" }, host: { properties: { "class.k-group-indicator": "this.groupIndicatorClass" } }, ngImport: i0, template: `
         <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
             <span class="k-icon"
-                [class.k-i-sort-asc-sm]="dir === 'asc'"
-                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+                [class.k-i-sort-asc-small]="dir === 'asc'"
+                [class.k-i-sort-desc-small]="dir === 'desc'"></span>
             {{groupTitle}}</a>
         <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-button-icon k-icon k-i-group-delete"></span>
+            <span class="k-button-icon k-icon k-i-x"></span>
         </a>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupIndicatorComponent, decorators: [{
@@ -8183,11 +8187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
             <span class="k-icon"
-                [class.k-i-sort-asc-sm]="dir === 'asc'"
-                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+                [class.k-i-sort-asc-small]="dir === 'asc'"
+                [class.k-i-sort-desc-small]="dir === 'desc'"></span>
             {{groupTitle}}</a>
         <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-button-icon k-icon k-i-group-delete"></span>
+            <span class="k-button-icon k-icon k-i-x"></span>
         </a>
     `
                 }]
@@ -8209,8 +8213,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 const preventOnDblClick$1 = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'));
 const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {
@@ -11096,7 +11100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  *     template: `
  *       <kendo-grid [data]="data" [columnMenu]="true">
  *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-close" (click)="service.close()"
+ *              <span class="k-icon k-i-x" (click)="service.close()"
  *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
  *              <kendo-grid-columnmenu-sort [service]="service">
  *              </kendo-grid-columnmenu-sort>
@@ -12450,13 +12454,13 @@ ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
-            icon="sort-asc-sm"
+            icon="sort-asc-small"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
-            icon="sort-desc-sm"
+            icon="sort-desc-small"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>
@@ -12468,13 +12472,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
-            icon="sort-asc-sm"
+            icon="sort-asc-small"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
-            icon="sort-desc-sm"
+            icon="sort-desc-small"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>
@@ -14117,9 +14121,11 @@ class ColumnHandleDirective {
         if (isTruthy(this.rtl)) {
             delta *= -1;
         }
-        const newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
-        const tableDelta = newWidth > this.column.minResizableWidth ?
-            delta : this.column.minResizableWidth - this.column.resizeStartWidth;
+        let newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
+        if (isPresent(this.column.maxResizableWidth)) {
+            newWidth = Math.min(newWidth, this.column.maxResizableWidth);
+        }
+        const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
         this.service.resizeTable(this.column, tableDelta);
     }
@@ -14144,6 +14150,25 @@ class ColumnHandleDirective {
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    getTableDelta(newWidth, delta) {
+        const minWidth = this.column.minResizableWidth;
+        const maxWidth = this.column.maxResizableWidth;
+        const startWidth = this.column.resizeStartWidth;
+        const isAboveMin = newWidth > minWidth;
+        const isBelowMax = newWidth < maxWidth;
+        const isInBoundaries = isPresent(maxWidth) ?
+            isAboveMin && isBelowMax :
+            isAboveMin;
+        if (isInBoundaries) {
+            return delta;
+        }
+        else if (newWidth <= minWidth) {
+            return minWidth - startWidth;
+        }
+        else {
+            return startWidth - maxWidth;
+        }
+    }
 }
 ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
 ColumnHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnHandleDirective, 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 });
@@ -14291,8 +14316,8 @@ class HeaderComponent {
         const state = this.sortDescriptor(field);
         return {
             'k-icon': isPresent(state.dir),
-            'k-i-sort-desc-sm': state.dir === "desc",
-            'k-i-sort-asc-sm': state.dir === "asc"
+            'k-i-sort-desc-small': state.dir === "desc",
+            'k-i-sort-asc-small': state.dir === "asc"
         };
     }
     sortState(column) {
@@ -15826,7 +15851,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
                         class="k-icon"
-                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                     </a>
@@ -15896,7 +15921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
                         class="k-icon"
-                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                     </a>

package/navigation/focus-group.d.ts

@@ -2,13 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { OnDestroy } from '@angular/core';
 import { FocusableElement } from "./focusable-element.interface";
 import { FocusRoot } from './focus-root';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class FocusGroup {
+export declare class FocusGroup implements OnDestroy {
     private root;
     private active;
     private children;