@progress/kendo-angular-grid 19.0.0-develop.3 → 19.0.0-develop.31

package/esm2022/column-menu/column-chooser-tool.directive.mjs

@@ -1,172 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2025 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, NgZone, Input, Renderer2 } from '@angular/core';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { ColumnListComponent } from './column-list.component';
-import { closest, isPresent } from '@progress/kendo-angular-common';
-import { Subscription } from 'rxjs';
-import { columnsIcon } from '@progress/kendo-svg-icons';
-import { ContextService } from '../common/provider.service';
-import { filter, take } from 'rxjs/operators';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-popup";
-import * as i2 from "@progress/kendo-angular-toolbar";
-import * as i3 from "../common/provider.service";
-let incrementingId = 0;
-/**
- * Represents the `column-chooser` toolbar tool of the Grid.
- * You can apply this directive to any `kendo-toolbar-button` element inside a
- * ToolbarComponent used in the Grid.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *      <kendo-toolbar>
- *         <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
- *      </kendo-toolbar>
- * </kendo-grid>
- * ```
- */
-export class ColumnChooserToolbarDirective {
-    renderer;
-    popupSerivce;
-    host;
-    ctx;
-    zone;
-    refresh;
-    /**
-     * Specifies if the changes in the visibility of the column will be immediately applied.
-     *
-     * @default false
-     */
-    autoSync = false;
-    /**
-     * Specifies if all columns can be hidden.
-     *
-     * @default true
-     */
-    allowHideAll = true;
-    popupRef;
-    subs = new Subscription();
-    nextId = incrementingId++;
-    constructor(renderer, popupSerivce, host, ctx, zone, refresh) {
-        this.renderer = renderer;
-        this.popupSerivce = popupSerivce;
-        this.host = host;
-        this.ctx = ctx;
-        this.zone = zone;
-        this.refresh = refresh;
-    }
-    ngOnInit() {
-        this.subs.add(this.host.click.subscribe(e => this.onClick(e)));
-        const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
-        const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
-        const hasIcon = hasToolbarIcon && hasOverflowIcon;
-        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
-        if (!hasIcon) {
-            this.host.icon = 'columns';
-        }
-        if (!hasSvgIcon) {
-            this.host.svgIcon = columnsIcon;
-        }
-    }
-    ngAfterViewInit() {
-        const hasText = isPresent(this.host.text);
-        if (!hasText) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.host.text = this.ctx.localization.get(`columns`);
-            });
-        }
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-haspopup', 'dialog');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('title', this.ctx.localization.get('columns'));
-        this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
-            if (tool.overflows && this.popupRef) {
-                this.popupRef.close();
-            }
-        }));
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    onClick(e) {
-        e.preventDefault();
-        if (!this.popupRef) {
-            if (!this.host.overflows) {
-                const direction = this.ctx.localization.rtl ? 'right' : 'left';
-                this.popupRef = this.popupSerivce.open({
-                    anchor: this.host.toolbarButtonElement,
-                    content: ColumnListComponent,
-                    positionMode: 'absolute',
-                    anchorAlign: { vertical: 'bottom', horizontal: direction },
-                    popupAlign: { vertical: 'top', horizontal: direction }
-                });
-                const popupElement = this.popupRef.popupElement;
-                const popupId = `k-column-chooser-tool-${this.nextId}-popup`;
-                const popupAriaElement = popupElement.querySelector('.k-popup');
-                this.zone.runOutsideAngular(() => {
-                    this.renderer.listen(popupAriaElement, 'keydown', (e) => {
-                        if (e.key === 'Escape') {
-                            this.closePopup(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.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
-                this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
-                const columnList = this.popupRef.content.instance;
-                columnList.isLast = true;
-                columnList.autoSync = this.autoSync;
-                columnList.allowHideAll = this.allowHideAll;
-                columnList.applyText = this.ctx.localization.get('columnsApply');
-                columnList.resetText = this.ctx.localization.get('columnsReset');
-                columnList.columns = this.ctx.grid.columns;
-                columnList.ariaLabel = this.ctx.localization.get('columns');
-                this.subs.add(this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
-                    this.closePopup(true);
-                }));
-                this.subs.add(columnList.apply.subscribe(() => {
-                    this.closePopup();
-                }));
-                this.zone.runOutsideAngular(() => this.renderer.listen('document', 'click', ({ target }) => {
-                    if (this.popupRef && !closest(target, node => node === this.popupRef.popupElement || node === this.host.toolbarButtonElement.nativeElement)) {
-                        this.zone.run(() => {
-                            this.closePopup();
-                        });
-                    }
-                }));
-            }
-        }
-        else {
-            this.closePopup();
-        }
-    }
-    closePopup(focusAnchor = false) {
-        this.popupRef.close();
-        this.popupRef = null;
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
-        focusAnchor && this.host.toolbarButtonElement.nativeElement.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridColumnChooserTool]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PopupService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i2.RefreshService }]; }, propDecorators: { autoSync: [{
-                type: Input
-            }], allowHideAll: [{
-                type: Input
-            }] } });