fix(progress-linear): changed default behavior of invalid mode

src/components/progressCircular/demoBasicUsage/index.html

@@ -27,11 +27,11 @@ <h4>Theming</h4>
   </p>
 
   <div layout="row" layout-sm="column" layout-align="space-around">
-    <md-progress-circular class="md-hue-2" md-mode="{{vm.modes[0]}}" md-diameter="20px"></md-progress-circular>
-    <md-progress-circular class="md-accent" md-mode="{{vm.modes[1]}}" md-diameter="40"></md-progress-circular>
-    <md-progress-circular class="md-accent md-hue-1" md-mode="{{vm.modes[2]}}" md-diameter="60"></md-progress-circular>
-    <md-progress-circular class="md-warn md-hue-3" md-mode="{{vm.modes[3]}}" md-diameter="70"></md-progress-circular>
-    <md-progress-circular md-mode="{{vm.modes[4]}}" md-diameter="96"></md-progress-circular>
+    <md-progress-circular class="md-hue-2" ng-show="vm.showList[0]" md-diameter="20px"></md-progress-circular>
+    <md-progress-circular class="md-accent" ng-show="vm.showList[1]" md-diameter="40"></md-progress-circular>
+    <md-progress-circular class="md-accent md-hue-1" ng-show="vm.showList[2]" md-diameter="60"></md-progress-circular>
+    <md-progress-circular class="md-warn md-hue-3" ng-show="vm.showList[3]" md-diameter="70"></md-progress-circular>
+    <md-progress-circular ng-show="vm.showList[4]" md-diameter="96"></md-progress-circular>
   </div>
 
   <hr ng-class="{'visible' : vm.activated}">
@@ -48,10 +48,4 @@ <h5>On</h5>
     </md-switch>
   </div>
 
-  <p class="small">
-    Note: With above switch -- that simply clears the md-mode in each <code>&lt;md-progress-linear md-mode=""&gt;</code>
-    element --
-    developers can easily disable the animations and hide their progress indicators.
-  </p>
-
 </div>

src/components/progressCircular/demoBasicUsage/script.js

@@ -4,15 +4,15 @@ angular
     function($scope, $interval) {
       var self = this,  j= 0, counter = 0;
 
-      self.modes = [ ];
+      self.showList = [ ];
       self.activated = true;
       self.determinateValue = 30;
 
       /**
        * Turn off or on the 5 themed loaders
        */
       self.toggleActivation = function() {
-          if ( !self.activated ) self.modes = [ ];
+          if ( !self.activated ) self.showList = [ ];
           if (  self.activated ) j = counter = 0;
       };
 
@@ -29,8 +29,8 @@ angular
         // Incrementally start animation the five (5) Indeterminate,
         // themed progress circular bars
 
-        if ( (j < 5) && !self.modes[j] && self.activated ) {
-          self.modes[j] = 'indeterminate';
+        if ( (j < 5) && !self.showList[j] && self.activated ) {
+          self.showList[j] = true;
         }
         if ( counter++ % 4 === 0 ) j++;
 

src/components/progressCircular/js/progressCircularDirective.js

@@ -18,8 +18,8 @@
  *
  * @param {string} md-mode Select from one of two modes: **'determinate'** and **'indeterminate'**.
  *
- * Note: if the `md-mode` value is set as undefined or specified as not 1 of the two (2) valid modes, then `.ng-hide`
- * will be auto-applied as a style to the component.
+ * Note: if the `md-mode` value is set as undefined or specified as not 1 of the two (2) valid modes, then **'indeterminate'**
+ * will be auto-applied as the mode.
  *
  * Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute.
  * If `value=""` is also specified, however, then `md-mode="determinate"` would be auto-injected instead.

src/components/progressLinear/demoBasicUsage/index.html

@@ -24,8 +24,9 @@ <h4 class="md-title">Buffer</h4>
     For operations where the user wants to indicate some activity or loading from the server,
     use the <b>buffer</b> indicator:
   </p>
-  <md-progress-linear class="md-warn" md-mode="{{vm.modes[0]}}" value="{{vm.determinateValue}}"
-                      md-buffer-value="{{vm.determinateValue2}}"></md-progress-linear>
+  <md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}"
+                      md-buffer-value="{{vm.determinateValue2}}"
+                      ng-show="vm.showList[0]"></md-progress-linear>
 
   <h4 class="md-title">Query</h4>
 
@@ -35,7 +36,7 @@ <h4 class="md-title">Query</h4>
   </p>
 
   <div class="container" ng-class="{'visible' : !vm.activated}">
-    <md-progress-linear md-mode="{{vm.modes[1]}}"></md-progress-linear>
+    <md-progress-linear md-mode="query" ng-show="vm.showList[1]"></md-progress-linear>
     <div class="bottom-block">
       <span>Loading application libraries...</span>
     </div>
@@ -55,10 +56,4 @@ <h5>Off</h5>
       <h5>On</h5>
     </md-switch>
   </div>
-
-  <p class="small">
-    Note: With the above switch -- which simply clears the md-mode in each <code>&lt;md-progress-linear
-    md-mode=""&gt;</code> element --
-    developers now easily disable the animations and hide their progress indicators.</p>
-
 </div>

src/components/progressLinear/demoBasicUsage/script.js

@@ -9,13 +9,13 @@ angular.module('progressLinearDemo1', ['ngMaterial'])
     self.determinateValue = 30;
     self.determinateValue2 = 30;
 
-    self.modes = [ ];
+    self.showList = [ ];
 
     /**
      * Turn off or on the 5 themed loaders
      */
     self.toggleActivation = function() {
-        if ( !self.activated ) self.modes = [ ];
+        if ( !self.activated ) self.showList = [ ];
         if (  self.activated ) {
           j = counter = 0;
           self.determinateValue = 30;
@@ -33,8 +33,8 @@ angular.module('progressLinearDemo1', ['ngMaterial'])
         // Incrementally start animation the five (5) Indeterminate,
         // themed progress circular bars
 
-        if ( (j < 2) && !self.modes[j] && self.activated ) {
-          self.modes[j] = (j==0) ? 'buffer' : 'query';
+        if ( (j < 2) && !self.showList[j] && self.activated ) {
+          self.showList[j] = true;
         }
         if ( counter++ % 4 == 0 ) j++;
 

src/components/progressLinear/progress-linear.js

@@ -35,8 +35,8 @@ angular.module('material.components.progressLinear', [
  *
  * @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
  *
- * Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `.ng-hide`
- * will be auto-applied as a style to the component.
+ * Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `indeterminate`
+ * will be auto-applied as the mode.
  *
  * Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute. If `value=""` is also specified, however,
  * then `md-mode="determinate"` would be auto-injected instead.
@@ -108,18 +108,17 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
       });
 
       attr.$observe('mdMode',function(mode){
+        if (lastMode) container.removeClass( lastMode );
+
         switch( mode ) {
           case MODE_QUERY:
           case MODE_BUFFER:
           case MODE_DETERMINATE:
           case MODE_INDETERMINATE:
-            container.removeClass( 'ng-hide' + ' ' + lastMode );
             container.addClass( lastMode = "_md-mode-" + mode );
             break;
           default:
-            if (lastMode) container.removeClass( lastMode );
-            container.addClass('ng-hide');
-            lastMode = undefined;
+            container.addClass( lastMode = "_md-mode-" + MODE_INDETERMINATE );
             break;
         }
       });
@@ -154,7 +153,7 @@ function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
           case MODE_QUERY:
             break;
           default:
-            value = undefined;
+            value = MODE_INDETERMINATE;
             break;
         }
       }

src/components/progressLinear/progress-linear.spec.js

@@ -16,6 +16,20 @@ describe('mdProgressLinear', function() {
     expect(progress.attr('md-mode')).toEqual('indeterminate');
   }));
 
+  it('should auto-set the md-mode to "indeterminate" if specified a not valid mode', inject(function($compile, $rootScope, $mdConstant) {
+    var element = $compile('<div>' +
+      '<md-progress-linear md-mode="test"></md-progress-linear>' +
+      '</div>')($rootScope);
+
+    $rootScope.$apply(function() {
+      $rootScope.progress = 50;
+      $rootScope.mode = "";
+    });
+
+    var progress = element.find('md-progress-linear');
+    expect(progress.attr('md-mode')).toEqual('indeterminate');
+  }));
+
   it('should trim the md-mode value', inject(function($compile, $rootScope, $mdConstant) {
     element = $compile('<div>' +
           '<md-progress-linear md-mode=" indeterminate"></md-progress-linear>' +