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

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

@@ -139,9 +139,13 @@ 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 {
+  @Input() align?: 'center' | 'end' = undefined;
 }
 
 

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

@@ -34,13 +34,13 @@ $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'] {
+  // .align-center and .align-end are set by directive input "align"
+  &.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