@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
139 lines (138 loc) • 7.93 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 } from '@angular/core';
import { FilterService } from '../filter.service';
import { DateFilterComponent } from '../date-filter.component';
import { replaceMessagePlaceholder } from '../../utils';
import { SizingOptionsService } from '../../layout/sizing-options.service';
import { ContextService } from '../../common/provider.service';
import { FocusableDirective } from '../../navigation/focusable.directive';
import { FilterInputDirective } from '../filter-input.directive';
import { FilterCellWrapperComponent } from './filter-cell-wrapper.component';
import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
import * as i0 from "@angular/core";
import * as i1 from "../filter.service";
import * as i2 from "../../common/provider.service";
import * as i3 from "../../layout/sizing-options.service";
/**
* Represents a [DatePicker](slug:overview_datepicker) filter-cell component.
* See the article about the [built-in filter components](slug:filter_row#toc-built-in-filter-row-components).
*
* @example
*
* ```html
* <kendo-grid-column field="FirstOrderedOn">
* <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
* <kendo-grid-date-filter-cell
* [column]="column"
* [filter]="filter">
* </kendo-grid-date-filter-cell>
* </ng-template>
* </kendo-grid-column>
* ```
*/
export class DateFilterCellComponent extends DateFilterComponent {
ctx;
/**
* Determines if the drop-down filter operators will be displayed. The default value is `true`.
* @type {boolean}
* @default true
*/
showOperators = true;
subs;
constructor(filterService, ctx, sizingService) {
super(filterService, ctx);
this.ctx = ctx;
this.subs = sizingService.changes.subscribe((size) => this.size = size);
}
ngOnDestroy() {
this.subs && this.subs.unsubscribe();
}
/**
* @hidden
*/
messageFor(key) {
return this.ctx.localization.get(key);
}
/**
* @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: DateFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.ContextService }, { token: i3.SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterCellComponent, isStandalone: true, selector: "kendo-grid-date-filter-cell", inputs: { showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
<kendo-grid-filter-wrapper-cell
[column]="column"
[filter]="filter"
[operators]="operators"
[defaultOperator]="operator"
[showOperators]="showOperators"
>
<kendo-datepicker
kendoFilterInput
kendoGridFocusable
[columnLabel]="columnLabel"
[value]="currentFilter?.value"
[format]="format"
[size]="size"
[formatPlaceholder]="formatPlaceholder"
[placeholder]="placeholder"
[activeView]="activeView"
[bottomView]="bottomView"
[topView]="topView"
[min]="min"
[max]="max"
[weekNumber]="weekNumber">
<kendo-datepicker-messages
[toggle]="messageFor('filterDateToggle')"
[today]="messageFor('filterDateToday')"
></kendo-datepicker-messages>
</kendo-datepicker>
</kendo-grid-filter-wrapper-cell>
`, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { 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: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-date-filter-cell',
template: `
<kendo-grid-filter-wrapper-cell
[column]="column"
[filter]="filter"
[operators]="operators"
[defaultOperator]="operator"
[showOperators]="showOperators"
>
<kendo-datepicker
kendoFilterInput
kendoGridFocusable
[columnLabel]="columnLabel"
[value]="currentFilter?.value"
[format]="format"
[size]="size"
[formatPlaceholder]="formatPlaceholder"
[placeholder]="placeholder"
[activeView]="activeView"
[bottomView]="bottomView"
[topView]="topView"
[min]="min"
[max]="max"
[weekNumber]="weekNumber">
<kendo-datepicker-messages
[toggle]="messageFor('filterDateToggle')"
[today]="messageFor('filterDateToday')"
></kendo-datepicker-messages>
</kendo-datepicker>
</kendo-grid-filter-wrapper-cell>
`,
standalone: true,
imports: [FilterCellWrapperComponent, DatePickerComponent, FilterInputDirective, FocusableDirective, DatePickerCustomMessagesComponent]
}]
}], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.ContextService }, { type: i3.SizingOptionsService }]; }, propDecorators: { showOperators: [{
type: Input
}] } });