fixup! fix(material/dialog): css structure change

Author: wagnermaciel

src/material/dialog/_mdc-dialog-structure-overrides.scss

@@ -31,7 +31,9 @@
     // this for the dialog content scrolling (as explained above), and since we allow for
     // custom positioning through overlay configuration, we remove the rectangle
     // restrictions and scale based on the CDK overlay container.
-    &, .mdc-dialog__container, .mdc-dialog__surface {
+    &,
+    .mdc-dialog__container,
+    .mdc-dialog__surface {
       max-height: inherit;
       min-height: inherit;
       min-width: inherit;
@@ -47,12 +49,12 @@
   // When a component is passed into the dialog, the host element interrupts
   // the `display:flex` from affecting the dialog title, content, and
   // actions. To fix this, we make the component host `display: flex` by
-  // marking it's panel with the `mat-mdc-dialog-component-panel` class.
+  // marking its host with the `mat-mdc-dialog-component-host` class.
   //
   // Note that this problem does not exist when a template ref is used since
   // the title, contents, and actions are then nested directly under the
   // dialog surface.
-  .mat-mdc-dialog-component-panel .mat-mdc-dialog-surface > * {
+  .mat-mdc-dialog-component-host {
     display: flex;
     flex-direction: column;
     width: 100%;

src/material/dialog/dialog-container.ts

@@ -12,6 +12,7 @@ import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  ComponentRef,
   ElementRef,
   EventEmitter,
   Inject,
@@ -24,6 +25,7 @@ import {MatDialogConfig} from './dialog-config';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CdkDialogContainer} from '@angular/cdk/dialog';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {ComponentPortal} from '@angular/cdk/portal';
 
 /** Event that captures the state of dialog container animations. */
 interface LegacyDialogAnimationEvent {
@@ -323,4 +325,18 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
       }
     });
   }
+
+  override attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
+    // When a component is passed into the dialog, the host element interrupts
+    // the `display:flex` from affecting the dialog title, content, and
+    // actions. To fix this, we make the component host `display: flex` by
+    // marking its host with the `mat-mdc-dialog-component-host` class.
+    //
+    // Note that this problem does not exist when a template ref is used since
+    // the title, contents, and actions are then nested directly under the
+    // dialog surface.
+    const ref = super.attachComponentPortal(portal);
+    ref.location.nativeElement.classList.add('mat-mdc-dialog-component-host');
+    return ref;
+  }
 }

src/material/dialog/dialog.ts

@@ -162,18 +162,6 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
     config.id = config.id || `${this._idPrefix}${uniqueId++}`;
     config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
 
-    // When a component is passed into the dialog, the host element interrupts
-    // the `display:flex` from affecting the dialog title, content, and
-    // actions. To fix this, we make the component host `display: flex` by
-    // marking it's panel with the `mat-mdc-dialog-component-panel` class.
-    //
-    // Note that this problem does not exist when a template ref is used since
-    // the title, contents, and actions are then nested directly under the
-    // dialog surface.
-    if (!(componentOrTemplateRef instanceof TemplateRef)) {
-      this._appendPanelClass(config, 'mat-mdc-dialog-component-panel');
-    }
-
     const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
       ...config,
       positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
@@ -261,17 +249,6 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
       dialogs[i].close();
     }
   }
-
-  /** Appends the given class name to the panel via the dialog config. */
-  private _appendPanelClass(config: MatDialogConfig, className: string) {
-    if (Array.isArray(config.panelClass)) {
-      config.panelClass.push(className);
-    } else if (typeof config.panelClass === 'string') {
-      config.panelClass = [config.panelClass, className];
-    } else {
-      config.panelClass = className;
-    }
-  }
 }
 
 /**

tools/public_api_guard/material/dialog.md

@@ -7,6 +7,7 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -199,6 +200,8 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
     constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, dialogConfig: MatDialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
     _animationsEnabled: boolean;
     // (undocumented)
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    // (undocumented)
     protected _contentAttached(): void;
     // (undocumented)
     ngOnDestroy(): void;