@treeview/ngx-treeview
Version:
An Angular Boostrap treeview component
58 lines • 10.6 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 {
constructor(defaultConfig) {
this.defaultConfig = defaultConfig;
this.checkedChange = new EventEmitter();
this.onCollapseExpand = () => {
this.item.collapsed = !this.item.collapsed;
};
this.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);
};
this.config = this.defaultConfig;
}
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);
}
}
TreeviewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeviewItemComponent, deps: [{ token: i1.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component });
TreeviewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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}:host .treeview-item svg{vertical-align:baseline!important}\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: "14.3.0", 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}:host .treeview-item svg{vertical-align:baseline!important}\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZXZpZXctaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxRQUFRLENBQUM7Ozs7QUFVL0IsTUFBTSxPQUFPLHFCQUFxQjtJQU1oQyxZQUNVLGFBQTZCO1FBQTdCLGtCQUFhLEdBQWIsYUFBYSxDQUFnQjtRQUg3QixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFRdEQscUJBQWdCLEdBQUcsR0FBRyxFQUFFO1lBQ3RCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDN0MsQ0FBQyxDQUFBO1FBRUQsb0JBQWUsR0FBRyxHQUFHLEVBQUU7WUFDckIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7WUFDbEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyx1QkFBdUIsRUFBRTtnQkFDdEUsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLG1CQUFtQixDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7YUFDekU7WUFDRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNuQyxDQUFDLENBQUE7UUFiQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7SUFDbkMsQ0FBQztJQWNELG9CQUFvQixDQUFDLEtBQW1CLEVBQUUsT0FBZ0I7UUFDeEQsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsdUJBQXVCLEVBQUU7WUFDeEMsSUFBSSxXQUFXLEdBQVksSUFBSSxDQUFDO1lBQ2hDLEtBQUssTUFBTSxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQzFDLElBQUksV0FBVyxLQUFLLElBQUksRUFBRTtvQkFDeEIsV0FBVyxHQUFHLFNBQVMsQ0FBQyxPQUFPLENBQUM7aUJBQ2pDO3FCQUFNLElBQUksV0FBVyxLQUFLLFNBQVMsQ0FBQyxPQUFPLEVBQUU7b0JBQzVDLFdBQVcsR0FBRyxTQUFTLENBQUM7b0JBQ3hCLE1BQU07aUJBQ1A7YUFDRjtZQUVELElBQUksV0FBVyxLQUFLLElBQUksRUFBRTtnQkFDeEIsV0FBVyxHQUFHLEtBQUssQ0FBQzthQUNyQjtZQUVELElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxFQUFFO2dCQUNyQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxXQUFXLENBQUM7YUFDakM7U0FFRjtRQUVELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ25DLENBQUM7O2tIQS9DVSxxQkFBcUI7c0dBQXJCLHFCQUFxQix3S0NYbEMsdWdCQVVBLGduQkRDYSxxQkFBcUI7MkZBQXJCLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxtQkFBbUI7cUdBS3BCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGlzTmlsIH0gZnJvbSAnbG9kYXNoJztcclxuaW1wb3J0IHsgVHJlZXZpZXdJdGVtIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RyZWV2aWV3LWl0ZW0nO1xyXG5pbXBvcnQgeyBUcmVldmlld0NvbmZpZyB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1jb25maWcnO1xyXG5pbXBvcnQgeyBUcmVldmlld0l0ZW1UZW1wbGF0ZUNvbnRleHQgfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctaXRlbS10ZW1wbGF0ZS1jb250ZXh0JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LXRyZWV2aWV3LWl0ZW0nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90cmVldmlldy1pdGVtLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90cmVldmlldy1pdGVtLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRyZWV2aWV3SXRlbUNvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgY29uZmlnOiBUcmVldmlld0NvbmZpZztcclxuICBASW5wdXQoKSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8VHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0PjtcclxuICBASW5wdXQoKSBpdGVtOiBUcmVldmlld0l0ZW07XHJcbiAgQE91dHB1dCgpIGNoZWNrZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBkZWZhdWx0Q29uZmlnOiBUcmVldmlld0NvbmZpZ1xyXG4gICkge1xyXG4gICAgdGhpcy5jb25maWcgPSB0aGlzLmRlZmF1bHRDb25maWc7XHJcbiAgfVxyXG5cclxuICBvbkNvbGxhcHNlRXhwYW5kID0gKCkgPT4ge1xyXG4gICAgdGhpcy5pdGVtLmNvbGxhcHNlZCA9ICF0aGlzLml0ZW0uY29sbGFwc2VkO1xyXG4gIH1cclxuXHJcbiAgb25DaGVja2VkQ2hhbmdlID0gKCkgPT4ge1xyXG4gICAgY29uc3QgY2hlY2tlZCA9IHRoaXMuaXRlbS5jaGVja2VkO1xyXG4gICAgaWYgKCFpc05pbCh0aGlzLml0ZW0uY2hpbGRyZW4pICYmICF0aGlzLmNvbmZpZy5kZWNvdXBsZUNoaWxkRnJvbVBhcmVudCkge1xyXG4gICAgICB0aGlzLml0ZW0uY2hpbGRyZW4uZm9yRWFjaChjaGlsZCA9PiBjaGlsZC5zZXRDaGVja2VkUmVjdXJzaXZlKGNoZWNrZWQpKTtcclxuICAgIH1cclxuICAgIHRoaXMuY2hlY2tlZENoYW5nZS5lbWl0KGNoZWNrZWQpO1xyXG4gIH1cclxuXHJcbiAgb25DaGlsZENoZWNrZWRDaGFuZ2UoY2hpbGQ6IFRyZWV2aWV3SXRlbSwgY2hlY2tlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgaWYgKCF0aGlzLmNvbmZpZy5kZWNvdXBsZUNoaWxkRnJvbVBhcmVudCkge1xyXG4gICAgICBsZXQgaXRlbUNoZWNrZWQ6IGJvb2xlYW4gPSBudWxsO1xyXG4gICAgICBmb3IgKGNvbnN0IGNoaWxkSXRlbSBvZiB0aGlzLml0ZW0uY2hpbGRyZW4pIHtcclxuICAgICAgICBpZiAoaXRlbUNoZWNrZWQgPT09IG51bGwpIHtcclxuICAgICAgICAgIGl0ZW1DaGVja2VkID0gY2hpbGRJdGVtLmNoZWNrZWQ7XHJcbiAgICAgICAgfSBlbHNlIGlmIChpdGVtQ2hlY2tlZCAhPT0gY2hpbGRJdGVtLmNoZWNrZWQpIHtcclxuICAgICAgICAgIGl0ZW1DaGVja2VkID0gdW5kZWZpbmVkO1xyXG4gICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcblxyXG4gICAgICBpZiAoaXRlbUNoZWNrZWQgPT09IG51bGwpIHtcclxuICAgICAgICBpdGVtQ2hlY2tlZCA9IGZhbHNlO1xyXG4gICAgICB9XHJcblxyXG4gICAgICBpZiAodGhpcy5pdGVtLmNoZWNrZWQgIT09IGl0ZW1DaGVja2VkKSB7XHJcbiAgICAgICAgdGhpcy5pdGVtLmNoZWNrZWQgPSBpdGVtQ2hlY2tlZDtcclxuICAgICAgfVxyXG5cclxuICAgIH1cclxuXHJcbiAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdChjaGVja2VkKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiAqbmdJZj1cIml0ZW1cIiBjbGFzcz1cInRyZWV2aWV3LWl0ZW1cIj5cclxuICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwidGVtcGxhdGVcIlxyXG4gICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cIntpdGVtOiBpdGVtLCBvbkNvbGxhcHNlRXhwYW5kOiBvbkNvbGxhcHNlRXhwYW5kLCBvbkNoZWNrZWRDaGFuZ2U6IG9uQ2hlY2tlZENoYW5nZX1cIj5cclxuICA8L25nLXRlbXBsYXRlPlxyXG4gIDxkaXYgKm5nSWY9XCIhaXRlbS5jb2xsYXBzZWRcIj5cclxuICAgIDxuZ3gtdHJlZXZpZXctaXRlbSBbY29uZmlnXT1cImNvbmZpZ1wiICpuZ0Zvcj1cImxldCBjaGlsZCBvZiBpdGVtLmNoaWxkcmVuXCIgW2l0ZW1dPVwiY2hpbGRcIiBbdGVtcGxhdGVdPVwidGVtcGxhdGVcIlxyXG4gICAgICAoY2hlY2tlZENoYW5nZSk9XCJvbkNoaWxkQ2hlY2tlZENoYW5nZShjaGlsZCwgJGV2ZW50KVwiPlxyXG4gICAgPC9uZ3gtdHJlZXZpZXctaXRlbT5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==