@progress/kendo-angular-grid 21.4.1 → 22.0.0

package/esm2022/rendering/toolbar/tools/group-command-tool.directive.mjs

@@ -1,208 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, NgZone, Renderer2 } from '@angular/core';
-import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { Subscription } from 'rxjs';
-import { groupIcon } from '@progress/kendo-svg-icons';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { ContextService } from '../../../common/provider.service';
-import { closest, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
-import { take } from 'rxjs/operators';
-import { AdaptiveGridService } from '../../../common/adaptiveness.service';
-import { GroupToolbarToolComponent } from './group-toolbar-tool.component';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-toolbar";
-import * as i2 from "@progress/kendo-angular-popup";
-import * as i3 from "../../../common/provider.service";
-import * as i4 from "../../../common/adaptiveness.service";
-let incrementingId = 0;
-/**
- * Represents the toolbar tool for grouping columns of the Grid.
- * Use this directive on any `kendo-toolbar-button` inside a ToolbarComponent in the Grid.
- * When you click the toolbar button with this directive, the `group` event is triggered.
- *
- * @example
- * ```html
- * <kendo-grid>
- *      <kendo-toolbar>
- *         <kendo-toolbar-button text="Group" kendoGridGroupTool></kendo-toolbar-button>
- *      </kendo-toolbar>
- * </kendo-grid>
- * ```
- * @remarks
- * Applied to: {@link ToolBarButtonComponent}.
- */
-export class GroupCommandToolbarDirective {
-    host;
-    popupService;
-    ctx;
-    ngZone;
-    renderer;
-    adaptiveGridService;
-    popupRef;
-    nextId = incrementingId++;
-    toolSubs = new Subscription();
-    popupSubs;
-    actionSheetCloseSub;
-    removeClickListener;
-    constructor(host, popupService, ctx, ngZone, renderer, adaptiveGridService) {
-        this.host = host;
-        this.popupService = popupService;
-        this.ctx = ctx;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.adaptiveGridService = adaptiveGridService;
-    }
-    ngOnInit() {
-        this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
-        this.toolSubs.add(this.ctx.grid.groupChange.subscribe(group => {
-            this.host.showBadge = this.isGroupingApplied(group);
-        }));
-        this.host.hasBadgeContainer = true;
-        this.host.showBadge = this.isGroupingApplied(this.ctx.grid.group);
-        const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
-        const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
-        const hasIcon = hasToolbarIcon && hasOverflowIcon;
-        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
-        if (!hasIcon) {
-            this.host.icon = 'group';
-        }
-        if (!hasSvgIcon) {
-            this.host.svgIcon = groupIcon;
-        }
-    }
-    ngAfterViewInit() {
-        if (!isPresent(this.host.text)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                this.host.text = this.ctx.localization.get(`groupToolbarToolText`);
-            });
-        }
-        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.setAttribute('title', this.ctx.localization.get('groupToolbarToolText'));
-    }
-    ngOnDestroy() {
-        if (this.toolSubs) {
-            this.toolSubs.unsubscribe();
-        }
-        if (this.popupSubs) {
-            this.popupSubs.unsubscribe();
-        }
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.actionSheetCloseSub) {
-            this.actionSheetCloseSub.unsubscribe();
-            this.actionSheetCloseSub = null;
-        }
-        if (this.removeClickListener) {
-            this.removeClickListener();
-            this.removeClickListener = null;
-        }
-    }
-    onClick(e) {
-        e.preventDefault();
-        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
-            if (!this.ctx.grid.isActionSheetExpanded) {
-                this.adaptiveGridService.viewType = 'groupToolbarTool';
-                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
-                this.host.selected = true;
-                this.actionSheetCloseSub = this.ctx.grid.adaptiveRenderer.actionSheet.collapse.subscribe(() => this.host.selected = false);
-            }
-        }
-        else {
-            if (this.popupRef) {
-                this.closePopup();
-                return;
-            }
-            this.openPopup();
-        }
-    }
-    openPopup() {
-        const direction = this.ctx.localization.rtl ? 'right' : 'left';
-        this.popupRef = this.popupService.open({
-            anchor: this.buttonElement,
-            content: GroupToolbarToolComponent,
-            popupClass: 'k-grid-columnmenu-popup',
-            positionMode: 'absolute',
-            anchorAlign: { vertical: 'bottom', horizontal: direction },
-            popupAlign: { vertical: 'top', horizontal: direction }
-        });
-        this.adaptiveGridService.popupRef = this.popupRef;
-        this.setPopupAttributes();
-        this.host.selected = true;
-        this.ngZone.runOutsideAngular(() => {
-            if (!isDocumentAvailable()) {
-                return;
-            }
-            this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
-                if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
-                    this.ngZone.run(() => {
-                        this.closePopup();
-                    });
-                }
-            });
-        });
-        this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
-            this.popupSubs?.unsubscribe();
-            this.popupSubs = null;
-            this.closePopup();
-        });
-        this.initPopupProperties();
-    }
-    setPopupAttributes() {
-        const popupElement = this.popupRef.popupElement;
-        const popupId = `k-group-tool-${this.nextId}-popup`;
-        const popupAriaElement = popupElement.querySelector('.k-popup');
-        this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
-        this.renderer.setAttribute(popupAriaElement, 'id', popupId);
-        this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-        this.buttonElement?.setAttribute('aria-expanded', 'true');
-        this.buttonElement?.setAttribute('aria-controls', popupId);
-    }
-    initPopupProperties() {
-        this.popupRef.content.instance.ctx = this.ctx;
-        this.popupRef.content.instance.hostButton = this.host;
-        this.popupSubs.add(this.popupRef.content.instance.groupClear.subscribe(() => {
-            this.closePopup();
-        }));
-        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
-            this.closePopup();
-        }));
-    }
-    closePopup() {
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.removeAttribute('aria-controls');
-        this.host.selected = false;
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.popupSubs) {
-            this.popupSubs.unsubscribe();
-            this.popupSubs = null;
-        }
-        if (this.removeClickListener) {
-            this.removeClickListener();
-            this.removeClickListener = null;
-        }
-    }
-    get buttonElement() {
-        return this.host.getButton();
-    }
-    isGroupingApplied(group) {
-        return isPresent(group) && group.length > 0;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GroupCommandToolbarDirective, isStandalone: true, selector: "[kendoGridGroupTool]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupCommandToolbarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupTool]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.AdaptiveGridService }] });

package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs

@@ -1,451 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, Output, Input, HostListener, ViewChildren, QueryList, NgZone } from '@angular/core';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { chevronUpIcon, chevronDownIcon, xCircleIcon, plusCircleIcon, xIcon } from '@progress/kendo-svg-icons';
-import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
-import { take } from 'rxjs/operators';
-import { isPresent, Keys, normalizeKeys } from '@progress/kendo-angular-common';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-buttons";
-/**
- * @hidden
- */
-export class GroupToolbarToolComponent {
-    element;
-    ngZone;
-    hostClass = true;
-    get lgClass() {
-        return this.adaptive;
-    }
-    get mdClass() {
-        return !this.adaptive;
-    }
-    onEscKeyDown(event) {
-        event.preventDefault();
-        this.hostButton?.focus(event);
-        this.close.emit();
-    }
-    set groupItems(items) {
-        this._groupItems = items;
-        if (items?.first && (!isPresent(this.currentFocusedItemIndex) || this.currentFocusedItemIndex >= items.length || this.currentFocusedItemIndex < 0)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                this.currentFocusedItemIndex = 0;
-                this.groupItems.first.nativeElement.focus({ preventScroll: true });
-            });
-            return;
-        }
-        if (items?.first) {
-            items.get(this.currentFocusedItemIndex).nativeElement.focus({ preventScroll: true });
-        }
-    }
-    get groupItems() {
-        return this._groupItems;
-    }
-    _groupItems;
-    adaptive = false;
-    close = new EventEmitter();
-    groupClear = new EventEmitter();
-    currentFocusedItemIndex;
-    group = new Array();
-    columns = [];
-    iconSize = 'medium';
-    upIcon = chevronUpIcon;
-    downIcon = chevronDownIcon;
-    removeIcon = xCircleIcon;
-    addIcon = plusCircleIcon;
-    clearIcon = xIcon;
-    _ctx;
-    set ctx(ctx) {
-        if (!ctx || !ctx.grid) {
-            return;
-        }
-        this._ctx = ctx;
-        this.group = ctx.grid.group;
-        this.subscription = ctx.grid.groupChange.subscribe((group) => {
-            this.group = group;
-            this.updateGroupedColumns();
-        });
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.updateGroupedColumns();
-        });
-    }
-    get ctx() {
-        return this._ctx;
-    }
-    groupedColumns = [];
-    ungroupedColumns = [];
-    subscription;
-    hostButton;
-    constructor(element, ngZone) {
-        this.element = element;
-        this.ngZone = ngZone;
-    }
-    ngOnInit() {
-        this.iconSize = this.adaptive ? 'large' : 'medium';
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    addGroup(column, ev) {
-        ev.stopImmediatePropagation();
-        const index = this.group.length;
-        const groups = this.group.filter(x => x.field !== column?.field);
-        if (groups.length || this.group.length === 0) {
-            this.group = [...groups.slice(0, index), { field: column?.field }, ...groups.slice(index)];
-            this.ctx.grid.groupChange.emit(this.group);
-            this.updateGroupedColumns();
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                const newIndex = this.groupedColumns.length - 1;
-                const newItem = this.groupItems.get(newIndex);
-                if (newItem) {
-                    this.currentFocusedItemIndex = (this.groupedColumns?.length || 0) + newIndex;
-                    newItem.nativeElement.focus();
-                }
-            });
-        }
-    }
-    removeGroup(column, ev) {
-        ev.stopImmediatePropagation();
-        this.group = this.group.filter(x => x.field !== column?.field);
-        this.ctx.grid.groupChange.emit(this.group);
-        this.updateGroupedColumns();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            const newIndex = this.ungroupedColumns.findIndex(ungroupedColumn => ungroupedColumn?.field === column?.field);
-            const newItem = this.groupItems.get(newIndex + this.groupedColumns.length);
-            if (newItem) {
-                newItem.nativeElement.focus();
-            }
-        });
-    }
-    moveGroupUp(column, ev) {
-        ev.stopImmediatePropagation();
-        const index = this.group.findIndex(x => x.field === column?.field);
-        if (index > 0) {
-            const groupToMove = this.group[index];
-            this.group.splice(index, 1);
-            this.group.splice(index - 1, 0, groupToMove);
-            this.ctx.grid.groupChange.emit(this.group);
-            this.updateGroupedColumns();
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                const newItem = this.groupItems.get(index - 1);
-                if (newItem) {
-                    newItem.nativeElement.focus();
-                    this.currentFocusedItemIndex = index - 1;
-                }
-            });
-        }
-    }
-    moveGroupDown(column, ev) {
-        ev.stopImmediatePropagation();
-        const index = this.group.findIndex(x => x.field === column?.field);
-        if (index < this.group.length - 1) {
-            const groupToMove = this.group[index];
-            this.group.splice(index, 1);
-            this.group.splice(index + 1, 0, groupToMove);
-            this.ctx.grid.groupChange.emit(this.group);
-            this.updateGroupedColumns();
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                const newItem = this.groupItems.get(index + 1);
-                if (newItem) {
-                    newItem.nativeElement.focus();
-                    this.currentFocusedItemIndex = index + 1;
-                }
-            });
-        }
-    }
-    clear() {
-        this.group = [];
-        this.ctx.grid.groupChange.emit(this.group);
-        this.groupClear.emit(this.group);
-    }
-    getColumnComponent(column) {
-        return column;
-    }
-    onItemFocus(groupIndex, index) {
-        const currentIndex = (typeof groupIndex === 'number' ? groupIndex : this.groupedColumns?.length || 0) + index;
-        this.currentFocusedItemIndex = currentIndex;
-    }
-    handleGroupedKeydown(column, index, ev) {
-        const code = normalizeKeys(ev);
-        if (code === Keys.Enter || code === Keys.Backspace || code === Keys.Delete) {
-            this.removeGroup(column, ev);
-        }
-        else if (code === Keys.ArrowUp && ev.shiftKey) {
-            this.moveGroupUp(column, ev);
-        }
-        else if (code === Keys.ArrowDown && ev.shiftKey) {
-            this.moveGroupDown(column, ev);
-        }
-        else if (code === Keys.ArrowUp) {
-            this.navigateToPreviousItem();
-        }
-        else if (code === Keys.ArrowDown) {
-            this.navigateToNextItem();
-        }
-    }
-    handleUngroupedKeydown(column, index, ev) {
-        const code = normalizeKeys(ev);
-        if (code === Keys.Enter) {
-            this.addGroup(column, ev);
-        }
-        else if (code === Keys.ArrowUp) {
-            this.navigateToPreviousItem();
-        }
-        else if (code === Keys.ArrowDown) {
-            this.navigateToNextItem();
-        }
-    }
-    updateGroupedColumns() {
-        const columns = this.ctx.grid['columnInfoService'].leafNamedColumns;
-        const groupableColumns = columns.filter(column => column?.groupable);
-        this.groupedColumns = this.group
-            .map(group => columns.find(column => column?.field === group.field))
-            .filter(column => !!column);
-        this.ungroupedColumns = groupableColumns.filter(column => !this.groupedColumns.some(gc => gc?.field === column?.field));
-    }
-    navigateToNextItem() {
-        if (this.currentFocusedItemIndex < this.groupItems.length - 1) {
-            this.currentFocusedItemIndex++;
-            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
-        }
-        else if (this.currentFocusedItemIndex === this.groupItems.length - 1) {
-            this.currentFocusedItemIndex = 0;
-            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
-        }
-    }
-    navigateToPreviousItem() {
-        if (this.currentFocusedItemIndex > 0) {
-            this.currentFocusedItemIndex--;
-            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
-        }
-        else if (this.currentFocusedItemIndex === 0) {
-            this.currentFocusedItemIndex = this.groupItems.length - 1;
-            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GroupToolbarToolComponent, isStandalone: true, selector: "kendo-group-toolbar-tool", inputs: { adaptive: "adaptive" }, outputs: { close: "close", groupClear: "groupClear" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-group-menu": "this.hostClass", "class.k-group-menu-lg": "this.lgClass", "class.k-group-menu-md": "this.mdClass" } }, viewQueries: [{ propertyName: "groupItems", predicate: ["groupItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        @if (groupedColumns.length) {
-          <div class="k-group-menu-item-wrap">
-            @for (column of groupedColumns; track column; let i = $index) {
-              <div
-                #groupItem
-                role="button"
-                class="k-group-menu-item"
-                tabindex="0"
-                (keydown)="handleGroupedKeydown(column, i, $event)"
-                (focus)="onItemFocus(i, 0)"
-                >
-                @if (groupedColumns.length > 1) {
-                  <span class="k-group-menu-item-actions">
-                    <span
-                      class="k-group-menu-item-action k-group-menu-item-up-action"
-                      (click)="moveGroupUp(column, $event)"
-                      [attr.aria-disabled]="i === 0"
-                      [class.k-disabled]="i === 0"
-                      >
-                      <kendo-icon-wrapper
-                        name="arrow-chevron-up"
-                        [svgIcon]="upIcon"
-                        [size]="iconSize"
-                      ></kendo-icon-wrapper>
-                    </span>
-                    <span
-                      class="k-group-menu-item-action k-group-menu-item-down-action"
-                      (click)="moveGroupDown(column, $event)"
-                      [attr.aria-disabled]="i === groupedColumns.length - 1"
-                      [class.k-disabled]="i === groupedColumns.length - 1"
-                      >
-                      <kendo-icon-wrapper
-                        name="arrow-chevron-down"
-                        [svgIcon]="downIcon"
-                        [size]="iconSize"
-                      ></kendo-icon-wrapper>
-                    </span>
-                  </span>
-                }
-                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
-                <span class="k-spacer"></span>
-                <span class="k-group-menu-item-actions">
-                  <span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
-                    <kendo-icon-wrapper
-                      name="x-circle"
-                      [svgIcon]="removeIcon"
-                      [size]="iconSize"
-                    ></kendo-icon-wrapper>
-                  </span>
-                </span>
-              </div>
-            }
-          </div>
-        }
-        
-        @if (ungroupedColumns.length) {
-          <div class="k-group-menu-item-wrap">
-            @for (column of ungroupedColumns; track column; let i = $index) {
-              <div
-                #groupItem
-                role="button"
-                class="k-group-menu-item"
-                tabindex="0"
-                (keydown)="handleUngroupedKeydown(column, i, $event)"
-                (focus)="onItemFocus(null, i)"
-                >
-                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
-                <span class="k-spacer"></span>
-                <span class="k-group-menu-item-actions">
-                  <span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
-                    <kendo-icon-wrapper
-                      name="plus-circle"
-                      [svgIcon]="addIcon"
-                      [size]="iconSize"
-                    ></kendo-icon-wrapper>
-                  </span>
-                </span>
-              </div>
-            }
-          </div>
-        }
-        
-        @if (!adaptive) {
-          <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton
-              [svgIcon]="clearIcon"
-              (click)="clear()"
-              icon="x"
-              >
-              {{ctx?.localization.get('groupClearButton')}}
-            </button>
-          </div>
-        }
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupToolbarToolComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-group-toolbar-tool',
-                    template: `
-        @if (groupedColumns.length) {
-          <div class="k-group-menu-item-wrap">
-            @for (column of groupedColumns; track column; let i = $index) {
-              <div
-                #groupItem
-                role="button"
-                class="k-group-menu-item"
-                tabindex="0"
-                (keydown)="handleGroupedKeydown(column, i, $event)"
-                (focus)="onItemFocus(i, 0)"
-                >
-                @if (groupedColumns.length > 1) {
-                  <span class="k-group-menu-item-actions">
-                    <span
-                      class="k-group-menu-item-action k-group-menu-item-up-action"
-                      (click)="moveGroupUp(column, $event)"
-                      [attr.aria-disabled]="i === 0"
-                      [class.k-disabled]="i === 0"
-                      >
-                      <kendo-icon-wrapper
-                        name="arrow-chevron-up"
-                        [svgIcon]="upIcon"
-                        [size]="iconSize"
-                      ></kendo-icon-wrapper>
-                    </span>
-                    <span
-                      class="k-group-menu-item-action k-group-menu-item-down-action"
-                      (click)="moveGroupDown(column, $event)"
-                      [attr.aria-disabled]="i === groupedColumns.length - 1"
-                      [class.k-disabled]="i === groupedColumns.length - 1"
-                      >
-                      <kendo-icon-wrapper
-                        name="arrow-chevron-down"
-                        [svgIcon]="downIcon"
-                        [size]="iconSize"
-                      ></kendo-icon-wrapper>
-                    </span>
-                  </span>
-                }
-                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
-                <span class="k-spacer"></span>
-                <span class="k-group-menu-item-actions">
-                  <span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
-                    <kendo-icon-wrapper
-                      name="x-circle"
-                      [svgIcon]="removeIcon"
-                      [size]="iconSize"
-                    ></kendo-icon-wrapper>
-                  </span>
-                </span>
-              </div>
-            }
-          </div>
-        }
-        
-        @if (ungroupedColumns.length) {
-          <div class="k-group-menu-item-wrap">
-            @for (column of ungroupedColumns; track column; let i = $index) {
-              <div
-                #groupItem
-                role="button"
-                class="k-group-menu-item"
-                tabindex="0"
-                (keydown)="handleUngroupedKeydown(column, i, $event)"
-                (focus)="onItemFocus(null, i)"
-                >
-                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
-                <span class="k-spacer"></span>
-                <span class="k-group-menu-item-actions">
-                  <span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
-                    <kendo-icon-wrapper
-                      name="plus-circle"
-                      [svgIcon]="addIcon"
-                      [size]="iconSize"
-                    ></kendo-icon-wrapper>
-                  </span>
-                </span>
-              </div>
-            }
-          </div>
-        }
-        
-        @if (!adaptive) {
-          <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton
-              [svgIcon]="clearIcon"
-              (click)="clear()"
-              icon="x"
-              >
-              {{ctx?.localization.get('groupClearButton')}}
-            </button>
-          </div>
-        }
-        `,
-                    standalone: true,
-                    imports: [IconWrapperComponent, KENDO_BUTTON]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-group-menu']
-            }], lgClass: [{
-                type: HostBinding,
-                args: ['class.k-group-menu-lg']
-            }], mdClass: [{
-                type: HostBinding,
-                args: ['class.k-group-menu-md']
-            }], onEscKeyDown: [{
-                type: HostListener,
-                args: ['keydown.escape', ['$event']]
-            }], groupItems: [{
-                type: ViewChildren,
-                args: ['groupItem', { read: ElementRef }]
-            }], adaptive: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], groupClear: [{
-                type: Output
-            }] } });