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

package/esm2020/column-menu/column-list.component.mjs

@@ -2,19 +2,25 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChild } from '@angular/core';
-import { hasClasses } from '../rendering/common/dom-queries';
+import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
+import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
+import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
+import { Keys } from '@progress/kendo-angular-common';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "./column-list-kb-nav.service";
+import * as i2 from "@angular/common";
+import * as i3 from "./column-chooser-item-checked.directive";
 /**
  * @hidden
  */
 export class ColumnListComponent {
-    constructor(element, ngZone, renderer) {
+    constructor(element, ngZone, renderer, listNavigationService) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.listNavigationService = listNavigationService;
         this.reset = new EventEmitter();
         this.apply = new EventEmitter();
         this.columnChange = new EventEmitter();
@@ -22,10 +28,28 @@ export class ColumnListComponent {
         this.allowHideAll = false;
         this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
+        this.domSubscriptions = new Subscription();
+        this.onKeydown = (e) => {
+            if (e.keyCode !== Keys.Tab) {
+                e.preventDefault();
+            }
+            if (e.keyCode === Keys.ArrowDown) {
+                this.listNavigationService.next();
+            }
+            else if (e.keyCode === Keys.ArrowUp) {
+                this.listNavigationService.prev();
+            }
+            else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
+                this.listNavigationService.toggleCheckedState();
+            }
+        };
     }
     get className() {
         return true;
     }
+    isChecked(checkbox) {
+        return checkbox.checked;
+    }
     set columns(value) {
         this._columns = value.filter(column => column.includeInChooser !== false);
         this.allColumns = value;
@@ -43,12 +67,21 @@ export class ColumnListComponent {
             return;
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                if (hasClasses(e.target, 'k-checkbox')) {
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                const closestItem = e.target.closest('.k-column-list-item');
+                if (closestItem) {
+                    const checkbox = closestItem.querySelector('.k-checkbox');
+                    const index = parseInt(checkbox.getAttribute('data-index'), 10);
+                    if (e.target === checkbox) {
+                        closestItem.focus();
+                    }
+                    else {
+                        e.preventDefault();
+                        checkbox.checked = !checkbox.checked;
+                    }
                     if (this.autoSync) {
-                        const index = parseInt(e.target.getAttribute('data-index'), 10);
                         const column = this.columns[index];
-                        const hidden = !e.target.checked;
+                        const hidden = !checkbox.checked;
                         if (Boolean(column.hidden) !== hidden) {
                             this.ngZone.run(() => {
                                 column.hidden = hidden;
@@ -59,10 +92,20 @@ export class ColumnListComponent {
                     else {
                         this.updateDisabled();
                     }
+                    if (index !== this.listNavigationService.activeIndex) {
+                        this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                        this.listNavigationService.activeIndex = index;
+                        this.listNavigationService.toggle(index, true);
+                    }
                 }
-            });
+            }));
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
     }
+    ngAfterViewInit() {
+        this.listNavigationService.items = this.options.toArray();
+        this.listNavigationService.toggle(0, true);
+    }
     ngOnChanges(changes) {
         if (!this.service) {
             return;
@@ -75,9 +118,7 @@ export class ColumnListComponent {
         }
     }
     ngOnDestroy() {
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
-        }
+        this.domSubscriptions.unsubscribe();
     }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
@@ -105,6 +146,9 @@ export class ColumnListComponent {
             if (this.service) {
                 this.service.menuTabbingService.firstFocusable.focus();
             }
+            else {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
+            }
         }
     }
     forEachCheckBox(callback) {
@@ -151,35 +195,94 @@ export class ColumnListComponent {
         }
     }
 }
-ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, viewQueries: [{ propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
+ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnlist',
+                    providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ["class.k-column-list-wrapper"]
             }], reset: [{
@@ -192,6 +295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], autoSync: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], applyText: [{
@@ -206,7 +311,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], service: [{
                 type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
             }], applyButton: [{
                 type: ViewChild,
                 args: ['applyButton', { static: false }]
+            }], options: [{
+                type: ViewChildren,
+                args: [ColumnMenuChooserItemCheckedDirective]
             }] } });

package/esm2020/column-menu/column-menu-autosize-all.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, isDevMode } from '@angular/core';
 import { displayInlineFlexIcon } from '@progress/kendo-svg-icons';
-import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
@@ -39,7 +39,7 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+            console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
         }
     }
     /**

package/esm2020/column-menu/column-menu-autosize.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, isDevMode } from '@angular/core';
 import { maxWidthIcon } from '@progress/kendo-svg-icons';
-import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { autoSizeColumn } from './utils';
@@ -40,7 +40,7 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+            console.warn(ColumnMenuErrorMessages.autoSizeColumn);
         }
     }
     /**

package/esm2020/column-menu/column-menu-chooser.component.mjs

@@ -103,6 +103,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -114,7 +115,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -131,6 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"

package/esm2020/column-menu/column-menu-item.component.mjs

@@ -5,6 +5,7 @@
 import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/core';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { guid } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-icons";
 import * as i2 from "@angular/common";
@@ -37,6 +38,9 @@ export class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
+    ngAfterViewInit() {
+        this.contentTemplate && (this.contentId = `k-${guid()}`);
+    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -71,13 +75,14 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
@@ -139,13 +144,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>