@blackbaud/angular-tree-component
Version:
A simple yet powerful tree component for Angular 14+
81 lines (79 loc) • 9.4 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./tree-node-content.component";
import * as i3 from "../directives/tree-drop.directive";
import * as i4 from "../directives/tree-drag.directive";
import * as i5 from "./tree-node-expander.component";
import * as i6 from "./tree-node-checkbox.component";
export class TreeNodeWrapperComponent {
}
/** @nocollapse */ TreeNodeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TreeNodeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeWrapperComponent, selector: "tree-node-wrapper", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
<div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
<tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
<tree-node-expander [node]="node"></tree-node-expander>
<div class="node-content-wrapper"
[class.node-content-wrapper-active]="node.isActive"
[class.node-content-wrapper-focused]="node.isFocused"
(click)="node.mouseAction('click', $event)"
(dblclick)="node.mouseAction('dblClick', $event)"
(mouseover)="node.mouseAction('mouseOver', $event)"
(mouseout)="node.mouseAction('mouseOut', $event)"
(contextmenu)="node.mouseAction('contextMenu', $event)"
(treeDrop)="node.onDrop($event)"
(treeDropDragOver)="node.mouseAction('dragOver', $event)"
(treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
(treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
[treeAllowDrop]="node.allowDrop"
[allowDragoverStyling]="node.allowDragoverStyling()"
[treeDrag]="node"
[treeDragEnabled]="node.allowDrag()">
<tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
</tree-node-content>
</div>
</div>
<ng-container
[ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
[ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: i3.TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: i4.TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: i5.TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node"] }, { kind: "component", type: i6.TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'tree-node-wrapper', encapsulation: ViewEncapsulation.None, template: `
<div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
<tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
<tree-node-expander [node]="node"></tree-node-expander>
<div class="node-content-wrapper"
[class.node-content-wrapper-active]="node.isActive"
[class.node-content-wrapper-focused]="node.isFocused"
(click)="node.mouseAction('click', $event)"
(dblclick)="node.mouseAction('dblClick', $event)"
(mouseover)="node.mouseAction('mouseOver', $event)"
(mouseout)="node.mouseAction('mouseOut', $event)"
(contextmenu)="node.mouseAction('contextMenu', $event)"
(treeDrop)="node.onDrop($event)"
(treeDropDragOver)="node.mouseAction('dragOver', $event)"
(treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
(treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
[treeAllowDrop]="node.allowDrop"
[allowDragoverStyling]="node.allowDragoverStyling()"
[treeDrag]="node"
[treeDragEnabled]="node.allowDrag()">
<tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
</tree-node-content>
</div>
</div>
<ng-container
[ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
[ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
</ng-container>
` }]
}], propDecorators: { node: [{
type: Input
}], index: [{
type: Input
}], templates: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS1ub2RlLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci10cmVlLWNvbXBvbmVudC9zcmMvbGliL2NvbXBvbmVudHMvdHJlZS1ub2RlLXdyYXBwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUcsS0FBSyxFQUFHLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7OztBQXVDdEUsTUFBTSxPQUFPLHdCQUF3Qjs7d0lBQXhCLHdCQUF3Qjs0SEFBeEIsd0JBQXdCLDJIQWhDekI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkJUOzJGQUdVLHdCQUF3QjtrQkFwQ3BDLFNBQVM7K0JBQ0UsbUJBQW1CLGlCQUNkLGlCQUFpQixDQUFDLElBQUksWUFFM0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkJUOzhCQUtRLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCAsIElucHV0ICwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRyZWVOb2RlIH0gZnJvbSAnLi4vbW9kZWxzL3RyZWUtbm9kZS5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RyZWUtbm9kZS13cmFwcGVyJyAsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUgLFxuICBzdHlsZXM6IFtdICxcbiAgdGVtcGxhdGU6IGBcbiAgICAgIDxkaXYgKm5nSWY9XCIhdGVtcGxhdGVzLnRyZWVOb2RlV3JhcHBlclRlbXBsYXRlXCIgY2xhc3M9XCJub2RlLXdyYXBwZXJcIiBbc3R5bGUucGFkZGluZy1sZWZ0XT1cIm5vZGUuZ2V0Tm9kZVBhZGRpbmcoKVwiPlxuICAgICAgICAgIDx0cmVlLW5vZGUtY2hlY2tib3ggKm5nSWY9XCJub2RlLm9wdGlvbnMudXNlQ2hlY2tib3hcIiBbbm9kZV09XCJub2RlXCI+PC90cmVlLW5vZGUtY2hlY2tib3g+XG4gICAgICAgICAgPHRyZWUtbm9kZS1leHBhbmRlciBbbm9kZV09XCJub2RlXCI+PC90cmVlLW5vZGUtZXhwYW5kZXI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm5vZGUtY29udGVudC13cmFwcGVyXCJcbiAgICAgICAgICAgICAgIFtjbGFzcy5ub2RlLWNvbnRlbnQtd3JhcHBlci1hY3RpdmVdPVwibm9kZS5pc0FjdGl2ZVwiXG4gICAgICAgICAgICAgICBbY2xhc3Mubm9kZS1jb250ZW50LXdyYXBwZXItZm9jdXNlZF09XCJub2RlLmlzRm9jdXNlZFwiXG4gICAgICAgICAgICAgICAoY2xpY2spPVwibm9kZS5tb3VzZUFjdGlvbignY2xpY2snLCAkZXZlbnQpXCJcbiAgICAgICAgICAgICAgIChkYmxjbGljayk9XCJub2RlLm1vdXNlQWN0aW9uKCdkYmxDbGljaycsICRldmVudClcIlxuICAgICAgICAgICAgICAgKG1vdXNlb3Zlcik9XCJub2RlLm1vdXNlQWN0aW9uKCdtb3VzZU92ZXInLCAkZXZlbnQpXCJcbiAgICAgICAgICAgICAgIChtb3VzZW91dCk9XCJub2RlLm1vdXNlQWN0aW9uKCdtb3VzZU91dCcsICRldmVudClcIlxuICAgICAgICAgICAgICAgKGNvbnRleHRtZW51KT1cIm5vZGUubW91c2VBY3Rpb24oJ2NvbnRleHRNZW51JywgJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAodHJlZURyb3ApPVwibm9kZS5vbkRyb3AoJGV2ZW50KVwiXG4gICAgICAgICAgICAgICAodHJlZURyb3BEcmFnT3Zlcik9XCJub2RlLm1vdXNlQWN0aW9uKCdkcmFnT3ZlcicsICRldmVudClcIlxuICAgICAgICAgICAgICAgKHRyZWVEcm9wRHJhZ0xlYXZlKT1cIm5vZGUubW91c2VBY3Rpb24oJ2RyYWdMZWF2ZScsICRldmVudClcIlxuICAgICAgICAgICAgICAgKHRyZWVEcm9wRHJhZ0VudGVyKT1cIm5vZGUubW91c2VBY3Rpb24oJ2RyYWdFbnRlcicsICRldmVudClcIlxuICAgICAgICAgICAgICAgW3RyZWVBbGxvd0Ryb3BdPVwibm9kZS5hbGxvd0Ryb3BcIlxuICAgICAgICAgICAgICAgW2FsbG93RHJhZ292ZXJTdHlsaW5nXT1cIm5vZGUuYWxsb3dEcmFnb3ZlclN0eWxpbmcoKVwiXG4gICAgICAgICAgICAgICBbdHJlZURyYWddPVwibm9kZVwiXG4gICAgICAgICAgICAgICBbdHJlZURyYWdFbmFibGVkXT1cIm5vZGUuYWxsb3dEcmFnKClcIj5cblxuICAgICAgICAgICAgICA8dHJlZS1ub2RlLWNvbnRlbnQgW25vZGVdPVwibm9kZVwiIFtpbmRleF09XCJpbmRleFwiIFt0ZW1wbGF0ZV09XCJ0ZW1wbGF0ZXMudHJlZU5vZGVUZW1wbGF0ZVwiPlxuICAgICAgICAgICAgICA8L3RyZWUtbm9kZS1jb250ZW50PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRlbXBsYXRlcy50cmVlTm9kZVdyYXBwZXJUZW1wbGF0ZVwiXG4gICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogbm9kZSwgbm9kZTogbm9kZSwgaW5kZXg6IGluZGV4LCB0ZW1wbGF0ZXM6IHRlbXBsYXRlcyB9XCI+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgYFxufSlcblxuZXhwb3J0IGNsYXNzIFRyZWVOb2RlV3JhcHBlckNvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgbm9kZTogVHJlZU5vZGU7XG4gIEBJbnB1dCgpIGluZGV4OiBudW1iZXI7XG4gIEBJbnB1dCgpIHRlbXBsYXRlczogYW55O1xuXG59XG4iXX0=