@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
909 lines (884 loc) • 63.5 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { 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 { 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 * 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