fix(material/dialog): Use align as @input() in MatDialogActions

Squashed commit of the following:

commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
Merge: 3276432 3a98da8
Author: Jean-Philippe Green <[email protected]>
Date:   Mon Jan 31 19:24:24 2022 +0100

    Merge branch 'master' into align-attr-as-input-in-dialog-actions-angular#18479-2

commit 3276432
Merge: 815cf8f 1f40b7d
Author: Jean-Philippe <[email protected]>
Date:   Mon Jan 31 18:54:42 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-angular#18479-2

commit 815cf8f
Author: Jean-Philippe Green <[email protected]>
Date:   Mon Jan 10 01:23:12 2022 +0100

    Use directive binding in mdc-dialog demo for align

commit 77fca70
Author: Jean-Philippe Green <[email protected]>
Date:   Mon Jan 10 01:20:43 2022 +0100

    Change actionsAlignment type in dialog demo

commit c87c4aa
Author: Jean-Philippe Green <[email protected]>
Date:   Mon Jan 10 00:21:57 2022 +0100

    Revert weird changes to dialog.spec.ts

commit d6deb45
Author: Jean-Philippe <[email protected]>
Date:   Sun Jan 9 23:30:24 2022 +0100

    Use 'start' as default instead of undefined for align attribute in dialog actions

commit 8d367c1
Author: Jean-Philippe <[email protected]>
Date:   Sun Jan 9 23:05:54 2022 +0100

    Update comments in dialog.scss for more clarity

commit 9d2ac16
Merge: 54d0a60 3de4ab8
Author: Jean-Philippe <[email protected]>
Date:   Sun Jan 9 22:33:13 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-angular#18479

commit 54d0a60
Merge: 462d407 c79e1d1
Author: Jean-Philippe Green <[email protected]>
Date:   Wed Jan 5 21:30:29 2022 +0100

    Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-angular#18479

commit c79e1d1
Merge: 462d407 03485cd
Author: Jean-Philippe Green <[email protected]>
Date:   Wed Jan 5 21:23:17 2022 +0100

    Merge branch 'master' of https://github.com/angular/components into angular-master

commit 462d407
Author: Jean-Philippe Green <[email protected]>
Date:   Fri Dec 25 16:18:08 2020 +0100

    fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive

    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 angular#18479 for material-experimental

commit c101f7f
Author: Jean-Philippe Green <[email protected]>
Date:   Fri Dec 25 16:15:01 2020 +0100

    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 angular#18479

Author: PooSham

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

@@ -21,7 +21,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -156,7 +156,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"
@@ -177,7 +177,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 

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

@@ -29,7 +29,7 @@ export class DialogDemo {
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -173,7 +173,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"
@@ -194,7 +194,7 @@ export class JazzDialog {
   `,
 })
 export class ContentElementDialog {
-  actionsAlignment: string;
+  actionsAlignment: 'start' | 'center' | 'end';
 
   constructor(public dialog: MatDialog) {}
 

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

@@ -141,9 +141,15 @@ export class MatDialogContent {}
  */
 @Directive({
   selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'},
+  host: {
+    'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
+    '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
+    '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
+  },
 })
-export class MatDialogActions {}
+export class MatDialogActions {
+  @Input() align?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.

src/material-experimental/mdc-dialog/dialog.scss

@@ -29,13 +29,14 @@ $mat-dialog-button-horizontal-margin: 8px !default;
   // aligns actions at the end of the container.
   justify-content: start;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
+  // [align='center'] and [align='right'] are kept for backwards compability
+  &.mat-mdc-dialog-actions-align-center, &[align='center'] {
     justify-content: center;
   }
+  &.mat-mdc-dialog-actions-align-end, &[align='end'] {
+    justify-content: flex-end;
+  }
 
   // MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
   // class applied. We can't set this class for projected buttons that consumers of the

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class align-center')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-center');
+        expect(actions)
+          .withContext('Expected action buttons to have class align-end')
+          .not.toHaveClass('mat-mdc-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2072,7 +2083,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
@@ -2091,7 +2102,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

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

@@ -145,9 +145,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?: 'start' | 'center' | 'end' = 'start';
+}
 
 /**
  * Finds the closest MatDialogRef to an element by looking at the DOM.

src/material/dialog/dialog.scss

@@ -56,13 +56,14 @@ $button-margin: 8px !default;
   // Pull the actions down to avoid their padding stacking with the dialog's padding.
   margin-bottom: -$padding;
 
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
+  // .mat-dialog-actions-align-{center|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

@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
           .withContext('Expected the aria-labelledby to match the title id.')
           .toBe(title.id);
       }));
+
+      it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
+        let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
+
+        expect(actions)
+          .withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
+          .not.toHaveClass('mat-dialog-actions-align-center');
+
+        expect(actions)
+          .withContext('Expected action buttons to have class mat-dialog-actions-align-end')
+          .toHaveClass('mat-dialog-actions-align-end');
+      });
     }
   });
 
@@ -2116,7 +2128,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
@@ -2135,7 +2147,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