fix(material-experimental/mdc-tabs): error during server-side renderi…

…ng (#17169)

Fixes an error that is thrown by the ink bar, because it tries to call `getBoundingClientRect` on the server. Also sets up the kitchen sink test for the MDC-based tabs.

(cherry picked from commit baec85e)

src/material-experimental/mdc-tabs/ink-bar.ts

@@ -82,7 +82,8 @@ export class MatInkBarFoundation {
       this._indicatorContent.style.setProperty(propName, value);
     },
     computeContentClientRect: () => {
-      return this._destroyed ? {
+      // `getBoundingClientRect` isn't available on the server.
+      return this._destroyed || !this._indicatorContent.getBoundingClientRect ? {
         width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0
       } : this._indicatorContent.getBoundingClientRect();
     }

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html

@@ -55,3 +55,26 @@ <h2>Slider</h2>
 <mat-slider value="50"></mat-slider>
 <mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
 <mat-slider disabled></mat-slider>
+
+<h2>Tabs</h2>
+
+<!--
+  Note that we set the `selectedIndex` here to hit the code path
+  where we might need to do some measurements.
+-->
+<mat-tab-group [selectedIndex]="1">
+  <mat-tab label="Overview">
+    The overview
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      API docs
+    </ng-template>
+    The API docs
+  </mat-tab>
+</mat-tab-group>
+
+<nav mat-tab-nav-bar>
+ <a mat-tab-link href="https://google.com">Google</a>
+ <a mat-tab-link href="https://google.com" active>Also Google</a>
+</nav>