@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
732 lines (729 loc) • 38.3 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
import { NavigationService } from './../navigation/navigation.service';
import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef, Optional } from '@angular/core';
import { SinglePopupService } from '../common/single-popup.service';
import { ColumnMenuService } from './column-menu.service';
import { filtersByField } from '../filtering/base-filter-cell.component';
import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from './utils';
import { replaceMessagePlaceholder } from '../utils';
import { ContextService } from '../common/provider.service';
import { ColumnMenuErrorMessages } from '../common/error-messages';
import { moreVerticalIcon, columnsIcon, filterIcon, slidersIcon } from '@progress/kendo-svg-icons';
import { TabContentDirective, TabStripComponent, TabStripTabComponent, TabTitleDirective } from '@progress/kendo-angular-layout';
import { ColumnInfoService } from '../common/column-info.service';
import { IdService } from '../common/id.service';
import { ColumnListComponent } from './column-list.component';
import { FilterMenuContainerComponent } from '../filtering/menu/filter-menu-container.component';
import { ColumnMenuFilterComponent } from './column-menu-filter.component';
import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.component';
import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
import { ColumnMenuPositionComponent } from './column-menu-position.component';
import { ColumnMenuStickComponent } from './column-menu-stick.component';
import { ColumnMenuLockComponent } from './column-menu-lock.component';
import { ColumnMenuItemDirective } from './column-menu-item.directive';
import { ColumnMenuSortComponent } from './column-menu-sort.component';
import { ColumnMenuContainerComponent } from './column-menu-container.component';
import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
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 "./column-menu.service";
import * as i4 from "../common/provider.service";
import * as i5 from "../common/column-info.service";
import * as i6 from "../common/id.service";
const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
let id = 0;
const getId = (gridId) => `${gridId}-column-menu-${id++}`;
/**
* Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
* ```html
* <kendo-grid ...>
* <kendo-grid-column field="ProductName" [columnMenu]="false">
* <ng-template kendoGridHeaderTemplate let-column>
* <kendo-grid-column-menu [column]="column"> </kendo-grid-column-menu>
* </ng-template>
* </kendo-grid-column>
* </kendo-grid>
* ```
*/
export class ColumnMenuComponent {
navigationService;
popupService;
service;
ctx;
renderer;
cdr;
columnInfoService;
idService;
/**
* @hidden
*/
standalone = true;
/**
* The Grid column instance to control with the menu.
*/
column;
/**
* The settings for the Column Menu.
*/
settings = {};
/**
* The descriptors by which the data will be sorted.
* Typically bound to the same value as [GridComponent.sort]({% slug api_grid_gridcomponent %}#toc-sort).
*/
sort;
/**
* The descriptor by which the data will be filtered.
* Typically bound to the same value as [GridComponent.filter]({% slug api_grid_gridcomponent %}#toc-filter).
*/
filter;
/**
* @hidden
*/
sortable = true;
/**
* @hidden
*/
columnMenuTemplate;
/**
* @hidden
*/
tabIndex = '-1';
anchor;
template;
defaultTemplate;
tabbedInterfaceTemplate;
tabStrip;
/**
* @hidden
*/
columnsIcon = columnsIcon;
/**
* @hidden
*/
actionsClass = 'k-actions';
/**
* @hidden
*/
slidersIcon = slidersIcon;
/**
* @hidden
*/
filterIcon = filterIcon;
/**
* @hidden
*/
expandedFilter = false;
/**
* @hidden
*/
expandedColumns = false;
/**
* @hidden
*/
expandedPosition = false;
/**
* @hidden
*/
get showGeneralTab() {
return this.hasSort
|| this.hasLock
|| this.hasStick
|| this.hasPosition
|| this.hasAutoSizeColumn
|| this.hasAutoSizeAllColumns;
}
moreVerticalIcon = moreVerticalIcon;
popupRef;
closeSubscription;
popupSubs;
constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService) {
this.navigationService = navigationService;
this.popupService = popupService;
this.service = service;
this.ctx = ctx;
this.renderer = renderer;
this.cdr = cdr;
this.columnInfoService = columnInfoService;
this.idService = idService;
this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this, true));
}
/**
* @hidden
*/
get isActive() {
return (this.hasFilter && filtersByField(this.filter, this.column.field).length > 0) ||
(!this.sortable && this.hasSort && this.sort.find(descriptor => descriptor.field === this.column.field));
}
/**
* @hidden
*/
get hasFilter() {
return hasFilter(this.settings, this.column);
}
/**
* @hidden
*/
get isNavigable() {
return this.navigationService.tableEnabled;
}
/**
* @hidden
*/
get hasSort() {
return hasSort(this.settings, this.column);
}
/**
* @hidden
*/
get hasColumnChooser() {
return hasColumnChooser(this.settings);
}
/**
* @hidden
*/
onApply(changed) {
this.close(true);
if (changed.length) {
this.cdr.markForCheck();
this.columnInfoService.changeVisibility(changed);
}
}
/**
* @hidden
*/
get hasAutoSizeColumn() {
return hasAutoSizeColumn(this.settings);
}
/**
* @hidden
*/
get hasAutoSizeAllColumns() {
return hasAutoSizeAllColumns(this.settings);
}
/**
* @hidden
*/
get hasLock() {
return hasLock(this.settings, this.column);
}
/**
* @hidden
*/
get hasStick() {
return hasStick(this.settings, this.column);
}
/**
* @hidden
*/
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) {
this.settings.autoSizeAllColumns = false;
console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
}
if (this.settings.autoSizeColumn) {
this.settings.autoSizeColumn = false;
console.warn(ColumnMenuErrorMessages.autoSizeColumn);
}
}
this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
}
ngOnChanges() {
this.service.column = this.column;
this.service.sort = this.sort;
this.service.filter = this.filter;
this.service.sortable = this.sortable;
}
ngOnDestroy() {
this.close();
this.closeSubscription.unsubscribe();
this.popupSubs?.unsubscribe();
this.closeSubscription = this.popupSubs = null;
}
/**
* @hidden
*/
toggle(e, anchor, template) {
if (e) {
e.preventDefault();
e instanceof KeyboardEvent && e.stopImmediatePropagation();
}
this.expandedFilter = this.getExpandedState(this.settings.filter);
this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASSES);
// Needed as changes to 'popupRef' and 'popupId' are not reflected
// automatically when the Popup is closed by clicking outside the anchor
const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
if (this.popupRef) {
this.popupSubs?.unsubscribe();
this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
this.popupSubs?.unsubscribe();
this.popupSubs = null;
this.close(true);
this.updateAria(ariaRoot);
});
this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
this.popupSubs?.unsubscribe();
this.popupSubs = this.popupRef = null;
this.updateAria(ariaRoot);
}));
const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
if (popupAriaElement) {
const popupId = getId(this.idService?.gridId());
this.renderer.setAttribute(popupAriaElement, 'id', popupId);
this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
}
if (this.settings.view === 'tabbed') {
this.renderer.addClass(popupAriaElement, 'k-column-menu-tabbed');
this.renderer.addClass(popupAriaElement, 'k-column-menu');
this.cdr.detectChanges();
this.tabStrip?.selectTab(0);
}
}
else {
this.focusRoot();
}
}
/**
* @hidden
*/
close(triggerFocus = false) {
this.popupService.destroy();
this.popupRef = null;
this.cdr.markForCheck();
if (!triggerFocus) {
return;
}
this.focusRoot();
}
/**
* @hidden
*/
get columnMenuTitle() {
const localizationMsg = this.ctx.localization.get('columnMenu') || '';
const columnName = this.column.title || this.column.field;
return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
}
getExpandedState(menuItemSettings) {
return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
}
updateAria(ariaRoot) {
ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
}
focusRoot() {
this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, 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 }, { 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 }"
(click)="toggle($event, anchor, template)"
(keydown.enter)="$event.stopImmediatePropagation()"
href="#"
[tabindex]="tabIndex"
[attr.title]="columnMenuTitle"
[attr.aria-expanded]="isNavigable ? undefined : false"
[attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
<kendo-icon-wrapper
name="more-vertical"
[svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
</a>
<ng-template #template>
<kendo-grid-columnmenu-container
(keydown.escape)="close(true)"
(keydown.enter)="$event.stopImmediatePropagation()">
<ng-container
[ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
[ngTemplateOutletContext]="{ service: service, column: column }">
</ng-container>
</kendo-grid-columnmenu-container>
</ng-template>
<ng-template #defaultTemplate>
<kendo-grid-columnmenu-container
(keydown.escape)="close(true)"
(keydown.enter)="$event.stopImmediatePropagation()">
<kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
</kendo-grid-columnmenu-sort>
<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>
<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="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
<kendo-grid-columnmenu-chooser
#chooserItem
*ngIf="hasColumnChooser"
[kendoGridColumnMenuItem]="chooserItem"
[service]="service"
[expanded]="expandedColumns">
</kendo-grid-columnmenu-chooser>
<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>
<span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
<kendo-grid-columnmenu-filter
#filterItem
*ngIf="hasFilter"
[kendoGridColumnMenuItem]="filterItem"
[service]="service"
[expanded]="expandedFilter">
</kendo-grid-columnmenu-filter>
</kendo-grid-columnmenu-container>
</ng-template>
<ng-template #tabbedInterfaceTemplate>
<kendo-tabstrip #tabstrip
(keydown.escape)="close(true)">
<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="sliders"
[svgIcon]="slidersIcon">
</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, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
type: Component,
args: [{
providers: [
ColumnMenuService,
MenuTabbingService
],
selector: 'kendo-grid-column-menu',
template: `
<a #anchor
class="k-grid-header-menu k-grid-column-menu"
[ngClass]="{ 'k-active': isActive }"
(click)="toggle($event, anchor, template)"
(keydown.enter)="$event.stopImmediatePropagation()"
href="#"
[tabindex]="tabIndex"
[attr.title]="columnMenuTitle"
[attr.aria-expanded]="isNavigable ? undefined : false"
[attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
<kendo-icon-wrapper
name="more-vertical"
[svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
</a>
<ng-template #template>
<kendo-grid-columnmenu-container
(keydown.escape)="close(true)"
(keydown.enter)="$event.stopImmediatePropagation()">
<ng-container
[ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
[ngTemplateOutletContext]="{ service: service, column: column }">
</ng-container>
</kendo-grid-columnmenu-container>
</ng-template>
<ng-template #defaultTemplate>
<kendo-grid-columnmenu-container
(keydown.escape)="close(true)"
(keydown.enter)="$event.stopImmediatePropagation()">
<kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
</kendo-grid-columnmenu-sort>
<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>
<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="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
<kendo-grid-columnmenu-chooser
#chooserItem
*ngIf="hasColumnChooser"
[kendoGridColumnMenuItem]="chooserItem"
[service]="service"
[expanded]="expandedColumns">
</kendo-grid-columnmenu-chooser>
<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>
<span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
<kendo-grid-columnmenu-filter
#filterItem
*ngIf="hasFilter"
[kendoGridColumnMenuItem]="filterItem"
[service]="service"
[expanded]="expandedFilter">
</kendo-grid-columnmenu-filter>
</kendo-grid-columnmenu-container>
</ng-template>
<ng-template #tabbedInterfaceTemplate>
<kendo-tabstrip #tabstrip
(keydown.escape)="close(true)">
<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="sliders"
[svgIcon]="slidersIcon">
</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>
`,
standalone: true,
imports: [
NgClass, IconWrapperComponent, ColumnMenuContainerComponent, NgTemplateOutlet, NgIf,
ColumnMenuSortComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuStickComponent,
ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuAutoSizeColumnComponent,
ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuFilterComponent, TabStripComponent,
TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent
]
}]
}], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }, { type: i6.IdService, decorators: [{
type: Optional
}] }]; }, propDecorators: { standalone: [{
type: HostBinding,
args: ['class.k-grid-column-menu-standalone']
}, {
type: Input
}], column: [{
type: Input
}], settings: [{
type: Input
}], sort: [{
type: Input
}], filter: [{
type: Input
}], sortable: [{
type: Input
}], columnMenuTemplate: [{
type: Input
}], tabIndex: [{
type: Input
}], anchor: [{
type: ViewChild,
args: ['anchor', { static: true }]
}], 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]
}] } });