@progress/kendo-angular-grid/esm2022/filtering/menu/date-filter-menu-input.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 } from '@angular/core';
import { ColumnComponent } from "../../columns/column.component";
import { FilterService } from '../filter.service';
import { SinglePopupService } from '../../common/single-popup.service';
import { filter } from 'rxjs/operators';
import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
import { replaceMessagePlaceholder } from '../../utils';
import { ContextService } from '../../common/provider.service';
import { FilterInputDirective } from '../filter-input.directive';
import { FilterMenuInputWrapperComponent } from './filter-menu-input-wrapper.component';
import * as i0 from "@angular/core";
import * as i1 from "../../common/single-popup.service";
import * as i2 from "../../common/provider.service";
/**
 * @hidden
 */
export class DateFilterMenuInputComponent {
    popupService;
    ctx;
    operators = [];
    column;
    filter;
    operator;
    currentFilter;
    filterService;
    menuTabbingService;
    format;
    formatPlaceholder;
    placeholder;
    min;
    max;
    activeView;
    bottomView;
    topView;
    weekNumber;
    isFirstDropDown;
    subscription;
    constructor(popupService, ctx) {
        this.popupService = popupService;
        this.ctx = ctx;
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    open(picker) {
        this.subscription = this.popupService.onClose
            .pipe(filter(() => picker.isActive))
            .subscribe(e => e.preventDefault());
    }
    messageFor(key) {
        return this.ctx.localization.get(key);
    }
    get columnLabel() {
        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
        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: DateFilterMenuInputComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterMenuInputComponent, isStandalone: true, selector: "kendo-grid-date-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", menuTabbingService: "menuTabbingService", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber", isFirstDropDown: "isFirstDropDown" }, ngImport: i0, template: `
        <kendo-grid-filter-menu-input-wrapper
            [column]="column"
            [filter]="filter"
            [operators]="operators"
            [defaultOperator]="operator"
            [currentFilter]="currentFilter"
            [filterService]="filterService"
            [isFirstDropDown]="isFirstDropDown"
            [menuTabbingService]="menuTabbingService">
            <kendo-datepicker
                #picker
                kendoFilterInput
                [columnLabel]="columnLabel"
                [filterDelay]="0"
                (open)="open(picker)"
                [value]="currentFilter?.value"
                [placeholder]="placeholder"
                [formatPlaceholder]="formatPlaceholder"
                [format]="format"
                [min]="min"
                [max]="max"
                [activeView]="activeView"
                [bottomView]="bottomView"
                [topView]="topView"
                [weekNumber]="weekNumber">
                <kendo-datepicker-messages
                    [toggle]="messageFor('filterDateToggle')"
                    [today]="messageFor('filterDateToday')"
                ></kendo-datepicker-messages>
            </kendo-datepicker>
        </kendo-grid-filter-menu-input-wrapper>
    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-grid-date-filter-menu-input',
                    template: `
        <kendo-grid-filter-menu-input-wrapper
            [column]="column"
            [filter]="filter"
            [operators]="operators"
            [defaultOperator]="operator"
            [currentFilter]="currentFilter"
            [filterService]="filterService"
            [isFirstDropDown]="isFirstDropDown"
            [menuTabbingService]="menuTabbingService">
            <kendo-datepicker
                #picker
                kendoFilterInput
                [columnLabel]="columnLabel"
                [filterDelay]="0"
                (open)="open(picker)"
                [value]="currentFilter?.value"
                [placeholder]="placeholder"
                [formatPlaceholder]="formatPlaceholder"
                [format]="format"
                [min]="min"
                [max]="max"
                [activeView]="activeView"
                [bottomView]="bottomView"
                [topView]="topView"
                [weekNumber]="weekNumber">
                <kendo-datepicker-messages
                    [toggle]="messageFor('filterDateToggle')"
                    [today]="messageFor('filterDateToday')"
                ></kendo-datepicker-messages>
            </kendo-datepicker>
        </kendo-grid-filter-menu-input-wrapper>
    `,
                    standalone: true,
                    imports: [FilterMenuInputWrapperComponent, DatePickerComponent, FilterInputDirective, DatePickerCustomMessagesComponent]
                }]
        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.ContextService }]; }, propDecorators: { operators: [{
                type: Input
            }], column: [{
                type: Input
            }], filter: [{
                type: Input
            }], operator: [{
                type: Input
            }], currentFilter: [{
                type: Input
            }], filterService: [{
                type: Input
            }], menuTabbingService: [{
                type: Input
            }], format: [{
                type: Input
            }], formatPlaceholder: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], min: [{
                type: Input
            }], max: [{
                type: Input
            }], activeView: [{
                type: Input
            }], bottomView: [{
                type: Input
            }], topView: [{
                type: Input
            }], weekNumber: [{
                type: Input
            }], isFirstDropDown: [{
                type: Input
            }] } });