@progress/kendo-angular-grid 12.2.0-develop.7 → 13.0.0-develop.10

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

@@ -7,9 +7,9 @@ import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable
 import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, closest as closest$1, isFocusable as isFocusable$1, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip$1, BehaviorSubject, Observable } from 'rxjs';
+import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, auditTime, distinctUntilChanged, tap, throttleTime, debounceTime, bufferCount } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, auditTime, distinctUntilChanged, tap, throttleTime, debounceTime, bufferCount } from 'rxjs/operators';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4$2 from '@angular/forms';
@@ -21,7 +21,7 @@ import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineBlockIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineFlexIcon, moreHorizontalIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon } from '@progress/kendo-svg-icons';
 import * as i40 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
 import * as i4$1 from '@progress/kendo-angular-buttons';
@@ -34,6 +34,8 @@ import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import * as i4$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
+import * as i16 from '@progress/kendo-angular-layout';
+import { TabStripComponent, TabStripModule } from '@progress/kendo-angular-layout';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
 import * as i1$5 from '@progress/kendo-angular-intl';
@@ -1420,6 +1422,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+class GridToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.navigableElements = [];
+        this.currentActiveIndex = 0;
+        this.defaultFocusableSelector = `
+        [kendogridtoolbarfocusable],
+        [kendogridaddcommand],
+        [kendogridcancelcommand],
+        [kendogrideditcommand],
+        [kendogridremovecommand],
+        [kendogridsavecommand],
+        [kendogridexcelcommand],
+        [kendogridpdfcommand]
+    `;
+    }
+    notify() {
+        // ensure focusable elements are in the same order as in the DOM
+        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
+        this.currentActiveIndex = 0;
+        this.updateFocus();
+    }
+    focus() {
+        this.navigableElements[this.currentActiveIndex]?.focus();
+    }
+    updateFocus() {
+        if (!this.navigableElements.length) {
+            return;
+        }
+        this.navigableElements.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
+        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
+            this.navigableElements[this.currentActiveIndex].focus();
+        }
+    }
+}
+GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ *
+ * The Context service is used to provide common
+ * services and DI tokens for a Grid instance.
+ *
+ * This keeps the constructor parameters stable
+ * and a avoids dependency cycles between components.
+ */
+class ContextService {
+    constructor(renderer, localization) {
+        this.renderer = renderer;
+        this.localization = localization;
+        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+    }
+}
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
+
 const isInSameGrid = (element, gridElement) => closest(element, matchesNodeName('kendo-grid')) === gridElement;
 const matchHeaderCell = matchesNodeName('th');
 const matchDataCell = matchesNodeName('td');
@@ -1475,7 +1547,7 @@ class NavigationViewport {
  * @hidden
  */
 class NavigationService {
-    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, localization, focusableParent) {
+    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, focusableParent) {
         this.zone = zone;
         this.domEvents = domEvents;
         this.pagerContextService = pagerContextService;
@@ -1485,7 +1557,7 @@ class NavigationService {
         this.focusRoot = focusRoot;
         this.editService = editService;
         this.cd = cd;
-        this.localization = localization;
+        this.ctx = ctx;
         this.focusableParent = focusableParent;
         this.cellKeydown = new EventEmitter();
         this.activeRowIndex = 0;
@@ -1773,10 +1845,10 @@ class NavigationService {
             .forEach(cell => cell.focusGroup && cell.focusGroup.activate());
     }
     moveCursorFwd() {
-        return this.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
+        return this.ctx.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
     }
     moveCursorBwd() {
-        return this.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
+        return this.ctx.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
     }
     onCursorKeydown(args) {
         let preventDefault = false;
@@ -1985,11 +2057,11 @@ class NavigationService {
         this.cursor.reset();
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: FocusableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: FocusableDirective, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -2827,8 +2899,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684780267,
-    version: '12.2.0-develop.7',
+    publishDate: 1685119790,
+    version: '13.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4434,75 +4506,6 @@ class PairSet {
     }
 }
 
-/**
- * @hidden
- */
-class GridToolbarNavigationService {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.navigableElements = [];
-        this.currentActiveIndex = 0;
-        this.defaultFocusableSelector = `
-        [kendogridtoolbarfocusable],
-        [kendogridaddcommand],
-        [kendogridcancelcommand],
-        [kendogrideditcommand],
-        [kendogridremovecommand],
-        [kendogridsavecommand],
-        [kendogridexcelcommand],
-        [kendogridpdfcommand]
-    `;
-    }
-    notify() {
-        // ensure focusable elements are in the same order as in the DOM
-        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
-        this.currentActiveIndex = 0;
-        this.updateFocus();
-    }
-    focus() {
-        this.navigableElements[this.currentActiveIndex]?.focus();
-    }
-    updateFocus() {
-        if (!this.navigableElements.length) {
-            return;
-        }
-        this.navigableElements.forEach(el => {
-            this.renderer.setAttribute(el, 'tabindex', '-1');
-        });
-        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
-        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
-            this.navigableElements[this.currentActiveIndex].focus();
-        }
-    }
-}
-GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
-/**
- * @hidden
- *
- * The Context service is used to provide common
- * services and DI tokens for a Grid instance.
- *
- * This keeps the constructor parameters stable
- * and a avoids dependency cycles between components.
- */
-class ContextService {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
-        this.bottomToolbarNavigation = new GridToolbarNavigationService(this.renderer);
-    }
-}
-ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
 /**
  * @hidden
  */
@@ -4981,6 +4984,7 @@ class MenuTabbingService {
     constructor() {
         this.isColumnMenu = false;
         this.isPopupOpen = false;
+        this.isTabbedInterface = false;
     }
 }
 MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -5496,11 +5500,11 @@ class SinglePopupService {
     /**
      * @hidden
      */
-    constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
+    constructor(popupService, renderer, ngZone, scrollSyncService, ctx) {
         this.popupService = popupService;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.localization = localization;
+        this.ctx = ctx;
         /**
          * Fires when the filter or column menus are about to close because the user clicked outside their popups.
          * Used to prevent the popup from closing.
@@ -5516,7 +5520,7 @@ class SinglePopupService {
         const toggle = isPresent(popupRef) && this.popupRef === popupRef;
         this.destroy();
         if (!toggle) {
-            const direction = this.localization.rtl ? 'right' : 'left';
+            const direction = this.ctx.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction },
@@ -5525,7 +5529,7 @@ class SinglePopupService {
                 content: template,
                 positionMode: "absolute"
             });
-            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
             this.attachClose(anchor);
         }
         const popupEl = this.popupRef?.popupElement;
@@ -5584,11 +5588,11 @@ class SinglePopupService {
         });
     }
 }
-SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$2.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$2.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
 SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SinglePopupService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SinglePopupService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: ContextService }]; } });
 
 /* eslint-disable  no-bitwise */
 /**
@@ -6663,13 +6667,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
-        this.localization = localization;
+    constructor(ctx, pagerContext, cd) {
+        this.ctx = ctx;
         this.pagerContext = pagerContext;
         this.cd = cd;
         this.total = this.pagerContext.total;
         this.skip = this.pagerContext.skip;
         this.pageSize = this.pagerContext.pageSize;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
         /**
          * Sets the pager element sizing option.
          * @default `medium`
@@ -6705,7 +6713,7 @@ class PagerElementComponent {
      * @memberOf PagerElementComponent
      */
     textFor(key) {
-        return this.localization.get(key);
+        return this.ctx.localization.get(key);
     }
     /**
      * @hidden
@@ -6725,20 +6733,32 @@ class PagerElementComponent {
      */
     ngOnInit() {
         this.subscriptions = this.pagerContext.changes.subscribe(this.onChanges.bind(this));
-        this.subscriptions.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+        this.subscriptions.add(this.ctx.localization.changes.subscribe(() => this.cd.markForCheck()));
     }
     ngOnDestroy() {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
     }
+    get prevArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
+    }
+    get prevArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
+    }
+    get nextArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
+    }
+    get nextArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
+    }
 }
-PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerElementComponent, inputs: { size: "size" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -6746,11 +6766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd, navigationService) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, pagerContext, cd, navigationService) {
+        super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -6769,7 +6787,7 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
             [kendoGridFocusable]="!disabled"
@@ -6779,8 +6797,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6793,8 +6811,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -6817,8 +6835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6831,8 +6849,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -6842,14 +6860,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
 /**
  * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, cd, pagerContext) {
+        super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.numbersWrapClass = true;
     }
@@ -6920,7 +6938,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
@@ -7073,7 +7091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
                 type: HostBinding,
                 args: ['class.k-pager-numbers-wrap']
             }], buttonCount: [{
@@ -7104,8 +7122,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays an input element which allows the typing and rendering of page numbers ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerInputComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, zone, navigationService, cd) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, pagerContext, zone, navigationService, cd) {
+        super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.zone = zone;
         this.navigationService = navigationService;
@@ -7163,7 +7181,7 @@ class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.NgZone }, { token: NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInputComponent, selector: "kendo-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
      <span class="k-pager-input k-label">
         {{textFor('pagerPage')}}
@@ -7219,7 +7237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
      </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: NavigationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.NgZone }, { type: NavigationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: false }]
             }] } });
@@ -7228,11 +7246,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays buttons for navigating to the next and to the last page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerNextButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd, navigationService) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, pagerContext, cd, navigationService) {
+        super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -7251,15 +7267,15 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNextButtonsComponent, selector: "kendo-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
             kendoButton
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -7273,8 +7289,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -7295,8 +7311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -7310,8 +7326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -7322,15 +7338,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
 // eslint-disable no-access-missing-member
 /**
  * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerInfoComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, cd, pagerContext) {
+        super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
     }
     /**
@@ -7372,7 +7388,7 @@ class PagerInfoComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
@@ -7381,7 +7397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-pager-info',
                     template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ["class.k-pager-info"]
             }, {
@@ -7421,8 +7437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext, navigationService) {
-        super(localization, pagerContext, cd);
+    constructor(ctx, cd, pagerContext, navigationService) {
+        super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.navigationService = navigationService;
         this._pageSizes = [];
@@ -7495,7 +7511,7 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             class="k-dropdown"
@@ -7511,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: [{
@@ -7534,7 +7550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,
@@ -7548,13 +7564,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class PagerComponent {
-    constructor(pagerContext, navigationService, element, renderer, zone, localizationService, cellContext, focusRoot, focusGroup) {
+    constructor(pagerContext, navigationService, element, renderer, zone, ctx, cellContext, focusRoot, focusGroup) {
         this.pagerContext = pagerContext;
         this.navigationService = navigationService;
         this.element = element;
         this.renderer = renderer;
         this.zone = zone;
-        this.localizationService = localizationService;
+        this.ctx = ctx;
         this.cellContext = cellContext;
         this.focusRoot = focusRoot;
         this.focusGroup = focusGroup;
@@ -7613,7 +7629,7 @@ class PagerComponent {
         return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
     }
     get pagerLabel() {
-        const localizationMsg = this.localizationService.get('pagerLabel') || '';
+        const localizationMsg = this.ctx.localization.get('pagerLabel') || '';
         return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
     }
     get focusTrapTabIndex() {
@@ -7762,7 +7778,7 @@ class PagerComponent {
         }
     }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: CELL_CONTEXT, optional: true }, { token: FocusRoot }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ContextService }, { token: CELL_CONTEXT, optional: true }, { token: FocusRoot }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
 PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
             provide: FOCUS_ROOT_ACTIVE,
             useValue: true
@@ -7869,7 +7885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: PagerContextService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: PagerContextService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ContextService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -8123,11 +8139,11 @@ const indicatorRules = or(overSameTarget, and(overLastTarget, isLastGroup));
  * @hidden
  */
 class GroupPanelComponent {
-    constructor(hint, cue, groupInfoService, localization, cd) {
+    constructor(hint, cue, groupInfoService, ctx, cd) {
         this.hint = hint;
         this.cue = cue;
         this.groupInfoService = groupInfoService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.cd = cd;
         this.change = new EventEmitter();
         this.groups = [];
@@ -8142,14 +8158,14 @@ class GroupPanelComponent {
         this.emptyText = value;
     }
     get text() {
-        return this.emptyText ? this.emptyText : this.localization.get('groupPanelEmpty');
+        return this.emptyText ? this.emptyText : this.ctx.localization.get('groupPanelEmpty');
     }
     ngAfterViewInit() {
         this.subscription.add(observe(this.dropTargets)
             .subscribe(this.attachTargets.bind(this)));
     }
     ngOnInit() {
-        this.subscription.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+        this.subscription.add(this.ctx.localization.changes.subscribe(() => this.cd.markForCheck()));
     }
     ngDoCheck() {
         const currentTitles = this.groups.map(group => this.groupInfoService.groupTitle(group));
@@ -8167,7 +8183,7 @@ class GroupPanelComponent {
         }
     }
     messageFor(token) {
-        return this.localization.get(token);
+        return this.ctx.localization.get(token);
     }
     getTitle(group) {
         return this.messageFor(group.dir === 'desc' ? 'sortedDescending' : 'sortedAscending');
@@ -8221,7 +8237,7 @@ class GroupPanelComponent {
     enter({ draggable, target }) {
         this.hint.enable();
         let before = target.context.lastTarget || isTargetBefore(draggable.element.nativeElement, target.element.nativeElement);
-        if (this.localization.rtl) {
+        if (this.ctx.localization.rtl) {
             before = !before;
         }
         this.cue.position(position(target.element.nativeElement, before));
@@ -8236,7 +8252,7 @@ class GroupPanelComponent {
         this.insert(field, index);
     }
 }
-GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: ContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
         <div
             *ngIf="groups.length === 0"
@@ -8337,7 +8353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >&nbsp;</div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
+        }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
                 type: Output
             }], groupHeaderClass: [{
                 type: HostBinding,
@@ -8513,12 +8529,12 @@ const toJSON = (xs) => xs.map(x => x.toJSON());
  * @hidden
  */
 class FilterOperatorBase {
-    constructor(operator, localization) {
+    constructor(operator, ctx) {
         this.operator = operator;
-        this.localization = localization;
-        this.messages = operatorTexts(this.localization);
+        this.ctx = ctx;
+        this.messages = operatorTexts(this.ctx.localization);
         this._text = this.messages[this.operator];
-        this.subscription = this.localization.changes.subscribe(this.refreshText.bind(this));
+        this.subscription = this.ctx.localization.changes.subscribe(this.refreshText.bind(this));
     }
     /**
      * The text that will be displayed in the drop-down list.
@@ -8548,13 +8564,13 @@ class FilterOperatorBase {
     }
     refreshText() {
         const update = this._text === this.messages[this.operator];
-        this.messages = operatorTexts(this.localization);
+        this.messages = operatorTexts(this.ctx.localization);
         if (update) {
             this._text = this.messages[this.operator];
         }
     }
 }
-FilterOperatorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterOperatorBase, deps: [{ token: 'filterOperator' }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterOperatorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterOperatorBase, deps: [{ token: 'filterOperator' }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 FilterOperatorBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterOperatorBase, selector: "kendo-grid-filter-operator-base", inputs: { text: "text" }, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterOperatorBase, decorators: [{
             type: Component,
@@ -8565,7 +8581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['filterOperator']
-                }] }, { type: i1.LocalizationService }]; }, propDecorators: { text: [{
+                }] }, { type: ContextService }]; }, propDecorators: { text: [{
                 type: Input
             }] } });
 
@@ -8849,9 +8865,9 @@ const stringOperators$1 = localizeOperators({
  * Represents a base string filter component.
  */
 class StringFilterComponent extends BaseFilterCellComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, ctx) {
         super(filterService);
-        this.localization = localization;
+        this.ctx = ctx;
         /**
          * The default filter operator.
          * @type {string}
@@ -8876,7 +8892,7 @@ class StringFilterComponent extends BaseFilterCellComponent {
         return this.currentFilter ? this.currentFilter.operator : this.operator;
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(this.localizationChange.bind(this));
+        this.subscription = this.ctx.localization.changes.subscribe(this.localizationChange.bind(this));
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -8885,18 +8901,18 @@ class StringFilterComponent extends BaseFilterCellComponent {
         super.ngOnDestroy();
     }
     localizationChange() {
-        this.defaultOperators = stringOperators$1(this.localization);
+        this.defaultOperators = stringOperators$1(this.ctx.localization);
         if (this.operatorList.length) {
             this.operators = toJSON(this.operatorList.toArray());
         }
     }
 }
-StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterComponent, deps: [{ token: FilterService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 StringFilterComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterComponent, inputs: { column: "column", filter: "filter", operator: "operator" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterComponent, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -9133,9 +9149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
-    constructor(localizationService) {
+    constructor(ctx) {
         super(null);
-        this.localizationService = localizationService;
+        this.ctx = ctx;
     }
     /**
      * @hidden
@@ -9144,7 +9160,9 @@ class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
         return false;
     }
     ngAfterViewInit() {
-        if (this.isFirstDropDown && this.filterService && this.filterService.menuTabbingService) {
+        const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService && this.filterService.menuTabbingService;
+        const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
+        if (shouldFocusFirstFocusable && !isTabbedInterface) {
             this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
             this.firstOperatorDropDown.focus();
         }
@@ -9190,12 +9208,12 @@ class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
         }
     }
     get filterMenuDropDownLabel() {
-        const localizationMsg = this.localizationService.get('filterMenuOperatorsDropDownLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterMenuOperatorsDropDownLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-FilterMenuInputWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuInputWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: { filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", currentFilter: "currentFilter" }, viewQueries: [{ propertyName: "firstOperatorDropDown", first: true, predicate: DropDownListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             kendoFilterMenuDropDown
@@ -9229,7 +9247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content></ng-content>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { filterService: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { filterService: [{
                 type: Input
             }], isFirstDropDown: [{
                 type: Input
@@ -9246,17 +9264,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class StringFilterMenuInputComponent {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
+    constructor(ctx) {
+        this.ctx = ctx;
         this.operators = [];
     }
     get columnLabel() {
-        const localizationMsg = this.localizationService.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-StringFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService" }, ngImport: i0, template: `
         <kendo-grid-filter-menu-input-wrapper
             [column]="column"
@@ -9300,7 +9318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-menu-input-wrapper>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { operators: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { operators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -9335,9 +9353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class StringFilterMenuComponent extends StringFilterComponent {
-    constructor(localization) {
-        super(null, localization);
-        this.logicOperators = logicOperators(this.localization);
+    constructor(ctx) {
+        super(null, ctx);
+        this.logicOperators = logicOperators(this.ctx.localization);
         /**
          * The current menu filter.
          * @type {CompositeFilterDescriptor}
@@ -9365,16 +9383,16 @@ class StringFilterMenuComponent extends StringFilterComponent {
         this.filter.logic = value;
     }
     get filterMenuDropDownLabel() {
-        const localizationMsg = this.localization.get('filterMenuLogicDropDownLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterMenuLogicDropDownLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
     localizationChange() {
-        this.logicOperators = logicOperators(this.localization);
+        this.logicOperators = logicOperators(this.ctx.localization);
         super.localizationChange();
     }
 }
-StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterMenuComponent, selector: "kendo-grid-string-filter-menu", inputs: { column: "column", filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-string-filter-menu-input
             [currentFilter]="firstFilter"
@@ -9442,7 +9460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-string-filter-menu-input>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
             }], column: [{
@@ -9472,9 +9490,9 @@ const numericOperators = localizeOperators({
  * Represents a base numeric filter component.
  */
 class NumericFilterComponent extends BaseFilterCellComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, ctx) {
         super(filterService);
-        this.localization = localization;
+        this.ctx = ctx;
         /**
          * The default filter operator.
          * @type {string}
@@ -9493,7 +9511,7 @@ class NumericFilterComponent extends BaseFilterCellComponent {
          * @default true
          */
         this.spinners = true;
-        this.defaultOperators = numericOperators(this.localization);
+        this.defaultOperators = numericOperators(this.ctx.localization);
     }
     /**
      * Specifies the number format used when the component is not focused.
@@ -9530,7 +9548,7 @@ class NumericFilterComponent extends BaseFilterCellComponent {
             extractFormat(this.column.format) : "n2";
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(this.localizationChange.bind(this));
+        this.subscription = this.ctx.localization.changes.subscribe(this.localizationChange.bind(this));
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -9539,18 +9557,18 @@ class NumericFilterComponent extends BaseFilterCellComponent {
         super.ngOnDestroy();
     }
     localizationChange() {
-        this.defaultOperators = numericOperators(this.localization);
+        this.defaultOperators = numericOperators(this.ctx.localization);
         if (this.operatorList.length) {
             this.operators = toJSON(this.operatorList.toArray());
         }
     }
 }
-NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterComponent, deps: [{ token: FilterService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 NumericFilterComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: NumericFilterComponent, inputs: { column: "column", filter: "filter", operator: "operator", step: "step", min: "min", max: "max", spinners: "spinners", decimals: "decimals", format: "format" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterComponent, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -9574,8 +9592,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class NumericFilterMenuInputComponent {
-    constructor(localization) {
-        this.localization = localization;
+    constructor(ctx) {
+        this.ctx = ctx;
         this.operators = [];
         /**
          * Specifies the value which is used to increment or decrement the component value.
@@ -9589,18 +9607,18 @@ class NumericFilterMenuInputComponent {
         this.spinners = true;
     }
     messageFor(key) {
-        return this.localization.get(key);
+        return this.ctx.localization.get(key);
     }
     /**
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-NumericFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", filterDelay: "filterDelay", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", step: "step", min: "min", max: "max", spinners: "spinners", decimals: "decimals", format: "format" }, ngImport: i0, template: `
         <kendo-grid-filter-menu-input-wrapper
             [column]="column"
@@ -9670,7 +9688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-menu-input-wrapper>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { operators: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { operators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -9719,9 +9737,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class NumericFilterMenuComponent extends NumericFilterComponent {
-    constructor(localization) {
-        super(null, localization);
-        this.logicOperators = logicOperators(this.localization);
+    constructor(ctx) {
+        super(null, ctx);
+        this.logicOperators = logicOperators(this.ctx.localization);
         /**
          * The current menu filter.
          * @type {CompositeFilterDescriptor}
@@ -9755,16 +9773,16 @@ class NumericFilterMenuComponent extends NumericFilterComponent {
         this.filter.logic = value;
     }
     get filterMenuDropDownLabel() {
-        const localizationMsg = this.localization.get('filterMenuLogicDropDownLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterMenuLogicDropDownLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
     localizationChange() {
-        this.logicOperators = logicOperators(this.localization);
+        this.logicOperators = logicOperators(this.ctx.localization);
         super.localizationChange();
     }
 }
-NumericFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 NumericFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericFilterMenuComponent, selector: "kendo-grid-numeric-filter-menu", inputs: { column: "column", filter: "filter", extra: "extra", filterService: "filterService", filterDelay: "filterDelay", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-numeric-filter-menu-input
             [currentFilter]="firstFilter"
@@ -9864,7 +9882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-numeric-filter-menu-input>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
             }], column: [{
@@ -9896,9 +9914,9 @@ const dateOperators = localizeOperators({
  * @hidden
  */
 class DateFilterComponent extends BaseFilterCellComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, ctx) {
         super(filterService);
-        this.localization = localization;
+        this.ctx = ctx;
         /**
          * The default filter operator. Defaults to `contains`.
          * @type {string}
@@ -9927,7 +9945,7 @@ class DateFilterComponent extends BaseFilterCellComponent {
          * @default false
          */
         this.weekNumber = false;
-        this.defaultOperators = dateOperators(this.localization);
+        this.defaultOperators = dateOperators(this.ctx.localization);
     }
     /**
      * The current filter for the associated column field.
@@ -9967,7 +9985,7 @@ class DateFilterComponent extends BaseFilterCellComponent {
             extractFormat(this.column.format) : "d";
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(this.localizationChange.bind(this));
+        this.subscription = this.ctx.localization.changes.subscribe(this.localizationChange.bind(this));
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -9976,13 +9994,13 @@ class DateFilterComponent extends BaseFilterCellComponent {
         super.ngOnDestroy();
     }
     localizationChange() {
-        this.defaultOperators = dateOperators(this.localization);
+        this.defaultOperators = dateOperators(this.ctx.localization);
         if (this.operatorList.length) {
             this.operators = toJSON(this.operatorList.toArray());
         }
     }
 }
-DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterComponent, deps: [{ token: FilterService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateFilterComponent, selector: "kendo-grid-date-filter-base", inputs: { column: "column", filter: "filter", operator: "operator", format: "format", min: "min", max: "max", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
@@ -9990,7 +10008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-date-filter-base',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -10020,9 +10038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class DateFilterMenuInputComponent {
-    constructor(popupService, localizationService) {
+    constructor(popupService, ctx) {
         this.popupService = popupService;
-        this.localizationService = localizationService;
+        this.ctx = ctx;
         this.operators = [];
     }
     ngOnDestroy() {
@@ -10036,15 +10054,15 @@ class DateFilterMenuInputComponent {
             .subscribe(e => e.preventDefault());
     }
     messageFor(key) {
-        return this.localizationService.get(key);
+        return this.ctx.localization.get(key);
     }
     get columnLabel() {
-        const localizationMsg = this.localizationService.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-DateFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuInputComponent, deps: [{ token: SinglePopupService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuInputComponent, deps: [{ token: SinglePopupService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", menuTabbingService: "menuTabbingService", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber", isFirstDropDown: "isFirstDropDown" }, ngImport: i0, template: `
         <kendo-grid-filter-menu-input-wrapper
             [column]="column"
@@ -10122,7 +10140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-menu-input-wrapper>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: i1.LocalizationService }]; }, propDecorators: { operators: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: ContextService }]; }, propDecorators: { operators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -10175,9 +10193,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class DateFilterMenuComponent extends DateFilterComponent {
-    constructor(localization) {
-        super(null, localization);
-        this.logicOperators = logicOperators(this.localization);
+    constructor(ctx) {
+        super(null, ctx);
+        this.logicOperators = logicOperators(this.ctx.localization);
         /**
          * The current menu filter.
          * @type {CompositeFilterDescriptor}
@@ -10205,16 +10223,16 @@ class DateFilterMenuComponent extends DateFilterComponent {
         this.filter.logic = value;
     }
     get filterMenuDropDownLabel() {
-        const localizationMsg = this.localization.get('filterMenuLogicDropDownLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterMenuLogicDropDownLabel') || '';
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
     localizationChange() {
-        this.logicOperators = logicOperators(this.localization);
+        this.logicOperators = logicOperators(this.ctx.localization);
         super.localizationChange();
     }
 }
-DateFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateFilterMenuComponent, selector: "kendo-grid-date-filter-menu", inputs: { column: "column", filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-date-filter-menu-input
             [currentFilter]="firstFilter"
@@ -10324,7 +10342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-date-filter-menu-input>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
             }], column: [{
@@ -10344,9 +10362,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class BooleanFilterComponent extends BaseFilterCellComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, ctx) {
         super(filterService);
-        this.localization = localization;
+        this.ctx = ctx;
         /**
          * @hidden
          */
@@ -10355,13 +10373,13 @@ class BooleanFilterComponent extends BaseFilterCellComponent {
          * @hidden
          */
         this.items = [
-            { text: this.localization.get("filterIsTrue"), value: true },
-            { text: this.localization.get("filterIsFalse"), value: false }
+            { text: this.ctx.localization.get("filterIsTrue"), value: true },
+            { text: this.ctx.localization.get("filterIsFalse"), value: false }
         ];
         /**
          * @hidden
          */
-        this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
+        this.defaultItem = { text: this.ctx.localization.get("filterBooleanAll"), value: null };
     }
     /**
      * @hidden
@@ -10386,7 +10404,7 @@ class BooleanFilterComponent extends BaseFilterCellComponent {
         return this.currentFilter ? this.currentFilter.operator : this.operator;
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(this.localizationChange.bind(this));
+        this.subscription = this.ctx.localization.changes.subscribe(this.localizationChange.bind(this));
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -10396,13 +10414,13 @@ class BooleanFilterComponent extends BaseFilterCellComponent {
     }
     localizationChange() {
         this.items = [
-            { text: this.localization.get("filterIsTrue"), value: true },
-            { text: this.localization.get("filterIsFalse"), value: false }
+            { text: this.ctx.localization.get("filterIsTrue"), value: true },
+            { text: this.ctx.localization.get("filterIsFalse"), value: false }
         ];
-        this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
+        this.defaultItem = { text: this.ctx.localization.get("filterBooleanAll"), value: null };
     }
 }
-BooleanFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterComponent, deps: [{ token: FilterService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 BooleanFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterComponent, selector: "kendo-grid-boolean-filter-base", inputs: { column: "column", filter: "filter" }, host: { properties: { "class.k-filtercell-boolean": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterComponent, decorators: [{
             type: Component,
@@ -10410,7 +10428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-boolean-filter-base',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell-boolean']
             }], column: [{
@@ -10459,8 +10477,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class BooleanFilterMenuComponent extends BooleanFilterComponent {
-    constructor(localization) {
-        super(null, localization);
+    constructor(ctx) {
+        super(null, ctx);
         /**
          * The current menu filter.
          * @type {CompositeFilterDescriptor}
@@ -10476,7 +10494,9 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
     }
     ngAfterViewInit() {
         this.filterService.menuTabbingService.firstFocusable = this.radioButtons.first.radioButtonEl;
-        this.radioButtons.first.radioButtonEl.focus();
+        if (!this.menuTabbingService?.isTabbedInterface) {
+            this.radioButtons.first.radioButtonEl.focus();
+        }
     }
     /**
      * @hidden
@@ -10514,12 +10534,12 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-BooleanFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterMenuComponent, selector: "kendo-grid-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
@@ -10561,7 +10581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ul>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
             }], filter: [{
@@ -10650,16 +10670,16 @@ const parentLogicOfDefault = (filter, field, def = "and") => {
  * @hidden
  */
 class FilterMenuContainerComponent {
-    constructor(parentService, childService, localization, cd, menuTabbingService) {
+    constructor(parentService, childService, ctx, cd, menuTabbingService) {
         this.parentService = parentService;
         this.childService = childService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.cd = cd;
         this.close = new EventEmitter();
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }
@@ -10684,7 +10704,7 @@ class FilterMenuContainerComponent {
     }
     ngOnInit() {
         this.subscription = this.childService.changes.subscribe(filter => this._childFilter = filter);
-        this.subscription.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+        this.subscription.add(this.ctx.localization.changes.subscribe(() => this.cd.markForCheck()));
     }
     ngAfterViewChecked() {
         if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
@@ -10747,13 +10767,13 @@ class FilterMenuContainerComponent {
         }
     }
     get clearText() {
-        return this.localization.get("filterClearButton");
+        return this.ctx.localization.get("filterClearButton");
     }
     get filterText() {
-        return this.localization.get("filterFilterButton");
+        return this.ctx.localization.get("filterFilterButton");
     }
 }
-FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: FilterService, skipSelf: true }, { token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: FilterService, skipSelf: true }, { token: FilterService }, { token: ContextService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
         FilterService,
         MenuTabbingService
@@ -10781,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>
@@ -10827,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>
@@ -10844,7 +10864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: FilterService, decorators: [{
                     type: SkipSelf
-                }] }, { type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }]; }, propDecorators: { close: [{
+                }] }, { type: FilterService }, { type: ContextService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }]; }, propDecorators: { close: [{
                 type: Output
             }], column: [{
                 type: Input
@@ -10870,10 +10890,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class FilterMenuComponent {
-    constructor(filterService, popupService, localization, navigationService) {
+    constructor(filterService, popupService, ctx, navigationService) {
         this.filterService = filterService;
         this.popupService = popupService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.navigationService = navigationService;
         this.filterIcon = filterIcon;
         this.tabIndex = '-1';
@@ -10885,7 +10905,7 @@ class FilterMenuComponent {
      * @hidden
      */
     get filterLabel() {
-        const localizationMsg = this.localization.get('filterMenuTitle') || '';
+        const localizationMsg = this.ctx.localization.get('filterMenuTitle') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
@@ -10911,7 +10931,7 @@ class FilterMenuComponent {
         }
     }
 }
-FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: i1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -10935,7 +10955,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-grid-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -10965,7 +10985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: i1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -11173,7 +11193,7 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -11284,16 +11304,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuLockComponent extends ColumnMenuItemBase {
-    constructor(localization, columnInfoService, changeDetector) {
+    constructor(ctx, columnInfoService, changeDetector) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
         this.unlockIcon = unlockIcon;
         this.lockIcon = lockIcon;
     }
     get text() {
-        return this.localization.get(this.locked ? 'unlock' : 'lock');
+        return this.ctx.localization.get(this.locked ? 'unlock' : 'lock');
     }
     get icon() {
         return this.locked ? 'unlock' : 'lock';
@@ -11333,7 +11353,7 @@ class ColumnMenuLockComponent extends ColumnMenuItemBase {
         return this.service.column.locked;
     }
 }
-ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
        <kendo-grid-columnmenu-item
             [text]="text"
@@ -11357,7 +11377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
        </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the column-menu item that sticks or unsticks columns in the Grid.
@@ -11379,16 +11399,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuStickComponent extends ColumnMenuItemBase {
-    constructor(localization, columnInfoService, changeDetector) {
+    constructor(ctx, columnInfoService, changeDetector) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
         this.stickIcon = stickIcon;
         this.unstickIcon = unstickIcon;
     }
     get text() {
-        return this.localization.get(this.sticky ? 'unstick' : 'stick');
+        return this.ctx.localization.get(this.sticky ? 'unstick' : 'stick');
     }
     get icon() {
         return this.sticky ? 'unstick' : 'stick';
@@ -11428,7 +11448,7 @@ class ColumnMenuStickComponent extends ColumnMenuItemBase {
         return this.service.column.sticky;
     }
 }
-ColumnMenuStickComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuStickComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuStickComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuStickComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuStickComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
            [text]="text"
@@ -11452,14 +11472,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
  *
  * 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-set-column-position-item).
+ * 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
@@ -11472,9 +11492,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuPositionComponent extends ColumnMenuItemBase {
-    constructor(localization, hostElement) {
+    constructor(ctx, hostElement) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.hostElement = hostElement;
         /**
          * Fires when the content is expanded.
@@ -11547,10 +11567,10 @@ class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         return menuItems[lastFocusableIndex];
     }
 }
-ColumnMenuPositionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuPositionComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuPositionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuPositionComponent, deps: [{ token: ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: { expanded: "expanded", showLock: "showLock", showStick: "showStick", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('setColumnPosition')"
+            [text]="ctx.localization.get('setColumnPosition')"
             icon="set-column-position"
             [svgIcon]="setColumnPositionIcon"
             [expanded]="expanded"
@@ -11577,7 +11597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-columnmenu-position',
                     template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('setColumnPosition')"
+            [text]="ctx.localization.get('setColumnPosition')"
             icon="set-column-position"
             [svgIcon]="setColumnPositionIcon"
             [expanded]="expanded"
@@ -11599,7 +11619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
@@ -11626,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() {
@@ -11765,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: [{
@@ -11780,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>
     `
                 }]
@@ -11834,9 +11854,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuChooserComponent extends ColumnMenuItemBase {
-    constructor(localization, columnInfoService, changeDetector, hostElement) {
+    constructor(ctx, columnInfoService, changeDetector, hostElement) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
@@ -11860,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() {
@@ -11894,10 +11914,10 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.expand.emit();
     }
 }
-ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('columns')"
+            [text]="ctx.localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
             [expanded]="expanded"
@@ -11905,8 +11925,8 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
                 <kendo-grid-columnlist
-                    [applyText]="localization.get('columnsApply')"
-                    [resetText]="localization.get('columnsReset')"
+                    [applyText]="ctx.localization.get('columnsApply')"
+                    [resetText]="ctx.localization.get('columnsReset')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -11925,7 +11945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-columnmenu-chooser',
                     template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('columns')"
+            [text]="ctx.localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
             [expanded]="expanded"
@@ -11933,8 +11953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
                 <kendo-grid-columnlist
-                    [applyText]="localization.get('columnsApply')"
-                    [resetText]="localization.get('columnsReset')"
+                    [applyText]="ctx.localization.get('columnsApply')"
+                    [resetText]="ctx.localization.get('columnsReset')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -11948,7 +11968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
@@ -11976,9 +11996,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuFilterComponent extends ColumnMenuItemBase {
-    constructor(localization, hostElement) {
+    constructor(ctx, hostElement) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.hostElement = hostElement;
         /**
          * Fires when the content is expanded.
@@ -12000,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;
     }
     /**
@@ -12021,10 +12041,10 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.expand.emit();
     }
 }
-ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('filter')"
+            [text]="ctx.localization.get('filter')"
             icon="filter"
             [svgIcon]="filterIcon"
             [expanded]="expanded"
@@ -12050,7 +12070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-columnmenu-filter',
                     template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('filter')"
+            [text]="ctx.localization.get('filter')"
             icon="filter"
             [svgIcon]="filterIcon"
             [expanded]="expanded"
@@ -12071,7 +12091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
@@ -12217,6 +12237,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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.
+ *
  * @example
  * ```html
  * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
@@ -12228,9 +12251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuSortComponent extends ColumnMenuItemBase {
-    constructor(localization, sortService, renderer) {
+    constructor(ctx, sortService, renderer) {
         super();
-        this.localization = localization;
+        this.ctx = ctx;
         this.sortService = sortService;
         this.renderer = renderer;
         this.sortAscSmallIcon = sortAscSmallIcon;
@@ -12267,17 +12290,17 @@ class ColumnMenuSortComponent extends ColumnMenuItemBase {
         return [].concat(this.service.sort || []).find(s => s.field === this.service.column.field);
     }
 }
-ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuSortComponent, deps: [{ token: i1.LocalizationService }, { token: SortService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuSortComponent, deps: [{ token: ContextService }, { token: SortService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('sortAscending')"
+            [text]="ctx.localization.get('sortAscending')"
             icon="sort-asc-small"
             [svgIcon]="sortAscSmallIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
-            [text]="localization.get('sortDescending')"
+            [text]="ctx.localization.get('sortDescending')"
             icon="sort-desc-small"
             [svgIcon]="sortDescSmallIcon"
             (itemClick)="toggleSort('desc')"
@@ -12290,14 +12313,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-columnmenu-sort',
                     template: `
         <kendo-grid-columnmenu-item
-            [text]="localization.get('sortAscending')"
+            [text]="ctx.localization.get('sortAscending')"
             icon="sort-asc-small"
             [svgIcon]="sortAscSmallIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
-            [text]="localization.get('sortDescending')"
+            [text]="ctx.localization.get('sortDescending')"
             icon="sort-desc-small"
             [svgIcon]="sortDescSmallIcon"
             (itemClick)="toggleSort('desc')"
@@ -12305,7 +12328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: SortService }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: SortService }, { type: i0.Renderer2 }]; } });
 
 /**
  * Represents the column-menu item for resizing the specified column to the minimum possible width so that it fits the header or cell content without wrapping.
@@ -12327,9 +12350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
-    constructor(localization, ctx) {
+    constructor(ctx) {
         super();
-        this.localization = localization;
         this.ctx = ctx;
         this.maxWidthIcon = maxWidthIcon;
     }
@@ -12346,12 +12368,12 @@ class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.grid, this.service, this.column);
     }
 }
-ColumnMenuAutoSizeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.LocalizationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
             class="k-grid-columnmenu-autosize-column"
-            [text]="localization.get('autosizeThisColumn')"
+            [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
@@ -12365,14 +12387,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
             class="k-grid-columnmenu-autosize-column"
-            [text]="localization.get('autosizeThisColumn')"
+            [text]="ctx.localization.get('autosizeThisColumn')"
             icon="max-width"
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
         ></kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ContextService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });
 
@@ -12395,11 +12417,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
-    constructor(localization, ctx) {
+    constructor(ctx) {
         super();
-        this.localization = localization;
         this.ctx = ctx;
-        this.displayInlineBlockIcon = displayInlineBlockIcon;
+        this.displayInlineFlexIcon = displayInlineFlexIcon;
     }
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
@@ -12414,13 +12435,13 @@ class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
         autoSizeColumn(this.ctx.grid, this.service);
     }
 }
-ColumnMenuAutoSizeAllColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.LocalizationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeAllColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
-            [text]="localization.get('autosizeAllColumns')"
-            icon="display-inline-block"
-            [svgIcon]="displayInlineBlockIcon"
+            [text]="ctx.localization.get('autosizeAllColumns')"
+            icon="display-inline-flex"
+            [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
         ></kendo-grid-columnmenu-item>
     `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -12431,14 +12452,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: `
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
-            [text]="localization.get('autosizeAllColumns')"
-            icon="display-inline-block"
-            [svgIcon]="displayInlineBlockIcon"
+            [text]="ctx.localization.get('autosizeAllColumns')"
+            icon="display-inline-flex"
+            [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
         ></kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
@@ -12453,12 +12474,14 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
  * </kendo-grid>
  */
 class ColumnMenuComponent {
-    constructor(navigationService, popupService, localization, service, ctx) {
+    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService) {
         this.navigationService = navigationService;
         this.popupService = popupService;
-        this.localization = localization;
         this.service = service;
         this.ctx = ctx;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.columnInfoService = columnInfoService;
         /**
          * @hidden
          */
@@ -12475,6 +12498,22 @@ class ColumnMenuComponent {
          * @hidden
          */
         this.tabIndex = '-1';
+        /**
+         * @hidden
+         */
+        this.columnsIcon = columnsIcon;
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-actions';
+        /**
+         * @hidden
+         */
+        this.moreHorizontalIcon = moreHorizontalIcon;
+        /**
+         * @hidden
+         */
+        this.filterIcon = filterIcon;
         /**
          * @hidden
          */
@@ -12490,6 +12529,17 @@ class ColumnMenuComponent {
         this.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
+    /**
+     * @hidden
+     */
+    get showGeneralTab() {
+        return this.hasSort
+            || this.hasLock
+            || this.hasStick
+            || this.hasPosition
+            || this.hasAutoSizeColumn
+            || this.hasAutoSizeAllColumns;
+    }
     /**
      * @hidden
      */
@@ -12515,6 +12565,16 @@ class ColumnMenuComponent {
     get hasColumnChooser() {
         return hasColumnChooser(this.settings);
     }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.cdr.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
     /**
      * @hidden
      */
@@ -12545,6 +12605,12 @@ class ColumnMenuComponent {
     get hasPosition() {
         return hasPosition(this.settings, this.column);
     }
+    /**
+     * @hidden
+     */
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
     ngAfterViewInit() {
         if (this.ctx.grid.virtualColumns && isDevMode()) {
             if (this.settings.autoSizeAllColumns) {
@@ -12556,6 +12622,7 @@ class ColumnMenuComponent {
                 console.warn(ColunnMenuErrorMessages.autoSizeColumn);
             }
         }
+        this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
     }
     ngOnChanges() {
         this.service.column = this.column;
@@ -12579,6 +12646,11 @@ class ColumnMenuComponent {
         this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
         this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        if (this.popupRef && this.settings.view === 'tabbed') {
+            this.renderer.addClass(this.popupRef.popupElement.firstChild, 'k-column-menu-tabbed');
+            this.cdr.detectChanges();
+            this.tabStrip?.selectTab(0);
+        }
         if (!this.popupRef) {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
@@ -12605,7 +12677,7 @@ class ColumnMenuComponent {
      * @hidden
      */
     get columnMenuTitle() {
-        const localizationMsg = this.localization.get('columnMenu') || '';
+        const localizationMsg = this.ctx.localization.get('columnMenu') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
@@ -12613,11 +12685,11 @@ class ColumnMenuComponent {
         return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: i1.LocalizationService }, { token: ColumnMenuService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
         ColumnMenuService,
         MenuTabbingService
-    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tabbedInterfaceTemplate", first: true, predicate: ["tabbedInterfaceTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tabStrip", first: true, predicate: TabStripComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-header-menu k-grid-column-menu"
             [ngClass]="{ 'k-active': isActive }"
@@ -12632,7 +12704,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </a>
         <ng-template #template>
             <ng-container
-                [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
                 [ngTemplateOutletContext]="{ service: service, column: column }">
             </ng-container>
         </ng-template>
@@ -12689,7 +12761,95 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
+        <ng-template #tabbedInterfaceTemplate>
+            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+                <kendo-tabstrip-tab *ngIf="hasFilter">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
+                            name="filter"
+                            [svgIcon]="filterIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template> 
+                    <ng-template kendoTabContent>
+                        <kendo-grid-filter-menu-container
+                            [column]="service.column"
+                            [menuTabbingService]="service.menuTabbingService"
+                            [filter]="service.filter"
+                            [actionsClass]="actionsClass"
+                            (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                            (close)="close()">
+                        </kendo-grid-filter-menu-container>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab *ngIf="showGeneralTab">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
+                            name="more-horizontal"
+                            [svgIcon]="moreHorizontalIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                        <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                        </kendo-grid-columnmenu-sort>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
+                        </kendo-grid-columnmenu-lock>
+                        <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
+                        </kendo-grid-columnmenu-stick>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="(hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-position
+                            #positionItem
+                            *ngIf="hasPosition"
+                            [showLock]="hasLock"
+                            [showStick]="hasStick"
+                            [kendoGridColumnMenuItem]="positionItem"
+                            [service]="service"
+                            [expanded]="expandedPosition">
+                        </kendo-grid-columnmenu-position>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-autosize-column
+                            #autoSizeColumnItem
+                            *ngIf="hasAutoSizeColumn"
+                            [service]="service"
+                            [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                            [column]="column"
+                        >
+                        </kendo-grid-columnmenu-autosize-column>
+                        <kendo-grid-columnmenu-autosize-all-columns
+                            #autoSizeAllColumnsItem
+                            *ngIf="hasAutoSizeAllColumns"
+                            [service]="service"
+                            [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                        >
+                        </kendo-grid-columnmenu-autosize-all-columns>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab *ngIf="hasColumnChooser">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
+                            name="columns"
+                            [svgIcon]="columnsIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                        <kendo-grid-columnlist
+                            [applyText]="ctx.localization.get('columnsApply')"
+                            [resetText]="ctx.localization.get('columnsReset')"
+                            [columns]="columns"
+                            [autoSync]="false"
+                            [allowHideAll]="false"
+                            [actionsClass]="actionsClass"
+                            [service]="service"
+                            (apply)="onApply($event)">
+                        </kendo-grid-columnlist>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+        </ng-template>
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -12713,7 +12873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </a>
         <ng-template #template>
             <ng-container
-                [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
                 [ngTemplateOutletContext]="{ service: service, column: column }">
             </ng-container>
         </ng-template>
@@ -12770,9 +12930,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
+        <ng-template #tabbedInterfaceTemplate>
+            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+                <kendo-tabstrip-tab *ngIf="hasFilter">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
+                            name="filter"
+                            [svgIcon]="filterIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template> 
+                    <ng-template kendoTabContent>
+                        <kendo-grid-filter-menu-container
+                            [column]="service.column"
+                            [menuTabbingService]="service.menuTabbingService"
+                            [filter]="service.filter"
+                            [actionsClass]="actionsClass"
+                            (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                            (close)="close()">
+                        </kendo-grid-filter-menu-container>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab *ngIf="showGeneralTab">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
+                            name="more-horizontal"
+                            [svgIcon]="moreHorizontalIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                        <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                        </kendo-grid-columnmenu-sort>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
+                        </kendo-grid-columnmenu-lock>
+                        <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
+                        </kendo-grid-columnmenu-stick>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="(hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-position
+                            #positionItem
+                            *ngIf="hasPosition"
+                            [showLock]="hasLock"
+                            [showStick]="hasStick"
+                            [kendoGridColumnMenuItem]="positionItem"
+                            [service]="service"
+                            [expanded]="expandedPosition">
+                        </kendo-grid-columnmenu-position>
+                        <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
+                        <kendo-grid-columnmenu-autosize-column
+                            #autoSizeColumnItem
+                            *ngIf="hasAutoSizeColumn"
+                            [service]="service"
+                            [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                            [column]="column"
+                        >
+                        </kendo-grid-columnmenu-autosize-column>
+                        <kendo-grid-columnmenu-autosize-all-columns
+                            #autoSizeAllColumnsItem
+                            *ngIf="hasAutoSizeAllColumns"
+                            [service]="service"
+                            [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                        >
+                        </kendo-grid-columnmenu-autosize-all-columns>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab *ngIf="hasColumnChooser">
+                    <ng-template kendoTabTitle>
+                        <kendo-icon-wrapper
+                            [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
+                            name="columns"
+                            [svgIcon]="columnsIcon">
+                        </kendo-icon-wrapper>
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                        <kendo-grid-columnlist
+                            [applyText]="ctx.localization.get('columnsApply')"
+                            [resetText]="ctx.localization.get('columnsReset')"
+                            [columns]="columns"
+                            [autoSync]="false"
+                            [allowHideAll]="false"
+                            [actionsClass]="actionsClass"
+                            [service]="service"
+                            (apply)="onApply($event)">
+                        </kendo-grid-columnlist>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+        </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: i1.LocalizationService }, { type: ColumnMenuService }, { type: ContextService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -12797,6 +13045,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], template: [{
                 type: ViewChild,
                 args: ['template', { static: true, read: TemplateRef }]
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate', { static: true, read: TemplateRef }]
+            }], tabbedInterfaceTemplate: [{
+                type: ViewChild,
+                args: ['tabbedInterfaceTemplate', { static: true, read: TemplateRef }]
+            }], tabStrip: [{
+                type: ViewChild,
+                args: [TabStripComponent]
             }] } });
 
 /**
@@ -12817,8 +13074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class FilterCellOperatorsComponent {
-    constructor(localization, sizing) {
-        this.localization = localization;
+    constructor(ctx, sizing) {
+        this.ctx = ctx;
         this.sizing = sizing;
         this.clearText = 'Clear';
         this.filterClearIcon = filterClearIcon;
@@ -12887,7 +13144,7 @@ class FilterCellOperatorsComponent {
         }
     }
     ngOnInit() {
-        this.subs = this.localization.changes.subscribe(() => this.clearText = this.localization.get('filterClearButton'));
+        this.subs = this.ctx.localization.changes.subscribe(() => this.clearText = this.ctx.localization.get('filterClearButton'));
         this.subs.add(this.sizing.changes.subscribe((size) => this.size = size));
     }
     ngOnDestroy() {
@@ -12896,7 +13153,7 @@ class FilterCellOperatorsComponent {
         }
     }
 }
-FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdown
@@ -12958,7 +13215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (keydown)="clearKeydown($event)"></button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell-operator']
             }], dropdown: [{
@@ -13055,8 +13312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class StringFilterCellComponent extends StringFilterComponent {
-    constructor(filterService, localization, sizingService) {
-        super(filterService, localization);
+    constructor(filterService, ctx, sizingService) {
+        super(filterService, ctx);
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
          * A value of `0` indicates no delay.
@@ -13081,12 +13338,12 @@ class StringFilterCellComponent extends StringFilterComponent {
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-StringFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, deps: [{ token: FilterService }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13126,7 +13383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
                 type: Input
             }], showOperators: [{
                 type: Input
@@ -13149,13 +13406,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class NumericFilterCellComponent extends NumericFilterComponent {
-    constructor(filterService, localization, sizingService) {
-        super(filterService, localization);
-        this.localization = localization;
+    constructor(filterService, ctx, sizingService) {
+        super(filterService, ctx);
+        this.ctx = ctx;
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
          * A value of `0` indicates no delay. The default value is `500`.
-         * @type {boolean}
+         * @type {boolean}\
          * @default 500
          */
         this.filterDelay = 500;
@@ -13175,18 +13432,18 @@ class NumericFilterCellComponent extends NumericFilterComponent {
      * @hidden
      */
     messageFor(key) {
-        return this.localization.get(key);
+        return this.ctx.localization.get(key);
     }
     /**
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-NumericFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, deps: [{ token: FilterService }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13254,7 +13511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
                 type: Input
             }], showOperators: [{
                 type: Input
@@ -13278,8 +13535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class BooleanFilterCellComponent extends BooleanFilterComponent {
-    constructor(filterService, localization, cd, sizingService) {
-        super(filterService, localization);
+    constructor(filterService, ctx, cd, sizingService) {
+        super(filterService, ctx);
         this.cd = cd;
         /**
          * @hidden
@@ -13298,12 +13555,12 @@ class BooleanFilterCellComponent extends BooleanFilterComponent {
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-BooleanFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, deps: [{ token: FilterService }, { token: ContextService }, { token: i0.ChangeDetectorRef }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13351,7 +13608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: SizingOptionsService }]; } });
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }, { type: i0.ChangeDetectorRef }, { type: SizingOptionsService }]; } });
 
 /**
  * Represents a [DatePicker](slug:overview_datepicker) filter-cell component.
@@ -13370,9 +13627,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class DateFilterCellComponent extends DateFilterComponent {
-    constructor(filterService, localization, sizingService) {
-        super(filterService, localization);
-        this.localization = localization;
+    constructor(filterService, ctx, sizingService) {
+        super(filterService, ctx);
+        this.ctx = ctx;
         /**
          *  Represents a [DatePicker](slug:overview_datepicker) filter-cell component.
          * [See example](slug:filter_row#toc-built-in-filter-row-components).
@@ -13401,18 +13658,18 @@ class DateFilterCellComponent extends DateFilterComponent {
      * @hidden
      */
     messageFor(key) {
-        return this.localization.get(key);
+        return this.ctx.localization.get(key);
     }
     /**
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-DateFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, deps: [{ token: FilterService }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: { showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13482,7 +13739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
                 type: Input
             }] } });
 
@@ -13777,8 +14034,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class FilterRowComponent {
-    constructor(localization, columnInfoService) {
-        this.localization = localization;
+    constructor(ctx, columnInfoService) {
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.columns = [];
         this.groups = [];
@@ -13789,12 +14046,12 @@ class FilterRowComponent {
         return { ...sticky, ...column.filterStyle };
     }
     filterLabel(column) {
-        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
         const columnName = column.title || column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
 FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
         <td
             class="k-table-td"
@@ -13854,7 +14111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
       ></td>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { columns: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -14164,13 +14421,13 @@ const indexOf = (target, list) => {
  * @hidden
  */
 class ColumnHandleDirective {
-    constructor(draggable, element, service, zone, cdr, localization, columnInfoService) {
+    constructor(draggable, element, service, zone, cdr, ctx, columnInfoService) {
         this.draggable = draggable;
         this.element = element;
         this.service = service;
         this.zone = zone;
         this.cdr = cdr;
-        this.localization = localization;
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.columns = [];
         this.subscriptions = new Subscription();
@@ -14225,7 +14482,7 @@ class ColumnHandleDirective {
             .subscribe(this.sizeToFit.bind(this)));
         this.subscriptions.add(service.pipe(filter(e => e.type === 'triggerAutoFit'))
             .subscribe(this.autoFit.bind(this)));
-        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl));
+        this.subscriptions.add(this.ctx.localization.changes.subscribe(({ rtl }) => this.rtl = rtl));
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -14301,7 +14558,7 @@ class ColumnHandleDirective {
         }
     }
 }
-ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
 ColumnHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHandleDirective, decorators: [{
             type: Directive,
@@ -14310,7 +14567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: ColumnInfoService }]; }, propDecorators: { columns: [{
+                }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { columns: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -14353,14 +14610,13 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd, contextService) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
         this.reorderService = reorderService;
         this.idService = idService;
         this.sortService = sortService;
-        this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.cd = cd;
         this.contextService = contextService;
@@ -14386,7 +14642,7 @@ class HeaderComponent {
         return !this.scrollable;
     }
     get sortableLabel() {
-        return this.localization.get('sortable');
+        return this.contextService.localization.get('sortable');
     }
     get columnMenuSettings() {
         return this.columnMenu;
@@ -14452,7 +14708,7 @@ class HeaderComponent {
             args.preventDefault();
             const columnsCount = this.columnInfoService.leafNamedColumns.length;
             const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
-            const rtlMultiplier = this.localization.rtl ? -1 : 1;
+            const rtlMultiplier = this.contextService.localization.rtl ? -1 : 1;
             const reorderDirectionOffset = reorderDirection * rtlMultiplier;
             const newIndex = column.leafIndex + reorderDirectionOffset;
             const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
@@ -14510,7 +14766,7 @@ class HeaderComponent {
         else if (state.dir === 'desc') {
             msg = 'sortedDescending';
         }
-        return this.localization.get(msg);
+        return this.contextService.localization.get(msg);
     }
     /**
      *
@@ -14556,7 +14812,7 @@ class HeaderComponent {
         }
     }
     ngOnInit() {
-        this.subscription.add(this.localization.changes
+        this.subscription.add(this.contextService.localization.changes
             .subscribe(() => this.cd.markForCheck()));
     }
     ngOnDestroy() {
@@ -14572,7 +14828,7 @@ class HeaderComponent {
         return this.idService.selectAllCheckboxId();
     }
     get selectAllCheckboxLabel() {
-        return this.localization.get('selectAllCheckboxLabel');
+        return this.contextService.localization.get('selectAllCheckboxLabel');
     }
     isFirstOnRow(column, index) {
         const isTailing = (c) => c &&
@@ -14710,7 +14966,7 @@ class HeaderComponent {
             const halfWidth = targetElement.offsetWidth / 2;
             const middle = left + halfWidth;
             before = middle > mouseEvent.pageX;
-            if (this.localization.rtl) {
+            if (this.contextService.localization.rtl) {
                 before = !before;
             }
         }
@@ -14721,7 +14977,7 @@ class HeaderComponent {
     }
     enter({ target, before }) {
         this.hint.enable();
-        if (this.localization.rtl) {
+        if (this.contextService.localization.rtl) {
             before = !before;
         }
         this.cue.position(position(target.element.nativeElement, before));
@@ -14739,7 +14995,7 @@ class HeaderComponent {
         });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
@@ -14965,7 +15221,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -15197,7 +15453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -15614,10 +15870,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class CellComponent {
-    constructor(editService, idService, localizationService, cellContext) {
+    constructor(editService, idService, ctx, cellContext) {
         this.editService = editService;
         this.idService = idService;
-        this.localizationService = localizationService;
+        this.ctx = ctx;
         this.cellContext = cellContext;
         this.isNew = false;
         this.isLoading = false;
@@ -15633,7 +15889,7 @@ class CellComponent {
         return isRowReorderColumn(this.column);
     }
     get dragRowHandleLabel() {
-        return isRowReorderColumn(this.column) ? this.localizationService.get('dragRowHandleLabel') : undefined;
+        return isRowReorderColumn(this.column) ? this.ctx.localization.get('dragRowHandleLabel') : undefined;
     }
     set rowIndex(index) {
         this._rowIndex = index;
@@ -15683,7 +15939,7 @@ class CellComponent {
         return this.idService.selectionCheckboxId(this.rowIndex);
     }
     get selectionCheckboxLabel() {
-        return this.localizationService.get('selectionCheckboxLabel');
+        return this.ctx.localization.get('selectionCheckboxLabel');
     }
     get isSpanColumn() {
         return isSpanColumn(this.column) && !this.column.templateRef;
@@ -15739,7 +15995,7 @@ class CellComponent {
         context.$implicit = this.dataItem;
     }
 }
-CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: i1.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: ContextService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoGridCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-container [ngSwitch]="isEdited">
             <ng-container *ngSwitchCase="false">
@@ -15816,7 +16072,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -15899,7 +16155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: IdService }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -15938,19 +16194,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class GroupHeaderComponent {
-    constructor(groupsService, groupInfoService, localization) {
+    constructor(groupsService, groupInfoService, ctx) {
         this.groupsService = groupsService;
         this.groupInfoService = groupInfoService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.skipGroupDecoration = false;
         this.hasDetails = false;
         this.totalColumnsCount = 0;
         this.groups = [];
+        this.groupItemClass = true;
+        this.tableGroupRowClass = true;
         this.isExpanded = false;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
-        this.groupItemClass = true;
-        this.tableGroupRowClass = true;
+        this.caretAltLeftIcon = caretAltLeftIcon;
     }
     ngDoCheck() {
         const groupArgs = {
@@ -15999,10 +16256,26 @@ class GroupHeaderComponent {
     }
     get groupButtonTitle() {
         const messageKey = this.isExpanded ? 'groupCollapse' : 'groupExpand';
-        return this.localization.get(messageKey);
+        return this.ctx.localization.get(messageKey);
+    }
+    get arrowIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-down';
+        return icon;
+    }
+    get arrowSVGIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        return icon;
     }
 }
-GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!skipGroupDecoration">
             <td class="k-group-cell k-table-td"
@@ -16027,8 +16300,8 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -16072,7 +16345,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </ng-template>
             </td>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -16101,8 +16374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -16148,7 +16421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: GroupsService }, { type: GroupInfoService }, { type: i1.LocalizationService }]; }, propDecorators: { rowIndex: [{
+        }], ctorParameters: function () { return [{ type: GroupsService }, { type: GroupInfoService }, { type: ContextService }]; }, propDecorators: { rowIndex: [{
                 type: Input
             }], logicalRowIndex: [{
                 type: Input
@@ -16191,12 +16464,12 @@ const columnCellIndex = (cell, cells) => {
  * @hidden
  */
 class TableBodyComponent {
-    constructor(detailsService, groupsService, changeNotification, editService, localization, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService) {
+    constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService) {
         this.detailsService = detailsService;
         this.groupsService = groupsService;
         this.changeNotification = changeNotification;
         this.editService = editService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.element = element;
@@ -16208,7 +16481,7 @@ class TableBodyComponent {
         this.columns = [];
         this.groups = [];
         this.skip = 0;
-        this.noRecordsText = this.localization.get('noRecords');
+        this.noRecordsText = this.ctx.localization.get('noRecords');
         this.isLocked = false;
         this.skipGroupDecoration = false;
         this.showGroupFooters = false;
@@ -16251,7 +16524,7 @@ class TableBodyComponent {
     }
     detailButtonTitle(viewItem) {
         const messageKey = this.isExpanded(viewItem) ? 'detailCollapse' : 'detailExpand';
-        return this.localization.get(messageKey);
+        return this.ctx.localization.get(messageKey);
     }
     isGroup(item) {
         return item.type === 'group';
@@ -16360,10 +16633,10 @@ class TableBodyComponent {
                 touchendSubscription();
             };
         });
-        let originalNoRecordText = this.localization.get('noRecords');
-        this.l10nSubscription = this.localization.changes.subscribe(() => {
+        let originalNoRecordText = this.ctx.localization.get('noRecords');
+        this.l10nSubscription = this.ctx.localization.changes.subscribe(() => {
             if (this.noRecordsText === originalNoRecordText) {
-                this.noRecordsText = this.localization.get('noRecords');
+                this.noRecordsText = this.ctx.localization.get('noRecords');
                 originalNoRecordText = this.noRecordsText;
             }
         });
@@ -16521,7 +16794,7 @@ class TableBodyComponent {
         }
     }
 }
-TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
@@ -16743,7 +17016,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -16971,7 +17244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DetailsService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: EditService }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: SelectionService }, { type: CellSelectionService }, { type: ColumnInfoService }, { type: NavigationService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: DetailsService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: EditService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: SelectionService }, { type: CellSelectionService }, { type: ColumnInfoService }, { type: NavigationService }]; }, propDecorators: { columns: [{
                 type: Input
             }], allColumns: [{
                 type: Input
@@ -17294,7 +17567,7 @@ const bufferSize = 1;
  * @hidden
  */
 class ListComponent {
-    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, localization, columnResizingService, changeDetector, pdfService, columnInfo) {
+    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo) {
         this.changeNotification = changeNotification;
         this.suspendService = suspendService;
         this.groupsService = groupsService;
@@ -17305,7 +17578,7 @@ class ListComponent {
         this.editService = editService;
         this.supportService = supportService;
         this.navigationService = navigationService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.columnResizingService = columnResizingService;
         this.changeDetector = changeDetector;
         this.pdfService = pdfService;
@@ -17381,7 +17654,7 @@ class ListComponent {
                 });
             }
         }));
-        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl));
+        this.subscriptions.add(this.ctx.localization.changes.subscribe(({ rtl }) => this.rtl = rtl));
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -17776,7 +18049,7 @@ class ListComponent {
         return element.offsetLeft;
     }
 }
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
 ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort", size: "size" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
         {
             provide: SCROLLER_FACTORY_TOKEN,
@@ -18014,7 +18287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: BrowserSupportService }, { type: NavigationService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }]; }, propDecorators: { hostClass: [{
+                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: BrowserSupportService }, { type: NavigationService }, { type: ScrollRequestService }, { type: ContextService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-container']
             }], hostRole: [{
@@ -18241,15 +18514,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class LoadingComponent {
-    constructor(localization) {
-        this.localization = localization;
+    constructor(ctx) {
+        this.ctx = ctx;
         this.hostClass = true;
     }
     get loadingText() {
-        return this.localization.get('loading');
+        return this.ctx.localization.get('loading');
     }
 }
-LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadingComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadingComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: { loadingTemplate: "loadingTemplate" }, host: { properties: { "class.k-loading-mask": "this.hostClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!loadingTemplate">
             <span class="k-loading-text">{{ loadingText }}</span>
@@ -18273,7 +18546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-loading-mask']
             }], loadingTemplate: [{
@@ -18286,7 +18559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -18445,6 +18718,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dragRowHandleLabel: [{
                 type: Input
+            }], columnMenuFilterTabTitle: [{
+                type: Input
+            }], columnMenuGeneralTabTitle: [{
+                type: Input
+            }], columnMenuColumnsTabTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -20590,6 +20869,15 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-dragRowHandleLabel="kendo.grid.dragRowHandleLabel|The label for the Grid drag row handle"
             dragRowHandleLabel="Drag row"
+
+            i18n-columnMenuFilterTabTitle="kendo.grid.columnMenuFilterTabTitle|The title for the column menu Filter tab"
+            columnMenuFilterTabTitle="Filter"
+
+            i18n-columnMenuGeneralTabTitle="kendo.grid.columnMenuGeneralTabTitle|The title for the column menu General tab"
+            columnMenuGeneralTabTitle="General"
+
+            i18n-columnMenuColumnsTabTitle="kendo.grid.columnMenuColumnsTabTitle|The title for the column menu Columns tab"
+            columnMenuColumnsTabTitle="Columns"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -20726,13 +21014,13 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [dropTargetFilter]="getDefaultSelectors('dropTarget')"
                 [dragHandle]="getDefaultSelectors('handle')"
                 [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
+                (onPress)="handleReorderEvents($event, 'press')"
+                (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                (onDrag)="handleReorderEvents($event, 'drag')"
+                (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                (onDrop)="handleReorderEvents($event, 'drop')"
                 [dragData]="gridData"
                 [data]="$any(view)"
                 [rowHeight]="rowHeight"
@@ -20910,7 +21198,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["dragReady", "press", "dragStart", "drag", "release", "dragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["dragEnter", "dragOver", "dragLeave", "drop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21190,6 +21478,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-dragRowHandleLabel="kendo.grid.dragRowHandleLabel|The label for the Grid drag row handle"
             dragRowHandleLabel="Drag row"
+
+            i18n-columnMenuFilterTabTitle="kendo.grid.columnMenuFilterTabTitle|The title for the column menu Filter tab"
+            columnMenuFilterTabTitle="Filter"
+
+            i18n-columnMenuGeneralTabTitle="kendo.grid.columnMenuGeneralTabTitle|The title for the column menu General tab"
+            columnMenuGeneralTabTitle="General"
+
+            i18n-columnMenuColumnsTabTitle="kendo.grid.columnMenuColumnsTabTitle|The title for the column menu Columns tab"
+            columnMenuColumnsTabTitle="Columns"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -21326,13 +21623,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [dropTargetFilter]="getDefaultSelectors('dropTarget')"
                 [dragHandle]="getDefaultSelectors('handle')"
                 [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
+                (onPress)="handleReorderEvents($event, 'press')"
+                (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                (onDrag)="handleReorderEvents($event, 'drag')"
+                (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                (onDrop)="handleReorderEvents($event, 'drop')"
                 [dragData]="gridData"
                 [data]="$any(view)"
                 [rowHeight]="rowHeight"
@@ -22187,12 +22484,12 @@ const stringOperators = localizeOperators({
  * @hidden
  */
 class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
-    constructor(filterService, column, localization, sizingOptionsService) {
+    constructor(filterService, column, ctx, sizingOptionsService) {
         super(filterService);
-        this.localization = localization;
+        this.ctx = ctx;
         this.showOperators = true;
         this.size = 'medium';
-        this.defaultOperators = stringOperators(this.localization);
+        this.defaultOperators = stringOperators(this.ctx.localization);
         this.column = column;
         this.subs = sizingOptionsService.changes.subscribe(size => this.size = size);
     }
@@ -22214,7 +22511,7 @@ class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
         }
     }
 }
-AutoCompleteFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, deps: [{ token: FilterService }, { token: ColumnComponent }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, deps: [{ token: FilterService }, { token: ColumnComponent }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteFilterCellComponent, selector: "kendo-grid-autocomplete-filter-cell", inputs: { showOperators: "showOperators", column: "column", filter: "filter", data: "data", valueField: "valueField" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -22250,7 +22547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: ColumnComponent }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ColumnComponent }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -22340,9 +22637,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class ContainsFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("contains", localization); }
+    constructor(ctx) { super("contains", ctx); }
 }
-ContainsFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContainsFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContainsFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContainsFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 ContainsFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22361,7 +22658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-contains-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `DoesNotContain` (**Does not contain**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22369,9 +22666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class DoesNotContainFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("doesnotcontain", localization); }
+    constructor(ctx) { super("doesnotcontain", ctx); }
 }
-DoesNotContainFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DoesNotContainFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DoesNotContainFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DoesNotContainFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 DoesNotContainFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DoesNotContainFilterOperatorComponent, selector: "kendo-filter-not-contains-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22390,7 +22687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-not-contains-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `EndsWith` (**Ends with**) string filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22398,9 +22695,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class EndsWithFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("endswith", localization); }
+    constructor(ctx) { super("endswith", ctx); }
 }
-EndsWithFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EndsWithFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EndsWithFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EndsWithFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 EndsWithFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22419,7 +22716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-endswith-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `Equal` (**Is equal to**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22427,9 +22724,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class EqualFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("eq", localization); }
+    constructor(ctx) { super("eq", ctx); }
 }
-EqualFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EqualFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+EqualFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EqualFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 EqualFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22448,7 +22745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-eq-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `IsEmpty` (**Is empty**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22456,9 +22753,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsEmptyFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("isempty", localization); }
+    constructor(ctx) { super("isempty", ctx); }
 }
-IsEmptyFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsEmptyFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+IsEmptyFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsEmptyFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 IsEmptyFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IsEmptyFilterOperatorComponent, selector: "kendo-filter-isempty-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22477,7 +22774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-isempty-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `IsNotEmpty` (**Is not empty**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22485,9 +22782,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNotEmptyFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("isnotempty", localization); }
+    constructor(ctx) { super("isnotempty", ctx); }
 }
-IsNotEmptyFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNotEmptyFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+IsNotEmptyFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNotEmptyFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 IsNotEmptyFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IsNotEmptyFilterOperatorComponent, selector: "kendo-filter-isnotempty-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22506,7 +22803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-isnotempty-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `IsNotNull` (**Is not null**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22514,9 +22811,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNotNullFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("isnotnull", localization); }
+    constructor(ctx) { super("isnotnull", ctx); }
 }
-IsNotNullFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNotNullFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+IsNotNullFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNotNullFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 IsNotNullFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22535,7 +22832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-isnotnull-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `IsNull` (**Is null**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22543,9 +22840,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNullFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("isnull", localization); }
+    constructor(ctx) { super("isnull", ctx); }
 }
-IsNullFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNullFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+IsNullFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IsNullFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 IsNullFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22564,7 +22861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-isnull-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `NotEqual` (**Is not equal to**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22572,9 +22869,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class NotEqualFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("neq", localization); }
+    constructor(ctx) { super("neq", ctx); }
 }
-NotEqualFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NotEqualFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+NotEqualFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NotEqualFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 NotEqualFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22593,7 +22890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-neq-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `StartsWith` (**Starts with**) filter operator. [See example](slug:filtering_grid#toc-using-the-built-in-directive).
@@ -22601,9 +22898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class StartsWithFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("startswith", localization); }
+    constructor(ctx) { super("startswith", ctx); }
 }
-StartsWithFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StartsWithFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StartsWithFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StartsWithFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 StartsWithFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22622,16 +22919,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-startswith-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `Greater` (**Is greater than**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class GreaterFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("gt", localization); }
+    constructor(ctx) { super("gt", ctx); }
 }
-GreaterFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GreaterFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+GreaterFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GreaterFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 GreaterFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22650,16 +22947,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-gt-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `GreaterOrEqualTo` (**Is greater than or equal to**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class GreaterOrEqualToFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("gte", localization); }
+    constructor(ctx) { super("gte", ctx); }
 }
-GreaterOrEqualToFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GreaterOrEqualToFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+GreaterOrEqualToFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GreaterOrEqualToFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 GreaterOrEqualToFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22678,7 +22975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-gte-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `Less` (**Is less than**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
@@ -22686,9 +22983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class LessFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("lt", localization); }
+    constructor(ctx) { super("lt", ctx); }
 }
-LessFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LessFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+LessFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LessFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 LessFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LessFilterOperatorComponent, selector: "kendo-filter-lt-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22707,7 +23004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-lt-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `LessOrEqualTo` (**Is less than or equal to**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
@@ -22715,9 +23012,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class LessOrEqualToFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("lte", localization); }
+    constructor(ctx) { super("lte", ctx); }
 }
-LessOrEqualToFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LessOrEqualToFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+LessOrEqualToFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LessOrEqualToFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 LessOrEqualToFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22736,14 +23033,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-lte-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `Greater` (**Is after**) [date filter](slug:filtering_grid#toc-date-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class AfterFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("after", localization); }
+    constructor(ctx) { super("after", ctx); }
     /**
      * @hidden
      */
@@ -22754,7 +23051,7 @@ class AfterFilterOperatorComponent extends FilterOperatorBase {
         };
     }
 }
-AfterFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AfterFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AfterFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AfterFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 AfterFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AfterFilterOperatorComponent, selector: "kendo-filter-after-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22773,14 +23070,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-after-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `GreaterOrEqualTo` (**Is after or equal to**) [date filter](slug:filtering_grid#toc-date-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class AfterEqFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("after-eq", localization); }
+    constructor(ctx) { super("after-eq", ctx); }
     /**
      * @hidden
      */
@@ -22791,7 +23088,7 @@ class AfterEqFilterOperatorComponent extends FilterOperatorBase {
         };
     }
 }
-AfterEqFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AfterEqFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AfterEqFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AfterEqFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 AfterEqFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AfterEqFilterOperatorComponent, selector: "kendo-filter-after-eq-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22810,14 +23107,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-after-eq-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `LessOrEqualTo` (**Is before or equal to**) [date filter](slug:filtering_grid#toc-date-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class BeforeEqFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("before-eq", localization); }
+    constructor(ctx) { super("before-eq", ctx); }
     /**
      * @hidden
      */
@@ -22828,7 +23125,7 @@ class BeforeEqFilterOperatorComponent extends FilterOperatorBase {
         };
     }
 }
-BeforeEqFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BeforeEqFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BeforeEqFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BeforeEqFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 BeforeEqFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BeforeEqFilterOperatorComponent, selector: "kendo-filter-before-eq-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22847,14 +23144,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-before-eq-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 /**
  * Represents the `Less than` (**Is before**) [date filter](slug:filtering_grid#toc-date-filter) operator.
  * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class BeforeFilterOperatorComponent extends FilterOperatorBase {
-    constructor(localization) { super("before", localization); }
+    constructor(ctx) { super("before", ctx); }
     /**
      * @hidden
      */
@@ -22865,7 +23162,7 @@ class BeforeFilterOperatorComponent extends FilterOperatorBase {
         };
     }
 }
-BeforeFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BeforeFilterOperatorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BeforeFilterOperatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BeforeFilterOperatorComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 BeforeFilterOperatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BeforeFilterOperatorComponent, selector: "kendo-filter-before-operator", providers: [
         {
             provide: FilterOperatorBase,
@@ -22884,7 +23181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-before-operator',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 const FILTER_OPERATORS = [
     FilterCellOperatorsComponent,
@@ -23291,7 +23588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 /**
- * Represents the component for toggling the visibility of the Grid columns. [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.
  *
@@ -23306,8 +23603,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ColumnChooserComponent {
-    constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
-        this.localization = localization;
+    constructor(ctx, columnInfoService, popupService, ngZone, renderer, changeDetector) {
+        this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.popupService = popupService;
         this.ngZone = ngZone;
@@ -23341,7 +23638,7 @@ class ColumnChooserComponent {
      */
     toggle(anchor, template) {
         if (!this.popupRef) {
-            const direction = this.localization.rtl ? 'right' : 'left';
+            const direction = this.ctx.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
                 anchor: anchor.element,
                 content: template,
@@ -23349,7 +23646,7 @@ class ColumnChooserComponent {
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
             });
-            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
             if (!isDocumentAvailable()) {
                 return;
             }
@@ -23394,22 +23691,22 @@ class ColumnChooserComponent {
         }
     }
 }
-ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i1$2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i1$2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
             (click)="toggle(anchor, template)"
             fillMode="flat"
-            [attr.title]="localization.get('columns')"
+            [attr.title]="ctx.localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"></button>
         <ng-template #template>
-            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
                 [columns]="columns"
-                [applyText]="localization.get('columnsApply')"
-                [resetText]="localization.get('columnsReset')"
+                [applyText]="ctx.localization.get('columnsApply')"
+                [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
@@ -23427,15 +23724,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             (click)="toggle(anchor, template)"
             fillMode="flat"
-            [attr.title]="localization.get('columns')"
+            [attr.title]="ctx.localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"></button>
         <ng-template #template>
-            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
+            <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
                 [columns]="columns"
-                [applyText]="localization.get('columnsApply')"
-                [resetText]="localization.get('columnsReset')"
+                [applyText]="ctx.localization.get('columnsApply')"
+                [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
@@ -23444,7 +23741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i1$2.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }, { type: i1$2.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
                 type: Input
             }], allowHideAll: [{
                 type: Input
@@ -23508,7 +23805,7 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuStickComponent,
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
-        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule], exports: [ColumnListComponent,
+        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -23524,12 +23821,12 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
         ColumnMenuAutoSizeAllColumnsComponent] });
-ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule, ButtonModule]] });
+ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule, ButtonModule, TabStripModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],
-                    imports: [CommonModule, FilterMenuModule, ButtonModule],
+                    imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule],
                     exports: [COMPONENTS]
                 }]
         }] });
@@ -23664,8 +23961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  */
 class EditCommandDirective extends Button {
-    constructor(editService, cellContext, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(editService, cellContext, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.editService = editService;
         this.cellContext = cellContext;
         /**
@@ -23693,7 +23990,7 @@ class EditCommandDirective extends Button {
         }
     }
 }
-EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EditCommandDirective, selector: "[kendoGridEditCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-edit-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -23705,7 +24002,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -23726,7 +24023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
             }], commandClass: [{
@@ -23759,8 +24056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class CancelCommandDirective extends Button {
-    constructor(editService, cellContext, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(editService, cellContext, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.editService = editService;
         this.cellContext = cellContext;
         /**
@@ -23790,7 +24087,7 @@ class CancelCommandDirective extends Button {
         }
     }
 }
-CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CancelCommandDirective, selector: "[kendoGridCancelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-cancel-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -23802,7 +24099,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -23823,7 +24120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
             }], commandClass: [{
@@ -23856,8 +24153,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class SaveCommandDirective extends Button {
-    constructor(editService, cellContext, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(editService, cellContext, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.editService = editService;
         this.cellContext = cellContext;
         /**
@@ -23887,7 +24184,7 @@ class SaveCommandDirective extends Button {
         }
     }
 }
-SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SaveCommandDirective, selector: "[kendoGridSaveCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-save-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -23899,7 +24196,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -23920,7 +24217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
             }], commandClass: [{
@@ -23952,8 +24249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class RemoveCommandDirective extends Button {
-    constructor(editService, cellContext, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(editService, cellContext, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.editService = editService;
         this.cellContext = cellContext;
         /**
@@ -23981,7 +24278,7 @@ class RemoveCommandDirective extends Button {
         }
     }
 }
-RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-remove-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -23993,7 +24290,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24014,7 +24311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: EditService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
             }], commandClass: [{
@@ -24042,8 +24339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class AddCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(editService, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.editService = editService;
     }
     /**
@@ -24060,7 +24357,7 @@ class AddCommandDirective extends Button {
         return true;
     }
 }
-AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AddCommandDirective, selector: "[kendoGridAddCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-add-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -24072,7 +24369,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24090,7 +24387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], commandClass: [{
@@ -25577,8 +25874,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class PDFCommandDirective extends Button {
-    constructor(pdfService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(pdfService, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.pdfService = pdfService;
         this.ngZone = ngZone;
     }
@@ -25596,7 +25893,7 @@ class PDFCommandDirective extends Button {
         return true;
     }
 }
-PDFCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFCommandDirective, deps: [{ token: PDFService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PDFCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFCommandDirective, deps: [{ token: PDFService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PDFCommandDirective, selector: "[kendoGridPDFCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-pdf": "this.pdfClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -25608,7 +25905,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -25626,7 +25923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: PDFService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
+        }], ctorParameters: function () { return [{ type: PDFService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], pdfClass: [{
@@ -25743,8 +26040,8 @@ const componentColumns = (component) => {
  * Configures the settings for the export of Grid in Excel ([see example]({% slug excelexport_grid %})).
  */
 class ExcelComponent {
-    constructor(excelService, localization, zone) {
-        this.localization = localization;
+    constructor(excelService, ctx, zone) {
+        this.ctx = ctx;
         this.zone = zone;
         /**
          * Specifies the file name of the exported Excel file.
@@ -25789,7 +26086,7 @@ class ExcelComponent {
             date: this.date,
             paddingCellOptions: this.paddingCellOptions,
             headerPaddingCellOptions: this.headerPaddingCellOptions,
-            rtl: this.localization.rtl,
+            rtl: this.ctx.localization.rtl,
             collapsible: this.collapsible
         });
         const args = new ExcelExportEvent(options);
@@ -25807,7 +26104,7 @@ class ExcelComponent {
         });
     }
 }
-ExcelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelComponent, deps: [{ token: ExcelService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ExcelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelComponent, deps: [{ token: ExcelService }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ExcelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExcelComponent, selector: "kendo-grid-excel", inputs: { fileName: "fileName", filterable: "filterable", creator: "creator", date: "date", forceProxy: "forceProxy", proxyURL: "proxyURL", fetchData: "fetchData", paddingCellOptions: "paddingCellOptions", headerPaddingCellOptions: "headerPaddingCellOptions", collapsible: "collapsible" }, queries: [{ propertyName: "columns", predicate: ColumnBase$1, descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelComponent, decorators: [{
             type: Component,
@@ -25815,7 +26112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-grid-excel',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { fileName: [{
+        }], ctorParameters: function () { return [{ type: ExcelService }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { fileName: [{
                 type: Input
             }], filterable: [{
                 type: Input
@@ -25860,8 +26157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class ExcelCommandDirective extends Button {
-    constructor(excelService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
+    constructor(excelService, element, renderer, ctx, ngZone) {
+        super(element, renderer, null, ctx.localization, ngZone);
         this.excelService = excelService;
         this.ngZone = ngZone;
     }
@@ -25879,7 +26176,7 @@ class ExcelCommandDirective extends Button {
         return true;
     }
 }
-ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExcelCommandDirective, selector: "[kendoGridExcelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-excel": "this.excelClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -25891,7 +26188,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -25909,7 +26206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
+        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], excelClass: [{