ng2-json-editor
Version:
Angular2 component for editing large json documents
76 lines • 4.38 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, Input, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { Set } from 'immutable';
import { DomUtilService, KeysStoreService } from '../shared/services';
var AddFieldDropdownComponent = (function () {
function AddFieldDropdownComponent(elementRef, domUtilService, keysStoreService) {
this.elementRef = elementRef;
this.domUtilService = domUtilService;
this.keysStoreService = keysStoreService;
this.expression = '';
this.hidden = false;
}
AddFieldDropdownComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes['schema'] || changes['fields']) {
this.addableKeys = Set.fromKeys(this.schema.properties)
.subtract(this.fields)
.filter(function (field) { return !_this.schema.properties[field].hidden; });
this.hidden = this.addableKeys.size === 0;
}
};
AddFieldDropdownComponent.prototype.onDropdownShown = function () {
var _this = this;
setTimeout(function () {
return _this.domUtilService.focusFirstInputChildByElement(_this.elementRef.nativeElement);
});
};
AddFieldDropdownComponent.prototype.onFieldSelect = function (field) {
var newFieldPathString = this.keysStoreService.addKey(this.pathString, field, this.schema);
this.domUtilService.focusAndSelectFirstEditableChildById(newFieldPathString);
this.expression = '';
};
return AddFieldDropdownComponent;
}());
export { AddFieldDropdownComponent };
AddFieldDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'add-field-dropdown',
styles: [".btn-add-field-dropdown { padding: 0 3px; font-size: 11px; opacity: 0.4; border: 0; background: transparent; font-weight: bold; line-height: 1; text-shadow: 0 1px 0 #fff; color: darkslategray; margin-bottom: 2px; float: left; } .btn-add-field-dropdown:hover { color: blue; opacity: 0.6; } .dropdown-filter-container { padding: 0 3px; } .dropdown-filter-container input { width: 100%; } "],
template: "<div *ngIf=\"!hidden\" class=\"btn-group add-field-dropdown-container\" dropdown keyboardNav=\"true\" [isDisabled]=\"isDisabled\" (onShown)=\"onDropdownShown()\"> <button type=\"button\" class=\"btn btn-add-field-dropdown\" dropdownToggle> <ng-content></ng-content> </button> <ul class=\"dropdown-menu\" *dropdownMenu> <li class=\"dropdown-filter-container\"> <input [(ngModel)]=\"expression\" placeholder=\"filter\" (click)=\"$event.stopPropagation()\"> </li> <li class=\"divider dropdown-divider\"></li> <li *ngFor=\"let key of addableKeys | filterByExpression:expression | sortAlphabetically\"> <a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"onFieldSelect(key)\">{{key}}</a> </li> </ul> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
AddFieldDropdownComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: DomUtilService, },
{ type: KeysStoreService, },
]; };
AddFieldDropdownComponent.propDecorators = {
'schema': [{ type: Input },],
'fields': [{ type: Input },],
'pathString': [{ type: Input },],
'isDisabled': [{ type: Input },],
};
//# sourceMappingURL=add-field-dropdown.component.js.map