@progress/kendo-angular-grid 20.1.0-develop.15 → 20.1.0-develop.17

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

@@ -6,7 +6,7 @@ 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, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, 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';
@@ -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,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class LocalDataChangesService {
+    changes = new EventEmitter();
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+const FORMAT_REGEX = /\{\d+:?/;
+/**
+ * @hidden
+ */
+class FormatPipe {
+    intlService;
+    constructor(intlService) {
+        this.intlService = intlService;
+    }
+    transform(value, format) {
+        const intl = this.intlService;
+        if (isString(format) && FORMAT_REGEX.exec(format)) {
+            return intl.format(format, value);
+        }
+        return intl.toString(value, format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, deps: [{ token: i1$4.IntlService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, isStandalone: true, name: "format", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/pipe-prefix
+                    name: 'format',
+                    pure: false,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.IntlService }]; } });
+
+const DEFAULT_SEARCH_DELAY = 500;
+/**
+ * @hidden
+ */
+class MultiCheckboxFilterComponent {
+    ctx;
+    dataChangesService;
+    column;
+    filterChange = new EventEmitter();
+    constructor(ctx, dataChangesService) {
+        this.ctx = ctx;
+        this.dataChangesService = dataChangesService;
+    }
+    listData;
+    searchIcon = searchIcon;
+    showSelectAll = true;
+    currentlySelected = new Set();
+    isSearched = false;
+    currentFilter;
+    typingTimeout;
+    ngOnInit() {
+        this.listData = [...new Set(this.gridData.map(i => i[this.column.field]))].sort((a, b) => { return a - b; });
+        this.currentlySelected = new Set(this.filteredGridData.map(i => i[this.column.field]));
+        this.currentFilter = this.ctx.grid?.filter;
+        if (this.currentFilter) {
+            this.filterChange.emit(this.currentFilter);
+        }
+    }
+    ngOnDestroy() {
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+            this.typingTimeout = null;
+        }
+    }
+    isItemSelected(item) {
+        return this.currentlySelected.has(item);
+    }
+    onSearch(value) {
+        clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            this.isSearched = value.length > 0;
+            this.showSelectAll = !this.isSearched;
+            const field = this.column?.field;
+            if (!field) {
+                this.listData = [];
+                return;
+            }
+            const base = [...new Set(this.gridData.map(i => i[field]))].sort((a, b) => { return a - b; });
+            if (!value) {
+                this.listData = base;
+                return;
+            }
+            this.listData = filterBy(base, { operator: 'contains', value });
+        }, DEFAULT_SEARCH_DELAY);
+    }
+    handleCheckBoxChange(checkedState, value, selectAllChecked) {
+        const field = this.column?.field;
+        if (!field) {
+            return;
+        }
+        if (!this.currentFilter) {
+            const existing = this.ctx.grid.filter;
+            this.currentFilter = existing ? { ...existing } : { logic: 'and', filters: [] };
+        }
+        const compositeIndex = this.currentFilter.filters.findIndex((f) => f && Array.isArray(f.filters) && f.filters.some((ff) => ff.field === field));
+        let fieldFilters = [];
+        if (compositeIndex !== -1) {
+            fieldFilters = [...this.currentFilter.filters[compositeIndex].filters];
+        }
+        const valueForItem = (item) => item?.[field];
+        if (selectAllChecked) {
+            if (checkedState) {
+                fieldFilters = [];
+                this.currentlySelected = new Set(this.gridData.map(i => i[this.column.field]));
+            }
+            else {
+                fieldFilters = this.gridData.map(item => ({
+                    field,
+                    operator: 'neq',
+                    value: valueForItem(item)
+                }));
+                this.currentlySelected.clear();
+            }
+        }
+        else {
+            const exists = fieldFilters.some(f => f.value === value);
+            if (checkedState) {
+                if (!exists) {
+                    fieldFilters.push({ field, operator: 'eq', value });
+                }
+                else {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                this.currentlySelected.add(value);
+            }
+            else {
+                if (exists) {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                else {
+                    fieldFilters.push({ field, operator: 'neq', value });
+                }
+                this.currentlySelected.delete(value);
+            }
+        }
+        if (fieldFilters.length === 0) {
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters.splice(compositeIndex, 1);
+            }
+            else {
+                this.currentFilter.filters = fieldFilters;
+            }
+        }
+        else {
+            const compositeBlock = {
+                logic: 'and',
+                filters: fieldFilters
+            };
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters[compositeIndex] = compositeBlock;
+            }
+            else {
+                this.currentFilter.filters.push(compositeBlock);
+            }
+        }
+        this.filterChange.emit(this.currentFilter);
+    }
+    get filteredGridData() {
+        return filterBy(this.gridData, this.ctx.grid?.filter);
+    }
+    get selectAllChecked() {
+        if (!this.listData) {
+            return;
+        }
+        if (this.currentlySelected.size === this.listData.length && this.currentlySelected.size > 0) {
+            return true;
+        }
+        else if (this.currentlySelected.size === 0) {
+            return false;
+        }
+        else {
+            return 'indeterminate';
+        }
+    }
+    get gridData() {
+        let data = [];
+        const isLocalData = isPresent$1(this.ctx?.dataBindingDirective);
+        if (isPresent$1(this.normalizedFilterVariant.data)) {
+            data = this.normalizedFilterVariant.data;
+        }
+        else if (isLocalData) {
+            data = this.dataChangesService.data;
+        }
+        else {
+            data = this.ctx.grid?.flatData;
+        }
+        return data || [];
+    }
+    get normalizedFilterVariant() {
+        const defaultMultiCheckboxSettings = { variant: 'multiCheckbox', search: true };
+        if (typeof this.column?.filterVariant === 'string') {
+            return {
+                variant: this.column.filterVariant,
+                search: true
+            };
+        }
+        return Object.assign(defaultMultiCheckboxSettings, this.column?.filterVariant);
+    }
+    get selectedItemsMessage() {
+        const localizationMsg = this.messageFor('multiCheckboxFilterSelectedItemsCount') || '';
+        return replaceMessagePlaceholder(localizationMsg, 'selectedItemsCount', this.currentlySelected.size.toString());
+    }
+    messageFor(key) {
+        return this.ctx.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, deps: [{ token: ContextService }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiCheckboxFilterComponent, isStandalone: true, selector: "kendo-grid-multicheckbox-filter", inputs: { column: "column" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: FormatPipe, name: "format" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-multicheckbox-filter',
+                    template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, FormatPipe]
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { column: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -10761,11 +11063,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 +11093,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 +11106,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 +11147,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 +11252,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 +11281,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 +11307,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 +11347,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 +11362,6 @@ class FilterMenuComponent {
     renderer;
     cdr;
     adaptiveGridService;
-    zone;
     idService;
     filterIcon = filterIcon;
     /**
@@ -10993,7 +11379,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 +11387,6 @@ class FilterMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.adaptiveGridService = adaptiveGridService;
-        this.zone = zone;
         this.idService = idService;
     }
     ngOnDestroy() {
@@ -11087,7 +11472,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 +11531,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
@@ -17249,19 +17634,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 +18854,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);
@@ -22418,8 +22790,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759838840,
-    version: '20.1.0-develop.15',
+    publishDate: 1759933234,
+    version: '20.1.0-develop.17',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -26565,8 +26937,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,
@@ -26824,6 +27217,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
             }] } });
 
 /**
@@ -30062,7 +30461,7 @@ class GridComponent {
      */
     selectable = false;
     /**
-     * Sets the descriptors for sorting the data ([see example]({% slug sorting_grid %})).
+     * Sets the descriptors for sorting the data ([see example](slug:manual_sorting_grid)).
      */
     set sort(value) {
         if (isArray(value)) {
@@ -30095,11 +30494,11 @@ class GridComponent {
      */
     trackBy = defaultTrackBy;
     /**
-     * Sets the filter descriptor for the data ([see examples]({% slug filtering_grid %})).
+     * Sets the filter descriptor for the data ([see examples](slug:manual_filtering_grid)).
      */
     filter;
     /**
-     * Sets the descriptors for grouping the data ([see example]({% slug grouping_grid %})).
+     * Sets the descriptors for grouping the data ([see example](slug:manual_grouping_grid)).
      */
     set group(value) {
         if (isArray(value)) {
@@ -32620,6 +33019,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
@@ -33480,6 +33888,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
@@ -38086,5 +38503,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 };