@progress/kendo-angular-grid/esm2022/filtering/menu/string-filter-menu.component.mjs

Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.

/**-----------------------------------------------------------------------------------------
* 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 { replaceMessagePlaceholder } from '../../utils';
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 * as i0 from "@angular/core";
import * as i1 from "../../common/provider.service";
/**
 * Represents a string-filter menu component
 * ([see example](slug:filter_menu#toc-built-in-filter-menu-components)).
 *
 * ```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>
 * ```
 */
export class StringFilterMenuComponent extends StringFilterComponent {
    logicOperators = logicOperators(this.ctx.localization);
    /**
     * @hidden
     */
    get hostClasses() {
        return false;
    }
    /**
     * The current menu filter.
     * @type {CompositeFilterDescriptor}
     */
    filter = { filters: [], logic: "and" };
    /**
     * Determines if the inputs of second criteria will displayed.
     * @default true
     */
    extra = true;
    /**
     * The `FilterService` instance which is responsible for handling the changes in the filter descriptor.
     */
    filterService;
    /**
     * The placeholder text for the filter input.
     * @type {string}
     */
    placeholder;
    /**
     * 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);
    }
    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
            [currentFilter]="firstFilter"
            [operators]="operators"
            [filterService]="filterService"
            [column]="column"
            [filter]="filter"
            [isFirstDropDown]="true"
            [placeholder]="placeholder"
            [menuTabbingService]="menuTabbingService">
        </kendo-grid-string-filter-menu-input>
        <kendo-dropdownlist
            *ngIf="extra"
            kendoFilterMenuDropDown
            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
            class="k-filter-and"
            [data]="logicOperators"
            [valuePrimitive]="true" (valueChange)="logicChange($event)"
            [value]="filter?.logic"
            textField="text"
            valueField="value">
        </kendo-dropdownlist>
        <kendo-grid-string-filter-menu-input
            *ngIf="extra"
            [operators]="operators"
            [currentFilter]="secondFilter"
            [filterService]="filterService"
            [column]="column"
            [filter]="filter"
            [placeholder]="extraPlaceholder"
            [menuTabbingService]="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", "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: StringFilterMenuComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-grid-string-filter-menu',
                    template: `
        <kendo-grid-string-filter-menu-input
            [currentFilter]="firstFilter"
            [operators]="operators"
            [filterService]="filterService"
            [column]="column"
            [filter]="filter"
            [isFirstDropDown]="true"
            [placeholder]="placeholder"
            [menuTabbingService]="menuTabbingService">
        </kendo-grid-string-filter-menu-input>
        <kendo-dropdownlist
            *ngIf="extra"
            kendoFilterMenuDropDown
            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
            class="k-filter-and"
            [data]="logicOperators"
            [valuePrimitive]="true" (valueChange)="logicChange($event)"
            [value]="filter?.logic"
            textField="text"
            valueField="value">
        </kendo-dropdownlist>
        <kendo-grid-string-filter-menu-input
            *ngIf="extra"
            [operators]="operators"
            [currentFilter]="secondFilter"
            [filterService]="filterService"
            [column]="column"
            [filter]="filter"
            [placeholder]="extraPlaceholder"
            [menuTabbingService]="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
            }] } });