@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
196 lines (195 loc) • 9.84 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 { MenuTabbingService } from './menu-tabbing.service';
import { Component, Input, HostBinding } from '@angular/core';
import { StringFilterComponent } from '../string-filter.component';
import { FilterService } from '../filter.service';
import { setFilter, logicOperators } from '../base-filter-cell.component';
import { ContextService } from '../../common/provider.service';
import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
import { NgIf } from '@angular/common';
import { StringFilterMenuInputComponent } from './string-filter-menu-input.component';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
/**
* Represents a string-filter menu component.
* Use this component to filter string values in the Grid.
* [See example](slug:filter_menu#toc-built-in-filter-menu-components).
*
* @example
* ```html
* <kendo-grid-column field="ProductName">
* <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
* <kendo-grid-string-filter-menu
* [column]="column"
* [filter]="filter"
* [filterService]="filterService">
* </kendo-grid-string-filter-menu>
* </ng-template>
* </kendo-grid-column>
* ```
* @remarks
* Supported children components are: {@link EqualFilterOperatorComponent}, {@link NotEqualFilterOperatorComponent}, {@link ContainsFilterOperatorComponent}, {@link DoesNotContainFilterOperatorComponent}, {@link StartsWithFilterOperatorComponent}, {@link EndsWithFilterOperatorComponent}, {@link IsNullFilterOperatorComponent}, {@link IsNotNullFilterOperatorComponent}, {@link IsEmptyFilterOperatorComponent}, {@link IsNotEmptyFilterOperatorComponent}.
*/
export class StringFilterMenuComponent extends StringFilterComponent {
ctx;
logicOperators = [];
/**
* @hidden
*/
get hostClasses() {
return false;
}
/**
* The current menu filter.
* @type {CompositeFilterDescriptor}
*/
filter = { filters: [], logic: "and" };
/**
* Determines if the inputs for the second criteria are displayed.
* @default true
*/
extra = true;
/**
* Sets to `FilterService` instance that handles changes in the filter descriptor.
*/
filterService;
/**
* The placeholder text for the filter input.
* @type {string}
*/
placeholder;
/**
* Sets the placeholder text for the second filter input.
* Applies when `extra` is set to `true`.
* @type {string}
*/
extraPlaceholder;
/**
* @hidden
*/
menuTabbingService;
constructor(ctx) {
super(null, ctx);
this.ctx = ctx;
this.logicOperators = logicOperators(this.ctx.localization);
}
get firstFilter() {
return setFilter(0, this.filter, (this.column || {}).field, this.operator);
}
get secondFilter() {
return setFilter(1, this.filter, (this.column || {}).field, this.operator);
}
logicChange(value) {
this.filter.logic = value;
}
get filterMenuDropDownLabel() {
const localizationMsg = this.ctx.localization.get('filterMenuLogicDropDownLabel') || '';
const columnName = this.column ? this.column.title || this.column.field : '';
return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
}
localizationChange() {
this.logicOperators = logicOperators(this.ctx.localization);
super.localizationChange();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-grid-string-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
<kendo-grid-string-filter-menu-input
[]="firstFilter"
[]="operators"
[]="filterService"
[]="column"
[]="filter"
[]="true"
[]="placeholder"
[]="menuTabbingService">
</kendo-grid-string-filter-menu-input>
<kendo-dropdownlist
*ngIf="extra"
kendoFilterMenuDropDown
[]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
[]="ctx.grid?.adaptiveMode"
[]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
[]="filterMenuDropDownLabel"
class="k-filter-and"
[]="logicOperators"
[]="true" (valueChange)="logicChange($event)"
[]="filter?.logic"
textField="text"
valueField="value">
</kendo-dropdownlist>
<kendo-grid-string-filter-menu-input
*ngIf="extra"
[]="operators"
[]="secondFilter"
[]="filterService"
[]="column"
[]="filter"
[]="extraPlaceholder"
[]="menuTabbingService">
</kendo-grid-string-filter-menu-input>
`, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { 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", "adaptiveTitle", "adaptiveSubtitle", "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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-string-filter-menu',
template: `
<kendo-grid-string-filter-menu-input
[]="firstFilter"
[]="operators"
[]="filterService"
[]="column"
[]="filter"
[]="true"
[]="placeholder"
[]="menuTabbingService">
</kendo-grid-string-filter-menu-input>
<kendo-dropdownlist
*ngIf="extra"
kendoFilterMenuDropDown
[]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
[]="ctx.grid?.adaptiveMode"
[]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
[]="filterMenuDropDownLabel"
class="k-filter-and"
[]="logicOperators"
[]="true" (valueChange)="logicChange($event)"
[]="filter?.logic"
textField="text"
valueField="value">
</kendo-dropdownlist>
<kendo-grid-string-filter-menu-input
*ngIf="extra"
[]="operators"
[]="secondFilter"
[]="filterService"
[]="column"
[]="filter"
[]="extraPlaceholder"
[]="menuTabbingService">
</kendo-grid-string-filter-menu-input>
`,
standalone: true,
imports: [StringFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-filtercell']
}], filter: [{
type: Input
}], extra: [{
type: Input
}], filterService: [{
type: Input
}], placeholder: [{
type: Input
}], extraPlaceholder: [{
type: Input
}], menuTabbingService: [{
type: Input
}] } });