fix(material/card): remove extra margin if header doesn't have an avatar

The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin.

Fixes #19069.

Author: crisbeto

src/dev-app/card/card-demo.html

@@ -60,6 +60,18 @@
     </mat-card-content>
   </mat-card>
 
+  <!-- Used to test header without an avatar. -->
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Header title</mat-card-title>
+      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <mat-card-content>
+      <p>Here is some content</p>
+    </mat-card-content>
+  </mat-card>
+
   <mat-card class="demo-card-blue mat-card-flat">
     <mat-card-title>Easily customizable</mat-card-title>
     <mat-card-actions>

src/dev-app/mdc-card/mdc-card-demo.html

@@ -118,5 +118,16 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
+  <!-- Used to test header without an avatar. -->
+  <mat-card [appearance]="appearance">
+    <mat-card-header>
+      <mat-card-title>Header title</mat-card-title>
+      <mat-card-subtitle>Header subtitle</mat-card-subtitle>
+    </mat-card-header>
+    <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
+    <mat-card-content>
+      <p>Here is some content</p>
+    </mat-card-content>
+  </mat-card>
 
 </div>

src/material-experimental/mdc-card/card.scss

@@ -19,13 +19,15 @@ $mat-card-default-padding: 16px !default;
   // Custom elements default to `display: inline`. Reset to 'block'.
   display: block;
 
-  // Apply default padding for a text content region. Omit any bottom padding because we assume
-  // this region will be followed by another region that includes top padding.
-  padding: $mat-card-default-padding $mat-card-default-padding 0;
-
   // Titles and subtitles can be set on native header elements which come with
   // their own margin. Clear it since the spacing is done using `padding`.
   margin: 0;
+
+  .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & {
+    // Apply default padding for a text content region. Omit any bottom padding because we assume
+    // this region will be followed by another region that includes top padding.
+    padding: $mat-card-default-padding $mat-card-default-padding 0;
+  }
 }
 
 // Header section at the top of a card. MDC does not have a pre-made header section for cards.
@@ -128,8 +130,11 @@ $mat-card-default-padding: 16px !default;
 // `mat-card-title-group` since the padding is captured by parent container already.
 .mat-mdc-card-subtitle ~ .mat-mdc-card-title,
 .mat-mdc-card-title ~ .mat-mdc-card-subtitle,
-.mat-mdc-card-header .mat-mdc-card-title,
-.mat-mdc-card-header .mat-mdc-card-subtitle,
+
+// The `.mat-mdc-card-header-text` here is redundant since the header text
+// wrapper is always there in the header, but we need the extra specificity.
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
 .mat-mdc-card-title-group .mat-mdc-card-title,
 .mat-mdc-card-title-group .mat-mdc-card-subtitle {
   padding-top: 0;

src/material/card/card.scss

@@ -103,7 +103,17 @@ $header-size: 40px !default;
 }
 
 .mat-card-header-text {
-  margin: 0 $padding;
+  &:not(:first-child) {
+    margin-left: $padding;
+  }
+
+  [dir='rtl'] & {
+    margin-left: 0;
+
+    &:not(:first-child) {
+      margin-right: $padding;
+    }
+  }
 }
 
 .mat-card-avatar {