@soy-andrey-semyonov/ngx-treeview
Version:
An Angular treeview component with checkbox upgraded with angular 16
71 lines • 11.8 kB
JavaScript
import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { isNil } from 'lodash-es';
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();
unSelectAll = 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 (this.config.allowSingleSelection && checked) {
this.unSelectAll.emit(true);
this.item.checked = checked;
}
else 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.allowSingleSelection &&
!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.11", ngImport: i0, type: TreeviewItemComponent, deps: [{ token: i1.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TreeviewItemComponent, selector: "ngx-treeview-item", inputs: { config: "config", template: "template", item: "item" }, outputs: { checkedChange: "checkedChange", unSelectAll: "unSelectAll" }, 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 (unSelectAll)=\"unSelectAll.emit(true)\">\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", "unSelectAll"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", 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 (unSelectAll)=\"unSelectAll.emit(true)\">\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
}], unSelectAll: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZXZpZXctaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7QUFVbEMsTUFBTSxPQUFPLHFCQUFxQjtJQU9aO0lBTlgsTUFBTSxDQUFpQjtJQUN2QixRQUFRLENBQTJDO0lBQ25ELElBQUksQ0FBZTtJQUNsQixhQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUM1QyxXQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUVwRCxZQUFvQixhQUE2QjtRQUE3QixrQkFBYSxHQUFiLGFBQWEsQ0FBZ0I7UUFDL0MsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQ25DLENBQUM7SUFFRCxnQkFBZ0IsR0FBRyxHQUFHLEVBQUU7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUM3QyxDQUFDLENBQUM7SUFFRixlQUFlLEdBQUcsR0FBRyxFQUFFO1FBQ3JCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQ2xDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsSUFBSSxPQUFPLEVBQUU7WUFDL0MsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1NBQzdCO2FBQU0sSUFDTCxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztZQUMxQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsdUJBQXVCLEVBQ3BDO1lBQ0EsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztTQUMzRTtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ25DLENBQUMsQ0FBQztJQUVGLG9CQUFvQixDQUFDLEtBQW1CLEVBQUUsT0FBZ0I7UUFDeEQsSUFDRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsb0JBQW9CO1lBQ2pDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyx1QkFBdUIsRUFDcEM7WUFDQSxJQUFJLFdBQVcsR0FBWSxJQUFJLENBQUM7WUFDaEMsS0FBSyxNQUFNLFNBQVMsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDMUMsSUFBSSxXQUFXLEtBQUssSUFBSSxFQUFFO29CQUN4QixXQUFXLEdBQUcsU0FBUyxDQUFDLE9BQU8sQ0FBQztpQkFDakM7cUJBQU0sSUFBSSxXQUFXLEtBQUssU0FBUyxDQUFDLE9BQU8sRUFBRTtvQkFDNUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztvQkFDeEIsTUFBTTtpQkFDUDthQUNGO1lBRUQsSUFBSSxXQUFXLEtBQUssSUFBSSxFQUFFO2dCQUN4QixXQUFXLEdBQUcsS0FBSyxDQUFDO2FBQ3JCO1lBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLEVBQUU7Z0JBQ3JDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLFdBQVcsQ0FBQzthQUNqQztTQUNGO1FBRUQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDbkMsQ0FBQzt3R0F0RFUscUJBQXFCOzRGQUFyQixxQkFBcUIsb01DakJsQyx5akJBV0EscWpCRE1hLHFCQUFxQjs7NEZBQXJCLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxtQkFBbUI7cUdBS3BCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0LFxyXG4gIFRlbXBsYXRlUmVmLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBpc05pbCB9IGZyb20gJ2xvZGFzaC1lcyc7XHJcbmltcG9ydCB7IFRyZWV2aWV3SXRlbSB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1pdGVtJztcclxuaW1wb3J0IHsgVHJlZXZpZXdDb25maWcgfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctY29uZmlnJztcclxuaW1wb3J0IHsgVHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0IH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RyZWV2aWV3LWl0ZW0tdGVtcGxhdGUtY29udGV4dCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC10cmVldmlldy1pdGVtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVHJlZXZpZXdJdGVtQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBjb25maWc6IFRyZWV2aWV3Q29uZmlnO1xyXG4gIEBJbnB1dCgpIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxUcmVldmlld0l0ZW1UZW1wbGF0ZUNvbnRleHQ+O1xyXG4gIEBJbnB1dCgpIGl0ZW06IFRyZWV2aWV3SXRlbTtcclxuICBAT3V0cHV0KCkgY2hlY2tlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuICBAT3V0cHV0KCkgdW5TZWxlY3RBbGwgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZGVmYXVsdENvbmZpZzogVHJlZXZpZXdDb25maWcpIHtcclxuICAgIHRoaXMuY29uZmlnID0gdGhpcy5kZWZhdWx0Q29uZmlnO1xyXG4gIH1cclxuXHJcbiAgb25Db2xsYXBzZUV4cGFuZCA9ICgpID0+IHtcclxuICAgIHRoaXMuaXRlbS5jb2xsYXBzZWQgPSAhdGhpcy5pdGVtLmNvbGxhcHNlZDtcclxuICB9O1xyXG5cclxuICBvbkNoZWNrZWRDaGFuZ2UgPSAoKSA9PiB7XHJcbiAgICBjb25zdCBjaGVja2VkID0gdGhpcy5pdGVtLmNoZWNrZWQ7XHJcbiAgICBpZiAodGhpcy5jb25maWcuYWxsb3dTaW5nbGVTZWxlY3Rpb24gJiYgY2hlY2tlZCkge1xyXG4gICAgICB0aGlzLnVuU2VsZWN0QWxsLmVtaXQodHJ1ZSk7XHJcbiAgICAgIHRoaXMuaXRlbS5jaGVja2VkID0gY2hlY2tlZDtcclxuICAgIH0gZWxzZSBpZiAoXHJcbiAgICAgICFpc05pbCh0aGlzLml0ZW0uY2hpbGRyZW4pICYmXHJcbiAgICAgICF0aGlzLmNvbmZpZy5kZWNvdXBsZUNoaWxkRnJvbVBhcmVudFxyXG4gICAgKSB7XHJcbiAgICAgIHRoaXMuaXRlbS5jaGlsZHJlbi5mb3JFYWNoKChjaGlsZCkgPT4gY2hpbGQuc2V0Q2hlY2tlZFJlY3Vyc2l2ZShjaGVja2VkKSk7XHJcbiAgICB9XHJcbiAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdChjaGVja2VkKTtcclxuICB9O1xyXG5cclxuICBvbkNoaWxkQ2hlY2tlZENoYW5nZShjaGlsZDogVHJlZXZpZXdJdGVtLCBjaGVja2VkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICBpZiAoXHJcbiAgICAgICF0aGlzLmNvbmZpZy5hbGxvd1NpbmdsZVNlbGVjdGlvbiAmJlxyXG4gICAgICAhdGhpcy5jb25maWcuZGVjb3VwbGVDaGlsZEZyb21QYXJlbnRcclxuICAgICkge1xyXG4gICAgICBsZXQgaXRlbUNoZWNrZWQ6IGJvb2xlYW4gPSBudWxsO1xyXG4gICAgICBmb3IgKGNvbnN0IGNoaWxkSXRlbSBvZiB0aGlzLml0ZW0uY2hpbGRyZW4pIHtcclxuICAgICAgICBpZiAoaXRlbUNoZWNrZWQgPT09IG51bGwpIHtcclxuICAgICAgICAgIGl0ZW1DaGVja2VkID0gY2hpbGRJdGVtLmNoZWNrZWQ7XHJcbiAgICAgICAgfSBlbHNlIGlmIChpdGVtQ2hlY2tlZCAhPT0gY2hpbGRJdGVtLmNoZWNrZWQpIHtcclxuICAgICAgICAgIGl0ZW1DaGVja2VkID0gdW5kZWZpbmVkO1xyXG4gICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcblxyXG4gICAgICBpZiAoaXRlbUNoZWNrZWQgPT09IG51bGwpIHtcclxuICAgICAgICBpdGVtQ2hlY2tlZCA9IGZhbHNlO1xyXG4gICAgICB9XHJcblxyXG4gICAgICBpZiAodGhpcy5pdGVtLmNoZWNrZWQgIT09IGl0ZW1DaGVja2VkKSB7XHJcbiAgICAgICAgdGhpcy5pdGVtLmNoZWNrZWQgPSBpdGVtQ2hlY2tlZDtcclxuICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHRoaXMuY2hlY2tlZENoYW5nZS5lbWl0KGNoZWNrZWQpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2ICpuZ0lmPVwiaXRlbVwiIGNsYXNzPVwidHJlZXZpZXctaXRlbVwiPlxyXG4gIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJ0ZW1wbGF0ZVwiXHJcbiAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwie2l0ZW06IGl0ZW0sIG9uQ29sbGFwc2VFeHBhbmQ6IG9uQ29sbGFwc2VFeHBhbmQsIG9uQ2hlY2tlZENoYW5nZTogb25DaGVja2VkQ2hhbmdlfVwiPlxyXG4gIDwvbmctdGVtcGxhdGU+XHJcbiAgPGRpdiAqbmdJZj1cIiFpdGVtLmNvbGxhcHNlZFwiPlxyXG4gICAgPG5neC10cmVldmlldy1pdGVtIFtjb25maWddPVwiY29uZmlnXCIgKm5nRm9yPVwibGV0IGNoaWxkIG9mIGl0ZW0uY2hpbGRyZW5cIiBbaXRlbV09XCJjaGlsZFwiIFt0ZW1wbGF0ZV09XCJ0ZW1wbGF0ZVwiXHJcbiAgICAgIChjaGVja2VkQ2hhbmdlKT1cIm9uQ2hpbGRDaGVja2VkQ2hhbmdlKGNoaWxkLCAkZXZlbnQpXCJcclxuICAgICAgKHVuU2VsZWN0QWxsKT1cInVuU2VsZWN0QWxsLmVtaXQodHJ1ZSlcIj5cclxuICAgIDwvbmd4LXRyZWV2aWV3LWl0ZW0+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=