Skip to content

Commit d137848

Browse files
devversionmmalerba
devversion
authored and
mmalerba
committed
feat(material-experimental): MDC-based version of dialog
1 parent 3d2ecc0 commit d137848

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+3552
-182
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@
174174
/src/dev-app/mdc-card/** @mmalerba
175175
/src/dev-app/mdc-checkbox/** @mmalerba
176176
/src/dev-app/mdc-chips/** @mmalerba
177+
/src/dev-app/mdc-dialog/** @devversion
177178
/src/dev-app/mdc-input/** @devversion @mmalerba
178179
/src/dev-app/mdc-list/** @mmalerba
179180
/src/dev-app/mdc-menu/** @crisbeto
@@ -235,6 +236,7 @@
235236
/src/e2e-app/mdc-card/** @mmalerba
236237
/src/e2e-app/mdc-checkbox/** @mmalerba
237238
/src/e2e-app/mdc-chips/** @mmalerba
239+
/src/e2e-app/mdc-dialog/** @devversion
238240
/src/e2e-app/mdc-input/** @devversion
239241
/src/e2e-app/mdc-menu/** @crisbeto
240242
/src/e2e-app/mdc-progress-bar/** @crisbeto

‎src/cdk-experimental/dialog/dialog-container.ts

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from '@angular/cdk/portal';
1818
import {DOCUMENT} from '@angular/common';
1919
import {
20+
AfterViewInit,
2021
ChangeDetectionStrategy,
2122
ChangeDetectorRef,
2223
Component,
@@ -72,7 +73,7 @@ export function throwDialogContentAlreadyAttachedError() {
7273
'(@dialog.done)': '_animationDone.next($event)',
7374
},
7475
})
75-
export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
76+
export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy, AfterViewInit {
7677
private readonly _document: Document;
7778

7879
/** State of the dialog animation. */
@@ -150,6 +151,16 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
150151
});
151152
}
152153

154+
/** If the dialog view completes initialization, the open animation starts. */
155+
ngAfterViewInit() {
156+
// Save the previously focused element. This element will be re-focused
157+
// when the dialog closes.
158+
this._savePreviouslyFocusedElement();
159+
// Move focus onto the dialog immediately in order to prevent the user
160+
// from accidentally opening multiple dialogs at the same time.
161+
this._focusDialogContainer();
162+
}
163+
153164
/** Destroy focus trap to place focus back to the element focused before the dialog opened. */
154165
ngOnDestroy() {
155166
this._focusTrap.destroy();
@@ -165,7 +176,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
165176
throwDialogContentAlreadyAttachedError();
166177
}
167178

168-
this._savePreviouslyFocusedElement();
169179
return this._portalHost.attachComponentPortal(portal);
170180
}
171181

@@ -178,7 +188,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
178188
throwDialogContentAlreadyAttachedError();
179189
}
180190

181-
this._savePreviouslyFocusedElement();
182191
return this._portalHost.attachTemplatePortal(portal);
183192
}
184193

@@ -193,7 +202,6 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
193202
throwDialogContentAlreadyAttachedError();
194203
}
195204

196-
this._savePreviouslyFocusedElement();
197205
return this._portalHost.attachDomPortal(portal);
198206
}
199207

@@ -222,11 +230,14 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
222230
private _savePreviouslyFocusedElement() {
223231
if (this._document) {
224232
this._elementFocusedBeforeDialogWasOpened = this._document.activeElement as HTMLElement;
233+
}
234+
}
225235

226-
// Move focus onto the dialog immediately in order to prevent the user from accidentally
227-
// opening multiple dialogs at the same time. Needs to be async, because the element
228-
// may not be focusable immediately.
229-
Promise.resolve().then(() => this._elementRef.nativeElement.focus());
236+
/** Focuses the dialog container. */
237+
private _focusDialogContainer() {
238+
// Note that there is no focus method when rendering on the server.
239+
if (this._elementRef.nativeElement.focus) {
240+
this._elementRef.nativeElement.focus();
230241
}
231242
}
232243

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ ng_module(
5050
"//src/dev-app/mdc-card",
5151
"//src/dev-app/mdc-checkbox",
5252
"//src/dev-app/mdc-chips",
53+
"//src/dev-app/mdc-dialog",
5354
"//src/dev-app/mdc-input",
5455
"//src/dev-app/mdc-list",
5556
"//src/dev-app/mdc-menu",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export class DevAppLayout {
7878
{name: 'MDC Card', route: '/mdc-card'},
7979
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
8080
{name: 'MDC Chips', route: '/mdc-chips'},
81+
{name: 'MDC Dialog', route: '/mdc-dialog'},
8182
{name: 'MDC Input', route: '/mdc-input'},
8283
{name: 'MDC List', route: '/mdc-list'},
8384
{name: 'MDC Menu', route: '/mdc-menu'},

‎src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export const DEV_APP_ROUTES: Routes = [
8080
loadChildren: 'mdc-progress-bar/mdc-progress-bar-demo-module#MdcProgressBarDemoModule'
8181
},
8282
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
83+
{path: 'mdc-dialog', loadChildren: 'mdc-dialog/mdc-dialog-demo-module#MdcDialogDemoModule'},
8384
{path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
8485
{path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
8586
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},

‎src/dev-app/mdc-dialog/BUILD.bazel

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "mdc-dialog",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-dialog-demo.html",
10+
":mdc_dialog_demo_scss",
11+
],
12+
deps = [
13+
"//src/material-experimental/mdc-dialog",
14+
"//src/material/button",
15+
"//src/material/card",
16+
"//src/material/checkbox",
17+
"//src/material/form-field",
18+
"//src/material/input",
19+
"//src/material/select",
20+
"@npm//@angular/router",
21+
],
22+
)
23+
24+
sass_binary(
25+
name = "mdc_dialog_demo_scss",
26+
src = "mdc-dialog-demo.scss",
27+
include_paths = ["external/npm/node_modules"],
28+
deps = ["//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib"],
29+
)

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {FormsModule} from '@angular/forms';
11+
import {MatDialogModule} from '@angular/material-experimental/mdc-dialog';
12+
import {MatButtonModule} from '@angular/material/button';
13+
import {MatCardModule} from '@angular/material/card';
14+
import {MatCheckboxModule} from '@angular/material/checkbox';
15+
import {MatFormFieldModule} from '@angular/material/form-field';
16+
import {MatInputModule} from '@angular/material/input';
17+
import {MatSelectModule} from '@angular/material/select';
18+
import {RouterModule} from '@angular/router';
19+
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './mdc-dialog-demo';
20+
21+
@NgModule({
22+
imports: [
23+
FormsModule,
24+
MatButtonModule,
25+
MatCardModule,
26+
MatCheckboxModule,
27+
MatDialogModule,
28+
MatFormFieldModule,
29+
MatInputModule,
30+
MatSelectModule,
31+
RouterModule.forChild([{path: '', component: DialogDemo}]),
32+
],
33+
declarations: [ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog],
34+
})
35+
export class MdcDialogDemoModule {
36+
}

‎src/dev-app/mdc-dialog/mdc-dialog-demo.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<h1>Dialog demo</h1>
2+
3+
<button mat-raised-button color="primary" (click)="openJazz()" class="demo-dialog-button">
4+
Open dialog
5+
</button>
6+
<button mat-raised-button color="accent" (click)="openContentElement()" class="demo-dialog-button">
7+
Open dialog with content elements
8+
</button>
9+
<button mat-raised-button color="accent" (click)="openTemplate()" class="demo-dialog-button">
10+
Open dialog with template content
11+
</button>
12+
13+
<p>
14+
<mat-checkbox [(ngModel)]="enableLegacyPadding">Enable legacy padding</mat-checkbox>
15+
</p>
16+
17+
<mat-card class="demo-dialog-card">
18+
<mat-card-content>
19+
<h2>Dialog dimensions</h2>
20+
21+
<p>
22+
<mat-form-field>
23+
<mat-label>Width</mat-label>
24+
<input matInput [(ngModel)]="config.width">
25+
</mat-form-field>
26+
<mat-form-field>
27+
<mat-label>Height</mat-label>
28+
<input matInput [(ngModel)]="config.height">
29+
</mat-form-field>
30+
</p>
31+
32+
<p>
33+
<mat-form-field>
34+
<mat-label>Min width</mat-label>
35+
<input matInput [(ngModel)]="config.minWidth">
36+
</mat-form-field>
37+
<mat-form-field>
38+
<mat-label>Min height</mat-label>
39+
<input matInput [(ngModel)]="config.minHeight">
40+
</mat-form-field>
41+
</p>
42+
43+
<p>
44+
<mat-form-field>
45+
<mat-label>Max width</mat-label>
46+
<input matInput [(ngModel)]="config.maxWidth">
47+
</mat-form-field>
48+
<mat-form-field>
49+
<mat-label>Max height</mat-label>
50+
<input matInput [(ngModel)]="config.maxHeight">
51+
</mat-form-field>
52+
</p>
53+
54+
<h2>Dialog position</h2>
55+
56+
<p>
57+
<mat-form-field>
58+
<mat-label>Top</mat-label>
59+
<input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''">
60+
</mat-form-field>
61+
<mat-form-field>
62+
<mat-label>Bottom</mat-label>
63+
<input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''">
64+
</mat-form-field>
65+
</p>
66+
67+
<p>
68+
<mat-form-field>
69+
<mat-label>Left</mat-label>
70+
<input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''">
71+
</mat-form-field>
72+
<mat-form-field>
73+
<mat-label>Right</mat-label>
74+
<input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''">
75+
</mat-form-field>
76+
</p>
77+
78+
<h2>Dialog backdrop</h2>
79+
80+
<p>
81+
<mat-form-field>
82+
<mat-label>Backdrop class</mat-label>
83+
<input matInput [(ngModel)]="config.backdropClass">
84+
</mat-form-field>
85+
</p>
86+
87+
<mat-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</mat-checkbox>
88+
89+
<h2>Other options</h2>
90+
91+
<p>
92+
<mat-form-field>
93+
<mat-label>Button alignment</mat-label>
94+
<mat-select [(ngModel)]="actionsAlignment">
95+
<mat-option>Start</mat-option>
96+
<mat-option value="end">End</mat-option>
97+
<mat-option value="center">Center</mat-option>
98+
</mat-select>
99+
</mat-form-field>
100+
</p>
101+
102+
<p>
103+
<mat-form-field>
104+
<mat-label>Dialog message</mat-label>
105+
<input matInput [(ngModel)]="config.data.message">
106+
</mat-form-field>
107+
</p>
108+
109+
<p>
110+
<mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
111+
</p>
112+
</mat-card-content>
113+
</mat-card>
114+
115+
<p>Last afterClosed result: {{lastAfterClosedResult}}</p>
116+
<p>Last beforeClose result: {{lastBeforeCloseResult}}</p>
117+
118+
<ng-template let-data let-dialogRef="dialogRef">
119+
I'm a template dialog. I've been opened {{numTemplateOpens}} times!
120+
121+
<p>It's Jazz!</p>
122+
123+
<mat-form-field>
124+
<mat-label>How much?</mat-label>
125+
<input matInput #howMuch>
126+
</mat-form-field>
127+
128+
<p> {{ data.message }} </p>
129+
<button type="button" (click)="dialogRef.close(howMuch.value)" class="demo-dialog-button"
130+
cdkFocusInitial>
131+
Close dialog
132+
</button>
133+
<button (click)="dialogRef.updateSize('500px', '500px').updatePosition({top: '25px', left: '25px'});"
134+
class="demo-dialog-button">
135+
Change dimensions
136+
</button>
137+
</ng-template>

‎src/dev-app/mdc-dialog/mdc-dialog-demo.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import '../../material-experimental/mdc-dialog/dialog-legacy-padding';
2+
3+
.demo-dialog-card {
4+
max-width: 405px;
5+
margin: 20px 0;
6+
}
7+
8+
.demo-dialog-button {
9+
margin-right: 8px;
10+
11+
[dir='rtl'] & {
12+
margin-left: 8px;
13+
margin-right: 0;
14+
}
15+
}
16+
17+
.demo-dialog-legacy-padding {
18+
@include mat-mdc-dialog-legacy-padding();
19+
}

0 commit comments

Comments
 (0)