@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/column-menu/column-menu.component.mjs CHANGED
@@ -27,7 +27,7 @@ import { ColumnMenuLockComponent } from './column-menu-lock.component';
27
27
  import { ColumnMenuItemDirective } from './column-menu-item.directive';
28
28
  import { ColumnMenuSortComponent } from './column-menu-sort.component';
29
29
  import { ColumnMenuContainerComponent } from './column-menu-container.component';
30
- import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
30
+ import { NgClass, NgTemplateOutlet } from '@angular/common';
31
31
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
32
32
  import { AdaptiveGridService } from '../common/adaptiveness.service';
33
33
  import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
@@ -362,175 +362,211 @@ export class ColumnMenuComponent {
362
362
  }
363
363
  }
364
364
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }, { token: i7.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
365
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
365
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
366
366
  ColumnMenuService,
367
367
  MenuTabbingService
368
368
  ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tabbedInterfaceTemplate", first: true, predicate: ["tabbedInterfaceTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tabStrip", first: true, predicate: TabStripComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
369
369
  <a #anchor
370
- class="k-grid-header-menu k-grid-column-menu"
371
- [ngClass]="{ 'k-active': isActive }"
372
- (click)="toggle($event, anchor, template)"
373
- (keydown.enter)="$event.stopImmediatePropagation()"
374
- href="#"
375
- [tabindex]="tabIndex"
376
- [attr.title]="columnMenuTitle"
377
- [attr.aria-expanded]="isNavigable ? undefined : false"
378
- [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
379
- <kendo-icon-wrapper
380
- name="more-vertical"
381
- [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
370
+ class="k-grid-header-menu k-grid-column-menu"
371
+ [ngClass]="{ 'k-active': isActive }"
372
+ (click)="toggle($event, anchor, template)"
373
+ (keydown.enter)="$event.stopImmediatePropagation()"
374
+ href="#"
375
+ [tabindex]="tabIndex"
376
+ [attr.title]="columnMenuTitle"
377
+ [attr.aria-expanded]="isNavigable ? undefined : false"
378
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
379
+ <kendo-icon-wrapper
380
+ name="more-vertical"
381
+ [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
382
382
  </a>
383
383
  <ng-template #template>
384
- <kendo-grid-columnmenu-container
385
- (keydown.escape)="close(true)"
386
- (keydown.enter)="$event.stopImmediatePropagation()">
387
- <ng-container
388
- [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
389
- [ngTemplateOutletContext]="{ service: service, column: column }">
390
- </ng-container>
391
- </kendo-grid-columnmenu-container>
384
+ <kendo-grid-columnmenu-container
385
+ (keydown.escape)="close(true)"
386
+ (keydown.enter)="$event.stopImmediatePropagation()">
387
+ <ng-container
388
+ [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
389
+ [ngTemplateOutletContext]="{ service: service, column: column }">
390
+ </ng-container>
391
+ </kendo-grid-columnmenu-container>
392
392
  </ng-template>
393
393
  <ng-template #defaultTemplate>
394
- <kendo-grid-columnmenu-container
395
- (keydown.escape)="close(true)"
396
- (keydown.enter)="$event.stopImmediatePropagation()">
397
- <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
398
- </kendo-grid-columnmenu-sort>
399
- <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
400
- </kendo-grid-columnmenu-lock>
401
- <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
402
- </kendo-grid-columnmenu-stick>
403
- <kendo-grid-columnmenu-position
404
- #positionItem
405
- *ngIf="hasPosition"
406
- [showLock]="hasLock"
407
- [showStick]="hasStick"
408
- [kendoGridColumnMenuItem]="positionItem"
409
- [service]="service"
410
- [expanded]="expandedPosition"
394
+ <kendo-grid-columnmenu-container
395
+ (keydown.escape)="close(true)"
396
+ (keydown.enter)="$event.stopImmediatePropagation()">
397
+ @if (hasSort) {
398
+ <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="service">
399
+ </kendo-grid-columnmenu-sort>
400
+ }
401
+ @if (hasLock && !hasPosition) {
402
+ <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="service">
403
+ </kendo-grid-columnmenu-lock>
404
+ }
405
+ @if (hasStick && !hasPosition) {
406
+ <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="service">
407
+ </kendo-grid-columnmenu-stick>
408
+ }
409
+ @if (hasPosition) {
410
+ <kendo-grid-columnmenu-position
411
+ #positionItem
412
+ [showLock]="hasLock"
413
+ [showStick]="hasStick"
414
+ [kendoGridColumnMenuItem]="positionItem"
415
+ [service]="service"
416
+ [expanded]="expandedPosition"
411
417
  >
412
- </kendo-grid-columnmenu-position>
413
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
414
- <kendo-grid-columnmenu-chooser
415
- #chooserItem
416
- *ngIf="hasColumnChooser"
417
- [kendoGridColumnMenuItem]="chooserItem"
418
- [service]="service"
419
- [expanded]="expandedColumns">
420
- </kendo-grid-columnmenu-chooser>
421
- <kendo-grid-columnmenu-autosize-column
422
- #autoSizeColumnItem
423
- *ngIf="hasAutoSizeColumn"
424
- [service]="service"
425
- [kendoGridColumnMenuItem]="autoSizeColumnItem"
426
- [column]="column"
418
+ </kendo-grid-columnmenu-position>
419
+ }
420
+ @if (hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns) {
421
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
422
+ }
423
+ @if (hasColumnChooser) {
424
+ <kendo-grid-columnmenu-chooser
425
+ #chooserItem
426
+ [kendoGridColumnMenuItem]="chooserItem"
427
+ [service]="service"
428
+ [expanded]="expandedColumns">
429
+ </kendo-grid-columnmenu-chooser>
430
+ }
431
+ @if (hasAutoSizeColumn) {
432
+ <kendo-grid-columnmenu-autosize-column
433
+ #autoSizeColumnItem
434
+ [service]="service"
435
+ [kendoGridColumnMenuItem]="autoSizeColumnItem"
436
+ [column]="column"
427
437
  >
428
- </kendo-grid-columnmenu-autosize-column>
429
-
430
- <kendo-grid-columnmenu-autosize-all-columns
431
- #autoSizeAllColumnsItem
432
- *ngIf="hasAutoSizeAllColumns"
433
- [service]="service"
434
- [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
438
+ </kendo-grid-columnmenu-autosize-column>
439
+ }
440
+
441
+ @if (hasAutoSizeAllColumns) {
442
+ <kendo-grid-columnmenu-autosize-all-columns
443
+ #autoSizeAllColumnsItem
444
+ [service]="service"
445
+ [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
435
446
  >
436
- </kendo-grid-columnmenu-autosize-all-columns>
437
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
438
- <kendo-grid-columnmenu-filter
439
- #filterItem
440
- *ngIf="hasFilter"
441
- [kendoGridColumnMenuItem]="filterItem"
442
- [service]="service"
443
- [expanded]="expandedFilter">
444
- </kendo-grid-columnmenu-filter>
445
- </kendo-grid-columnmenu-container>
447
+ </kendo-grid-columnmenu-autosize-all-columns>
448
+ }
449
+ @if (hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns) {
450
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
451
+ }
452
+ @if (hasFilter) {
453
+ <kendo-grid-columnmenu-filter
454
+ #filterItem
455
+ [kendoGridColumnMenuItem]="filterItem"
456
+ [service]="service"
457
+ [expanded]="expandedFilter">
458
+ </kendo-grid-columnmenu-filter>
459
+ }
460
+ </kendo-grid-columnmenu-container>
446
461
  </ng-template>
447
462
  <ng-template #tabbedInterfaceTemplate>
448
- <kendo-tabstrip #tabstrip
449
- (keydown.escape)="close(true)">
450
- <kendo-tabstrip-tab *ngIf="hasFilter">
451
- <ng-template kendoTabTitle>
452
- <kendo-icon-wrapper
453
- [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
454
- name="filter"
455
- [svgIcon]="filterIcon">
456
- </kendo-icon-wrapper>
457
- </ng-template>
458
- <ng-template kendoTabContent>
459
- <kendo-grid-filter-menu-container
460
- [column]="service.column"
461
- [menuTabbingService]="service.menuTabbingService"
462
- [filter]="service.filter"
463
- [actionsClass]="actionsClass"
464
- (keydown.shift.tab)="$event.stopImmediatePropagation()"
465
- (close)="close()">
466
- </kendo-grid-filter-menu-container>
467
- </ng-template>
468
- </kendo-tabstrip-tab>
469
- <kendo-tabstrip-tab *ngIf="showGeneralTab">
470
- <ng-template kendoTabTitle>
471
- <kendo-icon-wrapper
472
- [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
473
- name="sliders"
474
- [svgIcon]="slidersIcon">
475
- </kendo-icon-wrapper>
476
- </ng-template>
477
- <ng-template kendoTabContent>
478
- <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
479
- </kendo-grid-columnmenu-sort>
480
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
481
- <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
482
- </kendo-grid-columnmenu-lock>
483
- <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
484
- </kendo-grid-columnmenu-stick>
485
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="(hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
486
- <kendo-grid-columnmenu-position
487
- #positionItem
488
- *ngIf="hasPosition"
489
- [showLock]="hasLock"
490
- [showStick]="hasStick"
491
- [kendoGridColumnMenuItem]="positionItem"
492
- [service]="service"
493
- [expanded]="expandedPosition">
494
- </kendo-grid-columnmenu-position>
495
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
496
- <kendo-grid-columnmenu-autosize-column
497
- #autoSizeColumnItem
498
- *ngIf="hasAutoSizeColumn"
499
- [service]="service"
500
- [kendoGridColumnMenuItem]="autoSizeColumnItem"
501
- [column]="column"
502
- >
503
- </kendo-grid-columnmenu-autosize-column>
504
- <kendo-grid-columnmenu-autosize-all-columns
505
- #autoSizeAllColumnsItem
506
- *ngIf="hasAutoSizeAllColumns"
507
- [service]="service"
508
- [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
509
- >
510
- </kendo-grid-columnmenu-autosize-all-columns>
511
- </ng-template>
512
- </kendo-tabstrip-tab>
513
- <kendo-tabstrip-tab *ngIf="hasColumnChooser">
514
- <ng-template kendoTabTitle>
515
- <kendo-icon-wrapper
516
- [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
517
- name="columns"
518
- [svgIcon]="columnsIcon">
519
- </kendo-icon-wrapper>
520
- </ng-template>
521
- <ng-template kendoTabContent>
522
- <kendo-grid-column-chooser-content
523
- [columns]="columns"
524
- [service]="service"
525
- (close)="close()"
526
- >
527
- </kendo-grid-column-chooser-content>
528
- </ng-template>
529
- </kendo-tabstrip-tab>
530
- </kendo-tabstrip>
463
+ <kendo-tabstrip #tabstrip
464
+ (keydown.escape)="close(true)">
465
+ @if (hasFilter) {
466
+ <kendo-tabstrip-tab>
467
+ <ng-template kendoTabTitle>
468
+ <kendo-icon-wrapper
469
+ [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
470
+ name="filter"
471
+ [svgIcon]="filterIcon">
472
+ </kendo-icon-wrapper>
473
+ </ng-template>
474
+ <ng-template kendoTabContent>
475
+ <kendo-grid-filter-menu-container
476
+ [column]="service.column"
477
+ [menuTabbingService]="service.menuTabbingService"
478
+ [filter]="service.filter"
479
+ [actionsClass]="actionsClass"
480
+ (keydown.shift.tab)="$event.stopImmediatePropagation()"
481
+ (close)="close()">
482
+ </kendo-grid-filter-menu-container>
483
+ </ng-template>
484
+ </kendo-tabstrip-tab>
485
+ }
486
+ @if (showGeneralTab) {
487
+ <kendo-tabstrip-tab>
488
+ <ng-template kendoTabTitle>
489
+ <kendo-icon-wrapper
490
+ [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
491
+ name="sliders"
492
+ [svgIcon]="slidersIcon">
493
+ </kendo-icon-wrapper>
494
+ </ng-template>
495
+ <ng-template kendoTabContent>
496
+ @if (hasSort) {
497
+ <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="service">
498
+ </kendo-grid-columnmenu-sort>
499
+ }
500
+ @if (hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)) {
501
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
502
+ }
503
+ @if (hasLock && !hasPosition) {
504
+ <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="service">
505
+ </kendo-grid-columnmenu-lock>
506
+ }
507
+ @if (hasStick && !hasPosition) {
508
+ <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="service">
509
+ </kendo-grid-columnmenu-stick>
510
+ }
511
+ @if ((hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)) {
512
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
513
+ }
514
+ @if (hasPosition) {
515
+ <kendo-grid-columnmenu-position
516
+ #positionItem
517
+ [showLock]="hasLock"
518
+ [showStick]="hasStick"
519
+ [kendoGridColumnMenuItem]="positionItem"
520
+ [service]="service"
521
+ [expanded]="expandedPosition">
522
+ </kendo-grid-columnmenu-position>
523
+ }
524
+ @if (hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)) {
525
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
526
+ }
527
+ @if (hasAutoSizeColumn) {
528
+ <kendo-grid-columnmenu-autosize-column
529
+ #autoSizeColumnItem
530
+ [service]="service"
531
+ [kendoGridColumnMenuItem]="autoSizeColumnItem"
532
+ [column]="column"
533
+ >
534
+ </kendo-grid-columnmenu-autosize-column>
535
+ }
536
+ @if (hasAutoSizeAllColumns) {
537
+ <kendo-grid-columnmenu-autosize-all-columns
538
+ #autoSizeAllColumnsItem
539
+ [service]="service"
540
+ [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
541
+ >
542
+ </kendo-grid-columnmenu-autosize-all-columns>
543
+ }
544
+ </ng-template>
545
+ </kendo-tabstrip-tab>
546
+ }
547
+ @if (hasColumnChooser) {
548
+ <kendo-tabstrip-tab>
549
+ <ng-template kendoTabTitle>
550
+ <kendo-icon-wrapper
551
+ [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
552
+ name="columns"
553
+ [svgIcon]="columnsIcon">
554
+ </kendo-icon-wrapper>
555
+ </ng-template>
556
+ <ng-template kendoTabContent>
557
+ <kendo-grid-column-chooser-content
558
+ [columns]="columns"
559
+ [service]="service"
560
+ (close)="close()"
561
+ >
562
+ </kendo-grid-column-chooser-content>
563
+ </ng-template>
564
+ </kendo-tabstrip-tab>
565
+ }
566
+ </kendo-tabstrip>
531
567
  </ng-template>
532
-
533
- `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
568
+
569
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
534
570
  }
535
571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuComponent, decorators: [{
536
572
  type: Component,
@@ -542,177 +578,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
542
578
  selector: 'kendo-grid-column-menu',
543
579
  template: `
544
580
  <a #anchor
545
- class="k-grid-header-menu k-grid-column-menu"
546
- [ngClass]="{ 'k-active': isActive }"
547
- (click)="toggle($event, anchor, template)"
548
- (keydown.enter)="$event.stopImmediatePropagation()"
549
- href="#"
550
- [tabindex]="tabIndex"
551
- [attr.title]="columnMenuTitle"
552
- [attr.aria-expanded]="isNavigable ? undefined : false"
553
- [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
554
- <kendo-icon-wrapper
555
- name="more-vertical"
556
- [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
581
+ class="k-grid-header-menu k-grid-column-menu"
582
+ [ngClass]="{ 'k-active': isActive }"
583
+ (click)="toggle($event, anchor, template)"
584
+ (keydown.enter)="$event.stopImmediatePropagation()"
585
+ href="#"
586
+ [tabindex]="tabIndex"
587
+ [attr.title]="columnMenuTitle"
588
+ [attr.aria-expanded]="isNavigable ? undefined : false"
589
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
590
+ <kendo-icon-wrapper
591
+ name="more-vertical"
592
+ [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
557
593
  </a>
558
594
  <ng-template #template>
559
- <kendo-grid-columnmenu-container
560
- (keydown.escape)="close(true)"
561
- (keydown.enter)="$event.stopImmediatePropagation()">
562
- <ng-container
563
- [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
564
- [ngTemplateOutletContext]="{ service: service, column: column }">
565
- </ng-container>
566
- </kendo-grid-columnmenu-container>
595
+ <kendo-grid-columnmenu-container
596
+ (keydown.escape)="close(true)"
597
+ (keydown.enter)="$event.stopImmediatePropagation()">
598
+ <ng-container
599
+ [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || (settings.view === 'tabbed' ? tabbedInterfaceTemplate : defaultTemplate)"
600
+ [ngTemplateOutletContext]="{ service: service, column: column }">
601
+ </ng-container>
602
+ </kendo-grid-columnmenu-container>
567
603
  </ng-template>
568
604
  <ng-template #defaultTemplate>
569
- <kendo-grid-columnmenu-container
570
- (keydown.escape)="close(true)"
571
- (keydown.enter)="$event.stopImmediatePropagation()">
572
- <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
573
- </kendo-grid-columnmenu-sort>
574
- <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
575
- </kendo-grid-columnmenu-lock>
576
- <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
577
- </kendo-grid-columnmenu-stick>
578
- <kendo-grid-columnmenu-position
579
- #positionItem
580
- *ngIf="hasPosition"
581
- [showLock]="hasLock"
582
- [showStick]="hasStick"
583
- [kendoGridColumnMenuItem]="positionItem"
584
- [service]="service"
585
- [expanded]="expandedPosition"
605
+ <kendo-grid-columnmenu-container
606
+ (keydown.escape)="close(true)"
607
+ (keydown.enter)="$event.stopImmediatePropagation()">
608
+ @if (hasSort) {
609
+ <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="service">
610
+ </kendo-grid-columnmenu-sort>
611
+ }
612
+ @if (hasLock && !hasPosition) {
613
+ <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="service">
614
+ </kendo-grid-columnmenu-lock>
615
+ }
616
+ @if (hasStick && !hasPosition) {
617
+ <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="service">
618
+ </kendo-grid-columnmenu-stick>
619
+ }
620
+ @if (hasPosition) {
621
+ <kendo-grid-columnmenu-position
622
+ #positionItem
623
+ [showLock]="hasLock"
624
+ [showStick]="hasStick"
625
+ [kendoGridColumnMenuItem]="positionItem"
626
+ [service]="service"
627
+ [expanded]="expandedPosition"
586
628
  >
587
- </kendo-grid-columnmenu-position>
588
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
589
- <kendo-grid-columnmenu-chooser
590
- #chooserItem
591
- *ngIf="hasColumnChooser"
592
- [kendoGridColumnMenuItem]="chooserItem"
593
- [service]="service"
594
- [expanded]="expandedColumns">
595
- </kendo-grid-columnmenu-chooser>
596
- <kendo-grid-columnmenu-autosize-column
597
- #autoSizeColumnItem
598
- *ngIf="hasAutoSizeColumn"
599
- [service]="service"
600
- [kendoGridColumnMenuItem]="autoSizeColumnItem"
601
- [column]="column"
629
+ </kendo-grid-columnmenu-position>
630
+ }
631
+ @if (hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns) {
632
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
633
+ }
634
+ @if (hasColumnChooser) {
635
+ <kendo-grid-columnmenu-chooser
636
+ #chooserItem
637
+ [kendoGridColumnMenuItem]="chooserItem"
638
+ [service]="service"
639
+ [expanded]="expandedColumns">
640
+ </kendo-grid-columnmenu-chooser>
641
+ }
642
+ @if (hasAutoSizeColumn) {
643
+ <kendo-grid-columnmenu-autosize-column
644
+ #autoSizeColumnItem
645
+ [service]="service"
646
+ [kendoGridColumnMenuItem]="autoSizeColumnItem"
647
+ [column]="column"
602
648
  >
603
- </kendo-grid-columnmenu-autosize-column>
604
-
605
- <kendo-grid-columnmenu-autosize-all-columns
606
- #autoSizeAllColumnsItem
607
- *ngIf="hasAutoSizeAllColumns"
608
- [service]="service"
609
- [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
649
+ </kendo-grid-columnmenu-autosize-column>
650
+ }
651
+
652
+ @if (hasAutoSizeAllColumns) {
653
+ <kendo-grid-columnmenu-autosize-all-columns
654
+ #autoSizeAllColumnsItem
655
+ [service]="service"
656
+ [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
610
657
  >
611
- </kendo-grid-columnmenu-autosize-all-columns>
612
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
613
- <kendo-grid-columnmenu-filter
614
- #filterItem
615
- *ngIf="hasFilter"
616
- [kendoGridColumnMenuItem]="filterItem"
617
- [service]="service"
618
- [expanded]="expandedFilter">
619
- </kendo-grid-columnmenu-filter>
620
- </kendo-grid-columnmenu-container>
658
+ </kendo-grid-columnmenu-autosize-all-columns>
659
+ }
660
+ @if (hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns) {
661
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
662
+ }
663
+ @if (hasFilter) {
664
+ <kendo-grid-columnmenu-filter
665
+ #filterItem
666
+ [kendoGridColumnMenuItem]="filterItem"
667
+ [service]="service"
668
+ [expanded]="expandedFilter">
669
+ </kendo-grid-columnmenu-filter>
670
+ }
671
+ </kendo-grid-columnmenu-container>
621
672
  </ng-template>
622
673
  <ng-template #tabbedInterfaceTemplate>
623
- <kendo-tabstrip #tabstrip
624
- (keydown.escape)="close(true)">
625
- <kendo-tabstrip-tab *ngIf="hasFilter">
626
- <ng-template kendoTabTitle>
627
- <kendo-icon-wrapper
628
- [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
629
- name="filter"
630
- [svgIcon]="filterIcon">
631
- </kendo-icon-wrapper>
632
- </ng-template>
633
- <ng-template kendoTabContent>
634
- <kendo-grid-filter-menu-container
635
- [column]="service.column"
636
- [menuTabbingService]="service.menuTabbingService"
637
- [filter]="service.filter"
638
- [actionsClass]="actionsClass"
639
- (keydown.shift.tab)="$event.stopImmediatePropagation()"
640
- (close)="close()">
641
- </kendo-grid-filter-menu-container>
642
- </ng-template>
643
- </kendo-tabstrip-tab>
644
- <kendo-tabstrip-tab *ngIf="showGeneralTab">
645
- <ng-template kendoTabTitle>
646
- <kendo-icon-wrapper
647
- [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
648
- name="sliders"
649
- [svgIcon]="slidersIcon">
650
- </kendo-icon-wrapper>
651
- </ng-template>
652
- <ng-template kendoTabContent>
653
- <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
654
- </kendo-grid-columnmenu-sort>
655
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
656
- <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="service">
657
- </kendo-grid-columnmenu-lock>
658
- <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="service">
659
- </kendo-grid-columnmenu-stick>
660
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="(hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
661
- <kendo-grid-columnmenu-position
662
- #positionItem
663
- *ngIf="hasPosition"
664
- [showLock]="hasLock"
665
- [showStick]="hasStick"
666
- [kendoGridColumnMenuItem]="positionItem"
667
- [service]="service"
668
- [expanded]="expandedPosition">
669
- </kendo-grid-columnmenu-position>
670
- <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)" class="k-separator"></span>
671
- <kendo-grid-columnmenu-autosize-column
672
- #autoSizeColumnItem
673
- *ngIf="hasAutoSizeColumn"
674
- [service]="service"
675
- [kendoGridColumnMenuItem]="autoSizeColumnItem"
676
- [column]="column"
677
- >
678
- </kendo-grid-columnmenu-autosize-column>
679
- <kendo-grid-columnmenu-autosize-all-columns
680
- #autoSizeAllColumnsItem
681
- *ngIf="hasAutoSizeAllColumns"
682
- [service]="service"
683
- [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
684
- >
685
- </kendo-grid-columnmenu-autosize-all-columns>
686
- </ng-template>
687
- </kendo-tabstrip-tab>
688
- <kendo-tabstrip-tab *ngIf="hasColumnChooser">
689
- <ng-template kendoTabTitle>
690
- <kendo-icon-wrapper
691
- [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
692
- name="columns"
693
- [svgIcon]="columnsIcon">
694
- </kendo-icon-wrapper>
695
- </ng-template>
696
- <ng-template kendoTabContent>
697
- <kendo-grid-column-chooser-content
698
- [columns]="columns"
699
- [service]="service"
700
- (close)="close()"
701
- >
702
- </kendo-grid-column-chooser-content>
703
- </ng-template>
704
- </kendo-tabstrip-tab>
705
- </kendo-tabstrip>
674
+ <kendo-tabstrip #tabstrip
675
+ (keydown.escape)="close(true)">
676
+ @if (hasFilter) {
677
+ <kendo-tabstrip-tab>
678
+ <ng-template kendoTabTitle>
679
+ <kendo-icon-wrapper
680
+ [attr.title]="ctx.localization.get('columnMenuFilterTabTitle')"
681
+ name="filter"
682
+ [svgIcon]="filterIcon">
683
+ </kendo-icon-wrapper>
684
+ </ng-template>
685
+ <ng-template kendoTabContent>
686
+ <kendo-grid-filter-menu-container
687
+ [column]="service.column"
688
+ [menuTabbingService]="service.menuTabbingService"
689
+ [filter]="service.filter"
690
+ [actionsClass]="actionsClass"
691
+ (keydown.shift.tab)="$event.stopImmediatePropagation()"
692
+ (close)="close()">
693
+ </kendo-grid-filter-menu-container>
694
+ </ng-template>
695
+ </kendo-tabstrip-tab>
696
+ }
697
+ @if (showGeneralTab) {
698
+ <kendo-tabstrip-tab>
699
+ <ng-template kendoTabTitle>
700
+ <kendo-icon-wrapper
701
+ [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
702
+ name="sliders"
703
+ [svgIcon]="slidersIcon">
704
+ </kendo-icon-wrapper>
705
+ </ng-template>
706
+ <ng-template kendoTabContent>
707
+ @if (hasSort) {
708
+ <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="service">
709
+ </kendo-grid-columnmenu-sort>
710
+ }
711
+ @if (hasSort && (hasLock || hasStick || hasPosition || hasAutoSizeColumn || hasAutoSizeAllColumns)) {
712
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
713
+ }
714
+ @if (hasLock && !hasPosition) {
715
+ <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="service">
716
+ </kendo-grid-columnmenu-lock>
717
+ }
718
+ @if (hasStick && !hasPosition) {
719
+ <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="service">
720
+ </kendo-grid-columnmenu-stick>
721
+ }
722
+ @if ((hasLock || hasStick) && !hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)) {
723
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
724
+ }
725
+ @if (hasPosition) {
726
+ <kendo-grid-columnmenu-position
727
+ #positionItem
728
+ [showLock]="hasLock"
729
+ [showStick]="hasStick"
730
+ [kendoGridColumnMenuItem]="positionItem"
731
+ [service]="service"
732
+ [expanded]="expandedPosition">
733
+ </kendo-grid-columnmenu-position>
734
+ }
735
+ @if (hasPosition && (hasAutoSizeColumn || hasAutoSizeAllColumns)) {
736
+ <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
737
+ }
738
+ @if (hasAutoSizeColumn) {
739
+ <kendo-grid-columnmenu-autosize-column
740
+ #autoSizeColumnItem
741
+ [service]="service"
742
+ [kendoGridColumnMenuItem]="autoSizeColumnItem"
743
+ [column]="column"
744
+ >
745
+ </kendo-grid-columnmenu-autosize-column>
746
+ }
747
+ @if (hasAutoSizeAllColumns) {
748
+ <kendo-grid-columnmenu-autosize-all-columns
749
+ #autoSizeAllColumnsItem
750
+ [service]="service"
751
+ [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
752
+ >
753
+ </kendo-grid-columnmenu-autosize-all-columns>
754
+ }
755
+ </ng-template>
756
+ </kendo-tabstrip-tab>
757
+ }
758
+ @if (hasColumnChooser) {
759
+ <kendo-tabstrip-tab>
760
+ <ng-template kendoTabTitle>
761
+ <kendo-icon-wrapper
762
+ [attr.title]="ctx.localization.get('columnMenuColumnsTabTitle')"
763
+ name="columns"
764
+ [svgIcon]="columnsIcon">
765
+ </kendo-icon-wrapper>
766
+ </ng-template>
767
+ <ng-template kendoTabContent>
768
+ <kendo-grid-column-chooser-content
769
+ [columns]="columns"
770
+ [service]="service"
771
+ (close)="close()"
772
+ >
773
+ </kendo-grid-column-chooser-content>
774
+ </ng-template>
775
+ </kendo-tabstrip-tab>
776
+ }
777
+ </kendo-tabstrip>
706
778
  </ng-template>
707
-
708
- `,
779
+
780
+ `,
709
781
  standalone: true,
710
782
  imports: [
711
- NgClass, IconWrapperComponent, ColumnMenuContainerComponent, NgTemplateOutlet, NgIf,
712
- ColumnMenuSortComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuStickComponent,
713
- ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuAutoSizeColumnComponent,
714
- ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuFilterComponent, TabStripComponent,
715
- TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent,
783
+ NgClass,
784
+ IconWrapperComponent,
785
+ ColumnMenuContainerComponent,
786
+ NgTemplateOutlet,
787
+ ColumnMenuSortComponent,
788
+ ColumnMenuItemDirective,
789
+ ColumnMenuLockComponent,
790
+ ColumnMenuStickComponent,
791
+ ColumnMenuPositionComponent,
792
+ ColumnMenuChooserComponent,
793
+ ColumnMenuAutoSizeColumnComponent,
794
+ ColumnMenuAutoSizeAllColumnsComponent,
795
+ ColumnMenuFilterComponent,
796
+ TabStripComponent,
797
+ TabStripTabComponent,
798
+ TabTitleDirective,
799
+ TabContentDirective,
800
+ FilterMenuContainerComponent,
801
+ ColumnListComponent,
716
802
  ColumnChooserContentComponent
717
803
  ]
718
804
  }]