@progress/kendo-angular-grid 20.0.4-develop.2 → 20.1.0-develop.10

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

@@ -11,6 +11,7 @@ import { columnsIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import { ColumnListComponent } from './column-list.component';
+import { ColumnChooserContentComponent } from './column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "../common/column-info.service";
@@ -43,6 +44,18 @@ export class ColumnChooserComponent {
      * @default false
      */
     autoSync = false;
+    /**
+     * Specifies if the column chooser displays a search box.
+     *
+     * @default true
+     */
+    filterable = true;
+    /**
+     * Specifies if the column chooser displays a select all checkbox.
+     *
+     * @default true
+     */
+    showSelectAll = true;
     /**
      * Specifies if all columns can be hidden.
      *
@@ -118,16 +131,6 @@ export class ColumnChooserComponent {
             this.close();
         }
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close(true);
-        if (changed.length) {
-            this.changeDetector.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -135,6 +138,9 @@ export class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
+    /**
+     * @hidden
+     */
     close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
@@ -152,7 +158,7 @@ export class ColumnChooserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserComponent, isStandalone: true, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", filterable: "filterable", showSelectAll: "showSelectAll", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
@@ -165,20 +171,19 @@ export class ColumnChooserComponent {
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <kendo-grid-columnlist
-                #columnList
+            <kendo-grid-column-chooser-content
                 [columns]="columns"
-                [ariaLabel]="messageFor('columns')"
-                [isLast]="true"
-                [applyText]="messageFor('columnsApply')"
-                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
+                [filterable]="filterable"
+                [showSelectAll]="showSelectAll"
+                [closeOnReset]="false"
+                [isLast]="true"
                 [allowHideAll]="allowHideAll"
-                (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
-            </kendo-grid-columnlist>
+                (close)="close(true)"
+            >
+            </kendo-grid-column-chooser-content>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
@@ -197,25 +202,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <kendo-grid-columnlist
-                #columnList
+            <kendo-grid-column-chooser-content
                 [columns]="columns"
-                [ariaLabel]="messageFor('columns')"
-                [isLast]="true"
-                [applyText]="messageFor('columnsApply')"
-                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
+                [filterable]="filterable"
+                [showSelectAll]="showSelectAll"
+                [closeOnReset]="false"
+                [isLast]="true"
                 [allowHideAll]="allowHideAll"
-                (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
-            </kendo-grid-columnlist>
+                (close)="close(true)"
+            >
+            </kendo-grid-column-chooser-content>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, ColumnListComponent]
+                    imports: [ButtonComponent, ColumnListComponent, ColumnChooserContentComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i3.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { autoSync: [{
                 type: Input
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], anchor: [{

package/esm2022/column-menu/column-list-kb-nav.service.mjs

@@ -25,12 +25,12 @@ export class ColumnListKeyboardNavigation {
         this.toggle(this.activeIndex, true);
     }
     toggle(index, active) {
-        const element = this.items[index]?.host.nativeElement;
-        element && this.renderer.setAttribute(this.items[index].host.nativeElement, 'tabindex', active ? '0' : '-1');
-        active && element?.focus();
+        const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
+        element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
+        active && element?.focus({ preventScroll: true });
     }
     toggleCheckedState() {
-        this.items[this.activeIndex].host.nativeElement.firstElementChild.click();
+        this.items[this.activeIndex].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListKeyboardNavigation });