feat(mdBottomSheet): add escape to close functionality

Author: Marcy Sutton

src/components/bottomSheet/bottomSheet.js

@@ -117,14 +117,15 @@ function MdBottomSheetProvider($$interimElementProvider) {
 
   /* @ngInject */
   function bottomSheetDefaults($animate, $mdConstant, $timeout, $$rAF, $compile, $mdTheming,
-                               $mdBottomSheet) {
+                               $mdBottomSheet, $rootElement) {
     var backdrop;
 
     return {
       themable: true,
       targetEvent: null,
       onShow: onShow,
       onRemove: onRemove,
+      escapeToClose: true
     };
 
     function onShow(scope, element, options) {
@@ -153,6 +154,15 @@ function MdBottomSheetProvider($$interimElementProvider) {
             element[0].querySelector('[ng-click]')
           );
           focusableItems.eq(0).focus();
+
+          if (options.escapeToClose) {
+            options.rootElementKeyupCallback = function(e) {
+              if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
+                $timeout($mdBottomSheet.cancel);
+              }
+            };
+            $rootElement.on('keyup', options.rootElementKeyupCallback);
+          }
         });
 
     }

src/components/bottomSheet/bottomSheet.spec.js

@@ -1,3 +1,44 @@
 describe('$mdBottomSheet service', function() {
-  beforeEach(module('material.components.mdBottomSheet', 'ngAnimateMock'));
+  beforeEach(module('material.components.bottomSheet', 'ngAnimateMock'));
+
+  describe('#build()', function() {
+    it('should escapeToClose == true', inject(function($mdBottomSheet, $rootScope, $rootElement, $timeout, $animate, $mdConstant) {
+      var parent = angular.element('<div>');
+      $mdBottomSheet.show({
+        template: '<md-bottom-sheet>',
+        parent: parent,
+        escapeToClose: true
+      });
+      $rootScope.$apply();
+
+      $animate.triggerCallbacks();
+
+      expect(parent.find('md-bottom-sheet').length).toBe(1);
+
+      $rootElement.triggerHandler({type: 'keyup',
+        keyCode: $mdConstant.KEY_CODE.ESCAPE
+      });
+
+      $timeout.flush();
+      expect(parent.find('md-bottom-sheet').length).toBe(0);
+    }));
+
+    it('should escapeToClose == false', inject(function($mdBottomSheet, $rootScope, $rootElement, $timeout, $animate, $mdConstant) {
+      var parent = angular.element('<div>');
+      $mdBottomSheet.show({
+        template: '<md-bottom-sheet>',
+        parent: parent,
+        escapeToClose: false
+      });
+      $rootScope.$apply();
+
+      $animate.triggerCallbacks();
+
+      expect(parent.find('md-bottom-sheet').length).toBe(1);
+
+      $rootElement.triggerHandler({ type: 'keyup', keyCode: $mdConstant.KEY_CODE.ESCAPE });
+
+      expect(parent.find('md-bottom-sheet').length).toBe(1);
+    }));
+  });
 });