ng2-json-editor
Version:
Angular2 component for editing large json documents
103 lines • 5.47 kB
JavaScript
/*
* This file is part of INSPIRE.
* Copyright (C) 2016 CERN.
*
* INSPIRE is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of the
* License, or (at your option) any later version.
*
* INSPIRE is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with INSPIRE; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
* In applying this license, CERN does not
* waive the privileges and immunities granted to it by virtue of its status
* as an Intergovernmental Organization or submit itself to any jurisdiction.
*/
import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { RemoteAutocompletionService, AppGlobalsService } from '../shared/services';
var AutocompleteInputComponent = (function () {
function AutocompleteInputComponent(remoteAutocompletionService, appGlobalsService) {
this.remoteAutocompletionService = remoteAutocompletionService;
this.appGlobalsService = appGlobalsService;
this.onValueChange = new EventEmitter();
this.onCompletionSelect = new EventEmitter();
this.onKeypress = new EventEmitter();
this.onBlur = new EventEmitter();
}
AutocompleteInputComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.autocompletionConfig.url) {
// remote
this.typeaheadOptionField = this.getDotSeparatedOptionField() || 'text';
this.dataSource = Observable.create(function (observer) {
if (_this.value && _this.value.length > 0) {
observer.next(_this.value);
}
}).mergeMap(function (token) {
return _this.remoteAutocompletionService.getAutocompletionResults(_this.autocompletionConfig, token);
});
}
else {
// local
this.typeaheadOptionField = this.getDotSeparatedOptionField() || '';
this.dataSource = this.autocompletionConfig.source;
}
};
Object.defineProperty(AutocompleteInputComponent.prototype, "customItemTemplate", {
get: function () {
return this.appGlobalsService.templates[this.autocompletionConfig.itemTemplateName];
},
enumerable: true,
configurable: true
});
AutocompleteInputComponent.prototype.getDotSeparatedOptionField = function () {
var optionField = this.autocompletionConfig.optionField;
return optionField && optionField.replace(AutocompleteInputComponent.slashesRegExp, '.');
};
AutocompleteInputComponent.prototype.onModelChange = function (value) {
this.value = value;
this.onValueChange.emit(value);
};
AutocompleteInputComponent.prototype.onMatchSelect = function (match) {
this.onCompletionSelect.emit(match.item);
};
AutocompleteInputComponent.prototype.onMatchWrapperMouseDown = function (match) {
this.onModelChange(match.value);
this.onMatchSelect(match);
};
return AutocompleteInputComponent;
}());
export { AutocompleteInputComponent };
AutocompleteInputComponent.slashesRegExp = new RegExp('/', 'g');
AutocompleteInputComponent.decorators = [
{ type: Component, args: [{
selector: 'autocomplete-input',
styles: [""],
template: "<ng-template let-match=\"match\" #matchWrapper> <div style=\"width: 100%; height: 100%; padding: 3px 20px;\" (mousedown)=\"onMatchWrapperMouseDown(match)\"> <ng-template [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{item:match.item, index:i, match:match, query:query}\"></ng-template> </div> </ng-template> <ng-template #defaultItemTemplate let-match=\"match\"> {{match.value}} </ng-template> <div class=\"autocomplete-container\"> <input attr.data-path=\"{{pathString}}\" [ngModel]=\"value\" (ngModelChange)=\"onModelChange($event)\" (keypress)=\"onKeypress.emit($event)\" (blur)=\"onBlur.emit()\" [typeahead]=\"dataSource\" [typeaheadOptionsLimit]=\"autocompletionConfig.size\" [typeaheadOptionField]=\"typeaheadOptionField\" [typeaheadItemTemplate]=\"matchWrapper\" (typeaheadOnSelect)=\"onMatchSelect($event)\" [typeaheadWaitMs]=\"200\" [tabindex]=\"tabIndex\" placeholder=\"{{placeholder}}\"> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
AutocompleteInputComponent.ctorParameters = function () { return [
{ type: RemoteAutocompletionService, },
{ type: AppGlobalsService, },
]; };
AutocompleteInputComponent.propDecorators = {
'autocompletionConfig': [{ type: Input },],
'value': [{ type: Input },],
'pathString': [{ type: Input },],
'tabIndex': [{ type: Input },],
'placeholder': [{ type: Input },],
'onValueChange': [{ type: Output },],
'onCompletionSelect': [{ type: Output },],
'onKeypress': [{ type: Output },],
'onBlur': [{ type: Output },],
};
//# sourceMappingURL=autocomplete-input.component.js.map