tree-ngx
Version:
A highly customizable Angular Tree Component, usable with minimal implementation.
61 lines • 11.3 kB
JavaScript
import { Component, ViewChild, Input } from '@angular/core';
import { NodeSelectedState } from '../model/node-selected-state';
import * as i0 from "@angular/core";
import * as i1 from "../service/tree-service";
import * as i2 from "../node-icon-wrapper/node-icon-wrapper.component";
import * as i3 from "../node-name/node-name.component";
import * as i4 from "@angular/common";
export class NodeComponent {
constructor(treeService) {
this.treeService = treeService;
this._this = this;
}
ngOnChanges(changes) {
if (changes.selectedState) {
this.selectedStateChanged();
}
}
ngAfterViewInit() {
this.selectedStateChanged();
}
selectedStateChanged() {
if (this.nodeCheckbox) {
if (this.selectedState === NodeSelectedState.indeterminate) {
this.nodeCheckbox.nativeElement.indeterminate = true;
}
else {
this.nodeCheckbox.nativeElement.indeterminate = false;
}
if (this.selectedState === NodeSelectedState.checked) {
this.nodeCheckbox.nativeElement.checked = true;
}
else if (this.selectedState === NodeSelectedState.unChecked) {
this.nodeCheckbox.nativeElement.checked = false;
}
}
}
checkBoxClick() {
this.treeService.checkBoxClick(this.state);
setTimeout(() => {
this.treeService.reEvaluateSelectedState(this.state);
}, 1);
}
}
NodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeComponent, deps: [{ token: i1.TreeService }], target: i0.ɵɵFactoryTarget.Component });
NodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NodeComponent, selector: "node", inputs: { state: "state", selectedState: "selectedState", nodeNameTemplate: "nodeNameTemplate", nodeCollapsibleTemplate: "nodeCollapsibleTemplate" }, viewQueries: [{ propertyName: "nodeCheckbox", first: true, predicate: ["nodeCheckbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"node\">\r\n <div class=\"node-container\">\r\n <node-icon-wrapper [state]=\"state\" [nodeCollapsibleTemplate]=\"nodeCollapsibleTemplate\"></node-icon-wrapper>\r\n\r\n <input #nodeCheckbox class=\"node-checkbox\" *ngIf=\"state.showCheckBox\" (click)=\"checkBoxClick()\" [disabled]=\"state.disabled\" [checked]=\"state.selected\" type=\"checkbox\" />\r\n <node-name [state]=\"state\" [nodeNameTemplate]=\"nodeNameTemplate\"></node-name>\r\n </div>\r\n <div *ngIf=\"state.nodeItem.children\" class=\"collapsible-wrapper\" [class.collapsed]=\"!state.expanded && state.nodeItem.children.length > 0 && state.filteredChildren.length > 0\">\r\n <div class=\"collapsible\">\r\n <node class=\"node-offset\" [state]=\"child\" [selectedState]=\"child.selectedState\" [nodeCollapsibleTemplate]=\"nodeCollapsibleTemplate\" [nodeNameTemplate]=\"nodeNameTemplate\" *ngFor=\"let child of state.filteredChildren\"></node>\r\n </div>\r\n </div>\r\n</div>\r\n", components: [{ type: i2.NodeIconWrapperComponent, selector: "node-icon-wrapper", inputs: ["state", "nodeCollapsibleTemplate"] }, { type: i3.NodeNameComponent, selector: "node-name", inputs: ["state", "nodeNameTemplate"] }, { type: NodeComponent, selector: "node", inputs: ["state", "selectedState", "nodeNameTemplate", "nodeCollapsibleTemplate"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeComponent, decorators: [{
type: Component,
args: [{ selector: 'node', template: "<div class=\"node\">\r\n <div class=\"node-container\">\r\n <node-icon-wrapper [state]=\"state\" [nodeCollapsibleTemplate]=\"nodeCollapsibleTemplate\"></node-icon-wrapper>\r\n\r\n <input #nodeCheckbox class=\"node-checkbox\" *ngIf=\"state.showCheckBox\" (click)=\"checkBoxClick()\" [disabled]=\"state.disabled\" [checked]=\"state.selected\" type=\"checkbox\" />\r\n <node-name [state]=\"state\" [nodeNameTemplate]=\"nodeNameTemplate\"></node-name>\r\n </div>\r\n <div *ngIf=\"state.nodeItem.children\" class=\"collapsible-wrapper\" [class.collapsed]=\"!state.expanded && state.nodeItem.children.length > 0 && state.filteredChildren.length > 0\">\r\n <div class=\"collapsible\">\r\n <node class=\"node-offset\" [state]=\"child\" [selectedState]=\"child.selectedState\" [nodeCollapsibleTemplate]=\"nodeCollapsibleTemplate\" [nodeNameTemplate]=\"nodeNameTemplate\" *ngFor=\"let child of state.filteredChildren\"></node>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.TreeService }]; }, propDecorators: { nodeCheckbox: [{
type: ViewChild,
args: ['nodeCheckbox', { static: false }]
}], state: [{
type: Input
}], selectedState: [{
type: Input
}], nodeNameTemplate: [{
type: Input
}], nodeCollapsibleTemplate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvdHJlZS1uZ3gvc3JjL25vZGUvbm9kZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvdHJlZS1uZ3gvc3JjL25vZGUvbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUF5QixTQUFTLEVBQUUsS0FBSyxFQUE2QyxNQUFNLGVBQWUsQ0FBQztBQUU5SCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7O0FBUWpFLE1BQU0sT0FBTyxhQUFhO0lBV3hCLFlBQW1CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBRnBDLFVBQUssR0FBRyxJQUFJLENBQUM7SUFFMkIsQ0FBQztJQUVoRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsYUFBYSxFQUFFO1lBQ3pCLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRU8sb0JBQW9CO1FBQzFCLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssaUJBQWlCLENBQUMsYUFBYSxFQUFFO2dCQUMxRCxJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO2FBQ3REO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7YUFDdkQ7WUFFRCxJQUFJLElBQUksQ0FBQyxhQUFhLEtBQUssaUJBQWlCLENBQUMsT0FBTyxFQUFFO2dCQUNwRCxJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO2FBQ2hEO2lCQUFNLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxpQkFBaUIsQ0FBQyxTQUFTLEVBQUU7Z0JBQzdELElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7YUFDakQ7U0FDRjtJQUNILENBQUM7SUFFTSxhQUFhO1FBQ2xCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUzQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFdBQVcsQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkQsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ1IsQ0FBQzs7MEdBN0NVLGFBQWE7OEZBQWIsYUFBYSxxVUNWMUIsazlCQWFBLHlPREhhLGFBQWE7MkZBQWIsYUFBYTtrQkFKekIsU0FBUzsrQkFDRSxNQUFNO2tHQUs4QixZQUFZO3NCQUF6RCxTQUFTO3VCQUFDLGNBQWMsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7Z0JBRW5DLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyx1QkFBdUI7c0JBQS9CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uQ2hhbmdlcywgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWYsIFNpbXBsZUNoYW5nZXMsIEFmdGVyVmlld0luaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTm9kZVN0YXRlIH0gZnJvbSAnLi4vbW9kZWwvbm9kZS1zdGF0ZSc7XHJcbmltcG9ydCB7IE5vZGVTZWxlY3RlZFN0YXRlIH0gZnJvbSAnLi4vbW9kZWwvbm9kZS1zZWxlY3RlZC1zdGF0ZSc7XHJcbmltcG9ydCB7IFRyZWVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZS90cmVlLXNlcnZpY2UnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbm9kZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25vZGUuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOb2RlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgQFZpZXdDaGlsZCgnbm9kZUNoZWNrYm94JywgeyBzdGF0aWM6IGZhbHNlIH0pIG5vZGVDaGVja2JveDogRWxlbWVudFJlZjtcclxuXHJcbiAgQElucHV0KCkgc3RhdGU6IE5vZGVTdGF0ZTtcclxuICBASW5wdXQoKSBzZWxlY3RlZFN0YXRlOiBOb2RlU2VsZWN0ZWRTdGF0ZTtcclxuICBASW5wdXQoKSBub2RlTmFtZVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG4gIEBJbnB1dCgpIG5vZGVDb2xsYXBzaWJsZVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBwdWJsaWMgX3RoaXMgPSB0aGlzO1xyXG5cclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgdHJlZVNlcnZpY2U6IFRyZWVTZXJ2aWNlKSB7IH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgaWYgKGNoYW5nZXMuc2VsZWN0ZWRTdGF0ZSkge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkU3RhdGVDaGFuZ2VkKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLnNlbGVjdGVkU3RhdGVDaGFuZ2VkKCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHNlbGVjdGVkU3RhdGVDaGFuZ2VkKCkge1xyXG4gICAgaWYgKHRoaXMubm9kZUNoZWNrYm94KSB7XHJcbiAgICAgIGlmICh0aGlzLnNlbGVjdGVkU3RhdGUgPT09IE5vZGVTZWxlY3RlZFN0YXRlLmluZGV0ZXJtaW5hdGUpIHtcclxuICAgICAgICB0aGlzLm5vZGVDaGVja2JveC5uYXRpdmVFbGVtZW50LmluZGV0ZXJtaW5hdGUgPSB0cnVlO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMubm9kZUNoZWNrYm94Lm5hdGl2ZUVsZW1lbnQuaW5kZXRlcm1pbmF0ZSA9IGZhbHNlO1xyXG4gICAgICB9XHJcblxyXG4gICAgICBpZiAodGhpcy5zZWxlY3RlZFN0YXRlID09PSBOb2RlU2VsZWN0ZWRTdGF0ZS5jaGVja2VkKSB7XHJcbiAgICAgICAgdGhpcy5ub2RlQ2hlY2tib3gubmF0aXZlRWxlbWVudC5jaGVja2VkID0gdHJ1ZTtcclxuICAgICAgfSBlbHNlIGlmICh0aGlzLnNlbGVjdGVkU3RhdGUgPT09IE5vZGVTZWxlY3RlZFN0YXRlLnVuQ2hlY2tlZCkge1xyXG4gICAgICAgIHRoaXMubm9kZUNoZWNrYm94Lm5hdGl2ZUVsZW1lbnQuY2hlY2tlZCA9IGZhbHNlO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgY2hlY2tCb3hDbGljaygpIHtcclxuICAgIHRoaXMudHJlZVNlcnZpY2UuY2hlY2tCb3hDbGljayh0aGlzLnN0YXRlKTtcclxuXHJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgdGhpcy50cmVlU2VydmljZS5yZUV2YWx1YXRlU2VsZWN0ZWRTdGF0ZSh0aGlzLnN0YXRlKTtcclxuICAgIH0sIDEpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwibm9kZVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJub2RlLWNvbnRhaW5lclwiPlxyXG4gICAgPG5vZGUtaWNvbi13cmFwcGVyIFtzdGF0ZV09XCJzdGF0ZVwiIFtub2RlQ29sbGFwc2libGVUZW1wbGF0ZV09XCJub2RlQ29sbGFwc2libGVUZW1wbGF0ZVwiPjwvbm9kZS1pY29uLXdyYXBwZXI+XHJcblxyXG4gICAgPGlucHV0ICNub2RlQ2hlY2tib3ggY2xhc3M9XCJub2RlLWNoZWNrYm94XCIgKm5nSWY9XCJzdGF0ZS5zaG93Q2hlY2tCb3hcIiAoY2xpY2spPVwiY2hlY2tCb3hDbGljaygpXCIgW2Rpc2FibGVkXT1cInN0YXRlLmRpc2FibGVkXCIgW2NoZWNrZWRdPVwic3RhdGUuc2VsZWN0ZWRcIiB0eXBlPVwiY2hlY2tib3hcIiAvPlxyXG4gICAgPG5vZGUtbmFtZSBbc3RhdGVdPVwic3RhdGVcIiBbbm9kZU5hbWVUZW1wbGF0ZV09XCJub2RlTmFtZVRlbXBsYXRlXCI+PC9ub2RlLW5hbWU+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiAqbmdJZj1cInN0YXRlLm5vZGVJdGVtLmNoaWxkcmVuXCIgY2xhc3M9XCJjb2xsYXBzaWJsZS13cmFwcGVyXCIgW2NsYXNzLmNvbGxhcHNlZF09XCIhc3RhdGUuZXhwYW5kZWQgJiYgc3RhdGUubm9kZUl0ZW0uY2hpbGRyZW4ubGVuZ3RoID4gMCAmJiBzdGF0ZS5maWx0ZXJlZENoaWxkcmVuLmxlbmd0aCA+IDBcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJjb2xsYXBzaWJsZVwiPlxyXG4gICAgICA8bm9kZSBjbGFzcz1cIm5vZGUtb2Zmc2V0XCIgW3N0YXRlXT1cImNoaWxkXCIgW3NlbGVjdGVkU3RhdGVdPVwiY2hpbGQuc2VsZWN0ZWRTdGF0ZVwiIFtub2RlQ29sbGFwc2libGVUZW1wbGF0ZV09XCJub2RlQ29sbGFwc2libGVUZW1wbGF0ZVwiIFtub2RlTmFtZVRlbXBsYXRlXT1cIm5vZGVOYW1lVGVtcGxhdGVcIiAqbmdGb3I9XCJsZXQgY2hpbGQgb2Ygc3RhdGUuZmlsdGVyZWRDaGlsZHJlblwiPjwvbm9kZT5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19