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

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

@@ -5,18 +5,18 @@
 import { Component, Input, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ColumnInfoService } from '../common/column-info.service';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { closest } from '../rendering/common/dom-queries';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { columnsIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
+import * as i1 from "../common/provider.service";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "./column-list.component";
 /**
- * Represents the component for toggling the visibility of the Grid columns. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling 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.
  *
@@ -31,8 +31,8 @@ import * as i5 from "./column-list.component";
  * ```
  */
 export 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;
@@ -66,7 +66,7 @@ export 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,
@@ -74,7 +74,7 @@ export 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;
             }
@@ -119,22 +119,22 @@ export class ColumnChooserComponent {
         }
     }
 }
-ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i3.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: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i3.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)"
@@ -152,15 +152,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)"
@@ -169,7 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
                 type: Input
             }], allowHideAll: [{
                 type: Input

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

@@ -3,24 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, isDevMode } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
-import { displayInlineBlockIcon } from '@progress/kendo-svg-icons';
+import { displayInlineFlexIcon } from '@progress/kendo-svg-icons';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../common/provider.service";
-import * as i3 from "./column-menu-item.component";
-import * as i4 from "@angular/common";
+import * as i1 from "../common/provider.service";
+import * as i2 from "./column-menu-item.component";
+import * as i3 from "@angular/common";
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- *
  * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
  *
  * @example
  * ```html
@@ -33,11 +32,10 @@ import * as i4 from "@angular/common";
  * ```
  */
 export 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;
@@ -52,16 +50,16 @@ export 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: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeAllColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.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: i3.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"] }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
@@ -69,11 +67,11 @@ 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: i2.ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; } });

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

@@ -3,17 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, isDevMode } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { maxWidthIcon } from '@progress/kendo-svg-icons';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../common/provider.service";
-import * as i3 from "./column-menu-item.component";
-import * as i4 from "@angular/common";
+import * as i1 from "../common/provider.service";
+import * as i2 from "./column-menu-item.component";
+import * as i3 from "@angular/common";
 /**
  * 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.
  * [See example](slug:slug:columnmenu_grid#toc-autosize-column-item).
@@ -34,9 +32,8 @@ import * as i4 from "@angular/common";
  * ```
  */
 export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
-    constructor(localization, ctx) {
+    constructor(ctx) {
         super();
-        this.localization = localization;
         this.ctx = ctx;
         this.maxWidthIcon = maxWidthIcon;
     }
@@ -53,17 +50,17 @@ export 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: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.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()"
         ></kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.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"] }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
@@ -72,13 +69,13 @@ 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: i2.ContextService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });

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

@@ -4,21 +4,22 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { columnsIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
+import * as i1 from "../common/provider.service";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 import * as i4 from "./column-list.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- *
  * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
  *
  * @example
  * ```html
@@ -30,9 +31,9 @@ import * as i5 from "./column-menu-item-content-template.directive";
  * ```
  */
 export 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;
@@ -90,10 +91,10 @@ export 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: i2.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: i1.ContextService }, { token: i2.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"
@@ -101,8 +102,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"
@@ -121,7 +122,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"
@@ -129,8 +130,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"
@@ -144,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output

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

@@ -3,20 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { filterIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
+import * as i1 from "../common/provider.service";
 import * as i2 from "./column-menu-item.component";
 import * as i3 from "../filtering/menu/filter-menu-container.component";
 import * as i4 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- *
  * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component.
  *
  * @example
  * ```html
@@ -29,9 +30,9 @@ import * as i4 from "./column-menu-item-content-template.directive";
  * ```
  */
 export 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.
@@ -74,10 +75,10 @@ export 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: i1.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"
@@ -103,7 +104,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"
@@ -124,7 +125,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: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output

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

@@ -3,20 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ChangeDetectorRef } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { lockIcon, unlockIcon } from '@progress/kendo-svg-icons';
 import { ColumnInfoService } from '../common/column-info.service';
+import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
+import * as i1 from "../common/provider.service";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- *
  * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component.
  *
  * @example
  * ```html
@@ -29,16 +30,16 @@ import * as i3 from "./column-menu-item.component";
  * ```
  */
 export 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';
@@ -78,7 +79,7 @@ export 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: i2.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: i1.ContextService }, { token: i2.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"
@@ -102,4 +103,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
        </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });

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

@@ -3,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { setColumnPositionIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
+import * as i1 from "../common/provider.service";
 import * as i2 from "./column-menu-item.component";
 import * as i3 from "./column-menu-lock.component";
 import * as i4 from "./column-menu-stick.component";
@@ -15,10 +15,11 @@ import * as i5 from "./column-menu-item-content-template.directive";
 import * as i6 from "@angular/common";
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- *
+ * [See example](slug:columnmenu_grid#toc-set-column-position-item).
  * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * 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).
+ *
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component.
  *
  * @example
  * ```html
@@ -31,9 +32,9 @@ import * as i6 from "@angular/common";
  * ```
  */
 export 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.
@@ -106,10 +107,10 @@ export 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: i1.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"
@@ -136,7 +137,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"
@@ -158,7 +159,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: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output