fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
sense to assume end users to know they can use the align attribute.

Fixes #18479

Author: PooSham

src/dev-app/dialog/dialog-demo.ts

@@ -22,7 +22,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -110,20 +110,20 @@ export class JazzDialog {
   private _dimesionToggle = false;
 
   constructor(
-    public dialogRef: MatDialogRef<JazzDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+      public dialogRef: MatDialogRef<JazzDialog>,
+      @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   togglePosition(): void {
     this._dimesionToggle = !this._dimesionToggle;
 
     if (this._dimesionToggle) {
       this.dialogRef
-        .updateSize('500px', '500px')
-        .updatePosition({ top: '25px', left: '25px' });
+      .updateSize('500px', '500px')
+      .updatePosition({ top: '25px', left: '25px' });
     } else {
       this.dialogRef
-        .updateSize()
-        .updatePosition();
+      .updateSize()
+      .updatePosition();
     }
   }
 
@@ -160,7 +160,7 @@ export class JazzDialog {
       </p>
     </mat-dialog-content>
 
-    <mat-dialog-actions [attr.align]="actionsAlignment">
+    <mat-dialog-actions [align]="actionsAlignment">
       <button
         mat-raised-button
         color="primary"
@@ -181,7 +181,7 @@ export class JazzDialog {
   `
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'end' | 'center' | undefined;
 
   constructor(public dialog: MatDialog) { }
 

src/material/dialog/dialog-content-directives.ts

@@ -77,7 +77,7 @@ export class MatDialogClose implements OnInit, OnChanges {
     // dialog, and therefore clicking the button won't result in a focus change. This means that
     // the FocusMonitor won't detect any origin change, and will always output `program`.
     _closeDialogVia(this.dialogRef,
-        event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
+      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
   }
 }
 
@@ -96,11 +96,11 @@ export class MatDialogTitle implements OnInit {
   @Input() id: string = `mat-dialog-title-${dialogElementUid++}`;
 
   constructor(
-      // The dialog title directive is always used in combination with a `MatDialogRef`.
-      // tslint:disable-next-line: lightweight-tokens
-      @Optional() private _dialogRef: MatDialogRef<any>,
-      private _elementRef: ElementRef<HTMLElement>,
-      private _dialog: MatDialog) {}
+    // The dialog title directive is always used in combination with a `MatDialogRef`.
+    // tslint:disable-next-line: lightweight-tokens
+    @Optional() private _dialogRef: MatDialogRef<any>,
+    private _elementRef: ElementRef<HTMLElement>,
+    private _dialog: MatDialog) {}
 
   ngOnInit() {
     if (!this._dialogRef) {
@@ -136,9 +136,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'}
+  host: {
+    'class': 'mat-dialog-actions',
+    '[class.mat-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-dialog-actions-align-end]': 'align === "end"'
+  }
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'center' | 'end' = undefined;
+}
 
 
 /**

src/material/dialog/dialog.scss

@@ -57,13 +57,14 @@ $mat-dialog-button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$mat-dialog-padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .align-center and .align-end are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   .mat-button-base + .mat-button-base,
   .mat-mdc-button-base + .mat-mdc-button-base {

src/material/dialog/dialog.spec.ts

@@ -1493,6 +1493,14 @@ describe('MatDialog', () => {
         expect(container.getAttribute('aria-labelledby'))
             .toBe(title.id, 'Expected the aria-labelledby to match the title id.');
       }));
+
+      it('should add align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions =
+          overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions).not.toHaveClass('mat-dialog-actions-align-center', 'Expected action buttons to not have class align-center');
+        expect(actions).toHaveClass('mat-dialog-actions-align-end', 'Expected action buttons to have class align-end');
+      });
     }
   });
 
@@ -1876,7 +1884,7 @@ class PizzaMsg {
   template: `
     <h1 mat-dialog-title>This is the title</h1>
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-    <mat-dialog-actions>
+    <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
       <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
       <button
@@ -1895,7 +1903,7 @@ class ContentElementDialog {}
     <ng-template>
       <h1 mat-dialog-title>This is the title</h1>
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
-      <mat-dialog-actions>
+      <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
         <button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
         <button