tree-ngx
Version:
A highly customizable Angular Tree Component, usable with minimal implementation.
22 lines • 5.73 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NodeIconWrapperComponent {
constructor() {
this._this = this;
}
toggleExpand() {
this.state.expanded = !this.state.expanded;
}
}
NodeIconWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeIconWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NodeIconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NodeIconWrapperComponent, selector: "node-icon-wrapper", inputs: { state: "state", nodeCollapsibleTemplate: "nodeCollapsibleTemplate" }, ngImport: i0, template: "<div class=\"node-icon-wrapper\" [class.disabled]=\"state.nodeItem?.children?.length == 0\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\r\n [class.iconCheckbox]=\"state.showCheckBox\" (click)=\"state.expanded = !state.expanded;\">\r\n <ng-container *ngIf=\"!nodeCollapsibleTemplate\">\r\n <ng-container *ngIf=\"state.nodeItem?.children?.length > 0\">\r\n <i *ngIf=\"!state.expanded\" class=\"arrow-right\"></i>\r\n <i *ngIf=\"state.expanded\" class=\"arrow-down\"></i>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"state.nodeItem?.children?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"nodeCollapsibleTemplate; context: { expanded: state.expanded, context: _this }\">\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NodeIconWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'node-icon-wrapper', template: "<div class=\"node-icon-wrapper\" [class.disabled]=\"state.nodeItem?.children?.length == 0\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\r\n [class.iconCheckbox]=\"state.showCheckBox\" (click)=\"state.expanded = !state.expanded;\">\r\n <ng-container *ngIf=\"!nodeCollapsibleTemplate\">\r\n <ng-container *ngIf=\"state.nodeItem?.children?.length > 0\">\r\n <i *ngIf=\"!state.expanded\" class=\"arrow-right\"></i>\r\n <i *ngIf=\"state.expanded\" class=\"arrow-down\"></i>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"state.nodeItem?.children?.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"nodeCollapsibleTemplate; context: { expanded: state.expanded, context: _this }\">\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { state: [{
type: Input
}], nodeCollapsibleTemplate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1pY29uLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2FwcC9tb2R1bGVzL3RyZWUtbmd4L3NyYy9ub2RlLWljb24td3JhcHBlci9ub2RlLWljb24td3JhcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvdHJlZS1uZ3gvc3JjL25vZGUtaWNvbi13cmFwcGVyL25vZGUtaWNvbi13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFlLE1BQU0sZUFBZSxDQUFDOzs7QUFPdEUsTUFBTSxPQUFPLHdCQUF3QjtJQU9uQztRQUZPLFVBQUssR0FBRyxJQUFJLENBQUM7SUFFSixDQUFDO0lBRVYsWUFBWTtRQUNqQixJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDO0lBQzdDLENBQUM7O3FIQVhVLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLHlJQ1ByQyw4eEJBY0E7MkZEUGEsd0JBQXdCO2tCQUpwQyxTQUFTOytCQUNFLG1CQUFtQjswRUFLcEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLHVCQUF1QjtzQkFBL0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTm9kZVN0YXRlIH0gZnJvbSAnLi4vbW9kZWwvbm9kZS1zdGF0ZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25vZGUtaWNvbi13cmFwcGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbm9kZS1pY29uLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOb2RlSWNvbldyYXBwZXJDb21wb25lbnQge1xyXG5cclxuICBASW5wdXQoKSBzdGF0ZTogTm9kZVN0YXRlO1xyXG4gIEBJbnB1dCgpIG5vZGVDb2xsYXBzaWJsZVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBwdWJsaWMgX3RoaXMgPSB0aGlzO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBwdWJsaWMgdG9nZ2xlRXhwYW5kKCkge1xyXG4gICAgdGhpcy5zdGF0ZS5leHBhbmRlZCA9ICF0aGlzLnN0YXRlLmV4cGFuZGVkO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwibm9kZS1pY29uLXdyYXBwZXJcIiBbY2xhc3MuZGlzYWJsZWRdPVwic3RhdGUubm9kZUl0ZW0/LmNoaWxkcmVuPy5sZW5ndGggPT0gMFwiIFtjbGFzcy5jb2xsYXBzYWJsZV09XCJzdGF0ZS5ub2RlSXRlbT8uY2hpbGRyZW4/Lmxlbmd0aCA+IDBcIlxyXG4gIFtjbGFzcy5pY29uQ2hlY2tib3hdPVwic3RhdGUuc2hvd0NoZWNrQm94XCIgKGNsaWNrKT1cInN0YXRlLmV4cGFuZGVkID0gIXN0YXRlLmV4cGFuZGVkO1wiPlxyXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhbm9kZUNvbGxhcHNpYmxlVGVtcGxhdGVcIj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzdGF0ZS5ub2RlSXRlbT8uY2hpbGRyZW4/Lmxlbmd0aCA+IDBcIj5cclxuICAgICAgPGkgKm5nSWY9XCIhc3RhdGUuZXhwYW5kZWRcIiBjbGFzcz1cImFycm93LXJpZ2h0XCI+PC9pPlxyXG4gICAgICA8aSAqbmdJZj1cInN0YXRlLmV4cGFuZGVkXCIgY2xhc3M9XCJhcnJvdy1kb3duXCI+PC9pPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJzdGF0ZS5ub2RlSXRlbT8uY2hpbGRyZW4/Lmxlbmd0aCA+IDBcIj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJub2RlQ29sbGFwc2libGVUZW1wbGF0ZTsgY29udGV4dDogeyBleHBhbmRlZDogc3RhdGUuZXhwYW5kZWQsIGNvbnRleHQ6IF90aGlzIH1cIj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG4gIDwvbmctY29udGFpbmVyPlxyXG48L2Rpdj5cclxuIl19