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

package/esm2015/editing-directives/reactive-editing.directive.js

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { RowEditingDirectiveBase } from './row-editing-directive-base';
+import { markAllAsTouched } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../grid.component";
+import * as i2 from "../editing/local-data-changes.service";
+/**
+ * A directive which encapsulates the editing operations of the Grid when using the
+ * Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-the-reactive-directive)).
+ */
+export class ReactiveEditingDirective extends RowEditingDirectiveBase {
+    constructor(grid, localDataChangesService) {
+        super(grid, localDataChangesService);
+        this.grid = grid;
+        this.localDataChangesService = localDataChangesService;
+    }
+    createModel(args) {
+        return this.createFormGroup(args);
+    }
+    saveModel({ dataItem, formGroup, isNew }) {
+        if (!formGroup.dirty && !isNew) {
+            return;
+        }
+        if (formGroup.valid) {
+            this.editService.assignValues(dataItem, formGroup.value);
+            return dataItem;
+        }
+        markAllAsTouched(formGroup);
+    }
+}
+ReactiveEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+ReactiveEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: { createFormGroup: ["kendoGridReactiveEditing", "createFormGroup"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReactiveEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridReactiveEditing]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoGridReactiveEditing']
+            }] } });

package/esm2015/editing-directives/row-editing-directive-base.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EditingDirectiveBase } from './editing-directive-base';
+import { LocalRowEditService } from './local-row-edit.service';
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowEditingDirectiveBase extends EditingDirectiveBase {
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions
+            .add(this.grid.edit.subscribe(this.editHandler.bind(this)));
+    }
+    createDefaultService() {
+        return new LocalRowEditService(this.grid, this.localDataChangesService);
+    }
+    addHandler() {
+        this.closeEditor();
+        super.addHandler();
+    }
+    editHandler(args) {
+        this.closeEditor();
+        this.rowIndex = args.rowIndex;
+        this.grid.editRow(args.rowIndex, this.createModel(args));
+    }
+    saveHandler(args) {
+        super.saveHandler(args);
+        this.clean();
+    }
+    closeEditor(rowIndex = this.rowIndex) {
+        super.closeEditor(rowIndex);
+        this.clean();
+    }
+    clean() {
+        delete this.rowIndex;
+    }
+}
+RowEditingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RowEditingDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+RowEditingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RowEditingDirectiveBase, selector: "[kendoGridRowEditingDirectiveBase]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RowEditingDirectiveBase, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridRowEditingDirectiveBase]'
+                }]
+        }] });

package/esm2015/editing-directives/template-editing.directive.js

@@ -0,0 +1,55 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { RowEditingDirectiveBase } from './row-editing-directive-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../grid.component";
+import * as i2 from "../editing/local-data-changes.service";
+/**
+ * A directive which encapsulates the editing operations of the Grid when using
+ * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-the-template-directive)).
+ */
+export class TemplateEditingDirective extends RowEditingDirectiveBase {
+    constructor(grid, localDataChangesService) {
+        super(grid, localDataChangesService);
+        this.grid = grid;
+        this.localDataChangesService = localDataChangesService;
+    }
+    editHandler(args) {
+        super.editHandler(args);
+        this.dataItem = args.dataItem;
+        this.originalValues = {};
+        this.editService.assignValues(this.originalValues, this.dataItem);
+    }
+    closeEditor(rowIndex) {
+        if (this.dataItem) {
+            this.editService.assignValues(this.dataItem, this.originalValues);
+        }
+        super.closeEditor(rowIndex);
+    }
+    createModel(args) {
+        if (args.isNew) {
+            return this.createNewItem();
+        }
+    }
+    saveModel(args) {
+        return args.dataItem;
+    }
+    clean() {
+        super.clean();
+        delete this.dataItem;
+    }
+}
+TemplateEditingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateEditingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateEditingDirective, selector: "[kendoGridTemplateEditing]", inputs: { createNewItem: ["kendoGridTemplateEditing", "createNewItem"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridTemplateEditing]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }]; }, propDecorators: { createNewItem: [{
+                type: Input,
+                args: ['kendoGridTemplateEditing']
+            }] } });

package/esm2015/excel/excel-command.directive.js

@@ -0,0 +1,62 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostListener, HostBinding } from '@angular/core';
+import { Button } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+import * as i1 from "./excel.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the `export-to-Excel` command of the Grid. You can apply this
+ * directive to any `button` element inside a
+ * [ToolbarTemplate]({% slug api_grid_commandcolumncomponent %}).
+ * When the user clicks a button associated with the directive, the
+ * [excelExport]({% slug api_grid_gridcomponent %}#toc-excelexport) event
+ * fires ([see example]({% slug excelexport_grid %})).
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <ng-template kendoGridToolbarTemplate>
+ *          <button kendoGridExcelCommand>Export to PDF</button>
+ *      </ng-template>
+ *      <kendo-grid-excel fileName="Grid.xlsx">
+ *      </kendo-grid-excel>
+ * </kendo-grid>
+ * ```
+ */
+export class ExcelCommandDirective extends Button {
+    constructor(excelService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.excelService = excelService;
+        this.ngZone = ngZone;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        this.excelService.exportClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    get excelClass() {
+        return true;
+    }
+}
+ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: i1.ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ExcelCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ExcelCommandDirective, selector: "[kendoGridExcelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-excel": "this.excelClass" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridExcelCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], excelClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-excel']
+            }] } });

package/esm2015/excel/excel.component.js

@@ -0,0 +1,156 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ContentChildren, QueryList } from '@angular/core';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { saveAs } from '@progress/kendo-file-saver';
+import { toDataURL, workbookOptions, ColumnBase } from '@progress/kendo-angular-excel-export';
+import { ExcelExportEvent } from './excel-export-event';
+import { orderBy } from '@progress/kendo-data-query';
+import { sortColumns } from '../columns/column-common';
+import * as i0 from "@angular/core";
+import * as i1 from "./excel.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+const fetchComponentData = (component) => {
+    return {
+        data: component.view.map(item => item),
+        group: component.group
+    };
+};
+const toExcelColumn = (column) => {
+    return {
+        title: column.title,
+        field: column.field,
+        locked: Boolean(column.locked),
+        width: column.width,
+        level: column.level,
+        hidden: !column.isVisible,
+        groupHeaderTemplate: column.groupHeaderTemplate,
+        groupHeaderColumnTemplate: column.groupHeaderColumnTemplate,
+        groupFooterTemplate: column.groupFooterTemplate,
+        footerTemplate: column.footerTemplate
+    };
+};
+const toExcelColumns = (columns) => {
+    const result = [];
+    sortColumns(columns)
+        .forEach((column) => {
+        if (column.isSpanColumn) {
+            result.push(...toExcelColumns(column.childrenArray));
+        }
+        else {
+            const excelColumn = toExcelColumn(column);
+            if (column.isColumnGroup) {
+                excelColumn.children = [excelColumn].concat(toExcelColumns(column.childrenArray));
+            }
+            result.push(excelColumn);
+        }
+    });
+    return result;
+};
+const componentColumns = (component) => {
+    const columns = toExcelColumns(component.columns.toArray());
+    return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);
+};
+/**
+ * Configures the settings for the export of Grid in Excel ([see example]({% slug excelexport_grid %})).
+ */
+export class ExcelComponent {
+    constructor(excelService, localization, zone) {
+        this.localization = localization;
+        this.zone = zone;
+        /**
+         * Specifies the file name of the exported Excel file.
+         * @default "Export.xlsx"
+         */
+        this.fileName = 'Export.xlsx';
+        /**
+         * @hidden
+         */
+        this.columns = new QueryList();
+        this.saveSubscription = excelService.saveToExcel.subscribe(this.save.bind(this));
+    }
+    ngOnDestroy() {
+        this.saveSubscription.unsubscribe();
+        if (this.dataSubscription) {
+            this.dataSubscription.unsubscribe();
+        }
+    }
+    save(component) {
+        const data = (this.fetchData || fetchComponentData)(component);
+        const exportData = (result) => {
+            delete this.dataSubscription;
+            this.exportData(component, result);
+        };
+        if (data instanceof Promise) {
+            data.then(exportData);
+        }
+        else if (data instanceof Observable) {
+            this.dataSubscription = data.pipe(take(1)).subscribe(exportData);
+        }
+        else {
+            exportData(data);
+        }
+    }
+    exportData(component, result) {
+        const options = workbookOptions({
+            columns: this.columns.length ? this.columns : componentColumns(component),
+            data: result.data,
+            group: result.group,
+            filterable: this.filterable,
+            creator: this.creator,
+            date: this.date,
+            paddingCellOptions: this.paddingCellOptions,
+            headerPaddingCellOptions: this.headerPaddingCellOptions,
+            rtl: this.localization.rtl,
+            collapsible: this.collapsible
+        });
+        const args = new ExcelExportEvent(options);
+        component.excelExport.emit(args);
+        if (!args.isDefaultPrevented()) {
+            this.zone.runOutsideAngular(() => this.saveFile(options));
+        }
+    }
+    saveFile(options) {
+        toDataURL(options).then((dataURL) => {
+            saveAs(dataURL, this.fileName, {
+                forceProxy: this.forceProxy,
+                proxyURL: this.proxyURL
+            });
+        });
+    }
+}
+ExcelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelComponent, deps: [{ token: i1.ExcelService }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ExcelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExcelComponent, selector: "kendo-grid-excel", inputs: { fileName: "fileName", filterable: "filterable", creator: "creator", date: "date", forceProxy: "forceProxy", proxyURL: "proxyURL", fetchData: "fetchData", paddingCellOptions: "paddingCellOptions", headerPaddingCellOptions: "headerPaddingCellOptions", collapsible: "collapsible" }, queries: [{ propertyName: "columns", predicate: ColumnBase, descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-excel',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { fileName: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], creator: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], forceProxy: [{
+                type: Input
+            }], proxyURL: [{
+                type: Input
+            }], fetchData: [{
+                type: Input
+            }], paddingCellOptions: [{
+                type: Input
+            }], headerPaddingCellOptions: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], columns: [{
+                type: ContentChildren,
+                args: [ColumnBase, { descendants: true }]
+            }] } });

package/esm2015/excel/excel.module.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { ExcelComponent } from './excel.component';
+import { ExcelCommandDirective } from './excel-command.directive';
+import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
+import * as i0 from "@angular/core";
+const declarations = [ExcelComponent, ExcelCommandDirective];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Excel component of the Grid.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Grid and Excel modules
+ * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, GridModule, ExcelModule], // import Grid and Excel modules
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export class ExcelModule {
+}
+ExcelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExcelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, declarations: [ExcelComponent, ExcelCommandDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelExportModule] });
+ExcelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, imports: [ExcelExportModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [declarations, ExcelExportModule]
+                }]
+        }] });

package/esm2015/excel/excel.service.js

@@ -0,0 +1,30 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable, isDevMode } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ExcelService {
+    constructor() {
+        this.saveToExcel = new EventEmitter();
+        this.exportClick = new EventEmitter();
+    }
+    save(component) {
+        if (this.saveToExcel.observers.length === 0) {
+            if (isDevMode()) {
+                throw new Error('Saving excel requires including the ExcelModule and adding the <kendo-grid-excel> component.');
+            }
+        }
+        else {
+            this.saveToExcel.emit(component);
+        }
+    }
+}
+ExcelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExcelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExcelService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/filtering/base-filter-cell.component.js

@@ -0,0 +1,163 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ContentChildren, QueryList, HostBinding, Component } from '@angular/core';
+import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { isPresent, observe } from '../utils';
+import { FilterOperatorBase, toJSON } from './operators/filter-operator.base';
+import { map } from 'rxjs/operators';
+import { Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./filter.service";
+const insertDefaultFilter = (index, rootFilter, filter) => {
+    rootFilter = (rootFilter || { filters: [], logic: "and" });
+    rootFilter.filters[index] = filter;
+    return filter;
+};
+/**
+ * @hidden
+ */
+export const setFilter = (index, filter, field, defaultOperator) => {
+    if (isPresent(filter) && isPresent(filter.filters) && filter.filters.length > index) {
+        return filter.filters[index];
+    }
+    else {
+        return insertDefaultFilter(index, filter, {
+            field,
+            operator: defaultOperator
+        });
+    }
+};
+/**
+ * @hidden
+ */
+export const logicOperators = (localization) => [
+    { text: localization.get("filterAndLogic"), value: "and" },
+    { text: localization.get("filterOrLogic"), value: "or" }
+];
+/**
+ * @hidden
+ */
+export const flatten = (filter) => {
+    if (isPresent(filter.filters)) {
+        return filter.filters.reduce((acc, curr) => acc.concat(isCompositeFilterDescriptor(curr) ? flatten(curr) : [curr]), []);
+    }
+    return [];
+};
+const trimFilterByField = (filter, field) => {
+    if (isPresent(filter) && isPresent(filter.filters)) {
+        filter.filters = filter.filters.filter(x => {
+            if (isCompositeFilterDescriptor(x)) {
+                trimFilterByField(x, field);
+                return x.filters.length;
+            }
+            else {
+                return x.field !== field;
+            }
+        });
+    }
+};
+/**
+ * @hidden
+ */
+export const filtersByField = (filter, field) => flatten(filter || {}).filter(x => x.field === field);
+/**
+ * @hidden
+ */
+export const filterByField = (filter, field) => {
+    let [currentFilter] = filtersByField(filter, field);
+    return currentFilter;
+};
+/**
+ * @hidden
+ */
+export const removeFilter = (filter, field) => {
+    trimFilterByField(filter, field);
+    return filter;
+};
+/**
+ * @hidden
+ */
+export const localizeOperators = operators => localization => Object.keys(operators).map(key => ({
+    text: localization.get(key),
+    value: operators[key]
+}));
+/**
+ * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
+ * @hidden
+ */
+export class BaseFilterCellComponent {
+    constructor(filterService) {
+        this.filterService = filterService;
+        this.operatorList = new QueryList();
+    }
+    get hostClasses() {
+        return true;
+    }
+    get operators() {
+        var _a;
+        return ((_a = this._operators) === null || _a === void 0 ? void 0 : _a.length) ? this._operators : this.defaultOperators;
+    }
+    set operators(values) {
+        this._operators = values;
+    }
+    /**
+     * @hidden
+     */
+    ngAfterContentInit() {
+        this.operationListSubscription = observe(this.operatorList)
+            .pipe(map(q => q.toArray()), map(toJSON))
+            .subscribe(x => {
+            this.operators = x;
+        });
+    }
+    ngOnDestroy() {
+        if (this.operationListSubscription) {
+            this.operationListSubscription.unsubscribe();
+        }
+    }
+    filterByField(field) {
+        return filterByField(this.filter, field);
+    }
+    filtersByField(field) {
+        return filtersByField(this.filter, field);
+    }
+    removeFilter(field) {
+        return removeFilter(this.filter, field);
+    }
+    updateFilter(filter) {
+        const root = this.filter || {
+            filters: [],
+            logic: "and"
+        };
+        let [currentFilter] = flatten(root).filter(x => x.field === filter.field);
+        if (!isPresent(currentFilter)) {
+            root.filters.push(filter);
+        }
+        else {
+            Object.assign(currentFilter, filter);
+        }
+        return root;
+    }
+    applyFilter(filter) {
+        this.filterService.filter(filter);
+    }
+}
+BaseFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterCellComponent, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+BaseFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseFilterCellComponent, selector: "kendo-grid-base-filter-cell", inputs: { operators: "operators" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, queries: [{ propertyName: "operatorList", predicate: FilterOperatorBase }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-base-filter-cell',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-filtercell']
+            }], operatorList: [{
+                type: ContentChildren,
+                args: [FilterOperatorBase]
+            }], operators: [{
+                type: Input
+            }] } });