tree-ngx
Version:
A highly customizable Angular Tree Component, usable with minimal implementation.
33 lines • 5.77 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../service/tree-service";
import * as i2 from "@angular/common";
export class NodeNameComponent {
constructor(treeService) {
this.treeService = treeService;
this._this = this;
this.active = false;
}
ngOnChanges(changes) {
if (changes.state) {
this.active = this.treeService.canToggleChildrenOnName();
}
}
nameClick() {
this.treeService.nameClick(this.state);
}
delete() {
this.treeService.deleteByState(this.state);
}
}
NodeNameComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeNameComponent, deps: [{ token: i1.TreeService }], target: i0.ɵɵFactoryTarget.Component });
NodeNameComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NodeNameComponent, selector: "node-name", inputs: { state: "state", nodeNameTemplate: "nodeNameTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"nameClick()\" [class.markSelected]=\"state.markSelected && state.selected\" [class.nodeDisabled]=\"state.disabled\" class=\"node-name\">\r\n <ng-container *ngIf=\"!nodeNameTemplate\">\r\n <span [class.active]=\"active\">{{state.nodeItem.name}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"nodeNameTemplate; context: { $implicit: state.nodeItem, node: state.nodeItem, context: _this }\">\r\n </ng-container>\r\n</div>\r\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeNameComponent, decorators: [{
type: Component,
args: [{ selector: 'node-name', template: "<div (click)=\"nameClick()\" [class.markSelected]=\"state.markSelected && state.selected\" [class.nodeDisabled]=\"state.disabled\" class=\"node-name\">\r\n <ng-container *ngIf=\"!nodeNameTemplate\">\r\n <span [class.active]=\"active\">{{state.nodeItem.name}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"nodeNameTemplate; context: { $implicit: state.nodeItem, node: state.nodeItem, context: _this }\">\r\n </ng-container>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.TreeService }]; }, propDecorators: { state: [{
type: Input
}], nodeNameTemplate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1uYW1lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hcHAvbW9kdWxlcy90cmVlLW5neC9zcmMvbm9kZS1uYW1lL25vZGUtbmFtZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvdHJlZS1uZ3gvc3JjL25vZGUtbmFtZS9ub2RlLW5hbWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQXlDLE1BQU0sZUFBZSxDQUFDOzs7O0FBUWhHLE1BQU0sT0FBTyxpQkFBaUI7SUFRNUIsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFIckMsVUFBSyxHQUFHLElBQUksQ0FBQztRQUNiLFdBQU0sR0FBRyxLQUFLLENBQUM7SUFFMEIsQ0FBQztJQUVqRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsS0FBSyxFQUFFO1lBQ2pCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1NBQzFEO0lBQ0gsQ0FBQztJQUVNLFNBQVM7UUFDZCxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVNLE1BQU07UUFDWCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsQ0FBQzs7OEdBdEJVLGlCQUFpQjtrR0FBakIsaUJBQWlCLHdJQ1I5QixvZEFRQTsyRkRBYSxpQkFBaUI7a0JBSjdCLFNBQVM7K0JBQ0UsV0FBVztrR0FLWixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBUZW1wbGF0ZVJlZiwgU2ltcGxlQ2hhbmdlcywgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5vZGVTdGF0ZSB9IGZyb20gJy4uL21vZGVsL25vZGUtc3RhdGUnO1xyXG5pbXBvcnQgeyBUcmVlU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2UvdHJlZS1zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbm9kZS1uYW1lJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbm9kZS1uYW1lLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTm9kZU5hbWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG5cclxuICBASW5wdXQoKSBzdGF0ZTogTm9kZVN0YXRlO1xyXG4gIEBJbnB1dCgpIG5vZGVOYW1lVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcblxyXG4gIHB1YmxpYyBfdGhpcyA9IHRoaXM7XHJcbiAgcHVibGljIGFjdGl2ZSA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRyZWVTZXJ2aWNlOiBUcmVlU2VydmljZSkgeyB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgIGlmIChjaGFuZ2VzLnN0YXRlKSB7XHJcbiAgICAgIHRoaXMuYWN0aXZlID0gdGhpcy50cmVlU2VydmljZS5jYW5Ub2dnbGVDaGlsZHJlbk9uTmFtZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHVibGljIG5hbWVDbGljaygpIHtcclxuICAgIHRoaXMudHJlZVNlcnZpY2UubmFtZUNsaWNrKHRoaXMuc3RhdGUpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGRlbGV0ZSgpIHtcclxuICAgIHRoaXMudHJlZVNlcnZpY2UuZGVsZXRlQnlTdGF0ZSh0aGlzLnN0YXRlKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiAoY2xpY2spPVwibmFtZUNsaWNrKClcIiBbY2xhc3MubWFya1NlbGVjdGVkXT1cInN0YXRlLm1hcmtTZWxlY3RlZCAmJiBzdGF0ZS5zZWxlY3RlZFwiIFtjbGFzcy5ub2RlRGlzYWJsZWRdPVwic3RhdGUuZGlzYWJsZWRcIiBjbGFzcz1cIm5vZGUtbmFtZVwiPlxyXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbm9kZU5hbWVUZW1wbGF0ZVwiPlxyXG4gICAgPHNwYW4gW2NsYXNzLmFjdGl2ZV09XCJhY3RpdmVcIj57e3N0YXRlLm5vZGVJdGVtLm5hbWV9fTwvc3Bhbj5cclxuICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm5vZGVOYW1lVGVtcGxhdGU7IGNvbnRleHQ6IHsgJGltcGxpY2l0OiBzdGF0ZS5ub2RlSXRlbSwgbm9kZTogc3RhdGUubm9kZUl0ZW0sIGNvbnRleHQ6IF90aGlzIH1cIj5cclxuICA8L25nLWNvbnRhaW5lcj5cclxuPC9kaXY+XHJcbiJdfQ==