@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 } from '@angular/core';
6
- import { NgIf } from '@angular/common';
7
6
  import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
8
7
  import { StringFilterComponent } from '../string-filter.component';
9
8
  import { FilterService } from '../filter.service';
@@ -92,28 +91,29 @@ export class StringFilterMenuComponent extends StringFilterComponent {
92
91
  return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
93
92
  }
94
93
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
95
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-string-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
94
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StringFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-string-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", placeholder: "placeholder", extraPlaceholder: "extraPlaceholder", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
96
95
  <kendo-treelist-string-filter-menu-input
97
- [currentFilter]="firstFilter"
98
- [operators]="operators"
99
- [filterService]="filterService"
100
- [column]="column"
101
- [filter]="filter"
102
- [isFirstDropDown]="true"
103
- [placeholder]="placeholder"
104
- [menuTabbingService]="menuTabbingService">
96
+ [currentFilter]="firstFilter"
97
+ [operators]="operators"
98
+ [filterService]="filterService"
99
+ [column]="column"
100
+ [filter]="filter"
101
+ [isFirstDropDown]="true"
102
+ [placeholder]="placeholder"
103
+ [menuTabbingService]="menuTabbingService">
105
104
  </kendo-treelist-string-filter-menu-input>
106
- <kendo-dropdownlist
107
- *ngIf="extra"
105
+ @if (extra) {
106
+ <kendo-dropdownlist
108
107
  class="k-filter-and"
109
108
  [data]="logicOperators"
110
109
  [valuePrimitive]="true" (valueChange)="logicChange($event)"
111
110
  [value]="filter?.logic"
112
111
  textField="text"
113
112
  valueField="value">
114
- </kendo-dropdownlist>
115
- <kendo-treelist-string-filter-menu-input
116
- *ngIf="extra"
113
+ </kendo-dropdownlist>
114
+ }
115
+ @if (extra) {
116
+ <kendo-treelist-string-filter-menu-input
117
117
  [operators]="operators"
118
118
  [currentFilter]="secondFilter"
119
119
  [filterService]="filterService"
@@ -121,8 +121,9 @@ export class StringFilterMenuComponent extends StringFilterComponent {
121
121
  [filter]="filter"
122
122
  [placeholder]="extraPlaceholder"
123
123
  [menuTabbingService]="menuTabbingService">
124
- </kendo-treelist-string-filter-menu-input>
125
- `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-treelist-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "placeholder", "isFirstDropDown", "menuTabbingService"] }, { 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"] }] });
124
+ </kendo-treelist-string-filter-menu-input>
125
+ }
126
+ `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-treelist-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "placeholder", "isFirstDropDown", "menuTabbingService"] }, { 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"] }] });
126
127
  }
127
128
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
128
129
  type: Component,
@@ -130,26 +131,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
130
131
  selector: 'kendo-treelist-string-filter-menu',
131
132
  template: `
132
133
  <kendo-treelist-string-filter-menu-input
133
- [currentFilter]="firstFilter"
134
- [operators]="operators"
135
- [filterService]="filterService"
136
- [column]="column"
137
- [filter]="filter"
138
- [isFirstDropDown]="true"
139
- [placeholder]="placeholder"
140
- [menuTabbingService]="menuTabbingService">
134
+ [currentFilter]="firstFilter"
135
+ [operators]="operators"
136
+ [filterService]="filterService"
137
+ [column]="column"
138
+ [filter]="filter"
139
+ [isFirstDropDown]="true"
140
+ [placeholder]="placeholder"
141
+ [menuTabbingService]="menuTabbingService">
141
142
  </kendo-treelist-string-filter-menu-input>
142
- <kendo-dropdownlist
143
- *ngIf="extra"
143
+ @if (extra) {
144
+ <kendo-dropdownlist
144
145
  class="k-filter-and"
145
146
  [data]="logicOperators"
146
147
  [valuePrimitive]="true" (valueChange)="logicChange($event)"
147
148
  [value]="filter?.logic"
148
149
  textField="text"
149
150
  valueField="value">
150
- </kendo-dropdownlist>
151
- <kendo-treelist-string-filter-menu-input
152
- *ngIf="extra"
151
+ </kendo-dropdownlist>
152
+ }
153
+ @if (extra) {
154
+ <kendo-treelist-string-filter-menu-input
153
155
  [operators]="operators"
154
156
  [currentFilter]="secondFilter"
155
157
  [filterService]="filterService"
@@ -157,10 +159,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
157
159
  [filter]="filter"
158
160
  [placeholder]="extraPlaceholder"
159
161
  [menuTabbingService]="menuTabbingService">
160
- </kendo-treelist-string-filter-menu-input>
161
- `,
162
+ </kendo-treelist-string-filter-menu-input>
163
+ }
164
+ `,
162
165
  standalone: true,
163
- imports: [StringFilterMenuInputComponent, NgIf, DropDownListComponent]
166
+ imports: [StringFilterMenuInputComponent, DropDownListComponent]
164
167
  }]
165
168
  }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClasses: [{
166
169
  type: HostBinding,
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1763645722,
14
- version: '21.1.1-develop.1',
13
+ publishDate: 1763998367,
14
+ version: '21.2.0-develop.1',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
@@ -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, HostListener, HostBinding, ElementRef, Renderer2 as Renderer, NgZone } from '@angular/core';
6
- import { NgIf, NgClass } from '@angular/common';
6
+ import { NgClass } from '@angular/common';
7
7
  import { Button } from '@progress/kendo-angular-buttons';
8
8
  import { LocalizationService } from '@progress/kendo-angular-l10n';
9
9
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
@@ -50,37 +50,47 @@ export class PDFCommandDirective extends Button {
50
50
  this.ngZone = ngZone;
51
51
  }
52
52
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, deps: [{ token: i1.PDFService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
53
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoTreeListPDFCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-pdf": "this.pdfClass" } }, usesInheritance: true, ngImport: i0, template: `
54
- <kendo-icon-wrapper
55
- *ngIf="icon || svgIcon"
53
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoTreeListPDFCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-pdf": "this.pdfClass" } }, usesInheritance: true, ngImport: i0, template: `
54
+ @if (icon || svgIcon) {
55
+ <kendo-icon-wrapper
56
56
  innerCssClass="k-button-icon"
57
57
  [name]="icon"
58
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
59
- <span *ngIf="imageUrl" class="k-button-icon k-icon">
58
+ [svgIcon]="svgIcon"></kendo-icon-wrapper>
59
+ }
60
+ @if (imageUrl) {
61
+ <span class="k-button-icon k-icon">
60
62
  <img [src]="imageUrl" class="k-image" role="presentation" />
61
- </span>
62
- <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
63
+ </span>
64
+ }
65
+ @if (iconClass) {
66
+ <span class="k-button-icon" [ngClass]="iconClass"></span>
67
+ }
63
68
  <span class="k-button-text"><ng-content></ng-content></span>
64
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
69
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
65
70
  }
66
71
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, decorators: [{
67
72
  type: Component,
68
73
  args: [{
69
74
  selector: '[kendoTreeListPDFCommand]',
70
75
  template: `
71
- <kendo-icon-wrapper
72
- *ngIf="icon || svgIcon"
76
+ @if (icon || svgIcon) {
77
+ <kendo-icon-wrapper
73
78
  innerCssClass="k-button-icon"
74
79
  [name]="icon"
75
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
76
- <span *ngIf="imageUrl" class="k-button-icon k-icon">
80
+ [svgIcon]="svgIcon"></kendo-icon-wrapper>
81
+ }
82
+ @if (imageUrl) {
83
+ <span class="k-button-icon k-icon">
77
84
  <img [src]="imageUrl" class="k-image" role="presentation" />
78
- </span>
79
- <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
85
+ </span>
86
+ }
87
+ @if (iconClass) {
88
+ <span class="k-button-icon" [ngClass]="iconClass"></span>
89
+ }
80
90
  <span class="k-button-text"><ng-content></ng-content></span>
81
- `,
91
+ `,
82
92
  standalone: true,
83
- imports: [NgIf, IconWrapperComponent, NgClass]
93
+ imports: [IconWrapperComponent, NgClass]
84
94
  }]
85
95
  }], ctorParameters: () => [{ type: i1.PDFService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { onClick: [{
86
96
  type: HostListener,
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, HostBinding, Input } from '@angular/core';
6
6
  import { ReactiveFormsModule } from '@angular/forms';
7
- import { NgSwitch, NgSwitchCase, NgIf, NgFor, NgTemplateOutlet, NgSwitchDefault } from '@angular/common';
7
+ import { NgTemplateOutlet } from '@angular/common';
8
8
  import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, reorderIcon } from '@progress/kendo-svg-icons';
9
9
  import { LocalizationService } from "@progress/kendo-angular-l10n";
10
10
  import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
@@ -164,157 +164,179 @@ export class CellComponent {
164
164
  return this.localization.get(token);
165
165
  }
166
166
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.LocalizationService }, { token: i3.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
167
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CellComponent, isStandalone: true, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", rowIndex: "rowIndex", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
168
- <ng-container [ngSwitch]="isEdited">
169
- <ng-container *ngSwitchCase="false">
170
- <ng-container *ngIf="column.expandable">
171
- <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></kendo-icon-wrapper>
172
- <kendo-icon-wrapper innerCssClass="k-treelist-toggle"
173
- aria-hidden="true"
174
- *ngIf="hasChildren && expandIcons && !loading"
175
- [name]="arrowIcon"
176
- [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
177
- <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
178
- </ng-container>
179
- <ng-container *ngIf="column.templateRef"
180
- [ngTemplateOutlet]="column.templateRef"
181
- [ngTemplateOutletContext]="templateContext">
182
- </ng-container>
183
- <ng-container *ngIf="isSpanColumn">
184
- <ng-container *ngFor="let childColumn of childColumns">
185
- {{ dataItem | valueOf: childColumn.field: childColumn.format}}
186
- </ng-container>
187
- </ng-container>
188
- <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
189
- <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
190
- <kendo-checkbox
191
- kendoTreeListFocusable
192
- [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
193
- [checkedState]="selected"
194
- ></kendo-checkbox>
195
- </ng-template>
196
- <ng-container *ngIf="column.isRowReorderColumn && !isNew">
197
- <kendo-icon-wrapper
198
- name="reorder"
199
- [svgIcon]="reorderIcon">
200
- </kendo-icon-wrapper>
201
- </ng-container>
202
- </ng-container>
203
- <ng-container *ngSwitchCase="true">
204
- <ng-container
205
- *ngIf="column.editTemplateRef"
206
- [ngTemplateOutlet]="column.editTemplateRef"
207
- [ngTemplateOutletContext]="editTemplateContext">
208
- </ng-container>
209
- <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
210
- <kendo-numerictextbox
211
- *ngSwitchCase="'numeric'"
212
- [format]="format"
213
- [formControl]="$any(formGroup.get(column.field))"
214
- kendoTreeListFocusable
215
- ></kendo-numerictextbox>
216
-
217
- <kendo-datepicker
218
- *ngSwitchCase="'date'"
219
- [format]="format"
220
- [formControl]="$any(formGroup.get(column.field))"
221
- kendoTreeListFocusable
222
- ></kendo-datepicker>
223
-
224
- <kendo-checkbox
225
- *ngSwitchCase="'boolean'"
226
- [formControl]="$any(formGroup.get(column.field))"
227
- kendoTreeListFocusable
228
- ></kendo-checkbox>
229
-
230
- <kendo-textbox
231
- *ngSwitchDefault
232
- [formControl]="$any(formGroup.get(column.field))"
233
- kendoTreeListFocusable
234
- ></kendo-textbox>
235
- </ng-container>
236
- </ng-container>
237
- </ng-container>
238
- `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n [kendoTreeListAddCommand],\n [kendoTreeListEditCommand],\n [kendoTreeListRemoveCommand],\n [kendoTreeListSaveCommand],\n [kendoTreeListCancelCommand]\n ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
167
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellComponent, isStandalone: true, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", rowIndex: "rowIndex", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
168
+ @switch (isEdited) {
169
+ @case (false) {
170
+ @if (column.expandable) {
171
+ @for (item of level | levelItems : hasChildren && expandIcons; track $index) {
172
+ <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon"></kendo-icon-wrapper>
173
+ }
174
+ @if (hasChildren && expandIcons && !loading) {
175
+ <kendo-icon-wrapper innerCssClass="k-treelist-toggle"
176
+ aria-hidden="true"
177
+ [name]="arrowIcon"
178
+ [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
179
+ }
180
+ @if (hasChildren && expandIcons && loading) {
181
+ <span class="k-icon k-i-loading"></span>
182
+ }
183
+ }
184
+ @if (column.templateRef) {
185
+ <ng-container
186
+ [ngTemplateOutlet]="column.templateRef"
187
+ [ngTemplateOutletContext]="templateContext">
188
+ </ng-container>
189
+ }
190
+ @if (isSpanColumn) {
191
+ @for (childColumn of childColumns; track $index) {
192
+ {{ dataItem | valueOf: childColumn.field: childColumn.format}}
193
+ }
194
+ }
195
+ @if (isBoundColumn) {{{ dataItem | valueOf: column.field: column.format}}}
196
+ @if (column.isCheckboxColumn && !isNew) {
197
+ <kendo-checkbox
198
+ kendoTreeListFocusable
199
+ [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
200
+ [checkedState]="selected"
201
+ ></kendo-checkbox>
202
+ }
203
+ @if (column.isRowReorderColumn && !isNew) {
204
+ <kendo-icon-wrapper
205
+ name="reorder"
206
+ [svgIcon]="reorderIcon">
207
+ </kendo-icon-wrapper>
208
+ }
209
+ }
210
+ @case (true) {
211
+ @if (column.editTemplateRef) {
212
+ <ng-container
213
+ [ngTemplateOutlet]="column.editTemplateRef"
214
+ [ngTemplateOutletContext]="editTemplateContext">
215
+ </ng-container>
216
+ }
217
+ @if (!column.editTemplateRef) {
218
+ @switch (column.editor) {
219
+ @case ('numeric') {
220
+ <kendo-numerictextbox
221
+ [format]="format"
222
+ [formControl]="$any(formGroup.get(column.field))"
223
+ kendoTreeListFocusable
224
+ ></kendo-numerictextbox>
225
+ }
226
+ @case ('date') {
227
+ <kendo-datepicker
228
+ [format]="format"
229
+ [formControl]="$any(formGroup.get(column.field))"
230
+ kendoTreeListFocusable
231
+ ></kendo-datepicker>
232
+ }
233
+ @case ('boolean') {
234
+ <kendo-checkbox
235
+ [formControl]="$any(formGroup.get(column.field))"
236
+ kendoTreeListFocusable
237
+ ></kendo-checkbox>
238
+ }
239
+ @default {
240
+ <kendo-textbox
241
+ [formControl]="$any(formGroup.get(column.field))"
242
+ kendoTreeListFocusable
243
+ ></kendo-textbox>
244
+ }
245
+ }
246
+ }
247
+ }
248
+ }
249
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n [kendoTreeListAddCommand],\n [kendoTreeListEditCommand],\n [kendoTreeListRemoveCommand],\n [kendoTreeListSaveCommand],\n [kendoTreeListCancelCommand]\n ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
239
250
  }
240
251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, decorators: [{
241
252
  type: Component,
242
253
  args: [{
243
254
  selector: '[kendoTreeListCell]',
244
255
  template: `
245
- <ng-container [ngSwitch]="isEdited">
246
- <ng-container *ngSwitchCase="false">
247
- <ng-container *ngIf="column.expandable">
248
- <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></kendo-icon-wrapper>
249
- <kendo-icon-wrapper innerCssClass="k-treelist-toggle"
250
- aria-hidden="true"
251
- *ngIf="hasChildren && expandIcons && !loading"
252
- [name]="arrowIcon"
253
- [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
254
- <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
255
- </ng-container>
256
- <ng-container *ngIf="column.templateRef"
257
- [ngTemplateOutlet]="column.templateRef"
258
- [ngTemplateOutletContext]="templateContext">
259
- </ng-container>
260
- <ng-container *ngIf="isSpanColumn">
261
- <ng-container *ngFor="let childColumn of childColumns">
262
- {{ dataItem | valueOf: childColumn.field: childColumn.format}}
263
- </ng-container>
264
- </ng-container>
265
- <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
266
- <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
267
- <kendo-checkbox
268
- kendoTreeListFocusable
269
- [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
270
- [checkedState]="selected"
271
- ></kendo-checkbox>
272
- </ng-template>
273
- <ng-container *ngIf="column.isRowReorderColumn && !isNew">
274
- <kendo-icon-wrapper
275
- name="reorder"
276
- [svgIcon]="reorderIcon">
277
- </kendo-icon-wrapper>
278
- </ng-container>
279
- </ng-container>
280
- <ng-container *ngSwitchCase="true">
281
- <ng-container
282
- *ngIf="column.editTemplateRef"
283
- [ngTemplateOutlet]="column.editTemplateRef"
284
- [ngTemplateOutletContext]="editTemplateContext">
285
- </ng-container>
286
- <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
287
- <kendo-numerictextbox
288
- *ngSwitchCase="'numeric'"
289
- [format]="format"
290
- [formControl]="$any(formGroup.get(column.field))"
291
- kendoTreeListFocusable
292
- ></kendo-numerictextbox>
293
-
294
- <kendo-datepicker
295
- *ngSwitchCase="'date'"
296
- [format]="format"
297
- [formControl]="$any(formGroup.get(column.field))"
298
- kendoTreeListFocusable
299
- ></kendo-datepicker>
300
-
301
- <kendo-checkbox
302
- *ngSwitchCase="'boolean'"
303
- [formControl]="$any(formGroup.get(column.field))"
304
- kendoTreeListFocusable
305
- ></kendo-checkbox>
306
-
307
- <kendo-textbox
308
- *ngSwitchDefault
309
- [formControl]="$any(formGroup.get(column.field))"
310
- kendoTreeListFocusable
311
- ></kendo-textbox>
312
- </ng-container>
313
- </ng-container>
314
- </ng-container>
315
- `,
256
+ @switch (isEdited) {
257
+ @case (false) {
258
+ @if (column.expandable) {
259
+ @for (item of level | levelItems : hasChildren && expandIcons; track $index) {
260
+ <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon"></kendo-icon-wrapper>
261
+ }
262
+ @if (hasChildren && expandIcons && !loading) {
263
+ <kendo-icon-wrapper innerCssClass="k-treelist-toggle"
264
+ aria-hidden="true"
265
+ [name]="arrowIcon"
266
+ [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
267
+ }
268
+ @if (hasChildren && expandIcons && loading) {
269
+ <span class="k-icon k-i-loading"></span>
270
+ }
271
+ }
272
+ @if (column.templateRef) {
273
+ <ng-container
274
+ [ngTemplateOutlet]="column.templateRef"
275
+ [ngTemplateOutletContext]="templateContext">
276
+ </ng-container>
277
+ }
278
+ @if (isSpanColumn) {
279
+ @for (childColumn of childColumns; track $index) {
280
+ {{ dataItem | valueOf: childColumn.field: childColumn.format}}
281
+ }
282
+ }
283
+ @if (isBoundColumn) {{{ dataItem | valueOf: column.field: column.format}}}
284
+ @if (column.isCheckboxColumn && !isNew) {
285
+ <kendo-checkbox
286
+ kendoTreeListFocusable
287
+ [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
288
+ [checkedState]="selected"
289
+ ></kendo-checkbox>
290
+ }
291
+ @if (column.isRowReorderColumn && !isNew) {
292
+ <kendo-icon-wrapper
293
+ name="reorder"
294
+ [svgIcon]="reorderIcon">
295
+ </kendo-icon-wrapper>
296
+ }
297
+ }
298
+ @case (true) {
299
+ @if (column.editTemplateRef) {
300
+ <ng-container
301
+ [ngTemplateOutlet]="column.editTemplateRef"
302
+ [ngTemplateOutletContext]="editTemplateContext">
303
+ </ng-container>
304
+ }
305
+ @if (!column.editTemplateRef) {
306
+ @switch (column.editor) {
307
+ @case ('numeric') {
308
+ <kendo-numerictextbox
309
+ [format]="format"
310
+ [formControl]="$any(formGroup.get(column.field))"
311
+ kendoTreeListFocusable
312
+ ></kendo-numerictextbox>
313
+ }
314
+ @case ('date') {
315
+ <kendo-datepicker
316
+ [format]="format"
317
+ [formControl]="$any(formGroup.get(column.field))"
318
+ kendoTreeListFocusable
319
+ ></kendo-datepicker>
320
+ }
321
+ @case ('boolean') {
322
+ <kendo-checkbox
323
+ [formControl]="$any(formGroup.get(column.field))"
324
+ kendoTreeListFocusable
325
+ ></kendo-checkbox>
326
+ }
327
+ @default {
328
+ <kendo-textbox
329
+ [formControl]="$any(formGroup.get(column.field))"
330
+ kendoTreeListFocusable
331
+ ></kendo-textbox>
332
+ }
333
+ }
334
+ }
335
+ }
336
+ }
337
+ `,
316
338
  standalone: true,
317
- imports: [NgSwitch, NgSwitchCase, NgIf, NgFor, IconWrapperComponent, NgTemplateOutlet, FocusableDirective, NumericTextBoxComponent, ReactiveFormsModule, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, LevelItemsPipe, CheckBoxComponent, TextBoxComponent]
339
+ imports: [IconWrapperComponent, NgTemplateOutlet, FocusableDirective, NumericTextBoxComponent, ReactiveFormsModule, DatePickerComponent, FieldAccessorPipe, LevelItemsPipe, CheckBoxComponent, TextBoxComponent]
318
340
  }]
319
341
  }], ctorParameters: () => [{ type: i1.EditService }, { type: i2.LocalizationService }, { type: i3.FocusGroup }], propDecorators: { commandCellClass: [{
320
342
  type: HostBinding,
@@ -4,7 +4,6 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input } from '@angular/core';
6
6
  import { columnsToRender } from '../../columns/column-common';
7
- import { NgFor } from '@angular/common';
8
7
  import * as i0 from "@angular/core";
9
8
  /**
10
9
  * @hidden
@@ -18,19 +17,22 @@ export class ColGroupComponent {
18
17
  return index;
19
18
  }
20
19
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColGroupComponent, isStandalone: true, selector: "[kendoTreeListColGroup]", inputs: { columns: "columns" }, ngImport: i0, template: `
22
- <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
23
- `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
20
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColGroupComponent, isStandalone: true, selector: "[kendoTreeListColGroup]", inputs: { columns: "columns" }, ngImport: i0, template: `
21
+ @for (column of columnsToRender; track trackBy($index, column)) {
22
+ <col [style.width.px]="column.width"/>
23
+ }
24
+ `, isInline: true });
24
25
  }
25
26
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColGroupComponent, decorators: [{
26
27
  type: Component,
27
28
  args: [{
28
29
  selector: '[kendoTreeListColGroup]',
29
30
  template: `
30
- <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
31
- `,
32
- standalone: true,
33
- imports: [NgFor]
31
+ @for (column of columnsToRender; track trackBy($index, column)) {
32
+ <col [style.width.px]="column.width"/>
33
+ }
34
+ `,
35
+ standalone: true
34
36
  }]
35
37
  }], propDecorators: { columns: [{
36
38
  type: Input