@progress/kendo-angular-grid 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 (48) hide show
  1. package/esm2022/adaptiveness/adaptive-renderer.component.mjs +850 -756
  2. package/esm2022/aggregates/status-bar.component.mjs +13 -11
  3. package/esm2022/column-menu/column-chooser-content.component.mjs +133 -123
  4. package/esm2022/column-menu/column-list.component.mjs +62 -59
  5. package/esm2022/column-menu/column-menu-autosize-all.component.mjs +12 -11
  6. package/esm2022/column-menu/column-menu-autosize.component.mjs +12 -11
  7. package/esm2022/column-menu/column-menu-item.component.mjs +221 -85
  8. package/esm2022/column-menu/column-menu-position.component.mjs +46 -43
  9. package/esm2022/column-menu/column-menu.component.mjs +401 -315
  10. package/esm2022/editing/add-command.directive.mjs +27 -17
  11. package/esm2022/editing/cancel-command.directive.mjs +27 -17
  12. package/esm2022/editing/edit-command.directive.mjs +27 -17
  13. package/esm2022/editing/form/form-formfield.component.mjs +97 -70
  14. package/esm2022/editing/form/form.component.mjs +77 -61
  15. package/esm2022/editing/remove-command.directive.mjs +27 -17
  16. package/esm2022/editing/save-command.directive.mjs +27 -17
  17. package/esm2022/excel/excel-command.directive.mjs +27 -17
  18. package/esm2022/filtering/cell/filter-cell-operators.component.mjs +20 -17
  19. package/esm2022/filtering/cell/filter-cell.component.mjs +35 -33
  20. package/esm2022/filtering/filter-row.component.mjs +37 -29
  21. package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +34 -31
  22. package/esm2022/filtering/menu/date-filter-menu.component.mjs +52 -49
  23. package/esm2022/filtering/menu/filter-menu-container.component.mjs +97 -89
  24. package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +50 -47
  25. package/esm2022/filtering/menu/string-filter-menu.component.mjs +36 -33
  26. package/esm2022/filtering/multicheckbox-filter.component.mjs +54 -43
  27. package/esm2022/grid.component.mjs +1579 -1483
  28. package/esm2022/grouping/group-header.component.mjs +113 -89
  29. package/esm2022/grouping/group-panel.component.mjs +82 -75
  30. package/esm2022/package-metadata.mjs +2 -2
  31. package/esm2022/pdf/pdf-command.directive.mjs +27 -17
  32. package/esm2022/rendering/cell.component.mjs +411 -365
  33. package/esm2022/rendering/common/col-group.component.mjs +25 -15
  34. package/esm2022/rendering/common/loading.component.mjs +23 -19
  35. package/esm2022/rendering/details/detail-template.directive.mjs +6 -4
  36. package/esm2022/rendering/footer/footer.component.mjs +128 -112
  37. package/esm2022/rendering/header/header.component.mjs +412 -351
  38. package/esm2022/rendering/list.component.mjs +225 -202
  39. package/esm2022/rendering/table-body.component.mjs +553 -493
  40. package/esm2022/rendering/toolbar/toolbar.component.mjs +13 -11
  41. package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs +86 -79
  42. package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs +54 -51
  43. package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs +138 -115
  44. package/esm2022/rendering/toolbar/tools/sort-toolbar-tool.component.mjs +72 -65
  45. package/fesm2022/progress-kendo-angular-grid.mjs +6426 -5525
  46. package/package.json +24 -24
  47. package/rendering/details/detail-template.directive.d.ts +6 -4
  48. package/schematics/ngAdd/index.js +11 -7
package/esm2022/rendering/header/header.component.mjs CHANGED
@@ -39,7 +39,7 @@ import { FocusableDirective } from '../../navigation/focusable.directive';
39
39
  import { SelectAllCheckboxDirective } from '../../selection/selectall-checkbox.directive';
40
40
  import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
41
41
  import { LogicalRowDirective } from '../../navigation/logical-row.directive';
42
- import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
42
+ import { NgClass, NgStyle } from '@angular/common';
43
43
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
44
44
  import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
45
45
  import * as i0 from "@angular/core";
@@ -491,41 +491,46 @@ export class HeaderComponent {
491
491
  });
492
492
  }
493
493
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.NavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
494
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
495
- <tr *ngFor="let i of columnLevels; let levelIndex = index"
494
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
495
+ @for (i of columnLevels; track i; let levelIndex = $index) {
496
+ <tr
496
497
  kendoGridLogicalRow
497
- [logicalRowIndex]="levelIndex"
498
- [logicalSlaveRow]="lockedColumnsCount > 0"
499
- [logicalCellsCount]="columns.length"
500
- [logicalSlaveCellsCount]="unlockedColumnsCount"
501
- [totalColumns]="totalColumns">
502
- <th
498
+ [logicalRowIndex]="levelIndex"
499
+ [logicalSlaveRow]="lockedColumnsCount > 0"
500
+ [logicalCellsCount]="columns.length"
501
+ [logicalSlaveCellsCount]="unlockedColumnsCount"
502
+ [totalColumns]="totalColumns">
503
+ @for (g of groups; track g) {
504
+ <th
503
505
  class="k-group-cell k-header k-table-th"
504
506
  role="presentation"
505
- *ngFor="let g of groups">
506
- </th>
507
- <th class="k-hierarchy-cell k-header k-table-th"
507
+ >
508
+ </th>
509
+ }
510
+ @if (detailTemplate?.templateRef && !isStacked) {
511
+ <th class="k-hierarchy-cell k-header k-table-th"
508
512
  role="presentation"
509
- *ngIf="detailTemplate?.templateRef && !isStacked"
510
- >
511
- </th>
512
- <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
513
- <th *ngIf="!isColumnGroupComponent(column)"
514
- kendoGridLogicalCell
515
- [logicalRowIndex]="levelIndex"
516
- [logicalColIndex]="logicalColumnIndex(column)"
517
- [headerLabelText]="column.title || getColumnComponent(column).field"
518
- [colSpan]="column.colspan"
519
- [rowSpan]="column.rowspan(totalColumnLevels)"
520
- role="columnheader"
521
- aria-selected="false"
522
- [attr.aria-sort]="sortState(getColumnComponent(column))"
523
- [class.k-sorted]="sortState(getColumnComponent(column))"
524
- (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
525
- kendoDropTarget
526
- kendoDraggable
527
- kendoDraggableColumn
528
- [enableDrag]="shouldActivate(column)"
513
+ >
514
+ </th>
515
+ }
516
+ @for (column of columnsForLevel(levelIndex); track column; let columnIndex = $index; let last = $last) {
517
+ @if (!isColumnGroupComponent(column)) {
518
+ <th
519
+ kendoGridLogicalCell
520
+ [logicalRowIndex]="levelIndex"
521
+ [logicalColIndex]="logicalColumnIndex(column)"
522
+ [headerLabelText]="column.title || getColumnComponent(column).field"
523
+ [colSpan]="column.colspan"
524
+ [rowSpan]="column.rowspan(totalColumnLevels)"
525
+ role="columnheader"
526
+ aria-selected="false"
527
+ [attr.aria-sort]="sortState(getColumnComponent(column))"
528
+ [class.k-sorted]="sortState(getColumnComponent(column))"
529
+ (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
530
+ kendoDropTarget
531
+ kendoDraggable
532
+ kendoDraggableColumn
533
+ [enableDrag]="shouldActivate(column)"
529
534
  [context]="{
530
535
  field: getColumnComponent(column).field,
531
536
  type: 'column',
@@ -533,223 +538,247 @@ export class HeaderComponent {
533
538
  hint: column.title || getColumnComponent(column).field,
534
539
  lastColumn: last && columnIndex === 0
535
540
  }"
536
- class="k-header k-table-th"
537
- [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
538
- [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
539
- [class.k-grid-header-sticky]="column.sticky"
540
- [ngClass]="column.headerClass"
541
- [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
542
- [attr.rowspan]="column.rowspan(totalColumnLevels)"
543
- [attr.colspan]="column.colspan"
544
- [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
545
- [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
546
- [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
547
- <ng-container *ngIf="!isInteractive(getColumnComponent(column), 'sortable')">
548
- <span class="k-cell-inner">
549
- <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
550
- <ng-template
541
+ class="k-header k-table-th"
542
+ [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
543
+ [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
544
+ [class.k-grid-header-sticky]="column.sticky"
545
+ [ngClass]="column.headerClass"
546
+ [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
547
+ [attr.rowspan]="column.rowspan(totalColumnLevels)"
548
+ [attr.colspan]="column.colspan"
549
+ [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
550
+ [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
551
+ [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
552
+ @if (!isInteractive(getColumnComponent(column), 'sortable')) {
553
+ <span class="k-cell-inner">
554
+ <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
555
+ <ng-template
551
556
  [templateContext]="{
552
557
  templateRef: column.headerTemplateRef,
553
558
  columnIndex: column.leafIndex,
554
559
  column: column,
555
560
  $implicit: column
556
561
  }">
557
- </ng-template>
558
- <ng-container *ngIf="!column.headerTemplateRef">
559
- <span class="k-column-title">{{column.displayTitle}}</span>
560
- </ng-container>
561
- </span>
562
- <kendo-grid-filter-menu
563
- *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
564
- [column]="getColumnComponent(column)"
565
- [filter]="filter"
566
- [tabIndex]="tabIndex">
567
- </kendo-grid-filter-menu>
568
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
569
- [standalone]="false"
570
- [settings]="columnMenuSettings"
571
- [column]="column"
572
- [columnMenuTemplate]="columnMenuTemplate"
573
- [sort]="sort"
574
- [filter]="filter"
575
- [sortable]="sortable"
576
- [tabIndex]="tabIndex">
577
- </kendo-grid-column-menu>
578
- </span>
579
- </ng-container>
580
- <ng-container *ngIf="isInteractive(getColumnComponent(column), 'sortable')">
581
- <span class="k-cell-inner">
582
- <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
583
- <ng-template
562
+ </ng-template>
563
+ @if (!column.headerTemplateRef) {
564
+ <span class="k-column-title">{{column.displayTitle}}</span>
565
+ }
566
+ </span>
567
+ @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
568
+ <kendo-grid-filter-menu
569
+ [column]="getColumnComponent(column)"
570
+ [filter]="filter"
571
+ [tabIndex]="tabIndex">
572
+ </kendo-grid-filter-menu>
573
+ }
574
+ @if (showColumnMenu(column)) {
575
+ <kendo-grid-column-menu
576
+ [standalone]="false"
577
+ [settings]="columnMenuSettings"
578
+ [column]="column"
579
+ [columnMenuTemplate]="columnMenuTemplate"
580
+ [sort]="sort"
581
+ [filter]="filter"
582
+ [sortable]="sortable"
583
+ [tabIndex]="tabIndex">
584
+ </kendo-grid-column-menu>
585
+ }
586
+ </span>
587
+ }
588
+ @if (isInteractive(getColumnComponent(column), 'sortable')) {
589
+ <span class="k-cell-inner">
590
+ <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
591
+ <ng-template
584
592
  [templateContext]="{
585
593
  templateRef: column.headerTemplateRef,
586
594
  columnIndex: column.leafIndex,
587
595
  column: column,
588
596
  $implicit: column
589
597
  }">
590
- </ng-template>
591
- <ng-container *ngIf="!column.headerTemplateRef">
592
- <span class="k-column-title">{{column.displayTitle}}</span>
593
- </ng-container>
594
- <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
595
- <kendo-icon-wrapper
596
- *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
597
- role="note" [attr.aria-label]="sortableLabel"
598
- name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
599
- [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
600
- ></kendo-icon-wrapper>
601
- </span>
602
- <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
603
- </span>
604
- <kendo-grid-filter-menu
605
- *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
606
- [column]="getColumnComponent(column)"
607
- [filter]="filter"
608
- [tabIndex]="tabIndex">
609
- </kendo-grid-filter-menu>
610
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
611
- [standalone]="false"
612
- [settings]="columnMenuSettings"
613
- [column]="column"
614
- [columnMenuTemplate]="columnMenuTemplate"
615
- [sort]="sort"
616
- [filter]="filter"
617
- [sortable]="sortable"
618
- [tabIndex]="tabIndex">
619
- </kendo-grid-column-menu>
598
+ </ng-template>
599
+ @if (!column.headerTemplateRef) {
600
+ <span class="k-column-title">{{column.displayTitle}}</span>
601
+ }
602
+ <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
603
+ @if (sortDescriptor(getColumnComponent(column).field).dir) {
604
+ <kendo-icon-wrapper
605
+ role="note" [attr.aria-label]="sortableLabel"
606
+ name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
607
+ [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
608
+ ></kendo-icon-wrapper>
609
+ }
620
610
  </span>
621
- </ng-container>
622
- <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
623
- <kendo-checkbox
624
- [attr.id]="selectAllCheckboxId()"
625
- [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
626
- kendoGridSelectAllCheckbox
627
- kendoGridFocusable
628
- ></kendo-checkbox>
629
- </ng-container>
611
+ @if (showSortNumbering(getColumnComponent(column))) {
612
+ <span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
613
+ }
614
+ </span>
615
+ @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
616
+ <kendo-grid-filter-menu
617
+ [column]="getColumnComponent(column)"
618
+ [filter]="filter"
619
+ [tabIndex]="tabIndex">
620
+ </kendo-grid-filter-menu>
621
+ }
622
+ @if (showColumnMenu(column)) {
623
+ <kendo-grid-column-menu
624
+ [standalone]="false"
625
+ [settings]="columnMenuSettings"
626
+ [column]="column"
627
+ [columnMenuTemplate]="columnMenuTemplate"
628
+ [sort]="sort"
629
+ [filter]="filter"
630
+ [sortable]="sortable"
631
+ [tabIndex]="tabIndex">
632
+ </kendo-grid-column-menu>
633
+ }
634
+ </span>
635
+ }
636
+ @if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
637
+ <kendo-checkbox
638
+ [attr.id]="selectAllCheckboxId()"
639
+ [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
640
+ kendoGridSelectAllCheckbox
641
+ kendoGridFocusable
642
+ ></kendo-checkbox>
643
+ }
644
+ @if (resizable) {
630
645
  <span kendoGridColumnHandle
631
- kendoDraggable
632
- class="k-column-resizer"
633
- *ngIf="resizable"
634
- [isLast]="last"
635
- [column]="column"
636
- [columns]="columns">
646
+ kendoDraggable
647
+ class="k-column-resizer"
648
+ [isLast]="last"
649
+ [column]="column"
650
+ [columns]="columns">
637
651
  </span>
652
+ }
638
653
  </th>
639
- <th *ngIf="isColumnGroupComponent(column)"
640
- kendoGridLogicalCell
641
- [logicalRowIndex]="levelIndex"
642
- [logicalColIndex]="logicalColumnIndex(column)"
643
- [rowSpan]="column.rowspan(totalColumnLevels)"
644
- [colSpan]="column.colspan"
645
- [headerLabelText]="column.title || getColumnComponent(column).field"
646
- kendoDropTarget
647
- kendoDraggable
648
- kendoDraggableColumn
649
- [enableDrag]="shouldActivate(column)"
654
+ }
655
+ @if (isColumnGroupComponent(column)) {
656
+ <th
657
+ kendoGridLogicalCell
658
+ [logicalRowIndex]="levelIndex"
659
+ [logicalColIndex]="logicalColumnIndex(column)"
660
+ [rowSpan]="column.rowspan(totalColumnLevels)"
661
+ [colSpan]="column.colspan"
662
+ [headerLabelText]="column.title || getColumnComponent(column).field"
663
+ kendoDropTarget
664
+ kendoDraggable
665
+ kendoDraggableColumn
666
+ [enableDrag]="shouldActivate(column)"
650
667
  [context]="{
651
668
  type: 'columnGroup',
652
669
  column: column,
653
670
  hint: column.title,
654
671
  lastColumn: last && columnIndex === 0
655
672
  }"
656
- class="k-header k-table-th"
657
- [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
658
- [class.k-filterable]="showColumnMenu(column)"
659
- [class.k-grid-content-sticky]="column.sticky"
660
- [ngClass]="column.headerClass"
661
- [ngStyle]="column.headerStyle"
662
- [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
663
- [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
664
- [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
665
- [attr.rowspan]="column.rowspan(totalColumnLevels)"
666
- [attr.colspan]="column.colspan">
667
- <span class="k-cell-inner">
668
- <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
669
- <ng-template
673
+ class="k-header k-table-th"
674
+ [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
675
+ [class.k-filterable]="showColumnMenu(column)"
676
+ [class.k-grid-content-sticky]="column.sticky"
677
+ [ngClass]="column.headerClass"
678
+ [ngStyle]="column.headerStyle"
679
+ [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
680
+ [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
681
+ [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
682
+ [attr.rowspan]="column.rowspan(totalColumnLevels)"
683
+ [attr.colspan]="column.colspan">
684
+ <span class="k-cell-inner">
685
+ <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
686
+ <ng-template
670
687
  [templateContext]="{
671
688
  templateRef: column.headerTemplateRef,
672
689
  columnIndex: lockedColumnsCount + columnIndex,
673
690
  column: column,
674
691
  $implicit: column
675
692
  }">
676
- </ng-template>
677
- <ng-container *ngIf="!column.headerTemplateRef">
678
- <span class="k-column-title">{{column.displayTitle}}</span>
679
- </ng-container>
680
- </span>
681
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
682
- [standalone]="false"
683
- [settings]="columnMenuSettings"
684
- [column]="column"
685
- [columnMenuTemplate]="columnMenuTemplate">
686
- </kendo-grid-column-menu>
693
+ </ng-template>
694
+ @if (!column.headerTemplateRef) {
695
+ <span class="k-column-title">{{column.displayTitle}}</span>
696
+ }
687
697
  </span>
688
- <span kendoGridColumnHandle
689
- kendoDraggable
690
- class="k-column-resizer"
691
- *ngIf="resizable"
692
- [isLast]="last"
698
+ @if (showColumnMenu(column)) {
699
+ <kendo-grid-column-menu
700
+ [standalone]="false"
701
+ [settings]="columnMenuSettings"
693
702
  [column]="column"
694
- [columns]="columns">
703
+ [columnMenuTemplate]="columnMenuTemplate">
704
+ </kendo-grid-column-menu>
705
+ }
706
+ </span>
707
+ @if (resizable) {
708
+ <span kendoGridColumnHandle
709
+ kendoDraggable
710
+ class="k-column-resizer"
711
+ [isLast]="last"
712
+ [column]="column"
713
+ [columns]="columns">
695
714
  </span>
715
+ }
696
716
  </th>
697
- </ng-container>
698
- </tr>
699
- <tr *ngIf="showFilterRow"
717
+ }
718
+ }
719
+ </tr>
720
+ }
721
+ @if (showFilterRow) {
722
+ <tr
700
723
  kendoGridFilterRow
701
- [columns]="leafColumns"
702
- [filter]="filter"
703
- [groups]="groups"
704
- [detailTemplate]="detailTemplate"
705
- [lockedColumnsCount]="lockedColumnsCount"
724
+ [columns]="leafColumns"
725
+ [filter]="filter"
726
+ [groups]="groups"
727
+ [detailTemplate]="detailTemplate"
728
+ [lockedColumnsCount]="lockedColumnsCount"
706
729
  kendoGridLogicalRow
707
- [logicalRowIndex]="totalColumnLevels + 1"
708
- [logicalSlaveRow]="lockedColumnsCount > 0"
709
- [logicalCellsCount]="columns.length"
710
- [logicalSlaveCellsCount]="unlockedColumnsCount"
711
- [totalColumns]="totalColumns"></tr>
712
- `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
730
+ [logicalRowIndex]="totalColumnLevels + 1"
731
+ [logicalSlaveRow]="lockedColumnsCount > 0"
732
+ [logicalCellsCount]="columns.length"
733
+ [logicalSlaveCellsCount]="unlockedColumnsCount"
734
+ [totalColumns]="totalColumns"></tr>
735
+ }
736
+ `, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
713
737
  }
714
738
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, decorators: [{
715
739
  type: Component,
716
740
  args: [{
717
741
  selector: '[kendoGridHeader]',
718
742
  template: `
719
- <tr *ngFor="let i of columnLevels; let levelIndex = index"
743
+ @for (i of columnLevels; track i; let levelIndex = $index) {
744
+ <tr
720
745
  kendoGridLogicalRow
721
- [logicalRowIndex]="levelIndex"
722
- [logicalSlaveRow]="lockedColumnsCount > 0"
723
- [logicalCellsCount]="columns.length"
724
- [logicalSlaveCellsCount]="unlockedColumnsCount"
725
- [totalColumns]="totalColumns">
726
- <th
746
+ [logicalRowIndex]="levelIndex"
747
+ [logicalSlaveRow]="lockedColumnsCount > 0"
748
+ [logicalCellsCount]="columns.length"
749
+ [logicalSlaveCellsCount]="unlockedColumnsCount"
750
+ [totalColumns]="totalColumns">
751
+ @for (g of groups; track g) {
752
+ <th
727
753
  class="k-group-cell k-header k-table-th"
728
754
  role="presentation"
729
- *ngFor="let g of groups">
730
- </th>
731
- <th class="k-hierarchy-cell k-header k-table-th"
755
+ >
756
+ </th>
757
+ }
758
+ @if (detailTemplate?.templateRef && !isStacked) {
759
+ <th class="k-hierarchy-cell k-header k-table-th"
732
760
  role="presentation"
733
- *ngIf="detailTemplate?.templateRef && !isStacked"
734
- >
735
- </th>
736
- <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
737
- <th *ngIf="!isColumnGroupComponent(column)"
738
- kendoGridLogicalCell
739
- [logicalRowIndex]="levelIndex"
740
- [logicalColIndex]="logicalColumnIndex(column)"
741
- [headerLabelText]="column.title || getColumnComponent(column).field"
742
- [colSpan]="column.colspan"
743
- [rowSpan]="column.rowspan(totalColumnLevels)"
744
- role="columnheader"
745
- aria-selected="false"
746
- [attr.aria-sort]="sortState(getColumnComponent(column))"
747
- [class.k-sorted]="sortState(getColumnComponent(column))"
748
- (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
749
- kendoDropTarget
750
- kendoDraggable
751
- kendoDraggableColumn
752
- [enableDrag]="shouldActivate(column)"
761
+ >
762
+ </th>
763
+ }
764
+ @for (column of columnsForLevel(levelIndex); track column; let columnIndex = $index; let last = $last) {
765
+ @if (!isColumnGroupComponent(column)) {
766
+ <th
767
+ kendoGridLogicalCell
768
+ [logicalRowIndex]="levelIndex"
769
+ [logicalColIndex]="logicalColumnIndex(column)"
770
+ [headerLabelText]="column.title || getColumnComponent(column).field"
771
+ [colSpan]="column.colspan"
772
+ [rowSpan]="column.rowspan(totalColumnLevels)"
773
+ role="columnheader"
774
+ aria-selected="false"
775
+ [attr.aria-sort]="sortState(getColumnComponent(column))"
776
+ [class.k-sorted]="sortState(getColumnComponent(column))"
777
+ (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
778
+ kendoDropTarget
779
+ kendoDraggable
780
+ kendoDraggableColumn
781
+ [enableDrag]="shouldActivate(column)"
753
782
  [context]="{
754
783
  field: getColumnComponent(column).field,
755
784
  type: 'column',
@@ -757,188 +786,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
757
786
  hint: column.title || getColumnComponent(column).field,
758
787
  lastColumn: last && columnIndex === 0
759
788
  }"
760
- class="k-header k-table-th"
761
- [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
762
- [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
763
- [class.k-grid-header-sticky]="column.sticky"
764
- [ngClass]="column.headerClass"
765
- [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
766
- [attr.rowspan]="column.rowspan(totalColumnLevels)"
767
- [attr.colspan]="column.colspan"
768
- [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
769
- [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
770
- [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
771
- <ng-container *ngIf="!isInteractive(getColumnComponent(column), 'sortable')">
772
- <span class="k-cell-inner">
773
- <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
774
- <ng-template
789
+ class="k-header k-table-th"
790
+ [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
791
+ [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
792
+ [class.k-grid-header-sticky]="column.sticky"
793
+ [ngClass]="column.headerClass"
794
+ [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
795
+ [attr.rowspan]="column.rowspan(totalColumnLevels)"
796
+ [attr.colspan]="column.colspan"
797
+ [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
798
+ [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
799
+ [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
800
+ @if (!isInteractive(getColumnComponent(column), 'sortable')) {
801
+ <span class="k-cell-inner">
802
+ <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
803
+ <ng-template
775
804
  [templateContext]="{
776
805
  templateRef: column.headerTemplateRef,
777
806
  columnIndex: column.leafIndex,
778
807
  column: column,
779
808
  $implicit: column
780
809
  }">
781
- </ng-template>
782
- <ng-container *ngIf="!column.headerTemplateRef">
783
- <span class="k-column-title">{{column.displayTitle}}</span>
784
- </ng-container>
785
- </span>
786
- <kendo-grid-filter-menu
787
- *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
788
- [column]="getColumnComponent(column)"
789
- [filter]="filter"
790
- [tabIndex]="tabIndex">
791
- </kendo-grid-filter-menu>
792
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
793
- [standalone]="false"
794
- [settings]="columnMenuSettings"
795
- [column]="column"
796
- [columnMenuTemplate]="columnMenuTemplate"
797
- [sort]="sort"
798
- [filter]="filter"
799
- [sortable]="sortable"
800
- [tabIndex]="tabIndex">
801
- </kendo-grid-column-menu>
802
- </span>
803
- </ng-container>
804
- <ng-container *ngIf="isInteractive(getColumnComponent(column), 'sortable')">
805
- <span class="k-cell-inner">
806
- <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
807
- <ng-template
810
+ </ng-template>
811
+ @if (!column.headerTemplateRef) {
812
+ <span class="k-column-title">{{column.displayTitle}}</span>
813
+ }
814
+ </span>
815
+ @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
816
+ <kendo-grid-filter-menu
817
+ [column]="getColumnComponent(column)"
818
+ [filter]="filter"
819
+ [tabIndex]="tabIndex">
820
+ </kendo-grid-filter-menu>
821
+ }
822
+ @if (showColumnMenu(column)) {
823
+ <kendo-grid-column-menu
824
+ [standalone]="false"
825
+ [settings]="columnMenuSettings"
826
+ [column]="column"
827
+ [columnMenuTemplate]="columnMenuTemplate"
828
+ [sort]="sort"
829
+ [filter]="filter"
830
+ [sortable]="sortable"
831
+ [tabIndex]="tabIndex">
832
+ </kendo-grid-column-menu>
833
+ }
834
+ </span>
835
+ }
836
+ @if (isInteractive(getColumnComponent(column), 'sortable')) {
837
+ <span class="k-cell-inner">
838
+ <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
839
+ <ng-template
808
840
  [templateContext]="{
809
841
  templateRef: column.headerTemplateRef,
810
842
  columnIndex: column.leafIndex,
811
843
  column: column,
812
844
  $implicit: column
813
845
  }">
814
- </ng-template>
815
- <ng-container *ngIf="!column.headerTemplateRef">
816
- <span class="k-column-title">{{column.displayTitle}}</span>
817
- </ng-container>
818
- <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
819
- <kendo-icon-wrapper
820
- *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
821
- role="note" [attr.aria-label]="sortableLabel"
822
- name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
823
- [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
824
- ></kendo-icon-wrapper>
825
- </span>
826
- <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
827
- </span>
828
- <kendo-grid-filter-menu
829
- *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
830
- [column]="getColumnComponent(column)"
831
- [filter]="filter"
832
- [tabIndex]="tabIndex">
833
- </kendo-grid-filter-menu>
834
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
835
- [standalone]="false"
836
- [settings]="columnMenuSettings"
837
- [column]="column"
838
- [columnMenuTemplate]="columnMenuTemplate"
839
- [sort]="sort"
840
- [filter]="filter"
841
- [sortable]="sortable"
842
- [tabIndex]="tabIndex">
843
- </kendo-grid-column-menu>
846
+ </ng-template>
847
+ @if (!column.headerTemplateRef) {
848
+ <span class="k-column-title">{{column.displayTitle}}</span>
849
+ }
850
+ <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
851
+ @if (sortDescriptor(getColumnComponent(column).field).dir) {
852
+ <kendo-icon-wrapper
853
+ role="note" [attr.aria-label]="sortableLabel"
854
+ name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
855
+ [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
856
+ ></kendo-icon-wrapper>
857
+ }
844
858
  </span>
845
- </ng-container>
846
- <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
847
- <kendo-checkbox
848
- [attr.id]="selectAllCheckboxId()"
849
- [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
850
- kendoGridSelectAllCheckbox
851
- kendoGridFocusable
852
- ></kendo-checkbox>
853
- </ng-container>
859
+ @if (showSortNumbering(getColumnComponent(column))) {
860
+ <span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
861
+ }
862
+ </span>
863
+ @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
864
+ <kendo-grid-filter-menu
865
+ [column]="getColumnComponent(column)"
866
+ [filter]="filter"
867
+ [tabIndex]="tabIndex">
868
+ </kendo-grid-filter-menu>
869
+ }
870
+ @if (showColumnMenu(column)) {
871
+ <kendo-grid-column-menu
872
+ [standalone]="false"
873
+ [settings]="columnMenuSettings"
874
+ [column]="column"
875
+ [columnMenuTemplate]="columnMenuTemplate"
876
+ [sort]="sort"
877
+ [filter]="filter"
878
+ [sortable]="sortable"
879
+ [tabIndex]="tabIndex">
880
+ </kendo-grid-column-menu>
881
+ }
882
+ </span>
883
+ }
884
+ @if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
885
+ <kendo-checkbox
886
+ [attr.id]="selectAllCheckboxId()"
887
+ [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
888
+ kendoGridSelectAllCheckbox
889
+ kendoGridFocusable
890
+ ></kendo-checkbox>
891
+ }
892
+ @if (resizable) {
854
893
  <span kendoGridColumnHandle
855
- kendoDraggable
856
- class="k-column-resizer"
857
- *ngIf="resizable"
858
- [isLast]="last"
859
- [column]="column"
860
- [columns]="columns">
894
+ kendoDraggable
895
+ class="k-column-resizer"
896
+ [isLast]="last"
897
+ [column]="column"
898
+ [columns]="columns">
861
899
  </span>
900
+ }
862
901
  </th>
863
- <th *ngIf="isColumnGroupComponent(column)"
864
- kendoGridLogicalCell
865
- [logicalRowIndex]="levelIndex"
866
- [logicalColIndex]="logicalColumnIndex(column)"
867
- [rowSpan]="column.rowspan(totalColumnLevels)"
868
- [colSpan]="column.colspan"
869
- [headerLabelText]="column.title || getColumnComponent(column).field"
870
- kendoDropTarget
871
- kendoDraggable
872
- kendoDraggableColumn
873
- [enableDrag]="shouldActivate(column)"
902
+ }
903
+ @if (isColumnGroupComponent(column)) {
904
+ <th
905
+ kendoGridLogicalCell
906
+ [logicalRowIndex]="levelIndex"
907
+ [logicalColIndex]="logicalColumnIndex(column)"
908
+ [rowSpan]="column.rowspan(totalColumnLevels)"
909
+ [colSpan]="column.colspan"
910
+ [headerLabelText]="column.title || getColumnComponent(column).field"
911
+ kendoDropTarget
912
+ kendoDraggable
913
+ kendoDraggableColumn
914
+ [enableDrag]="shouldActivate(column)"
874
915
  [context]="{
875
916
  type: 'columnGroup',
876
917
  column: column,
877
918
  hint: column.title,
878
919
  lastColumn: last && columnIndex === 0
879
920
  }"
880
- class="k-header k-table-th"
881
- [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
882
- [class.k-filterable]="showColumnMenu(column)"
883
- [class.k-grid-content-sticky]="column.sticky"
884
- [ngClass]="column.headerClass"
885
- [ngStyle]="column.headerStyle"
886
- [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
887
- [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
888
- [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
889
- [attr.rowspan]="column.rowspan(totalColumnLevels)"
890
- [attr.colspan]="column.colspan">
891
- <span class="k-cell-inner">
892
- <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
893
- <ng-template
921
+ class="k-header k-table-th"
922
+ [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
923
+ [class.k-filterable]="showColumnMenu(column)"
924
+ [class.k-grid-content-sticky]="column.sticky"
925
+ [ngClass]="column.headerClass"
926
+ [ngStyle]="column.headerStyle"
927
+ [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
928
+ [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
929
+ [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
930
+ [attr.rowspan]="column.rowspan(totalColumnLevels)"
931
+ [attr.colspan]="column.colspan">
932
+ <span class="k-cell-inner">
933
+ <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
934
+ <ng-template
894
935
  [templateContext]="{
895
936
  templateRef: column.headerTemplateRef,
896
937
  columnIndex: lockedColumnsCount + columnIndex,
897
938
  column: column,
898
939
  $implicit: column
899
940
  }">
900
- </ng-template>
901
- <ng-container *ngIf="!column.headerTemplateRef">
902
- <span class="k-column-title">{{column.displayTitle}}</span>
903
- </ng-container>
904
- </span>
905
- <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
906
- [standalone]="false"
907
- [settings]="columnMenuSettings"
908
- [column]="column"
909
- [columnMenuTemplate]="columnMenuTemplate">
910
- </kendo-grid-column-menu>
941
+ </ng-template>
942
+ @if (!column.headerTemplateRef) {
943
+ <span class="k-column-title">{{column.displayTitle}}</span>
944
+ }
911
945
  </span>
912
- <span kendoGridColumnHandle
913
- kendoDraggable
914
- class="k-column-resizer"
915
- *ngIf="resizable"
916
- [isLast]="last"
946
+ @if (showColumnMenu(column)) {
947
+ <kendo-grid-column-menu
948
+ [standalone]="false"
949
+ [settings]="columnMenuSettings"
917
950
  [column]="column"
918
- [columns]="columns">
951
+ [columnMenuTemplate]="columnMenuTemplate">
952
+ </kendo-grid-column-menu>
953
+ }
954
+ </span>
955
+ @if (resizable) {
956
+ <span kendoGridColumnHandle
957
+ kendoDraggable
958
+ class="k-column-resizer"
959
+ [isLast]="last"
960
+ [column]="column"
961
+ [columns]="columns">
919
962
  </span>
963
+ }
920
964
  </th>
921
- </ng-container>
922
- </tr>
923
- <tr *ngIf="showFilterRow"
965
+ }
966
+ }
967
+ </tr>
968
+ }
969
+ @if (showFilterRow) {
970
+ <tr
924
971
  kendoGridFilterRow
925
- [columns]="leafColumns"
926
- [filter]="filter"
927
- [groups]="groups"
928
- [detailTemplate]="detailTemplate"
929
- [lockedColumnsCount]="lockedColumnsCount"
972
+ [columns]="leafColumns"
973
+ [filter]="filter"
974
+ [groups]="groups"
975
+ [detailTemplate]="detailTemplate"
976
+ [lockedColumnsCount]="lockedColumnsCount"
930
977
  kendoGridLogicalRow
931
- [logicalRowIndex]="totalColumnLevels + 1"
932
- [logicalSlaveRow]="lockedColumnsCount > 0"
933
- [logicalCellsCount]="columns.length"
934
- [logicalSlaveCellsCount]="unlockedColumnsCount"
935
- [totalColumns]="totalColumns"></tr>
936
- `,
978
+ [logicalRowIndex]="totalColumnLevels + 1"
979
+ [logicalSlaveRow]="lockedColumnsCount > 0"
980
+ [logicalCellsCount]="columns.length"
981
+ [logicalSlaveCellsCount]="unlockedColumnsCount"
982
+ [totalColumns]="totalColumns"></tr>
983
+ }
984
+ `,
937
985
  standalone: true,
938
986
  imports: [
939
- NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective,
940
- NgClass, NgStyle, TemplateContextDirective, FilterMenuComponent, ColumnMenuComponent, IconWrapperComponent, SelectAllCheckboxDirective,
941
- FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent
987
+ LogicalRowDirective,
988
+ LogicalCellDirective,
989
+ DropTargetDirective,
990
+ DraggableDirective,
991
+ DraggableColumnDirective,
992
+ NgClass,
993
+ NgStyle,
994
+ TemplateContextDirective,
995
+ FilterMenuComponent,
996
+ ColumnMenuComponent,
997
+ IconWrapperComponent,
998
+ SelectAllCheckboxDirective,
999
+ FocusableDirective,
1000
+ ColumnHandleDirective,
1001
+ FilterRowComponent,
1002
+ CheckBoxComponent
942
1003
  ]
943
1004
  }]
944
1005
  }], ctorParameters: () => [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.NavigationService }, { type: i0.NgZone }], propDecorators: { totalColumnLevels: [{