@progress/kendo-angular-treelist 21.1.1-develop.1 → 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.
Files changed (32) hide show
  1. package/esm2022/column-menu/column-list.component.mjs +75 -69
  2. package/esm2022/column-menu/column-menu-autosize-all.component.mjs +12 -11
  3. package/esm2022/column-menu/column-menu-autosize.component.mjs +12 -11
  4. package/esm2022/column-menu/column-menu-item.component.mjs +137 -57
  5. package/esm2022/column-menu/column-menu.component.mjs +145 -122
  6. package/esm2022/editing/add-command.directive.mjs +27 -17
  7. package/esm2022/editing/base-command.directive.mjs +27 -17
  8. package/esm2022/editing/cancel-command.directive.mjs +27 -17
  9. package/esm2022/editing/edit-command.directive.mjs +27 -17
  10. package/esm2022/editing/remove-command.directive.mjs +27 -17
  11. package/esm2022/editing/save-command.directive.mjs +27 -17
  12. package/esm2022/excel/excel-command.directive.mjs +27 -17
  13. package/esm2022/filtering/cell/filter-cell-operators.component.mjs +20 -17
  14. package/esm2022/filtering/cell/filter-cell.component.mjs +35 -33
  15. package/esm2022/filtering/filter-row.component.mjs +26 -23
  16. package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +32 -29
  17. package/esm2022/filtering/menu/date-filter-menu.component.mjs +52 -49
  18. package/esm2022/filtering/menu/filter-menu-container.component.mjs +75 -73
  19. package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +50 -47
  20. package/esm2022/filtering/menu/string-filter-menu.component.mjs +36 -33
  21. package/esm2022/package-metadata.mjs +2 -2
  22. package/esm2022/pdf/pdf-command.directive.mjs +27 -17
  23. package/esm2022/rendering/cell.component.mjs +167 -145
  24. package/esm2022/rendering/common/col-group.component.mjs +10 -8
  25. package/esm2022/rendering/header/header.component.mjs +371 -331
  26. package/esm2022/rendering/list.component.mjs +185 -158
  27. package/esm2022/rendering/table-body.component.mjs +199 -169
  28. package/esm2022/rendering/toolbar/toolbar.component.mjs +13 -11
  29. package/esm2022/treelist.component.mjs +893 -849
  30. package/fesm2022/progress-kendo-angular-treelist.mjs +2746 -2356
  31. package/package.json +18 -18
  32. package/schematics/ngAdd/index.js +7 -3
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input, HostBinding, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
6
- import { NgFor } from '@angular/common';
7
6
  import { guid, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
8
7
  import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
9
8
  import { FilterService } from '../filter.service';
@@ -105,23 +104,25 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
105
104
  return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
106
105
  }
107
106
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
108
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElem"], descendants: true }, { propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
107
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElem"], descendants: true }, { propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
109
108
  <ul class="k-radio-list k-reset">
110
- <li *ngFor="let item of items">
111
- <kendo-radiobutton
112
- #inputElem
113
- kendoFilterMenuRadioButton
114
- [columnLabel]="columnLabel"
115
- [name]="idPrefix"
116
- [checked]="isSelected(item.value)"
117
- [attr.id]="radioId(item.value)"
118
- (change)="onChange(item.value, inputElem)"
119
- (keydown.shift.tab)="onShiftTab($event)"
120
- ></kendo-radiobutton>
121
- <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
109
+ @for (item of items; track item) {
110
+ <li>
111
+ <kendo-radiobutton
112
+ #inputElem
113
+ kendoFilterMenuRadioButton
114
+ [columnLabel]="columnLabel"
115
+ [name]="idPrefix"
116
+ [checked]="isSelected(item.value)"
117
+ [attr.id]="radioId(item.value)"
118
+ (change)="onChange(item.value, inputElem)"
119
+ (keydown.shift.tab)="onShiftTab($event)"
120
+ ></kendo-radiobutton>
121
+ <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
122
122
  </li>
123
+ }
123
124
  </ul>
124
- `, 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"] }] });
125
+ `, isInline: true, dependencies: [{ kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
125
126
  }
126
127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
127
128
  type: Component,
@@ -129,23 +130,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
129
130
  selector: 'kendo-treelist-boolean-filter-menu',
130
131
  template: `
131
132
  <ul class="k-radio-list k-reset">
132
- <li *ngFor="let item of items">
133
- <kendo-radiobutton
134
- #inputElem
135
- kendoFilterMenuRadioButton
136
- [columnLabel]="columnLabel"
137
- [name]="idPrefix"
138
- [checked]="isSelected(item.value)"
139
- [attr.id]="radioId(item.value)"
140
- (change)="onChange(item.value, inputElem)"
141
- (keydown.shift.tab)="onShiftTab($event)"
142
- ></kendo-radiobutton>
143
- <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
133
+ @for (item of items; track item) {
134
+ <li>
135
+ <kendo-radiobutton
136
+ #inputElem
137
+ kendoFilterMenuRadioButton
138
+ [columnLabel]="columnLabel"
139
+ [name]="idPrefix"
140
+ [checked]="isSelected(item.value)"
141
+ [attr.id]="radioId(item.value)"
142
+ (change)="onChange(item.value, inputElem)"
143
+ (keydown.shift.tab)="onShiftTab($event)"
144
+ ></kendo-radiobutton>
145
+ <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
144
146
  </li>
147
+ }
145
148
  </ul>
146
- `,
149
+ `,
147
150
  standalone: true,
148
- imports: [NgFor, RadioButtonComponent, BooleanFilterRadioButtonDirective]
151
+ imports: [RadioButtonComponent, BooleanFilterRadioButtonDirective]
149
152
  }]
150
153
  }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClasses: [{
151
154
  type: HostBinding,
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input, HostBinding } from '@angular/core';
6
- import { NgIf } from '@angular/common';
7
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
7
  import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
9
8
  import { FilterService } from '../filter.service';
@@ -82,27 +81,27 @@ export class DateFilterMenuComponent extends DateFilterComponent {
82
81
  super.localizationChange();
83
82
  }
84
83
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
85
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
84
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
86
85
  <kendo-treelist-date-filter-menu-input
87
- [currentFilter]="firstFilter"
88
- [operators]="operators"
89
- [filterService]="filterService"
90
- [column]="column"
91
- [filter]="filter"
92
- [activeView]="activeView"
93
- [bottomView]="bottomView"
94
- [topView]="topView"
95
- [format]="format"
96
- [formatPlaceholder]="formatPlaceholder"
97
- [placeholder]="placeholder"
98
- [min]="min"
99
- [max]="max"
100
- [weekNumber]="weekNumber"
101
- [isFirstDropDown]="true"
102
- [menuTabbingService]="menuTabbingService">
86
+ [currentFilter]="firstFilter"
87
+ [operators]="operators"
88
+ [filterService]="filterService"
89
+ [column]="column"
90
+ [filter]="filter"
91
+ [activeView]="activeView"
92
+ [bottomView]="bottomView"
93
+ [topView]="topView"
94
+ [format]="format"
95
+ [formatPlaceholder]="formatPlaceholder"
96
+ [placeholder]="placeholder"
97
+ [min]="min"
98
+ [max]="max"
99
+ [weekNumber]="weekNumber"
100
+ [isFirstDropDown]="true"
101
+ [menuTabbingService]="menuTabbingService">
103
102
  </kendo-treelist-date-filter-menu-input>
104
- <kendo-dropdownlist
105
- *ngIf="extra"
103
+ @if (extra) {
104
+ <kendo-dropdownlist
106
105
  kendoFilterMenuDropDown
107
106
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
108
107
  class="k-filter-and"
@@ -112,9 +111,10 @@ export class DateFilterMenuComponent extends DateFilterComponent {
112
111
  [value]="filter?.logic"
113
112
  textField="text"
114
113
  valueField="value">
115
- </kendo-dropdownlist>
116
- <kendo-treelist-date-filter-menu-input
117
- *ngIf="extra"
114
+ </kendo-dropdownlist>
115
+ }
116
+ @if (extra) {
117
+ <kendo-treelist-date-filter-menu-input
118
118
  [operators]="operators"
119
119
  [currentFilter]="secondFilter"
120
120
  [filterService]="filterService"
@@ -130,8 +130,9 @@ export class DateFilterMenuComponent extends DateFilterComponent {
130
130
  [max]="max"
131
131
  [weekNumber]="weekNumber"
132
132
  [menuTabbingService]="menuTabbingService">
133
- </kendo-treelist-date-filter-menu-input>
134
- `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-treelist-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { 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", "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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
133
+ </kendo-treelist-date-filter-menu-input>
134
+ }
135
+ `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-treelist-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
135
136
  }
136
137
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
137
138
  type: Component,
@@ -139,25 +140,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
139
140
  selector: 'kendo-treelist-date-filter-menu',
140
141
  template: `
141
142
  <kendo-treelist-date-filter-menu-input
142
- [currentFilter]="firstFilter"
143
- [operators]="operators"
144
- [filterService]="filterService"
145
- [column]="column"
146
- [filter]="filter"
147
- [activeView]="activeView"
148
- [bottomView]="bottomView"
149
- [topView]="topView"
150
- [format]="format"
151
- [formatPlaceholder]="formatPlaceholder"
152
- [placeholder]="placeholder"
153
- [min]="min"
154
- [max]="max"
155
- [weekNumber]="weekNumber"
156
- [isFirstDropDown]="true"
157
- [menuTabbingService]="menuTabbingService">
143
+ [currentFilter]="firstFilter"
144
+ [operators]="operators"
145
+ [filterService]="filterService"
146
+ [column]="column"
147
+ [filter]="filter"
148
+ [activeView]="activeView"
149
+ [bottomView]="bottomView"
150
+ [topView]="topView"
151
+ [format]="format"
152
+ [formatPlaceholder]="formatPlaceholder"
153
+ [placeholder]="placeholder"
154
+ [min]="min"
155
+ [max]="max"
156
+ [weekNumber]="weekNumber"
157
+ [isFirstDropDown]="true"
158
+ [menuTabbingService]="menuTabbingService">
158
159
  </kendo-treelist-date-filter-menu-input>
159
- <kendo-dropdownlist
160
- *ngIf="extra"
160
+ @if (extra) {
161
+ <kendo-dropdownlist
161
162
  kendoFilterMenuDropDown
162
163
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
163
164
  class="k-filter-and"
@@ -167,9 +168,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
167
168
  [value]="filter?.logic"
168
169
  textField="text"
169
170
  valueField="value">
170
- </kendo-dropdownlist>
171
- <kendo-treelist-date-filter-menu-input
172
- *ngIf="extra"
171
+ </kendo-dropdownlist>
172
+ }
173
+ @if (extra) {
174
+ <kendo-treelist-date-filter-menu-input
173
175
  [operators]="operators"
174
176
  [currentFilter]="secondFilter"
175
177
  [filterService]="filterService"
@@ -185,10 +187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
185
187
  [max]="max"
186
188
  [weekNumber]="weekNumber"
187
189
  [menuTabbingService]="menuTabbingService">
188
- </kendo-treelist-date-filter-menu-input>
189
- `,
190
+ </kendo-treelist-date-filter-menu-input>
191
+ }
192
+ `,
190
193
  standalone: true,
191
- imports: [DateFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
194
+ imports: [DateFilterMenuInputComponent, DropDownListComponent, FilterMenuDropDownListDirective]
192
195
  }]
193
196
  }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClasses: [{
194
197
  type: HostBinding,
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input, SkipSelf, Output, EventEmitter, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
6
- import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
6
+ import { NgTemplateOutlet, NgClass } from '@angular/common';
7
7
  import { ReactiveFormsModule, FormsModule } from '@angular/forms';
8
8
  import { ColumnComponent } from "../../columns/column.component";
9
9
  import { FilterService } from "../filter.service";
@@ -177,49 +177,50 @@ export class FilterMenuContainerComponent {
177
177
  return this.localization.get("filterFilterButton");
178
178
  }
179
179
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
180
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-treelist-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
181
181
  FilterService,
182
182
  MenuTabbingService
183
183
  ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
184
184
  <form (submit)="submit()" (reset)="reset()"
185
- class="k-filter-menu">
186
- <div class="k-filter-menu-container">
187
- <ng-container [ngSwitch]="hasTemplate">
188
- <ng-container *ngSwitchCase="false">
189
- <ng-container
190
- kendoFilterMenuHost
191
- [filterService]="childService"
192
- [column]="column"
193
- [filter]="childFilter"
194
- [menuTabbingService]="menuTabbingService">
195
- </ng-container>
196
- </ng-container>
197
- <ng-container *ngSwitchCase="true">
198
- <ng-template
199
- *ngIf="column.filterMenuTemplateRef"
200
- [ngTemplateOutlet]="column.filterMenuTemplateRef"
201
- [ngTemplateOutletContext]="templateContext"
202
- >
203
- </ng-template>
204
- </ng-container>
185
+ class="k-filter-menu">
186
+ <div class="k-filter-menu-container">
187
+ @switch (hasTemplate) {
188
+ @case (false) {
189
+ <ng-container
190
+ kendoFilterMenuHost
191
+ [filterService]="childService"
192
+ [column]="column"
193
+ [filter]="childFilter"
194
+ [menuTabbingService]="menuTabbingService">
205
195
  </ng-container>
206
- <div [ngClass]="actionsClass">
207
- <button kendoButton
208
- #filterButton
209
- type="submit"
210
- themeColor="primary"
211
- class="k-button-rectangle"
212
- [disabled]="disabled"
213
- (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
214
- <button kendoButton
215
- #resetButton
216
- type="reset"
217
- class="k-button-rectangle"
218
- (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
219
- </div>
196
+ }
197
+ @case (true) {
198
+ @if (column.filterMenuTemplateRef) {
199
+ <ng-template
200
+ [ngTemplateOutlet]="column.filterMenuTemplateRef"
201
+ [ngTemplateOutletContext]="templateContext"
202
+ >
203
+ </ng-template>
204
+ }
205
+ }
206
+ }
207
+ <div [ngClass]="actionsClass">
208
+ <button kendoButton
209
+ #filterButton
210
+ type="submit"
211
+ themeColor="primary"
212
+ class="k-button-rectangle"
213
+ [disabled]="disabled"
214
+ (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
215
+ <button kendoButton
216
+ #resetButton
217
+ type="reset"
218
+ class="k-button-rectangle"
219
+ (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
220
220
  </div>
221
+ </div>
221
222
  </form>
222
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
223
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
223
224
  }
224
225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
225
226
  type: Component,
@@ -231,46 +232,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
231
232
  selector: 'kendo-treelist-filter-menu-container',
232
233
  template: `
233
234
  <form (submit)="submit()" (reset)="reset()"
234
- class="k-filter-menu">
235
- <div class="k-filter-menu-container">
236
- <ng-container [ngSwitch]="hasTemplate">
237
- <ng-container *ngSwitchCase="false">
238
- <ng-container
239
- kendoFilterMenuHost
240
- [filterService]="childService"
241
- [column]="column"
242
- [filter]="childFilter"
243
- [menuTabbingService]="menuTabbingService">
244
- </ng-container>
245
- </ng-container>
246
- <ng-container *ngSwitchCase="true">
247
- <ng-template
248
- *ngIf="column.filterMenuTemplateRef"
249
- [ngTemplateOutlet]="column.filterMenuTemplateRef"
250
- [ngTemplateOutletContext]="templateContext"
251
- >
252
- </ng-template>
253
- </ng-container>
235
+ class="k-filter-menu">
236
+ <div class="k-filter-menu-container">
237
+ @switch (hasTemplate) {
238
+ @case (false) {
239
+ <ng-container
240
+ kendoFilterMenuHost
241
+ [filterService]="childService"
242
+ [column]="column"
243
+ [filter]="childFilter"
244
+ [menuTabbingService]="menuTabbingService">
254
245
  </ng-container>
255
- <div [ngClass]="actionsClass">
256
- <button kendoButton
257
- #filterButton
258
- type="submit"
259
- themeColor="primary"
260
- class="k-button-rectangle"
261
- [disabled]="disabled"
262
- (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
263
- <button kendoButton
264
- #resetButton
265
- type="reset"
266
- class="k-button-rectangle"
267
- (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
268
- </div>
246
+ }
247
+ @case (true) {
248
+ @if (column.filterMenuTemplateRef) {
249
+ <ng-template
250
+ [ngTemplateOutlet]="column.filterMenuTemplateRef"
251
+ [ngTemplateOutletContext]="templateContext"
252
+ >
253
+ </ng-template>
254
+ }
255
+ }
256
+ }
257
+ <div [ngClass]="actionsClass">
258
+ <button kendoButton
259
+ #filterButton
260
+ type="submit"
261
+ themeColor="primary"
262
+ class="k-button-rectangle"
263
+ [disabled]="disabled"
264
+ (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
265
+ <button kendoButton
266
+ #resetButton
267
+ type="reset"
268
+ class="k-button-rectangle"
269
+ (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
269
270
  </div>
271
+ </div>
270
272
  </form>
271
- `,
273
+ `,
272
274
  standalone: true,
273
- imports: [ReactiveFormsModule, FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass, ButtonComponent]
275
+ imports: [ReactiveFormsModule, FormsModule, FilterMenuHostDirective, NgTemplateOutlet, NgClass, ButtonComponent]
274
276
  }]
275
277
  }], ctorParameters: () => [{ type: i1.FilterService, decorators: [{
276
278
  type: SkipSelf
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input, HostBinding } from '@angular/core';
6
- import { NgIf } from '@angular/common';
7
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
7
  import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
9
8
  import { FilterService } from '../filter.service';
@@ -99,26 +98,26 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
99
98
  return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
100
99
  }
101
100
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
102
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumericFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-numeric-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", filterDelay: "filterDelay", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
101
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumericFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-numeric-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", filterDelay: "filterDelay", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
103
102
  <kendo-treelist-numeric-filter-menu-input
104
- [currentFilter]="firstFilter"
105
- [operators]="operators"
106
- [filterService]="filterService"
107
- [filterDelay]="filterDelay"
108
- [column]="column"
109
- [filter]="filter"
110
- [format]="format"
111
- [decimals]="decimals"
112
- [spinners]="spinners"
113
- [min]="min"
114
- [max]="max"
115
- [step]="step"
116
- [placeholder]="placeholder"
117
- [menuTabbingService]="menuTabbingService"
118
- [isFirstDropDown]="true">
103
+ [currentFilter]="firstFilter"
104
+ [operators]="operators"
105
+ [filterService]="filterService"
106
+ [filterDelay]="filterDelay"
107
+ [column]="column"
108
+ [filter]="filter"
109
+ [format]="format"
110
+ [decimals]="decimals"
111
+ [spinners]="spinners"
112
+ [min]="min"
113
+ [max]="max"
114
+ [step]="step"
115
+ [placeholder]="placeholder"
116
+ [menuTabbingService]="menuTabbingService"
117
+ [isFirstDropDown]="true">
119
118
  </kendo-treelist-numeric-filter-menu-input>
120
- <kendo-dropdownlist
121
- *ngIf="extra"
119
+ @if (extra) {
120
+ <kendo-dropdownlist
122
121
  kendoFilterMenuDropDown
123
122
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
124
123
  class="k-filter-and"
@@ -128,9 +127,10 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
128
127
  [value]="filter?.logic"
129
128
  textField="text"
130
129
  valueField="value">
131
- </kendo-dropdownlist>
132
- <kendo-treelist-numeric-filter-menu-input
133
- *ngIf="extra"
130
+ </kendo-dropdownlist>
131
+ }
132
+ @if (extra) {
133
+ <kendo-treelist-numeric-filter-menu-input
134
134
  [operators]="operators"
135
135
  [currentFilter]="secondFilter"
136
136
  [filterService]="filterService"
@@ -144,8 +144,9 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
144
144
  [step]="step"
145
145
  [placeholder]="extraPlaceholder"
146
146
  [menuTabbingService]="menuTabbingService">
147
- </kendo-treelist-numeric-filter-menu-input>
148
- `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-treelist-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "placeholder", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { 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", "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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
147
+ </kendo-treelist-numeric-filter-menu-input>
148
+ }
149
+ `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-treelist-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "placeholder", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { 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: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
149
150
  }
150
151
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
151
152
  type: Component,
@@ -153,24 +154,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
153
154
  selector: 'kendo-treelist-numeric-filter-menu',
154
155
  template: `
155
156
  <kendo-treelist-numeric-filter-menu-input
156
- [currentFilter]="firstFilter"
157
- [operators]="operators"
158
- [filterService]="filterService"
159
- [filterDelay]="filterDelay"
160
- [column]="column"
161
- [filter]="filter"
162
- [format]="format"
163
- [decimals]="decimals"
164
- [spinners]="spinners"
165
- [min]="min"
166
- [max]="max"
167
- [step]="step"
168
- [placeholder]="placeholder"
169
- [menuTabbingService]="menuTabbingService"
170
- [isFirstDropDown]="true">
157
+ [currentFilter]="firstFilter"
158
+ [operators]="operators"
159
+ [filterService]="filterService"
160
+ [filterDelay]="filterDelay"
161
+ [column]="column"
162
+ [filter]="filter"
163
+ [format]="format"
164
+ [decimals]="decimals"
165
+ [spinners]="spinners"
166
+ [min]="min"
167
+ [max]="max"
168
+ [step]="step"
169
+ [placeholder]="placeholder"
170
+ [menuTabbingService]="menuTabbingService"
171
+ [isFirstDropDown]="true">
171
172
  </kendo-treelist-numeric-filter-menu-input>
172
- <kendo-dropdownlist
173
- *ngIf="extra"
173
+ @if (extra) {
174
+ <kendo-dropdownlist
174
175
  kendoFilterMenuDropDown
175
176
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
176
177
  class="k-filter-and"
@@ -180,9 +181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
180
181
  [value]="filter?.logic"
181
182
  textField="text"
182
183
  valueField="value">
183
- </kendo-dropdownlist>
184
- <kendo-treelist-numeric-filter-menu-input
185
- *ngIf="extra"
184
+ </kendo-dropdownlist>
185
+ }
186
+ @if (extra) {
187
+ <kendo-treelist-numeric-filter-menu-input
186
188
  [operators]="operators"
187
189
  [currentFilter]="secondFilter"
188
190
  [filterService]="filterService"
@@ -196,10 +198,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
196
198
  [step]="step"
197
199
  [placeholder]="extraPlaceholder"
198
200
  [menuTabbingService]="menuTabbingService">
199
- </kendo-treelist-numeric-filter-menu-input>
200
- `,
201
+ </kendo-treelist-numeric-filter-menu-input>
202
+ }
203
+ `,
201
204
  standalone: true,
202
- imports: [NumericFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
205
+ imports: [NumericFilterMenuInputComponent, DropDownListComponent, FilterMenuDropDownListDirective]
203
206
  }]
204
207
  }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClasses: [{
205
208
  type: HostBinding,