Update omnibox and expose source event to package consumer (#80)

* Update package dependencies

This addresses 286 vulnerabilities identified by npm.
- Update webpack
- Update babel and fix configuration
- Update istanbul/nyc and fix configuration
- Update jsdom and fix usage

* Add angular event propagation for onChosen handlers

This adds propagation for the angular events that trigger choose() calls
Unfortunately the $event name is taken by the custom event wrapper
already in use. It's attached to those events under the `sourceEvent`
name.

Once released this will allow `onChosen()` handlers to have access to
the event that triggered it's call

Author: JoshStern

.babelrc

@@ -1,18 +1,16 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/env", {
       "targets": {
         "browsers": ["last 2 versions", "Explorer >= 11"],
         "node": "current"
-      },
-      "nyc": {
-        "plugins": ["istanbul"]
       }
     }]
   ],
   "plugins": [
-    ["babel-root-import", {
+    ["babel-plugin-root-import", {
       "rootPathSuffix": "src"
-    }]
+    }],
+    "istanbul"
   ]
 }

.nycrc

@@ -0,0 +1,3 @@
+{
+    "extends": "@istanbuljs/nyc-config-babel"
+}

package-lock.json

@@ -4,8 +4,8 @@
   "description": "A modern, flexible, Angular 1.x autocomplete library with limited assumptions.",
   "main": "dist/ngc-omnibox.js",
   "scripts": {
-    "bundle": "webpack --progress --colors",
-    "dev": "webpack --progress --colors --watch",
+    "bundle": "webpack --mode=production --progress --colors",
+    "dev": "webpack --mode=development --progress --colors --watch",
     "test": "nyc babel-node node_modules/.bin/jasmine && eslint . && npm run report-coverage",
     "report-coverage": "nyc report --reporter=lcov > coverage.lcov",
     "prepublish": "npm run bundle",
@@ -22,20 +22,24 @@
   },
   "homepage": "https://github.com/UrbanCompass/ngc-omnibox#readme",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-istanbul": "^3.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-root-import": "^4.1.8",
-    "eslint": "^5.16.0",
-    "eslint-plugin-import": "^2.7.0",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@babel/node": "^7.6.3",
+    "@babel/preset-env": "^7.6.3",
+    "@istanbuljs/nyc-config-babel": "^2.1.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-istanbul": "^5.2.0",
+    "babel-plugin-root-import": "^6.4.1",
+    "eslint": "^6.6.0",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jasmine": "^2.10.1",
-    "html-loader": "^0.4.5",
-    "jasmine": "^2.8.0",
-    "jasmine-node": "^1.14.5",
-    "jsdom": "^9.12.0",
-    "nyc": "^10.3.2",
-    "webpack": "^2.7.0"
+    "html-loader": "^0.5.5",
+    "jasmine": "^3.5.0",
+    "jasmine-node": "^3.0.0",
+    "jsdom": "^15.2.0",
+    "nyc": "^14.1.1",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9"
   },
   "dependencies": {
     "angular": "^1.5.6"

package.json

@@ -1,4 +1,4 @@
-import jsdom from 'jsdom';
+import {JSDOM} from 'jsdom';
 
 import ngcModifySuggestionsTemplateFactory from '~/angularComponent/ngcModifySuggestionsTemplateFactory.js';
 
@@ -18,7 +18,8 @@ const unCategorizedTemplateOutput = [
       'ng-attr-aria-selected="{{suggestionItem.isHighlighted() || undefined}}" ',
       'ng-attr-aria-readonly="{{suggestionItem.isSelectable() === false || undefined}}" ',
       'ng-mouseenter="suggestionItem.handleMouseEnter()" ',
-      'ng-mouseleave="suggestionItem.handleMouseLeave()" ng-click="suggestionItem.handleClick()">',
+      'ng-mouseleave="suggestionItem.handleMouseLeave()" ',
+      'ng-click="suggestionItem.handleClick($event)">',
     '{{suggestion.sample_item_text}}',
   '</ngc-omnibox-suggestions-item>'
 ].join('');
@@ -40,7 +41,7 @@ const categorizedTemplateOutput = [
           'ng-attr-aria-readonly="{{suggestionItem.isSelectable() === false || undefined}}" ',
           'ng-mouseenter="suggestionItem.handleMouseEnter()" ',
           'ng-mouseleave="suggestionItem.handleMouseLeave()" ',
-          'ng-click="suggestionItem.handleClick()">',
+          'ng-click="suggestionItem.handleClick($event)">',
         '{{suggestion.sample_category_title}}',
       '</h5>',
       '<div ng-repeat="suggestion in suggestion.children" ng-include="\'category-tmpl\'"></div>',
@@ -50,7 +51,7 @@ const categorizedTemplateOutput = [
         'ng-attr-aria-readonly="{{suggestionItem.isSelectable() === false || undefined}}" ',
         'ng-mouseenter="suggestionItem.handleMouseEnter()" ',
         'ng-mouseleave="suggestionItem.handleMouseLeave()" ',
-        'ng-click="suggestionItem.handleClick()">',
+        'ng-click="suggestionItem.handleClick($event)">',
       '{{suggestion.sample_item_text}}',
     '</ngc-omnibox-suggestions-item>',
   '</div>'
@@ -69,7 +70,8 @@ const loadingElTemplateOutput = [
       'ng-attr-aria-selected="{{suggestionItem.isHighlighted() || undefined}}" ',
       'ng-attr-aria-readonly="{{suggestionItem.isSelectable() === false || undefined}}" ',
       'ng-mouseenter="suggestionItem.handleMouseEnter()" ',
-      'ng-mouseleave="suggestionItem.handleMouseLeave()" ng-click="suggestionItem.handleClick()">',
+      'ng-mouseleave="suggestionItem.handleMouseLeave()" ',
+      'ng-click="suggestionItem.handleClick($event)">',
     '{{suggestion.sample_item_text}}',
   '</ngc-omnibox-suggestions-item>',
   '<ngc-omnibox-suggestions-loading role="progressbar" ng-if="omnibox.shouldShowLoadingElement">',
@@ -89,7 +91,8 @@ const noResultsElTemplateOutput = [
       'ng-attr-aria-selected="{{suggestionItem.isHighlighted() || undefined}}" ',
       'ng-attr-aria-readonly="{{suggestionItem.isSelectable() === false || undefined}}" ',
       'ng-mouseenter="suggestionItem.handleMouseEnter()" ',
-      'ng-mouseleave="suggestionItem.handleMouseLeave()" ng-click="suggestionItem.handleClick()">',
+      'ng-mouseleave="suggestionItem.handleMouseLeave()" ',
+      'ng-click="suggestionItem.handleClick($event)">',
     '{{suggestion.sample_item_text}}',
   '</ngc-omnibox-suggestions-item>',
   //                                                            vv I think this is a bug in jsdom
@@ -104,7 +107,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
   let ngcModifySuggestionsTemplate;
 
   it('should throw an error if there is no ngc-omnibox-suggestions-item element', () => {
-    const document = jsdom.jsdom(noItemTemplate).defaultView.document;
+    const document = new JSDOM(noItemTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);
@@ -115,7 +118,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
   it('should modify an un-categorized subcomponent', () => {
     const elementTemplate =
         `<ngc-omnibox-suggestions>${unCategorizedTemplate}</ngc-omnibox-suggestions>`;
-    const document = jsdom.jsdom(elementTemplate).defaultView.document;
+    const document = new JSDOM(elementTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);
@@ -125,7 +128,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
   it('should modify a categorized subcomponent', () => {
     const elementTemplate =
         `<ngc-omnibox-suggestions>${categorizedTemplate}</ngc-omnibox-suggestions>`;
-    const document = jsdom.jsdom(elementTemplate).defaultView.document;
+    const document = new JSDOM(elementTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);
@@ -135,7 +138,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
   it('should modify a loading subcomponent', () => {
     const elementTemplate =
         `<ngc-omnibox-suggestions>${loadingElTemplate}</ngc-omnibox-suggestions>`;
-    const document = jsdom.jsdom(elementTemplate).defaultView.document;
+    const document = new JSDOM(elementTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);
@@ -145,7 +148,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
   it('should modify a no-results subcomponent', () => {
     const elementTemplate =
         `<ngc-omnibox-suggestions>${noResultsElTemplate}</ngc-omnibox-suggestions>`;
-    const document = jsdom.jsdom(elementTemplate).defaultView.document;
+    const document = new JSDOM(elementTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);
@@ -159,7 +162,7 @@ describe('ngcOmnibox.angularComponent.ngcModifySuggestionsTemplateFactory', () =
         <ngc-omnibox-suggestions-item></ngc-omnibox-suggestions-item>
       </ngc-omnibox-suggestions>
     `;
-    const document = jsdom.jsdom(elementTemplate).defaultView.document;
+    const document = new JSDOM(elementTemplate).window.document;
     const element = document.querySelector('ngc-omnibox-suggestions');
 
     ngcModifySuggestionsTemplate = ngcModifySuggestionsTemplateFactory([document], templateCache);

spec/tests/angularComponent/ngcModifySuggestionsTemplateFactorySpec.js

@@ -425,6 +425,15 @@ describe('ngcOmnibox.angularComponent.ngcOmniboxController', () => {
         expect(omniboxController.ngModel).toEqual('three');
       });
 
+      it('should attach event source data to the event when provided', () => {
+        omniboxController.onChosen = ({$event}) => {
+          expect($event.sourceEvent).toEqual({type: 'click'});
+
+        };
+        omniboxController.choose('three', true, {type: 'click'});
+        expect(omniboxController.ngModel).toEqual('three');
+      });
+
       it('should set the ngModel to null when unchoosing if multiple is off', () => {
         omniboxController.unchoose('one');
         expect(omniboxController.ngModel).toEqual(null);

spec/tests/angularComponent/ngcOmniboxControllerSpec.js

@@ -55,7 +55,7 @@ export default function ngcModifySuggestionsTemplateFactory($document, $template
           '{{suggestionItem.isSelectable() === false || undefined}}');
         itemHeader.setAttribute('ng-mouseenter', 'suggestionItem.handleMouseEnter()');
         itemHeader.setAttribute('ng-mouseleave', 'suggestionItem.handleMouseLeave()');
-        itemHeader.setAttribute('ng-click', 'suggestionItem.handleClick()');
+        itemHeader.setAttribute('ng-click', 'suggestionItem.handleClick($event)');
       }
 
       categoryContainer.appendChild(categoryEl);
@@ -68,7 +68,7 @@ export default function ngcModifySuggestionsTemplateFactory($document, $template
         '{{suggestionItem.isSelectable() === false || undefined}}');
       itemEl.setAttribute('ng-mouseenter', 'suggestionItem.handleMouseEnter()');
       itemEl.setAttribute('ng-mouseleave', 'suggestionItem.handleMouseLeave()');
-      itemEl.setAttribute('ng-click', 'suggestionItem.handleClick()');
+      itemEl.setAttribute('ng-click', 'suggestionItem.handleClick($event)');
 
       $templateCache.put(templateCacheName, categoryContainer.innerHTML);
 
@@ -82,7 +82,7 @@ export default function ngcModifySuggestionsTemplateFactory($document, $template
         '{{suggestionItem.isSelectable() === false || undefined}}');
       itemEl.setAttribute('ng-mouseenter', 'suggestionItem.handleMouseEnter()');
       itemEl.setAttribute('ng-mouseleave', 'suggestionItem.handleMouseLeave()');
-      itemEl.setAttribute('ng-click', 'suggestionItem.handleClick()');
+      itemEl.setAttribute('ng-click', 'suggestionItem.handleClick($event)');
 
       return element.innerHTML;
     }

src/angularComponent/ngcModifySuggestionsTemplateFactory.js

@@ -399,8 +399,9 @@ export default class NgcOmniboxController {
    *
    * @param {Object} item
    * @param {Boolean} shouldFocusField -- Whether to focus the input field after choosing
+   * @param {Object | undefined} sourceEvent -- Original angular event that triggered this choose
    */
-  choose(item, shouldFocusField = true) {
+  choose(item, shouldFocusField = true, sourceEvent = undefined) {
     if (item && this.isSelectable({suggestion: item, omnibox: this}) !== false) {
 
       const $event = {
@@ -415,7 +416,8 @@ export default class NgcOmniboxController {
           } else if (!this.multiple) {
             this.ngModel = item;
           }
-        }
+        },
+        sourceEvent
       };
 
       this.onChosen({choice: item, $event, omnibox: this});
@@ -598,9 +600,9 @@ export default class NgcOmniboxController {
         const selection = this._suggestionsUiList[this.highlightedIndex];
 
         if (selection) {
-          this.choose(selection.data);
+          this.choose(selection.data, true, event);
         } else if (!this.multiple && !this.requireMatch) {
-          this.choose(this.query);
+          this.choose(this.query, true, event);
         }
       }
     } else if (keyCode === KEY.DOWN) {

src/angularComponent/ngcOmniboxController.js

@@ -8,8 +8,8 @@ export default class ngcOmniboxSuggestionsItemController {
     this.omnibox.highlightNone();
   }
 
-  handleClick() {
-    this.omnibox.choose(this.suggestion);
+  handleClick($event) {
+    this.omnibox.choose(this.suggestion, true, $event);
   }
 
   /**