ng2-tree
Version:
angular2 component for visualizing data that can be naturally represented as a tree
64 lines • 7.2 kB
JavaScript
import { Directive, ElementRef, EventEmitter, HostListener, Inject, Input, Output, Renderer2 } from '@angular/core';
import { NodeEditableEventAction } from './editable.events';
import * as i0 from "@angular/core";
export class NodeEditableDirective {
renderer;
elementRef;
/* tslint:disable:no-input-rename */
nodeValue;
/* tslint:enable:no-input-rename */
valueChanged = new EventEmitter(false);
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
}
ngOnInit() {
const nativeElement = this.elementRef.nativeElement;
if (nativeElement) {
nativeElement.focus();
}
this.renderer.setProperty(nativeElement, 'value', this.nodeValue);
}
applyNewValue(newNodeValue) {
this.valueChanged.emit({ type: 'keyup', value: newNodeValue });
}
applyNewValueByLoosingFocus(newNodeValue) {
this.valueChanged.emit({ type: 'blur', value: newNodeValue });
}
cancelEditing() {
this.valueChanged.emit({
type: 'keyup',
value: this.nodeValue,
action: NodeEditableEventAction.Cancel
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeEditableDirective, deps: [{ token: Renderer2 }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NodeEditableDirective, selector: "[nodeEditable]", inputs: { nodeValue: ["nodeEditable", "nodeValue"] }, outputs: { valueChanged: "valueChanged" }, host: { listeners: { "keyup.enter": "applyNewValue($event.target.value)", "blur": "applyNewValueByLoosingFocus($event.target.value)", "keyup.esc": "cancelEditing()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeEditableDirective, decorators: [{
type: Directive,
args: [{
selector: '[nodeEditable]'
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
type: Inject,
args: [Renderer2]
}] }, { type: i0.ElementRef, decorators: [{
type: Inject,
args: [ElementRef]
}] }]; }, propDecorators: { nodeValue: [{
type: Input,
args: ['nodeEditable']
}], valueChanged: [{
type: Output
}], applyNewValue: [{
type: HostListener,
args: ['keyup.enter', ['$event.target.value']]
}], applyNewValueByLoosingFocus: [{
type: HostListener,
args: ['blur', ['$event.target.value']]
}], cancelEditing: [{
type: HostListener,
args: ['keyup.esc']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1lZGl0YWJsZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWRpdGFibGUvbm9kZS1lZGl0YWJsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUVMLE1BQU0sRUFDTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFxQix1QkFBdUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDOztBQUsvRSxNQUFNLE9BQU8scUJBQXFCO0lBUUg7SUFDQztJQVI5QixvQ0FBb0M7SUFDTixTQUFTLENBQVM7SUFDaEQsbUNBQW1DO0lBRWxCLFlBQVksR0FBb0MsSUFBSSxZQUFZLENBQW9CLEtBQUssQ0FBQyxDQUFDO0lBRTVHLFlBQzZCLFFBQW1CLEVBQ2xCLFVBQXNCO1FBRHZCLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtJQUNqRCxDQUFDO0lBRUcsUUFBUTtRQUNiLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBRXBELElBQUksYUFBYSxFQUFFO1lBQ2pCLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN2QjtRQUVELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxPQUFPLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3BFLENBQUM7SUFHTSxhQUFhLENBQUMsWUFBb0I7UUFDdkMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFHTSwyQkFBMkIsQ0FBQyxZQUFvQjtRQUNyRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxDQUFDLENBQUM7SUFDaEUsQ0FBQztJQUdNLGFBQWE7UUFDbEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDckIsSUFBSSxFQUFFLE9BQU87WUFDYixLQUFLLEVBQUUsSUFBSSxDQUFDLFNBQVM7WUFDckIsTUFBTSxFQUFFLHVCQUF1QixDQUFDLE1BQU07U0FDdkMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzt3R0F2Q1UscUJBQXFCLGtCQVF0QixTQUFTLGFBQ1QsVUFBVTs0RkFUVCxxQkFBcUI7OzRGQUFyQixxQkFBcUI7a0JBSGpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtpQkFDM0I7OzBCQVNJLE1BQU07MkJBQUMsU0FBUzs7MEJBQ2hCLE1BQU07MkJBQUMsVUFBVTs0Q0FQVSxTQUFTO3NCQUF0QyxLQUFLO3VCQUFDLGNBQWM7Z0JBR0osWUFBWTtzQkFBNUIsTUFBTTtnQkFrQkEsYUFBYTtzQkFEbkIsWUFBWTt1QkFBQyxhQUFhLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQztnQkFNN0MsMkJBQTJCO3NCQURqQyxZQUFZO3VCQUFDLE1BQU0sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2dCQU10QyxhQUFhO3NCQURuQixZQUFZO3VCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgUmVuZGVyZXIyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTm9kZUVkaXRhYmxlRXZlbnQsIE5vZGVFZGl0YWJsZUV2ZW50QWN0aW9uIH0gZnJvbSAnLi9lZGl0YWJsZS5ldmVudHMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbm9kZUVkaXRhYmxlXSdcbn0pXG5leHBvcnQgY2xhc3MgTm9kZUVkaXRhYmxlRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyogdHNsaW50OmRpc2FibGU6bm8taW5wdXQtcmVuYW1lICovXG4gIEBJbnB1dCgnbm9kZUVkaXRhYmxlJykgcHVibGljIG5vZGVWYWx1ZTogc3RyaW5nO1xuICAvKiB0c2xpbnQ6ZW5hYmxlOm5vLWlucHV0LXJlbmFtZSAqL1xuXG4gIEBPdXRwdXQoKSBwdWJsaWMgdmFsdWVDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8Tm9kZUVkaXRhYmxlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxOb2RlRWRpdGFibGVFdmVudD4oZmFsc2UpO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcihcbiAgICBASW5qZWN0KFJlbmRlcmVyMikgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgIEBJbmplY3QoRWxlbWVudFJlZikgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmXG4gICkge31cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgY29uc3QgbmF0aXZlRWxlbWVudCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuXG4gICAgaWYgKG5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIG5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG5cbiAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KG5hdGl2ZUVsZW1lbnQsICd2YWx1ZScsIHRoaXMubm9kZVZhbHVlKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleXVwLmVudGVyJywgWyckZXZlbnQudGFyZ2V0LnZhbHVlJ10pXG4gIHB1YmxpYyBhcHBseU5ld1ZhbHVlKG5ld05vZGVWYWx1ZTogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZUNoYW5nZWQuZW1pdCh7IHR5cGU6ICdrZXl1cCcsIHZhbHVlOiBuZXdOb2RlVmFsdWUgfSk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdibHVyJywgWyckZXZlbnQudGFyZ2V0LnZhbHVlJ10pXG4gIHB1YmxpYyBhcHBseU5ld1ZhbHVlQnlMb29zaW5nRm9jdXMobmV3Tm9kZVZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlZC5lbWl0KHsgdHlwZTogJ2JsdXInLCB2YWx1ZTogbmV3Tm9kZVZhbHVlIH0pO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5dXAuZXNjJylcbiAgcHVibGljIGNhbmNlbEVkaXRpbmcoKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZUNoYW5nZWQuZW1pdCh7XG4gICAgICB0eXBlOiAna2V5dXAnLFxuICAgICAgdmFsdWU6IHRoaXMubm9kZVZhbHVlLFxuICAgICAgYWN0aW9uOiBOb2RlRWRpdGFibGVFdmVudEFjdGlvbi5DYW5jZWxcbiAgICB9KTtcbiAgfVxufVxuIl19