ngx-treeview-v2
Version:
An Angular treeview component with checkbox
59 lines • 10.5 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { TreeviewComponent } from '../treeview/treeview.component';
import * as i0 from "@angular/core";
import * as i1 from "../../models/treeview-i18n";
import * as i2 from "../../models/treeview-config";
import * as i3 from "@angular/common";
import * as i4 from "../treeview/treeview.component";
import * as i5 from "../../directives/dropdown.directive";
import * as i6 from "../../directives/dropdown-menu.directive";
import * as i7 from "../../directives/dropdown-toggle.directive";
export class DropdownTreeviewComponent {
i18n;
defaultConfig;
buttonClass = 'btn-outline-secondary';
headerTemplate;
itemTemplate;
items;
config;
selectedChange = new EventEmitter(true);
filterChange = new EventEmitter();
treeviewComponent;
buttonLabel;
constructor(i18n, defaultConfig) {
this.i18n = i18n;
this.defaultConfig = defaultConfig;
this.config = this.defaultConfig;
}
onSelectedChange(values) {
this.buttonLabel = this.i18n.getText(this.treeviewComponent.selection);
this.selectedChange.emit(values);
}
onFilterChange(text) {
this.filterChange.emit(text);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeviewComponent, deps: [{ token: i1.TreeviewI18n }, { token: i2.TreeviewConfig }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: { buttonClass: "buttonClass", headerTemplate: "headerTemplate", itemTemplate: "itemTemplate", items: "items", config: "config" }, outputs: { selectedChange: "selectedChange", filterChange: "filterChange" }, viewQueries: [{ propertyName: "treeviewComponent", first: true, predicate: TreeviewComponent, descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" ngxDropdown>\r\n <button class=\"btn\" [ngClass]=\"buttonClass\" type=\"button\" role=\"button\" ngxDropdownToggle>\r\n {{buttonLabel}}\r\n </button>\r\n <div ngxDropdownMenu aria-labelledby=\"dropdownMenu\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dropdown-container\">\r\n <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"\r\n (selectedChange)=\"onSelectedChange($event)\" (filterChange)=\"onFilterChange($event)\">\r\n </ngx-treeview>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dropdown{width:100%;display:inline-block}.dropdown button{width:100%;margin-right:.9rem;text-align:left;overflow:hidden;padding-right:30px;text-overflow:ellipsis}.dropdown button:after{position:absolute;right:.6rem;margin-top:.6rem}.dropdown .dropdown-menu .dropdown-container{padding:0 .6rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.TreeviewComponent, selector: "ngx-treeview", inputs: ["headerTemplate", "itemTemplate", "items", "config"], outputs: ["selectedChange", "filterChange"] }, { kind: "directive", type: i5.DropdownDirective, selector: "[ngxDropdown]", inputs: ["open"], outputs: ["openChange"], exportAs: ["ngxDropdown"] }, { kind: "directive", type: i6.DropdownMenuDirective, selector: "[ngxDropdownMenu]" }, { kind: "directive", type: i7.DropdownToggleDirective, selector: "[ngxDropdownToggle]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeviewComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-dropdown-treeview', template: "<div class=\"dropdown\" ngxDropdown>\r\n <button class=\"btn\" [ngClass]=\"buttonClass\" type=\"button\" role=\"button\" ngxDropdownToggle>\r\n {{buttonLabel}}\r\n </button>\r\n <div ngxDropdownMenu aria-labelledby=\"dropdownMenu\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dropdown-container\">\r\n <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"\r\n (selectedChange)=\"onSelectedChange($event)\" (filterChange)=\"onFilterChange($event)\">\r\n </ngx-treeview>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dropdown{width:100%;display:inline-block}.dropdown button{width:100%;margin-right:.9rem;text-align:left;overflow:hidden;padding-right:30px;text-overflow:ellipsis}.dropdown button:after{position:absolute;right:.6rem;margin-top:.6rem}.dropdown .dropdown-menu .dropdown-container{padding:0 .6rem}\n"] }]
}], ctorParameters: function () { return [{ type: i1.TreeviewI18n }, { type: i2.TreeviewConfig }]; }, propDecorators: { buttonClass: [{
type: Input
}], headerTemplate: [{
type: Input
}], itemTemplate: [{
type: Input
}], items: [{
type: Input
}], config: [{
type: Input
}], selectedChange: [{
type: Output
}], filterChange: [{
type: Output
}], treeviewComponent: [{
type: ViewChild,
args: [TreeviewComponent, { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tdHJlZXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRyZWV2aWV3LXYyL3NyYy9saWIvY29tcG9uZW50cy9kcm9wZG93bi10cmVldmlldy9kcm9wZG93bi10cmVldmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdHJlZXZpZXctdjIvc3JjL2xpYi9jb21wb25lbnRzL2Ryb3Bkb3duLXRyZWV2aWV3L2Ryb3Bkb3duLXRyZWV2aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBSS9GLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7Ozs7Ozs7QUFTbkUsTUFBTSxPQUFPLHlCQUF5QjtJQVkzQjtJQUNDO0lBWkQsV0FBVyxHQUFHLHVCQUF1QixDQUFDO0lBQ3RDLGNBQWMsQ0FBNkM7SUFDM0QsWUFBWSxDQUEyQztJQUN2RCxLQUFLLENBQWlCO0lBQ3RCLE1BQU0sQ0FBaUI7SUFDdEIsY0FBYyxHQUFHLElBQUksWUFBWSxDQUFRLElBQUksQ0FBQyxDQUFDO0lBQy9DLFlBQVksR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBQ0gsaUJBQWlCLENBQW9CO0lBQ3RGLFdBQVcsQ0FBUztJQUVwQixZQUNTLElBQWtCLEVBQ2pCLGFBQTZCO1FBRDlCLFNBQUksR0FBSixJQUFJLENBQWM7UUFDakIsa0JBQWEsR0FBYixhQUFhLENBQWdCO1FBRXJDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUNuQyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBYTtRQUM1QixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN2RSxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsY0FBYyxDQUFDLElBQVk7UUFDekIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDL0IsQ0FBQzt3R0F6QlUseUJBQXlCOzRGQUF6Qix5QkFBeUIsdVVBUXpCLGlCQUFpQixnRENyQjlCLHFtQkFZQTs7NEZEQ2EseUJBQXlCO2tCQUxyQyxTQUFTOytCQUNFLHVCQUF1QjtnSUFLeEIsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLFlBQVk7c0JBQXJCLE1BQU07Z0JBQzBDLGlCQUFpQjtzQkFBakUsU0FBUzt1QkFBQyxpQkFBaUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0NoaWxkLCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBUcmVldmlld0kxOG4gfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctaTE4bic7XHJcbmltcG9ydCB7IFRyZWV2aWV3SXRlbSB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1pdGVtJztcclxuaW1wb3J0IHsgVHJlZXZpZXdDb25maWcgfSBmcm9tICcuLi8uLi9tb2RlbHMvdHJlZXZpZXctY29uZmlnJztcclxuaW1wb3J0IHsgVHJlZXZpZXdDb21wb25lbnQgfSBmcm9tICcuLi90cmVldmlldy90cmVldmlldy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBUcmVldmlld0hlYWRlclRlbXBsYXRlQ29udGV4dCB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1oZWFkZXItdGVtcGxhdGUtY29udGV4dCc7XHJcbmltcG9ydCB7IFRyZWV2aWV3SXRlbVRlbXBsYXRlQ29udGV4dCB9IGZyb20gJy4uLy4uL21vZGVscy90cmVldmlldy1pdGVtLXRlbXBsYXRlLWNvbnRleHQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtZHJvcGRvd24tdHJlZXZpZXcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9wZG93bi10cmVldmlldy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZHJvcGRvd24tdHJlZXZpZXcuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJvcGRvd25UcmVldmlld0NvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgYnV0dG9uQ2xhc3MgPSAnYnRuLW91dGxpbmUtc2Vjb25kYXJ5JztcclxuICBASW5wdXQoKSBoZWFkZXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8VHJlZXZpZXdIZWFkZXJUZW1wbGF0ZUNvbnRleHQ+O1xyXG4gIEBJbnB1dCgpIGl0ZW1UZW1wbGF0ZTogVGVtcGxhdGVSZWY8VHJlZXZpZXdJdGVtVGVtcGxhdGVDb250ZXh0PjtcclxuICBASW5wdXQoKSBpdGVtczogVHJlZXZpZXdJdGVtW107XHJcbiAgQElucHV0KCkgY29uZmlnOiBUcmVldmlld0NvbmZpZztcclxuICBAT3V0cHV0KCkgc2VsZWN0ZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueVtdPih0cnVlKTtcclxuICBAT3V0cHV0KCkgZmlsdGVyQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgQFZpZXdDaGlsZChUcmVldmlld0NvbXBvbmVudCwgeyBzdGF0aWM6IGZhbHNlIH0pIHRyZWV2aWV3Q29tcG9uZW50OiBUcmVldmlld0NvbXBvbmVudDtcclxuICBidXR0b25MYWJlbDogc3RyaW5nO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHB1YmxpYyBpMThuOiBUcmVldmlld0kxOG4sXHJcbiAgICBwcml2YXRlIGRlZmF1bHRDb25maWc6IFRyZWV2aWV3Q29uZmlnXHJcbiAgKSB7XHJcbiAgICB0aGlzLmNvbmZpZyA9IHRoaXMuZGVmYXVsdENvbmZpZztcclxuICB9XHJcblxyXG4gIG9uU2VsZWN0ZWRDaGFuZ2UodmFsdWVzOiBhbnlbXSk6IHZvaWQge1xyXG4gICAgdGhpcy5idXR0b25MYWJlbCA9IHRoaXMuaTE4bi5nZXRUZXh0KHRoaXMudHJlZXZpZXdDb21wb25lbnQuc2VsZWN0aW9uKTtcclxuICAgIHRoaXMuc2VsZWN0ZWRDaGFuZ2UuZW1pdCh2YWx1ZXMpO1xyXG4gIH1cclxuXHJcbiAgb25GaWx0ZXJDaGFuZ2UodGV4dDogc3RyaW5nKTogdm9pZCB7XHJcbiAgICB0aGlzLmZpbHRlckNoYW5nZS5lbWl0KHRleHQpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZHJvcGRvd25cIiBuZ3hEcm9wZG93bj5cclxuICA8YnV0dG9uIGNsYXNzPVwiYnRuXCIgW25nQ2xhc3NdPVwiYnV0dG9uQ2xhc3NcIiB0eXBlPVwiYnV0dG9uXCIgcm9sZT1cImJ1dHRvblwiIG5neERyb3Bkb3duVG9nZ2xlPlxyXG4gICAge3tidXR0b25MYWJlbH19XHJcbiAgPC9idXR0b24+XHJcbiAgPGRpdiBuZ3hEcm9wZG93bk1lbnUgYXJpYS1sYWJlbGxlZGJ5PVwiZHJvcGRvd25NZW51XCIgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImRyb3Bkb3duLWNvbnRhaW5lclwiPlxyXG4gICAgICA8bmd4LXRyZWV2aWV3IFtjb25maWddPVwiY29uZmlnXCIgW2hlYWRlclRlbXBsYXRlXT1cImhlYWRlclRlbXBsYXRlXCIgW2l0ZW1zXT1cIml0ZW1zXCIgW2l0ZW1UZW1wbGF0ZV09XCJpdGVtVGVtcGxhdGVcIlxyXG4gICAgICAgIChzZWxlY3RlZENoYW5nZSk9XCJvblNlbGVjdGVkQ2hhbmdlKCRldmVudClcIiAoZmlsdGVyQ2hhbmdlKT1cIm9uRmlsdGVyQ2hhbmdlKCRldmVudClcIj5cclxuICAgICAgPC9uZ3gtdHJlZXZpZXc+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==