build: fix not being able to test MDC density in RTL (#21398)

Our dev app is set up so that the density styles are set on the `body` while the `dir` is
set only around the content. The problem is that MDC's mixins output density styles for
RTL in the format `[dir='rtl'] .density .foo` which means that the directionality has to be
a level above the density class or we won't get an accurate representation of how the
components look. This threw me off for a while earlier today, because I noticed that
the MDC slide toggle didn't behave correctly in RTL.

These changes fix the issue by moving the `dir` a level up and applying the density class
in a couple of places.

(cherry picked from commit 69b0a72)

Author: crisbeto

src/dev-app/dev-app/dev-app-layout.html

@@ -22,8 +22,16 @@
     </mat-nav-list>
     <button mat-button tabindex="-1" (click)="start.close()">CLOSE</button>
   </mat-sidenav>
-  <main>
-    <mat-toolbar color="primary">
+  <!--
+    Note that the setup with the directionality and density is a little convoluted, but it's
+    organized this way so that we can test MDC's density styles in both LTR and RTL. Their mixins
+    output styles in the form of `[dir='rtl'] .density-min .foo` which means that the `dir` has to
+    be one level above the density class in the DOM. At the same time, we want the density to apply
+    to the toolbar while always keeping it in LTR at the same time.
+   -->
+  <main [attr.dir]="dir.value" [ngClass]="getDensityClass()">
+    <!-- The toolbar should always be in the LTR direction -->
+    <mat-toolbar color="primary" dir="ltr">
       <button mat-icon-button (click)="start.open('mouse')">
         <mat-icon>menu</mat-icon>
       </button>
@@ -54,7 +62,7 @@ <h1>Angular Material Demos</h1>
       </div>
     </mat-toolbar>
 
-    <div [attr.dir]="dir.value" class="demo-content mat-app-background">
+    <div [ngClass]="getDensityClass()" class="demo-content mat-app-background">
       <ng-content></ng-content>
     </div>
   </main>

src/dev-app/dev-app/dev-app-layout.ts

@@ -114,7 +114,6 @@ export class DevAppLayout {
       @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef,
       @Inject(DOCUMENT) private _document: Document) {
     dir.change.subscribe(() => cdr.markForCheck());
-    this.updateDensityClasses();
     try {
       const isDark = localStorage.getItem(isDarkThemeKey);
       if (isDark != null) {
@@ -189,21 +188,13 @@ export class DevAppLayout {
   /** Selects the next possible density scale. */
   selectNextDensity() {
     this.currentDensityIndex = this.getNextDensityIndex();
-    this.updateDensityClasses();
   }
 
   /**
    * Updates the density classes on the host element. Applies a unique class for
    * a given density scale, so that the density styles are conditionally applied.
    */
-  updateDensityClasses() {
-    for (let i = 0; i < this.densityScales.length; i++) {
-      const className = `demo-density-${this.densityScales[i]}`;
-      if (i === this.currentDensityIndex) {
-        this._document.body.classList.add(className);
-      } else {
-        this._document.body.classList.remove(className);
-      }
-    }
+  getDensityClass() {
+    return `demo-density-${this.densityScales[this.currentDensityIndex]}`;
   }
 }