@samotics/ngx-treeview
Version:
An Angular treeview component with checkbox
58 lines • 10.2 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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeviewItemComponent, deps: [{ token: i1.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\">\n <ng-template [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{item: item, onCollapseExpand: onCollapseExpand, onCheckedChange: onCheckedChange}\">\n </ng-template>\n <div *ngIf=\"!item.collapsed\">\n <ngx-treeview-item [config]=\"config\" *ngFor=\"let child of item.children\" [item]=\"child\" [template]=\"template\"\n (checkedChange)=\"onChildCheckedChange(child, $event)\">\n </ngx-treeview-item>\n </div>\n</div>\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: "18.2.13", ngImport: i0, type: TreeviewItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-treeview-item', template: "<div *ngIf=\"item\" class=\"treeview-item\">\n <ng-template [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{item: item, onCollapseExpand: onCollapseExpand, onCheckedChange: onCheckedChange}\">\n </ng-template>\n <div *ngIf=\"!item.collapsed\">\n <ngx-treeview-item [config]=\"config\" *ngFor=\"let child of item.children\" [item]=\"child\" [template]=\"template\"\n (checkedChange)=\"onChildCheckedChange(child, $event)\">\n </ngx-treeview-item>\n </div>\n</div>\n", styles: [":host{display:block}:host .treeview-item{white-space:nowrap}:host .treeview-item .treeview-item{margin-left:2rem}\n"] }]
}], ctorParameters: () => [{ type: i1.TreeviewConfig }], propDecorators: { config: [{
type: Input
}], template: [{
type: Input
}], item: [{
type: Input
}], checkedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZXZpZXctaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxRQUFRLENBQUM7Ozs7QUFVL0IsTUFBTSxPQUFPLHFCQUFxQjtJQU1oQyxZQUNVLGFBQTZCO1FBQTdCLGtCQUFhLEdBQWIsYUFBYSxDQUFnQjtRQUg3QixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFRdEQscUJBQWdCLEdBQUcsR0FBRyxFQUFFO1lBQ3RCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDN0MsQ0FBQyxDQUFBO1FBRUQsb0JBQWUsR0FBRyxHQUFHLEVBQUU7WUFDckIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7WUFDbEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO2dCQUN2RSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztZQUMxRSxDQUFDO1lBQ0QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDbkMsQ0FBQyxDQUFBO1FBYkMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQ25DLENBQUM7SUFjRCxvQkFBb0IsQ0FBQyxLQUFtQixFQUFFLE9BQWdCO1FBQ3hELElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLHVCQUF1QixFQUFFLENBQUM7WUFDekMsSUFBSSxXQUFXLEdBQVksSUFBSSxDQUFDO1lBQ2hDLEtBQUssTUFBTSxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztnQkFDM0MsSUFBSSxXQUFXLEtBQUssSUFBSSxFQUFFLENBQUM7b0JBQ3pCLFdBQVcsR0FBRyxTQUFTLENBQUMsT0FBTyxDQUFDO2dCQUNsQyxDQUFDO3FCQUFNLElBQUksV0FBVyxLQUFLLFNBQVMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztvQkFDN0MsV0FBVyxHQUFHLFNBQVMsQ0FBQztvQkFDeEIsTUFBTTtnQkFDUixDQUFDO1lBQ0gsQ0FBQztZQUVELElBQUksV0FBVyxLQUFLLElBQUksRUFBRSxDQUFDO2dCQUN6QixXQUFXLEdBQUcsS0FBSyxDQUFDO1lBQ3RCLENBQUM7WUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxLQUFLLFdBQVcsRUFBRSxDQUFDO2dCQUN0QyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxXQUFXLENBQUM7WUFDbEMsQ0FBQztRQUVILENBQUM7UUFFRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNuQyxDQUFDOytHQS9DVSxxQkFBcUI7bUdBQXJCLHFCQUFxQix3S0NYbEMsbWZBVUEscWpCRENhLHFCQUFxQjs7NEZBQXJCLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxtQkFBbUI7bUZBS3BCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBpc05pbCB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQgeyBUcmVldmlld0l0ZW0gfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctaXRlbSc7XG5pbXBvcnQgeyBUcmVldmlld0NvbmZpZyB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1jb25maWcnO1xuaW1wb3J0IHsgVHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0IH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RyZWV2aWV3LWl0ZW0tdGVtcGxhdGUtY29udGV4dCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC10cmVldmlldy1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RyZWV2aWV3LWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90cmVldmlldy1pdGVtLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVHJlZXZpZXdJdGVtQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY29uZmlnOiBUcmVldmlld0NvbmZpZztcbiAgQElucHV0KCkgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPFRyZWV2aWV3SXRlbVRlbXBsYXRlQ29udGV4dD47XG4gIEBJbnB1dCgpIGl0ZW06IFRyZWV2aWV3SXRlbTtcbiAgQE91dHB1dCgpIGNoZWNrZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBkZWZhdWx0Q29uZmlnOiBUcmVldmlld0NvbmZpZ1xuICApIHtcbiAgICB0aGlzLmNvbmZpZyA9IHRoaXMuZGVmYXVsdENvbmZpZztcbiAgfVxuXG4gIG9uQ29sbGFwc2VFeHBhbmQgPSAoKSA9PiB7XG4gICAgdGhpcy5pdGVtLmNvbGxhcHNlZCA9ICF0aGlzLml0ZW0uY29sbGFwc2VkO1xuICB9XG5cbiAgb25DaGVja2VkQ2hhbmdlID0gKCkgPT4ge1xuICAgIGNvbnN0IGNoZWNrZWQgPSB0aGlzLml0ZW0uY2hlY2tlZDtcbiAgICBpZiAoIWlzTmlsKHRoaXMuaXRlbS5jaGlsZHJlbikgJiYgIXRoaXMuY29uZmlnLmRlY291cGxlQ2hpbGRGcm9tUGFyZW50KSB7XG4gICAgICB0aGlzLml0ZW0uY2hpbGRyZW4uZm9yRWFjaChjaGlsZCA9PiBjaGlsZC5zZXRDaGVja2VkUmVjdXJzaXZlKGNoZWNrZWQpKTtcbiAgICB9XG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQoY2hlY2tlZCk7XG4gIH1cblxuICBvbkNoaWxkQ2hlY2tlZENoYW5nZShjaGlsZDogVHJlZXZpZXdJdGVtLCBjaGVja2VkOiBib29sZWFuKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmNvbmZpZy5kZWNvdXBsZUNoaWxkRnJvbVBhcmVudCkge1xuICAgICAgbGV0IGl0ZW1DaGVja2VkOiBib29sZWFuID0gbnVsbDtcbiAgICAgIGZvciAoY29uc3QgY2hpbGRJdGVtIG9mIHRoaXMuaXRlbS5jaGlsZHJlbikge1xuICAgICAgICBpZiAoaXRlbUNoZWNrZWQgPT09IG51bGwpIHtcbiAgICAgICAgICBpdGVtQ2hlY2tlZCA9IGNoaWxkSXRlbS5jaGVja2VkO1xuICAgICAgICB9IGVsc2UgaWYgKGl0ZW1DaGVja2VkICE9PSBjaGlsZEl0ZW0uY2hlY2tlZCkge1xuICAgICAgICAgIGl0ZW1DaGVja2VkID0gdW5kZWZpbmVkO1xuICAgICAgICAgIGJyZWFrO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIGlmIChpdGVtQ2hlY2tlZCA9PT0gbnVsbCkge1xuICAgICAgICBpdGVtQ2hlY2tlZCA9IGZhbHNlO1xuICAgICAgfVxuXG4gICAgICBpZiAodGhpcy5pdGVtLmNoZWNrZWQgIT09IGl0ZW1DaGVja2VkKSB7XG4gICAgICAgIHRoaXMuaXRlbS5jaGVja2VkID0gaXRlbUNoZWNrZWQ7XG4gICAgICB9XG5cbiAgICB9XG5cbiAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdChjaGVja2VkKTtcbiAgfVxufVxuIiwiPGRpdiAqbmdJZj1cIml0ZW1cIiBjbGFzcz1cInRyZWV2aWV3LWl0ZW1cIj5cbiAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRlbXBsYXRlXCJcbiAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwie2l0ZW06IGl0ZW0sIG9uQ29sbGFwc2VFeHBhbmQ6IG9uQ29sbGFwc2VFeHBhbmQsIG9uQ2hlY2tlZENoYW5nZTogb25DaGVja2VkQ2hhbmdlfVwiPlxuICA8L25nLXRlbXBsYXRlPlxuICA8ZGl2ICpuZ0lmPVwiIWl0ZW0uY29sbGFwc2VkXCI+XG4gICAgPG5neC10cmVldmlldy1pdGVtIFtjb25maWddPVwiY29uZmlnXCIgKm5nRm9yPVwibGV0IGNoaWxkIG9mIGl0ZW0uY2hpbGRyZW5cIiBbaXRlbV09XCJjaGlsZFwiIFt0ZW1wbGF0ZV09XCJ0ZW1wbGF0ZVwiXG4gICAgICAoY2hlY2tlZENoYW5nZSk9XCJvbkNoaWxkQ2hlY2tlZENoYW5nZShjaGlsZCwgJGV2ZW50KVwiPlxuICAgIDwvbmd4LXRyZWV2aWV3LWl0ZW0+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=