@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
238 lines (237 loc) • 9.72 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, Output, EventEmitter, HostBinding, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { Keys } from '@progress/kendo-angular-common';
import { SizingOptionsService } from '../../layout/sizing-options.service';
import { filterClearIcon, filterIcon } from '@progress/kendo-svg-icons';
import { ContextService } from '../../common/provider.service';
import { replaceMessagePlaceholder } from '../../utils';
import { ColumnComponent } from '../../columns/column.component';
import { FocusableDirective } from '../../navigation/focusable.directive';
import { NgIf } from '@angular/common';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
import * as i2 from "../../layout/sizing-options.service";
/**
* Represents a component which accommodates the filter operators.
*
* @example
* ```html
* <kendo-grid [data]="gridData">
* <kendo-grid-column field="ProductName">
* <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
* <input />
* <kendo-grid-filter-cell-operators
* [operators]="[{text: 'Equals', value: 'eq'}]">
* </kendo-grid-filter-cell-operators>
* </ng-template>
* </kendo-grid-column>
* <kendo-grid>
* ```
*/
export class FilterCellOperatorsComponent {
ctx;
sizing;
clearText = 'Clear';
filterClearIcon = filterClearIcon;
/**
* @hidden
*/
filterSVGIcon = filterIcon;
/**
* @hidden
*/
size = 'medium';
/**
* @hidden
*/
get hostClasses() {
return true;
}
/**
* @hidden
*/
dropdown;
/**
* The filter operators that will be displayed.
*/
operators = [];
/**
* Determines if the **Clear** button will be displayed.
* @type {boolean}
*/
showButton;
/**
* Determines if the list of operators will be displayed.
* @type {boolean}
* @default true
*/
showOperators = true;
/**
* The selected operator.
* @type {string}
*/
value;
/**
* The Grid column which the filter operators are associated with.
*/
column;
/**
* Fires when the operator is selected.
* @type {EventEmitter<string>}
*/
valueChange = new EventEmitter();
/**
* Fires when the **Clear** button is clicked.
* @type {EventEmitter<undefined>}
*/
clear = new EventEmitter();
subs;
constructor(ctx, sizing) {
this.ctx = ctx;
this.sizing = sizing;
}
/**
* @hidden
*/
onChange(dataItem) {
this.valueChange.emit(dataItem);
}
/**
* @hidden
*/
clearClick() {
this.clear.emit();
return false;
}
/**
* @hidden
*/
clearKeydown(args) {
if (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) {
this.clear.emit();
}
}
/**
* @hidden
*/
dropdownKeydown(args) {
if (args.defaultPrevented) {
return;
}
if (args.keyCode === Keys.Enter && !this.dropdown.isOpen) {
this.dropdown.toggle(true);
args.preventDefault();
}
}
ngOnInit() {
this.subs = this.ctx.localization.changes.subscribe(() => this.clearText = this.ctx.localization.get('filterClearButton'));
this.subs.add(this.sizing.changes.subscribe((size) => this.size = size));
}
ngOnDestroy() {
if (this.subs) {
this.subs.unsubscribe();
}
}
/**
* @hidden
*/
get columnLabel() {
const localizationMsg = this.ctx.localization.get('filterCellOperatorLabel') || '';
const columnName = this.column.title || this.column.field;
return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.ContextService }, { token: i2.SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterCellOperatorsComponent, isStandalone: true, selector: "kendo-grid-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value", column: "column" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
<kendo-dropdownlist
#dropdown
*ngIf="showOperators"
kendoGridFocusable
[attr.aria-label]="column && columnLabel"
[data]="operators"
class="k-dropdown-operator"
(valueChange)="onChange($event)"
[value]="value"
icon="filter"
[svgIcon]="filterSVGIcon"
[valuePrimitive]="true"
textField="text"
[popupSettings]="{ width: 'auto' }"
valueField="value"
[size]="size"
(keydown)="dropdownKeydown($event)">
</kendo-dropdownlist>
<button type="button"
kendoButton
kendoGridFocusable
*ngIf="showButton"
icon="filter-clear"
[svgIcon]="filterClearIcon"
[title]="clearText"
[size]="size"
(click)="clearClick()"
(keydown)="clearKeydown($event)"></button>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { 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: FilterCellOperatorsComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-filter-cell-operators',
template: `
<kendo-dropdownlist
#dropdown
*ngIf="showOperators"
kendoGridFocusable
[attr.aria-label]="column && columnLabel"
[data]="operators"
class="k-dropdown-operator"
(valueChange)="onChange($event)"
[value]="value"
icon="filter"
[svgIcon]="filterSVGIcon"
[valuePrimitive]="true"
textField="text"
[popupSettings]="{ width: 'auto' }"
valueField="value"
[size]="size"
(keydown)="dropdownKeydown($event)">
</kendo-dropdownlist>
<button type="button"
kendoButton
kendoGridFocusable
*ngIf="showButton"
icon="filter-clear"
[svgIcon]="filterClearIcon"
[title]="clearText"
[size]="size"
(click)="clearClick()"
(keydown)="clearKeydown($event)"></button>
`,
standalone: true,
imports: [NgIf, DropDownListComponent, FocusableDirective, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.SizingOptionsService }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-filtercell-operator']
}], dropdown: [{
type: ViewChild,
args: ['dropdown', { static: false }]
}], operators: [{
type: Input
}], showButton: [{
type: Input
}], showOperators: [{
type: Input
}], value: [{
type: Input
}], column: [{
type: Input
}], valueChange: [{
type: Output
}], clear: [{
type: Output
}] } });