@Output naming styling

README.md

@@ -38,13 +38,13 @@ Then add it to your module's `imports`.
 ### Use
 
 ```html
-<json-editor [config]="config" [schema]="mySchema" [record]="myRecord" (onRecordChange)="doStuffWithNewRecord($event)"></json-editor>
+<json-editor [config]="config" [schema]="mySchema" [record]="myRecord" (recordChange)="doStuffWithNewRecord($event)"></json-editor>
 ```
 
 - `config` : configuration object. See [configuration docs](https://inveniosoftware-contrib.github.io/ng2-json-editor/docs/interfaces/_json_editor_config_.jsoneditorconfig.html) for options.
 - `schema` : valid json-schema for the record. See [json schema limitations](#json-schema-limitations)
 - `record` : valid json to  be edited.
-- `onRecordChange` emitted when record change, `$event` is the edited record.
+- `recordChange` emitted when record change, `$event` is the edited record.
 - `errorMap (={})`: errors for individual parts of the record (format should be [errors-map.json](./example/assets/mock-data/error-map.json)
 - `templates: { [templateName: string]: TemplateRef<any> }`: Templates with name, to be used by configured fields for example autocomplete result item.
 

example/app/app.component.html

@@ -13,7 +13,7 @@
 <json-editor *ngIf="record && schema"
   [config]="config.jsonEditorConfig"
   [record]="record"
-  (onRecordChange)="onRecordChange($event)"
+  (recordChange)="onRecordChange($event)"
   [schema]="schema"
   [templates]="{referenceTemplate: referenceTemplate}">
 </json-editor>

src/add-field-dropdown/add-field-dropdown.component.spec.ts

@@ -99,8 +99,8 @@ describe('AddFieldToObjectDropdownComponent', () => {
     showDropdownButton.dispatchEvent(new Event('click'));
     let anchor = nativeEl.querySelector('li a') as HTMLAnchorElement;
     expect(component.fields.has(anchor.textContent)).toBeFalsy();
-    spyOn(component.onFieldAdd, 'emit');
+    spyOn(component.fieldAdd, 'emit');
     anchor.dispatchEvent(new Event('click'));
-    expect(component.onFieldAdd.emit).toHaveBeenCalledWith(anchor.textContent);
+    expect(component.fieldAdd.emit).toHaveBeenCalledWith(anchor.textContent);
   });
 });

src/add-field-dropdown/add-field-dropdown.component.ts

@@ -39,7 +39,7 @@ export class AddFieldDropdownComponent {
   @Input() fields: Set<string>;
   @Input() pathString: string;
 
-  @Output() onFieldAdd: EventEmitter<string> = new EventEmitter<string>();
+  @Output() fieldAdd: EventEmitter<string> = new EventEmitter<string>();
 
   expression = '';
 
@@ -58,7 +58,7 @@ export class AddFieldDropdownComponent {
   }
 
   onFieldSelect(field: string) {
-    this.onFieldAdd.emit(field);
+    this.fieldAdd.emit(field);
 
     let newFieldPathString = `${this.pathString}${this.pathUtilService.separator}${field}`;
     this.domUtilService.focusAndSelectFirstEditableChildById(newFieldPathString);

src/autocomplete-input/autocomplete-input.component.html

@@ -1,6 +1,6 @@
 <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"
+  <input attr.data-path="{{pathString}}" [ngModel]="value" (ngModelChange)="onModelChange($event)" (keypress)="keypress.emit($event)"
+    (blur)="blur.emit()" [typeahead]="dataSource" [typeaheadOptionsLimit]="autocompletionConfig.size" [typeaheadOptionField]="typeaheadOptionField"
     [typeaheadItemTemplate]="customItemTemplate" (typeaheadOnSelect)="onCompletionSelect($event.item)" [typeaheadWaitMs]="200" [tabindex]="tabIndex"
     placeholder="{{placeholder}}">
 </div>

src/autocomplete-input/autocomplete-input.component.ts

@@ -45,9 +45,9 @@ export class AutocompleteInputComponent implements OnInit {
   @Input() tabIndex: number;
   @Input() placeholder: string;
 
-  @Output() onValueChange: EventEmitter<string> = new EventEmitter<any>();
-  @Output() onKeypress: EventEmitter<KeyboardEvent> = new EventEmitter<any>();
-  @Output() onBlur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() valueChange: EventEmitter<string> = new EventEmitter<any>();
+  @Output() keypress: EventEmitter<KeyboardEvent> = new EventEmitter<any>();
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
 
   dataSource: Observable<string> | Array<string>;
   typeaheadOptionField: string;
@@ -78,7 +78,7 @@ export class AutocompleteInputComponent implements OnInit {
 
   onModelChange(value: string) {
     this.value = value;
-    this.onValueChange.emit(value);
+    this.valueChange.emit(value);
   }
 
   onCompletionSelect(completionItem: AutocompletionResult) {

src/complex-list-field/complex-list-field.component.html

@@ -49,7 +49,7 @@
       </span>
       <span *ngIf="item.isEditFormVisible">
         <object-field [value]="values.get(item.index)" [schema]="schema.items" [path]="getElementPath(item.index)">
-          <list-action-group (onMove)="moveElement(item.index, $event)" (onDelete)="deleteElement(item.index)" [canMove]="schema.sortable"></list-action-group>
+          <list-action-group (move)="moveElement(item.index, $event)" (delete)="deleteElement(item.index)" [canMove]="schema.sortable"></list-action-group>
         </object-field>
       </span>
     </div>

src/json-editor.component.html

@@ -1,7 +1,7 @@
 <div class="row editor-container" [ngClass]="shorterEditorContainerClass">
   <div class="col-md-2 menu-container">
     <tree-menu [record]="_record" [schema]="schema"></tree-menu>
-    <add-field-dropdown [fields]="keys" [pathString]="''" (onFieldAdd)="onFieldAdd($event)" [schema]="schema">Add field</add-field-dropdown>
+    <add-field-dropdown [fields]="keys" [pathString]="''" (fieldAdd)="onFieldAdd($event)" [schema]="schema">Add field</add-field-dropdown>
     <div *ngIf="config.enableAdminModeSwitch" class="admin-mode" tooltip="Allows editing all fields (use with care)">
       <input id="admin-mode-checkbox" type="checkbox" [(ngModel)]="appGlobalsService.adminMode" />
       <label class="admin-mode" for="admin-mode-checkbox">Enable Admin Mode</label>
@@ -12,10 +12,10 @@
     <tabset *ngIf="config.tabsConfig">
       <tab *ngFor="let tabName of tabNames; trackBy:trackByElement" [heading]="tabName" (select)="activeTabName = tabName" [active]="isActiveTab(tabName)">
         <sub-record [value]="_record" [tabName]="tabName" [schema]="tabNameToSubSchema[tabName]" [keys]="tabNameToKeys[tabName]"
-                    (onDeleteKey)="onDeleteKey($event)" (onOpenPanelClick)="openPanel($event)"></sub-record>
+                    (deleteKey)="onDeleteKey($event)"></sub-record>
       </tab>
     </tabset>
-    <sub-record *ngIf="!config.tabsConfig" [value]="_record" [schema]="schema" (onDeleteKey)="onDeleteKey($event)" [keys]="keys"></sub-record>
+    <sub-record *ngIf="!config.tabsConfig" [value]="_record" [schema]="schema" (deleteKey)="onDeleteKey($event)" [keys]="keys"></sub-record>
   </div>
   <div id="right-main-container" *ngIf="!isPreviewerDisabled" [ngClass]="rightContainerColMdClass" class="main-container">
     <button id="btn-preview-toggle" type="button" class="btn btn-default btn-toggle" (click)="isPreviewerHidden = !isPreviewerHidden">{{isPreviewerHidden ? "Show Preview" : "Hide Preview"}}</button>

src/json-editor.component.ts

@@ -77,7 +77,7 @@ export class JsonEditorComponent extends AbstractTrackerComponent implements OnI
 
   @Input() templates: { [templateName: string]: TemplateRef<any> } = {};
 
-  @Output() onRecordChange: EventEmitter<Object> = new EventEmitter<Object>();
+  @Output() recordChange: EventEmitter<Object> = new EventEmitter<Object>();
 
   private _errorMap: SchemaValidationErrors = {};
   _record: Map<string, any>;
@@ -135,7 +135,7 @@ export class JsonEditorComponent extends AbstractTrackerComponent implements OnI
       .subscribe(json => {
         this._record = json;
         // emit the change as plain JS object
-        this.onRecordChange.emit(json.toJS());
+        this.recordChange.emit(json.toJS());
       });
     this.jsonSchemaService.setSchema(this.schema);
 

src/list-action-group/list-action-group.component.html

@@ -1,11 +1,11 @@
 <div>
-  <button type="button" class="editor-btn-delete" (click)="onDelete.emit()">
+  <button type="button" class="editor-btn-delete" (click)="delete.emit()">
     <i class="fa fa-times"></i>
   </button>
-  <button *ngIf="canMove" type="button" class="editor-btn-move-up" (click)="onMove.emit(-1)">
+  <button *ngIf="canMove" type="button" class="editor-btn-move-up" (click)="move.emit(-1)">
     <i class="fa fa-chevron-up"></i>
   </button>
-  <button *ngIf="canMove" type="button" class="editor-btn-move-down" (click)="onMove.emit(1)">
+  <button *ngIf="canMove" type="button" class="editor-btn-move-down" (click)="move.emit(1)">
     <i class="fa fa-chevron-down"></i>
   </button>
 </div>

src/list-action-group/list-action-group.component.ts

@@ -43,7 +43,7 @@ import {
 export class ListActionGroupComponent {
 
   @Input() canMove: boolean;
-  @Output() onDelete = new EventEmitter<void>();
-  @Output() onMove = new EventEmitter<number>();
+  @Output() delete = new EventEmitter<void>();
+  @Output() move = new EventEmitter<number>();
 
 }

src/object-field/object-field.component.html

@@ -21,7 +21,7 @@
   <!-- ADD SUB FIELD FROM SCHEMA DROPDOWN -->
   <tr>
     <td class="button-holder">
-      <add-field-dropdown [fields]="keys" [pathString]="pathString" (onFieldAdd)="onFieldAdd($event)" [schema]="schema">
+      <add-field-dropdown [fields]="keys" [pathString]="pathString" (fieldAdd)="onFieldAdd($event)" [schema]="schema">
         <i class="fa fa-plus"></i>
       </add-field-dropdown>
     </td>

src/primitive-field/primitive-field.component.html

@@ -19,11 +19,11 @@
         </div>
         <div *ngSwitchCase="'enum'">
           <searchable-dropdown [pathString]="pathString" [value]="value" [placeholder]="schema.title" [items]="schema.enum" [shortcutMap]="schema.enumShorcutMap"
-            (onSelect)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex" (onBlur)="domUtilService.clearHighlight()"></searchable-dropdown>
+            (select)="onSearchableDropdownSelect($event)" [tabIndex]="tabIndex" (onBlur)="domUtilService.clearHighlight()"></searchable-dropdown>
         </div>
         <div *ngSwitchCase="'autocomplete'">
           <autocomplete-input [pathString]="pathString" [value]="value" [path]="path" [autocompletionConfig]="schema.autocompletionConfig"
-            (onBlur)="commitValueChange()" (onKeypress)="onKeypress($event)" (onValueChange)="onAutocompleteInputValueChange($event)"
+            (blur)="commitValueChange()" (keypress)="onKeypress($event)" (valueChange)="onAutocompleteInputValueChange($event)"
             [placeholder]="schema.title" [tabIndex]="tabIndex"></autocomplete-input>
         </div>
         <div *ngSwitchCase="'integer'">

src/primitive-list-field/primitive-list-field.component.html

@@ -6,7 +6,7 @@
           <primitive-field [value]="value" [schema]="schema.items" [path]="getElementPath(i)"></primitive-field>
         </td>
         <td *ngIf="values.size > 0" class="button-holder" [ngClass]="sortableClass">
-          <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
+          <list-action-group (move)="moveElement(i, $event)" (delete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
         </td>
       </tr>
     </table>

src/searchable-dropdown/searchable-dropdown.component.ts

@@ -48,10 +48,9 @@ export class SearchableDropdownComponent implements OnInit {
   expression = '';
   status: { isOpen: boolean } = { isOpen: false };
 
-  @Output() onSelect = new EventEmitter<string>();
+  @Output() select = new EventEmitter<string>();
   @Output() onBlur = new EventEmitter<void>();
 
-
   ngOnInit() {
     this.placeholder = this.value || this.placeholder || '';
   }
@@ -70,7 +69,7 @@ export class SearchableDropdownComponent implements OnInit {
 
   onItemClick(item: string) {
     this.value = item;
-    this.onSelect.emit(item);
+    this.select.emit(item);
   }
 
   onKeypress(key: string) {

src/sub-record/sub-record.component.ts

@@ -50,7 +50,7 @@ export class SubRecordComponent implements OnInit, OnChanges {
   @Input() tabName = '';
   @Input() keys: Set<string>;
 
-  @Output() onDeleteKey: EventEmitter<string> = new EventEmitter<string>();
+  @Output() deleteKey: EventEmitter<string> = new EventEmitter<string>();
 
   keysByType: { others: Set<string>, toggles: Set<string> };
   pathCache: PathCache = {};
@@ -75,7 +75,7 @@ export class SubRecordComponent implements OnInit, OnChanges {
 
   // delete only work for others, not toggles (UPDATE: config comment if this changes)
   deleteField(field: string) {
-    this.onDeleteKey.emit(field);
+    this.deleteKey.emit(field);
     this.jsonStoreService.removeIn(this.getPathForField(field));
   }
 

src/table-list-field/table-list-field.component.html

@@ -8,7 +8,7 @@
             {{key | underscoreToSpace}}
           </th>
           <th class="button-holder" [ngClass]="sortableClass">
-            <add-field-dropdown *ngIf="values.size > 0" [fields]="keys" [pathString]="getElementPathString(0)" (onFieldAdd)="onFieldAdd($event)"
+            <add-field-dropdown *ngIf="values.size > 0" [fields]="keys" [pathString]="getElementPathString(0)" (fieldAdd)="onFieldAdd($event)"
               [schema]="schema.items">
               <i class="fa fa-plus"></i>
             </add-field-dropdown>
@@ -18,7 +18,7 @@
       <tr *ngFor="let value of values; let i = index; trackBy:trackByIndex" table-item-field [id]="getElementPathString(i)" [value]="value"
         [schema]="schema.items" [path]="getElementPath(i)" [keys]="keys">
         <td *ngIf="values.size > 0" class="button-holder" [ngClass]="sortableClass">
-          <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
+          <list-action-group (move)="moveElement(i, $event)" (delete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
         </td>
       </tr>
     </table>