@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
159 lines (158 loc) • 7.9 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 { ContextService } from '../../common/provider.service';
import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
import { AdaptiveGridService } from '../../common/adaptiveness.service';
import { Subscription } from 'rxjs';
import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
import * as i2 from "../../common/adaptiveness.service";
/**
* @hidden
*/
export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
ctx;
adaptiveGridService;
filterService;
isFirstDropDown;
menuTabbingService;
firstOperatorDropDown;
_currentFilter;
subs = new Subscription();
/**
* @hidden
*/
get hostClasses() {
return false;
}
constructor(ctx, adaptiveGridService) {
super(null);
this.ctx = ctx;
this.adaptiveGridService = adaptiveGridService;
}
ngAfterViewInit() {
const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService?.menuTabbingService;
const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
if (shouldFocusFirstFocusable && !isTabbedInterface) {
this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
if (this.ctx.grid?.isActionSheetExpanded) {
this.subs.add(this.adaptiveGridService.animationEnd.subscribe(() => {
this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
}));
}
else {
this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
}
}
}
ngOnDestroy() {
this.subs?.unsubscribe();
}
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: "18.2.14", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }, { token: i2.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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
[adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
[adaptiveMode]="ctx.grid?.adaptiveMode"
[size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
[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", "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: "18.2.14", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-filter-menu-input-wrapper',
template: `
<kendo-dropdownlist
kendoFilterMenuDropDown
[adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
[adaptiveMode]="ctx.grid?.adaptiveMode"
[size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
[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: () => [{ type: i1.ContextService }, { type: i2.AdaptiveGridService }], propDecorators: { filterService: [{
type: Input
}], isFirstDropDown: [{
type: Input
}], menuTabbingService: [{
type: Input
}], firstOperatorDropDown: [{
type: ViewChild,
args: [DropDownListComponent, { static: false }]
}], currentFilter: [{
type: Input
}] } });