Change the way that a CSS rule is added when component is focused (#78)

Change this logic so that instead of appending this rule to whatever the last stylesheet
exists in document.styleSheets, create a new stylesheet with this new rule in it.

This prevents a bug where if the last loaded stylesheet is from an external resource,
it would not allow access to the rules, and throw an error.

Author: dmulatti-compass

spec/tests/angularComponent/ngcOmniboxControllerSpec.js

@@ -32,11 +32,6 @@ describe('ngcOmnibox.angularComponent.ngcOmniboxController', () => {
     expect(NgcOmniboxController.$inject.join(',')).toBe('$document,$element,$scope');
   });
 
-  it('should remove the focus ring when the component is focused', () => {
-    expect(document.styleSheets[0].insertRule)
-      .toHaveBeenCalledWith('ngc-omnibox:focus {outline: none}', 0);
-  });
-
   it('should listen for field element focus events when the field is set', () => {
     const fieldEl = Object.assign({}, fakeEl);
     spyOn(fieldEl, 'addEventListener');

src/angularComponent/ngcOmniboxController.js

@@ -64,9 +64,14 @@ export default class NgcOmniboxController {
     }, true);
 
     // Remove the focus ring when the overall component is focused
-    const styleSheets = this.doc.styleSheets;
-    if (styleSheets && styleSheets.length) {
-      styleSheets[styleSheets.length - 1].insertRule('ngc-omnibox:focus {outline: none}', 0);
+    const head = this.doc.head;
+    const omniboxStyleId = 'ngcOmniboxStyle';
+    if (head && !this.doc.getElementById(omniboxStyleId)) {
+      const style = this.doc.createElement('style');
+      style.id = omniboxStyleId;
+      style.type = 'text/css';
+      style.innerText = 'ngc-omnibox:focus {outline: none}';
+      head.appendChild(style);
     }
   }