@progress/kendo-angular-grid 20.1.0-develop.3 → 20.1.0-develop.31

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

@@ -6,11 +6,11 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, areObjectsEqual, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, PreventableEvent as PreventableEvent$1, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, searchIcon, checkIcon, arrowRotateCcwIcon, columnsIcon, pencilIcon, saveIcon, trashIcon, fileExcelIcon, filePdfIcon, sparklesIcon, chevronUpIcon, chevronDownIcon, chevronRightIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, xIcon, xCircleIcon, plusCircleIcon, chevronLeftIcon, tableWizardIcon, undoIcon, redoIcon, arrowsSwapIcon, groupIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, searchIcon, checkIcon, arrowRotateCcwIcon, columnsIcon, pencilIcon, saveIcon, trashIcon, fileExcelIcon, filePdfIcon, sparklesIcon, chevronUpIcon, chevronDownIcon, chevronRightIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, xIcon, xCircleIcon, plusCircleIcon, chevronLeftIcon, undoIcon, redoIcon, arrowsSwapIcon, groupIcon, tableWizardIcon } from '@progress/kendo-svg-icons';
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount, flatMap } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -32,7 +32,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormG
 import * as i2$1 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import * as i4 from '@progress/kendo-angular-inputs';
-import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, TextBoxPrefixTemplateDirective, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
 import * as i5 from '@progress/kendo-angular-dateinputs';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, KENDO_DATEPICKER, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
 import * as i54 from '@progress/kendo-angular-toolbar';
@@ -1933,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
+ * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
  * Place an `<ng-template>` tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag to define the template.
  *
  * The template context includes:
@@ -2869,6 +2869,12 @@ class ColumnComponent extends ColumnBase {
      * @default 'text'
      */
     filter = 'text';
+    /**
+     * Specifies the filter type for the filter menu UI.
+     *
+     * @default 'default'
+     */
+    filterVariant = 'default';
     /**
      * Shows or hides the filter UI for this column. [See example](slug:filtering_grid).
      *
@@ -2916,7 +2922,7 @@ class ColumnComponent extends ColumnBase {
         return this.title === undefined ? this.field : this.title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterVariant: "filterVariant", filterable: "filterable", editable: "editable" }, providers: [
             {
                 provide: ColumnBase,
                 useExisting: forwardRef(() => ColumnComponent)
@@ -2956,6 +2962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filter: [{
                 type: Input
+            }], filterVariant: [{
+                type: Input
             }], filterable: [{
                 type: Input
             }], editable: [{
@@ -3045,7 +3053,7 @@ class SpanColumnComponent extends ColumnBase {
     includeInChooser = false;
     /**
      * Sets whether the edit template of the column is rendered.
-     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
+     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
      * @default false
      */
     set editable(value) {
@@ -3507,6 +3515,7 @@ class NavigationService {
             return columnIndexInsideGroup !== columnGroupChildren.length - 1;
         }
     }
+    preventScroll = false;
     viewport;
     columnViewport;
     activeRowIndex = 0;
@@ -5264,8 +5273,14 @@ class LogicalCellDirective {
                 this.focusGroup.focus();
             }
             else {
-                if (!this.logicalSlaveCell && this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
-                    this.microtask(() => this.isFocused() && el.focus());
+                if (!this.logicalSlaveCell &&
+                    this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
+                    this.microtask(() => {
+                        if (this.isFocused()) {
+                            el.focus({ preventScroll: this.navigationService.preventScroll });
+                            this.navigationService.preventScroll = false;
+                        }
+                    });
                 }
                 this.renderer.addClass(el, 'k-focus');
             }
@@ -5478,7 +5493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-owns']
             }] } });
 
-const FORMAT_REGEX = /\{\d+:?/;
+const FORMAT_REGEX$1 = /\{\d+:?/;
 /**
  * @hidden
  */
@@ -5499,7 +5514,7 @@ class FieldAccessorPipe {
     }
     formatValue(format, value) {
         const intl = this.intlService;
-        if (isString(format) && format.match(FORMAT_REGEX)) {
+        if (isString(format) && FORMAT_REGEX$1.exec(format)) {
             return intl.format(format, value);
         }
         return intl.toString(value, format);
@@ -8964,11 +8979,11 @@ class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
             this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
             if (this.ctx.grid?.isActionSheetExpanded) {
                 this.subs.add(this.adaptiveGridService.animationEnd.subscribe(() => {
-                    this.firstOperatorDropDown.focus();
+                    this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
                 }));
             }
             else {
-                this.firstOperatorDropDown.focus();
+                this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
             }
         }
     }
@@ -10670,6 +10685,322 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class LocalDataChangesService {
+    changes = new EventEmitter();
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+const FORMAT_REGEX = /\{\d+:?/;
+/**
+ * @hidden
+ */
+class FormatPipe {
+    intlService;
+    constructor(intlService) {
+        this.intlService = intlService;
+    }
+    transform(value, format) {
+        const intl = this.intlService;
+        if (isString(format) && FORMAT_REGEX.exec(format)) {
+            return intl.format(format, value);
+        }
+        return intl.toString(value, format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, deps: [{ token: i1$4.IntlService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, isStandalone: true, name: "format", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/pipe-prefix
+                    name: 'format',
+                    pure: false,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.IntlService }]; } });
+
+const DEFAULT_SEARCH_DELAY = 500;
+/**
+ * @hidden
+ */
+class MultiCheckboxFilterComponent {
+    ctx;
+    dataChangesService;
+    column;
+    filterChange = new EventEmitter();
+    constructor(ctx, dataChangesService) {
+        this.ctx = ctx;
+        this.dataChangesService = dataChangesService;
+    }
+    listData;
+    searchIcon = searchIcon;
+    showSelectAll = true;
+    currentlySelected = new Set();
+    isSearched = false;
+    currentFilter;
+    typingTimeout;
+    baseListData;
+    ngOnInit() {
+        let mappedData = [];
+        let filteredMappedData = [];
+        if (this.column.filter === 'date') {
+            mappedData = this.getUniqueDateValues(this.gridData);
+            filteredMappedData = this.getUniqueDateValues(this.filteredGridData);
+            this.baseListData = mappedData.sort((a, b) => { return a - b; });
+            this.currentlySelected = new Set(filteredMappedData);
+        }
+        else {
+            mappedData = this.gridData.map(i => i[this.column.field]);
+            filteredMappedData = this.filteredGridData.map(i => i[this.column.field]);
+            this.baseListData = [...new Set(mappedData)].sort((a, b) => { return a - b; });
+            this.currentlySelected = new Set(filteredMappedData);
+        }
+        this.listData = this.baseListData;
+        this.currentFilter = this.ctx.grid?.filter;
+        if (this.currentFilter) {
+            this.filterChange.emit(this.currentFilter);
+        }
+    }
+    ngOnDestroy() {
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+            this.typingTimeout = null;
+        }
+    }
+    isItemSelected(item) {
+        return this.currentlySelected.has(item);
+    }
+    onSearch(value) {
+        clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            this.isSearched = value.length > 0;
+            this.showSelectAll = !this.isSearched;
+            const field = this.column?.field;
+            if (!field) {
+                this.listData = [];
+                return;
+            }
+            if (!value) {
+                this.listData = this.baseListData;
+                return;
+            }
+            this.listData = filterBy(this.baseListData, { operator: 'contains', value });
+        }, DEFAULT_SEARCH_DELAY);
+    }
+    handleCheckBoxChange(checkedState, value, selectAllChecked) {
+        const field = this.column?.field;
+        if (!field) {
+            return;
+        }
+        if (!this.currentFilter) {
+            const existing = this.ctx.grid.filter;
+            this.currentFilter = existing ? { ...existing } : { logic: 'and', filters: [] };
+        }
+        const compositeIndex = this.currentFilter.filters.findIndex((f) => f && Array.isArray(f.filters) && f.filters.some((ff) => ff.field === field));
+        let fieldFilters = [];
+        if (compositeIndex !== -1) {
+            fieldFilters = [...this.currentFilter.filters[compositeIndex].filters];
+        }
+        const valueForItem = (item) => item?.[field];
+        if (selectAllChecked) {
+            if (checkedState) {
+                fieldFilters = [];
+                this.currentlySelected = new Set(this.baseListData);
+            }
+            else {
+                fieldFilters = this.gridData.map(item => ({
+                    field,
+                    operator: 'neq',
+                    value: valueForItem(item)
+                }));
+                this.currentlySelected.clear();
+            }
+        }
+        else {
+            const exists = fieldFilters.some(f => f.value === value);
+            if (checkedState) {
+                if (!exists) {
+                    fieldFilters.push({ field, operator: 'eq', value });
+                }
+                else {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                this.currentlySelected.add(value);
+            }
+            else {
+                if (exists) {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                else {
+                    fieldFilters.push({ field, operator: 'neq', value });
+                }
+                this.currentlySelected.delete(value);
+            }
+        }
+        if (fieldFilters.length === 0) {
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters.splice(compositeIndex, 1);
+            }
+            else {
+                this.currentFilter.filters = fieldFilters;
+            }
+        }
+        else {
+            const compositeBlock = {
+                logic: 'and',
+                filters: fieldFilters
+            };
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters[compositeIndex] = compositeBlock;
+            }
+            else {
+                this.currentFilter.filters.push(compositeBlock);
+            }
+        }
+        this.filterChange.emit(this.currentFilter);
+    }
+    get filteredGridData() {
+        return filterBy(this.gridData, this.ctx.grid?.filter);
+    }
+    get selectAllChecked() {
+        if (!this.listData) {
+            return false;
+        }
+        if (this.currentlySelected.size >= this.listData.length && this.currentlySelected.size > 0) {
+            return true;
+        }
+        else if (this.currentlySelected.size === 0) {
+            return false;
+        }
+        else {
+            return 'indeterminate';
+        }
+    }
+    get gridData() {
+        let data = [];
+        const isLocalData = isPresent$1(this.ctx?.dataBindingDirective);
+        if (isPresent$1(this.normalizedFilterVariant.data)) {
+            data = this.normalizedFilterVariant.data;
+        }
+        else if (isLocalData) {
+            data = this.dataChangesService.data;
+        }
+        else {
+            data = this.ctx.grid?.flatData;
+        }
+        return data || [];
+    }
+    get normalizedFilterVariant() {
+        const defaultMultiCheckboxSettings = { variant: 'multiCheckbox', search: true };
+        if (typeof this.column?.filterVariant === 'string') {
+            return {
+                variant: this.column.filterVariant,
+                search: true
+            };
+        }
+        return Object.assign(defaultMultiCheckboxSettings, this.column?.filterVariant);
+    }
+    get selectedItemsMessage() {
+        const localizationMsg = this.messageFor('multiCheckboxFilterSelectedItemsCount') || '';
+        return replaceMessagePlaceholder(localizationMsg, 'selectedItemsCount', this.currentlySelected.size.toString());
+    }
+    messageFor(key) {
+        return this.ctx.localization.get(key);
+    }
+    getUniqueDateValues(data) {
+        return data.reduce((acc, current) => {
+            const value = current[this.column.field];
+            if (value instanceof Date && acc.findIndex(d => d.getTime() === value.getTime()) === -1) {
+                acc.push(value);
+            }
+            return acc;
+        }, []);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, deps: [{ token: ContextService }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiCheckboxFilterComponent, isStandalone: true, selector: "kendo-grid-multicheckbox-filter", inputs: { column: "column" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: FormatPipe, name: "format" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-multicheckbox-filter',
+                    template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, FormatPipe]
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { column: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -10754,11 +11085,11 @@ class FilterMenuContainerComponent {
         return this._childFilter;
     }
     resetButton;
-    filterButton;
     _childFilter;
     subscription;
     _templateContext = {};
     _filter;
+    checkboxFilter;
     constructor(parentService, childService, ctx, cd, menuTabbingService, adaptiveGridService) {
         this.parentService = parentService;
         this.childService = childService;
@@ -10784,7 +11115,7 @@ class FilterMenuContainerComponent {
         this.menuTabbingService.lastFocusable = undefined;
     }
     get disabled() {
-        return !this.childFilter.filters.some(validFilters);
+        return this.isMultiFilter ? this.areFiltersEqual : !this.childFilter.filters.some(validFilters);
     }
     get templateContext() {
         this._templateContext.column = this.column;
@@ -10797,15 +11128,20 @@ class FilterMenuContainerComponent {
         return isPresent(this.column) && isPresent(this.column.filterMenuTemplateRef);
     }
     submit() {
-        const filter = trimFilters(this.childFilter);
-        if (filter.filters.length) {
-            const root = this.filter || {
-                filters: [],
-                logic: "and"
-            };
-            removeFilter(root, this.column.field);
-            root.filters.push(filter);
-            this.parentService.filter(root);
+        if (this.isMultiFilter) {
+            this.parentService.filter(this.checkboxFilter);
+        }
+        else {
+            const filter = trimFilters(this.childFilter);
+            if (filter.filters.length) {
+                const root = this.filter || {
+                    filters: [],
+                    logic: "and"
+                };
+                removeFilter(root, this.column.field);
+                root.filters.push(filter);
+                this.parentService.filter(root);
+            }
         }
         this.close.emit();
         return false;
@@ -10833,29 +11169,100 @@ class FilterMenuContainerComponent {
             }
         }
     }
+    onCheckboxFilterChange(filter) {
+        this.checkboxFilter = filter;
+    }
+    getButtonIcon(buttonType, iconType) {
+        if (!this.isMultiFilter) {
+            return;
+        }
+        const icons = {
+            filter: {
+                icon: 'filter',
+                svgIcon: filterIcon
+            },
+            reset: {
+                icon: 'filter-clear',
+                svgIcon: filterClearIcon
+            }
+        };
+        return icons[buttonType]?.[iconType];
+    }
     get clearText() {
         return this.ctx.localization.get("filterClearButton");
     }
     get filterText() {
         return this.ctx.localization.get("filterFilterButton");
     }
+    get isMultiFilter() {
+        if (!isPresent(this.column?.filterVariant)) {
+            return false;
+        }
+        const filterVariant = this.column?.filterVariant;
+        return isPresent(filterVariant) && (filterVariant === 'multiCheckbox' || typeof filterVariant === 'object' && filterVariant.variant === 'multiCheckbox');
+    }
+    get areFiltersEqual() {
+        const checkboxFilter = this.checkboxFilter;
+        const gridFilter = this.filter;
+        const isComposite = (f) => !!f && Array.isArray(f.filters);
+        // Treat undefined and "empty (no inner filters)" as equivalent
+        const isEmptyComposite = (f) => isComposite(f) && f.filters.length === 0;
+        if (!checkboxFilter && !gridFilter) {
+            return true;
+        }
+        if ((!checkboxFilter && isEmptyComposite(gridFilter)) || (!gridFilter && isEmptyComposite(checkboxFilter))) {
+            return true;
+        }
+        if (!checkboxFilter || !gridFilter) {
+            return false;
+        }
+        const eq = (x, y) => {
+            const xIsComp = isComposite(x);
+            const yIsComp = isComposite(y);
+            if (xIsComp !== yIsComp) {
+                return false;
+            }
+            if (xIsComp) {
+                const xLogic = x.logic || 'and';
+                const yLogic = y.logic || 'and';
+                if (xLogic !== yLogic) {
+                    return false;
+                }
+                if (x.filters.length !== y.filters.length) {
+                    return false;
+                }
+                for (let i = 0; i < x.filters.length; i++) {
+                    if (!eq(x.filters[i], y.filters[i])) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            return areObjectsEqual(x, y);
+        };
+        return eq(checkboxFilter, gridFilter);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: FilterService, skipSelf: true }, { token: FilterService }, { token: ContextService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
             FilterService,
             MenuTabbingService
-        ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }], ngImport: i0, template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu">
+            class="k-filter-menu"
+            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
             <div class="k-filter-menu-container">
                 <ng-container [ngSwitch]="hasTemplate">
                     <ng-container *ngSwitchCase="false">
-                        <ng-container
+                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
                             [filter]="childFilter"
                             [menuTabbingService]="menuTabbingService">
                         </ng-container>
+                        <ng-template #multiFilter>
+                            <kendo-grid-multicheckbox-filter [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
                         <ng-template
@@ -10867,20 +11274,24 @@ class FilterMenuContainerComponent {
                     </ng-container>
                 </ng-container>
                 <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton
+                    <button #filterButton kendoButton
+                        themeColor="primary"
                         type="submit"
-                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
                         [disabled]="disabled"
+                        [icon]="getButtonIcon('filter', 'icon')"
+                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button
-                        #resetButton
+                    <button #resetButton kendoButton
                         type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                        [icon]="getButtonIcon('reset', 'icon')"
+                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiCheckboxFilterComponent, selector: "kendo-grid-multicheckbox-filter", inputs: ["column"], outputs: ["filterChange"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -10892,17 +11303,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-filter-menu-container',
                     template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu">
+            class="k-filter-menu"
+            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
             <div class="k-filter-menu-container">
                 <ng-container [ngSwitch]="hasTemplate">
                     <ng-container *ngSwitchCase="false">
-                        <ng-container
+                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
                             [filter]="childFilter"
                             [menuTabbingService]="menuTabbingService">
                         </ng-container>
+                        <ng-template #multiFilter>
+                            <kendo-grid-multicheckbox-filter [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
                         <ng-template
@@ -10914,22 +11329,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton
+                    <button #filterButton kendoButton
+                        themeColor="primary"
                         type="submit"
-                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
                         [disabled]="disabled"
+                        [icon]="getButtonIcon('filter', 'icon')"
+                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button
-                        #resetButton
+                    <button #resetButton kendoButton
                         type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                        [icon]="getButtonIcon('reset', 'icon')"
+                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
     `,
                     standalone: true,
-                    imports: [FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass]
+                    imports: [FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass, MultiCheckboxFilterComponent, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: FilterService, decorators: [{
                     type: SkipSelf
@@ -10950,9 +11369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], resetButton: [{
                 type: ViewChild,
                 args: ['resetButton', { static: false }]
-            }], filterButton: [{
-                type: ViewChild,
-                args: ['filterButton', { static: false }]
             }] } });
 
 let id$1 = 0;
@@ -10968,7 +11384,6 @@ class FilterMenuComponent {
     renderer;
     cdr;
     adaptiveGridService;
-    zone;
     idService;
     filterIcon = filterIcon;
     /**
@@ -10986,7 +11401,7 @@ class FilterMenuComponent {
     tabIndex = '-1';
     popupRef;
     popupSubs;
-    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, zone, idService) {
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
         this.ctx = ctx;
@@ -10994,7 +11409,6 @@ class FilterMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.adaptiveGridService = adaptiveGridService;
-        this.zone = zone;
         this.idService = idService;
     }
     ngOnDestroy() {
@@ -11072,9 +11486,15 @@ class FilterMenuComponent {
         this.cdr.markForCheck();
     }
     focusRoot() {
-        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+        if (this.isNavigable) {
+            this.navigationService.preventScroll = true;
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus({ preventScroll: true });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AdaptiveGridService }, { token: i0.NgZone }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AdaptiveGridService }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -11133,7 +11553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [IconWrapperComponent, FilterMenuContainerComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AdaptiveGridService }, { type: i0.NgZone }, { type: IdService, decorators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AdaptiveGridService }, { type: IdService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { column: [{
                 type: Input
@@ -12087,7 +12507,7 @@ class ColumnListKeyboardNavigation {
     toggle(index, active) {
         const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
         element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
-        active && element?.focus();
+        active && element?.focus({ preventScroll: true });
     }
     toggleCheckedState() {
         this.items[this.activeIndex].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();
@@ -12217,15 +12637,6 @@ class ColumnListComponent {
             this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
         }
     }
-    onSelectAllClick(e) {
-        if (e.target.classList.contains('k-checkbox')) {
-            return;
-        }
-        e.preventDefault();
-        const label = e.target.closest('.k-column-list-item');
-        const input = label?.querySelector('input');
-        input.click();
-    }
     onSelectAllCheckboxChange(checkedState) {
         if (!checkedState && !this.allowHideAll) {
             const columnsToKeep = [];
@@ -12407,25 +12818,6 @@ class ColumnListComponent {
             });
         }
     }
-    checkBoxClick(e) {
-        const closestItem = e.target.closest('.k-column-list-item');
-        if (!closestItem)
-            return;
-        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-        const input = checkboxElement?.querySelector('input');
-        if (e.target === input) {
-            return;
-        }
-        e.preventDefault();
-        if (input) {
-            const index = parseInt(input.getAttribute('data-index'), 10);
-            const column = this.filteredColumns[index];
-            const isDisabled = checkboxElement.classList.contains('k-disabled');
-            if (column && !isDisabled) {
-                input.click();
-            }
-        }
-    }
     onCheckboxChange(checkedState, column, _index) {
         column.currentlyChecked = checkedState;
         if (this.autoSync) {
@@ -12459,9 +12851,7 @@ class ColumnListComponent {
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -12474,9 +12864,7 @@ class ColumnListComponent {
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -12487,7 +12875,7 @@ class ColumnListComponent {
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -12503,9 +12891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -12518,9 +12904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -12533,7 +12917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, CheckBoxComponent, EventsOutsideAngularDirective]
+                    imports: [NgFor, NgIf, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService, decorators: [{
                     type: Optional
@@ -13375,7 +13759,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
         this.host.selected = false;
-        focusAnchor && this.buttonElement?.focus();
+        focusAnchor && this.buttonElement?.focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i2.PopupService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: AdaptiveGridService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll", filterable: "filterable", showSelectAll: "showSelectAll" }, usesInheritance: true, ngImport: i0 });
@@ -14899,7 +15283,15 @@ class ColumnMenuContainerComponent {
         else {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable?.focus());
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            const firstFocusable = this.service.menuTabbingService.firstFocusable;
+            if (firstFocusable instanceof DropDownListComponent) {
+                firstFocusable.wrapper.nativeElement.focus({ preventScroll: true });
+            }
+            else {
+                firstFocusable?.focus({ preventScroll: true });
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
@@ -15354,7 +15746,13 @@ class ColumnMenuComponent {
         ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
     }
     focusRoot() {
-        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+        if (this.isNavigable) {
+            this.navigationService.preventScroll = true;
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus({ preventScroll: true });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }, { token: IdService, optional: true }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
@@ -16503,11 +16901,16 @@ class PDFComponent extends PDFExportComponent {
             overlayContent.scrollTop = content.scrollTop;
             overlayContent.scrollLeft = content.scrollLeft;
             if (!this.ctx?.grid?.isStacked) {
-                overlayQuery.header().scrollLeft = query.header().scrollLeft;
+                const header = query.header();
+                const overlayHeader = overlayQuery.header();
+                if (header && overlayHeader) {
+                    overlayHeader.scrollLeft = header.scrollLeft;
+                }
             }
             const footer = query.footer();
-            if (footer) {
-                overlayQuery.footer().scrollLeft = footer.scrollLeft;
+            const overlayFooter = overlayQuery.footer();
+            if (footer && overlayFooter) {
+                overlayFooter.scrollLeft = footer.scrollLeft;
             }
             const lockedContent = query.content(true);
             if (lockedContent) {
@@ -17258,19 +17661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['dblclick']
             }] } });
 
-/**
- * @hidden
- */
-class LocalDataChangesService {
-    changes = new EventEmitter();
-    data;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @hidden
  */
@@ -18491,7 +18881,7 @@ class HeaderComponent {
     }
     onHeaderKeydown(column, args) {
         const code = normalizeNumpadKeys(args);
-        if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
+        if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu && this.isFilterable(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const filterMenu = this.filterMenus.find(fm => fm.column === column);
@@ -19549,7 +19939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the command columns of the Grid. Define the content of the column inside an `<ng-template>` tag.
- * For more information and examples, see the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
+ * For more information and examples, see the [Editing Action Buttons](slug:basics_editing_grid#editing-action-buttons) article.
  *
  * @example
  * ```html
@@ -20190,7 +20580,7 @@ class CellComponent {
                         </ng-container>
                     </div>
                 </div>
-                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)" [attr.aria-expanded]="item.isExpanded">
                     <div class="k-grid-stack-content">
                         <button kendoButton
                             fillMode="flat"
@@ -20398,7 +20788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </ng-container>
                     </div>
                 </div>
-                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)" [attr.aria-expanded]="item.isExpanded">
                     <div class="k-grid-stack-content">
                         <button kendoButton
                             fillMode="flat"
@@ -21121,7 +21511,8 @@ class TableBodyComponent {
                     [dataItem]="item.data"
                     [detailExpandCell]="true"
                     aria-selected="false"
-                    role="gridcell">
+                    role="gridcell"
+                    [attr.aria-expanded]="item.isExpanded">
                 <a
                     *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
                     [attr.title]="detailButtonTitle(item)"
@@ -21441,7 +21832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [dataItem]="item.data"
                     [detailExpandCell]="true"
                     aria-selected="false"
-                    role="gridcell">
+                    role="gridcell"
+                    [attr.aria-expanded]="item.isExpanded">
                 <a
                     *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
                     [attr.title]="detailButtonTitle(item)"
@@ -21796,7 +22188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the `cancel` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  *
  * When a button with this directive is clicked, the
  * [`cancel`]({% slug api_grid_gridcomponent %}#toc-cancel) event
@@ -21900,7 +22292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the `save` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`save`]({% slug api_grid_gridcomponent %}#toc-save) event fires.
  * The button with `kendoGridSaveCommand` is automatically hidden when the row is not in edit mode.
@@ -22003,7 +22395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the `remove` command of the Grid. Apply this directive to any `button` element
  * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`remove`]({% slug api_grid_gridcomponent %}#toc-remove) event fires.
  * The button with `kendoGridRemoveCommand` is automatically hidden when the row is in edit mode.
@@ -22427,8 +22819,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758189236,
-    version: '20.1.0-develop.3',
+    publishDate: 1760682423,
+    version: '20.1.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -24389,9 +24781,6 @@ class ScrollerService {
         const lastItemIndex = this.rowHeightService.index(scrollTop + offsetHeight);
         const overflow = Math.max(firstItemIndex + (this.virtualPageSize || this.take) - this.total, 0);
         firstItemIndex = Math.max(firstItemIndex - overflow, 0);
-        if (lastItemIndex < this.lastLoaded) {
-            this.lastLoaded = lastItemIndex;
-        }
         if (down) {
             const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
             if (atBottom) {
@@ -25587,7 +25976,7 @@ class ListComponent {
             <div></div>
         </div>
     </div>
-    <div 
+    <div
         #container
         class="k-grid-content k-virtual-content"
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
@@ -25712,7 +26101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div></div>
         </div>
     </div>
-    <div 
+    <div
         #container
         class="k-grid-content k-virtual-content"
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
@@ -26577,8 +26966,29 @@ class GridMessages extends ComponentMessages {
      * Sets the text for the external editing Dialog <b>Cancel</b> button.
      */
     externalEditingCancelText;
+    /**
+     * The placeholder text for the multi-checkbox filter search input
+     */
+    multiCheckboxFilterSearchPlaceholder;
+    /**
+     * The label for the multi-checkbox filter select all option
+     */
+    multiCheckboxFilterSelectAllLabel;
+    /**
+     * The text for the multi-checkbox filter selected items count
+     *
+     * The text includes the selected items count and a localizable string.
+     * For 3 selected items the default text is `3 selected items`.
+     *
+     * To customize the text, use the `{selectedItemsCount}` placeholder and a custom localizable string.
+     * For example, `{selectedItemsCount} items are selected`.
+     *
+     * The `{selectedItemsCount}` placeholder is replaced with the count of selected items,
+     * and the message is rendered as `3 items are selected`.
+     */
+    multiCheckboxFilterSelectedItemsCount;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText", multiCheckboxFilterSearchPlaceholder: "multiCheckboxFilterSearchPlaceholder", multiCheckboxFilterSelectAllLabel: "multiCheckboxFilterSelectAllLabel", multiCheckboxFilterSelectedItemsCount: "multiCheckboxFilterSelectedItemsCount" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -26836,6 +27246,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], externalEditingCancelText: [{
                 type: Input
+            }], multiCheckboxFilterSearchPlaceholder: [{
+                type: Input
+            }], multiCheckboxFilterSelectAllLabel: [{
+                type: Input
+            }], multiCheckboxFilterSelectedItemsCount: [{
+                type: Input
             }] } });
 
 /**
@@ -26941,7 +27357,7 @@ class FilterToolbarToolComponent {
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.filterItems?.get(0)?.nativeElement.focus();
+            this.filterItems?.get(0)?.nativeElement.focus({ preventScroll: true });
         });
     }
     ngOnDestroy() {
@@ -27127,7 +27543,7 @@ class SortToolbarToolComponent {
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.sortItems?.get(0)?.nativeElement.focus();
+            this.sortItems?.get(0)?.nativeElement.focus({ preventScroll: true });
         });
     }
     ngOnDestroy() {
@@ -27689,12 +28105,12 @@ class GroupToolbarToolComponent {
         if (items?.first && (!isPresent$1(this.currentFocusedItemIndex) || this.currentFocusedItemIndex >= items.length || this.currentFocusedItemIndex < 0)) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.currentFocusedItemIndex = 0;
-                this.groupItems.first.nativeElement.focus();
+                this.groupItems.first.nativeElement.focus({ preventScroll: true });
             });
             return;
         }
         if (items?.first) {
-            items.get(this.currentFocusedItemIndex).nativeElement.focus();
+            items.get(this.currentFocusedItemIndex).nativeElement.focus({ preventScroll: true });
         }
     }
     get groupItems() {
@@ -29214,1005 +29630,327 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [GroupToolbarToolComponent]
             }] } });
 
-/**
- * @hidden
- */
-const DEFAULT_AI_REQUEST_OPTIONS = {
-    headers: new HttpHeaders({
-        'Content-Type': 'application/json'
-    }),
-    role: 'user',
-    method: 'POST',
-    responseType: 'json'
+const createControl = (source) => (acc, key) => {
+    acc[key] = new FormControl(source[key]);
+    return acc;
 };
+const validateColumnsField = (columns) => expandColumns(columns.toArray())
+    .filter(isColumnComponent)
+    .filter(({ field }) => !isValidFieldName(field))
+    .forEach(({ field }) => console.warn(ColumnConfigurationErrorMessages.fieldName(field)));
+const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group, emit }) => emit && isPresent(group)))
+    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
+const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
+    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
+const isInEditedCell = (element, gridElement, isStacked = false) => (closest(element, matchesClasses('k-grid-edit-cell')) || (isStacked && closest(element, matchesClasses('k-grid-stack-edit-cell')))) &&
+    closest(element, matchesNodeName('kendo-grid')) === gridElement;
+const NOTIFY_DELAY = 500;
 /**
- * Represents the event data when the AI Assistant request completes successfully.
+ * Represents the Kendo UI for Angular Data Grid component.
+ *
+ * Use the `kendo-grid` component to display and manage tabular data.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData"></kendo-grid>
+ * ```
+ *
+ * @remarks
+ * Supported children components are:
+ * {@link CheckboxColumnComponent},
+ * {@link ColumnChooserComponent},
+ * {@link ColumnComponent},
+ * {@link ColumnGroupComponent},
+ * {@link ColumnMenuAutoSizeAllColumnsComponent},
+ * {@link ColumnMenuAutoSizeColumnComponent},
+ * {@link ColumnMenuChooserComponent},
+ * {@link ColumnMenuComponent},
+ * {@link ColumnMenuFilterComponent},
+ * {@link ColumnMenuItemComponent},
+ * {@link ColumnMenuLockComponent},
+ * {@link ColumnMenuPositionComponent},
+ * {@link ColumnMenuSortComponent},
+ * {@link ColumnMenuStickComponent},
+ * {@link CommandColumnComponent},
+ * {@link CustomMessagesComponent},
+ * {@link ExcelComponent},
+ * {@link GridSpacerComponent},
+ * {@link PDFComponent},
+ * {@link RowReorderColumnComponent},
+ * {@link SpanColumnComponent},
+ * {@link ToolBarComponent}.
  */
-class GridToolbarAIResponseSuccessEvent extends PreventableEvent$1 {
+class GridComponent {
+    supportService;
+    selectionService;
+    cellSelectionService;
+    wrapper;
+    groupInfoService;
+    groupsService;
+    changeNotification;
+    detailsService;
+    editService;
+    filterService;
+    pdfService;
+    responsiveService;
+    renderer;
+    excelService;
+    ngZone;
+    scrollSyncService;
+    domEvents;
+    columnResizingService;
+    changeDetectorRef;
+    columnReorderService;
+    columnInfoService;
+    navigationService;
+    sortService;
+    scrollRequestService;
+    localization;
+    ctx;
+    sizingService;
+    adaptiveGridService;
+    rowReorderService;
+    dataMappingService;
     /**
-     * The HTTP response from the AI service.
+     * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
+     * ([more information and example]({% slug binding_grid %})).
      */
-    response;
-    constructor(response) {
-        super();
-        this.response = response;
+    set data(value) {
+        this._data = value;
+        if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
+            this.blockArrowSelection = false;
+        }
+        if (this.notifyTimeout) {
+            clearTimeout(this.notifyTimeout);
+            this.notifyTimeout = null;
+        }
+        if (this.rowReorderable) {
+            this.ngZone.runOutsideAngular(() => {
+                this.notifyTimeout = setTimeout(() => {
+                    this.notifyReorderContainers();
+                }, NOTIFY_DELAY);
+            });
+        }
     }
-}
-/**
- * Represents the event data when the AI Assistant request completes with an error.
- */
-class GridToolbarAIResponseErrorEvent extends PreventableEvent$1 {
-    /**
-     * The HTTP error response from the AI service.
-     */
-    error;
-    constructor(error) {
-        super();
-        this.error = error;
+    get data() {
+        return this._data;
     }
-}
-
-/**
- * @hidden
- * Converts date strings in a filter to Date objects.
- */
-const convertDateStringsInFilter = (filter) => {
-    if (!filter) {
-        return filter;
+    get hintText() {
+        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
     }
-    if (filter.filters && Array.isArray(filter.filters)) {
-        return {
-            ...filter,
-            filters: filter.filters.map(f => convertDateStringsInFilter(f))
-        };
+    /**
+     * @hidden
+     */
+    get customHintTemplate() {
+        if (this.rowReorderable) {
+            const allColumns = this.columnList.toArray();
+            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
+            return rowReorderColumn.rowDragHintTemplateRef;
+        }
     }
-    if (filter.field && filter.value !== undefined) {
-        if (typeof filter.value === 'string' && isDateOperator(filter.operator)) {
-            const date = parseDate(filter.value);
+    /**
+     * @hidden
+     */
+    get hintContext() {
+        if (this.customHintTemplate) {
+            const draggedRow = this.rowReorderService?.getDraggedRow(this.flatData);
             return {
-                ...filter,
-                value: date || filter.value
+                $implicit: draggedRow?.dataItem,
+                rowIndex: draggedRow?.rowIndex
             };
         }
     }
-    return filter;
-};
-/**
- * @hidden
- */
-const isDateOperator = (operator) => {
-    const dateOperators = [
-        'eq', 'neq', 'lt', 'lte', 'gt', 'gte'
-    ];
-    return dateOperators.includes(operator);
-};
-/**
- * @hidden
- * Processes cell highlights for a specific filter and item.
- */
-const processCellHighlights = (filter, rowIndex, columns, highlightItems) => {
-    Object.keys(filter.cells).forEach((columnField) => {
-        const actualColumnIndex = Array.from(columns).findIndex((col) => col.field === columnField);
-        if (actualColumnIndex !== -1) {
-            highlightItems.push({
-                itemKey: rowIndex,
-                columnKey: actualColumnIndex,
-            });
-        }
-    });
-};
-/**
- * @hidden
- * Processes filtered results and adds highlight items.
- */
-const processFilteredResults = (filteredResults, data, filter, columns, highlightItems) => {
-    filteredResults?.forEach((item) => {
-        const rowIndex = data.findIndex((dataItem) => dataItem === item);
-        if (filter.cells && Object.keys(filter.cells).length > 0) {
-            processCellHighlights(filter, rowIndex, columns, highlightItems);
+    /**
+     * Defines the page size used by the Grid pager.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     */
+    pageSize;
+    /**
+     * Defines the height in pixels for the Grid when `scrollable` is set.
+     * You can also set the height using `style.height` with units like `px`, `%`, `em`, or `rem`.
+     */
+    height;
+    /**
+     * Sets the `style.height` attribute of each Grid data or group header/footer row (`tr`) element in the DOM in pixels.
+     * If some row cells have content that requires more space, the row automatically expands to fit the content.
+     */
+    rowHeight;
+    /**
+     * Enables or disables adaptive mode. Adaptive rendering is off by default.
+     *
+     * @default 'none'
+     */
+    adaptiveMode = 'none';
+    /**
+     * Sets the `style.height` attribute of each Grid detail row (`tr.k-detail-row`) element in the DOM in pixels.
+     * If the detail row has content that requires more space, the row automatically expands to fit the content.
+     */
+    detailRowHeight;
+    /**
+     * Defines the number of records to skip in the pager.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     */
+    get skip() {
+        return this._skip;
+    }
+    set skip(value) {
+        if (typeof value === 'number' && value >= 0) {
+            this._skip = this.rowReorderService.skip = value;
         }
-        else {
-            highlightItems.push({
-                itemKey: rowIndex,
-            });
+    }
+    /**
+     * Defines the scroll mode for the Grid.
+     *
+     * @default 'scrollable'
+     */
+    scrollable = 'scrollable';
+    /**
+     * Enables the selection feature of the Grid. The `selectable` property can be set to `true`, `false`, or an object with additional settings.
+     * [See example](slug:grid_row_selection).
+     *
+     * @default false
+     */
+    selectable = false;
+    /**
+     * Sets the descriptors for sorting the data ([see example](slug:manual_sorting_grid)).
+     */
+    set sort(value) {
+        if (isArray(value)) {
+            this._sort = value;
         }
-    });
-};
-/**
- * @hidden
- * Highlights items in a grid based on the provided filters and columns.
- * @param data - The data to be highlighted.
- * @param filters - The composite highlight descriptors containing the filters and logic.
- * @param columns - The columns of the grid.
- * @returns An array of HighlightItem objects representing the highlighted items.
- */
-const highlightBy = (data, filters, columns) => {
-    const highlightItems = [];
-    filters.forEach((filter) => {
-        const processedFilters = filter.filters.map((filter) => convertDateStringsInFilter(filter));
-        const filteredResults = filterBy(data, {
-            logic: filter.logic || "and",
-            filters: processedFilters,
-        });
-        processFilteredResults(filteredResults, data, filter, columns, highlightItems);
-    });
-    return highlightItems;
-};
-
-/**
- * @hidden
- */
-class AiAssistantComponent {
-    http;
-    ctx;
-    columnInfoService;
-    aiPrompt;
-    activeView = 0;
-    requestUrl;
-    requestOptions;
-    aiPromptSettings;
-    aiToolDirective;
-    streaming = false;
-    disabledGenerateButton = false;
-    lastMessage;
-    requestData;
-    currentRequestSubscription = null;
-    //Remove this when the AI Assistant has a built-in loading indicator
-    loadingOutput = { id: 'k-loading-item', output: '', prompt: '' };
-    columns = [];
-    idCounter = 0;
-    constructor(http, ctx, columnInfoService) {
-        this.http = http;
-        this.ctx = ctx;
-        this.columnInfoService = columnInfoService;
-    }
-    ngAfterViewInit() {
-        this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({ field: col.field }));
-    }
-    ngOnDestroy() {
-        this.unsubscribeCurrentRequest();
-    }
-    message(message) {
-        return this.ctx.localization.get(message);
-    }
-    cancelRequest() {
-        this.aiToolDirective.cancelRequest.emit();
-        this.unsubscribeCurrentRequest();
-        this.streaming = false;
-    }
-    onPromptRequest(ev) {
-        if (this.aiToolDirective.promptOutputs.length === 0) {
-            this.aiToolDirective.promptOutputs.push(this.loadingOutput);
-        }
-        this.unsubscribeCurrentRequest();
-        this.streaming = true;
-        this.activeView = 1;
-        if (ev.prompt) {
-            this.lastMessage = ev.prompt;
-        }
-        this.requestData = {
-            columns: this.columns,
-            promptMessage: ev.prompt,
-            url: this.requestUrl,
-            requestOptions: {
-                ...this.requestOptions
-            }
-        };
-        if (!this.requestOptions.body) {
-            const requestBody = {
-                role: this.requestData.requestOptions.role,
-                contents: [
-                    {
-                        text: this.requestData.promptMessage
-                    }
-                ],
-                columns: this.requestData.columns
-            };
-            this.requestData.requestOptions.body = requestBody;
-        }
-        this.aiToolDirective.promptRequest.emit({ requestData: this.requestData, isRetry: ev.isRetry });
-        if (!this.requestUrl) {
-            return;
-        }
-        this.currentRequestSubscription = this.sendPromptRequest().subscribe((res) => {
-            if (res.body) {
-                this.processResponse(res);
-                this.streaming = false;
-            }
-            this.currentRequestSubscription = null;
-        }, (error) => {
-            this.handleError(error);
-            this.streaming = false;
-            this.currentRequestSubscription = null;
-        });
-    }
-    sendPromptRequest() {
-        const request = new HttpRequest(this.requestData.requestOptions.method, this.requestData.url, this.requestData.requestOptions.body, this.requestData.requestOptions);
-        return this.http.request(request);
-    }
-    processResponse(response) {
-        if (this.aiToolDirective.autoClose) {
-            this.aiToolDirective.emitOpenClose = true;
-            this.aiToolDirective.toggleWindow();
-        }
-        const responseBody = response.body;
-        const responseSuccessEvent = new GridToolbarAIResponseSuccessEvent(response);
-        this.aiToolDirective.responseSuccess.emit(responseSuccessEvent);
-        if (responseSuccessEvent.isDefaultPrevented()) {
-            this.deleteLoadingOutput();
-            return;
-        }
-        const isFilterable = Boolean(this.ctx.grid.filterable);
-        const isSortable = Boolean(this.ctx.grid.sortable);
-        const isGroupable = Boolean(this.ctx.grid.groupable);
-        if (isFilterable && responseBody.filter) {
-            this.processFilterResponse(responseBody.filter);
-        }
-        if (isSortable && responseBody.sort) {
-            this.processArrayResponse(responseBody.sort, this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
-        }
-        if (isGroupable && responseBody.group) {
-            this.processArrayResponse(responseBody.group, this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
-        }
-        if (this.ctx.highlightDirective && responseBody.highlight) {
-            this.processHighlightResponse(responseBody.highlight);
-        }
-        const responseContentStart = [`${this.ctx.localization.get('aiAssistantOutputCardBodyContent')} \n`];
-        const responseContentBody = responseBody.messages
-            .map((output, idx) => `${idx + 1} ${output}`)
-            .join('\n');
-        const output = {
-            id: this.idCounter++,
-            title: this.ctx.localization.get('aiAssistantOutputCardTitle'),
-            prompt: this.lastMessage,
-            output: responseContentStart.concat(responseContentBody).join(''),
-        };
-        this.deleteLoadingOutput();
-        this.aiToolDirective.promptOutputs.unshift(output);
-    }
-    handleError(error) {
-        const responseErrorEvent = new GridToolbarAIResponseErrorEvent(error);
-        this.aiToolDirective.responseError.emit(responseErrorEvent);
-        if (responseErrorEvent.isDefaultPrevented()) {
-            this.deleteLoadingOutput();
-            return;
-        }
-        const output = {
-            id: this.idCounter++,
-            prompt: this.lastMessage,
-            output: error.message
-        };
-        this.deleteLoadingOutput();
-        this.aiToolDirective.promptOutputs.unshift(output);
     }
-    deleteLoadingOutput() {
-        if (this.aiToolDirective.promptOutputs[0]?.id === this.loadingOutput.id) {
-            this.aiToolDirective.promptOutputs.splice(0, 1);
-        }
+    get sort() {
+        return this._sort;
     }
-    unsubscribeCurrentRequest() {
-        if (this.currentRequestSubscription) {
-            this.currentRequestSubscription.unsubscribe();
-            this.currentRequestSubscription = null;
+    /**
+     * Specifies the sizing for Grid elements like tables, buttons, and inputs.
+     *
+     * @default 'medium'
+     */
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.wrapper.nativeElement.classList.remove('k-grid-sm', 'k-grid-md');
         }
+        this.sizingService.changes.next(this.size);
     }
-    processArrayResponse(newItems, currentItems, getField, updateGrid) {
-        if (newItems?.length === 0) {
-            updateGrid([]);
-        }
-        else if (newItems?.length) {
-            let mergedArray = [...newItems];
-            const newFields = newItems.map(getField);
-            const existingItemsToKeep = currentItems.filter(item => !newFields.includes(getField(item)));
-            mergedArray = [...mergedArray, ...existingItemsToKeep];
-            updateGrid(mergedArray);
-        }
+    get size() {
+        return this._size;
     }
-    processHighlightResponse(highlight) {
-        if (highlight.length === 0) {
-            this.ctx.highlightDirective['setState']([]);
-            return;
+    /**
+     * A function that defines how to track changes for the data rows.
+     * By default, the Grid tracks changes by the index of the data item.
+     * Edited rows are tracked by reference.
+     * [See example](slug:track_changes_grid).
+     */
+    trackBy = defaultTrackBy;
+    /**
+     * Sets the filter descriptor for the data ([see examples](slug:manual_filtering_grid)).
+     */
+    filter;
+    /**
+     * Sets the descriptors for grouping the data ([see example](slug:manual_grouping_grid)).
+     */
+    set group(value) {
+        if (isArray(value)) {
+            this._group = value;
         }
-        const highlightedItems = highlightBy(this.ctx.dataBindingDirective['originalData'], highlight, this.columns);
-        this.ctx.highlightDirective['setState'](highlightedItems);
     }
-    processFilterResponse(filter) {
-        const processedFilter = convertDateStringsInFilter(filter);
-        const clearFilter = Object.keys(processedFilter).length === 0;
-        if (clearFilter) {
-            this.ctx.grid.filterChange.next(undefined);
-        }
-        else if (processedFilter?.filters.length) {
-            const currentFilter = this.ctx.grid.currentState.filter;
-            let mergedFilter = processedFilter;
-            if (currentFilter && currentFilter.filters?.length > 0) {
-                mergedFilter = {
-                    logic: 'and',
-                    filters: [
-                        currentFilter,
-                        processedFilter
-                    ]
-                };
-            }
-            this.ctx.grid.filterChange.next(mergedFilter);
-        }
+    get group() {
+        return this._group;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1$8.HttpClient }, { token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
-        <kendo-aiprompt
-            #aiPrompt
-            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
-            [showOutputRating]="aiPromptSettings?.showOutputRating"
-            [streaming]="streaming"
-            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
-            [(activeView)]="activeView"
-            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
-            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
-            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
-            [promptOutputs]="aiPromptSettings?.promptOutputs"
-            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
-            (promptRequest)="onPromptRequest($event)"
-            (promptRequestCancel)="cancelRequest()"
-            >
-            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
-            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
-            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
-                <div class="k-card">
-                    <div class="k-card-header">
-                        <div class="k-card-title">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
-                        </div>
-                        <div class="k-card-subtitle">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                        </div>
-                    </div>
-                    <div class="k-card-body">
-                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
-                    </div>
-                    <div class="k-card-actions">
-                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
-                <p>{{output.output}}</p>
-            </ng-template>
-            <kendo-aiprompt-messages
-                [generateOutput]="message('aiAssistantApplyButtonText')"
-            ></kendo-aiprompt-messages>
-        </kendo-aiprompt>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: ["activeView", "promptCommands", "promptSuggestions", "promptOutputs", "showOutputRating", "streaming", "speechToTextButton", "textAreaSettings", "generateButtonSVGIcon", "generateButtonIcon", "disabledGenerateButton"], outputs: ["activeViewChange", "promptRequest", "commandExecute", "outputCopy", "outputRatingChange", "promptRequestCancel"], exportAs: ["kendoAIPrompt"] }, { kind: "component", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages" }, { kind: "component", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view" }, { kind: "component", type: OutputViewComponent, selector: "kendo-aiprompt-output-view" }, { kind: "directive", type: AIPromptOutputTemplateDirective, selector: "[kendoAIPromptOutputTemplate]" }, { kind: "directive", type: AIPromptOutputBodyTemplateDirective, selector: "[kendoAIPromptOutputBodyTemplate]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    imports: [NgIf, AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective],
-                    template: `
-        <kendo-aiprompt
-            #aiPrompt
-            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
-            [showOutputRating]="aiPromptSettings?.showOutputRating"
-            [streaming]="streaming"
-            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
-            [(activeView)]="activeView"
-            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
-            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
-            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
-            [promptOutputs]="aiPromptSettings?.promptOutputs"
-            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
-            (promptRequest)="onPromptRequest($event)"
-            (promptRequestCancel)="cancelRequest()"
-            >
-            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
-            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
-            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
-                <div class="k-card">
-                    <div class="k-card-header">
-                        <div class="k-card-title">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
-                        </div>
-                        <div class="k-card-subtitle">
-                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                        </div>
-                    </div>
-                    <div class="k-card-body">
-                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
-                    </div>
-                    <div class="k-card-actions">
-                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
-                <p>{{output.output}}</p>
-            </ng-template>
-            <kendo-aiprompt-messages
-                [generateOutput]="message('aiAssistantApplyButtonText')"
-            ></kendo-aiprompt-messages>
-        </kendo-aiprompt>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$8.HttpClient }, { type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { aiPrompt: [{
-                type: ViewChild,
-                args: [AIPromptComponent]
-            }] } });
-
-/**
- * Represents an AI Assistant tool of the Grid.
- * Use this directive on any `kendo-toolbar-button` inside a ToolbarComponent in the Grid.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *      <kendo-toolbar>
- *         <kendo-toolbar-button kendoGridAIAssistantTool></kendo-toolbar-button>
- *      </kendo-toolbar>
- * </kendo-grid>
- * ```
- * @remarks
- * Applied to: {@link ToolBarButtonComponent}.
- */
-class AIAssistantToolbarDirective extends ToolbarToolBase {
-    windowService;
-    host;
-    ctx;
-    zone;
-    refresh;
-    /**
-     * The URL to which the AI Assistant tool sends the AI request.
-     * - When you set this property, the AI Assistant tool sends and handles an HTTP request to the provided `requestUrl`. You can handle the `promptRequest` event to modify the request options before the tool sends it.
-     * - When you do not set this property, the AI Assistant tool does not send an HTTP request. You should handle the `promptRequest` event to send and handle a custom HTTP request.
-     */
-    requestUrl;
     /**
-     * Configures the request options that the AI Assistant tool sends with the AI request.
+     * If `true`, renders only columns in the current viewport.
      *
-     * @default { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), role: 'user', method: 'POST', responseType: 'json', withCredentials: false }
+     * @default false
      */
-    requestOptions;
+    virtualColumns = false;
     /**
-     * Configures the initial settings for the AI Assistant Window when opened.
+     * @hidden
      */
-    aiWindowSettings;
+    get showStatusBar() {
+        return !!(this.selectable);
+    }
     /**
-     * Configures the initial settings for the AI Prompt component that the AI Assistant Window component uses when opened.
+     * @hidden
      */
-    aiPromptSettings;
+    get showTopToolbar() {
+        return this.toolbarTemplate && ['top', 'both'].indexOf(this.toolbarTemplate.position) > -1;
+    }
     /**
-     * Determines whether to close the AI Assistant Window automatically after a successful request.
-     * @default true
+     * @hidden
      */
-    autoClose = true;
+    get showBottomToolbar() {
+        return this.toolbarTemplate && ['bottom', 'both'].indexOf(this.toolbarTemplate.position) > -1;
+    }
     /**
-     * Determines whether to keep the AI Prompt's outputs after closing the AI Assistant Window.
-     * @default false
+     * @hidden
      */
-    keepOutputHistory = false;
+    get isLocked() {
+        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
+    }
     /**
-     * Emits an event before the AI Assistant tool sends the AI request.
-     *  - When you provide a `requestUrl`, you can handle the event to modify the request options.
-     *  - When you do not provide a `requestUrl`, you can handle the event to perform an entirely custom request.
+     * @hidden
      */
-    promptRequest = new EventEmitter();
+    get showTopPager() {
+        const position = this.pageable.position;
+        return this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
+    }
     /**
-     * Emits an event when the user clicks the cancel button.
+     * @hidden
      */
-    cancelRequest = new EventEmitter();
+    get showBottomPager() {
+        const position = this.pageable.position;
+        return this.pageable !== false && position !== 'top';
+    }
     /**
-     * Emits an event when the AI Assistant tool completes the AI request successfully.
-     * The event contains the response from the AI service and is preventable to allow stopping the default response handling.
+     * @hidden
      */
-    responseSuccess = new EventEmitter();
+    get hasPager() {
+        return this.showTopPager || this.showBottomPager;
+    }
     /**
-     * Emits an event when the AI Assistant tool completes the AI request with an error.
-     * The event contains the error response from the AI service and is preventable to allow stopping the default error handling.
+     * @hidden
      */
-    responseError = new EventEmitter();
+    get showGroupPanel() {
+        const isGroupable = this.groupable && this.groupable.enabled !== false;
+        const isGrouped = this.group?.length > 0;
+        return this.isStacked ? isGroupable && isGrouped : isGroupable;
+    }
     /**
-     * Emits an event when the AI Assistant tool closes.
+     * @hidden
      */
-    close = new EventEmitter();
+    get groupableEmptyText() {
+        return this.groupable.emptyText;
+    }
     /**
-     * Emits an event when the AI Assistant tool opens.
+     * @hidden
      */
-    open = new EventEmitter();
-    tableWizardIcon = tableWizardIcon;
-    emitOpenClose = false;
-    promptOutputs = [];
-    windowRef;
-    subs = new Subscription();
-    defaultAiPromptSettings = {
-        speechToTextButton: true,
-        generateButtonSVGIcon: this.tableWizardIcon,
-        generateButtonIcon: 'table-wizard'
-    };
-    constructor(windowService, host, ctx, zone, refresh, cdr) {
-        super(host, ToolbarToolName.aiAssistant, ctx, zone, cdr);
-        this.windowService = windowService;
-        this.host = host;
-        this.ctx = ctx;
-        this.zone = zone;
-        this.refresh = refresh;
-        this.host.rounded = 'full';
-        this.host.themeColor = 'primary';
-        this.host.showText = 'never';
-    }
-    ngOnInit() {
-        this.subs.add(this.host.click.subscribe(() => this.onClick()));
-        const hasToolbarIcon = isPresent$1(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
-        const hasOverflowIcon = isPresent$1(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
-        const hasIcon = hasToolbarIcon && hasOverflowIcon;
-        const hasSvgIcon = isPresent$1(this.host.toolbarOptions.svgIcon) && isPresent$1(this.host.overflowOptions.svgIcon);
-        if (!hasIcon) {
-            this.host.icon = 'sparkles';
-        }
-        if (!hasSvgIcon) {
-            this.host.svgIcon = sparklesIcon;
-        }
-        this.requestOptions = { ...DEFAULT_AI_REQUEST_OPTIONS, ...this.requestOptions };
+    get marqueeSelection() {
+        return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
-            this.buttonElement?.setAttribute('aria-expanded', 'false');
-            const needsTitle = this.host.showText !== 'always' && this.host.showText !== 'toolbar';
-            if (needsTitle && !this.host.title) {
-                this.buttonElement?.setAttribute('title', this.ctx.localization.get('aiAssistantToolbarToolText'));
-            }
-        });
-        this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
-            if (tool.overflows && this.windowRef) {
-                this.windowRef.close();
-            }
-        }));
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.subs.unsubscribe();
-        this.promptOutputs = [];
+    /**
+     * @hidden
+     *
+     * The `isOpen` property is used to determine if a Grid Popup or ActionSheet is open.
+     */
+    get isOpen() {
+        return isPresent(this.adaptiveGridService.popupRef) || this.isActionSheetExpanded;
     }
     /**
      * @hidden
      */
-    onClick() {
-        this.emitOpenClose = true;
-        this.toggleWindow();
+    get isActionSheetExpanded() {
+        return Boolean(this.adaptiveRenderer?.actionSheet?.expanded);
     }
     /**
-     * Toggles the AI Assistant window.
-     */
-    toggleWindow() {
-        if (!this.windowRef) {
-            this.openWindow();
-        }
-        else {
-            this.closeWindow();
-        }
-    }
-    openWindow() {
-        if (!this.keepOutputHistory) {
-            this.promptOutputs = [];
-        }
-        const defaultWindowWidth = 437;
-        const rtl = this.ctx.localization.rtl;
-        const defaultWindowSettings = {
-            left: rtl ? this.buttonElement.offsetLeft - (this.aiWindowSettings.width || defaultWindowWidth) : this.buttonElement.offsetLeft + this.buttonElement.offsetWidth,
-            top: this.buttonElement.offsetTop + this.buttonElement.offsetHeight,
-            width: defaultWindowWidth,
-            title: this.ctx.localization.get('aiAssistantWindowTitle'),
-            cssClass: 'k-grid-assistant-window',
-            content: AiAssistantComponent,
-            autoFocusedElement: '.k-input-inner',
-            appendTo: this.ctx.grid.windowContainer
-        };
-        this.aiWindowSettings = {
-            ...defaultWindowSettings,
-            ...this.aiWindowSettings
-        };
-        this.windowRef = this.windowService.open(this.aiWindowSettings);
-        this.windowRef.window.instance.messages = {
-            closeTitle: this.ctx.localization.get('aiAssistantWindowCloseTitle'),
-            maximizeTitle: this.ctx.localization.get('aiAssistantWindowMaximizeTitle'),
-            minimizeTitle: this.ctx.localization.get('aiAssistantWindowMinimizeTitle'),
-            restoreTitle: this.ctx.localization.get('aiAssistantWindowRestoreTitle')
-        };
-        const aiPrompt = this.windowRef.content.instance;
-        aiPrompt.requestUrl = this.requestUrl;
-        aiPrompt.requestOptions = this.requestOptions;
-        aiPrompt.aiToolDirective = this;
-        aiPrompt.disabledGenerateButton = this.aiPromptSettings?.disabledGenerateButton;
-        aiPrompt.streaming = this.aiPromptSettings?.streaming || false;
-        aiPrompt.activeView = this.aiPromptSettings?.activeView || 0;
-        aiPrompt.aiPromptSettings = { ...this.defaultAiPromptSettings, ...this.aiPromptSettings };
-        if (!aiPrompt.aiPromptSettings.promptOutputs) {
-            aiPrompt.aiPromptSettings.promptOutputs = this.promptOutputs;
-        }
-        if (this.emitOpenClose) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                const event = {
-                    aiWindow: this.windowRef.window.instance,
-                    aiPrompt: this.windowRef.content.instance.aiPrompt
-                };
-                this.open.emit(event);
-                this.emitOpenClose = false;
-            });
-        }
-        this.subs.add(this.windowRef.window.instance.close.subscribe(() => {
-            this.emitOpenClose = true;
-            this.closeWindow(true);
-        }));
-        this.host.selected = true;
-    }
-    closeWindow(focusAnchor = false) {
-        this.windowRef.close();
-        if (this.emitOpenClose) {
-            this.close.emit();
-            this.emitOpenClose = false;
-        }
-        this.windowRef = null;
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.removeAttribute('aria-controls');
-        this.host.selected = false;
-        focusAnchor && this.buttonElement?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, deps: [{ token: i1$7.WindowService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIAssistantToolbarDirective, isStandalone: true, selector: "[kendoGridAIAssistantTool]", inputs: { requestUrl: "requestUrl", requestOptions: "requestOptions", aiWindowSettings: "aiWindowSettings", aiPromptSettings: "aiPromptSettings", autoClose: "autoClose", keepOutputHistory: "keepOutputHistory" }, outputs: { promptRequest: "promptRequest", cancelRequest: "cancelRequest", responseSuccess: "responseSuccess", responseError: "responseError", close: "close", open: "open" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridAIAssistantTool]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$7.WindowService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i54.RefreshService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { requestUrl: [{
-                type: Input
-            }], requestOptions: [{
-                type: Input
-            }], aiWindowSettings: [{
-                type: Input
-            }], aiPromptSettings: [{
-                type: Input
-            }], autoClose: [{
-                type: Input
-            }], keepOutputHistory: [{
-                type: Input
-            }], promptRequest: [{
-                type: Output
-            }], cancelRequest: [{
-                type: Output
-            }], responseSuccess: [{
-                type: Output
-            }], responseError: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }] } });
-
-const createControl = (source) => (acc, key) => {
-    acc[key] = new FormControl(source[key]);
-    return acc;
-};
-const validateColumnsField = (columns) => expandColumns(columns.toArray())
-    .filter(isColumnComponent)
-    .filter(({ field }) => !isValidFieldName(field))
-    .forEach(({ field }) => console.warn(ColumnConfigurationErrorMessages.fieldName(field)));
-const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group, emit }) => emit && isPresent(group)))
-    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
-    .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const isInEditedCell = (element, gridElement, isStacked = false) => (closest(element, matchesClasses('k-grid-edit-cell')) || (isStacked && closest(element, matchesClasses('k-grid-stack-edit-cell')))) &&
-    closest(element, matchesNodeName('kendo-grid')) === gridElement;
-const NOTIFY_DELAY = 500;
-/**
- * Represents the Kendo UI for Angular Data Grid component.
- *
- * Use the `kendo-grid` component to display and manage tabular data.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData"></kendo-grid>
- * ```
- *
- * @remarks
- * Supported children components are:
- * {@link CheckboxColumnComponent},
- * {@link ColumnChooserComponent},
- * {@link ColumnComponent},
- * {@link ColumnGroupComponent},
- * {@link ColumnMenuAutoSizeAllColumnsComponent},
- * {@link ColumnMenuAutoSizeColumnComponent},
- * {@link ColumnMenuChooserComponent},
- * {@link ColumnMenuComponent},
- * {@link ColumnMenuFilterComponent},
- * {@link ColumnMenuItemComponent},
- * {@link ColumnMenuLockComponent},
- * {@link ColumnMenuPositionComponent},
- * {@link ColumnMenuSortComponent},
- * {@link ColumnMenuStickComponent},
- * {@link CommandColumnComponent},
- * {@link CustomMessagesComponent},
- * {@link ExcelComponent},
- * {@link GridSpacerComponent},
- * {@link PDFComponent},
- * {@link RowReorderColumnComponent},
- * {@link SpanColumnComponent},
- * {@link ToolBarComponent}.
- */
-class GridComponent {
-    supportService;
-    selectionService;
-    cellSelectionService;
-    wrapper;
-    groupInfoService;
-    groupsService;
-    changeNotification;
-    detailsService;
-    editService;
-    filterService;
-    pdfService;
-    responsiveService;
-    renderer;
-    excelService;
-    ngZone;
-    scrollSyncService;
-    domEvents;
-    columnResizingService;
-    changeDetectorRef;
-    columnReorderService;
-    columnInfoService;
-    navigationService;
-    sortService;
-    scrollRequestService;
-    localization;
-    ctx;
-    sizingService;
-    adaptiveGridService;
-    rowReorderService;
-    dataMappingService;
-    /**
-     * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
-     * ([more information and example]({% slug binding_grid %})).
-     */
-    set data(value) {
-        this._data = value;
-        if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
-            this.blockArrowSelection = false;
-        }
-        if (this.notifyTimeout) {
-            clearTimeout(this.notifyTimeout);
-            this.notifyTimeout = null;
-        }
-        if (this.rowReorderable) {
-            this.ngZone.runOutsideAngular(() => {
-                this.notifyTimeout = setTimeout(() => {
-                    this.notifyReorderContainers();
-                }, NOTIFY_DELAY);
-            });
-        }
-    }
-    get data() {
-        return this._data;
-    }
-    get hintText() {
-        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
-    }
-    /**
-     * @hidden
-     */
-    get customHintTemplate() {
-        if (this.rowReorderable) {
-            const allColumns = this.columnList.toArray();
-            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
-            return rowReorderColumn.rowDragHintTemplateRef;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get hintContext() {
-        if (this.customHintTemplate) {
-            const draggedRow = this.rowReorderService?.getDraggedRow(this.flatData);
-            return {
-                $implicit: draggedRow?.dataItem,
-                rowIndex: draggedRow?.rowIndex
-            };
-        }
-    }
-    /**
-     * Defines the page size used by the Grid pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
-     */
-    pageSize;
-    /**
-     * Defines the height in pixels for the Grid when `scrollable` is set.
-     * You can also set the height using `style.height` with units like `px`, `%`, `em`, or `rem`.
-     */
-    height;
-    /**
-     * Sets the `style.height` attribute of each Grid data or group header/footer row (`tr`) element in the DOM in pixels.
-     * If some row cells have content that requires more space, the row automatically expands to fit the content.
-     */
-    rowHeight;
-    /**
-     * Enables or disables adaptive mode. Adaptive rendering is off by default.
-     *
-     * @default 'none'
-     */
-    adaptiveMode = 'none';
-    /**
-     * Sets the `style.height` attribute of each Grid detail row (`tr.k-detail-row`) element in the DOM in pixels.
-     * If the detail row has content that requires more space, the row automatically expands to fit the content.
-     */
-    detailRowHeight;
-    /**
-     * Defines the number of records to skip in the pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
-     */
-    get skip() {
-        return this._skip;
-    }
-    set skip(value) {
-        if (typeof value === 'number' && value >= 0) {
-            this._skip = this.rowReorderService.skip = value;
-        }
-    }
-    /**
-     * Defines the scroll mode for the Grid.
-     *
-     * @default 'scrollable'
-     */
-    scrollable = 'scrollable';
-    /**
-     * Enables the selection feature of the Grid. The `selectable` property can be set to `true`, `false`, or an object with additional settings.
-     * [See example](slug:grid_row_selection).
-     *
-     * @default false
-     */
-    selectable = false;
-    /**
-     * Sets the descriptors for sorting the data ([see example]({% slug sorting_grid %})).
-     */
-    set sort(value) {
-        if (isArray(value)) {
-            this._sort = value;
-        }
-    }
-    get sort() {
-        return this._sort;
-    }
-    /**
-     * Specifies the sizing for Grid elements like tables, buttons, and inputs.
-     *
-     * @default 'medium'
-     */
-    set size(size) {
-        this._size = size;
-        if (size === 'none') {
-            this.wrapper.nativeElement.classList.remove('k-grid-sm', 'k-grid-md');
-        }
-        this.sizingService.changes.next(this.size);
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * A function that defines how to track changes for the data rows.
-     * By default, the Grid tracks changes by the index of the data item.
-     * Edited rows are tracked by reference.
-     * [See example](slug:track_changes_grid).
-     */
-    trackBy = defaultTrackBy;
-    /**
-     * Sets the filter descriptor for the data ([see examples]({% slug filtering_grid %})).
-     */
-    filter;
-    /**
-     * Sets the descriptors for grouping the data ([see example]({% slug grouping_grid %})).
-     */
-    set group(value) {
-        if (isArray(value)) {
-            this._group = value;
-        }
-    }
-    get group() {
-        return this._group;
-    }
-    /**
-     * If `true`, renders only columns in the current viewport.
-     *
-     * @default false
-     */
-    virtualColumns = false;
-    /**
-     * @hidden
-     */
-    get showStatusBar() {
-        return !!(this.selectable);
-    }
-    /**
-     * @hidden
-     */
-    get showTopToolbar() {
-        return this.toolbarTemplate && ['top', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
-    /**
-     * @hidden
-     */
-    get showBottomToolbar() {
-        return this.toolbarTemplate && ['bottom', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
-    /**
-     * @hidden
-     */
-    get isLocked() {
-        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
-    }
-    /**
-     * @hidden
-     */
-    get showTopPager() {
-        const position = this.pageable.position;
-        return this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
-    }
-    /**
-     * @hidden
-     */
-    get showBottomPager() {
-        const position = this.pageable.position;
-        return this.pageable !== false && position !== 'top';
-    }
-    /**
-     * @hidden
-     */
-    get hasPager() {
-        return this.showTopPager || this.showBottomPager;
-    }
-    /**
-     * @hidden
-     */
-    get showGroupPanel() {
-        const isGroupable = this.groupable && this.groupable.enabled !== false;
-        const isGrouped = this.group?.length > 0;
-        return this.isStacked ? isGroupable && isGrouped : isGroupable;
-    }
-    /**
-     * @hidden
-     */
-    get groupableEmptyText() {
-        return this.groupable.emptyText;
-    }
-    /**
-     * @hidden
-     */
-    get marqueeSelection() {
-        return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptiveModeEnabled() {
-        return this.adaptiveMode === 'auto';
-    }
-    /**
-     * @hidden
-     *
-     * The `isOpen` property is used to determine if a Grid Popup or ActionSheet is open.
-     */
-    get isOpen() {
-        return isPresent(this.adaptiveGridService.popupRef) || this.isActionSheetExpanded;
-    }
-    /**
-     * @hidden
-     */
-    get isActionSheetExpanded() {
-        return Boolean(this.adaptiveRenderer?.actionSheet?.expanded);
-    }
-    /**
-     * @hidden
+     * @hidden
      */
     gridData = () => { return this.flatData; };
     /**
@@ -30686,7 +30424,6 @@ class GridComponent {
         this._customToolbarTemplate = customToolbarTemplate;
     }
     columnMenuTemplates;
-    aiAssistantToolbarTool;
     lockedHeader;
     header;
     footer = new QueryList();
@@ -32256,7 +31993,7 @@ class GridComponent {
             ColumnMenuService,
             MenuTabbingService,
             DataMappingService
-        ], queries: [{ propertyName: "aiAssistantToolbarTool", first: true, predicate: AIAssistantToolbarDirective, descendants: true }, { propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "windowContainer", first: true, predicate: ["windowContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "windowContainer", first: true, predicate: ["windowContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -32632,6 +32369,15 @@ class GridComponent {
 
             i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
             columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
+
+            i18n-multiCheckboxFilterSearchPlaceholder="kendo.grid.multiCheckboxFilterSearchPlaceholder|The placeholder text for the multi-checkbox filter search input"
+            multiCheckboxFilterSearchPlaceholder="Search..."
+
+            i18n-multiCheckboxFilterSelectAllLabel="kendo.grid.multiCheckboxFilterSelectAllLabel|The label for the multi-checkbox filter select all option"
+            multiCheckboxFilterSelectAllLabel="Select all"
+
+            i18n-multiCheckboxFilterSelectedItemsCount="kendo.grid.multiCheckboxFilterSelectedItemsCount|The text for the multi-checkbox filter selected items count"
+            multiCheckboxFilterSelectedItemsCount="{{ '{selectedItemsCount} selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -33050,10 +32796,10 @@ class GridComponent {
             </kendo-pager-info>
         </ng-template>
         <div #dialogContainer></div>
+        <div #windowContainer></div>
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isVirtual" (resize)="onResize()"></kendo-resize-sensor>
-        <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass", "rowHeight", "detailRowHeight"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "component", type: i53.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i53.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i53.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i53.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i53.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i53.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i53.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i53.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i53.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], encapsulation: i0.ViewEncapsulation.None });
@@ -33492,6 +33238,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
             columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
+
+            i18n-multiCheckboxFilterSearchPlaceholder="kendo.grid.multiCheckboxFilterSearchPlaceholder|The placeholder text for the multi-checkbox filter search input"
+            multiCheckboxFilterSearchPlaceholder="Search..."
+
+            i18n-multiCheckboxFilterSelectAllLabel="kendo.grid.multiCheckboxFilterSelectAllLabel|The label for the multi-checkbox filter select all option"
+            multiCheckboxFilterSelectAllLabel="Select all"
+
+            i18n-multiCheckboxFilterSelectedItemsCount="kendo.grid.multiCheckboxFilterSelectedItemsCount|The text for the multi-checkbox filter selected items count"
+            multiCheckboxFilterSelectedItemsCount="{{ '{selectedItemsCount} selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -33910,10 +33665,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </kendo-pager-info>
         </ng-template>
         <div #dialogContainer></div>
+        <div #windowContainer></div>
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isVirtual" (resize)="onResize()"></kendo-resize-sensor>
-        <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `,
@@ -34122,9 +33877,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], columnMenuTemplates: [{
                 type: ContentChildren,
                 args: [ColumnMenuTemplateDirective]
-            }], aiAssistantToolbarTool: [{
-                type: ContentChild,
-                args: [AIAssistantToolbarDirective]
             }], lockedHeader: [{
                 type: ViewChild,
                 args: ['lockedHeader']
@@ -34722,7 +34474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example](slug:inline_editing_grid#using-template-driven-forms)).
  *
  * @example
  * ```html
@@ -34799,7 +34551,7 @@ const markAllAsTouched = (control) => {
 };
 
 /**
- * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:inline_editing_grid#using-reactive-forms)).
  *
  * @example
  * ```html
@@ -34848,7 +34600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
+ * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example](slug:editing_incell_grid#quick-setup)).
  *
  * @example
  * ```html
@@ -34934,7 +34686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the Kendo UI Grid external editing directive. The directive manages editing operations in the Grid when using the
- * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ * External Form ([see example](slug:external_editing_grid#quick-setup)).
  *
  * @example
  * ```typescript
@@ -35585,6 +35337,9 @@ class GridClipboardDirective {
         const isPaste = operationType === 'paste';
         const pastedData = args.clipboardData.getData('text');
         const visibleCols = this.host.columns.toArray().filter(c => c.isVisible);
+        if (visibleCols.some(c => c.orderIndex > 0)) { // columns have been reordered
+            visibleCols.sort((a, b) => a.orderIndex - b.orderIndex);
+        }
         const data = isPaste ?
             {
                 dataString: pastedData,
@@ -37199,325 +36954,1003 @@ class CancelCommandToolbarDirective extends ToolbarEditingToolBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, deps: [{ token: EditService }, { token: i54.ToolBarButtonComponent }, { token: SelectionService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CancelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridCancelTool]", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCancelTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+
+let incrementingId = 0;
+/**
+ * Represents the toolbar tool for grouping columns of the Grid.
+ * Use this directive on any `kendo-toolbar-button` inside a ToolbarComponent in the Grid.
+ * When you click the toolbar button with this directive, the `group` event is triggered.
+ *
+ * @example
+ * ```html
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Group" kendoGridGroupTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link ToolBarButtonComponent}.
+ */
+class GroupCommandToolbarDirective {
+    host;
+    popupService;
+    ctx;
+    ngZone;
+    renderer;
+    adaptiveGridService;
+    popupRef;
+    nextId = incrementingId++;
+    toolSubs = new Subscription();
+    popupSubs;
+    actionSheetCloseSub;
+    removeClickListener;
+    constructor(host, popupService, ctx, ngZone, renderer, adaptiveGridService) {
+        this.host = host;
+        this.popupService = popupService;
+        this.ctx = ctx;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.adaptiveGridService = adaptiveGridService;
+    }
+    ngOnInit() {
+        this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
+        this.toolSubs.add(this.ctx.grid.groupChange.subscribe(group => {
+            this.host.showBadge = this.isGroupingApplied(group);
+        }));
+        this.host.hasBadgeContainer = true;
+        this.host.showBadge = this.isGroupingApplied(this.ctx.grid.group);
+        const hasToolbarIcon = isPresent$1(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
+        const hasOverflowIcon = isPresent$1(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
+        const hasIcon = hasToolbarIcon && hasOverflowIcon;
+        const hasSvgIcon = isPresent$1(this.host.toolbarOptions.svgIcon) && isPresent$1(this.host.overflowOptions.svgIcon);
+        if (!hasIcon) {
+            this.host.icon = 'group';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = groupIcon;
+        }
+    }
+    ngAfterViewInit() {
+        if (!isPresent$1(this.host.text)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.host.text = this.ctx.localization.get(`groupToolbarToolText`);
+            });
+        }
+        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('groupToolbarToolText'));
+    }
+    ngOnDestroy() {
+        if (this.toolSubs) {
+            this.toolSubs.unsubscribe();
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+        }
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.actionSheetCloseSub) {
+            this.actionSheetCloseSub.unsubscribe();
+            this.actionSheetCloseSub = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'groupToolbarTool';
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
+                this.host.selected = true;
+                this.actionSheetCloseSub = this.ctx.grid.adaptiveRenderer.actionSheet.collapse.subscribe(() => this.host.selected = false);
+            }
+        }
+        else {
+            if (this.popupRef) {
+                this.closePopup();
+                return;
+            }
+            this.openPopup();
+        }
+    }
+    openPopup() {
+        const direction = this.ctx.localization.rtl ? 'right' : 'left';
+        this.popupRef = this.popupService.open({
+            anchor: this.buttonElement,
+            content: GroupToolbarToolComponent,
+            popupClass: 'k-grid-columnmenu-popup',
+            positionMode: 'absolute',
+            anchorAlign: { vertical: 'bottom', horizontal: direction },
+            popupAlign: { vertical: 'top', horizontal: direction }
+        });
+        this.adaptiveGridService.popupRef = this.popupRef;
+        this.setPopupAttributes();
+        this.host.selected = true;
+        this.ngZone.runOutsideAngular(() => {
+            if (!isDocumentAvailable()) {
+                return;
+            }
+            this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
+                if (this.popupRef && !closest$1(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
+                    this.ngZone.run(() => {
+                        this.closePopup();
+                    });
+                }
+            });
+        });
+        this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+            this.popupSubs?.unsubscribe();
+            this.popupSubs = null;
+            this.closePopup();
+        });
+        this.initPopupProperties();
+    }
+    setPopupAttributes() {
+        const popupElement = this.popupRef.popupElement;
+        const popupId = `k-group-tool-${this.nextId}-popup`;
+        const popupAriaElement = popupElement.querySelector('.k-popup');
+        this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+        this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+        this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'true');
+        this.buttonElement?.setAttribute('aria-controls', popupId);
+    }
+    initPopupProperties() {
+        this.popupRef.content.instance.ctx = this.ctx;
+        this.popupRef.content.instance.hostButton = this.host;
+        this.popupSubs.add(this.popupRef.content.instance.groupClear.subscribe(() => {
+            this.closePopup();
+        }));
+        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
+            this.closePopup();
+        }));
+    }
+    closePopup() {
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+            this.popupSubs = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    get buttonElement() {
+        return this.host.getButton();
+    }
+    isGroupingApplied(group) {
+        return isPresent$1(group) && group.length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i54.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupCommandToolbarDirective, isStandalone: true, selector: "[kendoGridGroupTool]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
+
+/**
+ * Stores the row and cell highlight state of the Grid.
+ *
+ * @example
+ * ```typescript
+ * <kendo-grid kendoGridHighlight="ProductID"></kendo-grid>
+ *
+ * <kendo-grid [kendoGridHighlight]="myKey"></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
+ */
+class HighlightDirective {
+    ctx;
+    /**
+     * Stores the highlighted items keys.
+     * @default []
+     */
+    highlightedKeys = [];
+    /**
+     * Sets the item key to store in `highlightedKeys`. The Grid uses the row index as the default item key.
+     */
+    highlightItemKey;
+    /**
+     * Sets the column key for a data cell. The Grid uses the column index as the default column key.
+     */
+    highlightColumnKey;
+    rowHighlightState = new Set();
+    cellHighlightState = new PairSet();
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.ctx.highlightDirective = this;
+    }
+    ngOnChanges(changes) {
+        if (isPresent$1(changes['highlightedKeys'])) {
+            this.setState(this.highlightedKeys);
+        }
+    }
+    ngOnDestroy() {
+        this.reset();
+        this.ctx.highlightDirective = null;
+    }
+    /**
+     * @hidden
+     */
+    isRowHighlighted(row) {
+        return this.rowHighlightState.has(this.getItemKey(row));
+    }
+    /**
+     * @hidden
+     */
+    isCellHighlighted(row, column, colIndex) {
+        const highlightItem = this.getHighlightItem(row, column, colIndex);
+        return this.cellHighlightState.has(highlightItem.itemKey, highlightItem.columnKey);
+    }
+    getItemKey(row) {
+        if (this.highlightItemKey) {
+            if (typeof this.highlightItemKey === "string") {
+                return row.data?.[this.highlightItemKey];
+            }
+            if (typeof this.highlightItemKey === "function") {
+                return this.highlightItemKey(row);
+            }
+        }
+        return row.index;
+    }
+    getHighlightItem(row, col, colIndex) {
+        const itemIdentifiers = {};
+        itemIdentifiers.itemKey = this.getItemKey(row);
+        if (!isPresent$1(col) && !isPresent$1(colIndex)) {
+            return itemIdentifiers;
+        }
+        if (this.highlightColumnKey) {
+            if (typeof this.highlightColumnKey === "string") {
+                itemIdentifiers.columnKey = row.dataItem[this.highlightColumnKey];
+            }
+            if (typeof this.highlightColumnKey === "function") {
+                itemIdentifiers.columnKey = this.highlightColumnKey(col, colIndex);
+            }
+        }
+        return {
+            itemKey: itemIdentifiers.itemKey,
+            columnKey: itemIdentifiers.columnKey ? itemIdentifiers.columnKey : colIndex
+        };
+    }
+    setState(highlightedKeys) {
+        this.reset();
+        if (!highlightedKeys || highlightedKeys.length === 0) {
+            return;
+        }
+        const rowHighlights = highlightedKeys.filter(item => !isPresent$1(item.columnKey));
+        const cellHighlights = highlightedKeys.filter(item => isPresent$1(item.columnKey));
+        if (cellHighlights.length > 0) {
+            this.cellHighlightState = new PairSet(cellHighlights, 'itemKey', 'columnKey');
+        }
+        if (rowHighlights.length > 0) {
+            rowHighlights.forEach(item => {
+                this.rowHighlightState.add(item.itemKey);
+            });
+        }
+    }
+    reset() {
+        this.rowHighlightState.clear();
+        this.cellHighlightState.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HighlightDirective, isStandalone: true, selector: "[kendoGridHighlight]", inputs: { highlightedKeys: "highlightedKeys", highlightItemKey: ["kendoGridHighlight", "highlightItemKey"], highlightColumnKey: "highlightColumnKey" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridHighlight]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { highlightedKeys: [{
+                type: Input
+            }], highlightItemKey: [{
+                type: Input,
+                args: ["kendoGridHighlight"]
+            }], highlightColumnKey: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+const DEFAULT_AI_REQUEST_OPTIONS = {
+    headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+    }),
+    role: 'user',
+    method: 'POST',
+    responseType: 'json'
+};
+/**
+ * Represents the event data when the AI Assistant request completes successfully.
+ */
+class GridToolbarAIResponseSuccessEvent extends PreventableEvent$1 {
+    /**
+     * The HTTP response from the AI service.
+     */
+    response;
+    constructor(response) {
+        super();
+        this.response = response;
+    }
+}
+/**
+ * Represents the event data when the AI Assistant request completes with an error.
+ */
+class GridToolbarAIResponseErrorEvent extends PreventableEvent$1 {
+    /**
+     * The HTTP error response from the AI service.
+     */
+    error;
+    constructor(error) {
+        super();
+        this.error = error;
+    }
+}
+
+/**
+ * @hidden
+ * Converts date strings in a filter to Date objects.
+ */
+const convertDateStringsInFilter = (filter) => {
+    if (!filter) {
+        return filter;
+    }
+    if (filter.filters && Array.isArray(filter.filters)) {
+        return {
+            ...filter,
+            filters: filter.filters.map(f => convertDateStringsInFilter(f))
+        };
+    }
+    if (filter.field && filter.value !== undefined) {
+        if (typeof filter.value === 'string' && isDateOperator(filter.operator)) {
+            const date = parseDate(filter.value);
+            return {
+                ...filter,
+                value: date || filter.value
+            };
+        }
+    }
+    return filter;
+};
+/**
+ * @hidden
+ */
+const isDateOperator = (operator) => {
+    const dateOperators = [
+        'eq', 'neq', 'lt', 'lte', 'gt', 'gte'
+    ];
+    return dateOperators.includes(operator);
+};
+/**
+ * @hidden
+ * Processes cell highlights for a specific filter and item.
+ */
+const processCellHighlights = (filter, rowIndex, columns, highlightItems) => {
+    Object.keys(filter.cells).forEach((columnField) => {
+        const actualColumnIndex = Array.from(columns).findIndex((col) => col.field === columnField);
+        if (actualColumnIndex !== -1) {
+            highlightItems.push({
+                itemKey: rowIndex,
+                columnKey: actualColumnIndex,
+            });
+        }
+    });
+};
+/**
+ * @hidden
+ * Processes filtered results and adds highlight items.
+ */
+const processFilteredResults = (filteredResults, data, filter, columns, highlightItems) => {
+    filteredResults?.forEach((item) => {
+        const rowIndex = data.findIndex((dataItem) => dataItem === item);
+        if (filter.cells && Object.keys(filter.cells).length > 0) {
+            processCellHighlights(filter, rowIndex, columns, highlightItems);
+        }
+        else {
+            highlightItems.push({
+                itemKey: rowIndex,
+            });
+        }
+    });
+};
+/**
+ * @hidden
+ * Highlights items in a grid based on the provided filters and columns.
+ * @param data - The data to be highlighted.
+ * @param filters - The composite highlight descriptors containing the filters and logic.
+ * @param columns - The columns of the grid.
+ * @returns An array of HighlightItem objects representing the highlighted items.
+ */
+const highlightBy = (data, filters, columns) => {
+    const highlightItems = [];
+    filters.forEach((filter) => {
+        const processedFilters = filter.filters.map((filter) => convertDateStringsInFilter(filter));
+        const filteredResults = filterBy(data, {
+            logic: filter.logic || "and",
+            filters: processedFilters,
+        });
+        processFilteredResults(filteredResults, data, filter, columns, highlightItems);
+    });
+    return highlightItems;
+};
+
+/**
+ * @hidden
+ */
+class AiAssistantComponent {
+    http;
+    ctx;
+    columnInfoService;
+    aiPrompt;
+    activeView = 0;
+    requestUrl;
+    requestOptions;
+    aiPromptSettings;
+    aiToolDirective;
+    streaming = false;
+    disabledGenerateButton = false;
+    lastMessage;
+    requestData;
+    currentRequestSubscription = null;
+    //Remove this when the AI Assistant has a built-in loading indicator
+    loadingOutput = { id: 'k-loading-item', output: '', prompt: '' };
+    columns = [];
+    idCounter = 0;
+    constructor(http, ctx, columnInfoService) {
+        this.http = http;
+        this.ctx = ctx;
+        this.columnInfoService = columnInfoService;
+    }
+    ngAfterViewInit() {
+        this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({ field: col.field }));
+    }
+    ngOnDestroy() {
+        this.unsubscribeCurrentRequest();
+    }
+    message(message) {
+        return this.ctx.localization.get(message);
+    }
+    cancelRequest() {
+        this.aiToolDirective.cancelRequest.emit();
+        this.unsubscribeCurrentRequest();
+        this.streaming = false;
+    }
+    onPromptRequest(ev) {
+        if (this.aiToolDirective.promptOutputs.length === 0) {
+            this.aiToolDirective.promptOutputs.push(this.loadingOutput);
+        }
+        this.unsubscribeCurrentRequest();
+        this.streaming = true;
+        this.activeView = 1;
+        if (ev.prompt) {
+            this.lastMessage = ev.prompt;
+        }
+        this.requestData = {
+            columns: this.columns,
+            promptMessage: ev.prompt,
+            url: this.requestUrl,
+            requestOptions: {
+                ...this.requestOptions
+            }
+        };
+        if (!this.requestOptions.body) {
+            const requestBody = {
+                role: this.requestData.requestOptions.role,
+                contents: [
+                    {
+                        text: this.requestData.promptMessage
+                    }
+                ],
+                columns: this.requestData.columns
+            };
+            this.requestData.requestOptions.body = requestBody;
+        }
+        this.aiToolDirective.promptRequest.emit({ requestData: this.requestData, isRetry: ev.isRetry });
+        if (!this.requestUrl) {
+            return;
+        }
+        this.currentRequestSubscription = this.sendPromptRequest().subscribe((res) => {
+            if (res.body) {
+                this.processResponse(res);
+                this.streaming = false;
+            }
+            this.currentRequestSubscription = null;
+        }, (error) => {
+            this.handleError(error);
+            this.streaming = false;
+            this.currentRequestSubscription = null;
+        });
+    }
+    sendPromptRequest() {
+        const request = new HttpRequest(this.requestData.requestOptions.method, this.requestData.url, this.requestData.requestOptions.body, this.requestData.requestOptions);
+        return this.http.request(request);
+    }
+    processResponse(response) {
+        if (this.aiToolDirective.autoClose) {
+            this.aiToolDirective.emitOpenClose = true;
+            this.aiToolDirective.toggleWindow();
+        }
+        const responseBody = response.body;
+        const responseSuccessEvent = new GridToolbarAIResponseSuccessEvent(response);
+        this.aiToolDirective.responseSuccess.emit(responseSuccessEvent);
+        if (responseSuccessEvent.isDefaultPrevented()) {
+            this.deleteLoadingOutput();
+            return;
+        }
+        const isFilterable = Boolean(this.ctx.grid.filterable);
+        const isSortable = Boolean(this.ctx.grid.sortable);
+        const isGroupable = Boolean(this.ctx.grid.groupable);
+        if (isFilterable && responseBody.filter) {
+            this.processFilterResponse(responseBody.filter);
+        }
+        if (isSortable && responseBody.sort) {
+            this.processArrayResponse(responseBody.sort, this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
+        }
+        if (isGroupable && responseBody.group) {
+            this.processArrayResponse(responseBody.group, this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
+        }
+        if (this.ctx.highlightDirective && responseBody.highlight) {
+            this.processHighlightResponse(responseBody.highlight);
+        }
+        const responseContentStart = [`${this.ctx.localization.get('aiAssistantOutputCardBodyContent')} \n`];
+        const responseContentBody = responseBody.messages
+            .map((output, idx) => `${idx + 1} ${output}`)
+            .join('\n');
+        const output = {
+            id: this.idCounter++,
+            title: this.ctx.localization.get('aiAssistantOutputCardTitle'),
+            prompt: this.lastMessage,
+            output: responseContentStart.concat(responseContentBody).join(''),
+        };
+        this.deleteLoadingOutput();
+        this.aiToolDirective.promptOutputs.unshift(output);
+    }
+    handleError(error) {
+        const responseErrorEvent = new GridToolbarAIResponseErrorEvent(error);
+        this.aiToolDirective.responseError.emit(responseErrorEvent);
+        if (responseErrorEvent.isDefaultPrevented()) {
+            this.deleteLoadingOutput();
+            return;
+        }
+        const output = {
+            id: this.idCounter++,
+            prompt: this.lastMessage,
+            output: error.message
+        };
+        this.deleteLoadingOutput();
+        this.aiToolDirective.promptOutputs.unshift(output);
+    }
+    deleteLoadingOutput() {
+        if (this.aiToolDirective.promptOutputs[0]?.id === this.loadingOutput.id) {
+            this.aiToolDirective.promptOutputs.splice(0, 1);
+        }
+    }
+    unsubscribeCurrentRequest() {
+        if (this.currentRequestSubscription) {
+            this.currentRequestSubscription.unsubscribe();
+            this.currentRequestSubscription = null;
+        }
+    }
+    processArrayResponse(newItems, currentItems, getField, updateGrid) {
+        if (newItems?.length === 0) {
+            updateGrid([]);
+        }
+        else if (newItems?.length) {
+            let mergedArray = [...newItems];
+            const newFields = newItems.map(getField);
+            const existingItemsToKeep = currentItems.filter(item => !newFields.includes(getField(item)));
+            mergedArray = [...mergedArray, ...existingItemsToKeep];
+            updateGrid(mergedArray);
+        }
+    }
+    processHighlightResponse(highlight) {
+        if (highlight.length === 0) {
+            this.ctx.highlightDirective['setState']([]);
+            return;
+        }
+        const highlightedItems = highlightBy(this.ctx.dataBindingDirective['originalData'], highlight, this.columns);
+        this.ctx.highlightDirective['setState'](highlightedItems);
+    }
+    processFilterResponse(filter) {
+        const processedFilter = convertDateStringsInFilter(filter);
+        const clearFilter = Object.keys(processedFilter).length === 0;
+        if (clearFilter) {
+            this.ctx.grid.filterChange.next(undefined);
+        }
+        else if (processedFilter?.filters.length) {
+            const currentFilter = this.ctx.grid.currentState.filter;
+            let mergedFilter = processedFilter;
+            if (currentFilter && currentFilter.filters?.length > 0) {
+                mergedFilter = {
+                    logic: 'and',
+                    filters: [
+                        currentFilter,
+                        processedFilter
+                    ]
+                };
+            }
+            this.ctx.grid.filterChange.next(mergedFilter);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1$8.HttpClient }, { token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
+        <kendo-aiprompt
+            #aiPrompt
+            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
+            [showOutputRating]="aiPromptSettings?.showOutputRating"
+            [streaming]="streaming"
+            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
+            [(activeView)]="activeView"
+            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
+            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
+            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
+            [promptOutputs]="aiPromptSettings?.promptOutputs"
+            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
+            (promptRequest)="onPromptRequest($event)"
+            (promptRequestCancel)="cancelRequest()"
+            >
+            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
+            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
+            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
+                <div class="k-card">
+                    <div class="k-card-header">
+                        <div class="k-card-title">
+                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
+                        </div>
+                        <div class="k-card-subtitle">
+                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                        </div>
+                    </div>
+                    <div class="k-card-body">
+                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
+                    </div>
+                    <div class="k-card-actions">
+                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
+                <p>{{output.output}}</p>
+            </ng-template>
+            <kendo-aiprompt-messages
+                [generateOutput]="message('aiAssistantApplyButtonText')"
+            ></kendo-aiprompt-messages>
+        </kendo-aiprompt>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: ["activeView", "promptCommands", "promptSuggestions", "promptOutputs", "showOutputRating", "streaming", "speechToTextButton", "textAreaSettings", "generateButtonSVGIcon", "generateButtonIcon", "disabledGenerateButton"], outputs: ["activeViewChange", "promptRequest", "commandExecute", "outputCopy", "outputRatingChange", "promptRequestCancel"], exportAs: ["kendoAIPrompt"] }, { kind: "component", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages" }, { kind: "component", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view" }, { kind: "component", type: OutputViewComponent, selector: "kendo-aiprompt-output-view" }, { kind: "directive", type: AIPromptOutputTemplateDirective, selector: "[kendoAIPromptOutputTemplate]" }, { kind: "directive", type: AIPromptOutputBodyTemplateDirective, selector: "[kendoAIPromptOutputBodyTemplate]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoGridCancelTool]',
-                    standalone: true
+                    standalone: true,
+                    imports: [NgIf, AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective],
+                    template: `
+        <kendo-aiprompt
+            #aiPrompt
+            [promptSuggestions]="aiPromptSettings?.promptSuggestions"
+            [showOutputRating]="aiPromptSettings?.showOutputRating"
+            [streaming]="streaming"
+            [speechToTextButton]="aiPromptSettings?.speechToTextButton"
+            [(activeView)]="activeView"
+            [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
+            [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
+            [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
+            [promptOutputs]="aiPromptSettings?.promptOutputs"
+            [textAreaSettings]="aiPromptSettings?.textAreaSettings"
+            (promptRequest)="onPromptRequest($event)"
+            (promptRequestCancel)="cancelRequest()"
+            >
+            <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
+            <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
+            <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
+                <div class="k-card">
+                    <div class="k-card-header">
+                        <div class="k-card-title">
+                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
+                        </div>
+                        <div class="k-card-subtitle">
+                            <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                        </div>
+                    </div>
+                    <div class="k-card-body">
+                        <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
+                    </div>
+                    <div class="k-card-actions">
+                        <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
+                <p>{{output.output}}</p>
+            </ng-template>
+            <kendo-aiprompt-messages
+                [generateOutput]="message('aiAssistantApplyButtonText')"
+            ></kendo-aiprompt-messages>
+        </kendo-aiprompt>
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i54.ToolBarButtonComponent }, { type: SelectionService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.HttpClient }, { type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { aiPrompt: [{
+                type: ViewChild,
+                args: [AIPromptComponent]
+            }] } });
 
-let incrementingId = 0;
 /**
- * Represents the toolbar tool for grouping columns of the Grid.
+ * Represents an AI Assistant tool of the Grid.
  * Use this directive on any `kendo-toolbar-button` inside a ToolbarComponent in the Grid.
- * When you click the toolbar button with this directive, the `group` event is triggered.
  *
  * @example
- * ```html
+ * ```html-no-run
  * <kendo-grid>
  *      <kendo-toolbar>
- *         <kendo-toolbar-button text="Group" kendoGridGroupTool></kendo-toolbar-button>
+ *         <kendo-toolbar-button kendoGridAIAssistantTool></kendo-toolbar-button>
  *      </kendo-toolbar>
  * </kendo-grid>
  * ```
  * @remarks
  * Applied to: {@link ToolBarButtonComponent}.
  */
-class GroupCommandToolbarDirective {
+class AIAssistantToolbarDirective extends ToolbarToolBase {
+    windowService;
     host;
-    popupService;
     ctx;
-    ngZone;
-    renderer;
-    adaptiveGridService;
-    popupRef;
-    nextId = incrementingId++;
-    toolSubs = new Subscription();
-    popupSubs;
-    actionSheetCloseSub;
-    removeClickListener;
-    constructor(host, popupService, ctx, ngZone, renderer, adaptiveGridService) {
+    zone;
+    refresh;
+    /**
+     * The URL to which the AI Assistant tool sends the AI request.
+     * - When you set this property, the AI Assistant tool sends and handles an HTTP request to the provided `requestUrl`. You can handle the `promptRequest` event to modify the request options before the tool sends it.
+     * - When you do not set this property, the AI Assistant tool does not send an HTTP request. You should handle the `promptRequest` event to send and handle a custom HTTP request.
+     */
+    requestUrl;
+    /**
+     * Configures the request options that the AI Assistant tool sends with the AI request.
+     *
+     * @default { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), role: 'user', method: 'POST', responseType: 'json', withCredentials: false }
+     */
+    requestOptions;
+    /**
+     * Configures the initial settings for the AI Assistant Window when opened.
+     */
+    aiWindowSettings;
+    /**
+     * Configures the initial settings for the AI Prompt component that the AI Assistant Window component uses when opened.
+     */
+    aiPromptSettings;
+    /**
+     * Determines whether to close the AI Assistant Window automatically after a successful request.
+     * @default true
+     */
+    autoClose = true;
+    /**
+     * Determines whether to keep the AI Prompt's outputs after closing the AI Assistant Window.
+     * @default false
+     */
+    keepOutputHistory = false;
+    /**
+     * Emits an event before the AI Assistant tool sends the AI request.
+     *  - When you provide a `requestUrl`, you can handle the event to modify the request options.
+     *  - When you do not provide a `requestUrl`, you can handle the event to perform an entirely custom request.
+     */
+    promptRequest = new EventEmitter();
+    /**
+     * Emits an event when the user clicks the cancel button.
+     */
+    cancelRequest = new EventEmitter();
+    /**
+     * Emits an event when the AI Assistant tool completes the AI request successfully.
+     * The event contains the response from the AI service and is preventable to allow stopping the default response handling.
+     */
+    responseSuccess = new EventEmitter();
+    /**
+     * Emits an event when the AI Assistant tool completes the AI request with an error.
+     * The event contains the error response from the AI service and is preventable to allow stopping the default error handling.
+     */
+    responseError = new EventEmitter();
+    /**
+     * Emits an event when the AI Assistant tool closes.
+     */
+    close = new EventEmitter();
+    /**
+     * Emits an event when the AI Assistant tool opens.
+     */
+    open = new EventEmitter();
+    tableWizardIcon = tableWizardIcon;
+    emitOpenClose = false;
+    promptOutputs = [];
+    windowRef;
+    subs = new Subscription();
+    defaultAiPromptSettings = {
+        speechToTextButton: true,
+        generateButtonSVGIcon: this.tableWizardIcon,
+        generateButtonIcon: 'table-wizard'
+    };
+    constructor(windowService, host, ctx, zone, refresh, cdr) {
+        super(host, ToolbarToolName.aiAssistant, ctx, zone, cdr);
+        this.windowService = windowService;
         this.host = host;
-        this.popupService = popupService;
         this.ctx = ctx;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.adaptiveGridService = adaptiveGridService;
+        this.zone = zone;
+        this.refresh = refresh;
+        this.host.rounded = 'full';
+        this.host.themeColor = 'primary';
+        this.host.showText = 'never';
     }
     ngOnInit() {
-        this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
-        this.toolSubs.add(this.ctx.grid.groupChange.subscribe(group => {
-            this.host.showBadge = this.isGroupingApplied(group);
-        }));
-        this.host.hasBadgeContainer = true;
-        this.host.showBadge = this.isGroupingApplied(this.ctx.grid.group);
+        this.subs.add(this.host.click.subscribe(() => this.onClick()));
         const hasToolbarIcon = isPresent$1(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
         const hasOverflowIcon = isPresent$1(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
         const hasIcon = hasToolbarIcon && hasOverflowIcon;
         const hasSvgIcon = isPresent$1(this.host.toolbarOptions.svgIcon) && isPresent$1(this.host.overflowOptions.svgIcon);
         if (!hasIcon) {
-            this.host.icon = 'group';
+            this.host.icon = 'sparkles';
         }
         if (!hasSvgIcon) {
-            this.host.svgIcon = groupIcon;
+            this.host.svgIcon = sparklesIcon;
         }
+        this.requestOptions = { ...DEFAULT_AI_REQUEST_OPTIONS, ...this.requestOptions };
     }
     ngAfterViewInit() {
-        if (!isPresent$1(this.host.text)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                this.host.text = this.ctx.localization.get(`groupToolbarToolText`);
-            });
-        }
-        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.setAttribute('title', this.ctx.localization.get('groupToolbarToolText'));
-    }
-    ngOnDestroy() {
-        if (this.toolSubs) {
-            this.toolSubs.unsubscribe();
-        }
-        if (this.popupSubs) {
-            this.popupSubs.unsubscribe();
-        }
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.actionSheetCloseSub) {
-            this.actionSheetCloseSub.unsubscribe();
-            this.actionSheetCloseSub = null;
-        }
-        if (this.removeClickListener) {
-            this.removeClickListener();
-            this.removeClickListener = null;
-        }
-    }
-    onClick(e) {
-        e.preventDefault();
-        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
-            if (!this.ctx.grid.isActionSheetExpanded) {
-                this.adaptiveGridService.viewType = 'groupToolbarTool';
-                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
-                this.host.selected = true;
-                this.actionSheetCloseSub = this.ctx.grid.adaptiveRenderer.actionSheet.collapse.subscribe(() => this.host.selected = false);
-            }
-        }
-        else {
-            if (this.popupRef) {
-                this.closePopup();
-                return;
+        super.ngAfterViewInit();
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+            this.buttonElement?.setAttribute('aria-expanded', 'false');
+            const needsTitle = this.host.showText !== 'always' && this.host.showText !== 'toolbar';
+            if (needsTitle && !this.host.title) {
+                this.buttonElement?.setAttribute('title', this.ctx.localization.get('aiAssistantToolbarToolText'));
             }
-            this.openPopup();
-        }
-    }
-    openPopup() {
-        const direction = this.ctx.localization.rtl ? 'right' : 'left';
-        this.popupRef = this.popupService.open({
-            anchor: this.buttonElement,
-            content: GroupToolbarToolComponent,
-            popupClass: 'k-grid-columnmenu-popup',
-            positionMode: 'absolute',
-            anchorAlign: { vertical: 'bottom', horizontal: direction },
-            popupAlign: { vertical: 'top', horizontal: direction }
         });
-        this.adaptiveGridService.popupRef = this.popupRef;
-        this.setPopupAttributes();
-        this.host.selected = true;
-        this.ngZone.runOutsideAngular(() => {
-            if (!isDocumentAvailable()) {
-                return;
+        this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
+            if (tool.overflows && this.windowRef) {
+                this.windowRef.close();
             }
-            this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
-                if (this.popupRef && !closest$1(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
-                    this.ngZone.run(() => {
-                        this.closePopup();
-                    });
-                }
-            });
-        });
-        this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
-            this.popupSubs?.unsubscribe();
-            this.popupSubs = null;
-            this.closePopup();
-        });
-        this.initPopupProperties();
-    }
-    setPopupAttributes() {
-        const popupElement = this.popupRef.popupElement;
-        const popupId = `k-group-tool-${this.nextId}-popup`;
-        const popupAriaElement = popupElement.querySelector('.k-popup');
-        this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
-        this.renderer.setAttribute(popupAriaElement, 'id', popupId);
-        this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-        this.buttonElement?.setAttribute('aria-expanded', 'true');
-        this.buttonElement?.setAttribute('aria-controls', popupId);
-    }
-    initPopupProperties() {
-        this.popupRef.content.instance.ctx = this.ctx;
-        this.popupRef.content.instance.hostButton = this.host;
-        this.popupSubs.add(this.popupRef.content.instance.groupClear.subscribe(() => {
-            this.closePopup();
         }));
-        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
-            this.closePopup();
-        }));
-    }
-    closePopup() {
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.removeAttribute('aria-controls');
-        this.host.selected = false;
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.popupSubs) {
-            this.popupSubs.unsubscribe();
-            this.popupSubs = null;
-        }
-        if (this.removeClickListener) {
-            this.removeClickListener();
-            this.removeClickListener = null;
-        }
-    }
-    get buttonElement() {
-        return this.host.getButton();
-    }
-    isGroupingApplied(group) {
-        return isPresent$1(group) && group.length > 0;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i54.ToolBarButtonComponent }, { token: i2.PopupService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupCommandToolbarDirective, isStandalone: true, selector: "[kendoGridGroupTool]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupTool]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i54.ToolBarButtonComponent }, { type: i2.PopupService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: AdaptiveGridService }]; } });
-
-/**
- * Stores the row and cell highlight state of the Grid.
- *
- * @example
- * ```typescript
- * <kendo-grid kendoGridHighlight="ProductID"></kendo-grid>
- *
- * <kendo-grid [kendoGridHighlight]="myKey"></kendo-grid>
- * ```
- * @remarks
- * Applied to: {@link GridComponent}.
- */
-class HighlightDirective {
-    ctx;
-    /**
-     * Stores the highlighted items keys.
-     * @default []
-     */
-    highlightedKeys = [];
-    /**
-     * Sets the item key to store in `highlightedKeys`. The Grid uses the row index as the default item key.
-     */
-    highlightItemKey;
-    /**
-     * Sets the column key for a data cell. The Grid uses the column index as the default column key.
-     */
-    highlightColumnKey;
-    rowHighlightState = new Set();
-    cellHighlightState = new PairSet();
-    constructor(ctx) {
-        this.ctx = ctx;
-        this.ctx.highlightDirective = this;
-    }
-    ngOnChanges(changes) {
-        if (isPresent$1(changes['highlightedKeys'])) {
-            this.setState(this.highlightedKeys);
-        }
     }
     ngOnDestroy() {
-        this.reset();
-        this.ctx.highlightDirective = null;
+        super.ngOnDestroy();
+        this.subs.unsubscribe();
+        this.promptOutputs = [];
     }
     /**
      * @hidden
      */
-    isRowHighlighted(row) {
-        return this.rowHighlightState.has(this.getItemKey(row));
+    onClick() {
+        this.emitOpenClose = true;
+        this.toggleWindow();
     }
     /**
-     * @hidden
+     * Toggles the AI Assistant window.
      */
-    isCellHighlighted(row, column, colIndex) {
-        const highlightItem = this.getHighlightItem(row, column, colIndex);
-        return this.cellHighlightState.has(highlightItem.itemKey, highlightItem.columnKey);
-    }
-    getItemKey(row) {
-        if (this.highlightItemKey) {
-            if (typeof this.highlightItemKey === "string") {
-                return row.data?.[this.highlightItemKey];
-            }
-            if (typeof this.highlightItemKey === "function") {
-                return this.highlightItemKey(row);
-            }
-        }
-        return row.index;
-    }
-    getHighlightItem(row, col, colIndex) {
-        const itemIdentifiers = {};
-        itemIdentifiers.itemKey = this.getItemKey(row);
-        if (!isPresent$1(col) && !isPresent$1(colIndex)) {
-            return itemIdentifiers;
+    toggleWindow() {
+        if (!this.windowRef) {
+            this.openWindow();
         }
-        if (this.highlightColumnKey) {
-            if (typeof this.highlightColumnKey === "string") {
-                itemIdentifiers.columnKey = row.dataItem[this.highlightColumnKey];
-            }
-            if (typeof this.highlightColumnKey === "function") {
-                itemIdentifiers.columnKey = this.highlightColumnKey(col, colIndex);
-            }
+        else {
+            this.closeWindow();
         }
-        return {
-            itemKey: itemIdentifiers.itemKey,
-            columnKey: itemIdentifiers.columnKey ? itemIdentifiers.columnKey : colIndex
-        };
     }
-    setState(highlightedKeys) {
-        this.reset();
-        if (!highlightedKeys || highlightedKeys.length === 0) {
-            return;
+    openWindow() {
+        if (!this.keepOutputHistory) {
+            this.promptOutputs = [];
         }
-        const rowHighlights = highlightedKeys.filter(item => !isPresent$1(item.columnKey));
-        const cellHighlights = highlightedKeys.filter(item => isPresent$1(item.columnKey));
-        if (cellHighlights.length > 0) {
-            this.cellHighlightState = new PairSet(cellHighlights, 'itemKey', 'columnKey');
+        const defaultWindowWidth = 437;
+        const rtl = this.ctx.localization.rtl;
+        const defaultWindowSettings = {
+            left: rtl ? this.buttonElement.offsetLeft - (this.aiWindowSettings.width || defaultWindowWidth) : this.buttonElement.offsetLeft + this.buttonElement.offsetWidth,
+            top: this.buttonElement.offsetTop + this.buttonElement.offsetHeight,
+            width: defaultWindowWidth,
+            title: this.ctx.localization.get('aiAssistantWindowTitle'),
+            cssClass: 'k-grid-assistant-window',
+            content: AiAssistantComponent,
+            autoFocusedElement: '.k-input-inner',
+            appendTo: this.ctx.grid.windowContainer
+        };
+        this.aiWindowSettings = {
+            ...defaultWindowSettings,
+            ...this.aiWindowSettings
+        };
+        this.windowRef = this.windowService.open(this.aiWindowSettings);
+        this.windowRef.window.instance.messages = {
+            closeTitle: this.ctx.localization.get('aiAssistantWindowCloseTitle'),
+            maximizeTitle: this.ctx.localization.get('aiAssistantWindowMaximizeTitle'),
+            minimizeTitle: this.ctx.localization.get('aiAssistantWindowMinimizeTitle'),
+            restoreTitle: this.ctx.localization.get('aiAssistantWindowRestoreTitle')
+        };
+        const aiPrompt = this.windowRef.content.instance;
+        aiPrompt.requestUrl = this.requestUrl;
+        aiPrompt.requestOptions = this.requestOptions;
+        aiPrompt.aiToolDirective = this;
+        aiPrompt.disabledGenerateButton = this.aiPromptSettings?.disabledGenerateButton;
+        aiPrompt.streaming = this.aiPromptSettings?.streaming || false;
+        aiPrompt.activeView = this.aiPromptSettings?.activeView || 0;
+        aiPrompt.aiPromptSettings = { ...this.defaultAiPromptSettings, ...this.aiPromptSettings };
+        if (!aiPrompt.aiPromptSettings.promptOutputs) {
+            aiPrompt.aiPromptSettings.promptOutputs = this.promptOutputs;
         }
-        if (rowHighlights.length > 0) {
-            rowHighlights.forEach(item => {
-                this.rowHighlightState.add(item.itemKey);
+        if (this.emitOpenClose) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                const event = {
+                    aiWindow: this.windowRef.window.instance,
+                    aiPrompt: this.windowRef.content.instance.aiPrompt
+                };
+                this.open.emit(event);
+                this.emitOpenClose = false;
             });
         }
+        this.subs.add(this.windowRef.window.instance.close.subscribe(() => {
+            this.emitOpenClose = true;
+            this.closeWindow(true);
+        }));
+        this.host.selected = true;
     }
-    reset() {
-        this.rowHighlightState.clear();
-        this.cellHighlightState.clear();
+    closeWindow(focusAnchor = false) {
+        this.windowRef.close();
+        if (this.emitOpenClose) {
+            this.close.emit();
+            this.emitOpenClose = false;
+        }
+        this.windowRef = null;
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
+        focusAnchor && this.buttonElement?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HighlightDirective, isStandalone: true, selector: "[kendoGridHighlight]", inputs: { highlightedKeys: "highlightedKeys", highlightItemKey: ["kendoGridHighlight", "highlightItemKey"], highlightColumnKey: "highlightColumnKey" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, deps: [{ token: i1$7.WindowService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIAssistantToolbarDirective, isStandalone: true, selector: "[kendoGridAIAssistantTool]", inputs: { requestUrl: "requestUrl", requestOptions: "requestOptions", aiWindowSettings: "aiWindowSettings", aiPromptSettings: "aiPromptSettings", autoClose: "autoClose", keepOutputHistory: "keepOutputHistory" }, outputs: { promptRequest: "promptRequest", cancelRequest: "cancelRequest", responseSuccess: "responseSuccess", responseError: "responseError", close: "close", open: "open" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGridHighlight]',
+                    selector: '[kendoGridAIAssistantTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { highlightedKeys: [{
+        }], ctorParameters: function () { return [{ type: i1$7.WindowService }, { type: i54.ToolBarButtonComponent }, { type: ContextService }, { type: i0.NgZone }, { type: i54.RefreshService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { requestUrl: [{
                 type: Input
-            }], highlightItemKey: [{
-                type: Input,
-                args: ["kendoGridHighlight"]
-            }], highlightColumnKey: [{
+            }], requestOptions: [{
+                type: Input
+            }], aiWindowSettings: [{
+                type: Input
+            }], aiPromptSettings: [{
                 type: Input
+            }], autoClose: [{
+                type: Input
+            }], keepOutputHistory: [{
+                type: Input
+            }], promptRequest: [{
+                type: Output
+            }], cancelRequest: [{
+                type: Output
+            }], responseSuccess: [{
+                type: Output
+            }], responseError: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], open: [{
+                type: Output
             }] } });
 
 /**
@@ -38098,5 +38531,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, 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_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable };
+export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, 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_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, MultiCheckboxFilterComponent, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable };