ngx-treeview-v2
Version:
An Angular treeview component with checkbox
62 lines • 10.4 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { isNil } from 'lodash';
import * as i0 from "@angular/core";
import * as i1 from "../../models/treeview-config";
import * as i2 from "@angular/common";
export class TreeviewItemComponent {
defaultConfig;
config;
template;
item;
checkedChange = new EventEmitter();
constructor(defaultConfig) {
this.defaultConfig = defaultConfig;
this.config = this.defaultConfig;
}
onCollapseExpand = () => {
this.item.collapsed = !this.item.collapsed;
};
onCheckedChange = () => {
const checked = this.item.checked;
if (!isNil(this.item.children) && !this.config.decoupleChildFromParent) {
this.item.children.forEach(child => child.setCheckedRecursive(checked));
}
this.checkedChange.emit(checked);
};
onChildCheckedChange(child, checked) {
if (!this.config.decoupleChildFromParent) {
let itemChecked = null;
for (const childItem of this.item.children) {
if (itemChecked === null) {
itemChecked = childItem.checked;
}
else if (itemChecked !== childItem.checked) {
itemChecked = undefined;
break;
}
}
if (itemChecked === null) {
itemChecked = false;
}
if (this.item.checked !== itemChecked) {
this.item.checked = itemChecked;
}
}
this.checkedChange.emit(checked);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeviewItemComponent, deps: [{ token: i1.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeviewItemComponent, selector: "ngx-treeview-item", inputs: { config: "config", template: "template", item: "item" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div *ngIf=\"item\" class=\"treeview-item\">\r\n <ng-template [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{item: item, onCollapseExpand: onCollapseExpand, onCheckedChange: onCheckedChange}\">\r\n </ng-template>\r\n <div *ngIf=\"!item.collapsed\">\r\n <ngx-treeview-item [config]=\"config\" *ngFor=\"let child of item.children\" [item]=\"child\" [template]=\"template\"\r\n (checkedChange)=\"onChildCheckedChange(child, $event)\">\r\n </ngx-treeview-item>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}:host .treeview-item{white-space:nowrap}:host .treeview-item .treeview-item{margin-left:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TreeviewItemComponent, selector: "ngx-treeview-item", inputs: ["config", "template", "item"], outputs: ["checkedChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeviewItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-treeview-item', template: "<div *ngIf=\"item\" class=\"treeview-item\">\r\n <ng-template [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{item: item, onCollapseExpand: onCollapseExpand, onCheckedChange: onCheckedChange}\">\r\n </ng-template>\r\n <div *ngIf=\"!item.collapsed\">\r\n <ngx-treeview-item [config]=\"config\" *ngFor=\"let child of item.children\" [item]=\"child\" [template]=\"template\"\r\n (checkedChange)=\"onChildCheckedChange(child, $event)\">\r\n </ngx-treeview-item>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}:host .treeview-item{white-space:nowrap}:host .treeview-item .treeview-item{margin-left:2rem}\n"] }]
}], ctorParameters: function () { return [{ type: i1.TreeviewConfig }]; }, propDecorators: { config: [{
type: Input
}], template: [{
type: Input
}], item: [{
type: Input
}], checkedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZXZpZXctaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXctdjIvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXctdjIvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxRQUFRLENBQUM7Ozs7QUFVL0IsTUFBTSxPQUFPLHFCQUFxQjtJQU90QjtJQU5ELE1BQU0sQ0FBaUI7SUFDdkIsUUFBUSxDQUEyQztJQUNuRCxJQUFJLENBQWU7SUFDbEIsYUFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFdEQsWUFDVSxhQUE2QjtRQUE3QixrQkFBYSxHQUFiLGFBQWEsQ0FBZ0I7UUFFckMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQ25DLENBQUM7SUFFRCxnQkFBZ0IsR0FBRyxHQUFHLEVBQUU7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUM3QyxDQUFDLENBQUE7SUFFRCxlQUFlLEdBQUcsR0FBRyxFQUFFO1FBQ3JCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsdUJBQXVCLEVBQUU7WUFDdEUsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLG1CQUFtQixDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7U0FDekU7UUFDRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNuQyxDQUFDLENBQUE7SUFFRCxvQkFBb0IsQ0FBQyxLQUFtQixFQUFFLE9BQWdCO1FBQ3hELElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLHVCQUF1QixFQUFFO1lBQ3hDLElBQUksV0FBVyxHQUFZLElBQUksQ0FBQztZQUNoQyxLQUFLLE1BQU0sU0FBUyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUMxQyxJQUFJLFdBQVcsS0FBSyxJQUFJLEVBQUU7b0JBQ3hCLFdBQVcsR0FBRyxTQUFTLENBQUMsT0FBTyxDQUFDO2lCQUNqQztxQkFBTSxJQUFJLFdBQVcsS0FBSyxTQUFTLENBQUMsT0FBTyxFQUFFO29CQUM1QyxXQUFXLEdBQUcsU0FBUyxDQUFDO29CQUN4QixNQUFNO2lCQUNQO2FBQ0Y7WUFFRCxJQUFJLFdBQVcsS0FBSyxJQUFJLEVBQUU7Z0JBQ3hCLFdBQVcsR0FBRyxLQUFLLENBQUM7YUFDckI7WUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxLQUFLLFdBQVcsRUFBRTtnQkFDckMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsV0FBVyxDQUFDO2FBQ2pDO1NBRUY7UUFFRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNuQyxDQUFDO3dHQS9DVSxxQkFBcUI7NEZBQXJCLHFCQUFxQix3S0NYbEMsdWdCQVVBLHFqQkRDYSxxQkFBcUI7OzRGQUFyQixxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsbUJBQW1CO3FHQUtwQixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBpc05pbCB9IGZyb20gJ2xvZGFzaCc7XHJcbmltcG9ydCB7IFRyZWV2aWV3SXRlbSB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1pdGVtJztcclxuaW1wb3J0IHsgVHJlZXZpZXdDb25maWcgfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctY29uZmlnJztcclxuaW1wb3J0IHsgVHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0IH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RyZWV2aWV3LWl0ZW0tdGVtcGxhdGUtY29udGV4dCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC10cmVldmlldy1pdGVtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUcmVldmlld0l0ZW1Db21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGNvbmZpZzogVHJlZXZpZXdDb25maWc7XHJcbiAgQElucHV0KCkgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPFRyZWV2aWV3SXRlbVRlbXBsYXRlQ29udGV4dD47XHJcbiAgQElucHV0KCkgaXRlbTogVHJlZXZpZXdJdGVtO1xyXG4gIEBPdXRwdXQoKSBjaGVja2VkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgZGVmYXVsdENvbmZpZzogVHJlZXZpZXdDb25maWdcclxuICApIHtcclxuICAgIHRoaXMuY29uZmlnID0gdGhpcy5kZWZhdWx0Q29uZmlnO1xyXG4gIH1cclxuXHJcbiAgb25Db2xsYXBzZUV4cGFuZCA9ICgpID0+IHtcclxuICAgIHRoaXMuaXRlbS5jb2xsYXBzZWQgPSAhdGhpcy5pdGVtLmNvbGxhcHNlZDtcclxuICB9XHJcblxyXG4gIG9uQ2hlY2tlZENoYW5nZSA9ICgpID0+IHtcclxuICAgIGNvbnN0IGNoZWNrZWQgPSB0aGlzLml0ZW0uY2hlY2tlZDtcclxuICAgIGlmICghaXNOaWwodGhpcy5pdGVtLmNoaWxkcmVuKSAmJiAhdGhpcy5jb25maWcuZGVjb3VwbGVDaGlsZEZyb21QYXJlbnQpIHtcclxuICAgICAgdGhpcy5pdGVtLmNoaWxkcmVuLmZvckVhY2goY2hpbGQgPT4gY2hpbGQuc2V0Q2hlY2tlZFJlY3Vyc2l2ZShjaGVja2VkKSk7XHJcbiAgICB9XHJcbiAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdChjaGVja2VkKTtcclxuICB9XHJcblxyXG4gIG9uQ2hpbGRDaGVja2VkQ2hhbmdlKGNoaWxkOiBUcmVldmlld0l0ZW0sIGNoZWNrZWQ6IGJvb2xlYW4pOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy5jb25maWcuZGVjb3VwbGVDaGlsZEZyb21QYXJlbnQpIHtcclxuICAgICAgbGV0IGl0ZW1DaGVja2VkOiBib29sZWFuID0gbnVsbDtcclxuICAgICAgZm9yIChjb25zdCBjaGlsZEl0ZW0gb2YgdGhpcy5pdGVtLmNoaWxkcmVuKSB7XHJcbiAgICAgICAgaWYgKGl0ZW1DaGVja2VkID09PSBudWxsKSB7XHJcbiAgICAgICAgICBpdGVtQ2hlY2tlZCA9IGNoaWxkSXRlbS5jaGVja2VkO1xyXG4gICAgICAgIH0gZWxzZSBpZiAoaXRlbUNoZWNrZWQgIT09IGNoaWxkSXRlbS5jaGVja2VkKSB7XHJcbiAgICAgICAgICBpdGVtQ2hlY2tlZCA9IHVuZGVmaW5lZDtcclxuICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG5cclxuICAgICAgaWYgKGl0ZW1DaGVja2VkID09PSBudWxsKSB7XHJcbiAgICAgICAgaXRlbUNoZWNrZWQgPSBmYWxzZTtcclxuICAgICAgfVxyXG5cclxuICAgICAgaWYgKHRoaXMuaXRlbS5jaGVja2VkICE9PSBpdGVtQ2hlY2tlZCkge1xyXG4gICAgICAgIHRoaXMuaXRlbS5jaGVja2VkID0gaXRlbUNoZWNrZWQ7XHJcbiAgICAgIH1cclxuXHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQoY2hlY2tlZCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgKm5nSWY9XCJpdGVtXCIgY2xhc3M9XCJ0cmVldmlldy1pdGVtXCI+XHJcbiAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRlbXBsYXRlXCJcclxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7aXRlbTogaXRlbSwgb25Db2xsYXBzZUV4cGFuZDogb25Db2xsYXBzZUV4cGFuZCwgb25DaGVja2VkQ2hhbmdlOiBvbkNoZWNrZWRDaGFuZ2V9XCI+XHJcbiAgPC9uZy10ZW1wbGF0ZT5cclxuICA8ZGl2ICpuZ0lmPVwiIWl0ZW0uY29sbGFwc2VkXCI+XHJcbiAgICA8bmd4LXRyZWV2aWV3LWl0ZW0gW2NvbmZpZ109XCJjb25maWdcIiAqbmdGb3I9XCJsZXQgY2hpbGQgb2YgaXRlbS5jaGlsZHJlblwiIFtpdGVtXT1cImNoaWxkXCIgW3RlbXBsYXRlXT1cInRlbXBsYXRlXCJcclxuICAgICAgKGNoZWNrZWRDaGFuZ2UpPVwib25DaGlsZENoZWNrZWRDaGFuZ2UoY2hpbGQsICRldmVudClcIj5cclxuICAgIDwvbmd4LXRyZWV2aWV3LWl0ZW0+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=