Skip to content

Commit e253e12

Browse files
committed
7. Move base classes out of legacy
1 parent f5e83b1 commit e253e12

28 files changed

+797
-788
lines changed

src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {Component, Inject} from '@angular/core';
22
import {
33
MatLegacyDialog,
4-
MatLegacyDialogRef,
54
MAT_LEGACY_DIALOG_DATA,
5+
MatLegacyDialogRef,
66
} from '@angular/material/legacy-dialog';
77

88
export interface DialogData {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import {
1717
MAT_LEGACY_DIALOG_DATA,
1818
MatLegacyDialog,
1919
MatLegacyDialogConfig,
20-
MatLegacyDialogRef,
2120
MatLegacyDialogModule,
21+
MatLegacyDialogRef,
2222
} from '@angular/material/legacy-dialog';
2323
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
2424
import {MatLegacyInputModule} from '@angular/material/legacy-input';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {Component, Inject, TemplateRef, ViewChild, ViewEncapsulation} from '@ang
1111
import {
1212
MAT_DIALOG_DATA,
1313
MatDialog,
14-
MatLegacyDialogConfig,
14+
MatDialogConfig,
1515
MatDialogRef,
1616
MatDialogModule,
1717
} from '@angular/material/dialog';
@@ -24,7 +24,7 @@ import {MatInputModule} from '@angular/material/input';
2424
import {MatSelectModule} from '@angular/material-experimental/mdc-select';
2525
import {DragDropModule} from '@angular/cdk/drag-drop';
2626

27-
const defaultDialogConfig = new MatLegacyDialogConfig();
27+
const defaultDialogConfig = new MatDialogConfig();
2828

2929
@Component({
3030
selector: 'mdc-dialog-demo',
@@ -112,7 +112,7 @@ export class DialogDemo {
112112
this.dialog.open(this.template, this._getDialogConfig());
113113
}
114114

115-
private _getDialogConfig(): MatLegacyDialogConfig {
115+
private _getDialogConfig(): MatDialogConfig {
116116
const config = {...this.config};
117117
if (this.enableLegacyPadding) {
118118
config.panelClass = `demo-dialog-legacy-padding`;

src/e2e-app/dialog/dialog-e2e.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {Component, ViewChild, TemplateRef} from '@angular/core';
22
import {
33
MatLegacyDialog,
4-
MatLegacyDialogRef,
54
MatLegacyDialogConfig,
5+
MatLegacyDialogRef,
66
} from '@angular/material/legacy-dialog';
77

88
@Component({

src/e2e-app/mdc-dialog/mdc-dialog-e2e.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, ViewChild, TemplateRef} from '@angular/core';
2-
import {MatDialog, MatDialogRef, MatLegacyDialogConfig} from '@angular/material/dialog';
2+
import {MatDialog, MatDialogRef, MatDialogConfig} from '@angular/material/dialog';
33

44
@Component({
55
selector: 'mdc-dialog-e2e',
@@ -12,7 +12,7 @@ export class MdcDialogE2E {
1212

1313
constructor(private _dialog: MatDialog) {}
1414

15-
private _openDialog(config?: MatLegacyDialogConfig) {
15+
private _openDialog(config?: MatDialogConfig) {
1616
this.dialogRef = this._dialog.open(TestDialog, config);
1717
this.dialogRef.afterClosed().subscribe(() => (this.dialogRef = null));
1818
}

src/material/dialog/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ ng_module(
2020
),
2121
assets = [":dialog_scss"] + glob(["**/*.html"]),
2222
deps = [
23+
"//src/cdk/dialog",
2324
"//src/cdk/overlay",
2425
"//src/cdk/portal",
2526
"//src/material/core",
26-
"//src/material/legacy-dialog",
2727
"@npm//@material/dialog",
2828
],
2929
)
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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+
import {
9+
animate,
10+
state,
11+
style,
12+
transition,
13+
trigger,
14+
AnimationTriggerMetadata,
15+
query,
16+
animateChild,
17+
group,
18+
} from '@angular/animations';
19+
20+
/**
21+
* Default parameters for the animation for backwards compatibility.
22+
* @docs-private
23+
*/
24+
export const defaultParams = {
25+
params: {enterAnimationDuration: '150ms', exitAnimationDuration: '75ms'},
26+
};
27+
28+
/**
29+
* Animations used by MatDialog.
30+
* @docs-private
31+
*/
32+
export const matDialogAnimations: {
33+
readonly dialogContainer: AnimationTriggerMetadata;
34+
} = {
35+
/** Animation that is applied on the dialog container by default. */
36+
dialogContainer: trigger('dialogContainer', [
37+
// Note: The `enter` animation transitions to `transform: none`, because for some reason
38+
// specifying the transform explicitly, causes IE both to blur the dialog content and
39+
// decimate the animation performance. Leaving it as `none` solves both issues.
40+
state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})),
41+
state('enter', style({transform: 'none'})),
42+
transition(
43+
'* => enter',
44+
group([
45+
animate(
46+
'{{enterAnimationDuration}} cubic-bezier(0, 0, 0.2, 1)',
47+
style({transform: 'none', opacity: 1}),
48+
),
49+
query('@*', animateChild(), {optional: true}),
50+
]),
51+
defaultParams,
52+
),
53+
transition(
54+
'* => void, * => exit',
55+
group([
56+
animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
57+
query('@*', animateChild(), {optional: true}),
58+
]),
59+
defaultParams,
60+
),
61+
]),
62+
};

src/material/legacy-dialog/dialog-config.ts renamed to src/material/dialog/dialog-config.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ import {ScrollStrategy} from '@angular/cdk/overlay';
1212
import {defaultParams} from './dialog-animations';
1313

1414
/** Options for where to set focus to automatically on dialog open */
15-
export type LegacyAutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
15+
export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
1616

1717
/** Valid ARIA roles for a dialog element. */
18-
export type LegacyDialogRole = 'dialog' | 'alertdialog';
18+
export type DialogRole = 'dialog' | 'alertdialog';
1919

2020
/** Possible overrides for a dialog's position. */
21-
export interface LegacyDialogPosition {
21+
export interface DialogPosition {
2222
/** Override for the dialog's top position. */
2323
top?: string;
2424

@@ -35,7 +35,7 @@ export interface LegacyDialogPosition {
3535
/**
3636
* Configuration for opening a modal dialog with the MatDialog service.
3737
*/
38-
export class MatLegacyDialogConfig<D = any> {
38+
export class MatDialogConfig<D = any> {
3939
/**
4040
* Where the attached component should live in Angular's *logical* component tree.
4141
* This affects what is available for injection and the change detection order for the
@@ -54,7 +54,7 @@ export class MatLegacyDialogConfig<D = any> {
5454
id?: string;
5555

5656
/** The ARIA role of the dialog element. */
57-
role?: LegacyDialogRole = 'dialog';
57+
role?: DialogRole = 'dialog';
5858

5959
/** Custom class for the overlay pane. */
6060
panelClass?: string | string[] = '';
@@ -87,7 +87,7 @@ export class MatLegacyDialogConfig<D = any> {
8787
maxHeight?: number | string;
8888

8989
/** Position overrides. */
90-
position?: LegacyDialogPosition;
90+
position?: DialogPosition;
9191

9292
/** Data being injected into the child component. */
9393
data?: D | null = null;
@@ -109,7 +109,7 @@ export class MatLegacyDialogConfig<D = any> {
109109
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
110110
* AutoFocusTarget instead.
111111
*/
112-
autoFocus?: LegacyAutoFocusTarget | string | boolean = 'first-tabbable';
112+
autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';
113113

114114
/**
115115
* Whether the dialog should restore focus to the

src/material/dialog/dialog-container.ts

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,77 @@ import {
1313
ChangeDetectionStrategy,
1414
Component,
1515
ElementRef,
16+
EventEmitter,
1617
Inject,
18+
NgZone,
1719
OnDestroy,
1820
Optional,
1921
ViewEncapsulation,
20-
NgZone,
2122
} from '@angular/core';
22-
import {
23-
MatLegacyDialogConfig,
24-
_MatLegacyDialogContainerBase,
25-
} from '@angular/material/legacy-dialog';
23+
import {MatDialogConfig} from './dialog-config';
2624
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
2725
import {cssClasses, numbers} from '@material/dialog';
26+
import {CdkDialogContainer} from '@angular/cdk/dialog';
27+
28+
/** Event that captures the state of dialog container animations. */
29+
interface LegacyDialogAnimationEvent {
30+
state: 'opened' | 'opening' | 'closing' | 'closed';
31+
totalTime: number;
32+
}
33+
34+
/**
35+
* Base class for the `MatDialogContainer`. The base class does not implement
36+
* animations as these are left to implementers of the dialog container.
37+
*/
38+
// tslint:disable-next-line:validate-decorators
39+
@Component({template: ''})
40+
export abstract class _MatDialogContainerBase extends CdkDialogContainer<MatDialogConfig> {
41+
/** Emits when an animation state changes. */
42+
_animationStateChanged = new EventEmitter<LegacyDialogAnimationEvent>();
43+
44+
constructor(
45+
elementRef: ElementRef,
46+
focusTrapFactory: FocusTrapFactory,
47+
@Optional() @Inject(DOCUMENT) _document: any,
48+
dialogConfig: MatDialogConfig,
49+
interactivityChecker: InteractivityChecker,
50+
ngZone: NgZone,
51+
overlayRef: OverlayRef,
52+
focusMonitor?: FocusMonitor,
53+
) {
54+
super(
55+
elementRef,
56+
focusTrapFactory,
57+
_document,
58+
dialogConfig,
59+
interactivityChecker,
60+
ngZone,
61+
overlayRef,
62+
focusMonitor,
63+
);
64+
}
65+
66+
/** Starts the dialog exit animation. */
67+
abstract _startExitAnimation(): void;
68+
69+
protected override _captureInitialFocus(): void {
70+
if (!this._config.delayFocusTrap) {
71+
this._trapFocus();
72+
}
73+
}
74+
75+
/**
76+
* Callback for when the open dialog animation has finished. Intended to
77+
* be called by sub-classes that use different animation implementations.
78+
*/
79+
protected _openAnimationDone(totalTime: number) {
80+
if (this._config.delayFocusTrap) {
81+
this._trapFocus();
82+
}
83+
84+
this._animationStateChanged.next({state: 'opened', totalTime});
85+
}
86+
}
2887

2988
/**
3089
* Internal component that wraps user-provided dialog content in a MDC dialog.
@@ -50,7 +109,7 @@ import {cssClasses, numbers} from '@material/dialog';
50109
'[class._mat-animation-noopable]': '!_animationsEnabled',
51110
},
52111
})
53-
export class MatDialogContainer extends _MatLegacyDialogContainerBase implements OnDestroy {
112+
export class MatDialogContainer extends _MatDialogContainerBase implements OnDestroy {
54113
/** Whether animations are enabled. */
55114
_animationsEnabled: boolean = this._animationMode !== 'NoopAnimations';
56115

@@ -71,7 +130,7 @@ export class MatDialogContainer extends _MatLegacyDialogContainerBase implements
71130
elementRef: ElementRef,
72131
focusTrapFactory: FocusTrapFactory,
73132
@Optional() @Inject(DOCUMENT) document: any,
74-
dialogConfig: MatLegacyDialogConfig,
133+
dialogConfig: MatDialogConfig,
75134
checker: InteractivityChecker,
76135
ngZone: NgZone,
77136
overlayRef: OverlayRef,

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,9 @@ import {
1515
Optional,
1616
SimpleChanges,
1717
} from '@angular/core';
18-
import {_closeLegacyDialogVia} from '@angular/material/legacy-dialog';
1918

2019
import {MatDialog} from './dialog';
21-
import {MatDialogRef} from './dialog-ref';
20+
import {_closeDialogVia, MatDialogRef} from './dialog-ref';
2221

2322
/** Counter used to generate unique IDs for dialog elements. */
2423
let dialogElementUid = 0;
@@ -79,7 +78,7 @@ export class MatDialogClose implements OnInit, OnChanges {
7978
// result in incorrect origins. Most of the time, close buttons will be auto focused in the
8079
// dialog, and therefore clicking the button won't result in a focus change. This means that
8180
// the FocusMonitor won't detect any origin change, and will always output `program`.
82-
_closeLegacyDialogVia(
81+
_closeDialogVia(
8382
this.dialogRef,
8483
event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
8584
this.dialogResult,

0 commit comments

Comments
 (0)