Convert src/sidebar/directive to ES modules

This directory is likely to go away soon as part of the Angular =>
Preact migration.

Nevertheless, I used the convert-to-es-modules script on it to convert
to ES modules so we can complete that migration first.

src/sidebar/directive/h-autofocus.js

@@ -11,7 +11,7 @@
  *   <input ng-if="..." h-autofocus>
  *
  */
-function autofocusDirective() {
+export default function autofocusDirective() {
   return {
     restrict: 'A',
     link: function($scope, $element) {
@@ -19,5 +19,3 @@ function autofocusDirective() {
     },
   };
 }
-
-module.exports = autofocusDirective;

src/sidebar/directive/h-branding.js

@@ -18,7 +18,7 @@
  */
 
 // @ngInject
-function BrandingDirective(settings) {
+export default function BrandingDirective(settings) {
   const _hasBranding = !!settings.branding;
 
   // This is the list of supported property declarations
@@ -64,5 +64,3 @@ function BrandingDirective(settings) {
     },
   };
 }
-
-module.exports = BrandingDirective;

src/sidebar/directive/h-on-touch.js

@@ -28,7 +28,7 @@ function addEventHandler($scope, element, events, handler) {
  * mouse press OR touch.
  */
 // @ngInject
-function onTouchDirective($parse) {
+export default function onTouchDirective($parse) {
   return {
     restrict: 'A',
     link: function($scope, $element, $attrs) {
@@ -42,5 +42,3 @@ function onTouchDirective($parse) {
     },
   };
 }
-
-module.exports = onTouchDirective;

src/sidebar/directive/h-tooltip.js

@@ -77,7 +77,7 @@ function Tooltip(rootElement) {
  *
  * Example: '<button aria-label="Tooltip label" h-tooltip></button>'
  */
-function tooltipDirective() {
+export default function tooltipDirective() {
   if (!theTooltip) {
     theTooltip = new Tooltip(document.body);
   }
@@ -108,5 +108,3 @@ function tooltipDirective() {
     },
   };
 }
-
-module.exports = tooltipDirective;

src/sidebar/directive/test/h-branding-fixtures.js

-module.exports = [
+export default [
   // ALL SUPPORTED PROPERTIES
   {
     settings: { appBackgroundColor: 'blue' },

src/sidebar/directive/test/h-branding-test.js

-const angular = require('angular');
+import angular from 'angular';
 
-const hBranding = require('../h-branding');
-const fixtures = require('./h-branding-fixtures');
+import hBranding from '../h-branding';
+
+import fixtures from './h-branding-fixtures';
 
 describe('BrandingDirective', function() {
   let $compile;

src/sidebar/directive/test/h-on-touch-test.js

-const angular = require('angular');
+import angular from 'angular';
 
-const hOnTouch = require('../h-on-touch');
-const util = require('./util');
+import hOnTouch from '../h-on-touch';
+
+import * as util from './util';
 
 function testComponent() {
   return {

src/sidebar/directive/test/h-tooltip-test.js

-const angular = require('angular');
+import angular from 'angular';
 
-const hTooltip = require('../h-tooltip');
-const util = require('./util');
+import hTooltip from '../h-tooltip';
+
+import * as util from './util';
 
 function testComponent() {
   return {

src/sidebar/directive/test/util.js

@@ -16,7 +16,7 @@ function hyphenate(name) {
  * Given the 'inject' function from the 'angular-mocks' module,
  * retrieves an instance of the specified Angular module.
  */
-function ngModule(inject, name) {
+export function ngModule(inject, name) {
   let module;
   const helper = function(_module) {
     module = _module;
@@ -87,7 +87,7 @@ function ngModule(inject, name) {
  *                      The returned object has a link(scope) method which will
  *                      re-link the component with new properties.
  */
-function createDirective(
+export function createDirective(
   document,
   name,
   attrs,
@@ -172,7 +172,7 @@ function createDirective(
 }
 
 /** Helper to dispatch a native event to a DOM element. */
-function sendEvent(element, eventType) {
+export function sendEvent(element, eventType) {
   const event = new Event(eventType, { bubbles: true, cancelable: true });
   element.dispatchEvent(event);
 }
@@ -183,7 +183,7 @@ function sendEvent(element, eventType) {
  * There are many possible ways of hiding DOM elements on a page, this just
  * looks for approaches that are common in our app.
  */
-function isHidden(element) {
+export function isHidden(element) {
   const style = window.getComputedStyle(element);
 
   if (style.display === 'none') {
@@ -201,10 +201,3 @@ function isHidden(element) {
 
   return false;
 }
-
-module.exports = {
-  createDirective: createDirective,
-  isHidden: isHidden,
-  ngModule: ngModule,
-  sendEvent: sendEvent,
-};

src/sidebar/directive/test/window-scroll-test.js

-const angular = require('angular');
+import angular from 'angular';
 
 const inject = angular.mock.inject;
 
-const windowScroll = require('../window-scroll');
+import windowScroll from '../window-scroll';
 
 describe('windowScroll', function() {
   let directive = null;

src/sidebar/directive/window-scroll.js

-function windowScrollDirective() {
+export default function windowScrollDirective() {
   return {
     link: function(scope, elem, attr) {
       let active = true;
@@ -26,5 +26,3 @@ function windowScrollDirective() {
     },
   };
 }
-
-module.exports = windowScrollDirective;