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

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

@@ -18,7 +18,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progress/kendo-data-query';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-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 i1$3 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
@@ -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';
@@ -1243,6 +1245,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+/**
+ * @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() {
+        var _a;
+        (_a = this.navigableElements[this.currentActiveIndex]) === null || _a === void 0 ? void 0 : _a.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 isButton = matchesNodeName('button');
 const isInputTag = matchesNodeName('input');
 const navigableRegex = /(button|checkbox|color|file|radio|reset|submit)/i;
@@ -1479,7 +1552,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;
@@ -1489,7 +1562,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;
@@ -1777,10 +1850,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;
@@ -1989,12 +2062,12 @@ 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: [{
+        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
                     }] }];
     } });
@@ -2833,8 +2906,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/'
 };
 
@@ -4468,76 +4541,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() {
-        var _a;
-        (_a = this.navigableElements[this.currentActiveIndex]) === null || _a === void 0 ? void 0 : _a.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
  */
@@ -5018,6 +5021,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 });
@@ -5539,11 +5543,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.
@@ -5560,7 +5564,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 },
@@ -5569,7 +5573,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 = (_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.popupElement;
@@ -5628,11 +5632,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 */
 /**
@@ -6710,13 +6714,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`
@@ -6752,7 +6760,7 @@ class PagerElementComponent {
      * @memberOf PagerElementComponent
      */
     textFor(key) {
-        return this.localization.get(key);
+        return this.ctx.localization.get(key);
     }
     /**
      * @hidden
@@ -6772,20 +6780,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
             }] } });
 
@@ -6793,11 +6813,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
@@ -6816,7 +6834,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"
@@ -6826,8 +6844,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"
@@ -6840,8 +6858,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"
@@ -6864,8 +6882,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"
@@ -6878,8 +6896,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"
@@ -6889,14 +6907,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;
     }
@@ -6967,7 +6985,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"
@@ -7120,7 +7138,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: [{
@@ -7151,8 +7169,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;
@@ -7210,7 +7228,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')}}
@@ -7266,7 +7284,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 }]
             }] } });
@@ -7275,11 +7293,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
@@ -7298,15 +7314,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"
@@ -7320,8 +7336,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"
@@ -7342,8 +7358,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"
@@ -7357,8 +7373,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"
@@ -7369,15 +7385,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;
     }
     /**
@@ -7419,7 +7435,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,
@@ -7428,7 +7444,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"]
             }, {
@@ -7468,8 +7484,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 = [];
@@ -7542,7 +7558,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"
@@ -7558,7 +7574,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -7581,7 +7597,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,
@@ -7595,13 +7611,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;
@@ -7660,7 +7676,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() {
@@ -7809,7 +7825,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
@@ -7917,7 +7933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
   `
                 }]
         }], ctorParameters: function () {
-        return [{ type: PagerContextService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
+        return [{ type: PagerContextService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ContextService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -8174,11 +8190,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 = [];
@@ -8193,14 +8209,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));
@@ -8218,7 +8234,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');
@@ -8272,7 +8288,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));
@@ -8287,7 +8303,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"
@@ -8388,7 +8404,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,
@@ -8564,12 +8580,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.
@@ -8599,13 +8615,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,
@@ -8617,7 +8633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: ['filterOperator']
-                    }] }, { type: i1.LocalizationService }];
+                    }] }, { type: ContextService }];
     }, propDecorators: { text: [{
                 type: Input
             }] } });
@@ -8903,9 +8919,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}
@@ -8930,7 +8946,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) {
@@ -8939,18 +8955,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
@@ -9189,9 +9205,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
@@ -9200,7 +9216,10 @@ class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
         return false;
     }
     ngAfterViewInit() {
-        if (this.isFirstDropDown && this.filterService && this.filterService.menuTabbingService) {
+        var _a;
+        const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService && this.filterService.menuTabbingService;
+        const isTabbedInterface = (_a = this.menuTabbingService) === null || _a === void 0 ? void 0 : _a.isTabbedInterface;
+        if (shouldFocusFirstFocusable && !isTabbedInterface) {
             this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
             this.firstOperatorDropDown.focus();
         }
@@ -9246,12 +9265,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
@@ -9285,7 +9304,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
@@ -9302,17 +9321,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"
@@ -9356,7 +9375,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
@@ -9391,9 +9410,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}
@@ -9421,16 +9440,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"
@@ -9498,7 +9517,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: [{
@@ -9528,9 +9547,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}
@@ -9549,7 +9568,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.
@@ -9586,7 +9605,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) {
@@ -9595,18 +9614,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
@@ -9630,8 +9649,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.
@@ -9645,18 +9664,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"
@@ -9726,7 +9745,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
@@ -9775,9 +9794,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}
@@ -9811,16 +9830,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"
@@ -9920,7 +9939,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: [{
@@ -9952,9 +9971,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}
@@ -9983,7 +10002,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.
@@ -10023,7 +10042,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) {
@@ -10032,13 +10051,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,
@@ -10046,7 +10065,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
@@ -10076,9 +10095,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() {
@@ -10092,15 +10111,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"
@@ -10178,7 +10197,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
@@ -10231,9 +10250,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}
@@ -10261,16 +10280,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"
@@ -10380,7 +10399,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: [{
@@ -10400,9 +10419,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
          */
@@ -10411,13 +10430,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
@@ -10442,7 +10461,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) {
@@ -10452,13 +10471,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,
@@ -10466,7 +10485,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: [{
@@ -10515,8 +10534,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}
@@ -10531,8 +10550,11 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
         return false;
     }
     ngAfterViewInit() {
+        var _a;
         this.filterService.menuTabbingService.firstFocusable = this.radioButtons.first.radioButtonEl;
-        this.radioButtons.first.radioButtonEl.focus();
+        if (!((_a = this.menuTabbingService) === null || _a === void 0 ? void 0 : _a.isTabbedInterface)) {
+            this.radioButtons.first.radioButtonEl.focus();
+        }
     }
     /**
      * @hidden
@@ -10570,12 +10592,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">
@@ -10617,7 +10639,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: [{
@@ -10706,16 +10728,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;
     }
@@ -10740,7 +10762,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)) {
@@ -10803,13 +10825,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
@@ -10837,16 +10859,16 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10883,16 +10905,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10901,7 +10923,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 }];
+                    }] }, { type: FilterService }, { type: ContextService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }];
     }, propDecorators: { close: [{
                 type: Output
             }], column: [{
@@ -10928,10 +10950,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';
@@ -10943,7 +10965,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);
     }
@@ -10969,7 +10991,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"
@@ -10993,7 +11015,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: [{
@@ -11023,7 +11045,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
@@ -11233,7 +11255,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' })),
@@ -11344,16 +11366,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';
@@ -11393,7 +11415,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"
@@ -11417,7 +11439,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.
@@ -11439,16 +11461,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';
@@ -11488,7 +11510,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"
@@ -11512,14 +11534,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
@@ -11532,9 +11554,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.
@@ -11607,10 +11629,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"
@@ -11637,7 +11659,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"
@@ -11659,7 +11681,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
@@ -11686,7 +11708,7 @@ class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -11825,8 +11847,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -11840,8 +11862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]
@@ -11894,9 +11916,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;
@@ -11920,7 +11942,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {
@@ -11954,10 +11976,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"
@@ -11965,8 +11987,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"
@@ -11985,7 +12007,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"
@@ -11993,8 +12015,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"
@@ -12008,7 +12030,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
@@ -12036,9 +12058,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.
@@ -12060,7 +12082,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**
@@ -12081,10 +12103,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"
@@ -12110,7 +12132,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"
@@ -12131,7 +12153,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
@@ -12277,6 +12299,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">
@@ -12288,9 +12313,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;
@@ -12327,17 +12352,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')"
@@ -12350,14 +12375,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')"
@@ -12365,7 +12390,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.
@@ -12387,9 +12412,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;
     }
@@ -12406,12 +12430,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()"
@@ -12425,14 +12449,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
             }] } });
 
@@ -12455,11 +12479,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;
@@ -12474,13 +12497,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"] }] });
@@ -12491,14 +12514,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';
 /**
@@ -12513,12 +12536,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
          */
@@ -12535,6 +12560,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
          */
@@ -12550,6 +12591,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
      */
@@ -12575,6 +12627,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
      */
@@ -12605,6 +12667,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) {
@@ -12616,6 +12684,7 @@ class ColumnMenuComponent {
                 console.warn(ColunnMenuErrorMessages.autoSizeColumn);
             }
         }
+        this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
     }
     ngOnChanges() {
         this.service.column = this.column;
@@ -12631,6 +12700,7 @@ class ColumnMenuComponent {
      * @hidden
      */
     toggle(e, anchor, template) {
+        var _a;
         if (e) {
             e.preventDefault();
             e.stopImmediatePropagation();
@@ -12639,6 +12709,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();
+            (_a = this.tabStrip) === null || _a === void 0 ? void 0 : _a.selectTab(0);
+        }
         if (!this.popupRef) {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
@@ -12665,7 +12740,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);
     }
@@ -12673,11 +12748,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 }"
@@ -12692,7 +12767,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>
@@ -12749,7 +12824,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: [{
@@ -12773,7 +12936,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>
@@ -12830,9 +12993,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']
             }, {
@@ -12857,6 +13108,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]
             }] } });
 
 /**
@@ -12877,8 +13137,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;
@@ -12947,7 +13207,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() {
@@ -12956,7 +13216,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
@@ -13018,7 +13278,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: [{
@@ -13115,8 +13375,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.
@@ -13141,12 +13401,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"
@@ -13186,7 +13446,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
@@ -13209,13 +13469,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;
@@ -13235,18 +13495,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"
@@ -13314,7 +13574,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
@@ -13338,8 +13598,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
@@ -13358,12 +13618,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"
@@ -13411,7 +13671,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.
@@ -13430,9 +13690,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).
@@ -13461,18 +13721,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"
@@ -13542,7 +13802,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
             }] } });
 
@@ -13839,8 +14099,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 = [];
@@ -13851,12 +14111,12 @@ class FilterRowComponent {
         return Object.assign(Object.assign({}, 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"
@@ -13916,7 +14176,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
@@ -14226,13 +14486,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();
@@ -14287,7 +14547,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) {
@@ -14363,7 +14623,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,
@@ -14373,7 +14633,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 }];
+                    }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnInfoService }];
     }, propDecorators: { columns: [{
                 type: Input
             }], column: [{
@@ -14417,14 +14677,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;
@@ -14450,7 +14709,7 @@ class HeaderComponent {
         return !this.scrollable;
     }
     get sortableLabel() {
-        return this.localization.get('sortable');
+        return this.contextService.localization.get('sortable');
     }
     get columnMenuSettings() {
         return this.columnMenu;
@@ -14516,7 +14775,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);
@@ -14574,7 +14833,7 @@ class HeaderComponent {
         else if (state.dir === 'desc') {
             msg = 'sortedDescending';
         }
-        return this.localization.get(msg);
+        return this.contextService.localization.get(msg);
     }
     /**
      *
@@ -14620,7 +14879,7 @@ class HeaderComponent {
         }
     }
     ngOnInit() {
-        this.subscription.add(this.localization.changes
+        this.subscription.add(this.contextService.localization.changes
             .subscribe(() => this.cd.markForCheck()));
     }
     ngOnDestroy() {
@@ -14636,7 +14895,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 &&
@@ -14774,7 +15033,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;
             }
         }
@@ -14785,7 +15044,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));
@@ -14803,7 +15062,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"
@@ -15029,7 +15288,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: [{
@@ -15261,7 +15520,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
@@ -15680,10 +15939,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;
@@ -15699,7 +15958,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;
@@ -15749,7 +16008,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;
@@ -15805,7 +16064,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">
@@ -15882,7 +16141,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: [{
@@ -15966,7 +16225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: EditService }, { type: IdService }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
+        return [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -16006,19 +16265,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 = {
@@ -16067,10 +16327,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"
@@ -16095,8 +16371,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)}}
@@ -16140,7 +16416,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: [{
@@ -16169,8 +16445,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)}}
@@ -16216,7 +16492,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
@@ -16259,12 +16535,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;
@@ -16276,7 +16552,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;
@@ -16319,7 +16595,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';
@@ -16428,10 +16704,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;
             }
         });
@@ -16589,7 +16865,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"
@@ -16811,7 +17087,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: [{
@@ -17039,7 +17315,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
@@ -17362,7 +17638,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;
@@ -17373,7 +17649,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;
@@ -17449,7 +17725,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()) {
@@ -17844,7 +18120,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,
@@ -18083,7 +18359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         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 }];
+                    }] }, { 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']
@@ -18311,15 +18587,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>
@@ -18343,7 +18619,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: [{
@@ -18356,7 +18632,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: [{
@@ -18515,6 +18791,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
             }] } });
 
 /**
@@ -20663,6 +20945,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
@@ -20799,13 +21090,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"
@@ -20983,7 +21274,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: [{
@@ -21263,6 +21554,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
@@ -21399,13 +21699,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"
@@ -22260,12 +22560,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);
     }
@@ -22287,7 +22587,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"
@@ -22323,7 +22623,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
@@ -22413,9 +22713,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,
@@ -22434,7 +22734,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).
@@ -22442,9 +22742,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,
@@ -22463,7 +22763,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).
@@ -22471,9 +22771,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,
@@ -22492,7 +22792,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).
@@ -22500,9 +22800,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,
@@ -22521,7 +22821,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).
@@ -22529,9 +22829,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,
@@ -22550,7 +22850,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).
@@ -22558,9 +22858,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,
@@ -22579,7 +22879,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).
@@ -22587,9 +22887,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,
@@ -22608,7 +22908,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).
@@ -22616,9 +22916,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,
@@ -22637,7 +22937,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).
@@ -22645,9 +22945,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,
@@ -22666,7 +22966,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).
@@ -22674,9 +22974,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,
@@ -22695,16 +22995,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,
@@ -22723,16 +23023,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,
@@ -22751,7 +23051,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.
@@ -22759,9 +23059,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,
@@ -22780,7 +23080,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.
@@ -22788,9 +23088,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,
@@ -22809,14 +23109,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
      */
@@ -22827,7 +23127,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,
@@ -22846,14 +23146,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
      */
@@ -22864,7 +23164,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,
@@ -22883,14 +23183,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
      */
@@ -22901,7 +23201,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,
@@ -22920,14 +23220,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
      */
@@ -22938,7 +23238,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,
@@ -22957,7 +23257,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,
@@ -23364,7 +23664,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.
  *
@@ -23379,8 +23679,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;
@@ -23414,7 +23714,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,
@@ -23422,7 +23722,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;
             }
@@ -23467,22 +23767,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)"
@@ -23500,15 +23800,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)"
@@ -23517,7 +23817,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
@@ -23581,7 +23881,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,
@@ -23597,12 +23897,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]
                 }]
         }] });
@@ -23739,8 +24039,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;
         /**
@@ -23768,7 +24068,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"
@@ -23780,7 +24080,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: [{
@@ -23802,7 +24102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: EditService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [CELL_CONTEXT]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }];
     }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -23836,8 +24136,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;
         /**
@@ -23867,7 +24167,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"
@@ -23879,7 +24179,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: [{
@@ -23901,7 +24201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: EditService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [CELL_CONTEXT]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }];
     }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -23935,8 +24235,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;
         /**
@@ -23966,7 +24266,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"
@@ -23978,7 +24278,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: [{
@@ -24000,7 +24300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: EditService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [CELL_CONTEXT]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }];
     }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -24033,8 +24333,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;
         /**
@@ -24062,7 +24362,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"
@@ -24074,7 +24374,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: [{
@@ -24096,7 +24396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: EditService }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [CELL_CONTEXT]
-                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }];
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ContextService }, { type: i0.NgZone }];
     }, propDecorators: { visible: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -24125,8 +24425,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;
     }
     /**
@@ -24143,7 +24443,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"
@@ -24155,7 +24455,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: [{
@@ -24173,7 +24473,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: [{
@@ -25666,8 +25966,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;
     }
@@ -25685,7 +25985,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"
@@ -25697,7 +25997,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: [{
@@ -25715,7 +26015,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: [{
@@ -25832,8 +26132,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.
@@ -25878,7 +26178,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);
@@ -25896,7 +26196,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,
@@ -25904,7 +26204,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
@@ -25949,8 +26249,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;
     }
@@ -25968,7 +26268,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"
@@ -25980,7 +26280,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: [{
@@ -25998,7 +26298,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: [{