@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
173 lines (172 loc) • 8.36 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* 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
}] } });