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

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

@@ -3,22 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2 } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SortService } from '../common/sort.service';
 import { normalize } from '../columns/sort-settings';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { sortAscSmallIcon, sortDescSmallIcon } 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/sort.service";
 import * as i3 from "./column-menu-item.component";
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
+ * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component.
  *
  * @example
  * ```html
@@ -31,9 +32,9 @@ import * as i3 from "./column-menu-item.component";
  * ```
  */
 export 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;
@@ -70,17 +71,17 @@ export 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: i2.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: i1.ContextService }, { token: i2.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')"
@@ -93,14 +94,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')"
@@ -108,4 +109,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-grid-columnmenu-item>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.SortService }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.SortService }, { type: i0.Renderer2 }]; } });

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

@@ -3,12 +3,12 @@
 * 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 { stickIcon, unstickIcon } 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";
 /**
@@ -31,16 +31,16 @@ import * as i3 from "./column-menu-item.component";
  * ```
  */
 export 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';
@@ -80,7 +80,7 @@ export 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: i2.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: i1.ContextService }, { token: i2.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"
@@ -104,4 +104,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.component.mjs

@@ -4,8 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
 import { NavigationService } from './../navigation/navigation.service';
-import { Component, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode } from '@angular/core';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef } from '@angular/core';
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
@@ -13,13 +12,15 @@ import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeCol
 import { replaceMessagePlaceholder } from '../utils';
 import { ContextService } from '../common/provider.service';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
-import { moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, columnsIcon, moreHorizontalIcon, filterIcon } from '@progress/kendo-svg-icons';
+import { TabStripComponent } from '@progress/kendo-angular-layout';
+import { ColumnInfoService } from '../common/column-info.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../navigation/navigation.service";
 import * as i2 from "../common/single-popup.service";
-import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "./column-menu.service";
-import * as i5 from "../common/provider.service";
+import * as i3 from "./column-menu.service";
+import * as i4 from "../common/provider.service";
+import * as i5 from "../common/column-info.service";
 import * as i6 from "@progress/kendo-angular-icons";
 import * as i7 from "./column-menu-container.component";
 import * as i8 from "./column-menu-sort.component";
@@ -30,8 +31,11 @@ import * as i12 from "./column-menu-chooser.component";
 import * as i13 from "./column-menu-autosize.component";
 import * as i14 from "./column-menu-autosize-all.component";
 import * as i15 from "./column-menu-filter.component";
-import * as i16 from "@angular/common";
-import * as i17 from "./column-menu-item.directive";
+import * as i16 from "@progress/kendo-angular-layout";
+import * as i17 from "../filtering/menu/filter-menu-container.component";
+import * as i18 from "./column-list.component";
+import * as i19 from "@angular/common";
+import * as i20 from "./column-menu-item.directive";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
  * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
@@ -45,12 +49,14 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
  * </kendo-grid>
  */
 export 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
          */
@@ -67,6 +73,22 @@ export class ColumnMenuComponent {
          * @hidden
          */
         this.tabIndex = '-1';
+        /**
+         * @hidden
+         */
+        this.columnsIcon = columnsIcon;
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-actions';
+        /**
+         * @hidden
+         */
+        this.moreHorizontalIcon = moreHorizontalIcon;
+        /**
+         * @hidden
+         */
+        this.filterIcon = filterIcon;
         /**
          * @hidden
          */
@@ -82,6 +104,17 @@ export 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
      */
@@ -107,6 +140,16 @@ export class ColumnMenuComponent {
     get hasColumnChooser() {
         return hasColumnChooser(this.settings);
     }
+    /**
+     * @hidden
+     */
+    onApply(changed) {
+        this.close();
+        if (changed.length) {
+            this.cdr.markForCheck();
+            this.columnInfoService.changeVisibility(changed);
+        }
+    }
     /**
      * @hidden
      */
@@ -137,6 +180,12 @@ export 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) {
@@ -148,6 +197,7 @@ export class ColumnMenuComponent {
                 console.warn(ColunnMenuErrorMessages.autoSizeColumn);
             }
         }
+        this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
     }
     ngOnChanges() {
         this.service.column = this.column;
@@ -171,6 +221,11 @@ export class ColumnMenuComponent {
         this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
         this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        if (this.popupRef && this.settings.view === 'tabbed') {
+            this.renderer.addClass(this.popupRef.popupElement.firstChild, 'k-column-menu-tabbed');
+            this.cdr.detectChanges();
+            this.tabStrip?.selectTab(0);
+        }
         if (!this.popupRef) {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
@@ -197,7 +252,7 @@ export 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);
     }
@@ -205,11 +260,11 @@ export 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: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.LocalizationService }, { token: i4.ColumnMenuService }, { token: i5.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.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 }"
@@ -224,7 +279,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>
@@ -281,7 +336,95 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i8.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i9.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i10.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i11.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i14.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i15.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.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: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i8.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i9.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i10.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i11.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i14.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i15.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: i17.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: i18.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i19.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.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: [{
@@ -305,7 +448,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>
@@ -362,9 +505,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: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.LocalizationService }, { type: i4.ColumnMenuService }, { type: i5.ContextService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -389,4 +620,13 @@ 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]
             }] } });

package/esm2020/column-menu/column-menu.module.mjs

@@ -22,6 +22,7 @@ import { ColumnMenuPositionComponent } from './column-menu-position.component';
 import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.component';
 import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { TabStripModule } from '@progress/kendo-angular-layout';
 import * as i0 from "@angular/core";
 const COMPONENTS = [
     ColumnListComponent,
@@ -81,7 +82,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,
@@ -97,12 +98,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]
                 }]
         }] });

package/esm2020/column-resizing/column-handle.directive.mjs

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Directive, ElementRef, Host, HostBinding, HostListener, Input, NgZone } from '@angular/core';
 import { Subscription, of } from 'rxjs';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { isBlank, isPresent, isTruthy } from '../utils';
 import { ColumnBase } from '../columns/column-base';
 import { expandColumns, leafColumns, columnsToRender } from '../columns/column-common';
@@ -12,10 +11,11 @@ import { DraggableDirective } from '@progress/kendo-angular-common';
 import { ColumnResizingService } from './column-resizing.service';
 import { delay, takeUntil, filter, take, tap, switchMap, map } from 'rxjs/operators';
 import { ColumnInfoService } from '../common/column-info.service';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-common";
 import * as i2 from "./column-resizing.service";
-import * as i3 from "@progress/kendo-angular-l10n";
+import * as i3 from "../common/provider.service";
 import * as i4 from "../common/column-info.service";
 /**
  * @hidden
@@ -87,13 +87,13 @@ const indexOf = (target, list) => {
  * @hidden
  */
 export 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();
@@ -148,7 +148,7 @@ export 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) {
@@ -224,7 +224,7 @@ export class ColumnHandleDirective {
         }
     }
 }
-ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: i4.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ContextService }, { token: i4.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,
@@ -233,7 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: i2.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.LocalizationService }, { type: i4.ColumnInfoService }]; }, propDecorators: { columns: [{
+                }] }, { type: i0.ElementRef }, { type: i2.ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ContextService }, { type: i4.ColumnInfoService }]; }, propDecorators: { columns: [{
                 type: Input
             }], column: [{
                 type: Input