@progress/kendo-angular-grid 13.4.0-develop.1 → 13.4.0-develop.11

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 (44) hide show
  1. package/column-menu/column-chooser-item-checked.directive.d.ts +20 -0
  2. package/column-menu/column-chooser.component.d.ts +9 -1
  3. package/column-menu/column-list-kb-nav.service.d.ts +22 -0
  4. package/column-menu/column-list.component.d.ts +10 -2
  5. package/column-menu/column-menu-item.component.d.ts +2 -0
  6. package/column-menu/column-menu.component.d.ts +10 -4
  7. package/column-menu/column-menu.module.d.ts +22 -21
  8. package/common/error-messages.d.ts +1 -1
  9. package/esm2020/column-menu/column-chooser-item-checked.directive.mjs +36 -0
  10. package/esm2020/column-menu/column-chooser.component.mjs +63 -12
  11. package/esm2020/column-menu/column-list-kb-nav.service.mjs +38 -0
  12. package/esm2020/column-menu/column-list.component.mjs +137 -26
  13. package/esm2020/column-menu/column-menu-autosize-all.component.mjs +2 -2
  14. package/esm2020/column-menu/column-menu-autosize.component.mjs +2 -2
  15. package/esm2020/column-menu/column-menu-chooser.component.mjs +3 -1
  16. package/esm2020/column-menu/column-menu-item.component.mjs +10 -4
  17. package/esm2020/column-menu/column-menu.component.mjs +79 -37
  18. package/esm2020/column-menu/column-menu.module.mjs +6 -2
  19. package/esm2020/common/error-messages.mjs +1 -1
  20. package/esm2020/filtering/cell/autocomplete-filter-cell.component.mjs +1 -1
  21. package/esm2020/filtering/cell/boolean-filter-cell.component.mjs +1 -1
  22. package/esm2020/filtering/cell/filter-cell-operators.component.mjs +1 -1
  23. package/esm2020/filtering/menu/date-filter-menu.component.mjs +1 -1
  24. package/esm2020/filtering/menu/filter-menu-container.component.mjs +2 -2
  25. package/esm2020/filtering/menu/filter-menu-input-wrapper.component.mjs +1 -1
  26. package/esm2020/filtering/menu/filter-menu.component.mjs +52 -10
  27. package/esm2020/filtering/menu/numeric-filter-menu.component.mjs +1 -1
  28. package/esm2020/filtering/menu/string-filter-menu.component.mjs +1 -1
  29. package/esm2020/navigation/logical-cell.directive.mjs +1 -1
  30. package/esm2020/package-metadata.mjs +2 -2
  31. package/esm2020/pager/pager-numeric-buttons.component.mjs +14 -8
  32. package/esm2020/pager/pager-page-sizes.component.mjs +1 -1
  33. package/esm2020/pager/pager.component.mjs +76 -42
  34. package/esm2020/rendering/footer/footer.component.mjs +1 -1
  35. package/esm2020/rendering/groups-expand.directive.mjs +9 -1
  36. package/esm2020/rendering/header/header.component.mjs +31 -21
  37. package/fesm2015/progress-kendo-angular-grid.mjs +914 -547
  38. package/fesm2020/progress-kendo-angular-grid.mjs +915 -556
  39. package/filtering/menu/filter-menu.component.d.ts +13 -4
  40. package/package.json +16 -16
  41. package/pager/pager-numeric-buttons.component.d.ts +2 -1
  42. package/pager/pager.component.d.ts +5 -1
  43. package/rendering/header/header.component.d.ts +4 -1
  44. package/schematics/ngAdd/index.js +3 -3
@@ -4,39 +4,44 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
6
6
  import { NavigationService } from './../navigation/navigation.service';
7
- import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef } from '@angular/core';
7
+ import { Component, Renderer2, Input, TemplateRef, HostBinding, ElementRef, ViewChild, isDevMode, ChangeDetectorRef, Optional } from '@angular/core';
8
8
  import { SinglePopupService } from '../common/single-popup.service';
9
9
  import { ColumnMenuService } from './column-menu.service';
10
10
  import { filtersByField } from '../filtering/base-filter-cell.component';
11
11
  import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from './utils';
12
12
  import { replaceMessagePlaceholder } from '../utils';
13
13
  import { ContextService } from '../common/provider.service';
14
- import { ColunnMenuErrorMessages } from '../common/error-messages';
14
+ import { ColumnMenuErrorMessages } from '../common/error-messages';
15
15
  import { moreVerticalIcon, columnsIcon, filterIcon, slidersIcon } from '@progress/kendo-svg-icons';
16
16
  import { TabStripComponent } from '@progress/kendo-angular-layout';
17
17
  import { ColumnInfoService } from '../common/column-info.service';
18
+ import { IdService } from '../common/id.service';
19
+ import { take } from 'rxjs/operators';
18
20
  import * as i0 from "@angular/core";
19
21
  import * as i1 from "./../navigation/navigation.service";
20
22
  import * as i2 from "../common/single-popup.service";
21
23
  import * as i3 from "./column-menu.service";
22
24
  import * as i4 from "../common/provider.service";
23
25
  import * as i5 from "../common/column-info.service";
24
- import * as i6 from "@progress/kendo-angular-icons";
25
- import * as i7 from "./column-menu-container.component";
26
- import * as i8 from "./column-menu-sort.component";
27
- import * as i9 from "./column-menu-lock.component";
28
- import * as i10 from "./column-menu-stick.component";
29
- import * as i11 from "./column-menu-position.component";
30
- import * as i12 from "./column-menu-chooser.component";
31
- import * as i13 from "./column-menu-autosize.component";
32
- import * as i14 from "./column-menu-autosize-all.component";
33
- import * as i15 from "./column-menu-filter.component";
34
- import * as i16 from "@progress/kendo-angular-layout";
35
- import * as i17 from "../filtering/menu/filter-menu-container.component";
36
- import * as i18 from "./column-list.component";
37
- import * as i19 from "@angular/common";
38
- import * as i20 from "./column-menu-item.directive";
26
+ import * as i6 from "../common/id.service";
27
+ import * as i7 from "@progress/kendo-angular-icons";
28
+ import * as i8 from "./column-menu-container.component";
29
+ import * as i9 from "./column-menu-sort.component";
30
+ import * as i10 from "./column-menu-lock.component";
31
+ import * as i11 from "./column-menu-stick.component";
32
+ import * as i12 from "./column-menu-position.component";
33
+ import * as i13 from "./column-menu-chooser.component";
34
+ import * as i14 from "./column-menu-autosize.component";
35
+ import * as i15 from "./column-menu-autosize-all.component";
36
+ import * as i16 from "./column-menu-filter.component";
37
+ import * as i17 from "@progress/kendo-angular-layout";
38
+ import * as i18 from "../filtering/menu/filter-menu-container.component";
39
+ import * as i19 from "./column-list.component";
40
+ import * as i20 from "@angular/common";
41
+ import * as i21 from "./column-menu-item.directive";
39
42
  const POPUP_CLASS = 'k-grid-columnmenu-popup';
43
+ let id = 0;
44
+ const getId = (gridId) => `${gridId}-column-menu-${id++}`;
40
45
  /**
41
46
  * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
42
47
  *
@@ -49,7 +54,7 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
49
54
  * </kendo-grid>
50
55
  */
51
56
  export class ColumnMenuComponent {
52
- constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService) {
57
+ constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService) {
53
58
  this.navigationService = navigationService;
54
59
  this.popupService = popupService;
55
60
  this.service = service;
@@ -57,6 +62,7 @@ export class ColumnMenuComponent {
57
62
  this.renderer = renderer;
58
63
  this.cdr = cdr;
59
64
  this.columnInfoService = columnInfoService;
65
+ this.idService = idService;
60
66
  /**
61
67
  * @hidden
62
68
  */
@@ -102,7 +108,7 @@ export class ColumnMenuComponent {
102
108
  */
103
109
  this.expandedPosition = false;
104
110
  this.moreVerticalIcon = moreVerticalIcon;
105
- this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
111
+ this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this, true));
106
112
  }
107
113
  /**
108
114
  * @hidden
@@ -128,6 +134,12 @@ export class ColumnMenuComponent {
128
134
  get hasFilter() {
129
135
  return hasFilter(this.settings, this.column);
130
136
  }
137
+ /**
138
+ * @hidden
139
+ */
140
+ get isNavigable() {
141
+ return this.navigationService.tableEnabled;
142
+ }
131
143
  /**
132
144
  * @hidden
133
145
  */
@@ -144,7 +156,7 @@ export class ColumnMenuComponent {
144
156
  * @hidden
145
157
  */
146
158
  onApply(changed) {
147
- this.close();
159
+ this.close(true);
148
160
  if (changed.length) {
149
161
  this.cdr.markForCheck();
150
162
  this.columnInfoService.changeVisibility(changed);
@@ -190,11 +202,11 @@ export class ColumnMenuComponent {
190
202
  if (this.ctx.grid.virtualColumns && isDevMode()) {
191
203
  if (this.settings.autoSizeAllColumns) {
192
204
  this.settings.autoSizeAllColumns = false;
193
- console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
205
+ console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
194
206
  }
195
207
  if (this.settings.autoSizeColumn) {
196
208
  this.settings.autoSizeColumn = false;
197
- console.warn(ColunnMenuErrorMessages.autoSizeColumn);
209
+ console.warn(ColumnMenuErrorMessages.autoSizeColumn);
198
210
  }
199
211
  }
200
212
  this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
@@ -221,12 +233,32 @@ export class ColumnMenuComponent {
221
233
  this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
222
234
  this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
223
235
  this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
224
- if (this.popupRef && this.settings.view === 'tabbed') {
225
- this.renderer.addClass(this.popupRef.popupElement.firstChild, 'k-column-menu-tabbed');
226
- this.cdr.detectChanges();
227
- this.tabStrip?.selectTab(0);
236
+ // Needed as changes to 'popupRef' and 'popupId' are not reflected
237
+ // automatically when the Popup is closed by clicking outside the anchor
238
+ const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
239
+ if (this.popupRef) {
240
+ this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
241
+ this.popupRef = null;
242
+ const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
243
+ ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
244
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
245
+ });
246
+ const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
247
+ if (popupAriaElement) {
248
+ const popupId = getId(this.idService?.gridId());
249
+ this.renderer.setAttribute(popupAriaElement, 'id', popupId);
250
+ this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
251
+ this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
252
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
253
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
254
+ }
255
+ if (this.settings.view === 'tabbed') {
256
+ this.renderer.addClass(this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup'), 'k-column-menu-tabbed');
257
+ this.cdr.detectChanges();
258
+ this.tabStrip?.selectTab(0);
259
+ }
228
260
  }
229
- if (!this.popupRef) {
261
+ else {
230
262
  if (this.navigationService.tableEnabled) {
231
263
  this.navigationService.focusCell(0, this.column.leafIndex);
232
264
  }
@@ -238,9 +270,13 @@ export class ColumnMenuComponent {
238
270
  /**
239
271
  * @hidden
240
272
  */
241
- close() {
273
+ close(triggerFocus = false) {
242
274
  this.popupService.destroy();
243
275
  this.popupRef = null;
276
+ this.cdr.markForCheck();
277
+ if (!triggerFocus) {
278
+ return;
279
+ }
244
280
  if (this.navigationService.tableEnabled) {
245
281
  this.navigationService.focusCell(0, this.column.leafIndex);
246
282
  }
@@ -260,7 +296,7 @@ export class ColumnMenuComponent {
260
296
  return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
261
297
  }
262
298
  }
263
- ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
299
+ ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
264
300
  ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuComponent, 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: [
265
301
  ColumnMenuService,
266
302
  MenuTabbingService
@@ -272,7 +308,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
272
308
  (keydown.enter)="$event.stopImmediatePropagation()"
273
309
  href="#"
274
310
  [tabindex]="tabIndex"
275
- [attr.title]="columnMenuTitle">
311
+ [attr.title]="columnMenuTitle"
312
+ [attr.aria-expanded]="isNavigable ? undefined: false"
313
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
276
314
  <kendo-icon-wrapper
277
315
  name="more-vertical"
278
316
  [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -285,7 +323,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
285
323
  </ng-template>
286
324
  <ng-template #defaultTemplate>
287
325
  <kendo-grid-columnmenu-container
288
- (keydown.escape)="close()"
326
+ (keydown.escape)="close(true)"
289
327
  (keydown.enter)="$event.stopImmediatePropagation()">
290
328
  <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
291
329
  </kendo-grid-columnmenu-sort>
@@ -337,7 +375,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
337
375
  </kendo-grid-columnmenu-container>
338
376
  </ng-template>
339
377
  <ng-template #tabbedInterfaceTemplate>
340
- <kendo-tabstrip #tabstrip (keydown.escape)="close()">
378
+ <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
341
379
  <kendo-tabstrip-tab *ngIf="hasFilter">
342
380
  <ng-template kendoTabTitle>
343
381
  <kendo-icon-wrapper
@@ -424,7 +462,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
424
462
  </kendo-tabstrip-tab>
425
463
  </kendo-tabstrip>
426
464
  </ng-template>
427
- `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i8.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i9.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i10.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i11.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i14.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i15.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: i17.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: i18.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i19.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
465
+ `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i9.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i10.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i11.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i12.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i14.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i15.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i16.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i17.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i17.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: i18.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: i19.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i20.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i20.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i17.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i17.TabContentDirective, selector: "[kendoTabContent]" }] });
428
466
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
429
467
  type: Component,
430
468
  args: [{
@@ -441,7 +479,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
441
479
  (keydown.enter)="$event.stopImmediatePropagation()"
442
480
  href="#"
443
481
  [tabindex]="tabIndex"
444
- [attr.title]="columnMenuTitle">
482
+ [attr.title]="columnMenuTitle"
483
+ [attr.aria-expanded]="isNavigable ? undefined: false"
484
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
445
485
  <kendo-icon-wrapper
446
486
  name="more-vertical"
447
487
  [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -454,7 +494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
454
494
  </ng-template>
455
495
  <ng-template #defaultTemplate>
456
496
  <kendo-grid-columnmenu-container
457
- (keydown.escape)="close()"
497
+ (keydown.escape)="close(true)"
458
498
  (keydown.enter)="$event.stopImmediatePropagation()">
459
499
  <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
460
500
  </kendo-grid-columnmenu-sort>
@@ -506,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
506
546
  </kendo-grid-columnmenu-container>
507
547
  </ng-template>
508
548
  <ng-template #tabbedInterfaceTemplate>
509
- <kendo-tabstrip #tabstrip (keydown.escape)="close()">
549
+ <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
510
550
  <kendo-tabstrip-tab *ngIf="hasFilter">
511
551
  <ng-template kendoTabTitle>
512
552
  <kendo-icon-wrapper
@@ -595,7 +635,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
595
635
  </ng-template>
596
636
  `
597
637
  }]
598
- }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }]; }, propDecorators: { standalone: [{
638
+ }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }, { type: i6.IdService, decorators: [{
639
+ type: Optional
640
+ }] }]; }, propDecorators: { standalone: [{
599
641
  type: HostBinding,
600
642
  args: ['class.k-grid-column-menu-standalone']
601
643
  }, {
@@ -23,8 +23,10 @@ import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.compon
23
23
  import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
24
24
  import { ButtonModule } from '@progress/kendo-angular-buttons';
25
25
  import { TabStripModule } from '@progress/kendo-angular-layout';
26
+ import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
26
27
  import * as i0 from "@angular/core";
27
28
  const COMPONENTS = [
29
+ ColumnMenuChooserItemCheckedDirective,
28
30
  ColumnListComponent,
29
31
  ColumnChooserComponent,
30
32
  ColumnMenuChooserComponent,
@@ -67,7 +69,8 @@ export class ColumnMenuModule {
67
69
  }
68
70
  }
69
71
  ColumnMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
70
- ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnListComponent,
72
+ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnMenuChooserItemCheckedDirective,
73
+ ColumnListComponent,
71
74
  ColumnChooserComponent,
72
75
  ColumnMenuChooserComponent,
73
76
  ColumnMenuFilterComponent,
@@ -82,7 +85,8 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
82
85
  ColumnMenuStickComponent,
83
86
  ColumnMenuPositionComponent,
84
87
  ColumnMenuAutoSizeColumnComponent,
85
- ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnListComponent,
88
+ ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnMenuChooserItemCheckedDirective,
89
+ ColumnListComponent,
86
90
  ColumnChooserComponent,
87
91
  ColumnMenuChooserComponent,
88
92
  ColumnMenuFilterComponent,
@@ -5,7 +5,7 @@
5
5
  /**
6
6
  * @hidden
7
7
  */
8
- export const ColunnMenuErrorMessages = {
8
+ export const ColumnMenuErrorMessages = {
9
9
  autoSizeColumn: 'The auto size column does not work with enabled virtual columns',
10
10
  autoSizeAllColumns: 'The auto size all columns does not work with enabled virtual columns'
11
11
  };
@@ -75,7 +75,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
75
75
  [value]="currentFilter?.value">
76
76
  </kendo-autocomplete>
77
77
  </kendo-grid-filter-wrapper-cell>
78
- `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
78
+ `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
79
79
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
80
80
  type: Component,
81
81
  args: [{
@@ -80,7 +80,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
80
80
  [value]="currentFilter?.value">
81
81
  </kendo-dropdownlist>
82
82
  </kendo-grid-filter-wrapper-cell>
83
- `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
83
+ `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
84
84
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
85
85
  type: Component,
86
86
  args: [{
@@ -151,7 +151,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
151
151
  [size]="size"
152
152
  (click)="clearClick()"
153
153
  (keydown)="clearKeydown($event)"></button>
154
- `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
154
+ `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
155
155
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
156
156
  type: Component,
157
157
  args: [{
@@ -124,7 +124,7 @@ DateFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
124
124
  [menuTabbingService]="menuTabbingService"
125
125
  >
126
126
  </kendo-grid-date-filter-menu-input>
127
- `, isInline: true, components: [{ type: i2.DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
127
+ `, isInline: true, components: [{ type: i2.DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
128
128
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
129
129
  type: Component,
130
130
  args: [{
@@ -137,10 +137,10 @@ export class FilterMenuContainerComponent {
137
137
  e.preventDefault();
138
138
  if (buttonType === 'reset') {
139
139
  // eslint-disable-next-line no-unused-expressions
140
- this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
140
+ this.menuTabbingService.firstFocusable.focus();
141
141
  }
142
142
  else {
143
- this.menuTabbingService.firstFocusable.focus();
143
+ this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.resetButton.nativeElement.focus();
144
144
  }
145
145
  }
146
146
  }
@@ -95,7 +95,7 @@ FilterMenuInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
95
95
  (keydown.shift.tab)="onShiftTab($event)">
96
96
  </kendo-dropdownlist>
97
97
  <ng-content></ng-content>
98
- `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
98
+ `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
100
100
  type: Component,
101
101
  args: [{
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { NavigationService } from './../../navigation/navigation.service';
6
- import { Component, ElementRef, Input, TemplateRef, ViewChild } from '@angular/core';
6
+ import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
7
7
  import { FilterService } from "../filter.service";
8
8
  import { ColumnComponent } from '../../columns/column.component';
9
9
  import { SinglePopupService } from '../../common/single-popup.service';
@@ -11,22 +11,30 @@ import { filtersByField } from '../base-filter-cell.component';
11
11
  import { replaceMessagePlaceholder } from '../../utils';
12
12
  import { filterIcon } from '@progress/kendo-svg-icons';
13
13
  import { ContextService } from '../../common/provider.service';
14
+ import { IdService } from '../../common/id.service';
15
+ import { take } from 'rxjs/operators';
14
16
  import * as i0 from "@angular/core";
15
17
  import * as i1 from "../filter.service";
16
18
  import * as i2 from "../../common/single-popup.service";
17
19
  import * as i3 from "../../common/provider.service";
18
20
  import * as i4 from "./../../navigation/navigation.service";
19
- import * as i5 from "@progress/kendo-angular-icons";
20
- import * as i6 from "./filter-menu-container.component";
21
+ import * as i5 from "../../common/id.service";
22
+ import * as i6 from "@progress/kendo-angular-icons";
23
+ import * as i7 from "./filter-menu-container.component";
24
+ let id = 0;
25
+ const getId = (gridId) => `${gridId}-filter-menu-${id++}`;
21
26
  /**
22
27
  * @hidden
23
28
  */
24
29
  export class FilterMenuComponent {
25
- constructor(filterService, popupService, ctx, navigationService) {
30
+ constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
26
31
  this.filterService = filterService;
27
32
  this.popupService = popupService;
28
33
  this.ctx = ctx;
29
34
  this.navigationService = navigationService;
35
+ this.renderer = renderer;
36
+ this.cdr = cdr;
37
+ this.idService = idService;
30
38
  this.filterIcon = filterIcon;
31
39
  this.tabIndex = '-1';
32
40
  }
@@ -41,9 +49,35 @@ export class FilterMenuComponent {
41
49
  const columnName = this.column.title || this.column.field;
42
50
  return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
43
51
  }
52
+ /**
53
+ * @hidden
54
+ */
55
+ get isNavigable() {
56
+ return this.navigationService.tableEnabled;
57
+ }
44
58
  toggle(anchor, template) {
45
59
  this.popupRef = this.popupService.open(anchor, template, this.popupRef);
46
- if (!this.popupRef) {
60
+ // Needed as changes to 'popupRef' are not reflected
61
+ // automatically when the Popup is closed by clicking outside the anchor
62
+ const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
63
+ if (this.popupRef) {
64
+ this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
65
+ this.popupRef = null;
66
+ const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
67
+ ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
68
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
69
+ });
70
+ const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
71
+ if (popupAriaElement) {
72
+ const popupId = getId(this.idService?.gridId());
73
+ this.renderer.setAttribute(popupAriaElement, 'id', popupId);
74
+ this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
75
+ this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
76
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
77
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
78
+ }
79
+ }
80
+ else {
47
81
  if (this.navigationService.tableEnabled) {
48
82
  this.navigationService.focusCell(0, this.column.leafIndex);
49
83
  }
@@ -55,6 +89,8 @@ export class FilterMenuComponent {
55
89
  }
56
90
  close() {
57
91
  this.popupService.destroy();
92
+ this.popupRef = null;
93
+ this.cdr.markForCheck();
58
94
  if (this.navigationService.tableEnabled) {
59
95
  this.navigationService.focusCell(0, this.column.leafIndex);
60
96
  }
@@ -63,7 +99,7 @@ export class FilterMenuComponent {
63
99
  }
64
100
  }
65
101
  }
66
- FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
102
+ FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
67
103
  FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
68
104
  <a #anchor
69
105
  class="k-grid-filter-menu k-grid-header-menu"
@@ -72,7 +108,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
72
108
  (click)="toggle(anchor, template)"
73
109
  (keydown.enter)="$event.stopImmediatePropagation()"
74
110
  href="#"
75
- [attr.title]="filterLabel">
111
+ [attr.title]="filterLabel"
112
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
113
+ [attr.aria-expanded]="isNavigable ? undefined : false">
76
114
  <kendo-icon-wrapper
77
115
  name="filter"
78
116
  [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -87,7 +125,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
87
125
  >
88
126
  </kendo-grid-filter-menu-container>
89
127
  </ng-template>
90
- `, isInline: true, components: [{ type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i6.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
128
+ `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
91
129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
92
130
  type: Component,
93
131
  args: [{
@@ -100,7 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
100
138
  (click)="toggle(anchor, template)"
101
139
  (keydown.enter)="$event.stopImmediatePropagation()"
102
140
  href="#"
103
- [attr.title]="filterLabel">
141
+ [attr.title]="filterLabel"
142
+ [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
143
+ [attr.aria-expanded]="isNavigable ? undefined : false">
104
144
  <kendo-icon-wrapper
105
145
  name="filter"
106
146
  [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -117,7 +157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
117
157
  </ng-template>
118
158
  `
119
159
  }]
120
- }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }]; }, propDecorators: { column: [{
160
+ }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.IdService, decorators: [{
161
+ type: Optional
162
+ }] }]; }, propDecorators: { column: [{
121
163
  type: Input
122
164
  }], filter: [{
123
165
  type: Input
@@ -125,7 +125,7 @@ NumericFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
125
125
  [menuTabbingService]="menuTabbingService"
126
126
  >
127
127
  </kendo-grid-numeric-filter-menu-input>
128
- `, isInline: true, components: [{ type: i2.NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
128
+ `, isInline: true, components: [{ type: i2.NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
129
129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
130
130
  type: Component,
131
131
  args: [{
@@ -103,7 +103,7 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
103
103
  [filter]="filter"
104
104
  [menuTabbingService]="menuTabbingService">
105
105
  </kendo-grid-string-filter-menu-input>
106
- `, isInline: true, components: [{ type: i2.StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
106
+ `, isInline: true, components: [{ type: i2.StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
107
107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
108
108
  type: Component,
109
109
  args: [{
@@ -108,7 +108,7 @@ export class LogicalCellDirective {
108
108
  this.renderer.addClass(el, 'k-focus');
109
109
  }
110
110
  if (this.headerLabelText) {
111
- el.setAttribute('aria-label', '');
111
+ el.removeAttribute('aria-label');
112
112
  }
113
113
  }
114
114
  else {
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-grid',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1692286635,
13
- version: '13.4.0-develop.1',
12
+ publishDate: 1693036824,
13
+ version: '13.4.0-develop.11',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };