@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
@@ -25,7 +25,7 @@ import { LevelItemsPipe } from './common/level-items.pipe';
25
25
  import { LogicalCellDirective } from '../navigation/logical-cell.directive';
26
26
  import { CellComponent } from './cell.component';
27
27
  import { LogicalRowDirective } from '../navigation/logical-row.directive';
28
- import { NgIf, NgTemplateOutlet, NgFor, NgClass, NgStyle } from '@angular/common';
28
+ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
29
29
  import * as i0 from "@angular/core";
30
30
  import * as i1 from "../data/change-notification.service";
31
31
  import * as i2 from "../editing/edit.service";
@@ -125,9 +125,6 @@ export class TableBodyComponent {
125
125
  return item.index % 2 !== 0;
126
126
  }
127
127
  trackByWrapper(index, item) {
128
- if (item.type === 'data') {
129
- item.isEditing = this.editService.isEdited(item.data);
130
- }
131
128
  return this.trackBy(index, item);
132
129
  }
133
130
  trackByColumns(index, item) {
@@ -193,6 +190,13 @@ export class TableBodyComponent {
193
190
  }
194
191
  ngDoCheck() {
195
192
  this.headerOffset = this.columnInfoService.totalLevels + (hasFilterRow(this.filterable) ? 1 : 0);
193
+ if (this.view?.data) {
194
+ this.view.data.forEach((item) => {
195
+ if (item.type === 'data') {
196
+ item.isEditing = this.editService.isEdited(item.data);
197
+ }
198
+ });
199
+ }
196
200
  }
197
201
  ngOnDestroy() {
198
202
  if (this.clickSubscription) {
@@ -391,92 +395,103 @@ export class TableBodyComponent {
391
395
  return viewItem;
392
396
  }
393
397
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.ChangeNotificationService }, { token: i2.EditService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i4.DomEventsService }, { token: i5.ColumnInfoService }, { token: i6.NavigationService }, { token: i7.ExpandStateService }, { token: i8.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
394
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableBodyComponent, isStandalone: true, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
395
- <tr *ngIf="!hasData" class="k-grid-norecords">
398
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableBodyComponent, isStandalone: true, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
399
+ @if (!hasData) {
400
+ <tr class="k-grid-norecords">
396
401
  <td [attr.colspan]="colSpan" class="k-table-td">
397
- <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
398
- </ng-container>
399
- <ng-container *ngIf="!noRecordsTemplate?.templateRef">
400
- {{noRecordsText}}
402
+ @if (noRecordsTemplate?.templateRef) {
403
+ <ng-container [ngTemplateOutlet]="noRecordsTemplate.templateRef">
401
404
  </ng-container>
405
+ }
406
+ @if (!noRecordsTemplate?.templateRef) {
407
+ {{noRecordsText}}
408
+ }
402
409
  </td>
403
- </tr>
404
- <ng-container *ngFor="let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;">
405
- <tr *ngIf="item.type === 'data'"
406
- kendoTreeListLogicalRow
407
- [dataRowIndex]="$any(item).index"
408
- [dataItem]="item.data"
409
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
410
- [logicalSlaveRow]="lockedColumnsCount > 0"
411
- [logicalCellsCount]="columns.length"
412
- [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
413
- [totalColumns]="totalColumns"
414
- [isNew]="item.isNew"
415
- [attr.aria-expanded]="ariaRowExpanded(item)"
416
- [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
417
- class="k-table-row{{isOdd(item) ? ' k-table-alt-row' : ''}}"
418
- [class.k-grid-edit-row]="isEditingRow(item)"
419
- [class.k-grid-add-row]="item.isNew"
420
- [attr.aria-selected]="ariaRowSelected(item)"
421
- [class.k-selected]="item.selected"
422
- [attr.data-treelist-view-index]="rowIndex">
423
-
410
+ </tr>
411
+ }
412
+ @for (item of view?.data; track trackByWrapper($index, item); let rowIndex = $index) {
413
+ @if (item.type === 'data') {
414
+ <tr
415
+ kendoTreeListLogicalRow
416
+ [dataRowIndex]="$any(item).index"
417
+ [dataItem]="item.data"
418
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
419
+ [logicalSlaveRow]="lockedColumnsCount > 0"
420
+ [logicalCellsCount]="columns.length"
421
+ [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
422
+ [totalColumns]="totalColumns"
423
+ [isNew]="item.isNew"
424
+ [attr.aria-expanded]="ariaRowExpanded(item)"
425
+ [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
426
+ class="k-table-row{{isOdd(item) ? ' k-table-alt-row' : ''}}"
427
+ [class.k-grid-edit-row]="isEditingRow(item)"
428
+ [class.k-grid-add-row]="item.isNew"
429
+ [attr.aria-selected]="ariaRowSelected(item)"
430
+ [class.k-selected]="item.selected"
431
+ [attr.data-treelist-view-index]="rowIndex">
432
+ @for (column of columns; track trackByColumns($index, column); let columnIndex = $index) {
424
433
  <td kendoTreeListCell
425
- [columnIndex]="lockedColumnsCount + columnIndex"
426
- [column]="column"
427
- [viewItem]="item"
428
- [dataItem]="item.data"
429
- [level]="item.level"
430
- [hasChildren]="item.hasChildren"
431
- [isExpanded]="item.expanded"
432
- [rowIndex]="item.rowIndex"
433
- [loading]="item.loading"
434
- [isNew]="item.isNew"
435
- [selected]="item.selected"
436
- [expandIcons]="expandIcons"
437
- kendoTreeListLogicalCell
438
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
439
- [logicalColIndex]="logicalColIndex(column)"
440
- [dataRowIndex]="$any(item).index"
441
- [column]="column"
442
- [colIndex]="columnIndex"
443
- [colSpan]="column.colspan"
444
- [expandable]="cellExpandable(item, column)"
445
- [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
446
- [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
447
- class="k-table-td"
448
- [attr.role]="column.tableCellsRole"
449
- [ngClass]="column.cssClass"
450
- [class.k-grid-edit-cell]="isEditingCell(item, column)"
451
- [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
452
- [ngStyle]="column.style"
453
- [attr.colspan]="column.colspan"
454
- *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
434
+ [columnIndex]="lockedColumnsCount + columnIndex"
435
+ [column]="column"
436
+ [viewItem]="item"
437
+ [dataItem]="item.data"
438
+ [level]="item.level"
439
+ [hasChildren]="item.hasChildren"
440
+ [isExpanded]="item.expanded"
441
+ [rowIndex]="item.rowIndex"
442
+ [loading]="item.loading"
443
+ [isNew]="item.isNew"
444
+ [selected]="item.selected"
445
+ [expandIcons]="expandIcons"
446
+ kendoTreeListLogicalCell
447
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
448
+ [logicalColIndex]="logicalColIndex(column)"
449
+ [dataRowIndex]="$any(item).index"
450
+ [column]="column"
451
+ [colIndex]="columnIndex"
452
+ [colSpan]="column.colspan"
453
+ [expandable]="cellExpandable(item, column)"
454
+ [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
455
+ [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
456
+ class="k-table-td"
457
+ [attr.role]="column.tableCellsRole"
458
+ [ngClass]="column.cssClass"
459
+ [class.k-grid-edit-cell]="isEditingCell(item, column)"
460
+ [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
461
+ [ngStyle]="column.style"
462
+ [attr.colspan]="column.colspan"
463
+ >
455
464
  </td>
465
+ }
456
466
  </tr>
457
- <tr *ngIf="item.type === 'footer' && hasFooter" role="row"
458
- class="k-footer"
459
- [attr.data-treelist-view-index]="rowIndex"
460
- kendoTreeListLogicalRow
461
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
462
- [logicalSlaveRow]="lockedColumnsCount > 0"
463
- [logicalCellsCount]="columns.length"
464
- [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
465
- [totalColumns]="totalColumns">
467
+ }
468
+ @if (item.type === 'footer' && hasFooter) {
469
+ <tr role="row"
470
+ class="k-footer"
471
+ [attr.data-treelist-view-index]="rowIndex"
472
+ kendoTreeListLogicalRow
473
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
474
+ [logicalSlaveRow]="lockedColumnsCount > 0"
475
+ [logicalCellsCount]="columns.length"
476
+ [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
477
+ [totalColumns]="totalColumns">
478
+ @for (column of footerColumns; track trackByColumns($index, column); let columnIndex = $index) {
466
479
  <td kendoTreeListLogicalCell
467
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
468
- [logicalColIndex]="logicalColIndex(column)"
469
- [column]="column"
470
- [colIndex]="columnIndex"
471
- class="k-table-td"
472
- [attr.role]="column.tableCellsRole"
473
- [ngClass]="column.footerClass"
474
- [ngStyle]="column.footerStyle"
475
- *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
476
- <ng-container *ngIf="$any(column).expandable">
477
- <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon" *ngFor="let item of item.level | levelItems"></kendo-icon-wrapper>
478
- </ng-container>
479
- <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
480
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
481
+ [logicalColIndex]="logicalColIndex(column)"
482
+ [column]="column"
483
+ [colIndex]="columnIndex"
484
+ class="k-table-td"
485
+ [attr.role]="column.tableCellsRole"
486
+ [ngClass]="column.footerClass"
487
+ [ngStyle]="column.footerStyle"
488
+ >
489
+ @if ($any(column).expandable) {
490
+ @for (item of item.level | levelItems; track $index) {
491
+ <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon"></kendo-icon-wrapper>
492
+ }
493
+ }
494
+ <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
480
495
  [ngTemplateOutletContext]="{
481
496
  $implicit: item.aggregates,
482
497
  aggregates: item.aggregates,
@@ -486,102 +501,115 @@ export class TableBodyComponent {
486
501
  items: item.items,
487
502
  parentItem: item.parentItem
488
503
  }">
489
- </ng-container>
490
- </td>
504
+ </ng-container>
505
+ </td>
506
+ }
491
507
  </tr>
492
- </ng-container>
493
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CellComponent, selector: "[kendoTreeListCell]", inputs: ["column", "columnIndex", "isNew", "level", "hasChildren", "isExpanded", "loading", "expandIcons", "rowIndex", "selected", "dataItem", "viewItem"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable", "headerLabelText"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }] });
508
+ }
509
+ }
510
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CellComponent, selector: "[kendoTreeListCell]", inputs: ["column", "columnIndex", "isNew", "level", "hasChildren", "isExpanded", "loading", "expandIcons", "rowIndex", "selected", "dataItem", "viewItem"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable", "headerLabelText"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }] });
494
511
  }
495
512
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableBodyComponent, decorators: [{
496
513
  type: Component,
497
514
  args: [{
498
515
  selector: '[kendoTreeListTableBody]',
499
516
  template: `
500
- <tr *ngIf="!hasData" class="k-grid-norecords">
517
+ @if (!hasData) {
518
+ <tr class="k-grid-norecords">
501
519
  <td [attr.colspan]="colSpan" class="k-table-td">
502
- <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
503
- </ng-container>
504
- <ng-container *ngIf="!noRecordsTemplate?.templateRef">
505
- {{noRecordsText}}
520
+ @if (noRecordsTemplate?.templateRef) {
521
+ <ng-container [ngTemplateOutlet]="noRecordsTemplate.templateRef">
506
522
  </ng-container>
523
+ }
524
+ @if (!noRecordsTemplate?.templateRef) {
525
+ {{noRecordsText}}
526
+ }
507
527
  </td>
508
- </tr>
509
- <ng-container *ngFor="let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;">
510
- <tr *ngIf="item.type === 'data'"
511
- kendoTreeListLogicalRow
512
- [dataRowIndex]="$any(item).index"
513
- [dataItem]="item.data"
514
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
515
- [logicalSlaveRow]="lockedColumnsCount > 0"
516
- [logicalCellsCount]="columns.length"
517
- [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
518
- [totalColumns]="totalColumns"
519
- [isNew]="item.isNew"
520
- [attr.aria-expanded]="ariaRowExpanded(item)"
521
- [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
522
- class="k-table-row{{isOdd(item) ? ' k-table-alt-row' : ''}}"
523
- [class.k-grid-edit-row]="isEditingRow(item)"
524
- [class.k-grid-add-row]="item.isNew"
525
- [attr.aria-selected]="ariaRowSelected(item)"
526
- [class.k-selected]="item.selected"
527
- [attr.data-treelist-view-index]="rowIndex">
528
-
528
+ </tr>
529
+ }
530
+ @for (item of view?.data; track trackByWrapper($index, item); let rowIndex = $index) {
531
+ @if (item.type === 'data') {
532
+ <tr
533
+ kendoTreeListLogicalRow
534
+ [dataRowIndex]="$any(item).index"
535
+ [dataItem]="item.data"
536
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
537
+ [logicalSlaveRow]="lockedColumnsCount > 0"
538
+ [logicalCellsCount]="columns.length"
539
+ [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
540
+ [totalColumns]="totalColumns"
541
+ [isNew]="item.isNew"
542
+ [attr.aria-expanded]="ariaRowExpanded(item)"
543
+ [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
544
+ class="k-table-row{{isOdd(item) ? ' k-table-alt-row' : ''}}"
545
+ [class.k-grid-edit-row]="isEditingRow(item)"
546
+ [class.k-grid-add-row]="item.isNew"
547
+ [attr.aria-selected]="ariaRowSelected(item)"
548
+ [class.k-selected]="item.selected"
549
+ [attr.data-treelist-view-index]="rowIndex">
550
+ @for (column of columns; track trackByColumns($index, column); let columnIndex = $index) {
529
551
  <td kendoTreeListCell
530
- [columnIndex]="lockedColumnsCount + columnIndex"
531
- [column]="column"
532
- [viewItem]="item"
533
- [dataItem]="item.data"
534
- [level]="item.level"
535
- [hasChildren]="item.hasChildren"
536
- [isExpanded]="item.expanded"
537
- [rowIndex]="item.rowIndex"
538
- [loading]="item.loading"
539
- [isNew]="item.isNew"
540
- [selected]="item.selected"
541
- [expandIcons]="expandIcons"
542
- kendoTreeListLogicalCell
543
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
544
- [logicalColIndex]="logicalColIndex(column)"
545
- [dataRowIndex]="$any(item).index"
546
- [column]="column"
547
- [colIndex]="columnIndex"
548
- [colSpan]="column.colspan"
549
- [expandable]="cellExpandable(item, column)"
550
- [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
551
- [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
552
- class="k-table-td"
553
- [attr.role]="column.tableCellsRole"
554
- [ngClass]="column.cssClass"
555
- [class.k-grid-edit-cell]="isEditingCell(item, column)"
556
- [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
557
- [ngStyle]="column.style"
558
- [attr.colspan]="column.colspan"
559
- *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
552
+ [columnIndex]="lockedColumnsCount + columnIndex"
553
+ [column]="column"
554
+ [viewItem]="item"
555
+ [dataItem]="item.data"
556
+ [level]="item.level"
557
+ [hasChildren]="item.hasChildren"
558
+ [isExpanded]="item.expanded"
559
+ [rowIndex]="item.rowIndex"
560
+ [loading]="item.loading"
561
+ [isNew]="item.isNew"
562
+ [selected]="item.selected"
563
+ [expandIcons]="expandIcons"
564
+ kendoTreeListLogicalCell
565
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
566
+ [logicalColIndex]="logicalColIndex(column)"
567
+ [dataRowIndex]="$any(item).index"
568
+ [column]="column"
569
+ [colIndex]="columnIndex"
570
+ [colSpan]="column.colspan"
571
+ [expandable]="cellExpandable(item, column)"
572
+ [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
573
+ [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
574
+ class="k-table-td"
575
+ [attr.role]="column.tableCellsRole"
576
+ [ngClass]="column.cssClass"
577
+ [class.k-grid-edit-cell]="isEditingCell(item, column)"
578
+ [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
579
+ [ngStyle]="column.style"
580
+ [attr.colspan]="column.colspan"
581
+ >
560
582
  </td>
583
+ }
561
584
  </tr>
562
- <tr *ngIf="item.type === 'footer' && hasFooter" role="row"
563
- class="k-footer"
564
- [attr.data-treelist-view-index]="rowIndex"
565
- kendoTreeListLogicalRow
566
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
567
- [logicalSlaveRow]="lockedColumnsCount > 0"
568
- [logicalCellsCount]="columns.length"
569
- [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
570
- [totalColumns]="totalColumns">
585
+ }
586
+ @if (item.type === 'footer' && hasFooter) {
587
+ <tr role="row"
588
+ class="k-footer"
589
+ [attr.data-treelist-view-index]="rowIndex"
590
+ kendoTreeListLogicalRow
591
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
592
+ [logicalSlaveRow]="lockedColumnsCount > 0"
593
+ [logicalCellsCount]="columns.length"
594
+ [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
595
+ [totalColumns]="totalColumns">
596
+ @for (column of footerColumns; track trackByColumns($index, column); let columnIndex = $index) {
571
597
  <td kendoTreeListLogicalCell
572
- [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
573
- [logicalColIndex]="logicalColIndex(column)"
574
- [column]="column"
575
- [colIndex]="columnIndex"
576
- class="k-table-td"
577
- [attr.role]="column.tableCellsRole"
578
- [ngClass]="column.footerClass"
579
- [ngStyle]="column.footerStyle"
580
- *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
581
- <ng-container *ngIf="$any(column).expandable">
582
- <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon" *ngFor="let item of item.level | levelItems"></kendo-icon-wrapper>
583
- </ng-container>
584
- <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
598
+ [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
599
+ [logicalColIndex]="logicalColIndex(column)"
600
+ [column]="column"
601
+ [colIndex]="columnIndex"
602
+ class="k-table-td"
603
+ [attr.role]="column.tableCellsRole"
604
+ [ngClass]="column.footerClass"
605
+ [ngStyle]="column.footerStyle"
606
+ >
607
+ @if ($any(column).expandable) {
608
+ @for (item of item.level | levelItems; track $index) {
609
+ <kendo-icon-wrapper name="none" innerCssClass="k-treelist-toggle" [svgIcon]="noneIcon"></kendo-icon-wrapper>
610
+ }
611
+ }
612
+ <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
585
613
  [ngTemplateOutletContext]="{
586
614
  $implicit: item.aggregates,
587
615
  aggregates: item.aggregates,
@@ -591,13 +619,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
591
619
  items: item.items,
592
620
  parentItem: item.parentItem
593
621
  }">
594
- </ng-container>
595
- </td>
622
+ </ng-container>
623
+ </td>
624
+ }
596
625
  </tr>
597
- </ng-container>
626
+ }
627
+ }
598
628
  `,
599
629
  standalone: true,
600
- imports: [NgIf, NgTemplateOutlet, NgFor, LogicalRowDirective, NgClass, CellComponent, LogicalCellDirective, NgStyle, IconWrapperComponent, LevelItemsPipe]
630
+ imports: [NgTemplateOutlet, LogicalRowDirective, NgClass, CellComponent, LogicalCellDirective, NgStyle, IconWrapperComponent, LevelItemsPipe]
601
631
  }]
602
632
  }], ctorParameters: () => [{ type: i1.ChangeNotificationService }, { type: i2.EditService }, { type: i3.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i4.DomEventsService }, { type: i5.ColumnInfoService }, { type: i6.NavigationService }, { type: i7.ExpandStateService }, { type: i8.SelectionService }], propDecorators: { hostClass: [{
603
633
  type: HostBinding,
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /* eslint-disable @typescript-eslint/no-inferrable-types */
6
6
  import { Component, Input, HostBinding, Renderer2, ElementRef } from '@angular/core';
7
- import { NgIf, NgTemplateOutlet } from '@angular/common';
7
+ import { NgTemplateOutlet } from '@angular/common';
8
8
  import { Subscription } from 'rxjs';
9
9
  import { Keys, isDocumentAvailable, normalizeNumpadKeys } from '@progress/kendo-angular-common';
10
10
  import { ContextService } from './../../common/provider.service';
@@ -62,29 +62,31 @@ export class ToolbarComponent {
62
62
  this.navigationService.updateFocus();
63
63
  }
64
64
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
65
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-treelist-toolbar", inputs: { position: "position", navigable: "navigable" }, host: { properties: { "attr.role": "this.hostRole", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses" } }, ngImport: i0, template: `
66
- <ng-template
67
- *ngIf="toolbarTemplateRef"
65
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolbarComponent, isStandalone: true, selector: "kendo-treelist-toolbar", inputs: { position: "position", navigable: "navigable" }, host: { properties: { "attr.role": "this.hostRole", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses" } }, ngImport: i0, template: `
66
+ @if (toolbarTemplateRef) {
67
+ <ng-template
68
68
  [ngTemplateOutlet]="toolbarTemplateRef"
69
69
  [ngTemplateOutletContext]="context"
70
70
  >
71
- </ng-template>
72
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
71
+ </ng-template>
72
+ }
73
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
73
74
  }
74
75
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
75
76
  type: Component,
76
77
  args: [{
77
78
  selector: 'kendo-treelist-toolbar',
78
79
  template: `
79
- <ng-template
80
- *ngIf="toolbarTemplateRef"
80
+ @if (toolbarTemplateRef) {
81
+ <ng-template
81
82
  [ngTemplateOutlet]="toolbarTemplateRef"
82
83
  [ngTemplateOutletContext]="context"
83
84
  >
84
- </ng-template>
85
- `,
85
+ </ng-template>
86
+ }
87
+ `,
86
88
  standalone: true,
87
- imports: [NgIf, NgTemplateOutlet]
89
+ imports: [NgTemplateOutlet]
88
90
  }]
89
91
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ContextService }], propDecorators: { hostRole: [{
90
92
  type: HostBinding,