fix(sidenav): avoid CSS class name conflict (#16798)

Currently both the drawer and drawer container use a class called `mat-drawer-opened` which can cause confusion. These changes rename the class on the container.

Author: crisbeto

src/material/sidenav/drawer.scss

@@ -40,7 +40,7 @@ $mat-drawer-over-drawer-z-index: 4;
   &[fullscreen] {
     @include mat-fill();
 
-    &.mat-drawer-opened {
+    &.mat-drawer-container-has-open {
       overflow: hidden;
     }
   }

src/material/sidenav/drawer.spec.ts

@@ -52,15 +52,15 @@ describe('MatDrawer', () => {
 
       expect(testComponent.openCount).toBe(0);
       expect(testComponent.openStartCount).toBe(0);
-      expect(container.classList).not.toContain('mat-drawer-opened');
+      expect(container.classList).not.toContain('mat-drawer-container-has-open');
 
       tick();
       expect(testComponent.openStartCount).toBe(1);
       fixture.detectChanges();
 
       expect(testComponent.openCount).toBe(1);
       expect(testComponent.openStartCount).toBe(1);
-      expect(container.classList).toContain('mat-drawer-opened');
+      expect(container.classList).toContain('mat-drawer-container-has-open');
     }));
 
     it('should be able to close', fakeAsync(() => {
@@ -80,15 +80,15 @@ describe('MatDrawer', () => {
 
       expect(testComponent.closeCount).toBe(0);
       expect(testComponent.closeStartCount).toBe(0);
-      expect(container.classList).toContain('mat-drawer-opened');
+      expect(container.classList).toContain('mat-drawer-container-has-open');
 
       flush();
       expect(testComponent.closeStartCount).toBe(1);
       fixture.detectChanges();
 
       expect(testComponent.closeCount).toBe(1);
       expect(testComponent.closeStartCount).toBe(1);
-      expect(container.classList).not.toContain('mat-drawer-opened');
+      expect(container.classList).not.toContain('mat-drawer-container-has-open');
     }));
 
     it('should resolve the open method promise with the new state of the drawer', fakeAsync(() => {

src/material/sidenav/drawer.ts

@@ -715,10 +715,13 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
 
   /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */
   private _setContainerClass(isAdd: boolean): void {
+    const classList = this._element.nativeElement.classList;
+    const className = 'mat-drawer-container-has-open';
+
     if (isAdd) {
-      this._element.nativeElement.classList.add('mat-drawer-opened');
+      classList.add(className);
     } else {
-      this._element.nativeElement.classList.remove('mat-drawer-opened');
+      classList.remove(className);
     }
   }