@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
164 lines (163 loc) • 7.19 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, HostBinding, QueryList, ViewChildren } from '@angular/core';
import { FilterService } from '../filter.service';
import { BooleanFilterComponent } from '../boolean-filter.component';
import { guid } from '@progress/kendo-angular-common';
import { BooleanFilterRadioButtonDirective } from './filter-radio-button.directive';
import { replaceMessagePlaceholder } from '../../utils';
import { MenuTabbingService } from './menu-tabbing.service';
import { ContextService } from '../../common/provider.service';
import { NgFor } from '@angular/common';
import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
import * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
/**
* Represents a Boolean-filter menu component. [See example](slug:filter_menu#toc-built-in-filter-menu-components)
*
* @example
*
* ```html
* <kendo-grid-column field="Discontinued" title="Discontinued">
* <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
* <kendo-grid-boolean-filter-menu
* [column]="column"
* [filter]="filter"
* [filterService]="filterService">
* </kendo-grid-boolean-filter-menu>
* </ng-template>
* </kendo-grid-column>
* ```
*/
export class BooleanFilterMenuComponent extends BooleanFilterComponent {
/**
* @hidden
*/
get hostClasses() {
return false;
}
/**
* The current menu filter.
* @type {CompositeFilterDescriptor}
*/
filter = { filters: [], logic: "and" };
/**
* The `FilterService` instance which is responsible for handling the changes in the filter descriptor.
*/
filterService;
/**
* @hidden
*/
menuTabbingService;
idPrefix = guid();
/**
* @hidden
*/
radioButtons;
constructor(ctx) {
super(null, ctx);
}
ngAfterViewInit() {
this.filterService.menuTabbingService.firstFocusable = this.radioButtons.first.radioButtonEl;
if (!this.menuTabbingService?.isTabbedInterface) {
this.radioButtons.first.radioButtonEl.focus();
}
}
/**
* @hidden
*/
radioId(value) {
return `${this.idPrefix}_${value}`;
}
/**
* @hidden
*/
onChange(value, input) {
this.applyFilter(this.updateFilter({
field: this.column.field,
operator: "eq",
value: value
}));
this.filterService.menuTabbingService.firstFocusable = input.hostElement.nativeElement;
}
/**
* @hidden
*/
isSelected(radioValue) {
return this.filtersByField(this.column.field).some(({ value }) => value === radioValue);
}
/**
* @hidden
*/
onShiftTab(e) {
if (!this.menuTabbingService?.isColumnMenu && this.filterService.menuTabbingService.lastFocusable) {
e.preventDefault();
this.filterService.menuTabbingService.lastFocusable.focus();
}
}
/**
* @hidden
*/
get columnLabel() {
const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
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: BooleanFilterMenuComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-grid-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
<ul class="k-radio-list k-reset">
<li *ngFor="let item of items">
<kendo-radiobutton
kendoFilterMenuRadioButton
[columnLabel]="columnLabel"
#input
[name]="idPrefix"
[checked]="isSelected(item.value)"
[attr.id]="radioId(item.value)"
(change)="onChange(item.value, input)"
(keydown.shift.tab)="onShiftTab($event)"
></kendo-radiobutton>
<label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-boolean-filter-menu',
template: `
<ul class="k-radio-list k-reset">
<li *ngFor="let item of items">
<kendo-radiobutton
kendoFilterMenuRadioButton
[columnLabel]="columnLabel"
#input
[name]="idPrefix"
[checked]="isSelected(item.value)"
[attr.id]="radioId(item.value)"
(change)="onChange(item.value, input)"
(keydown.shift.tab)="onShiftTab($event)"
></kendo-radiobutton>
<label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
</li>
</ul>
`,
standalone: true,
imports: [NgFor, RadioButtonComponent, BooleanFilterRadioButtonDirective]
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-filtercell']
}], filter: [{
type: Input
}], filterService: [{
type: Input
}], menuTabbingService: [{
type: Input
}], radioButtons: [{
type: ViewChildren,
args: [BooleanFilterRadioButtonDirective]
}] } });