feat(panel): add the ability to update the animation of an existing panel (#9895)

* Adds the ability to update the animation of a panel, without having to re-create it.
* Adds a unit test for verifying that the backdrop animation duration matches the one of the panel. This was missed in #9570.

Author: crisbeto

src/components/panel/panel.js

@@ -453,6 +453,16 @@ angular
  * @returns {!MdPanelRef}
  */
 
+ /**
+  * @ngdoc method
+  * @name MdPanelRef#updateAnimation
+  * @description
+  * Updates the animation configuration for a panel. You can use this to change
+  * the panel's animation without having to re-create it.
+  *
+  * @param {!MdPanelAnimation} animation
+  */
+
 
 /*****************************************************************************
  *                               MdPanelPosition                            *
@@ -1958,6 +1968,19 @@ MdPanelRef.prototype._configureTrapFocus = function() {
 };
 
 
+/**
+ * Updates the animation of a panel.
+ * @param {!MdPanelAnimation} animation
+ */
+MdPanelRef.prototype.updateAnimation = function(animation) {
+  this.config['animation'] = animation;
+
+  if (this._backdropRef) {
+    this._backdropRef.config.animation.duration(animation._rawDuration);
+  }
+};
+
+
 /**
  * Animate the panel opening.
  * @returns {!angular.$q.Promise} A promise that is resolved when the panel has

src/components/panel/panel.spec.js

@@ -2724,6 +2724,20 @@ describe('$mdPanel', function() {
       expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS);
     });
 
+    it('should match the backdrop animation duration with the panel', function() {
+      mdPanelAnimation.duration(500);
+
+      openPanel({
+        hasBackdrop: true,
+        animation: mdPanelAnimation
+      });
+
+      var backdropAnimation = panelRef._backdropRef.config.animation;
+
+      expect(backdropAnimation._openDuration).toBe(mdPanelAnimation._openDuration);
+      expect(backdropAnimation._closeDuration).toBe(mdPanelAnimation._closeDuration);
+    });
+
     describe('should determine openFrom when', function() {
       it('provided a selector', function() {
         var animation = mdPanelAnimation.openFrom('button');
@@ -2813,6 +2827,34 @@ describe('$mdPanel', function() {
         expect(animation._closeDuration).toBeFalsy();
       });
     });
+
+    describe('updating the animation of a panel', function() {
+      it('should change the animation config of a panel', function() {
+        var newAnimation = $mdPanel.newPanelAnimation();
+
+        openPanel();
+
+        panelRef.updateAnimation(newAnimation);
+
+        expect(panelRef.config.animation).toBe(newAnimation);
+      });
+
+      it('should update the duration of the backdrop animation', function() {
+        var newAnimation = $mdPanel.newPanelAnimation().duration({
+          open: 1000,
+          close: 2000
+        });
+
+        openPanel({ hasBackdrop: true });
+
+        panelRef.updateAnimation(newAnimation);
+
+        var backdropAnimation = panelRef._backdropRef.config.animation;
+
+        expect(backdropAnimation._openDuration).toBe(newAnimation._openDuration);
+        expect(backdropAnimation._closeDuration).toBe(newAnimation._closeDuration);
+      });
+    });
   });
 
   describe('interceptor logic: ', function() {