ng2-json-editor
Version:
Angular2 component for editing large json documents
102 lines • 5.8 kB
JavaScript
/*
* This file is part of ng2-json-editor.
* Copyright (C) 2016 CERN.
*
* ng2-json-editor 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.
*
* ng2-json-editor 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 ng2-json-editor; 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, ViewChild } from '@angular/core';
import { BiDirectionalMap } from 'bi-directional-map/dist';
var SearchableDropdownComponent = (function () {
function SearchableDropdownComponent() {
this.onSelect = new EventEmitter();
this.onBlur = new EventEmitter();
}
SearchableDropdownComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes['value']) {
this.placeholder = this.value || this.placeholder || '';
}
if (changes['displayValueMap'] || changes['items']) {
this.displayValueMap = this.displayValueMap || Object.create(null);
this.biDisplayValueMap = new BiDirectionalMap(this.displayValueMap);
// set original value as display value for not configured items.
this.items
.filter(function (item) { return !_this.displayValueMap[item]; })
.forEach(function (item) {
_this.biDisplayValueMap.set(item, item);
});
this.displayValues = Array.from(this.biDisplayValueMap.values());
}
};
SearchableDropdownComponent.prototype.onItemClick = function (displayValue) {
var originalValue = this.biDisplayValueMap.getKey(displayValue);
this.onSelect.emit(originalValue);
// only necessary to force closing when selected is item equals to value
// in which case dropdown doesn't close automatically for some reason
this.dropdown.hide();
};
SearchableDropdownComponent.prototype.onEnterKeyUp = function () {
if (this.shortcutMap && this.shortcutMap[this.expression]) {
this.onItemClick(this.shortcutMap[this.expression]);
}
this.dropdown.hide();
};
SearchableDropdownComponent.prototype.showDropdown = function () {
var _this = this;
this.dropdown.show();
this.expression = '';
setTimeout(function () {
_this.filterInputElRef.nativeElement.focus();
});
};
SearchableDropdownComponent.prototype.onInputBlur = function (event) {
// this avoids closing dropdown when an item is selected
// so that onItemClick() can be executed properly before closing.
var relatedTarget = event.relatedTarget;
if (!relatedTarget || relatedTarget.className !== 'dropdown-item') {
this.dropdown.hide();
}
this.onBlur.emit();
};
return SearchableDropdownComponent;
}());
export { SearchableDropdownComponent };
SearchableDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'searchable-dropdown',
styles: ["div.btn-group { width: 100%; } .dropdown-menu { left: 0px !important; } .toggle-container { width: 100%; display: inline-flex; } .toggle-container .value { flex-grow: 1; } .dropdown-toggle { box-shadow: none !important; } "],
template: "<div class=\"btn-group\" #dropdown=\"bs-dropdown\" dropdown keyboardNav=\"true\"> <!-- there is no dropdownToggle since it is handled manually see: onInputFocus and onInputBlur in ts --> <div class=\"toggle-container\"> <input *ngIf=\"dropdown.isOpen; else valueDisplayTemplate\" #filterInput class=\"value\" attr.data-path=\"{{pathString}}\" [placeholder]=\"placeholder\" [(ngModel)]=\"expression\" (keyup.enter)=\"onEnterKeyUp()\" (blur)=\"onInputBlur($event)\"> <i class=\"fa fa-caret-down\" (click)=\"showDropdown()\"></i> </div> <ul class=\"dropdown-menu\" *dropdownMenu role=\"menu\"> <li *ngFor=\"let displayValue of displayValues | filterByExpression:expression\" role=\"menuitem\"> <!-- href is needed for keyboard navigation --> <a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"onItemClick(displayValue)\">{{displayValue}}</a> </li> </ul> </div> <ng-template #valueDisplayTemplate> <span class=\"value\" [tabindex]=\"tabIndex\" (focus)=\"showDropdown()\">{{biDisplayValueMap.getValue(value)}}</span> </ng-template>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
SearchableDropdownComponent.ctorParameters = function () { return []; };
SearchableDropdownComponent.propDecorators = {
'items': [{ type: Input },],
'shortcutMap': [{ type: Input },],
'displayValueMap': [{ type: Input },],
'value': [{ type: Input },],
'pathString': [{ type: Input },],
'tabIndex': [{ type: Input },],
'placeholder': [{ type: Input },],
'onSelect': [{ type: Output },],
'onBlur': [{ type: Output },],
'filterInputElRef': [{ type: ViewChild, args: ['filterInput',] },],
'dropdown': [{ type: ViewChild, args: ['dropdown',] },],
};
//# sourceMappingURL=searchable-dropdown.component.js.map