@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.
120 lines (119 loc) • 4.54 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, Input, Output, EventEmitter } from '@angular/core';
import { ExpandableTreeComponent } from './expandable-tree-component';
import { getter } from '@progress/kendo-common';
import { isString } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "./expandable-tree-component";
/**
* A directive which controls the expanded state of items in the TreeList. [See example](slug:treelist_expanded_state#toc-built-in-directive).
*
* @example
* ```html
* <kendo-treelist ...
* [kendoTreeListFlatBinding]="data"
* kendoTreeListExpandable> ...
* </kendo-treelist>
* ```
* @remarks
* Applied to: {@link TreeListComponent},
*/
export class ExpandableDirective {
component;
/**
* Emits when the `expandedKeys` change.
*/
expandedKeysChange = new EventEmitter();
/**
* Sets the expanded item keys.
* Use this property to control which items are expanded.
*/
set expandedKeys(value) {
if (value !== this._expandedKeys) {
this._expandedKeys = value;
this.component.updateView();
}
}
get expandedKeys() {
return Array.from(this.state.keys());
}
/**
* Specifies if items are initially expanded.
* @default false
*/
initiallyExpanded = false;
/**
* Defines the item key stored in the `expandedKeys` collection.
* Uses the component `idField` by default.
*/
set expandBy(key) {
if (isString(key)) {
this._expandBy = getter(key);
}
else {
this._expandBy = key;
}
}
get keyGetter() {
return this._expandBy || this.component.idGetter;
}
subscriptions;
state = new Set();
_expandBy;
_expandedKeys;
constructor(component) {
this.component = component;
this.component.isExpanded = this.isExpanded.bind(this);
this.toggleState = this.toggleState.bind(this);
this.subscriptions = this.component.expandStateChange.subscribe(this.toggleState);
}
/**
* @hidden
*/
isExpanded(item) {
const key = this.keyGetter(item);
return this.state.has(key) ? !this.initiallyExpanded : this.initiallyExpanded;
}
ngOnChanges(changes) {
if (changes.expandedKeys) {
this.state = new Set(this._expandedKeys);
}
else if (changes.initiallyExpanded) {
this.state.clear();
}
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
toggleState(args) {
const key = this.keyGetter(args.dataItem);
if (Boolean(this.initiallyExpanded) !== args.expand) {
this.state.add(key);
}
else {
this.state.delete(key);
}
this.expandedKeysChange.emit(this.expandedKeys);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandableDirective, deps: [{ token: i1.ExpandableTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExpandableDirective, isStandalone: true, selector: "[kendoTreeListExpandable]", inputs: { expandedKeys: "expandedKeys", initiallyExpanded: "initiallyExpanded", expandBy: "expandBy" }, outputs: { expandedKeysChange: "expandedKeysChange" }, exportAs: ["kendoTreeListExpandable"], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpandableDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'kendoTreeListExpandable',
selector: '[kendoTreeListExpandable]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.ExpandableTreeComponent }]; }, propDecorators: { expandedKeysChange: [{
type: Output
}], expandedKeys: [{
type: Input
}], initiallyExpanded: [{
type: Input
}], expandBy: [{
type: Input
}] } });