@progress/kendo-angular-grid 19.0.0-develop.9 → 19.0.1-develop.1

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

@@ -0,0 +1,1197 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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 { NgFor, NgIf, 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 { ColumnListComponent } from '../column-menu/column-list.component';
+import { ContextService } from '../common/provider.service';
+import { replaceMessagePlaceholder } from '../utils';
+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 } from '@progress/kendo-angular-common';
+import { FormComponent } from '../editing/form';
+import { GroupToolbarToolComponent } from '../rendering/toolbar/tools/group-toolbar-tool.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;
+    actionsClass = 'k-actions';
+    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';
+    }
+    columnList;
+    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.columnList.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.columnList.cancelChanges();
+    }
+    onTab(event) {
+        this.columnList.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: "16.2.12", 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: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnList", first: true, predicate: ["columnList"], 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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'sortToolbarTool'">
+                <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">
+                            <kendo-grid-columnmenu-item *ngFor="let column of columns"
+                                            [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnChooserToolbarTool'">
+                <ng-template kendoActionSheetHeaderTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                    </ng-container>
+                </ng-template>
+                <ng-template kendoActionSheetContentTemplate>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="adaptiveGridService.columns"
+                        [ariaLabel]="messageFor('columns')"
+                        [isLast]="true"
+                        [showActions]="false"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="false"
+                        [actionsClass]="actionsClass"
+                        [allowHideAll]="false"
+                        >
+                    </kendo-grid-columnlist>
+                </ng-template>
+                <ng-template kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                    </ng-container>
+                </ng-template>
+            </kendo-actionsheet-view>
+
+            <!-- filterToolbarTool first view -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'"
+                                    [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterMenu'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'"
+                [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>
+                            <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-sort>
+                            <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-lock>
+                            <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-stick>
+                            <kendo-grid-columnmenu-position
+                                #positionItem
+                                *ngIf="hasPosition"
+                                [showLock]="hasLock"
+                                [showStick]="hasStick"
+                                [kendoGridColumnMenuItem]="positionItem"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [expanded]="false"
+                                (collapse)="navigateToPositionView()">
+                            </kendo-grid-columnmenu-position>
+                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasLock || hasStick || adaptiveGridService.column.sortable" class="k-separator"></span>
+                            <kendo-grid-columnmenu-chooser
+                                #chooserItem
+                                *ngIf="hasColumnChooser"
+                                [kendoGridColumnMenuItem]="chooserItem"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [expanded]="false"
+                                (collapse)="navigateToColumnsView()">
+                            </kendo-grid-columnmenu-chooser>
+                            <kendo-grid-columnmenu-autosize-column
+                                #autoSizeColumnItem
+                                *ngIf="hasAutoSizeColumn"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                                [column]="adaptiveGridService.column"
+                            >
+                            </kendo-grid-columnmenu-autosize-column>
+
+                            <kendo-grid-columnmenu-autosize-all-columns
+                                #autoSizeAllColumnsItem
+                                *ngIf="hasAutoSizeAllColumns"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                            >
+                            </kendo-grid-columnmenu-autosize-all-columns>
+                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="adaptiveGridService.column.filterable" class="k-separator"></span>
+                            <kendo-grid-columnmenu-filter
+                                #filterItem
+                                *ngIf="hasFilter"
+                                [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'">
+                <ng-template kendoActionSheetHeaderTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                    </ng-container>
+                </ng-template>
+
+                <ng-template kendoActionSheetContentTemplate>
+                    <kendo-grid-columnlist
+                        *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
+                        #columnList
+                        [columns]="adaptiveGridService.columns"
+                        [ariaLabel]="messageFor('columns')"
+                        [isLast]="true"
+                        [showActions]="false"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="false"
+                        [actionsClass]="actionsClass"
+                        [allowHideAll]="false"
+                        >
+                    </kendo-grid-columnlist>
+                    <kendo-grid-filter-menu-container
+                        *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
+                        [column]="adaptiveGridService.column"
+                        [filter]="ctx.grid.filter"
+                        (close)="close()"
+                        [kendoEventsOutsideAngular]="{'keydown.escape': close}"
+                        [scope]="this">
+                    </kendo-grid-filter-menu-container>
+                    <kendo-grid-columnmenu-lock
+                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasLock"
+                        [service]="adaptiveGridService.columnMenuService">
+                    </kendo-grid-columnmenu-lock>
+                    <kendo-grid-columnmenu-stick
+                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasStick"
+                        [service]="adaptiveGridService.columnMenuService">
+                    </kendo-grid-columnmenu-stick>
+                </ng-template>
+                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnChooser'" kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                    </ng-container>
+                </ng-template>
+
+                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnFilter'" kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                    </ng-container>
+                </ng-template>
+            </kendo-actionsheet-view>
+
+            <!-- external editing view -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'externalEditing'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'groupToolbarTool'">
+                <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">
+                <div *ngIf="adaptiveGridService.secondaryView" 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">
+                    <div *ngIf="hasTitle" class="k-text-center">
+                       {{actionSheetTitle}}
+                    </div>
+                    <div *ngIf="hasSubtitle"
+                        class="k-actionsheet-subtitle k-text-center">
+                        {{messageFor('columnsSubtitle')}}
+                    </div>
+                </div>
+                <div *ngIf="hasXCloseIcon" class="k-actionsheet-actions">
+                    <button
+                    kendoButton
+                    icon="x"
+                    [svgIcon]="xIcon"
+                    fillMode="flat"
+                    size="large"
+                    [title]="messageFor('adaptiveCloseButtonTitle')"
+                    (click)="close()">
+                    </button>
+                </div>
+                <div *ngIf="hasCheckCloseIcon" 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'sortToolbarTool'">
+                <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">
+                            <kendo-grid-columnmenu-item *ngFor="let column of columns"
+                                            [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnChooserToolbarTool'">
+                <ng-template kendoActionSheetHeaderTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                    </ng-container>
+                </ng-template>
+                <ng-template kendoActionSheetContentTemplate>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="adaptiveGridService.columns"
+                        [ariaLabel]="messageFor('columns')"
+                        [isLast]="true"
+                        [showActions]="false"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="false"
+                        [actionsClass]="actionsClass"
+                        [allowHideAll]="false"
+                        >
+                    </kendo-grid-columnlist>
+                </ng-template>
+                <ng-template kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                    </ng-container>
+                </ng-template>
+            </kendo-actionsheet-view>
+
+            <!-- filterToolbarTool first view -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'"
+                                    [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterMenu'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'"
+                [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>
+                            <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-sort>
+                            <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-lock>
+                            <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
+                            </kendo-grid-columnmenu-stick>
+                            <kendo-grid-columnmenu-position
+                                #positionItem
+                                *ngIf="hasPosition"
+                                [showLock]="hasLock"
+                                [showStick]="hasStick"
+                                [kendoGridColumnMenuItem]="positionItem"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [expanded]="false"
+                                (collapse)="navigateToPositionView()">
+                            </kendo-grid-columnmenu-position>
+                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasLock || hasStick || adaptiveGridService.column.sortable" class="k-separator"></span>
+                            <kendo-grid-columnmenu-chooser
+                                #chooserItem
+                                *ngIf="hasColumnChooser"
+                                [kendoGridColumnMenuItem]="chooserItem"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [expanded]="false"
+                                (collapse)="navigateToColumnsView()">
+                            </kendo-grid-columnmenu-chooser>
+                            <kendo-grid-columnmenu-autosize-column
+                                #autoSizeColumnItem
+                                *ngIf="hasAutoSizeColumn"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                                [column]="adaptiveGridService.column"
+                            >
+                            </kendo-grid-columnmenu-autosize-column>
+
+                            <kendo-grid-columnmenu-autosize-all-columns
+                                #autoSizeAllColumnsItem
+                                *ngIf="hasAutoSizeAllColumns"
+                                [service]="adaptiveGridService.columnMenuService"
+                                [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                            >
+                            </kendo-grid-columnmenu-autosize-all-columns>
+                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="adaptiveGridService.column.filterable" class="k-separator"></span>
+                            <kendo-grid-columnmenu-filter
+                                #filterItem
+                                *ngIf="hasFilter"
+                                [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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'">
+                <ng-template kendoActionSheetHeaderTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                    </ng-container>
+                </ng-template>
+
+                <ng-template kendoActionSheetContentTemplate>
+                    <kendo-grid-columnlist
+                        *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
+                        #columnList
+                        [columns]="adaptiveGridService.columns"
+                        [ariaLabel]="messageFor('columns')"
+                        [isLast]="true"
+                        [showActions]="false"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="false"
+                        [actionsClass]="actionsClass"
+                        [allowHideAll]="false"
+                        >
+                    </kendo-grid-columnlist>
+                    <kendo-grid-filter-menu-container
+                        *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
+                        [column]="adaptiveGridService.column"
+                        [filter]="ctx.grid.filter"
+                        (close)="close()"
+                        [kendoEventsOutsideAngular]="{'keydown.escape': close}"
+                        [scope]="this">
+                    </kendo-grid-filter-menu-container>
+                    <kendo-grid-columnmenu-lock
+                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasLock"
+                        [service]="adaptiveGridService.columnMenuService">
+                    </kendo-grid-columnmenu-lock>
+                    <kendo-grid-columnmenu-stick
+                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasStick"
+                        [service]="adaptiveGridService.columnMenuService">
+                    </kendo-grid-columnmenu-stick>
+                </ng-template>
+                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnChooser'" kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                    </ng-container>
+                </ng-template>
+
+                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnFilter'" kendoActionSheetFooterTemplate>
+                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                    </ng-container>
+                </ng-template>
+            </kendo-actionsheet-view>
+
+            <!-- external editing view -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'externalEditing'">
+                <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 -->
+            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'groupToolbarTool'">
+                <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">
+                <div *ngIf="adaptiveGridService.secondaryView" 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">
+                    <div *ngIf="hasTitle" class="k-text-center">
+                       {{actionSheetTitle}}
+                    </div>
+                    <div *ngIf="hasSubtitle"
+                        class="k-actionsheet-subtitle k-text-center">
+                        {{messageFor('columnsSubtitle')}}
+                    </div>
+                </div>
+                <div *ngIf="hasXCloseIcon" class="k-actionsheet-actions">
+                    <button
+                    kendoButton
+                    icon="x"
+                    [svgIcon]="xIcon"
+                    fillMode="flat"
+                    size="large"
+                    [title]="messageFor('adaptiveCloseButtonTitle')"
+                    (click)="close()">
+                    </button>
+                </div>
+                <div *ngIf="hasCheckCloseIcon" 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: [
+                        NgIf,
+                        NgFor,
+                        NgTemplateOutlet,
+                        ActionSheetComponent,
+                        ActionSheetViewComponent,
+                        FilterToolbarToolComponent,
+                        GroupToolbarToolComponent,
+                        ButtonDirective,
+                        ActionSheetHeaderTemplateDirective,
+                        ActionSheetContentTemplateDirective,
+                        ActionSheetFooterTemplateDirective,
+                        ButtonDirective,
+                        ColumnMenuContainerComponent,
+                        ColumnMenuFilterComponent,
+                        ColumnMenuSortComponent,
+                        ColumnMenuLockComponent,
+                        ColumnMenuStickComponent,
+                        ColumnMenuPositionComponent,
+                        ColumnMenuChooserComponent,
+                        ColumnMenuAutoSizeColumnComponent,
+                        ColumnMenuAutoSizeAllColumnsComponent,
+                        ColumnMenuItemComponent,
+                        ColumnMenuItemDirective,
+                        ColumnListComponent,
+                        FilterMenuContainerComponent,
+                        ColumnMenuLockComponent,
+                        EventsOutsideAngularDirective,
+                        FormComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }]; }, propDecorators: { columnList: [{
+                type: ViewChild,
+                args: ['columnList', { 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]
+            }] } });