@progress/kendo-angular-filter 21.1.1-develop.2 → 21.2.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,7 +16,6 @@ import { FilterBooleanEditorComponent } from './editors/boolean-editor.component
|
|
|
16
16
|
import { FilterNumericEditorComponent } from './editors/numeric-editor.component';
|
|
17
17
|
import { FilterTextEditorComponent } from './editors/text-editor.component';
|
|
18
18
|
import { FilterExpressionOperatorsComponent } from './filter-expression-operators.component';
|
|
19
|
-
import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
|
|
20
19
|
import { AriaLabelValueDirective } from './aria-label.directive';
|
|
21
20
|
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
|
|
22
21
|
import { TemplateContextDirective } from '@progress/kendo-angular-common';
|
|
@@ -205,61 +204,73 @@ export class FilterExpressionComponent extends BaseFilterRowComponent {
|
|
|
205
204
|
this.editorTemplate = filterExpression?.editorTemplate;
|
|
206
205
|
}
|
|
207
206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i3.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterExpressionComponent, isStandalone: true, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
|
|
209
208
|
provide: FilterItem,
|
|
210
209
|
useExisting: forwardRef(() => FilterExpressionComponent)
|
|
211
210
|
}], usesInheritance: true, ngImport: i0, template: `
|
|
212
211
|
<div class="k-filter-toolbar">
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
</div>
|
|
227
|
-
<div *ngIf="!isBoolean" class="k-filter-operator k-toolbar-item" >
|
|
228
|
-
<kendo-filter-expression-operators
|
|
229
|
-
[currentItem]="currentItem"
|
|
230
|
-
[operators]="operators"
|
|
231
|
-
[editorType]="getEditorType()"
|
|
232
|
-
(valueChange)="onOperatorChange($event);">
|
|
233
|
-
</kendo-filter-expression-operators>
|
|
234
|
-
</div>
|
|
235
|
-
|
|
236
|
-
<div class="k-filter-value k-toolbar-item">
|
|
237
|
-
<ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
|
|
238
|
-
<kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
239
|
-
<kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
240
|
-
<kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
241
|
-
<kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
242
|
-
</ng-container>
|
|
243
|
-
<ng-container *ngIf="editorTemplate">
|
|
244
|
-
<ng-template
|
|
245
|
-
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
246
|
-
</ng-template>
|
|
247
|
-
</ng-container>
|
|
248
|
-
</div>
|
|
249
|
-
|
|
250
|
-
<button
|
|
251
|
-
kendoButton
|
|
252
|
-
class="k-toolbar-button"
|
|
253
|
-
tabindex="-1"
|
|
254
|
-
icon="x"
|
|
255
|
-
[svgIcon]="xIcon"
|
|
256
|
-
fillMode="flat"
|
|
257
|
-
[title]="messageFor('remove')"
|
|
258
|
-
(click)="removeFilterExpression()">
|
|
259
|
-
</button>
|
|
212
|
+
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
213
|
+
<div class="k-filter-field k-toolbar-item" >
|
|
214
|
+
<kendo-dropdownlist
|
|
215
|
+
[tabindex]="-1"
|
|
216
|
+
[kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
|
|
217
|
+
[title]="messageFor('filterExpressionFilters')"
|
|
218
|
+
[data]="getFilters()"
|
|
219
|
+
textField="title"
|
|
220
|
+
valueField="field"
|
|
221
|
+
[value]="currentItem.field"
|
|
222
|
+
[valuePrimitive]="true"
|
|
223
|
+
(valueChange)="filterValueChange($event)">
|
|
224
|
+
</kendo-dropdownlist>
|
|
260
225
|
</div>
|
|
226
|
+
@if (!isBoolean) {
|
|
227
|
+
<div class="k-filter-operator k-toolbar-item" >
|
|
228
|
+
<kendo-filter-expression-operators
|
|
229
|
+
[currentItem]="currentItem"
|
|
230
|
+
[operators]="operators"
|
|
231
|
+
[editorType]="getEditorType()"
|
|
232
|
+
(valueChange)="onOperatorChange($event);">
|
|
233
|
+
</kendo-filter-expression-operators>
|
|
234
|
+
</div>
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
<div class="k-filter-value k-toolbar-item">
|
|
238
|
+
@if (!editorTemplate) {
|
|
239
|
+
@switch (getEditorType()) {
|
|
240
|
+
@case ('string') {
|
|
241
|
+
<kendo-filter-text-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
242
|
+
}
|
|
243
|
+
@case ('number') {
|
|
244
|
+
<kendo-filter-numeric-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
245
|
+
}
|
|
246
|
+
@case ('boolean') {
|
|
247
|
+
<kendo-filter-boolean-editor [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
248
|
+
}
|
|
249
|
+
@case ('date') {
|
|
250
|
+
<kendo-filter-date-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
@if (editorTemplate) {
|
|
255
|
+
<ng-template
|
|
256
|
+
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
257
|
+
</ng-template>
|
|
258
|
+
}
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<button
|
|
262
|
+
kendoButton
|
|
263
|
+
class="k-toolbar-button"
|
|
264
|
+
tabindex="-1"
|
|
265
|
+
icon="x"
|
|
266
|
+
[svgIcon]="xIcon"
|
|
267
|
+
fillMode="flat"
|
|
268
|
+
[title]="messageFor('remove')"
|
|
269
|
+
(click)="removeFilterExpression()">
|
|
270
|
+
</button>
|
|
271
|
+
</div>
|
|
261
272
|
</div>
|
|
262
|
-
|
|
273
|
+
`, 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
263
274
|
}
|
|
264
275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterExpressionComponent, decorators: [{
|
|
265
276
|
type: Component,
|
|
@@ -271,58 +282,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
271
282
|
selector: 'kendo-filter-expression',
|
|
272
283
|
template: `
|
|
273
284
|
<div class="k-filter-toolbar">
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
</
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
285
|
+
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
286
|
+
<div class="k-filter-field k-toolbar-item" >
|
|
287
|
+
<kendo-dropdownlist
|
|
288
|
+
[tabindex]="-1"
|
|
289
|
+
[kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
|
|
290
|
+
[title]="messageFor('filterExpressionFilters')"
|
|
291
|
+
[data]="getFilters()"
|
|
292
|
+
textField="title"
|
|
293
|
+
valueField="field"
|
|
294
|
+
[value]="currentItem.field"
|
|
295
|
+
[valuePrimitive]="true"
|
|
296
|
+
(valueChange)="filterValueChange($event)">
|
|
297
|
+
</kendo-dropdownlist>
|
|
298
|
+
</div>
|
|
299
|
+
@if (!isBoolean) {
|
|
300
|
+
<div class="k-filter-operator k-toolbar-item" >
|
|
301
|
+
<kendo-filter-expression-operators
|
|
302
|
+
[currentItem]="currentItem"
|
|
303
|
+
[operators]="operators"
|
|
304
|
+
[editorType]="getEditorType()"
|
|
305
|
+
(valueChange)="onOperatorChange($event);">
|
|
306
|
+
</kendo-filter-expression-operators>
|
|
307
|
+
</div>
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
<div class="k-filter-value k-toolbar-item">
|
|
311
|
+
@if (!editorTemplate) {
|
|
312
|
+
@switch (getEditorType()) {
|
|
313
|
+
@case ('string') {
|
|
314
|
+
<kendo-filter-text-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
315
|
+
}
|
|
316
|
+
@case ('number') {
|
|
317
|
+
<kendo-filter-numeric-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
318
|
+
}
|
|
319
|
+
@case ('boolean') {
|
|
320
|
+
<kendo-filter-boolean-editor [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
321
|
+
}
|
|
322
|
+
@case ('date') {
|
|
323
|
+
<kendo-filter-date-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
@if (editorTemplate) {
|
|
328
|
+
<ng-template
|
|
329
|
+
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
330
|
+
</ng-template>
|
|
331
|
+
}
|
|
321
332
|
</div>
|
|
333
|
+
|
|
334
|
+
<button
|
|
335
|
+
kendoButton
|
|
336
|
+
class="k-toolbar-button"
|
|
337
|
+
tabindex="-1"
|
|
338
|
+
icon="x"
|
|
339
|
+
[svgIcon]="xIcon"
|
|
340
|
+
fillMode="flat"
|
|
341
|
+
[title]="messageFor('remove')"
|
|
342
|
+
(click)="removeFilterExpression()">
|
|
343
|
+
</button>
|
|
344
|
+
</div>
|
|
322
345
|
</div>
|
|
323
|
-
|
|
346
|
+
`,
|
|
324
347
|
standalone: true,
|
|
325
|
-
imports: [DropDownListComponent, AriaLabelValueDirective,
|
|
348
|
+
imports: [DropDownListComponent, AriaLabelValueDirective, FilterExpressionOperatorsComponent, FilterTextEditorComponent, FilterNumericEditorComponent, FilterBooleanEditorComponent, FilterDateEditorComponent, TemplateContextDirective, ButtonComponent]
|
|
326
349
|
}]
|
|
327
350
|
}], ctorParameters: () => [{ type: i1.FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.NavigationService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { currentItem: [{
|
|
328
351
|
type: Input
|
|
@@ -11,7 +11,7 @@ import { NavigationService } from './navigation.service';
|
|
|
11
11
|
import { FilterItem, getKeyByValue, localizeOperators, logicOperators, selectors } from './util';
|
|
12
12
|
import { FilterExpressionComponent } from './filter-expression.component';
|
|
13
13
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
14
|
-
import {
|
|
14
|
+
import { NgClass } from '@angular/common';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
import * as i1 from "./filter.service";
|
|
17
17
|
import * as i2 from "./navigation.service";
|
|
@@ -124,80 +124,87 @@ export class FilterGroupComponent extends BaseFilterRowComponent {
|
|
|
124
124
|
this.navigationService.focusCurrentElement(elementToFocus, true);
|
|
125
125
|
}
|
|
126
126
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i3.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
127
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterGroupComponent, isStandalone: true, selector: "kendo-filter-group", inputs: { currentItem: "currentItem" }, providers: [{
|
|
128
128
|
provide: FilterItem,
|
|
129
129
|
useExisting: forwardRef(() => FilterGroupComponent)
|
|
130
130
|
}], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
131
131
|
<div class="k-filter-toolbar">
|
|
132
132
|
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
133
133
|
<div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
|
|
134
|
+
@for (operator of operators; track operator) {
|
|
134
135
|
<button
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
{{getOperator(operator.value)}}
|
|
136
|
+
tabindex="-1"
|
|
137
|
+
kendoButton
|
|
138
|
+
class="k-toolbar-button"
|
|
139
|
+
[ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
|
|
140
|
+
[selected]="currentItem.logic === operator.value"
|
|
141
|
+
[attr.aria-pressed]="currentItem.logic === operator.value"
|
|
142
|
+
[title]="operator.text"
|
|
143
|
+
(click)="selectedChange(operator.value)"
|
|
144
|
+
>
|
|
145
|
+
{{getOperator(operator.value)}}
|
|
146
146
|
</button>
|
|
147
|
+
}
|
|
147
148
|
</div>
|
|
148
|
-
|
|
149
|
+
|
|
149
150
|
<button
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
151
|
+
kendoButton
|
|
152
|
+
class="k-toolbar-button"
|
|
153
|
+
tabindex="-1"
|
|
154
|
+
[title]="messageFor('addFilter')"
|
|
155
|
+
icon="filter-add-expression"
|
|
156
|
+
[svgIcon]="filterAddExpressionIcon"
|
|
157
|
+
(click)="addFilterExpression()">
|
|
158
|
+
{{messageFor('addFilter')}}
|
|
158
159
|
</button>
|
|
159
|
-
|
|
160
|
+
|
|
160
161
|
<button
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
162
|
+
kendoButton
|
|
163
|
+
class="k-toolbar-button"
|
|
164
|
+
tabindex="-1"
|
|
165
|
+
[title]="messageFor('addGroup')"
|
|
166
|
+
icon="filter-add-group"
|
|
167
|
+
[svgIcon]="filterAddGroupIcon"
|
|
168
|
+
(click)="addFilterGroup()">
|
|
169
|
+
{{messageFor('addGroup')}}
|
|
169
170
|
</button>
|
|
170
171
|
|
|
171
172
|
<button
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
173
|
+
kendoButton
|
|
174
|
+
class="k-toolbar-button"
|
|
175
|
+
tabindex="-1"
|
|
176
|
+
icon="x"
|
|
177
|
+
[svgIcon]="xIcon"
|
|
178
|
+
fillMode="flat"
|
|
179
|
+
[title]="messageFor('remove')"
|
|
180
|
+
(click)="removeFilterGroup()">
|
|
180
181
|
</button>
|
|
182
|
+
</div>
|
|
181
183
|
</div>
|
|
182
|
-
</div>
|
|
183
184
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
185
|
+
@if (currentItem.filters) {
|
|
186
|
+
<ul class="k-filter-lines" role="group">
|
|
187
|
+
@for (item of currentItem.filters; track $index; let i = $index) {
|
|
188
|
+
@if (!item['filters']) {
|
|
189
|
+
<li class="k-filter-item" role="treeitem">
|
|
190
|
+
<kendo-filter-expression (valueChange)="handleExpressionValueChange($event)" [currentItem]="item" [index]="i">
|
|
191
|
+
</kendo-filter-expression>
|
|
192
|
+
</li>
|
|
193
|
+
}
|
|
194
|
+
@if (item['filters']) {
|
|
195
|
+
<li class="k-filter-item" role="treeitem">
|
|
196
|
+
<kendo-filter-group
|
|
197
|
+
(valueChange)="valueChange.emit($event)"
|
|
198
|
+
[currentItem]="item"
|
|
199
|
+
[index]="i"
|
|
200
|
+
>
|
|
201
|
+
</kendo-filter-group>
|
|
202
|
+
</li>
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
</ul>
|
|
206
|
+
}
|
|
207
|
+
`, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }] });
|
|
201
208
|
}
|
|
202
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterGroupComponent, decorators: [{
|
|
203
210
|
type: Component,
|
|
@@ -211,75 +218,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
211
218
|
<div class="k-filter-toolbar">
|
|
212
219
|
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
213
220
|
<div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
|
|
221
|
+
@for (operator of operators; track operator) {
|
|
214
222
|
<button
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
{{getOperator(operator.value)}}
|
|
223
|
+
tabindex="-1"
|
|
224
|
+
kendoButton
|
|
225
|
+
class="k-toolbar-button"
|
|
226
|
+
[ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
|
|
227
|
+
[selected]="currentItem.logic === operator.value"
|
|
228
|
+
[attr.aria-pressed]="currentItem.logic === operator.value"
|
|
229
|
+
[title]="operator.text"
|
|
230
|
+
(click)="selectedChange(operator.value)"
|
|
231
|
+
>
|
|
232
|
+
{{getOperator(operator.value)}}
|
|
226
233
|
</button>
|
|
234
|
+
}
|
|
227
235
|
</div>
|
|
228
|
-
|
|
236
|
+
|
|
229
237
|
<button
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
+
kendoButton
|
|
239
|
+
class="k-toolbar-button"
|
|
240
|
+
tabindex="-1"
|
|
241
|
+
[title]="messageFor('addFilter')"
|
|
242
|
+
icon="filter-add-expression"
|
|
243
|
+
[svgIcon]="filterAddExpressionIcon"
|
|
244
|
+
(click)="addFilterExpression()">
|
|
245
|
+
{{messageFor('addFilter')}}
|
|
238
246
|
</button>
|
|
239
|
-
|
|
247
|
+
|
|
240
248
|
<button
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
+
kendoButton
|
|
250
|
+
class="k-toolbar-button"
|
|
251
|
+
tabindex="-1"
|
|
252
|
+
[title]="messageFor('addGroup')"
|
|
253
|
+
icon="filter-add-group"
|
|
254
|
+
[svgIcon]="filterAddGroupIcon"
|
|
255
|
+
(click)="addFilterGroup()">
|
|
256
|
+
{{messageFor('addGroup')}}
|
|
249
257
|
</button>
|
|
250
258
|
|
|
251
259
|
<button
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
+
kendoButton
|
|
261
|
+
class="k-toolbar-button"
|
|
262
|
+
tabindex="-1"
|
|
263
|
+
icon="x"
|
|
264
|
+
[svgIcon]="xIcon"
|
|
265
|
+
fillMode="flat"
|
|
266
|
+
[title]="messageFor('remove')"
|
|
267
|
+
(click)="removeFilterGroup()">
|
|
260
268
|
</button>
|
|
269
|
+
</div>
|
|
261
270
|
</div>
|
|
262
|
-
</div>
|
|
263
271
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
272
|
+
@if (currentItem.filters) {
|
|
273
|
+
<ul class="k-filter-lines" role="group">
|
|
274
|
+
@for (item of currentItem.filters; track $index; let i = $index) {
|
|
275
|
+
@if (!item['filters']) {
|
|
276
|
+
<li class="k-filter-item" role="treeitem">
|
|
277
|
+
<kendo-filter-expression (valueChange)="handleExpressionValueChange($event)" [currentItem]="item" [index]="i">
|
|
278
|
+
</kendo-filter-expression>
|
|
279
|
+
</li>
|
|
280
|
+
}
|
|
281
|
+
@if (item['filters']) {
|
|
282
|
+
<li class="k-filter-item" role="treeitem">
|
|
283
|
+
<kendo-filter-group
|
|
284
|
+
(valueChange)="valueChange.emit($event)"
|
|
285
|
+
[currentItem]="item"
|
|
286
|
+
[index]="i"
|
|
287
|
+
>
|
|
288
|
+
</kendo-filter-group>
|
|
289
|
+
</li>
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
</ul>
|
|
293
|
+
}
|
|
294
|
+
`,
|
|
281
295
|
standalone: true,
|
|
282
|
-
imports: [
|
|
296
|
+
imports: [ButtonComponent, NgClass, FilterExpressionComponent]
|
|
283
297
|
}]
|
|
284
298
|
}], ctorParameters: () => [{ type: i1.FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.NavigationService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { _filterItems: [{
|
|
285
299
|
type: ViewChildren,
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1763998521,
|
|
14
|
+
version: '21.2.0-develop.1',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -13,7 +13,7 @@ import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
|
13
13
|
import { DatePickerComponent, DatePickerCustomMessagesComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, TimePickerDOMService, HoursService, MinutesService, SecondsService, MillisecondsService, DayPeriodService } from '@progress/kendo-angular-dateinputs';
|
|
14
14
|
import { DropDownListComponent, ValueTemplateDirective, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
|
|
15
15
|
import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
|
|
16
|
-
import {
|
|
16
|
+
import { NgClass } from '@angular/common';
|
|
17
17
|
import { IconsService } from '@progress/kendo-angular-icons';
|
|
18
18
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
19
19
|
import { DialogContainerService, DialogService, WindowService, WindowContainerService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dialog';
|
|
@@ -231,8 +231,8 @@ const packageMetadata = {
|
|
|
231
231
|
productName: 'Kendo UI for Angular',
|
|
232
232
|
productCode: 'KENDOUIANGULAR',
|
|
233
233
|
productCodes: ['KENDOUIANGULAR'],
|
|
234
|
-
publishDate:
|
|
235
|
-
version: '21.
|
|
234
|
+
publishDate: 1763998521,
|
|
235
|
+
version: '21.2.0-develop.1',
|
|
236
236
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
237
237
|
};
|
|
238
238
|
|
|
@@ -1161,61 +1161,73 @@ class FilterExpressionComponent extends BaseFilterRowComponent {
|
|
|
1161
1161
|
this.editorTemplate = filterExpression?.editorTemplate;
|
|
1162
1162
|
}
|
|
1163
1163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterExpressionComponent, isStandalone: true, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
|
|
1165
1165
|
provide: FilterItem,
|
|
1166
1166
|
useExisting: forwardRef(() => FilterExpressionComponent)
|
|
1167
1167
|
}], usesInheritance: true, ngImport: i0, template: `
|
|
1168
1168
|
<div class="k-filter-toolbar">
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
</div>
|
|
1183
|
-
<div *ngIf="!isBoolean" class="k-filter-operator k-toolbar-item" >
|
|
1184
|
-
<kendo-filter-expression-operators
|
|
1185
|
-
[currentItem]="currentItem"
|
|
1186
|
-
[operators]="operators"
|
|
1187
|
-
[editorType]="getEditorType()"
|
|
1188
|
-
(valueChange)="onOperatorChange($event);">
|
|
1189
|
-
</kendo-filter-expression-operators>
|
|
1190
|
-
</div>
|
|
1191
|
-
|
|
1192
|
-
<div class="k-filter-value k-toolbar-item">
|
|
1193
|
-
<ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
|
|
1194
|
-
<kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
1195
|
-
<kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
1196
|
-
<kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
1197
|
-
<kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
1198
|
-
</ng-container>
|
|
1199
|
-
<ng-container *ngIf="editorTemplate">
|
|
1200
|
-
<ng-template
|
|
1201
|
-
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
1202
|
-
</ng-template>
|
|
1203
|
-
</ng-container>
|
|
1204
|
-
</div>
|
|
1205
|
-
|
|
1206
|
-
<button
|
|
1207
|
-
kendoButton
|
|
1208
|
-
class="k-toolbar-button"
|
|
1209
|
-
tabindex="-1"
|
|
1210
|
-
icon="x"
|
|
1211
|
-
[svgIcon]="xIcon"
|
|
1212
|
-
fillMode="flat"
|
|
1213
|
-
[title]="messageFor('remove')"
|
|
1214
|
-
(click)="removeFilterExpression()">
|
|
1215
|
-
</button>
|
|
1169
|
+
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
1170
|
+
<div class="k-filter-field k-toolbar-item" >
|
|
1171
|
+
<kendo-dropdownlist
|
|
1172
|
+
[tabindex]="-1"
|
|
1173
|
+
[kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
|
|
1174
|
+
[title]="messageFor('filterExpressionFilters')"
|
|
1175
|
+
[data]="getFilters()"
|
|
1176
|
+
textField="title"
|
|
1177
|
+
valueField="field"
|
|
1178
|
+
[value]="currentItem.field"
|
|
1179
|
+
[valuePrimitive]="true"
|
|
1180
|
+
(valueChange)="filterValueChange($event)">
|
|
1181
|
+
</kendo-dropdownlist>
|
|
1216
1182
|
</div>
|
|
1183
|
+
@if (!isBoolean) {
|
|
1184
|
+
<div class="k-filter-operator k-toolbar-item" >
|
|
1185
|
+
<kendo-filter-expression-operators
|
|
1186
|
+
[currentItem]="currentItem"
|
|
1187
|
+
[operators]="operators"
|
|
1188
|
+
[editorType]="getEditorType()"
|
|
1189
|
+
(valueChange)="onOperatorChange($event);">
|
|
1190
|
+
</kendo-filter-expression-operators>
|
|
1191
|
+
</div>
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
<div class="k-filter-value k-toolbar-item">
|
|
1195
|
+
@if (!editorTemplate) {
|
|
1196
|
+
@switch (getEditorType()) {
|
|
1197
|
+
@case ('string') {
|
|
1198
|
+
<kendo-filter-text-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
1199
|
+
}
|
|
1200
|
+
@case ('number') {
|
|
1201
|
+
<kendo-filter-numeric-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
1202
|
+
}
|
|
1203
|
+
@case ('boolean') {
|
|
1204
|
+
<kendo-filter-boolean-editor [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
1205
|
+
}
|
|
1206
|
+
@case ('date') {
|
|
1207
|
+
<kendo-filter-date-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
1211
|
+
@if (editorTemplate) {
|
|
1212
|
+
<ng-template
|
|
1213
|
+
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
1214
|
+
</ng-template>
|
|
1215
|
+
}
|
|
1216
|
+
</div>
|
|
1217
|
+
|
|
1218
|
+
<button
|
|
1219
|
+
kendoButton
|
|
1220
|
+
class="k-toolbar-button"
|
|
1221
|
+
tabindex="-1"
|
|
1222
|
+
icon="x"
|
|
1223
|
+
[svgIcon]="xIcon"
|
|
1224
|
+
fillMode="flat"
|
|
1225
|
+
[title]="messageFor('remove')"
|
|
1226
|
+
(click)="removeFilterExpression()">
|
|
1227
|
+
</button>
|
|
1228
|
+
</div>
|
|
1217
1229
|
</div>
|
|
1218
|
-
|
|
1230
|
+
`, 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { kind: "component", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { kind: "component", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { kind: "component", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "component", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { kind: "component", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
1219
1231
|
}
|
|
1220
1232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterExpressionComponent, decorators: [{
|
|
1221
1233
|
type: Component,
|
|
@@ -1227,58 +1239,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1227
1239
|
selector: 'kendo-filter-expression',
|
|
1228
1240
|
template: `
|
|
1229
1241
|
<div class="k-filter-toolbar">
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
</div>
|
|
1244
|
-
<div *ngIf="!isBoolean" class="k-filter-operator k-toolbar-item" >
|
|
1245
|
-
<kendo-filter-expression-operators
|
|
1246
|
-
[currentItem]="currentItem"
|
|
1247
|
-
[operators]="operators"
|
|
1248
|
-
[editorType]="getEditorType()"
|
|
1249
|
-
(valueChange)="onOperatorChange($event);">
|
|
1250
|
-
</kendo-filter-expression-operators>
|
|
1251
|
-
</div>
|
|
1252
|
-
|
|
1253
|
-
<div class="k-filter-value k-toolbar-item">
|
|
1254
|
-
<ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
|
|
1255
|
-
<kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
1256
|
-
<kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
1257
|
-
<kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
1258
|
-
<kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
1259
|
-
</ng-container>
|
|
1260
|
-
<ng-container *ngIf="editorTemplate">
|
|
1261
|
-
<ng-template
|
|
1262
|
-
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
1263
|
-
</ng-template>
|
|
1264
|
-
</ng-container>
|
|
1265
|
-
</div>
|
|
1266
|
-
|
|
1267
|
-
<button
|
|
1268
|
-
kendoButton
|
|
1269
|
-
class="k-toolbar-button"
|
|
1270
|
-
tabindex="-1"
|
|
1271
|
-
icon="x"
|
|
1272
|
-
[svgIcon]="xIcon"
|
|
1273
|
-
fillMode="flat"
|
|
1274
|
-
[title]="messageFor('remove')"
|
|
1275
|
-
(click)="removeFilterExpression()">
|
|
1276
|
-
</button>
|
|
1242
|
+
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
1243
|
+
<div class="k-filter-field k-toolbar-item" >
|
|
1244
|
+
<kendo-dropdownlist
|
|
1245
|
+
[tabindex]="-1"
|
|
1246
|
+
[kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
|
|
1247
|
+
[title]="messageFor('filterExpressionFilters')"
|
|
1248
|
+
[data]="getFilters()"
|
|
1249
|
+
textField="title"
|
|
1250
|
+
valueField="field"
|
|
1251
|
+
[value]="currentItem.field"
|
|
1252
|
+
[valuePrimitive]="true"
|
|
1253
|
+
(valueChange)="filterValueChange($event)">
|
|
1254
|
+
</kendo-dropdownlist>
|
|
1277
1255
|
</div>
|
|
1256
|
+
@if (!isBoolean) {
|
|
1257
|
+
<div class="k-filter-operator k-toolbar-item" >
|
|
1258
|
+
<kendo-filter-expression-operators
|
|
1259
|
+
[currentItem]="currentItem"
|
|
1260
|
+
[operators]="operators"
|
|
1261
|
+
[editorType]="getEditorType()"
|
|
1262
|
+
(valueChange)="onOperatorChange($event);">
|
|
1263
|
+
</kendo-filter-expression-operators>
|
|
1264
|
+
</div>
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
<div class="k-filter-value k-toolbar-item">
|
|
1268
|
+
@if (!editorTemplate) {
|
|
1269
|
+
@switch (getEditorType()) {
|
|
1270
|
+
@case ('string') {
|
|
1271
|
+
<kendo-filter-text-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
|
|
1272
|
+
}
|
|
1273
|
+
@case ('number') {
|
|
1274
|
+
<kendo-filter-numeric-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
|
|
1275
|
+
}
|
|
1276
|
+
@case ('boolean') {
|
|
1277
|
+
<kendo-filter-boolean-editor [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
|
|
1278
|
+
}
|
|
1279
|
+
@case ('date') {
|
|
1280
|
+
<kendo-filter-date-editor [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
1283
|
+
}
|
|
1284
|
+
@if (editorTemplate) {
|
|
1285
|
+
<ng-template
|
|
1286
|
+
[templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
|
|
1287
|
+
</ng-template>
|
|
1288
|
+
}
|
|
1289
|
+
</div>
|
|
1290
|
+
|
|
1291
|
+
<button
|
|
1292
|
+
kendoButton
|
|
1293
|
+
class="k-toolbar-button"
|
|
1294
|
+
tabindex="-1"
|
|
1295
|
+
icon="x"
|
|
1296
|
+
[svgIcon]="xIcon"
|
|
1297
|
+
fillMode="flat"
|
|
1298
|
+
[title]="messageFor('remove')"
|
|
1299
|
+
(click)="removeFilterExpression()">
|
|
1300
|
+
</button>
|
|
1301
|
+
</div>
|
|
1278
1302
|
</div>
|
|
1279
|
-
|
|
1303
|
+
`,
|
|
1280
1304
|
standalone: true,
|
|
1281
|
-
imports: [DropDownListComponent, AriaLabelValueDirective,
|
|
1305
|
+
imports: [DropDownListComponent, AriaLabelValueDirective, FilterExpressionOperatorsComponent, FilterTextEditorComponent, FilterNumericEditorComponent, FilterBooleanEditorComponent, FilterDateEditorComponent, TemplateContextDirective, ButtonComponent]
|
|
1282
1306
|
}]
|
|
1283
1307
|
}], ctorParameters: () => [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { currentItem: [{
|
|
1284
1308
|
type: Input
|
|
@@ -1392,80 +1416,87 @@ class FilterGroupComponent extends BaseFilterRowComponent {
|
|
|
1392
1416
|
this.navigationService.focusCurrentElement(elementToFocus, true);
|
|
1393
1417
|
}
|
|
1394
1418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterGroupComponent, deps: [{ token: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterGroupComponent, isStandalone: true, selector: "kendo-filter-group", inputs: { currentItem: "currentItem" }, providers: [{
|
|
1396
1420
|
provide: FilterItem,
|
|
1397
1421
|
useExisting: forwardRef(() => FilterGroupComponent)
|
|
1398
1422
|
}], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1399
1423
|
<div class="k-filter-toolbar">
|
|
1400
1424
|
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
1401
1425
|
<div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
|
|
1426
|
+
@for (operator of operators; track operator) {
|
|
1402
1427
|
<button
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
{{getOperator(operator.value)}}
|
|
1428
|
+
tabindex="-1"
|
|
1429
|
+
kendoButton
|
|
1430
|
+
class="k-toolbar-button"
|
|
1431
|
+
[ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
|
|
1432
|
+
[selected]="currentItem.logic === operator.value"
|
|
1433
|
+
[attr.aria-pressed]="currentItem.logic === operator.value"
|
|
1434
|
+
[title]="operator.text"
|
|
1435
|
+
(click)="selectedChange(operator.value)"
|
|
1436
|
+
>
|
|
1437
|
+
{{getOperator(operator.value)}}
|
|
1414
1438
|
</button>
|
|
1439
|
+
}
|
|
1415
1440
|
</div>
|
|
1416
|
-
|
|
1441
|
+
|
|
1417
1442
|
<button
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1443
|
+
kendoButton
|
|
1444
|
+
class="k-toolbar-button"
|
|
1445
|
+
tabindex="-1"
|
|
1446
|
+
[title]="messageFor('addFilter')"
|
|
1447
|
+
icon="filter-add-expression"
|
|
1448
|
+
[svgIcon]="filterAddExpressionIcon"
|
|
1449
|
+
(click)="addFilterExpression()">
|
|
1450
|
+
{{messageFor('addFilter')}}
|
|
1426
1451
|
</button>
|
|
1427
|
-
|
|
1452
|
+
|
|
1428
1453
|
<button
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1454
|
+
kendoButton
|
|
1455
|
+
class="k-toolbar-button"
|
|
1456
|
+
tabindex="-1"
|
|
1457
|
+
[title]="messageFor('addGroup')"
|
|
1458
|
+
icon="filter-add-group"
|
|
1459
|
+
[svgIcon]="filterAddGroupIcon"
|
|
1460
|
+
(click)="addFilterGroup()">
|
|
1461
|
+
{{messageFor('addGroup')}}
|
|
1437
1462
|
</button>
|
|
1438
1463
|
|
|
1439
1464
|
<button
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1465
|
+
kendoButton
|
|
1466
|
+
class="k-toolbar-button"
|
|
1467
|
+
tabindex="-1"
|
|
1468
|
+
icon="x"
|
|
1469
|
+
[svgIcon]="xIcon"
|
|
1470
|
+
fillMode="flat"
|
|
1471
|
+
[title]="messageFor('remove')"
|
|
1472
|
+
(click)="removeFilterGroup()">
|
|
1448
1473
|
</button>
|
|
1474
|
+
</div>
|
|
1449
1475
|
</div>
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1476
|
+
|
|
1477
|
+
@if (currentItem.filters) {
|
|
1478
|
+
<ul class="k-filter-lines" role="group">
|
|
1479
|
+
@for (item of currentItem.filters; track $index; let i = $index) {
|
|
1480
|
+
@if (!item['filters']) {
|
|
1481
|
+
<li class="k-filter-item" role="treeitem">
|
|
1482
|
+
<kendo-filter-expression (valueChange)="handleExpressionValueChange($event)" [currentItem]="item" [index]="i">
|
|
1483
|
+
</kendo-filter-expression>
|
|
1484
|
+
</li>
|
|
1485
|
+
}
|
|
1486
|
+
@if (item['filters']) {
|
|
1487
|
+
<li class="k-filter-item" role="treeitem">
|
|
1488
|
+
<kendo-filter-group
|
|
1489
|
+
(valueChange)="valueChange.emit($event)"
|
|
1490
|
+
[currentItem]="item"
|
|
1491
|
+
[index]="i"
|
|
1492
|
+
>
|
|
1493
|
+
</kendo-filter-group>
|
|
1494
|
+
</li>
|
|
1495
|
+
}
|
|
1496
|
+
}
|
|
1497
|
+
</ul>
|
|
1498
|
+
}
|
|
1499
|
+
`, isInline: true, dependencies: [{ kind: "component", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }] });
|
|
1469
1500
|
}
|
|
1470
1501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterGroupComponent, decorators: [{
|
|
1471
1502
|
type: Component,
|
|
@@ -1479,75 +1510,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1479
1510
|
<div class="k-filter-toolbar">
|
|
1480
1511
|
<div class="k-toolbar k-toolbar-md k-toolbar-solid" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
|
|
1481
1512
|
<div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
|
|
1513
|
+
@for (operator of operators; track operator) {
|
|
1482
1514
|
<button
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
{{getOperator(operator.value)}}
|
|
1515
|
+
tabindex="-1"
|
|
1516
|
+
kendoButton
|
|
1517
|
+
class="k-toolbar-button"
|
|
1518
|
+
[ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
|
|
1519
|
+
[selected]="currentItem.logic === operator.value"
|
|
1520
|
+
[attr.aria-pressed]="currentItem.logic === operator.value"
|
|
1521
|
+
[title]="operator.text"
|
|
1522
|
+
(click)="selectedChange(operator.value)"
|
|
1523
|
+
>
|
|
1524
|
+
{{getOperator(operator.value)}}
|
|
1494
1525
|
</button>
|
|
1526
|
+
}
|
|
1495
1527
|
</div>
|
|
1496
|
-
|
|
1528
|
+
|
|
1497
1529
|
<button
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1530
|
+
kendoButton
|
|
1531
|
+
class="k-toolbar-button"
|
|
1532
|
+
tabindex="-1"
|
|
1533
|
+
[title]="messageFor('addFilter')"
|
|
1534
|
+
icon="filter-add-expression"
|
|
1535
|
+
[svgIcon]="filterAddExpressionIcon"
|
|
1536
|
+
(click)="addFilterExpression()">
|
|
1537
|
+
{{messageFor('addFilter')}}
|
|
1506
1538
|
</button>
|
|
1507
|
-
|
|
1539
|
+
|
|
1508
1540
|
<button
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1541
|
+
kendoButton
|
|
1542
|
+
class="k-toolbar-button"
|
|
1543
|
+
tabindex="-1"
|
|
1544
|
+
[title]="messageFor('addGroup')"
|
|
1545
|
+
icon="filter-add-group"
|
|
1546
|
+
[svgIcon]="filterAddGroupIcon"
|
|
1547
|
+
(click)="addFilterGroup()">
|
|
1548
|
+
{{messageFor('addGroup')}}
|
|
1517
1549
|
</button>
|
|
1518
1550
|
|
|
1519
1551
|
<button
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1552
|
+
kendoButton
|
|
1553
|
+
class="k-toolbar-button"
|
|
1554
|
+
tabindex="-1"
|
|
1555
|
+
icon="x"
|
|
1556
|
+
[svgIcon]="xIcon"
|
|
1557
|
+
fillMode="flat"
|
|
1558
|
+
[title]="messageFor('remove')"
|
|
1559
|
+
(click)="removeFilterGroup()">
|
|
1528
1560
|
</button>
|
|
1561
|
+
</div>
|
|
1529
1562
|
</div>
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1563
|
+
|
|
1564
|
+
@if (currentItem.filters) {
|
|
1565
|
+
<ul class="k-filter-lines" role="group">
|
|
1566
|
+
@for (item of currentItem.filters; track $index; let i = $index) {
|
|
1567
|
+
@if (!item['filters']) {
|
|
1568
|
+
<li class="k-filter-item" role="treeitem">
|
|
1569
|
+
<kendo-filter-expression (valueChange)="handleExpressionValueChange($event)" [currentItem]="item" [index]="i">
|
|
1570
|
+
</kendo-filter-expression>
|
|
1571
|
+
</li>
|
|
1572
|
+
}
|
|
1573
|
+
@if (item['filters']) {
|
|
1574
|
+
<li class="k-filter-item" role="treeitem">
|
|
1575
|
+
<kendo-filter-group
|
|
1576
|
+
(valueChange)="valueChange.emit($event)"
|
|
1577
|
+
[currentItem]="item"
|
|
1578
|
+
[index]="i"
|
|
1579
|
+
>
|
|
1580
|
+
</kendo-filter-group>
|
|
1581
|
+
</li>
|
|
1582
|
+
}
|
|
1583
|
+
}
|
|
1584
|
+
</ul>
|
|
1585
|
+
}
|
|
1586
|
+
`,
|
|
1549
1587
|
standalone: true,
|
|
1550
|
-
imports: [
|
|
1588
|
+
imports: [ButtonComponent, NgClass, FilterExpressionComponent]
|
|
1551
1589
|
}]
|
|
1552
1590
|
}], ctorParameters: () => [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { _filterItems: [{
|
|
1553
1591
|
type: ViewChildren,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-filter",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0-develop.1",
|
|
4
4
|
"description": "Kendo UI Angular Filter",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"package": {
|
|
18
18
|
"productName": "Kendo UI for Angular",
|
|
19
19
|
"productCode": "KENDOUIANGULAR",
|
|
20
|
-
"publishDate":
|
|
20
|
+
"publishDate": 1763998521,
|
|
21
21
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
@@ -28,20 +28,20 @@
|
|
|
28
28
|
"@angular/platform-browser": "18 - 21",
|
|
29
29
|
"@progress/kendo-data-query": "^1.5.5",
|
|
30
30
|
"@progress/kendo-licensing": "^1.7.0",
|
|
31
|
-
"@progress/kendo-angular-buttons": "21.
|
|
32
|
-
"@progress/kendo-angular-common": "21.
|
|
33
|
-
"@progress/kendo-angular-dateinputs": "21.
|
|
34
|
-
"@progress/kendo-angular-dropdowns": "21.
|
|
35
|
-
"@progress/kendo-angular-inputs": "21.
|
|
36
|
-
"@progress/kendo-angular-intl": "21.
|
|
37
|
-
"@progress/kendo-angular-l10n": "21.
|
|
38
|
-
"@progress/kendo-angular-icons": "21.
|
|
39
|
-
"@progress/kendo-angular-label": "21.
|
|
31
|
+
"@progress/kendo-angular-buttons": "21.2.0-develop.1",
|
|
32
|
+
"@progress/kendo-angular-common": "21.2.0-develop.1",
|
|
33
|
+
"@progress/kendo-angular-dateinputs": "21.2.0-develop.1",
|
|
34
|
+
"@progress/kendo-angular-dropdowns": "21.2.0-develop.1",
|
|
35
|
+
"@progress/kendo-angular-inputs": "21.2.0-develop.1",
|
|
36
|
+
"@progress/kendo-angular-intl": "21.2.0-develop.1",
|
|
37
|
+
"@progress/kendo-angular-l10n": "21.2.0-develop.1",
|
|
38
|
+
"@progress/kendo-angular-icons": "21.2.0-develop.1",
|
|
39
|
+
"@progress/kendo-angular-label": "21.2.0-develop.1",
|
|
40
40
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"tslib": "^2.3.1",
|
|
44
|
-
"@progress/kendo-angular-schematics": "21.
|
|
44
|
+
"@progress/kendo-angular-schematics": "21.2.0-develop.1"
|
|
45
45
|
},
|
|
46
46
|
"schematics": "./schematics/collection.json",
|
|
47
47
|
"module": "fesm2022/progress-kendo-angular-filter.mjs",
|
|
@@ -9,12 +9,12 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
|
9
9
|
function default_1(options) {
|
|
10
10
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'FilterModule', package: 'filter', peerDependencies: {
|
|
11
11
|
// peer deps of the dropdowns
|
|
12
|
-
'@progress/kendo-angular-treeview': '21.
|
|
13
|
-
'@progress/kendo-angular-popup': '21.
|
|
14
|
-
'@progress/kendo-angular-navigation': '21.
|
|
12
|
+
'@progress/kendo-angular-treeview': '21.2.0-develop.1',
|
|
13
|
+
'@progress/kendo-angular-popup': '21.2.0-develop.1',
|
|
14
|
+
'@progress/kendo-angular-navigation': '21.2.0-develop.1',
|
|
15
15
|
// peer dependency of kendo-angular-inputs
|
|
16
16
|
'@progress/kendo-drawing': '^1.16.0',
|
|
17
|
-
'@progress/kendo-angular-dialog': '21.
|
|
17
|
+
'@progress/kendo-angular-dialog': '21.2.0-develop.1',
|
|
18
18
|
// Peer dependency of icons
|
|
19
19
|
'@progress/kendo-svg-icons': '^4.0.0'
|
|
20
20
|
} });
|