@progress/kendo-angular-grid 21.4.1 → 22.0.0-develop.1

package/esm2022/adaptiveness/adaptive-renderer.component.mjs

@@ -1,1270 +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, ViewChild, ViewContainerRef } from '@angular/core';
-import { AdaptiveGridService } from '../common/adaptiveness.service';
-import { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetViewComponent } from '@progress/kendo-angular-navigation';
-import { FilterMenuContainerComponent } from '../filtering/menu/filter-menu-container.component';
-import { FilterToolbarToolComponent } from '../rendering/toolbar/tools/filter-toolbar-tool.component';
-import { ButtonDirective } from '@progress/kendo-angular-buttons';
-import { NgTemplateOutlet } from '@angular/common';
-import { arrowRotateCcwIcon, cancelIcon, checkIcon, chevronLeftIcon, filterClearIcon, filterIcon, saveIcon, xIcon } from '@progress/kendo-svg-icons';
-import { FilterService } from '../filtering/filter.service';
-import { ColumnMenuContainerComponent } from '../column-menu/column-menu-container.component';
-import { ColumnMenuFilterComponent } from '../column-menu/column-menu-filter.component';
-import { ColumnMenuSortComponent } from '../column-menu/column-menu-sort.component';
-import { ColumnMenuLockComponent } from '../column-menu/column-menu-lock.component';
-import { ColumnMenuStickComponent } from '../column-menu/column-menu-stick.component';
-import { ColumnMenuPositionComponent } from '../column-menu/column-menu-position.component';
-import { ColumnMenuChooserComponent } from '../column-menu/column-menu-chooser.component';
-import { ColumnMenuAutoSizeColumnComponent } from '../column-menu/column-menu-autosize.component';
-import { ColumnMenuAutoSizeAllColumnsComponent } from '../column-menu/column-menu-autosize-all.component';
-import { ColumnMenuItemComponent } from '../column-menu/column-menu-item.component';
-import { ColumnMenuItemDirective } from '../column-menu/column-menu-item.directive';
-import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from '../column-menu/utils';
-import { ColumnMenuService } from '../column-menu/column-menu.service';
-import { ContextService } from '../common/provider.service';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { SortService } from '../common/sort.service';
-import { ColumnInfoService } from '../common/column-info.service';
-import { normalize } from '../columns/sort-settings';
-import { directions } from '../rendering/toolbar/tools/sort-toolbar-tool.component';
-import { EventsOutsideAngularDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
-import { FormComponent } from '../editing/form';
-import { GroupToolbarToolComponent } from '../rendering/toolbar/tools/group-toolbar-tool.component';
-import { ColumnChooserContentComponent } from '../column-menu/column-chooser-content.component';
-import * as i0 from "@angular/core";
-import * as i1 from "../column-menu/column-menu.service";
-import * as i2 from "../common/adaptiveness.service";
-import * as i3 from "../filtering/filter.service";
-import * as i4 from "../common/provider.service";
-import * as i5 from "@progress/kendo-angular-utils";
-import * as i6 from "../common/sort.service";
-import * as i7 from "../common/column-info.service";
-/**
- * @hidden
- */
-export class AdaptiveRendererComponent {
-    service;
-    adaptiveGridService;
-    filterService;
-    ctx;
-    adaptiveService;
-    sortService;
-    columnInfoService;
-    xIcon = xIcon;
-    checkIcon = checkIcon;
-    filterIcon = filterIcon;
-    arrowRotateCcwIcon = arrowRotateCcwIcon;
-    chevronLeft = chevronLeftIcon;
-    filterClearIcon = filterClearIcon;
-    cancelIcon = cancelIcon;
-    saveIcon = saveIcon;
-    columns;
-    externalEditingSettings;
-    get hasSort() {
-        return hasSort(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
-    }
-    get hasColumnChooser() {
-        return hasColumnChooser(this.ctx.grid.columnMenu);
-    }
-    get hasFilter() {
-        return hasFilter(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
-    }
-    get hasAutoSizeColumn() {
-        return hasAutoSizeColumn(this.ctx.grid.columnMenu);
-    }
-    get hasAutoSizeAllColumns() {
-        return hasAutoSizeAllColumns(this.ctx.grid.columnMenu);
-    }
-    get hasLock() {
-        return hasLock(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
-    }
-    get hasStick() {
-        return hasStick(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
-    }
-    get hasPosition() {
-        return hasPosition(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
-    }
-    getColumnComponent(column) {
-        return column;
-    }
-    get hasTitle() {
-        const hasTitle = this.adaptiveGridService.viewType === 'columnMenu' ||
-            this.adaptiveGridService.viewType === 'filterToolbarTool' ||
-            this.adaptiveGridService.viewType === 'columnChooserToolbarTool' ||
-            this.adaptiveGridService.viewType === 'filterMenu' ||
-            this.adaptiveGridService.viewType === 'sortToolbarTool' ||
-            this.adaptiveGridService.viewType === 'groupToolbarTool' ||
-            this.adaptiveGridService.viewType === 'externalEditing';
-        return hasTitle;
-    }
-    get hasSubtitle() {
-        const hasSubtitle = (this.adaptiveGridService.viewType === 'columnMenu' && this.adaptiveGridService.secondaryView === 'columnChooser') ||
-            this.adaptiveGridService.viewType === 'columnChooserToolbarTool';
-        return hasSubtitle;
-    }
-    get actionSheetTitle() {
-        if (this.adaptiveGridService.viewType === 'columnMenu') {
-            if (this.adaptiveGridService.secondaryView === 'columnChooser') {
-                return this.messageFor('columns');
-            }
-            if (this.adaptiveGridService.secondaryView === 'columnPosition') {
-                return this.messageFor('setColumnPosition');
-            }
-            if (this.adaptiveGridService.secondaryView === 'columnFilter') {
-                return this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-            }
-            return this.columnMenuTitle;
-        }
-        if (this.adaptiveGridService.viewType === 'filterToolbarTool') {
-            if (this.adaptiveGridService.secondaryView === 'columnFilter') {
-                return this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-            }
-            return this.messageFor('adaptiveFilterTitle');
-        }
-        if (this.adaptiveGridService.viewType === 'filterMenu') {
-            return this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-        }
-        if (this.adaptiveGridService.viewType === 'columnChooserToolbarTool') {
-            return this.messageFor('columns');
-        }
-        if (this.adaptiveGridService.viewType === 'sortToolbarTool') {
-            return this.messageFor('adaptiveSortTitle');
-        }
-        if (this.adaptiveGridService.viewType === 'groupToolbarTool') {
-            return this.messageFor('adaptiveGroupTitle');
-        }
-        if (this.adaptiveGridService.viewType === 'externalEditing') {
-            return this.messageFor(this.externalEditingSettings.event.isNew ? 'externalEditingAddTitle' : 'externalEditingTitle');
-        }
-    }
-    get adaptiveFilterTitle() {
-        const columnTitle = this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-        return `${this.messageFor('adaptiveFilterTitle')} ${columnTitle}`;
-    }
-    get columnMenuTitle() {
-        const columnName = this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-        return columnName;
-    }
-    get filterLabel() {
-        const localizationMsg = this.messageFor('filterMenuTitle') || '';
-        const columnName = this.adaptiveGridService.column.title || this.adaptiveGridService.column.field;
-        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
-    }
-    get hasXCloseIcon() {
-        return this.adaptiveGridService.viewType !== 'sortToolbarTool' && this.adaptiveGridService.viewType !== 'groupToolbarTool';
-    }
-    get hasCheckCloseIcon() {
-        return this.adaptiveGridService.viewType === 'sortToolbarTool' || this.adaptiveGridService.viewType === 'groupToolbarTool';
-    }
-    columnChooserContent;
-    filterToolbarToolTemplate;
-    filterMenuContainer;
-    actionSheet;
-    set groupToolbarTool(value) {
-        value && (value.ctx = this.ctx);
-    }
-    adaptiveSizeChangeSubscription;
-    constructor(service, adaptiveGridService, filterService, ctx, adaptiveService, sortService, columnInfoService) {
-        this.service = service;
-        this.adaptiveGridService = adaptiveGridService;
-        this.filterService = filterService;
-        this.ctx = ctx;
-        this.adaptiveService = adaptiveService;
-        this.sortService = sortService;
-        this.columnInfoService = columnInfoService;
-        this.adaptiveSizeChangeSubscription = this.adaptiveService.sizeChanges.subscribe(() => {
-            if (this.ctx.grid.isOpen) {
-                if (this.actionSheet.expanded) {
-                    this.actionSheet.toggle(false);
-                }
-                else {
-                    this.adaptiveGridService.popupRef.close();
-                    this.adaptiveGridService.popupRef = null;
-                }
-            }
-        });
-    }
-    ngOnInit() {
-        this.columns = this.columnInfoService.leafNamedColumns.filter(column => column?.sortable);
-    }
-    ngOnDestroy() {
-        if (this.adaptiveSizeChangeSubscription) {
-            this.adaptiveSizeChangeSubscription.unsubscribe();
-        }
-    }
-    messageFor = token => this.ctx.localization.get(token);
-    close() {
-        this.actionSheet.toggle(false);
-        this.adaptiveGridService.reset();
-    }
-    prevView() {
-        this.adaptiveGridService.secondaryView = null;
-        this.adaptiveGridService.filterMenuContainerComponentRef?.destroy();
-        this.actionSheet.prevView();
-    }
-    clearFilters() {
-        const emptyFilter = { logic: 'and', filters: [] };
-        this.filterService.filter(emptyFilter);
-        this.actionSheet.toggle(false);
-    }
-    navigateToColumnsView() {
-        this.adaptiveGridService.secondaryView = 'columnChooser';
-        this.actionSheet.nextView();
-    }
-    navigateToFilterView() {
-        this.adaptiveGridService.secondaryView = 'columnFilter';
-        this.actionSheet.nextView();
-    }
-    navigateToPositionView() {
-        this.adaptiveGridService.secondaryView = 'columnPosition';
-        this.actionSheet.nextView();
-    }
-    applyChanges() {
-        this.columnChooserContent.applyChanges();
-        this.actionSheet.toggle(false);
-    }
-    sortBy(column) {
-        this.toggleSort(this.getColumnComponent(column));
-    }
-    toggleSort(column) {
-        const field = column?.field;
-        if (!field) {
-            return;
-        }
-        const descriptor = this.getDescriptor(column);
-        this.sortService.sort(descriptor);
-    }
-    getDescriptor(column) {
-        const { allowUnsort, mode, initialDirection } = normalize(this.ctx.grid.sortable, column.sortable);
-        const field = column?.field;
-        if (!field) {
-            return;
-        }
-        const descriptorT = this.ctx.grid.sort.find(item => item.field === field) || { field };
-        const [first, second] = directions(initialDirection);
-        let dir = first;
-        if (descriptorT.dir === first) {
-            dir = second;
-        }
-        else if (descriptorT.dir === second && allowUnsort) {
-            dir = undefined;
-        }
-        const descriptor = { field, dir };
-        if (mode === 'single') {
-            return [descriptor];
-        }
-        return [...this.ctx.grid.sort.filter(desc => desc.field !== field), descriptor];
-    }
-    clearSorting() {
-        if (this.ctx.grid.sort.length > 0) {
-            this.sortService.sort([]);
-        }
-        this.actionSheet.toggle(false);
-    }
-    clearGrouping() {
-        if (this.ctx.grid.group.length > 0) {
-            this.ctx.grid.group = [];
-            this.ctx.grid.groupChange.emit(this.ctx.grid.group);
-        }
-        this.actionSheet.toggle(false);
-    }
-    onAnimationEnd() {
-        this.adaptiveGridService.notifyAnimationEnd();
-    }
-    cancelChanges() {
-        this.columnChooserContent.cancelChanges();
-        this.columnChooserContent.cdr.detectChanges();
-    }
-    onTab(event) {
-        this.columnChooserContent.onTab(event);
-    }
-    saveEditing() {
-        const { event, formGroup, externalEditingDirective } = this.externalEditingSettings;
-        externalEditingDirective.saveHandler({ ...event, formGroup });
-        this.actionSheet.toggle(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.ColumnMenuService }, { token: i2.AdaptiveGridService }, { token: i3.FilterService }, { token: i4.ContextService }, { token: i5.AdaptiveService }, { token: i6.SortService }, { token: i7.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnChooserContent", first: true, predicate: ["columnChooserContent"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
-        <kendo-actionsheet
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': adaptiveService.size === 'small',
-                'k-actionsheet-bottom': adaptiveService.size === 'medium'
-            }"
-            [cssStyle]="{
-                height: adaptiveService.size === 'small' ? '100vh' : '60vh'
-            }"
-          [overlayClickClose]="true"
-          (collapse)="adaptiveGridService.reset()">
-        
-          <!-- sortToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'sortToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <div class="k-columnmenu-item-wrapper">
-                    @for (column of columns; track column) {
-                      <kendo-grid-columnmenu-item
-                        [column]="getColumnComponent(column)"
-                        [text]="column.title || getColumnComponent(column).field"
-                        (itemClick)="sortBy(column)">
-                      </kendo-grid-columnmenu-item>
-                    }
-                  </div>
-                </div>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  (click)="clearSorting()">
-                  {{messageFor('sortClearButton')}}
-                </button>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  themeColor="primary"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('sortDoneButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnChooserToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'columnChooserToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-column-chooser-content
-                  #columnChooserContent
-                  [columns]="columns"
-                  [isLast]="true"
-                  [autoSync]="false"
-                  [allowHideAll]="false"
-                  >
-                </kendo-grid-column-chooser-content>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterToolbarTool first view -->
-          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
-            <kendo-actionsheet-view
-              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-              [scope]="this">
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
-                </div>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button kendoButton
-                  icon="filter-clear"
-                  [svgIcon]="filterClearIcon"
-                  size="large"
-                  (click)="clearFilters()">
-                  {{messageFor('filterClearAllButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterToolbarTool second view -->
-          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <ng-container #filterToolbarToolTemplate></ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterMenu view -->
-          @if (adaptiveGridService.viewType === 'filterMenu') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate >
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-filter-menu-container
-                  #filterMenuContainer
-                  [column]="adaptiveGridService.column"
-                  [filter]="ctx.grid.filter"
-                  (close)="close()"
-                  (keydown.enter)="$event.stopImmediatePropagation()">
-                </kendo-grid-filter-menu-container>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnMenu first view -->
-          @if (adaptiveGridService.viewType === 'columnMenu') {
-            <kendo-actionsheet-view
-              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-              [scope]="this">
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <kendo-grid-columnmenu-container>
-                    @if (hasSort) {
-                      <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-sort>
-                    }
-                    @if (hasLock && !hasPosition) {
-                      <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-lock>
-                    }
-                    @if (hasStick && !hasPosition) {
-                      <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-stick>
-                    }
-                    @if (hasPosition) {
-                      <kendo-grid-columnmenu-position
-                        #positionItem
-                        [showLock]="hasLock"
-                        [showStick]="hasStick"
-                        [kendoGridColumnMenuItem]="positionItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToPositionView()">
-                      </kendo-grid-columnmenu-position>
-                    }
-                    @if (hasLock || hasStick || adaptiveGridService.column.sortable) {
-                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
-                    }
-                    @if (hasColumnChooser) {
-                      <kendo-grid-columnmenu-chooser
-                        #chooserItem
-                        [kendoGridColumnMenuItem]="chooserItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToColumnsView()">
-                      </kendo-grid-columnmenu-chooser>
-                    }
-                    @if (hasAutoSizeColumn) {
-                      <kendo-grid-columnmenu-autosize-column
-                        #autoSizeColumnItem
-                        [service]="adaptiveGridService.columnMenuService"
-                        [kendoGridColumnMenuItem]="autoSizeColumnItem"
-                        [column]="adaptiveGridService.column"
-                        >
-                      </kendo-grid-columnmenu-autosize-column>
-                    }
-                    @if (hasAutoSizeAllColumns) {
-                      <kendo-grid-columnmenu-autosize-all-columns
-                        #autoSizeAllColumnsItem
-                        [service]="adaptiveGridService.columnMenuService"
-                        [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
-                        >
-                      </kendo-grid-columnmenu-autosize-all-columns>
-                    }
-                    @if (adaptiveGridService.column.filterable) {
-                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
-                    }
-                    @if (hasFilter) {
-                      <kendo-grid-columnmenu-filter
-                        #filterItem
-                        [kendoGridColumnMenuItem]="filterItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToFilterView()">
-                      </kendo-grid-columnmenu-filter>
-                    }
-                  </kendo-grid-columnmenu-container>
-                </div>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnMenu second view -->
-          @if (adaptiveGridService.viewType === 'columnMenu') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                @if (adaptiveGridService.secondaryView === 'columnChooser') {
-                  <kendo-grid-column-chooser-content
-                    #columnChooserContent
-                    [columns]="adaptiveGridService.columns"
-                    [isLast]="true"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    >
-                  </kendo-grid-column-chooser-content>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnFilter') {
-                  <kendo-grid-filter-menu-container
-                    [column]="adaptiveGridService.column"
-                    [filter]="ctx.grid.filter"
-                    (close)="close()"
-                    [kendoEventsOutsideAngular]="{'keydown.escape': close}"
-                    [scope]="this">
-                  </kendo-grid-filter-menu-container>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasLock) {
-                  <kendo-grid-columnmenu-lock
-                    [service]="adaptiveGridService.columnMenuService">
-                  </kendo-grid-columnmenu-lock>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasStick) {
-                  <kendo-grid-columnmenu-stick
-                    [service]="adaptiveGridService.columnMenuService">
-                  </kendo-grid-columnmenu-stick>
-                }
-              </ng-template>
-              @if (adaptiveGridService.secondaryView === 'columnChooser') {
-                <ng-template kendoActionSheetFooterTemplate>
-                  <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                  </ng-container>
-                </ng-template>
-              }
-              @if (adaptiveGridService.secondaryView === 'columnFilter') {
-                <ng-template kendoActionSheetFooterTemplate>
-                  <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                  </ng-container>
-                </ng-template>
-              }
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- external editing view -->
-          @if (adaptiveGridService.viewType === 'externalEditing') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-external-form
-                  [controls]="externalEditingSettings.formControls"
-                  [formGroup]="externalEditingSettings.formGroup"
-                  [formSettings]="externalEditingSettings.formSettings"
-                  [actionButtons]="false">
-                </kendo-grid-external-form>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button kendoButton
-                  size="large"
-                  icon="cancel"
-                  [svgIcon]="cancelIcon"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('externalEditingCancelText')}}
-                </button>
-                <button kendoButton
-                  themeColor="primary"
-                  size="large"
-                  icon="save"
-                  [svgIcon]="saveIcon"
-                  (click)="saveEditing()"
-                  [disabled]="!externalEditingSettings.formGroup.valid">
-                  {{messageFor('externalEditingSaveText')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- groupToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'groupToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  (click)="clearGrouping()">
-                  {{messageFor('groupClearButton')}}
-                </button>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  themeColor="primary"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('groupDoneButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        </kendo-actionsheet>
-        
-        <ng-template #actionSheetHeaderTemplate>
-          <div class="k-actionsheet-titlebar-group">
-            @if (adaptiveGridService.secondaryView) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="chevron-left"
-                  [svgIcon]="chevronLeft"
-                  fillMode="flat"
-                  size="large"
-                  [title]="messageFor('adaptiveBackButtonTitle')"
-                  (click)="prevView()">
-                </button>
-              </div>
-            }
-            <div class="k-actionsheet-title">
-              @if (hasTitle) {
-                <div class="k-text-center">
-                  {{actionSheetTitle}}
-                </div>
-              }
-              @if (hasSubtitle) {
-                <div
-                  class="k-actionsheet-subtitle k-text-center">
-                  {{messageFor('columnsSubtitle')}}
-                </div>
-              }
-            </div>
-            @if (hasXCloseIcon) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  fillMode="flat"
-                  size="large"
-                  [title]="messageFor('adaptiveCloseButtonTitle')"
-                  (click)="close()">
-                </button>
-              </div>
-            }
-            @if (hasCheckCloseIcon) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  fillMode="flat"
-                  size="large"
-                  themeColor="primary"
-                  [title]="messageFor('adaptiveCloseButtonTitle')"
-                  (click)="actionSheet.toggle(false)">
-                </button>
-              </div>
-            }
-          </div>
-        </ng-template>
-        
-        <ng-template #actionSheetFooterTemplate>
-          <button
-            #resetButton
-            kendoButton
-            size="large"
-            fillMode="solid"
-            [svgIcon]="arrowRotateCcwIcon"
-            icon="arrow-rotate-ccw"
-            type="button"
-                [kendoEventsOutsideAngular]="{click: cancelChanges, 
-                                            'keydown.enter': cancelChanges,
-                                            'keydown.space': cancelChanges,
-                                            'keydown.tab': onTab
-                                            }"
-            [scope]="this">
-            {{ messageFor('columnsReset') }}
-          </button>
-          <button
-            #applyButton
-            kendoButton
-            type="button"
-            [svgIcon]="checkIcon"
-            icon="check"
-            size="large"
-            fillMode="solid"
-            themeColor="primary"
-                [kendoEventsOutsideAngular]="{click: applyChanges,
-                                            'keydown.enter': applyChanges,
-                                            'keydown.space': applyChanges
-                                            }"
-            [scope]="this">
-            {{ messageFor('columnsApply') }}
-          </button>
-        </ng-template>
-        
-        <ng-template #filterFooterButtons>
-          <button
-            kendoButton
-            size="large"
-            fillMode="solid"
-            (click)="adaptiveGridService.resetFilter()">
-            {{messageFor('filterClearButton')}}
-          </button>
-          <button
-            kendoButton
-            size="large"
-            fillMode="solid"
-            themeColor="primary"
-            [disabled]="adaptiveGridService.filterMenuContainer.disabled"
-            (click)="adaptiveGridService.submitFilter()">
-            {{messageFor('filterFilterButton')}}
-          </button>
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { kind: "component", type: ButtonDirective, 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"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { 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: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-adaptive-renderer',
-                    template: `
-        <kendo-actionsheet
-            [cssClass]="{
-                'k-adaptive-actionsheet': true,
-                'k-actionsheet-fullscreen': adaptiveService.size === 'small',
-                'k-actionsheet-bottom': adaptiveService.size === 'medium'
-            }"
-            [cssStyle]="{
-                height: adaptiveService.size === 'small' ? '100vh' : '60vh'
-            }"
-          [overlayClickClose]="true"
-          (collapse)="adaptiveGridService.reset()">
-        
-          <!-- sortToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'sortToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <div class="k-columnmenu-item-wrapper">
-                    @for (column of columns; track column) {
-                      <kendo-grid-columnmenu-item
-                        [column]="getColumnComponent(column)"
-                        [text]="column.title || getColumnComponent(column).field"
-                        (itemClick)="sortBy(column)">
-                      </kendo-grid-columnmenu-item>
-                    }
-                  </div>
-                </div>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  (click)="clearSorting()">
-                  {{messageFor('sortClearButton')}}
-                </button>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  themeColor="primary"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('sortDoneButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnChooserToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'columnChooserToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-column-chooser-content
-                  #columnChooserContent
-                  [columns]="columns"
-                  [isLast]="true"
-                  [autoSync]="false"
-                  [allowHideAll]="false"
-                  >
-                </kendo-grid-column-chooser-content>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterToolbarTool first view -->
-          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
-            <kendo-actionsheet-view
-              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-              [scope]="this">
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
-                </div>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button kendoButton
-                  icon="filter-clear"
-                  [svgIcon]="filterClearIcon"
-                  size="large"
-                  (click)="clearFilters()">
-                  {{messageFor('filterClearAllButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterToolbarTool second view -->
-          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <ng-container #filterToolbarToolTemplate></ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- filterMenu view -->
-          @if (adaptiveGridService.viewType === 'filterMenu') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate >
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-filter-menu-container
-                  #filterMenuContainer
-                  [column]="adaptiveGridService.column"
-                  [filter]="ctx.grid.filter"
-                  (close)="close()"
-                  (keydown.enter)="$event.stopImmediatePropagation()">
-                </kendo-grid-filter-menu-container>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                </ng-container>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnMenu first view -->
-          @if (adaptiveGridService.viewType === 'columnMenu') {
-            <kendo-actionsheet-view
-              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-              [scope]="this">
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <div class="k-column-menu k-column-menu-lg">
-                  <kendo-grid-columnmenu-container>
-                    @if (hasSort) {
-                      <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-sort>
-                    }
-                    @if (hasLock && !hasPosition) {
-                      <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-lock>
-                    }
-                    @if (hasStick && !hasPosition) {
-                      <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
-                      </kendo-grid-columnmenu-stick>
-                    }
-                    @if (hasPosition) {
-                      <kendo-grid-columnmenu-position
-                        #positionItem
-                        [showLock]="hasLock"
-                        [showStick]="hasStick"
-                        [kendoGridColumnMenuItem]="positionItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToPositionView()">
-                      </kendo-grid-columnmenu-position>
-                    }
-                    @if (hasLock || hasStick || adaptiveGridService.column.sortable) {
-                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
-                    }
-                    @if (hasColumnChooser) {
-                      <kendo-grid-columnmenu-chooser
-                        #chooserItem
-                        [kendoGridColumnMenuItem]="chooserItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToColumnsView()">
-                      </kendo-grid-columnmenu-chooser>
-                    }
-                    @if (hasAutoSizeColumn) {
-                      <kendo-grid-columnmenu-autosize-column
-                        #autoSizeColumnItem
-                        [service]="adaptiveGridService.columnMenuService"
-                        [kendoGridColumnMenuItem]="autoSizeColumnItem"
-                        [column]="adaptiveGridService.column"
-                        >
-                      </kendo-grid-columnmenu-autosize-column>
-                    }
-                    @if (hasAutoSizeAllColumns) {
-                      <kendo-grid-columnmenu-autosize-all-columns
-                        #autoSizeAllColumnsItem
-                        [service]="adaptiveGridService.columnMenuService"
-                        [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
-                        >
-                      </kendo-grid-columnmenu-autosize-all-columns>
-                    }
-                    @if (adaptiveGridService.column.filterable) {
-                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
-                    }
-                    @if (hasFilter) {
-                      <kendo-grid-columnmenu-filter
-                        #filterItem
-                        [kendoGridColumnMenuItem]="filterItem"
-                        [service]="adaptiveGridService.columnMenuService"
-                        [expanded]="false"
-                        (collapse)="navigateToFilterView()">
-                      </kendo-grid-columnmenu-filter>
-                    }
-                  </kendo-grid-columnmenu-container>
-                </div>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- columnMenu second view -->
-          @if (adaptiveGridService.viewType === 'columnMenu') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                @if (adaptiveGridService.secondaryView === 'columnChooser') {
-                  <kendo-grid-column-chooser-content
-                    #columnChooserContent
-                    [columns]="adaptiveGridService.columns"
-                    [isLast]="true"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    >
-                  </kendo-grid-column-chooser-content>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnFilter') {
-                  <kendo-grid-filter-menu-container
-                    [column]="adaptiveGridService.column"
-                    [filter]="ctx.grid.filter"
-                    (close)="close()"
-                    [kendoEventsOutsideAngular]="{'keydown.escape': close}"
-                    [scope]="this">
-                  </kendo-grid-filter-menu-container>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasLock) {
-                  <kendo-grid-columnmenu-lock
-                    [service]="adaptiveGridService.columnMenuService">
-                  </kendo-grid-columnmenu-lock>
-                }
-                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasStick) {
-                  <kendo-grid-columnmenu-stick
-                    [service]="adaptiveGridService.columnMenuService">
-                  </kendo-grid-columnmenu-stick>
-                }
-              </ng-template>
-              @if (adaptiveGridService.secondaryView === 'columnChooser') {
-                <ng-template kendoActionSheetFooterTemplate>
-                  <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                  </ng-container>
-                </ng-template>
-              }
-              @if (adaptiveGridService.secondaryView === 'columnFilter') {
-                <ng-template kendoActionSheetFooterTemplate>
-                  <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                  </ng-container>
-                </ng-template>
-              }
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- external editing view -->
-          @if (adaptiveGridService.viewType === 'externalEditing') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-grid-external-form
-                  [controls]="externalEditingSettings.formControls"
-                  [formGroup]="externalEditingSettings.formGroup"
-                  [formSettings]="externalEditingSettings.formSettings"
-                  [actionButtons]="false">
-                </kendo-grid-external-form>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button kendoButton
-                  size="large"
-                  icon="cancel"
-                  [svgIcon]="cancelIcon"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('externalEditingCancelText')}}
-                </button>
-                <button kendoButton
-                  themeColor="primary"
-                  size="large"
-                  icon="save"
-                  [svgIcon]="saveIcon"
-                  (click)="saveEditing()"
-                  [disabled]="!externalEditingSettings.formGroup.valid">
-                  {{messageFor('externalEditingSaveText')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        
-          <!-- groupToolbarTool view -->
-          @if (adaptiveGridService.viewType === 'groupToolbarTool') {
-            <kendo-actionsheet-view>
-              <ng-template kendoActionSheetHeaderTemplate>
-                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                </ng-container>
-              </ng-template>
-              <ng-template kendoActionSheetContentTemplate>
-                <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
-              </ng-template>
-              <ng-template kendoActionSheetFooterTemplate>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  (click)="clearGrouping()">
-                  {{messageFor('groupClearButton')}}
-                </button>
-                <button
-                  kendoButton
-                  size="large"
-                  fillMode="solid"
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  themeColor="primary"
-                  (click)="actionSheet.toggle(false)">
-                  {{messageFor('groupDoneButton')}}
-                </button>
-              </ng-template>
-            </kendo-actionsheet-view>
-          }
-        </kendo-actionsheet>
-        
-        <ng-template #actionSheetHeaderTemplate>
-          <div class="k-actionsheet-titlebar-group">
-            @if (adaptiveGridService.secondaryView) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="chevron-left"
-                  [svgIcon]="chevronLeft"
-                  fillMode="flat"
-                  size="large"
-                  [title]="messageFor('adaptiveBackButtonTitle')"
-                  (click)="prevView()">
-                </button>
-              </div>
-            }
-            <div class="k-actionsheet-title">
-              @if (hasTitle) {
-                <div class="k-text-center">
-                  {{actionSheetTitle}}
-                </div>
-              }
-              @if (hasSubtitle) {
-                <div
-                  class="k-actionsheet-subtitle k-text-center">
-                  {{messageFor('columnsSubtitle')}}
-                </div>
-              }
-            </div>
-            @if (hasXCloseIcon) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="x"
-                  [svgIcon]="xIcon"
-                  fillMode="flat"
-                  size="large"
-                  [title]="messageFor('adaptiveCloseButtonTitle')"
-                  (click)="close()">
-                </button>
-              </div>
-            }
-            @if (hasCheckCloseIcon) {
-              <div class="k-actionsheet-actions">
-                <button
-                  kendoButton
-                  icon="check"
-                  [svgIcon]="checkIcon"
-                  fillMode="flat"
-                  size="large"
-                  themeColor="primary"
-                  [title]="messageFor('adaptiveCloseButtonTitle')"
-                  (click)="actionSheet.toggle(false)">
-                </button>
-              </div>
-            }
-          </div>
-        </ng-template>
-        
-        <ng-template #actionSheetFooterTemplate>
-          <button
-            #resetButton
-            kendoButton
-            size="large"
-            fillMode="solid"
-            [svgIcon]="arrowRotateCcwIcon"
-            icon="arrow-rotate-ccw"
-            type="button"
-                [kendoEventsOutsideAngular]="{click: cancelChanges, 
-                                            'keydown.enter': cancelChanges,
-                                            'keydown.space': cancelChanges,
-                                            'keydown.tab': onTab
-                                            }"
-            [scope]="this">
-            {{ messageFor('columnsReset') }}
-          </button>
-          <button
-            #applyButton
-            kendoButton
-            type="button"
-            [svgIcon]="checkIcon"
-            icon="check"
-            size="large"
-            fillMode="solid"
-            themeColor="primary"
-                [kendoEventsOutsideAngular]="{click: applyChanges,
-                                            'keydown.enter': applyChanges,
-                                            'keydown.space': applyChanges
-                                            }"
-            [scope]="this">
-            {{ messageFor('columnsApply') }}
-          </button>
-        </ng-template>
-        
-        <ng-template #filterFooterButtons>
-          <button
-            kendoButton
-            size="large"
-            fillMode="solid"
-            (click)="adaptiveGridService.resetFilter()">
-            {{messageFor('filterClearButton')}}
-          </button>
-          <button
-            kendoButton
-            size="large"
-            fillMode="solid"
-            themeColor="primary"
-            [disabled]="adaptiveGridService.filterMenuContainer.disabled"
-            (click)="adaptiveGridService.submitFilter()">
-            {{messageFor('filterFilterButton')}}
-          </button>
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [
-                        NgTemplateOutlet,
-                        ActionSheetComponent,
-                        ActionSheetViewComponent,
-                        FilterToolbarToolComponent,
-                        GroupToolbarToolComponent,
-                        ButtonDirective,
-                        ActionSheetHeaderTemplateDirective,
-                        ActionSheetContentTemplateDirective,
-                        ActionSheetFooterTemplateDirective,
-                        ButtonDirective,
-                        ColumnMenuContainerComponent,
-                        ColumnMenuFilterComponent,
-                        ColumnMenuSortComponent,
-                        ColumnMenuLockComponent,
-                        ColumnMenuStickComponent,
-                        ColumnMenuPositionComponent,
-                        ColumnMenuChooserComponent,
-                        ColumnMenuAutoSizeColumnComponent,
-                        ColumnMenuAutoSizeAllColumnsComponent,
-                        ColumnMenuItemComponent,
-                        ColumnMenuItemDirective,
-                        FilterMenuContainerComponent,
-                        ColumnMenuLockComponent,
-                        EventsOutsideAngularDirective,
-                        FormComponent,
-                        ColumnChooserContentComponent
-                    ]
-                }]
-        }], ctorParameters: () => [{ type: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }], propDecorators: { columnChooserContent: [{
-                type: ViewChild,
-                args: ['columnChooserContent', { static: false }]
-            }], filterToolbarToolTemplate: [{
-                type: ViewChild,
-                args: ['filterToolbarToolTemplate', { read: ViewContainerRef, static: false }]
-            }], filterMenuContainer: [{
-                type: ViewChild,
-                args: ['filterMenuContainer']
-            }], actionSheet: [{
-                type: ViewChild,
-                args: [ActionSheetComponent]
-            }], groupToolbarTool: [{
-                type: ViewChild,
-                args: [GroupToolbarToolComponent]
-            }] } });