@kishorethecoder/ngx-treeview
Version:
An Angular treeview component with checkbox upgraded with angular 14
46 lines • 9.66 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 {
constructor(defaultConfig) {
this.defaultConfig = defaultConfig;
this.checkedChange = new EventEmitter();
this.unSelectAll = new EventEmitter();
this.onCollapseExpand = () => {
this.item.collapsed = !this.item.collapsed;
};
this.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));
}
const item = this.item;
this.checkedChange.emit({ item, checked });
};
this.config = this.defaultConfig;
}
}
TreeviewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeviewItemComponent, deps: [{ token: i1.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component });
TreeviewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n item: item,\r\n onCollapseExpand: onCollapseExpand,\r\n onCheckedChange: onCheckedChange\r\n }\"\r\n >\r\n </ng-template>\r\n <div *ngIf=\"!item.collapsed\">\r\n <ngx-treeview-item\r\n [config]=\"config\"\r\n *ngFor=\"let child of item.children\"\r\n [item]=\"child\"\r\n [template]=\"template\"\r\n (checkedChange)=\"checkedChange.emit($event)\"\r\n (unSelectAll)=\"unSelectAll.emit(true)\"\r\n >\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: "14.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\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n item: item,\r\n onCollapseExpand: onCollapseExpand,\r\n onCheckedChange: onCheckedChange\r\n }\"\r\n >\r\n </ng-template>\r\n <div *ngIf=\"!item.collapsed\">\r\n <ngx-treeview-item\r\n [config]=\"config\"\r\n *ngFor=\"let child of item.children\"\r\n [item]=\"child\"\r\n [template]=\"template\"\r\n (checkedChange)=\"checkedChange.emit($event)\"\r\n (unSelectAll)=\"unSelectAll.emit(true)\"\r\n >\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZXZpZXctaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXcvc3JjL2xpYi9jb21wb25lbnRzL3RyZWV2aWV3LWl0ZW0vdHJlZXZpZXctaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7QUFVbEMsTUFBTSxPQUFPLHFCQUFxQjtJQVVoQyxZQUFvQixhQUE2QjtRQUE3QixrQkFBYSxHQUFiLGFBQWEsQ0FBZ0I7UUFOdkMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFHdEMsQ0FBQztRQUNLLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQU1wRCxxQkFBZ0IsR0FBRyxHQUFHLEVBQUU7WUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUM3QyxDQUFDLENBQUM7UUFFRixvQkFBZSxHQUFHLEdBQUcsRUFBRTtZQUNyQixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztZQUNsQyxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsb0JBQW9CLElBQUksT0FBTyxFQUFFO2dCQUMvQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDNUIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO2FBQzdCO2lCQUFNLElBQ0wsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7Z0JBQzFCLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyx1QkFBdUIsRUFDcEM7Z0JBQ0EsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQzthQUMzRTtZQUNELE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7WUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQztRQUM3QyxDQUFDLENBQUM7UUFwQkEsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQ25DLENBQUM7O21IQVpVLHFCQUFxQjt1R0FBckIscUJBQXFCLG9NQ2pCbEMsNm9CQXNCQSxxakJETGEscUJBQXFCOzRGQUFyQixxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsbUJBQW1CO3FHQUtwQixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFJRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIElucHV0LFxyXG4gIE91dHB1dCxcclxuICBUZW1wbGF0ZVJlZixcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgaXNOaWwgfSBmcm9tICdsb2Rhc2gtZXMnO1xyXG5pbXBvcnQgeyBUcmVldmlld0l0ZW0gfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctaXRlbSc7XHJcbmltcG9ydCB7IFRyZWV2aWV3Q29uZmlnIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RyZWV2aWV3LWNvbmZpZyc7XHJcbmltcG9ydCB7IFRyZWV2aWV3SXRlbVRlbXBsYXRlQ29udGV4dCB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1pdGVtLXRlbXBsYXRlLWNvbnRleHQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtdHJlZXZpZXctaXRlbScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RyZWV2aWV3LWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RyZWV2aWV3LWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRyZWV2aWV3SXRlbUNvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgY29uZmlnOiBUcmVldmlld0NvbmZpZztcclxuICBASW5wdXQoKSB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8VHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0PjtcclxuICBASW5wdXQoKSBpdGVtOiBUcmVldmlld0l0ZW07XHJcbiAgQE91dHB1dCgpIGNoZWNrZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHtcclxuICAgIGl0ZW06IFRyZWV2aWV3SXRlbTtcclxuICAgIGNoZWNrZWQ6IGJvb2xlYW47XHJcbiAgfT4oKTtcclxuICBAT3V0cHV0KCkgdW5TZWxlY3RBbGwgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZGVmYXVsdENvbmZpZzogVHJlZXZpZXdDb25maWcpIHtcclxuICAgIHRoaXMuY29uZmlnID0gdGhpcy5kZWZhdWx0Q29uZmlnO1xyXG4gIH1cclxuXHJcbiAgb25Db2xsYXBzZUV4cGFuZCA9ICgpID0+IHtcclxuICAgIHRoaXMuaXRlbS5jb2xsYXBzZWQgPSAhdGhpcy5pdGVtLmNvbGxhcHNlZDtcclxuICB9O1xyXG5cclxuICBvbkNoZWNrZWRDaGFuZ2UgPSAoKSA9PiB7XHJcbiAgICBjb25zdCBjaGVja2VkID0gdGhpcy5pdGVtLmNoZWNrZWQ7XHJcbiAgICBpZiAodGhpcy5jb25maWcuYWxsb3dTaW5nbGVTZWxlY3Rpb24gJiYgY2hlY2tlZCkge1xyXG4gICAgICB0aGlzLnVuU2VsZWN0QWxsLmVtaXQodHJ1ZSk7XHJcbiAgICAgIHRoaXMuaXRlbS5jaGVja2VkID0gY2hlY2tlZDtcclxuICAgIH0gZWxzZSBpZiAoXHJcbiAgICAgICFpc05pbCh0aGlzLml0ZW0uY2hpbGRyZW4pICYmXHJcbiAgICAgICF0aGlzLmNvbmZpZy5kZWNvdXBsZUNoaWxkRnJvbVBhcmVudFxyXG4gICAgKSB7XHJcbiAgICAgIHRoaXMuaXRlbS5jaGlsZHJlbi5mb3JFYWNoKChjaGlsZCkgPT4gY2hpbGQuc2V0Q2hlY2tlZFJlY3Vyc2l2ZShjaGVja2VkKSk7XHJcbiAgICB9XHJcbiAgICBjb25zdCBpdGVtID0gdGhpcy5pdGVtO1xyXG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQoeyBpdGVtLCBjaGVja2VkIH0pO1xyXG4gIH07XHJcbn1cclxuIiwiPGRpdiAqbmdJZj1cIml0ZW1cIiBjbGFzcz1cInRyZWV2aWV3LWl0ZW1cIj5cclxuICA8bmctdGVtcGxhdGVcclxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRlbXBsYXRlXCJcclxuICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7XHJcbiAgICAgIGl0ZW06IGl0ZW0sXHJcbiAgICAgIG9uQ29sbGFwc2VFeHBhbmQ6IG9uQ29sbGFwc2VFeHBhbmQsXHJcbiAgICAgIG9uQ2hlY2tlZENoYW5nZTogb25DaGVja2VkQ2hhbmdlXHJcbiAgICB9XCJcclxuICA+XHJcbiAgPC9uZy10ZW1wbGF0ZT5cclxuICA8ZGl2ICpuZ0lmPVwiIWl0ZW0uY29sbGFwc2VkXCI+XHJcbiAgICA8bmd4LXRyZWV2aWV3LWl0ZW1cclxuICAgICAgW2NvbmZpZ109XCJjb25maWdcIlxyXG4gICAgICAqbmdGb3I9XCJsZXQgY2hpbGQgb2YgaXRlbS5jaGlsZHJlblwiXHJcbiAgICAgIFtpdGVtXT1cImNoaWxkXCJcclxuICAgICAgW3RlbXBsYXRlXT1cInRlbXBsYXRlXCJcclxuICAgICAgKGNoZWNrZWRDaGFuZ2UpPVwiY2hlY2tlZENoYW5nZS5lbWl0KCRldmVudClcIlxyXG4gICAgICAodW5TZWxlY3RBbGwpPVwidW5TZWxlY3RBbGwuZW1pdCh0cnVlKVwiXHJcbiAgICA+XHJcbiAgICA8L25neC10cmVldmlldy1pdGVtPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19