@progress/kendo-angular-grid 20.1.0-develop.8 → 20.1.0

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';
@@ -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: [{
@@ -5485,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
  */
@@ -5506,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);
@@ -10677,6 +10685,344 @@ 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 }]; } });
+
+/**
+ * @hidden
+ */
+class MultiCheckboxFilterComponent {
+    ctx;
+    dataChangesService;
+    column;
+    filterChange = new EventEmitter();
+    filterInput;
+    constructor(ctx, dataChangesService) {
+        this.ctx = ctx;
+        this.dataChangesService = dataChangesService;
+    }
+    listData = [];
+    searchIcon = searchIcon;
+    showSelectAll = true;
+    currentlySelected = new Set();
+    isSearched = false;
+    currentFilter;
+    filterChangeSub;
+    baseListData = [];
+    ngOnInit() {
+        this.initializeData();
+        this.currentFilter = this.ctx.grid?.filter ?? this.emptyFilter();
+        this.updateSelectionFromFilter();
+        if (this.currentFilter) {
+            this.filterChange.emit(this.currentFilter);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.filterInput) {
+            this.filterChangeSub = this.filterInput.change.subscribe(this.onSearch.bind(this));
+        }
+    }
+    ngOnDestroy() {
+        if (this.filterChangeSub) {
+            this.filterChangeSub.unsubscribe();
+            this.filterChangeSub = null;
+        }
+    }
+    isItemSelected(item) {
+        return this.currentlySelected.has(item);
+    }
+    onSearch(value) {
+        const searchValue = value;
+        this.isSearched = searchValue.length > 0;
+        this.showSelectAll = !this.isSearched;
+        if (!searchValue) {
+            this.listData = [...this.baseListData];
+        }
+        else {
+            this.listData = filterBy(this.baseListData, { operator: 'contains', value: searchValue });
+        }
+    }
+    handleCheckBoxChange(checkedState, value, selectAllChecked) {
+        const field = this.column?.field;
+        if (!field) {
+            return;
+        }
+        if (!this.currentFilter) {
+            this.currentFilter = this.emptyFilter();
+        }
+        const newFilter = this.currentFilter;
+        const filters = [...newFilter.filters];
+        const compositeIndex = this.getCompositeFilterIndex(newFilter);
+        let fieldFilters = [];
+        if (compositeIndex !== -1 && filters[compositeIndex].filters && !selectAllChecked) {
+            fieldFilters = [...filters[compositeIndex].filters];
+        }
+        if (checkedState && selectAllChecked) {
+            this.listData.forEach(item => {
+                if (!fieldFilters.some(f => f.value === item)) {
+                    fieldFilters.push({ field, operator: 'eq', value: item });
+                }
+            });
+        }
+        else if (!checkedState && selectAllChecked) {
+            fieldFilters = [];
+        }
+        else if (checkedState) {
+            if (!fieldFilters.some(f => f.value === value)) {
+                fieldFilters.push({ field, operator: 'eq', value });
+            }
+        }
+        else {
+            const idx = fieldFilters.findIndex(f => f.value === value);
+            if (idx > -1) {
+                fieldFilters.splice(idx, 1);
+            }
+        }
+        if (fieldFilters.length === 0) {
+            if (compositeIndex !== -1) {
+                filters.splice(compositeIndex, 1);
+            }
+        }
+        else {
+            const block = { logic: 'or', filters: fieldFilters };
+            if (compositeIndex !== -1) {
+                filters[compositeIndex] = block;
+            }
+            else {
+                filters.push(block);
+            }
+        }
+        newFilter.logic = 'and';
+        newFilter.filters = filters;
+        this.currentFilter = newFilter;
+        this.updateSelectionFromFilter();
+        this.filterChange.emit(this.currentFilter);
+    }
+    get filteredGridData() {
+        return filterBy(this.gridData, this.ctx.grid?.filter);
+    }
+    get selectAllChecked() {
+        if (!this.listData || this.listData.length === 0) {
+            return false;
+        }
+        const total = this.listData.length;
+        const selectedInView = this.listData.filter(i => this.currentlySelected.has(i)).length;
+        if (selectedInView === 0) {
+            return false;
+        }
+        if (selectedInView === total) {
+            return true;
+        }
+        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;
+        }, []);
+    }
+    initializeData() {
+        if (!this.column) {
+            this.baseListData = [];
+            return;
+        }
+        const isDate = this.column.filter === 'date';
+        if (isDate) {
+            const dates = this.getUniqueDateValues(this.gridData);
+            const sortedDates = [...dates].sort((a, b) => a - b);
+            this.baseListData = sortedDates;
+        }
+        else {
+            const field = this.column.field;
+            const mapped = this.gridData.map(item => item?.[field]);
+            this.baseListData = [...new Set(mapped)].sort((a, b) => {
+                if (a > b) {
+                    return 1;
+                }
+                if (a < b) {
+                    return -1;
+                }
+                return 0;
+            });
+        }
+        this.listData = [...this.baseListData];
+    }
+    emptyFilter() { return { filters: [], logic: 'and' }; }
+    getCompositeFilterIndex(filter) {
+        const field = this.column?.field;
+        return filter.filters.findIndex((f) => f.filters?.length && f.filters[0].field === field);
+    }
+    updateSelectionFromFilter() {
+        this.currentlySelected.clear();
+        if (!this.currentFilter || !this.column?.field) {
+            return;
+        }
+        const idx = this.getCompositeFilterIndex(this.currentFilter);
+        if (idx === -1) {
+            return;
+        }
+        const block = this.currentFilter.filters[idx];
+        if (block && Array.isArray(block.filters)) {
+            block.filters.forEach((f) => {
+                if (f.field === this.column.field && f.operator === 'eq') {
+                    this.currentlySelected.add(f.value);
+                }
+            });
+        }
+    }
+    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" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputDirective, descendants: true }], ngImport: i0, template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            kendoFilterInput
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')">
+            <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" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+}
+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"
+            kendoFilterInput
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')">
+            <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, FilterInputDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { column: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], filterInput: [{
+                type: ViewChild,
+                args: [FilterInputDirective]
+            }] } });
+
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -10761,11 +11107,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;
@@ -10791,7 +11137,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;
@@ -10804,15 +11150,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;
@@ -10840,29 +11191,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
@@ -10874,20 +11296,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,
@@ -10899,17 +11325,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
@@ -10921,22 +11351,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
@@ -10957,9 +11391,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;
@@ -10975,7 +11406,6 @@ class FilterMenuComponent {
     renderer;
     cdr;
     adaptiveGridService;
-    zone;
     idService;
     filterIcon = filterIcon;
     /**
@@ -10993,7 +11423,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;
@@ -11001,7 +11431,6 @@ class FilterMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.adaptiveGridService = adaptiveGridService;
-        this.zone = zone;
         this.idService = idService;
     }
     ngOnDestroy() {
@@ -11087,7 +11516,7 @@ class FilterMenuComponent {
             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"
@@ -11146,7 +11575,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
@@ -16494,11 +16923,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) {
@@ -17249,19 +17683,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
  */
@@ -18482,7 +18903,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);
@@ -20181,7 +20602,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"
@@ -20389,7 +20810,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"
@@ -21112,7 +21533,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)"
@@ -21432,7 +21854,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)"
@@ -22418,8 +22841,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759482491,
-    version: '20.1.0-develop.8',
+    publishDate: 1761117321,
+    version: '20.1.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -24380,9 +24803,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) {
@@ -25578,7 +25998,7 @@ class ListComponent {
             <div></div>
         </div>
     </div>
-    <div 
+    <div
         #container
         class="k-grid-content k-virtual-content"
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
@@ -25703,7 +26123,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"
@@ -26568,8 +26988,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,
@@ -26827,6 +27268,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
             }] } });
 
 /**
@@ -27848,11 +28295,12 @@ class GroupToolbarToolComponent {
         }
     }
     updateGroupedColumns() {
+        const columns = this.ctx.grid['columnInfoService'].leafNamedColumns;
+        const groupableColumns = columns.filter(column => column?.groupable);
         this.groupedColumns = this.group
-            .map(group => this.ctx.grid.columns.find(column => column?.field === group.field))
+            .map(group => columns.find(column => column?.field === group.field))
             .filter(column => !!column);
-        this.ungroupedColumns = this.ctx.grid.columns.filter(column => column?.groupable &&
-            !this.groupedColumns.some(gc => gc?.field === column?.field));
+        this.ungroupedColumns = groupableColumns.filter(column => !this.groupedColumns.some(gc => gc?.field === column?.field));
     }
     navigateToNextItem() {
         if (this.currentFocusedItemIndex < this.groupItems.length - 1) {
@@ -29205,1299 +29653,621 @@ 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,
-            });
+    /**
+     * 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;
         }
-    });
-};
-/**
- * @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 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;
         }
-        else {
-            highlightItems.push({
-                itemKey: rowIndex,
-            });
+    }
+    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');
         }
-    });
-};
-/**
- * @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;
+        this.sizingService.changes.next(this.size);
     }
-    ngAfterViewInit() {
-        this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({ field: col.field }));
+    get size() {
+        return this._size;
     }
-    ngOnDestroy() {
-        this.unsubscribeCurrentRequest();
+    /**
+     * 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;
+        }
     }
-    message(message) {
-        return this.ctx.localization.get(message);
+    get group() {
+        return this._group;
     }
-    cancelRequest() {
-        this.aiToolDirective.cancelRequest.emit();
-        this.unsubscribeCurrentRequest();
-        this.streaming = false;
+    /**
+     * If `true`, renders only columns in the current viewport.
+     *
+     * @default false
+     */
+    virtualColumns = false;
+    /**
+     * @hidden
+     */
+    get showStatusBar() {
+        return !!(this.selectable);
     }
-    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;
-        });
+    /**
+     * @hidden
+     */
+    get showTopToolbar() {
+        return this.toolbarTemplate && ['top', 'both'].indexOf(this.toolbarTemplate.position) > -1;
     }
-    sendPromptRequest() {
-        const request = new HttpRequest(this.requestData.requestOptions.method, this.requestData.url, this.requestData.requestOptions.body, this.requestData.requestOptions);
-        return this.http.request(request);
+    /**
+     * @hidden
+     */
+    get showBottomToolbar() {
+        return this.toolbarTemplate && ['bottom', 'both'].indexOf(this.toolbarTemplate.position) > -1;
     }
-    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);
+    /**
+     * @hidden
+     */
+    get isLocked() {
+        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
     }
-    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);
+    /**
+     * @hidden
+     */
+    get showTopPager() {
+        const position = this.pageable.position;
+        return this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
     }
-    deleteLoadingOutput() {
-        if (this.aiToolDirective.promptOutputs[0]?.id === this.loadingOutput.id) {
-            this.aiToolDirective.promptOutputs.splice(0, 1);
-        }
+    /**
+     * @hidden
+     */
+    get showBottomPager() {
+        const position = this.pageable.position;
+        return this.pageable !== false && position !== 'top';
     }
-    unsubscribeCurrentRequest() {
-        if (this.currentRequestSubscription) {
-            this.currentRequestSubscription.unsubscribe();
-            this.currentRequestSubscription = null;
-        }
+    /**
+     * @hidden
+     */
+    get hasPager() {
+        return this.showTopPager || this.showBottomPager;
     }
-    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);
-        }
+    /**
+     * @hidden
+     */
+    get showGroupPanel() {
+        const isGroupable = this.groupable && this.groupable.enabled !== false;
+        const isGrouped = this.group?.length > 0;
+        return this.isStacked ? isGroupable && isGrouped : isGroupable;
     }
-    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);
+    /**
+     * @hidden
+     */
+    get groupableEmptyText() {
+        return this.groupable.emptyText;
     }
-    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);
-        }
+    /**
+     * @hidden
+     */
+    get marqueeSelection() {
+        return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
-    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.
+     * @hidden
      */
-    requestUrl;
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
-     * Configures the request options that the AI Assistant tool sends with the AI request.
+     * @hidden
      *
-     * @default { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), role: 'user', method: 'POST', responseType: 'json', withCredentials: false }
+     * The `isOpen` property is used to determine if a Grid Popup or ActionSheet is open.
      */
-    requestOptions;
+    get isOpen() {
+        return isPresent(this.adaptiveGridService.popupRef) || this.isActionSheetExpanded;
+    }
     /**
-     * Configures the initial settings for the AI Assistant Window when opened.
+     * @hidden
      */
-    aiWindowSettings;
+    get isActionSheetExpanded() {
+        return Boolean(this.adaptiveRenderer?.actionSheet?.expanded);
+    }
     /**
-     * Configures the initial settings for the AI Prompt component that the AI Assistant Window component uses when opened.
+     * @hidden
      */
-    aiPromptSettings;
+    gridData = () => { return this.flatData; };
     /**
-     * Determines whether to close the AI Assistant Window automatically after a successful request.
-     * @default true
+     * Enables the [filtering](slug:filtering_grid) feature of the Grid for columns with a `field` option.
+     *
+     * @default false
      */
-    autoClose = true;
+    filterable = false;
     /**
-     * Determines whether to keep the AI Prompt's outputs after closing the AI Assistant Window.
+     * Enables [sorting]({% slug sorting_grid %}) feature of the Grid for columns with a `field` option.
      * @default false
      */
-    keepOutputHistory = false;
+    sortable = 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.
+     * Configures the Grid pager ([see example](slug:paging_grid_settings)).
+     * @default false
      */
-    promptRequest = new EventEmitter();
+    pageable = false;
+    get normalizedPageableSettings() {
+        return normalize(this.pageable);
+    }
     /**
-     * Emits an event when the user clicks the cancel button.
+     * If `true`, allows grouping by dragging column headers ([see example]({% slug grouping_grid %})).
+     *
+     * @default false
      */
-    cancelRequest = new EventEmitter();
+    groupable = false;
     /**
-     * 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.
+     * Determines if the Grid can be resized.
+     *
+     * @default false
      */
-    responseSuccess = new EventEmitter();
+    gridResizable = false;
     /**
-     * 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.
+     * Enables row reordering feature of the Grid ([see example]({% slug reordering_rows_grid %})).
+     *
+     * @default false
      */
-    responseError = new EventEmitter();
+    set rowReorderable(value) {
+        this._rowReorderable = value;
+        if (value) {
+            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
+                this.ngZone.run(() => {
+                    this.rowReorder.emit(args);
+                });
+            });
+        }
+        else {
+            this.rowReorderSubscription?.unsubscribe();
+        }
+    }
+    get rowReorderable() {
+        return this._rowReorderable;
+    }
     /**
-     * Emits an event when the AI Assistant tool closes.
+     * By default, navigation is enabled. To disable, set to `false`.
+     * To enable navigation for specific sections, provide a [`GridNavigableSection`](slug:api_grid_gridnavigablesection).
      */
-    close = new EventEmitter();
+    set navigable(value) {
+        if (typeof value === 'boolean') {
+            this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
+            this.ctx.navigable = value;
+            return;
+        }
+        else {
+            this.ctx.navigable = value.includes('table');
+        }
+        this._navigable = value;
+    }
+    get navigable() {
+        return this._navigable;
+    }
     /**
-     * Emits an event when the AI Assistant tool opens.
+     * If `true`, resizes columns during initialization to fit headers and content.
+     * Columns with `autoSize` set to `false` are excluded.
+     * [See example](slug:resizing_columns_grid).
+     *
+     * @default false
      */
-    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 };
-    }
-    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();
-            }
-        }));
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.subs.unsubscribe();
-        this.promptOutputs = [];
-    }
+    autoSize = false;
     /**
-     * @hidden
+     * Sets a function to apply custom CSS classes to each data row ([see example](slug:styling_grid_rows)).
      */
-    onClick() {
-        this.emitOpenClose = true;
-        this.toggleWindow();
+    set rowClass(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('rowClass', fn));
+        }
+        this._rowClass = fn;
+    }
+    get rowClass() {
+        return this._rowClass;
     }
     /**
-     * Toggles the AI Assistant window.
+     * Sets a function to determine if a data row is sticky (always visible after scrolling).
      */
-    toggleWindow() {
-        if (!this.windowRef) {
-            this.openWindow();
+    set rowSticky(fn) {
+        if (isDevMode() && isPresent(fn) && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('rowSticky', fn));
         }
-        else {
-            this.closeWindow();
+        if (isPresent(fn)) {
+            this._rowSticky = fn;
         }
     }
-    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;
+    get rowSticky() {
+        return this._rowSticky;
     }
-    closeWindow(focusAnchor = false) {
-        this.windowRef.close();
-        if (this.emitOpenClose) {
-            this.close.emit();
-            this.emitOpenClose = false;
+    /**
+     * Sets a function to determine if a data row is selected ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-rows)).
+     */
+    set rowSelected(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('rowSelected', fn));
         }
-        this.windowRef = null;
-        this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.removeAttribute('aria-controls');
-        this.host.selected = false;
-        focusAnchor && this.buttonElement?.focus();
+        this._rowSelected = fn;
+    }
+    get rowSelected() {
+        return this._rowSelected;
     }
-    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 %})).
+     * Sets a function to determine if a data row is selectable.
      */
-    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);
-            });
+    set isRowSelectable(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('isRowSelectable', fn));
         }
+        this._isRowSelectable = fn;
     }
-    get data() {
-        return this._data;
-    }
-    get hintText() {
-        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
+    get isRowSelectable() {
+        return this._isRowSelectable;
     }
     /**
-     * @hidden
+     * Sets a function to determine if a data cell is selected.
+     * The function returns an object with `selected` and `item` properties ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-cells)).
      */
-    get customHintTemplate() {
-        if (this.rowReorderable) {
-            const allColumns = this.columnList.toArray();
-            const rowReorderColumn = allColumns.find(column => column.isRowReorderColumn);
-            return rowReorderColumn.rowDragHintTemplateRef;
+    set cellSelected(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('cellSelected', fn));
         }
+        this._cellSelected = fn;
+    }
+    get cellSelected() {
+        return this._cellSelected;
     }
     /**
-     * @hidden
+     * Returns the currently focused cell (if any).
      */
-    get hintContext() {
-        if (this.customHintTemplate) {
-            const draggedRow = this.rowReorderService?.getDraggedRow(this.flatData);
-            return {
-                $implicit: draggedRow?.dataItem,
-                rowIndex: draggedRow?.rowIndex
-            };
-        }
+    get activeCell() {
+        return this.navigationService.activeCell;
     }
     /**
-     * Defines the page size used by the Grid pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     * Returns the currently focused row (if any).
      */
-    pageSize;
+    get activeRow() {
+        return this.navigationService.activeRow;
+    }
     /**
-     * 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`.
+     * Returns the current Grid selection.
+     *
+     * @hidden
      */
-    height;
+    get selection() {
+        return (this.selectable || this.selectionDirective) ?
+            this.defaultSelection ? this.defaultSelection.stateToArray() : this.selectionDirective.stateToArray() :
+            [];
+    }
     /**
-     * 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.
+     * Gets the current `GridState`, including data operations and column state.
+     * Use this to store and restore the Grid state.
      */
-    rowHeight;
+    get currentState() {
+        return {
+            filter: this.filter,
+            group: this.group,
+            sort: this.sort,
+            skip: this.skip,
+            take: this.pageSize,
+            columnsState: this.columns.toArray().flatMap(recursiveColumnsFlatMap),
+            currentData: structuredClone(this.data)
+        };
+    }
     /**
-     * Enables or disables adaptive mode. Adaptive rendering is off by default.
+     * If `true`, allows resizing columns by dragging header cell edges ([see example]({% slug resizing_columns_grid %})).
      *
-     * @default 'none'
+     * @default false
      */
-    adaptiveMode = 'none';
+    resizable = false;
     /**
-     * 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.
+     * If `true`, allows reordering columns by dragging header cells ([see example]({% slug reordering_columns_grid %})).
+     *
+     * @default false
      */
-    detailRowHeight;
+    reorderable = false;
     /**
-     * Defines the number of records to skip in the pager.
-     * Required for the [`paging`]({% slug paging_grid %}) feature.
+     * If `true`, displays the Grid loading indicator ([see example]({% slug binding_grid %})).
+     *
+     * @default false
      */
-    get skip() {
-        return this._skip;
+    set loading(value) {
+        this._loading = value;
+        this.rowReorderable && this.notifyReorderContainers();
     }
-    set skip(value) {
-        if (typeof value === 'number' && value >= 0) {
-            this._skip = this.rowReorderService.skip = value;
-        }
+    get loading() {
+        return this._loading;
     }
     /**
-     * Defines the scroll mode for the Grid.
+     * If `true`, displays the column menu for columns ([see example]({% slug columnmenu_grid %})).
      *
-     * @default 'scrollable'
+     * @default false
      */
-    scrollable = 'scrollable';
+    columnMenu = false;
     /**
-     * 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).
+     * If `true`, hides the Grid header. The header is visible by default.
+     * The header includes column headers and the [filter row](slug:filter_row).
      *
      * @default false
      */
-    selectable = false;
+    hideHeader = false;
     /**
-     * Sets the descriptors for sorting the data ([see example]({% slug sorting_grid %})).
+     * Specifies if the currently inactive toolbar tools will be visible. Applicable when the toolbar is configured using the `<kendo-toolbar>` component. By default, such tools are hidden.
+     *
+     * @default false
      */
-    set sort(value) {
-        if (isArray(value)) {
-            this._sort = value;
-        }
+    showInactiveTools = false;
+    /**
+     * Sets a function to determine if a specific row is expanded.
+     */
+    set isDetailExpanded(callback) {
+        this.detailsService.userCallback = callback;
     }
-    get sort() {
-        return this._sort;
+    get isDetailExpanded() {
+        return this.detailsService.userCallback;
     }
     /**
-     * Specifies the sizing for Grid elements like tables, buttons, and inputs.
-     *
-     * @default 'medium'
+     * Sets a function to determine if a specific group row is expanded.
      */
-    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);
+    set isGroupExpanded(callback) {
+        this.groupsService.userCallback = callback;
+        this.groupable = isPresent(callback);
     }
-    get size() {
-        return this._size;
+    get isGroupExpanded() {
+        return this.groupsService.userCallback;
     }
     /**
-     * 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).
+     * Sets the Grid data layout display mode.
+     *
+     * @default 'columns'
      */
-    trackBy = defaultTrackBy;
+    dataLayoutMode = 'columns';
     /**
-     * Sets the filter descriptor for the data ([see examples]({% slug filtering_grid %})).
+     * Fires when the Grid data is filtered through the UI and the filter descriptor changes.
      */
-    filter;
+    filterChange = new EventEmitter();
     /**
-     * Sets the descriptors for grouping the data ([see example]({% slug grouping_grid %})).
+     * Fires when the page is changed through the UI ([see example]({% slug paging_grid %})).
      */
-    set group(value) {
-        if (isArray(value)) {
-            this._group = value;
-        }
-    }
-    get group() {
-        return this._group;
-    }
+    pageChange = new EventEmitter();
     /**
-     * If `true`, renders only columns in the current viewport.
-     *
-     * @default false
+     * Fires when the Grid data is grouped through the UI and the group descriptors change ([see example]({% slug grouping_grid %})).
      */
-    virtualColumns = false;
+    groupChange;
     /**
-     * @hidden
+     * Fires when the Grid data is sorted through the UI and the sort descriptors change ([see example]({% slug sorting_grid %})).
      */
-    get showStatusBar() {
-        return !!(this.selectable);
-    }
+    sortChange = new EventEmitter();
     /**
-     * @hidden
+     * Fires when the Grid selection changes through the UI.
      */
-    get showTopToolbar() {
-        return this.toolbarTemplate && ['top', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
+    selectionChange = new EventEmitter();
     /**
-     * @hidden
+     * Fires when a row is reordered through the UI.
      */
-    get showBottomToolbar() {
-        return this.toolbarTemplate && ['bottom', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
+    rowReorder = new EventEmitter();
     /**
-     * @hidden
+     * Fires when the data state of the Grid is changed.
      */
-    get isLocked() {
-        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
-    }
+    dataStateChange = new EventEmitter();
     /**
-     * @hidden
+     * Fires when the data or columns state of the Grid is changed.
      */
-    get showTopPager() {
-        const position = this.pageable.position;
-        return this.pageable !== false && ['top', 'both'].indexOf(position) > -1;
-    }
+    gridStateChange = new EventEmitter();
     /**
-     * @hidden
+     * Fires when a group is expanded through the UI.
      */
-    get showBottomPager() {
-        const position = this.pageable.position;
-        return this.pageable !== false && position !== 'top';
-    }
+    groupExpand = new EventEmitter();
     /**
-     * @hidden
+     * Fires when a group is collapsed through the UI.
      */
-    get hasPager() {
-        return this.showTopPager || this.showBottomPager;
-    }
+    groupCollapse = new EventEmitter();
     /**
-     * @hidden
+     * Fires when a detail row is expanded through the UI.
      */
-    get showGroupPanel() {
-        const isGroupable = this.groupable && this.groupable.enabled !== false;
-        const isGrouped = this.group?.length > 0;
-        return this.isStacked ? isGroupable && isGrouped : isGroupable;
-    }
+    detailExpand = new EventEmitter();
     /**
-     * @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
-     */
-    gridData = () => { return this.flatData; };
-    /**
-     * Enables the [filtering](slug:filtering_grid) feature of the Grid for columns with a `field` option.
-     *
-     * @default false
-     */
-    filterable = false;
-    /**
-     * Enables [sorting]({% slug sorting_grid %}) feature of the Grid for columns with a `field` option.
-     * @default false
-     */
-    sortable = false;
-    /**
-     * Configures the Grid pager ([see example](slug:paging_grid_settings)).
-     * @default false
-     */
-    pageable = false;
-    get normalizedPageableSettings() {
-        return normalize(this.pageable);
-    }
-    /**
-     * If `true`, allows grouping by dragging column headers ([see example]({% slug grouping_grid %})).
-     *
-     * @default false
-     */
-    groupable = false;
-    /**
-     * Determines if the Grid can be resized.
-     *
-     * @default false
-     */
-    gridResizable = false;
-    /**
-     * Enables row reordering feature of the Grid ([see example]({% slug reordering_rows_grid %})).
-     *
-     * @default false
-     */
-    set rowReorderable(value) {
-        this._rowReorderable = value;
-        if (value) {
-            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
-                this.ngZone.run(() => {
-                    this.rowReorder.emit(args);
-                });
-            });
-        }
-        else {
-            this.rowReorderSubscription?.unsubscribe();
-        }
-    }
-    get rowReorderable() {
-        return this._rowReorderable;
-    }
-    /**
-     * By default, navigation is enabled. To disable, set to `false`.
-     * To enable navigation for specific sections, provide a [`GridNavigableSection`](slug:api_grid_gridnavigablesection).
-     */
-    set navigable(value) {
-        if (typeof value === 'boolean') {
-            this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
-            this.ctx.navigable = value;
-            return;
-        }
-        else {
-            this.ctx.navigable = value.includes('table');
-        }
-        this._navigable = value;
-    }
-    get navigable() {
-        return this._navigable;
-    }
-    /**
-     * If `true`, resizes columns during initialization to fit headers and content.
-     * Columns with `autoSize` set to `false` are excluded.
-     * [See example](slug:resizing_columns_grid).
-     *
-     * @default false
-     */
-    autoSize = false;
-    /**
-     * Sets a function to apply custom CSS classes to each data row ([see example](slug:styling_grid_rows)).
-     */
-    set rowClass(fn) {
-        if (isDevMode() && typeof fn !== 'function') {
-            throw new Error(GridConfigurationErrorMessages.functionType('rowClass', fn));
-        }
-        this._rowClass = fn;
-    }
-    get rowClass() {
-        return this._rowClass;
-    }
-    /**
-     * Sets a function to determine if a data row is sticky (always visible after scrolling).
-     */
-    set rowSticky(fn) {
-        if (isDevMode() && isPresent(fn) && typeof fn !== 'function') {
-            throw new Error(GridConfigurationErrorMessages.functionType('rowSticky', fn));
-        }
-        if (isPresent(fn)) {
-            this._rowSticky = fn;
-        }
-    }
-    get rowSticky() {
-        return this._rowSticky;
-    }
-    /**
-     * Sets a function to determine if a data row is selected ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-rows)).
-     */
-    set rowSelected(fn) {
-        if (isDevMode() && typeof fn !== 'function') {
-            throw new Error(GridConfigurationErrorMessages.functionType('rowSelected', fn));
-        }
-        this._rowSelected = fn;
-    }
-    get rowSelected() {
-        return this._rowSelected;
-    }
-    /**
-     * Sets a function to determine if a data row is selectable.
-     */
-    set isRowSelectable(fn) {
-        if (isDevMode() && typeof fn !== 'function') {
-            throw new Error(GridConfigurationErrorMessages.functionType('isRowSelectable', fn));
-        }
-        this._isRowSelectable = fn;
-    }
-    get isRowSelectable() {
-        return this._isRowSelectable;
-    }
-    /**
-     * Sets a function to determine if a data cell is selected.
-     * The function returns an object with `selected` and `item` properties ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-cells)).
-     */
-    set cellSelected(fn) {
-        if (isDevMode() && typeof fn !== 'function') {
-            throw new Error(GridConfigurationErrorMessages.functionType('cellSelected', fn));
-        }
-        this._cellSelected = fn;
-    }
-    get cellSelected() {
-        return this._cellSelected;
-    }
-    /**
-     * Returns the currently focused cell (if any).
-     */
-    get activeCell() {
-        return this.navigationService.activeCell;
-    }
-    /**
-     * Returns the currently focused row (if any).
-     */
-    get activeRow() {
-        return this.navigationService.activeRow;
-    }
-    /**
-     * Returns the current Grid selection.
-     *
-     * @hidden
-     */
-    get selection() {
-        return (this.selectable || this.selectionDirective) ?
-            this.defaultSelection ? this.defaultSelection.stateToArray() : this.selectionDirective.stateToArray() :
-            [];
-    }
-    /**
-     * Gets the current `GridState`, including data operations and column state.
-     * Use this to store and restore the Grid state.
-     */
-    get currentState() {
-        return {
-            filter: this.filter,
-            group: this.group,
-            sort: this.sort,
-            skip: this.skip,
-            take: this.pageSize,
-            columnsState: this.columns.toArray().flatMap(recursiveColumnsFlatMap),
-            currentData: structuredClone(this.data)
-        };
-    }
-    /**
-     * If `true`, allows resizing columns by dragging header cell edges ([see example]({% slug resizing_columns_grid %})).
-     *
-     * @default false
-     */
-    resizable = false;
-    /**
-     * If `true`, allows reordering columns by dragging header cells ([see example]({% slug reordering_columns_grid %})).
-     *
-     * @default false
-     */
-    reorderable = false;
-    /**
-     * If `true`, displays the Grid loading indicator ([see example]({% slug binding_grid %})).
-     *
-     * @default false
-     */
-    set loading(value) {
-        this._loading = value;
-        this.rowReorderable && this.notifyReorderContainers();
-    }
-    get loading() {
-        return this._loading;
-    }
-    /**
-     * If `true`, displays the column menu for columns ([see example]({% slug columnmenu_grid %})).
-     *
-     * @default false
-     */
-    columnMenu = false;
-    /**
-     * If `true`, hides the Grid header. The header is visible by default.
-     * The header includes column headers and the [filter row](slug:filter_row).
-     *
-     * @default false
-     */
-    hideHeader = false;
-    /**
-     * Specifies if the currently inactive toolbar tools will be visible. Applicable when the toolbar is configured using the `<kendo-toolbar>` component. By default, such tools are hidden.
-     *
-     * @default false
-     */
-    showInactiveTools = false;
-    /**
-     * Sets a function to determine if a specific row is expanded.
-     */
-    set isDetailExpanded(callback) {
-        this.detailsService.userCallback = callback;
-    }
-    get isDetailExpanded() {
-        return this.detailsService.userCallback;
-    }
-    /**
-     * Sets a function to determine if a specific group row is expanded.
-     */
-    set isGroupExpanded(callback) {
-        this.groupsService.userCallback = callback;
-        this.groupable = isPresent(callback);
-    }
-    get isGroupExpanded() {
-        return this.groupsService.userCallback;
-    }
-    /**
-     * Sets the Grid data layout display mode.
-     *
-     * @default 'columns'
-     */
-    dataLayoutMode = 'columns';
-    /**
-     * Fires when the Grid data is filtered through the UI and the filter descriptor changes.
-     */
-    filterChange = new EventEmitter();
-    /**
-     * Fires when the page is changed through the UI ([see example]({% slug paging_grid %})).
-     */
-    pageChange = new EventEmitter();
-    /**
-     * Fires when the Grid data is grouped through the UI and the group descriptors change ([see example]({% slug grouping_grid %})).
-     */
-    groupChange;
-    /**
-     * Fires when the Grid data is sorted through the UI and the sort descriptors change ([see example]({% slug sorting_grid %})).
-     */
-    sortChange = new EventEmitter();
-    /**
-     * Fires when the Grid selection changes through the UI.
-     */
-    selectionChange = new EventEmitter();
-    /**
-     * Fires when a row is reordered through the UI.
-     */
-    rowReorder = new EventEmitter();
-    /**
-     * Fires when the data state of the Grid is changed.
-     */
-    dataStateChange = new EventEmitter();
-    /**
-     * Fires when the data or columns state of the Grid is changed.
-     */
-    gridStateChange = new EventEmitter();
-    /**
-     * Fires when a group is expanded through the UI.
-     */
-    groupExpand = new EventEmitter();
-    /**
-     * Fires when a group is collapsed through the UI.
-     */
-    groupCollapse = new EventEmitter();
-    /**
-     * Fires when a detail row is expanded through the UI.
-     */
-    detailExpand = new EventEmitter();
-    /**
-     * Fires when a detail row is collapsed through the UI.
+     * Fires when a detail row is collapsed through the UI.
      */
     detailCollapse = new EventEmitter();
     /**
@@ -30677,7 +30447,6 @@ class GridComponent {
         this._customToolbarTemplate = customToolbarTemplate;
     }
     columnMenuTemplates;
-    aiAssistantToolbarTool;
     lockedHeader;
     header;
     footer = new QueryList();
@@ -32247,7 +32016,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"
@@ -32623,6 +32392,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
@@ -33041,10 +32819,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 });
@@ -33483,6 +33261,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
@@ -33901,10 +33688,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>
     `,
@@ -34113,9 +33900,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']
@@ -35576,6 +35360,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,
@@ -37190,325 +36977,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
             }] } });
 
 /**
@@ -38089,5 +38554,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 };