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

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

@@ -0,0 +1,306 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ChangeDetectorRef, ViewChild, EventEmitter, Output, ElementRef, Optional } from '@angular/core';
+import { ColumnInfoService } from '../common/column-info.service';
+import { EventsOutsideAngularDirective, PrefixTemplateDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
+import { arrowRotateCcwIcon, checkIcon, searchIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { ColumnListComponent } from './column-list.component';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
+import { NgClass, NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { ColumnMenuService } from './column-menu.service';
+import { ContextService } from '../common/provider.service';
+import { filterBy } from '@progress/kendo-data-query';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/column-info.service";
+import * as i2 from "../common/provider.service";
+/**
+ * @hidden
+ */
+export class ColumnChooserContentComponent {
+    cdr;
+    columnInfoService;
+    ctx;
+    resetButton;
+    applyButton;
+    columnList;
+    filterInput;
+    filterable = true;
+    showSelectAll = true;
+    showCheckedCount = true;
+    allowHideAll = false;
+    autoSync = false;
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    closeOnReset = true;
+    set columns(value) {
+        this._columns = value;
+    }
+    get columns() {
+        return this._columns;
+    }
+    isLast;
+    isExpanded;
+    service;
+    close = new EventEmitter();
+    get selectedItemsText() {
+        const count = this.columnList?.checkedCheckboxesLength || 0;
+        const localizedMessage = this.messageFor('columnChooserSelectedColumnsCount');
+        return replaceMessagePlaceholder(localizedMessage, 'selectedColumnsCount', count.toString());
+    }
+    get actionSheetOpened() {
+        return this.ctx?.grid?.isActionSheetExpanded;
+    }
+    searchIcon = searchIcon;
+    checkIcon = checkIcon;
+    arrowRotateCcwIcon = arrowRotateCcwIcon;
+    applyText;
+    resetText;
+    filteredColumns = [];
+    isFiltered = false;
+    _columns = [];
+    constructor(cdr, columnInfoService, ctx) {
+        this.cdr = cdr;
+        this.columnInfoService = columnInfoService;
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        this.applyText = this.ctx?.localization.get('columnsApply');
+        this.resetText = this.ctx?.localization.get('columnsReset');
+    }
+    ngAfterViewInit() {
+        this.filteredColumns = this.columnInfoService?.leafNamedColumns.filter(column => {
+            if (column.includeInChooser !== false) {
+                column.initiallyChecked = column.currentlyChecked = !column.hidden;
+                return true;
+            }
+            return false;
+        });
+        this.cdr.detectChanges();
+    }
+    ngAfterViewChecked() {
+        this.columnList.resetButton = this.resetButton;
+        this.columnList.applyButton = this.applyButton;
+        this.columnList.filterInput = this.filterInput;
+    }
+    onFilter(value) {
+        this.isFiltered = value.length > 0;
+        this.showSelectAll = !this.isFiltered;
+        const filterDescriptor = {
+            field: 'displayTitle',
+            operator: 'contains',
+            value: value
+        };
+        this.filteredColumns = filterBy(this.columnInfoService?.leafNamedColumns, filterDescriptor);
+        this.cdr.detectChanges();
+        this.columnList.listNavigationService.activeIndex = 0;
+        this.columnList.listNavigationService.items = this.columnList.checkboxes?.toArray();
+    }
+    messageFor = token => this.ctx?.localization.get(token);
+    onChange(changed) {
+        this.cdr.markForCheck();
+        this.columnInfoService?.changeVisibility(changed);
+    }
+    applyChanges() {
+        this.columnList.applyChanges();
+        this.close.emit();
+    }
+    cancelChanges() {
+        this.columnList.cancelChanges();
+        if (this.closeOnReset) {
+            this.close.emit();
+        }
+    }
+    onTab(e) {
+        if (e.key === 'Tab' && !e.shiftKey) {
+            this.columnList.listNavigationService.toggle(this.columnList.listNavigationService.activeIndex, true);
+            e.preventDefault();
+        }
+        if (e.key === 'Tab' && e.shiftKey && !this.service) {
+            this.columnList.resetButton?.nativeElement.focus();
+            e.preventDefault();
+        }
+    }
+    onApplyButtonKeydown(e) {
+        if (e.key === 'Tab') {
+            this.columnList.focusActiveColumn(e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserContentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ColumnInfoService, optional: true }, { token: i2.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserContentComponent, isStandalone: true, selector: "kendo-grid-column-chooser-content", inputs: { filterable: "filterable", showSelectAll: "showSelectAll", showCheckedCount: "showCheckedCount", allowHideAll: "allowHideAll", autoSync: "autoSync", actionsClass: "actionsClass", closeOnReset: "closeOnReset", columns: "columns", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
+            <form class="k-filter-menu">
+                <div class="k-filter-menu-container">
+                    <kendo-textbox
+                        #filterInput
+                        *ngIf="filterable"
+                        class="k-searchbox"
+                        (valueChange)="onFilter($event)"
+                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                        [scope]="this"
+                        >
+                        <ng-template kendoPrefixTemplate>
+                            <kendo-icon-wrapper
+                                [name]="'search'"
+                                [svgIcon]="searchIcon">
+                            </kendo-icon-wrapper>
+                        </ng-template>
+                    </kendo-textbox>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="columns"
+                        [filteredColumns]="filteredColumns"
+                        [ariaLabel]="messageFor('columns')"
+                        [showSelectAll]="showSelectAll"
+                        [isLast]="isLast"
+                        [isFiltered]="isFiltered"
+                        [filterable]="filterable"
+                        [isExpanded]="isExpanded"
+                        [service]="service"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="autoSync"
+                        [allowHideAll]="allowHideAll"
+                        (columnChange)="onChange($event)"
+                        >
+                    </kendo-grid-columnlist>
+                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
+                        {{selectedItemsText}}
+                    </div>
+                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
+                        <button
+                            #applyButton
+                            kendoButton
+                            type="button"
+                            icon="check"
+                            [svgIcon]="checkIcon"
+                            themeColor="primary"
+                            (click)="applyChanges()"
+                            (keydown)="onApplyButtonKeydown($event)"
+                        >{{ applyText }}</button>
+                        <button
+                            #resetButton
+                            kendoButton
+                            type="button"
+                            icon="reset"
+                            (keydown.tab)="columnList.onTab($event)"
+                            [svgIcon]="arrowRotateCcwIcon"
+                            (click)="cancelChanges()"
+                        >{{ resetText }}</button>
+                    </div>
+                </div>
+            </form>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "filteredColumns", "autoSync", "showSelectAll", "isFiltered", "ariaLabel", "allowHideAll", "applyText", "resetText", "isLast", "isExpanded", "service", "filterable"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-chooser-content',
+                    template: `
+            <form class="k-filter-menu">
+                <div class="k-filter-menu-container">
+                    <kendo-textbox
+                        #filterInput
+                        *ngIf="filterable"
+                        class="k-searchbox"
+                        (valueChange)="onFilter($event)"
+                        [kendoEventsOutsideAngular]="{'keydown': onTab}"
+                        [scope]="this"
+                        >
+                        <ng-template kendoPrefixTemplate>
+                            <kendo-icon-wrapper
+                                [name]="'search'"
+                                [svgIcon]="searchIcon">
+                            </kendo-icon-wrapper>
+                        </ng-template>
+                    </kendo-textbox>
+                    <kendo-grid-columnlist
+                        #columnList
+                        [columns]="columns"
+                        [filteredColumns]="filteredColumns"
+                        [ariaLabel]="messageFor('columns')"
+                        [showSelectAll]="showSelectAll"
+                        [isLast]="isLast"
+                        [isFiltered]="isFiltered"
+                        [filterable]="filterable"
+                        [isExpanded]="isExpanded"
+                        [service]="service"
+                        [applyText]="messageFor('columnsApply')"
+                        [resetText]="messageFor('columnsReset')"
+                        [autoSync]="autoSync"
+                        [allowHideAll]="allowHideAll"
+                        (columnChange)="onChange($event)"
+                        >
+                    </kendo-grid-columnlist>
+                    <div *ngIf="showCheckedCount" class="k-filter-selected-items">
+                        {{selectedItemsText}}
+                    </div>
+                    <div [ngClass]="actionsClass" *ngIf="!autoSync && !actionSheetOpened">
+                        <button
+                            #applyButton
+                            kendoButton
+                            type="button"
+                            icon="check"
+                            [svgIcon]="checkIcon"
+                            themeColor="primary"
+                            (click)="applyChanges()"
+                            (keydown)="onApplyButtonKeydown($event)"
+                        >{{ applyText }}</button>
+                        <button
+                            #resetButton
+                            kendoButton
+                            type="button"
+                            icon="reset"
+                            (keydown.tab)="columnList.onTab($event)"
+                            [svgIcon]="arrowRotateCcwIcon"
+                            (click)="cancelChanges()"
+                        >{{ resetText }}</button>
+                    </div>
+                </div>
+            </form>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, ButtonComponent, ColumnListComponent, TextBoxComponent, PrefixTemplateDirective, IconWrapperComponent, EventsOutsideAngularDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ColumnInfoService, decorators: [{
+                    type: Optional
+                }] }, { type: i2.ContextService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { resetButton: [{
+                type: ViewChild,
+                args: ['resetButton']
+            }], applyButton: [{
+                type: ViewChild,
+                args: ['applyButton']
+            }], columnList: [{
+                type: ViewChild,
+                args: ['columnList']
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], filterable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], showCheckedCount: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }], autoSync: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], closeOnReset: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });

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');
+        const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
+        element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
         active && element?.focus();
     }
     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 });