@progress/kendo-angular-grid 13.0.0-develop.6 → 13.0.0-develop.8

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

@@ -10,7 +10,7 @@ import { Button } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

package/column-menu/column-menu-autosize-all.component.d.ts

@@ -10,11 +10,10 @@ import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -10,11 +10,10 @@ import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -9,11 +9,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -10,11 +10,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -9,11 +9,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html

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

@@ -11,8 +11,10 @@ import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.

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

@@ -16,7 +16,7 @@ import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "./column-list.component";
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

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

@@ -20,7 +20,7 @@ export class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -159,8 +159,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -174,8 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]

package/esm2020/column-menu/column-menu-autosize-all.component.mjs

@@ -15,11 +15,10 @@ import * as i3 from "@angular/common";
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -15,11 +15,10 @@ import * as i4 from "./column-list.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -57,7 +56,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {

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

@@ -13,11 +13,10 @@ import * as i3 from "../filtering/menu/filter-menu-container.component";
 import * as i4 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -54,7 +53,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**

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

@@ -13,11 +13,10 @@ import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -15,11 +15,10 @@ import * as i5 from "./column-menu-item-content-template.directive";
 import * as i6 from "@angular/common";
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html

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

@@ -15,8 +15,10 @@ import * as i3 from "./column-menu-item.component";
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.

package/esm2020/filtering/menu/filter-menu-container.component.mjs

@@ -57,7 +57,7 @@ export class FilterMenuContainerComponent {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }
@@ -179,16 +179,16 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -225,16 +225,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>

package/esm2020/package-metadata.mjs

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

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

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

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

@@ -2906,8 +2906,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1685095253,
-    version: '13.0.0-develop.6',
+    publishDate: 1685107210,
+    version: '13.0.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7574,7 +7574,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -10737,7 +10737,7 @@ class FilterMenuContainerComponent {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }
@@ -10859,16 +10859,16 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10905,16 +10905,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -11350,11 +11350,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11539,11 +11538,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html
@@ -11710,7 +11708,7 @@ class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -11849,8 +11847,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -11864,8 +11862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]
@@ -11903,11 +11901,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11945,7 +11942,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {
@@ -12045,11 +12042,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -12086,7 +12082,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**
@@ -12298,8 +12294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.
@@ -12465,11 +12463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -23667,7 +23664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

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

@@ -2899,8 +2899,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1685095253,
-    version: '13.0.0-develop.6',
+    publishDate: 1685107210,
+    version: '13.0.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7527,7 +7527,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -10679,7 +10679,7 @@ class FilterMenuContainerComponent {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }
@@ -10801,16 +10801,16 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10847,16 +10847,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -11288,11 +11288,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11477,11 +11476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html
@@ -11648,7 +11646,7 @@ class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -11787,8 +11785,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -11802,8 +11800,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]
@@ -11841,11 +11839,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11883,7 +11880,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {
@@ -11983,11 +11980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -12024,7 +12020,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**
@@ -12236,8 +12232,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.
@@ -12403,11 +12401,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -23591,7 +23588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "13.0.0-develop.6",
+  "version": "13.0.0-develop.8",
   "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",
@@ -32,25 +32,25 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "13.0.0-develop.6",
-    "@progress/kendo-angular-common": "13.0.0-develop.6",
-    "@progress/kendo-angular-dateinputs": "13.0.0-develop.6",
-    "@progress/kendo-angular-layout": "13.0.0-develop.6",
-    "@progress/kendo-angular-dropdowns": "13.0.0-develop.6",
-    "@progress/kendo-angular-excel-export": "13.0.0-develop.6",
-    "@progress/kendo-angular-icons": "13.0.0-develop.6",
-    "@progress/kendo-angular-inputs": "13.0.0-develop.6",
-    "@progress/kendo-angular-intl": "13.0.0-develop.6",
-    "@progress/kendo-angular-l10n": "13.0.0-develop.6",
-    "@progress/kendo-angular-label": "13.0.0-develop.6",
-    "@progress/kendo-angular-pdf-export": "13.0.0-develop.6",
-    "@progress/kendo-angular-popup": "13.0.0-develop.6",
-    "@progress/kendo-angular-utils": "13.0.0-develop.6",
+    "@progress/kendo-angular-buttons": "13.0.0-develop.8",
+    "@progress/kendo-angular-common": "13.0.0-develop.8",
+    "@progress/kendo-angular-dateinputs": "13.0.0-develop.8",
+    "@progress/kendo-angular-layout": "13.0.0-develop.8",
+    "@progress/kendo-angular-dropdowns": "13.0.0-develop.8",
+    "@progress/kendo-angular-excel-export": "13.0.0-develop.8",
+    "@progress/kendo-angular-icons": "13.0.0-develop.8",
+    "@progress/kendo-angular-inputs": "13.0.0-develop.8",
+    "@progress/kendo-angular-intl": "13.0.0-develop.8",
+    "@progress/kendo-angular-l10n": "13.0.0-develop.8",
+    "@progress/kendo-angular-label": "13.0.0-develop.8",
+    "@progress/kendo-angular-pdf-export": "13.0.0-develop.8",
+    "@progress/kendo-angular-popup": "13.0.0-develop.8",
+    "@progress/kendo-angular-utils": "13.0.0-develop.8",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.0.0-develop.6",
+    "@progress/kendo-angular-schematics": "13.0.0-develop.8",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

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