@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.
- package/esm2022/column-menu/column-list.component.mjs +75 -69
- package/esm2022/column-menu/column-menu-autosize-all.component.mjs +12 -11
- package/esm2022/column-menu/column-menu-autosize.component.mjs +12 -11
- package/esm2022/column-menu/column-menu-item.component.mjs +137 -57
- package/esm2022/column-menu/column-menu.component.mjs +145 -122
- package/esm2022/editing/add-command.directive.mjs +27 -17
- package/esm2022/editing/base-command.directive.mjs +27 -17
- package/esm2022/editing/cancel-command.directive.mjs +27 -17
- package/esm2022/editing/edit-command.directive.mjs +27 -17
- package/esm2022/editing/remove-command.directive.mjs +27 -17
- package/esm2022/editing/save-command.directive.mjs +27 -17
- package/esm2022/excel/excel-command.directive.mjs +27 -17
- package/esm2022/filtering/cell/filter-cell-operators.component.mjs +20 -17
- package/esm2022/filtering/cell/filter-cell.component.mjs +35 -33
- package/esm2022/filtering/filter-row.component.mjs +26 -23
- package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +32 -29
- package/esm2022/filtering/menu/date-filter-menu.component.mjs +52 -49
- package/esm2022/filtering/menu/filter-menu-container.component.mjs +75 -73
- package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +50 -47
- package/esm2022/filtering/menu/string-filter-menu.component.mjs +36 -33
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pdf/pdf-command.directive.mjs +27 -17
- package/esm2022/rendering/cell.component.mjs +167 -145
- package/esm2022/rendering/common/col-group.component.mjs +10 -8
- package/esm2022/rendering/header/header.component.mjs +371 -331
- package/esm2022/rendering/list.component.mjs +185 -158
- package/esm2022/rendering/table-body.component.mjs +199 -169
- package/esm2022/rendering/toolbar/toolbar.component.mjs +13 -11
- package/esm2022/treelist.component.mjs +893 -849
- package/fesm2022/progress-kendo-angular-treelist.mjs +2746 -2356
- package/package.json +18 -18
- package/schematics/ngAdd/index.js +7 -3
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
6
|
import { Component, ChangeDetectorRef, HostBinding, Input, QueryList, ViewChildren, TemplateRef } from '@angular/core';
|
|
7
|
-
import {
|
|
7
|
+
import { NgClass, NgStyle } from '@angular/common';
|
|
8
8
|
import { Subscription, of, merge } from "rxjs";
|
|
9
9
|
import { filter, map, switchMap, tap, takeUntil } from 'rxjs/operators';
|
|
10
10
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
@@ -474,31 +474,33 @@ export class HeaderComponent {
|
|
|
474
474
|
});
|
|
475
475
|
}
|
|
476
476
|
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.SelectionService }, { token: i8.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i9.ColumnInfoService }, { token: i10.ContextService }, { token: i11.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
478
|
-
|
|
477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HeaderComponent, isStandalone: true, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-header": "this.headerClass", "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: `
|
|
478
|
+
@for (i of columnLevels; track $index; let levelIndex = $index) {
|
|
479
|
+
<tr role="row"
|
|
479
480
|
kendoTreeListLogicalRow
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
481
|
+
[logicalRowIndex]="levelIndex"
|
|
482
|
+
[logicalSlaveRow]="lockedColumnsCount > 0"
|
|
483
|
+
[logicalCellsCount]="columns.length"
|
|
484
|
+
[totalColumns]="totalColumns"
|
|
485
|
+
[logicalSlaveCellsCount]="unlockedColumnsCount">
|
|
486
|
+
@for (column of columnsForLevel(levelIndex); track $index; let columnIndex = $index; let last = $last) {
|
|
487
|
+
@if (!isColumnGroupComponent(column)) {
|
|
488
|
+
<th
|
|
489
|
+
kendoTreeListLogicalCell
|
|
490
|
+
[logicalRowIndex]="levelIndex"
|
|
491
|
+
[logicalColIndex]="logicalColumnIndex(column)"
|
|
492
|
+
[headerLabelText]="column.title || getColumnComponent(column).field"
|
|
493
|
+
[colSpan]="column.colspan"
|
|
494
|
+
[rowSpan]="column.rowspan(totalColumnLevels)"
|
|
495
|
+
role="columnheader"
|
|
496
|
+
aria-selected="false"
|
|
497
|
+
[attr.aria-sort]="sortState(getColumnComponent(column))"
|
|
498
|
+
[class.k-sorted]="sortState(getColumnComponent(column))"
|
|
499
|
+
(keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
|
|
500
|
+
kendoDropTarget
|
|
501
|
+
kendoDraggable
|
|
502
|
+
kendoDraggableColumn
|
|
503
|
+
[enableDrag]="shouldActivate(column)"
|
|
502
504
|
[context]="{
|
|
503
505
|
field: getColumnComponent(column).field,
|
|
504
506
|
type: 'column',
|
|
@@ -506,207 +508,228 @@ export class HeaderComponent {
|
|
|
506
508
|
hint: column.title || getColumnComponent(column).field,
|
|
507
509
|
lastColumn: last && columnIndex === 0
|
|
508
510
|
}"
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
511
|
+
class="k-header k-table-th"
|
|
512
|
+
[class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
|
|
513
|
+
[class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
|
|
514
|
+
[ngClass]="column.headerClass"
|
|
515
|
+
[ngStyle]="column.headerStyle"
|
|
516
|
+
[attr.rowspan]="column.rowspan(totalColumnLevels)"
|
|
517
|
+
[attr.colspan]="column.colspan"
|
|
518
|
+
[attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
|
|
519
|
+
[attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
|
|
520
|
+
[attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
|
|
521
|
+
@if (!isInteractive(getColumnComponent(column), 'sortable')) {
|
|
522
|
+
<span class="k-cell-inner">
|
|
523
|
+
<span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
|
|
524
|
+
<ng-template
|
|
523
525
|
[templateContext]="{
|
|
524
526
|
templateRef: column.headerTemplateRef,
|
|
525
527
|
columnIndex: column.leafIndex,
|
|
526
528
|
column: column,
|
|
527
529
|
$implicit: column
|
|
528
530
|
}">
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
531
|
+
</ng-template>
|
|
532
|
+
@if (!column.headerTemplateRef) {
|
|
533
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
534
|
+
}
|
|
535
|
+
</span>
|
|
536
|
+
@if (showFilterMenu && isFilterable(getColumnComponent(column))) {
|
|
537
|
+
<kendo-treelist-filter-menu
|
|
538
|
+
[column]="getColumnComponent(column)"
|
|
539
|
+
[filter]="filter"
|
|
540
|
+
[tabIndex]="tabIndex">
|
|
541
|
+
</kendo-treelist-filter-menu>
|
|
542
|
+
}
|
|
543
|
+
@if (showColumnMenu(column)) {
|
|
544
|
+
<kendo-treelist-column-menu
|
|
545
|
+
[standalone]="false"
|
|
546
|
+
[settings]="columnMenuSettings"
|
|
547
|
+
[column]="column"
|
|
548
|
+
[columnMenuTemplate]="columnMenuTemplate"
|
|
549
|
+
[sort]="sort"
|
|
550
|
+
[filter]="filter"
|
|
551
|
+
[sortable]="sortable"
|
|
552
|
+
[tabIndex]="tabIndex">
|
|
553
|
+
</kendo-treelist-column-menu>
|
|
554
|
+
}
|
|
555
|
+
</span>
|
|
556
|
+
}
|
|
557
|
+
@if (isInteractive(getColumnComponent(column), 'sortable')) {
|
|
558
|
+
<span class="k-cell-inner">
|
|
559
|
+
<span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
|
|
560
|
+
<ng-template
|
|
556
561
|
[templateContext]="{
|
|
557
562
|
templateRef: column.headerTemplateRef,
|
|
558
563
|
columnIndex: column.leafIndex,
|
|
559
564
|
column: column,
|
|
560
565
|
$implicit: column
|
|
561
566
|
}">
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
<span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
575
|
-
</span>
|
|
576
|
-
<kendo-treelist-filter-menu
|
|
577
|
-
*ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
|
|
578
|
-
[column]="getColumnComponent(column)"
|
|
579
|
-
[filter]="filter"
|
|
580
|
-
[tabIndex]="tabIndex">
|
|
581
|
-
</kendo-treelist-filter-menu>
|
|
582
|
-
<kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
|
|
583
|
-
[standalone]="false"
|
|
584
|
-
[settings]="columnMenuSettings"
|
|
585
|
-
[column]="column"
|
|
586
|
-
[columnMenuTemplate]="columnMenuTemplate"
|
|
587
|
-
[sort]="sort"
|
|
588
|
-
[filter]="filter"
|
|
589
|
-
[sortable]="sortable"
|
|
590
|
-
[tabIndex]="tabIndex">
|
|
591
|
-
</kendo-treelist-column-menu>
|
|
567
|
+
</ng-template>
|
|
568
|
+
@if (!column.headerTemplateRef) {
|
|
569
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
570
|
+
}
|
|
571
|
+
<span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
|
|
572
|
+
@if (sortDescriptor(getColumnComponent(column).field).dir) {
|
|
573
|
+
<kendo-icon-wrapper
|
|
574
|
+
role="note" [attr.aria-label]="sortableLabel"
|
|
575
|
+
name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
|
|
576
|
+
[svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
|
|
577
|
+
></kendo-icon-wrapper>
|
|
578
|
+
}
|
|
592
579
|
</span>
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
580
|
+
@if (showSortNumbering(getColumnComponent(column))) {
|
|
581
|
+
<span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
582
|
+
}
|
|
583
|
+
</span>
|
|
584
|
+
@if (showFilterMenu && isFilterable(getColumnComponent(column))) {
|
|
585
|
+
<kendo-treelist-filter-menu
|
|
586
|
+
[column]="getColumnComponent(column)"
|
|
587
|
+
[filter]="filter"
|
|
588
|
+
[tabIndex]="tabIndex">
|
|
589
|
+
</kendo-treelist-filter-menu>
|
|
590
|
+
}
|
|
591
|
+
@if (showColumnMenu(column)) {
|
|
592
|
+
<kendo-treelist-column-menu
|
|
593
|
+
[standalone]="false"
|
|
594
|
+
[settings]="columnMenuSettings"
|
|
595
|
+
[column]="column"
|
|
596
|
+
[columnMenuTemplate]="columnMenuTemplate"
|
|
597
|
+
[sort]="sort"
|
|
598
|
+
[filter]="filter"
|
|
599
|
+
[sortable]="sortable"
|
|
600
|
+
[tabIndex]="tabIndex">
|
|
601
|
+
</kendo-treelist-column-menu>
|
|
602
|
+
}
|
|
603
|
+
</span>
|
|
604
|
+
}
|
|
605
|
+
@if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
|
|
606
|
+
<kendo-checkbox
|
|
607
|
+
[attr.id]="selectAllCheckboxId()"
|
|
608
|
+
[inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
|
|
609
|
+
kendoTreeListSelectAllCheckbox
|
|
610
|
+
kendoTreeListFocusable
|
|
611
|
+
(checkedStateChange)="selectAllChange($event)"
|
|
612
|
+
></kendo-checkbox>
|
|
613
|
+
}
|
|
614
|
+
@if (resizable) {
|
|
603
615
|
<span kendoTreeListColumnHandle
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
[columns]="columns">
|
|
616
|
+
kendoDraggable
|
|
617
|
+
class="k-column-resizer"
|
|
618
|
+
[column]="column"
|
|
619
|
+
[columns]="columns">
|
|
609
620
|
</span>
|
|
621
|
+
}
|
|
610
622
|
</th>
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
623
|
+
}
|
|
624
|
+
@if (isColumnGroupComponent(column)) {
|
|
625
|
+
<th
|
|
626
|
+
kendoTreeListLogicalCell
|
|
627
|
+
[logicalRowIndex]="levelIndex"
|
|
628
|
+
[logicalColIndex]="logicalColumnIndex(column)"
|
|
629
|
+
[rowSpan]="column.rowspan(totalColumnLevels)"
|
|
630
|
+
[colSpan]="column.colspan"
|
|
631
|
+
[headerLabelText]="column.title || getColumnComponent(column).field"
|
|
632
|
+
kendoDropTarget
|
|
633
|
+
kendoDraggable
|
|
634
|
+
kendoDraggableColumn
|
|
635
|
+
[enableDrag]="shouldActivate(column)"
|
|
622
636
|
[context]="{
|
|
623
637
|
type: 'columnGroup',
|
|
624
638
|
column: column,
|
|
625
639
|
hint: column.title,
|
|
626
640
|
lastColumn: last && columnIndex === 0
|
|
627
641
|
}"
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
642
|
+
class="k-header k-table-th"
|
|
643
|
+
[class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
|
|
644
|
+
[attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
|
|
645
|
+
[attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
|
|
646
|
+
[attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
|
|
647
|
+
[ngClass]="column.headerClass"
|
|
648
|
+
[ngStyle]="column.headerStyle"
|
|
649
|
+
[attr.rowspan]="column.rowspan(totalColumnLevels)"
|
|
650
|
+
[attr.colspan]="column.colspan">
|
|
651
|
+
<span class="k-cell-inner">
|
|
652
|
+
<span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
|
|
653
|
+
<ng-template
|
|
640
654
|
[templateContext]="{
|
|
641
655
|
templateRef: column.headerTemplateRef,
|
|
642
656
|
columnIndex: lockedColumnsCount + columnIndex,
|
|
643
657
|
column: column,
|
|
644
658
|
$implicit: column
|
|
645
659
|
}">
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
660
|
+
</ng-template>
|
|
661
|
+
@if (!column.headerTemplateRef) {
|
|
662
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
663
|
+
}
|
|
664
|
+
</span>
|
|
665
|
+
@if (showColumnMenu(column)) {
|
|
666
|
+
<kendo-treelist-column-menu
|
|
667
|
+
[standalone]="false"
|
|
668
|
+
[settings]="columnMenuSettings"
|
|
669
|
+
[column]="column"
|
|
670
|
+
[columnMenuTemplate]="columnMenuTemplate">
|
|
671
|
+
</kendo-treelist-column-menu>
|
|
672
|
+
}
|
|
673
|
+
</span>
|
|
674
|
+
@if (resizable) {
|
|
675
|
+
<span kendoTreeListColumnHandle
|
|
676
|
+
kendoDraggable
|
|
677
|
+
class="k-column-resizer"
|
|
678
|
+
[column]="column"
|
|
679
|
+
[columns]="columns">
|
|
680
|
+
</span>
|
|
681
|
+
}
|
|
665
682
|
</th>
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
</tr>
|
|
686
|
+
}
|
|
687
|
+
@if (showFilterRow) {
|
|
688
|
+
<tr
|
|
669
689
|
kendoTreeListFilterRow
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
690
|
+
[columns]="leafColumns"
|
|
691
|
+
[filter]="filter"
|
|
692
|
+
[lockedColumnsCount]="lockedColumnsCount"
|
|
673
693
|
kendoTreeListLogicalRow
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
694
|
+
[totalColumns]="totalColumns"
|
|
695
|
+
[logicalRowIndex]="totalColumnLevels + 1"
|
|
696
|
+
[logicalSlaveRow]="lockedColumnsCount > 0"
|
|
697
|
+
[logicalCellsCount]="columns.length"
|
|
698
|
+
[logicalSlaveCellsCount]="unlockedColumnsCount"></tr>
|
|
699
|
+
}
|
|
700
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable", "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: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeListSelectAllCheckboxDirective, selector: "[kendoTreeListSelectAllCheckbox]" }] });
|
|
680
701
|
}
|
|
681
702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
682
703
|
type: Component,
|
|
683
704
|
args: [{
|
|
684
705
|
selector: '[kendoTreeListHeader]',
|
|
685
706
|
template: `
|
|
686
|
-
|
|
707
|
+
@for (i of columnLevels; track $index; let levelIndex = $index) {
|
|
708
|
+
<tr role="row"
|
|
687
709
|
kendoTreeListLogicalRow
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
+
[logicalRowIndex]="levelIndex"
|
|
711
|
+
[logicalSlaveRow]="lockedColumnsCount > 0"
|
|
712
|
+
[logicalCellsCount]="columns.length"
|
|
713
|
+
[totalColumns]="totalColumns"
|
|
714
|
+
[logicalSlaveCellsCount]="unlockedColumnsCount">
|
|
715
|
+
@for (column of columnsForLevel(levelIndex); track $index; let columnIndex = $index; let last = $last) {
|
|
716
|
+
@if (!isColumnGroupComponent(column)) {
|
|
717
|
+
<th
|
|
718
|
+
kendoTreeListLogicalCell
|
|
719
|
+
[logicalRowIndex]="levelIndex"
|
|
720
|
+
[logicalColIndex]="logicalColumnIndex(column)"
|
|
721
|
+
[headerLabelText]="column.title || getColumnComponent(column).field"
|
|
722
|
+
[colSpan]="column.colspan"
|
|
723
|
+
[rowSpan]="column.rowspan(totalColumnLevels)"
|
|
724
|
+
role="columnheader"
|
|
725
|
+
aria-selected="false"
|
|
726
|
+
[attr.aria-sort]="sortState(getColumnComponent(column))"
|
|
727
|
+
[class.k-sorted]="sortState(getColumnComponent(column))"
|
|
728
|
+
(keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
|
|
729
|
+
kendoDropTarget
|
|
730
|
+
kendoDraggable
|
|
731
|
+
kendoDraggableColumn
|
|
732
|
+
[enableDrag]="shouldActivate(column)"
|
|
710
733
|
[context]="{
|
|
711
734
|
field: getColumnComponent(column).field,
|
|
712
735
|
type: 'column',
|
|
@@ -714,181 +737,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
714
737
|
hint: column.title || getColumnComponent(column).field,
|
|
715
738
|
lastColumn: last && columnIndex === 0
|
|
716
739
|
}"
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
740
|
+
class="k-header k-table-th"
|
|
741
|
+
[class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
|
|
742
|
+
[class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
|
|
743
|
+
[ngClass]="column.headerClass"
|
|
744
|
+
[ngStyle]="column.headerStyle"
|
|
745
|
+
[attr.rowspan]="column.rowspan(totalColumnLevels)"
|
|
746
|
+
[attr.colspan]="column.colspan"
|
|
747
|
+
[attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
|
|
748
|
+
[attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
|
|
749
|
+
[attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
|
|
750
|
+
@if (!isInteractive(getColumnComponent(column), 'sortable')) {
|
|
751
|
+
<span class="k-cell-inner">
|
|
752
|
+
<span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
|
|
753
|
+
<ng-template
|
|
731
754
|
[templateContext]="{
|
|
732
755
|
templateRef: column.headerTemplateRef,
|
|
733
756
|
columnIndex: column.leafIndex,
|
|
734
757
|
column: column,
|
|
735
758
|
$implicit: column
|
|
736
759
|
}">
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
760
|
+
</ng-template>
|
|
761
|
+
@if (!column.headerTemplateRef) {
|
|
762
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
763
|
+
}
|
|
764
|
+
</span>
|
|
765
|
+
@if (showFilterMenu && isFilterable(getColumnComponent(column))) {
|
|
766
|
+
<kendo-treelist-filter-menu
|
|
767
|
+
[column]="getColumnComponent(column)"
|
|
768
|
+
[filter]="filter"
|
|
769
|
+
[tabIndex]="tabIndex">
|
|
770
|
+
</kendo-treelist-filter-menu>
|
|
771
|
+
}
|
|
772
|
+
@if (showColumnMenu(column)) {
|
|
773
|
+
<kendo-treelist-column-menu
|
|
774
|
+
[standalone]="false"
|
|
775
|
+
[settings]="columnMenuSettings"
|
|
776
|
+
[column]="column"
|
|
777
|
+
[columnMenuTemplate]="columnMenuTemplate"
|
|
778
|
+
[sort]="sort"
|
|
779
|
+
[filter]="filter"
|
|
780
|
+
[sortable]="sortable"
|
|
781
|
+
[tabIndex]="tabIndex">
|
|
782
|
+
</kendo-treelist-column-menu>
|
|
783
|
+
}
|
|
784
|
+
</span>
|
|
785
|
+
}
|
|
786
|
+
@if (isInteractive(getColumnComponent(column), 'sortable')) {
|
|
787
|
+
<span class="k-cell-inner">
|
|
788
|
+
<span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
|
|
789
|
+
<ng-template
|
|
764
790
|
[templateContext]="{
|
|
765
791
|
templateRef: column.headerTemplateRef,
|
|
766
792
|
columnIndex: column.leafIndex,
|
|
767
793
|
column: column,
|
|
768
794
|
$implicit: column
|
|
769
795
|
}">
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
<span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
783
|
-
</span>
|
|
784
|
-
<kendo-treelist-filter-menu
|
|
785
|
-
*ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
|
|
786
|
-
[column]="getColumnComponent(column)"
|
|
787
|
-
[filter]="filter"
|
|
788
|
-
[tabIndex]="tabIndex">
|
|
789
|
-
</kendo-treelist-filter-menu>
|
|
790
|
-
<kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
|
|
791
|
-
[standalone]="false"
|
|
792
|
-
[settings]="columnMenuSettings"
|
|
793
|
-
[column]="column"
|
|
794
|
-
[columnMenuTemplate]="columnMenuTemplate"
|
|
795
|
-
[sort]="sort"
|
|
796
|
-
[filter]="filter"
|
|
797
|
-
[sortable]="sortable"
|
|
798
|
-
[tabIndex]="tabIndex">
|
|
799
|
-
</kendo-treelist-column-menu>
|
|
796
|
+
</ng-template>
|
|
797
|
+
@if (!column.headerTemplateRef) {
|
|
798
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
799
|
+
}
|
|
800
|
+
<span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
|
|
801
|
+
@if (sortDescriptor(getColumnComponent(column).field).dir) {
|
|
802
|
+
<kendo-icon-wrapper
|
|
803
|
+
role="note" [attr.aria-label]="sortableLabel"
|
|
804
|
+
name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
|
|
805
|
+
[svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
|
|
806
|
+
></kendo-icon-wrapper>
|
|
807
|
+
}
|
|
800
808
|
</span>
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
809
|
+
@if (showSortNumbering(getColumnComponent(column))) {
|
|
810
|
+
<span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
811
|
+
}
|
|
812
|
+
</span>
|
|
813
|
+
@if (showFilterMenu && isFilterable(getColumnComponent(column))) {
|
|
814
|
+
<kendo-treelist-filter-menu
|
|
815
|
+
[column]="getColumnComponent(column)"
|
|
816
|
+
[filter]="filter"
|
|
817
|
+
[tabIndex]="tabIndex">
|
|
818
|
+
</kendo-treelist-filter-menu>
|
|
819
|
+
}
|
|
820
|
+
@if (showColumnMenu(column)) {
|
|
821
|
+
<kendo-treelist-column-menu
|
|
822
|
+
[standalone]="false"
|
|
823
|
+
[settings]="columnMenuSettings"
|
|
824
|
+
[column]="column"
|
|
825
|
+
[columnMenuTemplate]="columnMenuTemplate"
|
|
826
|
+
[sort]="sort"
|
|
827
|
+
[filter]="filter"
|
|
828
|
+
[sortable]="sortable"
|
|
829
|
+
[tabIndex]="tabIndex">
|
|
830
|
+
</kendo-treelist-column-menu>
|
|
831
|
+
}
|
|
832
|
+
</span>
|
|
833
|
+
}
|
|
834
|
+
@if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
|
|
835
|
+
<kendo-checkbox
|
|
836
|
+
[attr.id]="selectAllCheckboxId()"
|
|
837
|
+
[inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
|
|
838
|
+
kendoTreeListSelectAllCheckbox
|
|
839
|
+
kendoTreeListFocusable
|
|
840
|
+
(checkedStateChange)="selectAllChange($event)"
|
|
841
|
+
></kendo-checkbox>
|
|
842
|
+
}
|
|
843
|
+
@if (resizable) {
|
|
811
844
|
<span kendoTreeListColumnHandle
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
[columns]="columns">
|
|
845
|
+
kendoDraggable
|
|
846
|
+
class="k-column-resizer"
|
|
847
|
+
[column]="column"
|
|
848
|
+
[columns]="columns">
|
|
817
849
|
</span>
|
|
850
|
+
}
|
|
818
851
|
</th>
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
852
|
+
}
|
|
853
|
+
@if (isColumnGroupComponent(column)) {
|
|
854
|
+
<th
|
|
855
|
+
kendoTreeListLogicalCell
|
|
856
|
+
[logicalRowIndex]="levelIndex"
|
|
857
|
+
[logicalColIndex]="logicalColumnIndex(column)"
|
|
858
|
+
[rowSpan]="column.rowspan(totalColumnLevels)"
|
|
859
|
+
[colSpan]="column.colspan"
|
|
860
|
+
[headerLabelText]="column.title || getColumnComponent(column).field"
|
|
861
|
+
kendoDropTarget
|
|
862
|
+
kendoDraggable
|
|
863
|
+
kendoDraggableColumn
|
|
864
|
+
[enableDrag]="shouldActivate(column)"
|
|
830
865
|
[context]="{
|
|
831
866
|
type: 'columnGroup',
|
|
832
867
|
column: column,
|
|
833
868
|
hint: column.title,
|
|
834
869
|
lastColumn: last && columnIndex === 0
|
|
835
870
|
}"
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
871
|
+
class="k-header k-table-th"
|
|
872
|
+
[class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
|
|
873
|
+
[attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
|
|
874
|
+
[attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
|
|
875
|
+
[attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
|
|
876
|
+
[ngClass]="column.headerClass"
|
|
877
|
+
[ngStyle]="column.headerStyle"
|
|
878
|
+
[attr.rowspan]="column.rowspan(totalColumnLevels)"
|
|
879
|
+
[attr.colspan]="column.colspan">
|
|
880
|
+
<span class="k-cell-inner">
|
|
881
|
+
<span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
|
|
882
|
+
<ng-template
|
|
848
883
|
[templateContext]="{
|
|
849
884
|
templateRef: column.headerTemplateRef,
|
|
850
885
|
columnIndex: lockedColumnsCount + columnIndex,
|
|
851
886
|
column: column,
|
|
852
887
|
$implicit: column
|
|
853
888
|
}">
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
889
|
+
</ng-template>
|
|
890
|
+
@if (!column.headerTemplateRef) {
|
|
891
|
+
<span class="k-column-title">{{column.displayTitle}}</span>
|
|
892
|
+
}
|
|
893
|
+
</span>
|
|
894
|
+
@if (showColumnMenu(column)) {
|
|
895
|
+
<kendo-treelist-column-menu
|
|
896
|
+
[standalone]="false"
|
|
897
|
+
[settings]="columnMenuSettings"
|
|
898
|
+
[column]="column"
|
|
899
|
+
[columnMenuTemplate]="columnMenuTemplate">
|
|
900
|
+
</kendo-treelist-column-menu>
|
|
901
|
+
}
|
|
902
|
+
</span>
|
|
903
|
+
@if (resizable) {
|
|
904
|
+
<span kendoTreeListColumnHandle
|
|
905
|
+
kendoDraggable
|
|
906
|
+
class="k-column-resizer"
|
|
907
|
+
[column]="column"
|
|
908
|
+
[columns]="columns">
|
|
909
|
+
</span>
|
|
910
|
+
}
|
|
873
911
|
</th>
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
</tr>
|
|
915
|
+
}
|
|
916
|
+
@if (showFilterRow) {
|
|
917
|
+
<tr
|
|
877
918
|
kendoTreeListFilterRow
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
919
|
+
[columns]="leafColumns"
|
|
920
|
+
[filter]="filter"
|
|
921
|
+
[lockedColumnsCount]="lockedColumnsCount"
|
|
881
922
|
kendoTreeListLogicalRow
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
923
|
+
[totalColumns]="totalColumns"
|
|
924
|
+
[logicalRowIndex]="totalColumnLevels + 1"
|
|
925
|
+
[logicalSlaveRow]="lockedColumnsCount > 0"
|
|
926
|
+
[logicalCellsCount]="columns.length"
|
|
927
|
+
[logicalSlaveCellsCount]="unlockedColumnsCount"></tr>
|
|
928
|
+
}
|
|
929
|
+
`,
|
|
888
930
|
standalone: true,
|
|
889
|
-
imports: [
|
|
890
|
-
FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent,
|
|
891
|
-
CheckBoxComponent, TreeListSelectAllCheckboxDirective]
|
|
931
|
+
imports: [LogicalRowDirective, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle, FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent, TreeListSelectAllCheckboxDirective]
|
|
892
932
|
}]
|
|
893
933
|
}], ctorParameters: () => [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.SelectionService }, { type: i8.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i9.ColumnInfoService }, { type: i10.ContextService }, { type: i11.NavigationService }], propDecorators: { totalColumnLevels: [{
|
|
894
934
|
type: Input
|