@progress/kendo-angular-grid 11.0.0-develop.88 → 11.0.0-develop.90

package/esm2020/dragdrop/drag-hint.service.mjs

@@ -39,7 +39,7 @@ export class DragHintService {
         decorate(this.dom);
         const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
         this.dom.innerHTML = `
-            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
+            <span class="k-icon k-drag-status k-i-cancel">
                 <span class="k-icon k-icon-modifier"></span>
             </span>
             ${safeTitle}

package/esm2020/grouping/group-panel.component.mjs

@@ -17,7 +17,7 @@ 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 i5 from "@progress/kendo-angular-buttons";
 import * as i6 from "@angular/common";
 import * as i7 from "../dragdrop/drop-target.directive";
 import * as i8 from "../dragdrop/draggable-column.directive";
@@ -77,7 +77,12 @@ export class GroupPanelComponent {
             this.targetSubscription.unsubscribe();
         }
     }
+    getDirectionIcon(group) {
+        return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
+    }
     directionChange(group) {
+        group.dir = group.dir ? group.dir : "asc";
+        group.dir = group.dir === 'asc' ? 'desc' : 'asc';
         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);
@@ -134,90 +139,98 @@ export class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", 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"
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [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 });
+            kendoDropTarget
+        >&nbsp;</div>
+    `, isInline: true, components: [{ type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], 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: "13.3.11", 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"
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
-            kendoDropTarget>&nbsp;</div>
+            kendoDropTarget
+        >&nbsp;</div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.DragHintService }, { type: i2.DropCueService }, { type: i3.GroupInfoService }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
@@ -225,9 +238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], groupHeaderClass: [{
                 type: HostBinding,
                 args: ["class.k-grouping-header"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-grouping-header-flex"]
             }], text: [{
                 type: Input
             }], groups: [{

package/esm2020/grouping/group.module.mjs

@@ -9,17 +9,16 @@ import { GroupHeaderColumnTemplateDirective } from './group-header-column-templa
 import { GroupHeaderComponent } from './group-header.component';
 import { GroupFooterTemplateDirective } from './group-footer-template.directive';
 import { GroupPanelComponent } from './group-panel.component';
-import { GroupIndicatorComponent } from './group-indicator.component';
 import { SharedModule } from "../shared.module";
 import { DragAndDropModule } from '../dragdrop/drag-and-drop.module';
+import { ChipModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const exportedModules = [
     GroupHeaderTemplateDirective,
     GroupHeaderColumnTemplateDirective,
     GroupFooterTemplateDirective,
     GroupHeaderComponent,
-    GroupPanelComponent,
-    GroupIndicatorComponent
+    GroupPanelComponent
 ];
 /**
  * @hidden
@@ -38,19 +37,17 @@ GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent], imports: [CommonModule, SharedModule, DragAndDropModule], exports: [GroupHeaderTemplateDirective,
+        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule], exports: [GroupHeaderTemplateDirective,
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent] });
-GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule]] });
+        GroupPanelComponent] });
+GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule, ChipModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [exportedModules],
                     exports: [exportedModules],
-                    imports: [CommonModule, SharedModule, DragAndDropModule]
+                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule]
                 }]
         }] });

package/esm2020/index.mjs

@@ -201,7 +201,6 @@ export { PagerInputDirective } from './pager/pager-input.directive';
 export { PagerDropDownListDirective } from './pager/pager-dropdown.directive';
 export { GroupHeaderComponent } from './grouping/group-header.component';
 export { GroupPanelComponent } from './grouping/group-panel.component';
-export { GroupIndicatorComponent } from './grouping/group-indicator.component';
 export { SizingOptionsService } from './layout/sizing-options.service';
 export { GridTableDirective } from './rendering/grid-table.directive';
 // Needed as it is an optional injection of the FilterService

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672997078,
+    publishDate: 1673012733,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -20,7 +20,7 @@ import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
 import * as i4$1 from '@progress/kendo-angular-buttons';
-import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
+import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
@@ -2855,7 +2855,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672997078,
+    publishDate: 1673012733,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -6309,7 +6309,7 @@ class DragHintService {
         decorate(this.dom);
         const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
         this.dom.innerHTML = `
-            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
+            <span class="k-icon k-drag-status k-i-cancel">
                 <span class="k-icon k-icon-modifier"></span>
             </span>
             ${safeTitle}
@@ -8276,75 +8276,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-/**
- * @hidden
- */
-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: "13.3.11", ngImport: i0, type: GroupIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `
-                }]
-        }], propDecorators: { directionChange: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], group: [{
-                type: Input
-            }], groupTitle: [{
-                type: Input
-            }], groupIndicatorClass: [{
-                type: HostBinding,
-                args: ["class.k-group-indicator"]
-            }] } });
-
 /**
  * @hidden
  */
@@ -8516,7 +8447,12 @@ class GroupPanelComponent {
             this.targetSubscription.unsubscribe();
         }
     }
+    getDirectionIcon(group) {
+        return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
+    }
     directionChange(group) {
+        group.dir = group.dir ? group.dir : "asc";
+        group.dir = group.dir === 'asc' ? 'desc' : 'asc';
         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);
@@ -8573,90 +8509,98 @@ class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
-            kendoDropTarget>&nbsp;</div>
-    `, isInline: true, components: [{ type: GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: ["group", "groupTitle"], outputs: ["directionChange", "remove"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            kendoDropTarget
+        >&nbsp;</div>
+    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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"
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
-            kendoDropTarget>&nbsp;</div>
+            kendoDropTarget
+        >&nbsp;</div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
@@ -8664,9 +8608,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], groupHeaderClass: [{
                 type: HostBinding,
                 args: ["class.k-grouping-header"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-grouping-header-flex"]
             }], text: [{
                 type: Input
             }], groups: [{
@@ -23604,8 +23545,7 @@ const exportedModules$4 = [
     GroupHeaderColumnTemplateDirective,
     GroupFooterTemplateDirective,
     GroupHeaderComponent,
-    GroupPanelComponent,
-    GroupIndicatorComponent
+    GroupPanelComponent
 ];
 /**
  * @hidden
@@ -23624,20 +23564,18 @@ GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent], imports: [CommonModule, SharedModule, DragAndDropModule], exports: [GroupHeaderTemplateDirective,
+        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule], exports: [GroupHeaderTemplateDirective,
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent] });
-GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule]] });
+        GroupPanelComponent] });
+GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule, ChipModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [exportedModules$4],
                     exports: [exportedModules$4],
-                    imports: [CommonModule, SharedModule, DragAndDropModule]
+                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule]
                 }]
         }] });
 
@@ -26406,5 +26344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
 

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -20,7 +20,7 @@ import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
 import * as i4$1 from '@progress/kendo-angular-buttons';
-import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
+import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
@@ -2849,7 +2849,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672997078,
+    publishDate: 1673012733,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -6266,7 +6266,7 @@ class DragHintService {
         decorate(this.dom);
         const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
         this.dom.innerHTML = `
-            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
+            <span class="k-icon k-drag-status k-i-cancel">
                 <span class="k-icon k-icon-modifier"></span>
             </span>
             ${safeTitle}
@@ -8229,75 +8229,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-/**
- * @hidden
- */
-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: "13.3.11", ngImport: i0, type: GroupIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `
-                }]
-        }], propDecorators: { directionChange: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], group: [{
-                type: Input
-            }], groupTitle: [{
-                type: Input
-            }], groupIndicatorClass: [{
-                type: HostBinding,
-                args: ["class.k-group-indicator"]
-            }] } });
-
 /**
  * @hidden
  */
@@ -8467,7 +8398,12 @@ class GroupPanelComponent {
             this.targetSubscription.unsubscribe();
         }
     }
+    getDirectionIcon(group) {
+        return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
+    }
     directionChange(group) {
+        group.dir = group.dir ? group.dir : "asc";
+        group.dir = group.dir === 'asc' ? 'desc' : 'asc';
         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);
@@ -8524,90 +8460,98 @@ class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
-            kendoDropTarget>&nbsp;</div>
-    `, isInline: true, components: [{ type: GroupIndicatorComponent, selector: "[kendoGroupIndicator]", inputs: ["group", "groupTitle"], outputs: ["directionChange", "remove"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            kendoDropTarget
+        >&nbsp;</div>
+    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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"
+        <div
+            *ngIf="groups.length === 0"
+            class="k-grouping-drop-container"
             [context]="{
-                field: group.field
+                lastTarget: true
             }"
-            kendoDropTarget>
-            <div
+            kendoDropTarget
+        >
+            {{ text }}
+        </div>
+
+        <kendo-chiplist
+            *ngIf="groups.length !== 0"
+        >
+            <kendo-chip
+                *ngFor="let group of groups; let index = index;"
+                kendoDropTarget
                 kendoDraggableColumn
+                kendoDraggable
                 [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"
+                [label]="groupTitles[index]"
+                [removable]="true"
+                [icon]="getDirectionIcon(group)"
+                (contentClick)="directionChange(group)"
+                (remove)="remove(group)"
+            >
+            </kendo-chip>
+        </kendo-chiplist>
+
+        <div
             *ngIf="groups.length !== 0"
+            class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
-            kendoDropTarget>&nbsp;</div>
+            kendoDropTarget
+        >&nbsp;</div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
@@ -8615,9 +8559,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], groupHeaderClass: [{
                 type: HostBinding,
                 args: ["class.k-grouping-header"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-grouping-header-flex"]
             }], text: [{
                 type: Input
             }], groups: [{
@@ -23536,8 +23477,7 @@ const exportedModules$4 = [
     GroupHeaderColumnTemplateDirective,
     GroupFooterTemplateDirective,
     GroupHeaderComponent,
-    GroupPanelComponent,
-    GroupIndicatorComponent
+    GroupPanelComponent
 ];
 /**
  * @hidden
@@ -23556,20 +23496,18 @@ GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent], imports: [CommonModule, SharedModule, DragAndDropModule], exports: [GroupHeaderTemplateDirective,
+        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule], exports: [GroupHeaderTemplateDirective,
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent,
-        GroupIndicatorComponent] });
-GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule]] });
+        GroupPanelComponent] });
+GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule, ChipModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [exportedModules$4],
                     exports: [exportedModules$4],
-                    imports: [CommonModule, SharedModule, DragAndDropModule]
+                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule]
                 }]
         }] });
 
@@ -26326,5 +26264,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
 

package/grouping/group-panel.component.d.ts

@@ -35,6 +35,7 @@ export declare class GroupPanelComponent implements OnDestroy, OnInit, DoCheck {
     ngOnInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
+    getDirectionIcon(group: GroupDescriptor): string;
     directionChange(group: GroupDescriptor): void;
     insert(field: string, index: number): void;
     remove(group: GroupDescriptor): void;

package/grouping/group.module.d.ts

@@ -8,16 +8,16 @@ import * as i2 from "./group-header-column-template.directive";
 import * as i3 from "./group-footer-template.directive";
 import * as i4 from "./group-header.component";
 import * as i5 from "./group-panel.component";
-import * as i6 from "./group-indicator.component";
-import * as i7 from "@angular/common";
-import * as i8 from "../shared.module";
-import * as i9 from "../dragdrop/drag-and-drop.module";
+import * as i6 from "@angular/common";
+import * as i7 from "../shared.module";
+import * as i8 from "../dragdrop/drag-and-drop.module";
+import * as i9 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
 export declare class GroupModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<GroupModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GroupModule, [typeof i1.GroupHeaderTemplateDirective, typeof i2.GroupHeaderColumnTemplateDirective, typeof i3.GroupFooterTemplateDirective, typeof i4.GroupHeaderComponent, typeof i5.GroupPanelComponent, typeof i6.GroupIndicatorComponent], [typeof i7.CommonModule, typeof i8.SharedModule, typeof i9.DragAndDropModule], [typeof i1.GroupHeaderTemplateDirective, typeof i2.GroupHeaderColumnTemplateDirective, typeof i3.GroupFooterTemplateDirective, typeof i4.GroupHeaderComponent, typeof i5.GroupPanelComponent, typeof i6.GroupIndicatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GroupModule, [typeof i1.GroupHeaderTemplateDirective, typeof i2.GroupHeaderColumnTemplateDirective, typeof i3.GroupFooterTemplateDirective, typeof i4.GroupHeaderComponent, typeof i5.GroupPanelComponent], [typeof i6.CommonModule, typeof i7.SharedModule, typeof i8.DragAndDropModule, typeof i9.ChipModule], [typeof i1.GroupHeaderTemplateDirective, typeof i2.GroupHeaderColumnTemplateDirective, typeof i3.GroupFooterTemplateDirective, typeof i4.GroupHeaderComponent, typeof i5.GroupPanelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GroupModule>;
 }

package/index.d.ts

@@ -237,7 +237,6 @@ export { PagerInputDirective } from './pager/pager-input.directive';
 export { PagerDropDownListDirective } from './pager/pager-dropdown.directive';
 export { GroupHeaderComponent } from './grouping/group-header.component';
 export { GroupPanelComponent } from './grouping/group-panel.component';
-export { GroupIndicatorComponent } from './grouping/group-indicator.component';
 export { SizingOptionsService } from './layout/sizing-options.service';
 export { GridTableDirective } from './rendering/grid-table.directive';
 export { MenuTabbingService } from './filtering/menu/menu-tabbing.service';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "11.0.0-develop.88",
+  "version": "11.0.0-develop.90",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -34,19 +34,19 @@
     "@progress/kendo-drawing": "^1.0.0",
     "@progress/kendo-file-saver": "^1.0.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.0.0-develop.88",
-    "@progress/kendo-angular-common": "11.0.0-develop.88",
-    "@progress/kendo-angular-dateinputs": "11.0.0-develop.88",
-    "@progress/kendo-angular-dropdowns": "11.0.0-develop.88",
-    "@progress/kendo-angular-excel-export": "11.0.0-develop.88",
-    "@progress/kendo-angular-icons": "11.0.0-develop.88",
-    "@progress/kendo-angular-inputs": "11.0.0-develop.88",
-    "@progress/kendo-angular-intl": "11.0.0-develop.88",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.88",
-    "@progress/kendo-angular-label": "11.0.0-develop.88",
-    "@progress/kendo-angular-pdf-export": "11.0.0-develop.88",
-    "@progress/kendo-angular-popup": "11.0.0-develop.88",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.88",
+    "@progress/kendo-angular-buttons": "11.0.0-develop.90",
+    "@progress/kendo-angular-common": "11.0.0-develop.90",
+    "@progress/kendo-angular-dateinputs": "11.0.0-develop.90",
+    "@progress/kendo-angular-dropdowns": "11.0.0-develop.90",
+    "@progress/kendo-angular-excel-export": "11.0.0-develop.90",
+    "@progress/kendo-angular-icons": "11.0.0-develop.90",
+    "@progress/kendo-angular-inputs": "11.0.0-develop.90",
+    "@progress/kendo-angular-intl": "11.0.0-develop.90",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.90",
+    "@progress/kendo-angular-label": "11.0.0-develop.90",
+    "@progress/kendo-angular-pdf-export": "11.0.0-develop.90",
+    "@progress/kendo-angular-popup": "11.0.0-develop.90",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.90",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/esm2020/grouping/group-indicator.component.mjs

@@ -1,74 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2023 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: "13.3.11", ngImport: i0, type: GroupIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GroupIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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-small]="dir === 'asc'"
-                [class.k-i-sort-desc-small]="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-x"></span>
-        </a>
-    `
-                }]
-        }], propDecorators: { directionChange: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], group: [{
-                type: Input
-            }], groupTitle: [{
-                type: Input
-            }], groupIndicatorClass: [{
-                type: HostBinding,
-                args: ["class.k-group-indicator"]
-            }] } });

package/grouping/group-indicator.component.d.ts

@@ -1,22 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2023 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
-import { GroupDescriptor } from '@progress/kendo-data-query';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export declare class GroupIndicatorComponent {
-    directionChange: EventEmitter<GroupDescriptor>;
-    remove: EventEmitter<GroupDescriptor>;
-    group: GroupDescriptor;
-    groupTitle: string;
-    get groupIndicatorClass(): boolean;
-    get dir(): string;
-    toggleDirection(): boolean;
-    removeDescriptor(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GroupIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GroupIndicatorComponent, "[kendoGroupIndicator]", never, { "group": "group"; "groupTitle": "groupTitle"; }, { "directionChange": "directionChange"; "remove": "remove"; }, never, never>;
-}