@progress/kendo-angular-grid 7.0.0-dev.202201261657 → 7.0.0-dev.202204150740

package/esm2015/grouping/group-header.component.js

@@ -0,0 +1,244 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { columnsSpan } from '../columns/column-common';
+import { getGroupRowArgs } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./groups.service";
+import * as i2 from "./group-info.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "@angular/common";
+import * as i5 from "../navigation/logical-cell.directive";
+import * as i6 from "../rendering/common/template-context.directive";
+import * as i7 from "../rendering/common/field-accessor.pipe";
+/**
+ * @hidden
+ */
+export class GroupHeaderComponent {
+    constructor(groupsService, groupInfoService, localization) {
+        this.groupsService = groupsService;
+        this.groupInfoService = groupInfoService;
+        this.localization = localization;
+        this.skipGroupDecoration = false;
+        this.hasDetails = false;
+        this.totalColumnsCount = 0;
+        this.groups = [];
+        this.isExpanded = false;
+    }
+    get groupItemClass() {
+        return true;
+    }
+    ngDoCheck() {
+        const groupArgs = {
+            group: this.item.data,
+            groupIndex: this.item.index,
+            parentGroup: getGroupRowArgs(this.item.parentGroup)
+        };
+        this.isExpanded = this.groupsService.isExpanded(groupArgs);
+    }
+    prefixGroupCell(item) {
+        return new Array(item.level);
+    }
+    toggleGroup(item) {
+        this.groupsService.toggleRow(item);
+        return false;
+    }
+    groupSpan(item) {
+        const groupCount = (this.groups || []).length;
+        const detailOffset = this.hasDetails ? 1 : 0;
+        if (this.hasGroupHeaderColumn) {
+            return groupCount + 1 + detailOffset - item.level;
+        }
+        let columnCount = columnsSpan(this.columns);
+        if (this.skipGroupDecoration) {
+            return columnCount;
+        }
+        return groupCount + columnCount + detailOffset - item.level;
+    }
+    logicalColSpan() {
+        return this.skipGroupDecoration ? 1 : this.totalColumnsCount;
+    }
+    ariaRole() {
+        if (this.skipGroupDecoration) {
+            return 'presentation';
+        }
+        return 'gridcell';
+    }
+    formatForGroup(item) {
+        return this.groupInfoService.formatForGroup(item);
+    }
+    groupTitle(item) {
+        return this.groupInfoService.groupTitle(item);
+    }
+    groupHeaderTemplate(item) {
+        return this.groupInfoService.groupHeaderTemplate(item);
+    }
+    get groupButtonTitle() {
+        const messageKey = this.isExpanded ? 'groupCollapse' : 'groupExpand';
+        return this.localization.get(messageKey);
+    }
+}
+GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: i1.GroupsService }, { token: i2.GroupInfoService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass" } }, ngImport: i0, template: `
+        <ng-container *ngIf="!skipGroupDecoration">
+            <td class="k-group-cell"
+                role="presentation"
+                *ngFor="let g of prefixGroupCell(item)"></td>
+        </ng-container>
+        <td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
+            [attr.role]="ariaRole()"
+            aria-selected="false"
+            [attr.aria-expanded]="isExpanded"
+            kendoGridLogicalCell
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="0"
+            [logicalSlaveCell]="skipGroupDecoration"
+            [groupItem]="item"
+            [colSpan]="logicalColSpan()">
+            <p class="k-reset">
+                <ng-container *ngIf="!skipGroupDecoration">
+                    <a href="#" tabindex="-1" (click)="toggleGroup(item)"
+                        class="k-icon"
+                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [attr.title]="groupButtonTitle"
+                        [attr.aria-label]="groupButtonTitle">
+                    </a>
+                    <ng-container *ngIf="!groupHeaderTemplate(item)">
+                    {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                    </ng-container>
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: groupHeaderTemplate(item),
+                            group: item.data,
+                            aggregates: item.data?.aggregates,
+                            value: item.data?.value,
+                            field: item.data?.field,
+                            index: item.index,
+                            expanded: isExpanded,
+                            $implicit: item.data
+                            }">
+                    </ng-template>
+                </ng-container>
+            </p>
+        </td>
+        <ng-container *ngIf="hasGroupHeaderColumn">
+            <td *ngFor="let column of groupHeaderColumns; let index = index"
+                role="gridcell"
+                aria-selected="false"
+                kendoGridLogicalCell
+                [logicalRowIndex]="logicalRowIndex"
+                [logicalColIndex]="index + 1"
+                [logicalSlaveCell]="false"
+                [groupItem]="item"
+                [colSpan]="1"
+            >
+                <ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                    [ngTemplateOutletContext]="{
+                        group: item.data,
+                        aggregates: item.data?.aggregates,
+                        value: item.data?.value,
+                        field: item.data?.field,
+                        index: item.index,
+                        $implicit: item.data
+                        }">
+                </ng-template>
+            </td>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": i7.FieldAccessorPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoGridGroupHeader]',
+                    template: `
+        <ng-container *ngIf="!skipGroupDecoration">
+            <td class="k-group-cell"
+                role="presentation"
+                *ngFor="let g of prefixGroupCell(item)"></td>
+        </ng-container>
+        <td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
+            [attr.role]="ariaRole()"
+            aria-selected="false"
+            [attr.aria-expanded]="isExpanded"
+            kendoGridLogicalCell
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="0"
+            [logicalSlaveCell]="skipGroupDecoration"
+            [groupItem]="item"
+            [colSpan]="logicalColSpan()">
+            <p class="k-reset">
+                <ng-container *ngIf="!skipGroupDecoration">
+                    <a href="#" tabindex="-1" (click)="toggleGroup(item)"
+                        class="k-icon"
+                        [ngClass]="{ 'k-i-collapse': isExpanded, 'k-i-expand': !isExpanded }" role="presentation"
+                        [attr.title]="groupButtonTitle"
+                        [attr.aria-label]="groupButtonTitle">
+                    </a>
+                    <ng-container *ngIf="!groupHeaderTemplate(item)">
+                    {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                    </ng-container>
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: groupHeaderTemplate(item),
+                            group: item.data,
+                            aggregates: item.data?.aggregates,
+                            value: item.data?.value,
+                            field: item.data?.field,
+                            index: item.index,
+                            expanded: isExpanded,
+                            $implicit: item.data
+                            }">
+                    </ng-template>
+                </ng-container>
+            </p>
+        </td>
+        <ng-container *ngIf="hasGroupHeaderColumn">
+            <td *ngFor="let column of groupHeaderColumns; let index = index"
+                role="gridcell"
+                aria-selected="false"
+                kendoGridLogicalCell
+                [logicalRowIndex]="logicalRowIndex"
+                [logicalColIndex]="index + 1"
+                [logicalSlaveCell]="false"
+                [groupItem]="item"
+                [colSpan]="1"
+            >
+                <ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                    [ngTemplateOutletContext]="{
+                        group: item.data,
+                        aggregates: item.data?.aggregates,
+                        value: item.data?.value,
+                        field: item.data?.field,
+                        index: item.index,
+                        $implicit: item.data
+                        }">
+                </ng-template>
+            </td>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GroupsService }, { type: i2.GroupInfoService }, { type: i3.LocalizationService }]; }, propDecorators: { rowIndex: [{
+                type: Input
+            }], logicalRowIndex: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], skipGroupDecoration: [{
+                type: Input
+            }], hasDetails: [{
+                type: Input
+            }], totalColumnsCount: [{
+                type: Input
+            }], hasGroupHeaderColumn: [{
+                type: Input
+            }], groupHeaderColumns: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], groupItemClass: [{
+                type: HostBinding,
+                args: ['class.k-grouping-row']
+            }] } });

package/esm2015/grouping/group-indicator.component.js

@@ -0,0 +1,74 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class GroupIndicatorComponent {
+    constructor() {
+        this.directionChange = new EventEmitter();
+        this.remove = new EventEmitter();
+    }
+    get groupIndicatorClass() {
+        return true;
+    }
+    get dir() {
+        return this.group.dir ? this.group.dir : "asc";
+    }
+    toggleDirection() {
+        this.directionChange.emit({
+            dir: this.dir === "asc" ? "desc" : "asc",
+            field: this.group.field
+        });
+        return false;
+    }
+    removeDescriptor() {
+        this.remove.emit({
+            dir: this.group.dir,
+            field: this.group.field
+        });
+        return false;
+    }
+}
+GroupIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: { group: "group", groupTitle: "groupTitle" }, outputs: { directionChange: "directionChange", remove: "remove" }, host: { properties: { "class.k-group-indicator": "this.groupIndicatorClass" } }, ngImport: i0, template: `
+        <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
+            <span class="k-icon"
+                [class.k-i-sort-asc-sm]="dir === 'asc'"
+                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+            {{groupTitle}}</a>
+        <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
+            <span class="k-button-icon k-icon k-i-group-delete"></span>
+        </a>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[kendoGroupIndicator]',
+                    template: `
+        <a href="#" class="k-link" tabindex="-1" (click)="toggleDirection()">
+            <span class="k-icon"
+                [class.k-i-sort-asc-sm]="dir === 'asc'"
+                [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
+            {{groupTitle}}</a>
+        <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
+            <span class="k-button-icon k-icon k-i-group-delete"></span>
+        </a>
+    `
+                }]
+        }], propDecorators: { directionChange: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], group: [{
+                type: Input
+            }], groupTitle: [{
+                type: Input
+            }], groupIndicatorClass: [{
+                type: HostBinding,
+                args: ["class.k-group-indicator"]
+            }] } });

package/esm2015/grouping/group-key.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/grouping/group-panel.component.js

@@ -0,0 +1,234 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, QueryList, ViewChildren } from '@angular/core';
+import { Subscription, from, merge } from "rxjs";
+import { and, isNullOrEmptyString, observe, or } from '../utils';
+import { DropTargetDirective } from '../dragdrop/drop-target.directive';
+import { position, isTargetBefore } from '../dragdrop/common';
+import { tap, filter, switchMapTo, takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../dragdrop/drag-hint.service";
+import * as i2 from "../dragdrop/drop-cue.service";
+import * as i3 from "./group-info.service";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "./group-indicator.component";
+import * as i6 from "@angular/common";
+import * as i7 from "../dragdrop/drop-target.directive";
+import * as i8 from "../dragdrop/draggable-column.directive";
+import * as i9 from "@progress/kendo-angular-common";
+const withoutField = ({ field }) => isNullOrEmptyString(field);
+const alreadyGrouped = ({ groups, field }) => groups.some(group => group.field === field);
+const overSameTarget = ({ target, field }) => target.field === field;
+const overLastTarget = ({ target }) => target.lastTarget;
+const isLastGroup = ({ groups, field }) => groups.map(group => group.field).indexOf(field) === groups.length - 1;
+const isNotGroupable = (groupsService) => ({ field }) => !groupsService.isGroupable(field);
+const columnRules = (groupService) => or(withoutField, alreadyGrouped, isNotGroupable(groupService));
+const indicatorRules = or(overSameTarget, and(overLastTarget, isLastGroup));
+/**
+ * @hidden
+ */
+export class GroupPanelComponent {
+    constructor(hint, cue, groupInfoService, localization, cd) {
+        this.hint = hint;
+        this.cue = cue;
+        this.groupInfoService = groupInfoService;
+        this.localization = localization;
+        this.cd = cd;
+        this.change = new EventEmitter();
+        this.groups = [];
+        this.dropTargets = new QueryList();
+        this.groupTitles = [];
+        this.subscription = new Subscription();
+    }
+    get groupHeaderClass() {
+        return true;
+    }
+    set text(value) {
+        this.emptyText = value;
+    }
+    get text() {
+        return this.emptyText ? this.emptyText : this.localization.get('groupPanelEmpty');
+    }
+    ngAfterViewInit() {
+        this.subscription.add(observe(this.dropTargets)
+            .subscribe(this.attachTargets.bind(this)));
+    }
+    ngOnInit() {
+        this.subscription.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+    }
+    ngDoCheck() {
+        const currentTitles = this.groups.map(group => this.groupInfoService.groupTitle(group));
+        if (currentTitles.length !== this.groupTitles.length || currentTitles.some((current, idx) => current !== this.groupTitles[idx])) {
+            this.groupTitles = currentTitles;
+            this.cd.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        if (this.targetSubscription) {
+            this.targetSubscription.unsubscribe();
+        }
+    }
+    directionChange(group) {
+        const index = this.groups.findIndex(x => x.field === group.field);
+        const groups = [...this.groups.slice(0, index), group, ...this.groups.slice(index + 1)];
+        this.change.emit(groups);
+    }
+    insert(field, index) {
+        const groups = this.groups.filter(x => x.field !== field);
+        if (groups.length || this.groups.length === 0) {
+            this.change.emit([...groups.slice(0, index), { field: field }, ...groups.slice(index)]);
+        }
+    }
+    remove(group) {
+        this.change.emit(this.groups.filter(x => x.field !== group.field));
+    }
+    canDrop(draggable, target) {
+        const isIndicator = draggable.type === 'groupIndicator';
+        const rules = isIndicator
+            ? indicatorRules
+            : columnRules(this.groupInfoService);
+        return !rules({
+            field: draggable.field,
+            groups: this.groups,
+            target
+        });
+    }
+    attachTargets() {
+        if (this.targetSubscription) {
+            this.targetSubscription.unsubscribe();
+        }
+        this.targetSubscription = new Subscription();
+        const enterStream = this.dropTargets
+            .reduce((acc, target) => merge(acc, target.enter), from([]));
+        const leaveStream = this.dropTargets
+            .reduce((acc, target) => merge(acc, target.leave), from([]));
+        const dropStream = this.dropTargets
+            .reduce((acc, target) => merge(acc, target.drop), from([]));
+        this.targetSubscription.add(enterStream.pipe(tap(_ => this.hint.removeLock()), filter(({ draggable, target }) => this.canDrop(draggable.context, target.context)), tap(this.enter.bind(this)), switchMapTo(dropStream.pipe(takeUntil(leaveStream.pipe(tap(this.leave.bind(this))))))).subscribe(this.drop.bind(this)));
+    }
+    enter({ draggable, target }) {
+        this.hint.enable();
+        let before = target.context.lastTarget || isTargetBefore(draggable.element.nativeElement, target.element.nativeElement);
+        if (this.localization.rtl) {
+            before = !before;
+        }
+        this.cue.position(position(target.element.nativeElement, before));
+    }
+    leave() {
+        this.hint.disable();
+        this.cue.hide();
+    }
+    drop({ target, draggable }) {
+        const field = draggable.context.field;
+        const index = this.dropTargets.toArray().indexOf(target);
+        this.insert(field, index);
+    }
+}
+GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupPanelComponent, deps: [{ token: i1.DragHintService }, { token: i2.DropCueService }, { token: i3.GroupInfoService }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass", "class.k-grouping-header-flex": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+        <ng-container *ngIf="groups.length === 0">
+            <div
+                class="k-indicator-container"
+                [context]="{
+                    lastTarget: true
+                }"
+                kendoDropTarget>
+                {{ text }}
+            </div>
+        </ng-container>
+        <div *ngFor="let group of groups; let index = index;"
+            class="k-indicator-container"
+            [context]="{
+                field: group.field
+            }"
+            kendoDropTarget>
+            <div
+                kendoDraggableColumn
+                [enableDrag]="true"
+                [context]="{
+                    field: group.field,
+                    type: 'groupIndicator',
+                    hint:  groupTitles[index]
+                }"
+                kendoGroupIndicator
+                kendoDraggable
+                [group]="group"
+                [groupTitle]="groupTitles[index]"
+                (directionChange)="directionChange($event)"
+                (remove)="remove($event)">
+            </div>
+        </div>
+        <div class="k-indicator-container"
+            *ngIf="groups.length !== 0"
+            [context]="{
+                lastTarget: true
+            }"
+            kendoDropTarget>&nbsp;</div>
+    `, isInline: true, components: [{ type: i5.GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: ["group", "groupTitle"], outputs: ["directionChange", "remove"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i9.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GroupPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-grid-group-panel',
+                    template: `
+        <ng-container *ngIf="groups.length === 0">
+            <div
+                class="k-indicator-container"
+                [context]="{
+                    lastTarget: true
+                }"
+                kendoDropTarget>
+                {{ text }}
+            </div>
+        </ng-container>
+        <div *ngFor="let group of groups; let index = index;"
+            class="k-indicator-container"
+            [context]="{
+                field: group.field
+            }"
+            kendoDropTarget>
+            <div
+                kendoDraggableColumn
+                [enableDrag]="true"
+                [context]="{
+                    field: group.field,
+                    type: 'groupIndicator',
+                    hint:  groupTitles[index]
+                }"
+                kendoGroupIndicator
+                kendoDraggable
+                [group]="group"
+                [groupTitle]="groupTitles[index]"
+                (directionChange)="directionChange($event)"
+                (remove)="remove($event)">
+            </div>
+        </div>
+        <div class="k-indicator-container"
+            *ngIf="groups.length !== 0"
+            [context]="{
+                lastTarget: true
+            }"
+            kendoDropTarget>&nbsp;</div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DragHintService }, { type: i2.DropCueService }, { type: i3.GroupInfoService }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
+                type: Output
+            }], groupHeaderClass: [{
+                type: HostBinding,
+                args: ["class.k-grouping-header"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-grouping-header-flex"]
+            }], text: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], dropTargets: [{
+                type: ViewChildren,
+                args: [DropTargetDirective]
+            }] } });

package/esm2015/grouping/group-rows-args.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};