@progress/kendo-angular-grid 21.4.1 → 22.0.0

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

@@ -1,230 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, Input, NgZone, Renderer2, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { ColumnInfoService } from '../common/column-info.service';
-import { closest } from '../rendering/common/dom-queries';
-import { Keys, guid, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { columnsIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { ContextService } from '../common/provider.service';
-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";
-import * as i3 from "@progress/kendo-angular-popup";
-/**
- * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
- * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
- * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
- *
- * @example
- * ```html
- * <kendo-grid [data]="data">
- *   <ng-template kendoGridToolbarTemplate>
- *     <kendo-grid-column-chooser></kendo-grid-column-chooser>
- *   </ng-template>
- *   <kendo-grid-column field="ProductID"></kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-export class ColumnChooserComponent {
-    ctx;
-    columnInfoService;
-    popupService;
-    ngZone;
-    renderer;
-    changeDetector;
-    /**
-     * Specifies if the changes in the visibility of the column will be immediately applied.
-     *
-     * @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.
-     *
-     * @default true
-     */
-    allowHideAll = true;
-    anchor;
-    get columns() {
-        return this.columnInfoService.leafNamedColumns;
-    }
-    columnsIcon = columnsIcon;
-    popupRef;
-    popupId;
-    closeClick;
-    escapeListener;
-    constructor(ctx, columnInfoService, popupService, ngZone, renderer, changeDetector) {
-        this.ctx = ctx;
-        this.columnInfoService = columnInfoService;
-        this.popupService = popupService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.changeDetector = changeDetector;
-    }
-    ngOnDestroy() {
-        this.close();
-    }
-    /**
-     * @hidden
-     */
-    messageFor = token => this.ctx.localization.get(token);
-    /**
-     * @hidden
-     */
-    toggle(anchor, template) {
-        if (!this.popupRef) {
-            const direction = this.ctx.localization.rtl ? 'right' : 'left';
-            this.popupRef = this.popupService.open({
-                anchor: anchor.element,
-                content: template,
-                positionMode: 'absolute',
-                anchorAlign: { vertical: 'bottom', horizontal: direction },
-                popupAlign: { vertical: 'top', horizontal: direction }
-            });
-            const popupElement = this.popupRef?.popupElement;
-            if (popupElement) {
-                const popupId = `k-${guid()}`;
-                const popupAriaElement = popupElement.querySelector('.k-popup');
-                this.ngZone.runOutsideAngular(() => {
-                    this.escapeListener = this.renderer.listen(popupAriaElement, 'keydown', (e) => {
-                        if (e.code === Keys.Escape) {
-                            this.close(true);
-                        }
-                    });
-                });
-                this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
-                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
-                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-                this.popupId = popupId;
-            }
-            if (!isDocumentAvailable()) {
-                return;
-            }
-            this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
-                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
-                    this.ngZone.run(() => {
-                        this.close();
-                    });
-                }
-            }));
-        }
-        else {
-            this.close();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onChange(changed) {
-        this.changeDetector.markForCheck();
-        this.columnInfoService.changeVisibility(changed);
-    }
-    /**
-     * @hidden
-     */
-    close(focusAnchor = false) {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-            this.changeDetector.markForCheck();
-            this.escapeListener?.();
-        }
-        this.detachClose();
-        focusAnchor && this.anchor.element.focus();
-    }
-    detachClose() {
-        if (this.closeClick) {
-            this.closeClick();
-            this.closeClick = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", 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 }], ngImport: i0, template: `
-        <button #anchor
-            kendoButton
-            type="button"
-            (click)="toggle(anchor, template)"
-            fillMode="flat"
-            [attr.title]="messageFor('columns')"
-            icon="columns"
-            [svgIcon]="columnsIcon"
-            [attr.aria-haspopup]="'dialog'"
-            [attr.aria-expanded]="!!(popupRef)"
-            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
-        <ng-template #template>
-            <kendo-grid-column-chooser-content
-                [columns]="columns"
-                [autoSync]="autoSync"
-                [filterable]="filterable"
-                [showSelectAll]="showSelectAll"
-                [closeOnReset]="false"
-                [isLast]="true"
-                [allowHideAll]="allowHideAll"
-                (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: 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: "18.2.14", ngImport: i0, type: ColumnChooserComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-column-chooser',
-                    template: `
-        <button #anchor
-            kendoButton
-            type="button"
-            (click)="toggle(anchor, template)"
-            fillMode="flat"
-            [attr.title]="messageFor('columns')"
-            icon="columns"
-            [svgIcon]="columnsIcon"
-            [attr.aria-haspopup]="'dialog'"
-            [attr.aria-expanded]="!!(popupRef)"
-            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
-        <ng-template #template>
-            <kendo-grid-column-chooser-content
-                [columns]="columns"
-                [autoSync]="autoSync"
-                [filterable]="filterable"
-                [showSelectAll]="showSelectAll"
-                [closeOnReset]="false"
-                [isLast]="true"
-                [allowHideAll]="allowHideAll"
-                (close)="close(true)"
-            >
-            </kendo-grid-column-chooser-content>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, ColumnChooserContentComponent]
-                }]
-        }], ctorParameters: () => [{ 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: [{
-                type: ViewChild,
-                args: ['anchor']
-            }] } });

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

@@ -1,40 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Injectable, Renderer2 } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class ColumnListKeyboardNavigation {
-    renderer;
-    items;
-    activeIndex = 0;
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    next() {
-        this.toggle(this.activeIndex, false);
-        this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1);
-        this.toggle(this.activeIndex, true);
-    }
-    prev() {
-        this.toggle(this.activeIndex, false);
-        this.activeIndex = Math.max(this.activeIndex - 1, 0);
-        this.toggle(this.activeIndex, true);
-    }
-    toggle(index, active) {
-        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].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnListKeyboardNavigation });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnListKeyboardNavigation, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.Renderer2 }] });