@progress/kendo-angular-treelist
Version:
Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.
133 lines (132 loc) • 5.39 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 { PopupService } from '@progress/kendo-angular-popup';
import { Injectable, Renderer2, NgZone } from '@angular/core';
import { isPresent } from '../utils';
import { PreventableEvent } from './preventable-event';
import { Subject } from 'rxjs';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ScrollSyncService } from '../scrolling/scroll-sync.service';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { skip } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-popup";
import * as i2 from "../scrolling/scroll-sync.service";
import * as i3 from "@progress/kendo-angular-l10n";
const contains = (node, predicate) => {
while (node) {
if (predicate(node)) {
return true;
}
node = node.parentNode;
}
return false;
};
/**
* Provides arguments for the `close` event of the filter and column-menu popup. Use this event to access the original DOM event that triggers the popup to close and to prevent the default closing behavior if needed.
*/
export class PopupCloseEvent extends PreventableEvent {
/**
* Stores the original DOM event that causes the popup to close.
*/
originalEvent;
/**
* @hidden
*/
constructor(e) {
super();
this.originalEvent = e;
}
}
const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
/**
* Represents the service used for the popups of the filter and column menus.
* Use this service to manage popup opening, closing, and event handling.
* ([See example]({% slug filter_menu_treelist %}#toc-filter-menu-with-popup)).
*/
export class SinglePopupService {
popupService;
renderer;
ngZone;
localization;
/**
* Emits when the filter or column menus are about to close because the user clicked outside their popups.
* Use this event to prevent the popup from closing.
*/
onClose = new Subject();
removeClick;
popupRef;
scrollSubscription;
/**
* @hidden
*/
constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
this.popupService = popupService;
this.renderer = renderer;
this.ngZone = ngZone;
this.localization = localization;
this.scrollSubscription = scrollSyncService.changes.pipe(skip(1)).subscribe(() => this.destroy());
}
/**
* @hidden
*/
open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
const toggle = isPresent(popupRef) && this.popupRef === popupRef;
this.destroy();
if (!toggle) {
const direction = this.localization.rtl ? 'right' : 'left';
this.popupRef = this.popupService.open({
anchorAlign: { vertical: 'bottom', horizontal: direction },
popupAlign: { vertical: 'top', horizontal: direction },
anchor: anchor,
popupClass: popupClass,
content: template,
positionMode: "absolute"
});
this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
this.attachClose(anchor);
}
return this.popupRef;
}
/**
* @hidden
*/
destroy() {
if (this.popupRef) {
this.detachClose();
this.popupRef.close();
this.popupRef = null;
}
}
ngOnDestroy() {
this.destroy();
this.scrollSubscription.unsubscribe();
}
detachClose() {
if (this.removeClick) {
this.removeClick();
}
}
attachClose(skipElement) {
this.detachClose();
if (!isDocumentAvailable()) {
return;
}
this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen("document", "click", (e) => {
if (!contains(e.target, x => this.popupRef.popupElement === x || x === skipElement)) {
const args = new PopupCloseEvent(e);
this.onClose.next(args);
if (!args.isDefaultPrevented()) {
this.destroy();
}
}
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.ScrollSyncService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.ScrollSyncService }, { type: i3.LocalizationService }]; } });