@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
137 lines (136 loc) • 6.69 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, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { MenuTabbingService } from './menu-tabbing.service';
import { FilterService } from '../filter.service';
import { FilterInputWrapperComponent } from "../filter-input-wrapper.component";
import { replaceMessagePlaceholder } from '../../utils';
import { ContextService } from '../../common/provider.service';
import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
/**
* @hidden
*/
export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
ctx;
filterService;
isFirstDropDown;
menuTabbingService;
firstOperatorDropDown;
_currentFilter;
/**
* @hidden
*/
get hostClasses() {
return false;
}
constructor(ctx) {
super(null);
this.ctx = ctx;
}
ngAfterViewInit() {
const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService?.menuTabbingService;
const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
if (shouldFocusFirstFocusable && !isTabbedInterface) {
this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
this.firstOperatorDropDown.focus();
}
}
operatorChange(dataItem) {
this.currentOperator = dataItem;
}
filterChange(filter) {
this.applyFilter(filter);
}
/**
* The current filter for the associated column field.
* @readonly
* @type {FilterDescriptor}
*/
get currentFilter() {
return this._currentFilter;
}
/**
* The current filter for the associated column field.
* @readonly
* @type {FilterDescriptor}
*/
set currentFilter(value) {
this._currentFilter = value;
}
updateFilter(filter) {
Object.assign(this.currentFilter, filter);
return this.filter;
}
onChange(value) {
this.filterChange(this.updateFilter({
field: this.column.field,
operator: this.currentOperator,
value: value
}));
}
onShiftTab(e) {
e.stopImmediatePropagation();
if (!this.menuTabbingService?.isColumnMenu && this.isFirstDropDown && this.filterService.menuTabbingService.lastFocusable) {
e.preventDefault();
this.filterService.menuTabbingService.lastFocusable.focus();
}
}
get filterMenuDropDownLabel() {
const localizationMsg = this.ctx.localization.get('filterMenuOperatorsDropDownLabel') || '';
const columnName = this.column ? 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: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuInputWrapperComponent, isStandalone: true, selector: "kendo-grid-filter-menu-input-wrapper", inputs: { filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", currentFilter: "currentFilter" }, viewQueries: [{ propertyName: "firstOperatorDropDown", first: true, predicate: DropDownListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
<kendo-dropdownlist
kendoFilterMenuDropDown
[filterMenuDropDownLabel]="filterMenuDropDownLabel"
[data]="operators"
(valueChange)="operatorChange($event)"
[value]="currentOperator"
[valuePrimitive]="true"
textField="text"
valueField="value"
(keydown.shift.tab)="onShiftTab($event)">
</kendo-dropdownlist>
<ng-content></ng-content>
`, isInline: true, dependencies: [{ 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-filter-menu-input-wrapper',
template: `
<kendo-dropdownlist
kendoFilterMenuDropDown
[filterMenuDropDownLabel]="filterMenuDropDownLabel"
[data]="operators"
(valueChange)="operatorChange($event)"
[value]="currentOperator"
[valuePrimitive]="true"
textField="text"
valueField="value"
(keydown.shift.tab)="onShiftTab($event)">
</kendo-dropdownlist>
<ng-content></ng-content>
`,
standalone: true,
imports: [DropDownListComponent, FilterMenuDropDownListDirective]
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { filterService: [{
type: Input
}], isFirstDropDown: [{
type: Input
}], menuTabbingService: [{
type: Input
}], firstOperatorDropDown: [{
type: ViewChild,
args: [DropDownListComponent, { static: false }]
}], currentFilter: [{
type: Input
}] } });