Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 11 additions & 17 deletions src/material/dialog/dialog-animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,23 @@ import {
AnimationTriggerMetadata,
} from '@angular/animations';

const animationBody = [
// Note: The `enter` animation transitions to `transform: none`, because for some reason
// specifying the transform explicitly, causes IE both to blur the dialog content and
// decimate the animation performance. Leaving it as `none` solves both issues.
state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})),
state('enter', style({transform: 'none'})),
transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)',
style({transform: 'none', opacity: 1}))),
transition('* => void, * => exit',
animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
];

/**
* Animations used by MatDialog.
* @docs-private
*/
export const matDialogAnimations: {
readonly dialogContainer: AnimationTriggerMetadata;
readonly slideDialog: AnimationTriggerMetadata;
} = {
/** Animation that is applied on the dialog container by defalt. */
dialogContainer: trigger('dialogContainer', animationBody),

/** @deprecated @breaking-change 8.0.0 Use `matDialogAnimations.dialogContainer` instead. */
slideDialog: trigger('slideDialog', animationBody)
dialogContainer: trigger('dialogContainer', [
// Note: The `enter` animation transitions to `transform: none`, because for some reason
// specifying the transform explicitly, causes IE both to blur the dialog content and
// decimate the animation performance. Leaving it as `none` solves both issues.
state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})),
state('enter', style({transform: 'none'})),
transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)',
style({transform: 'none', opacity: 1}))),
transition('* => void, * => exit',
animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
])
};
21 changes: 0 additions & 21 deletions src/material/dialog/dialog-ref.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
import {GlobalPositionStrategy, OverlayRef} from '@angular/cdk/overlay';
import {Location} from '@angular/common';
import {Observable, Subject} from 'rxjs';
import {filter, take} from 'rxjs/operators';
import {DialogPosition} from './dialog-config';
Expand Down Expand Up @@ -54,8 +53,6 @@ export class MatDialogRef<T, R = any> {
constructor(
private _overlayRef: OverlayRef,
public _containerInstance: MatDialogContainer,
// @breaking-change 8.0.0 `_location` parameter to be removed.
_location?: Location,
readonly id: string = `mat-dialog-${uniqueId++}`) {

// Pass the id along to the container.
Expand Down Expand Up @@ -213,24 +210,6 @@ export class MatDialogRef<T, R = any> {
return this;
}

/**
* Gets an observable that is notified when the dialog is finished opening.
* @deprecated Use `afterOpened` instead.
* @breaking-change 8.0.0
*/
afterOpen(): Observable<void> {
return this.afterOpened();
}

/**
* Gets an observable that is notified when the dialog has started closing.
* @deprecated Use `beforeClosed` instead.
* @breaking-change 8.0.0
*/
beforeClose(): Observable<R | undefined> {
return this.beforeClosed();
}

/** Gets the current state of the dialog's lifecycle. */
getState(): MatDialogState {
return this._state;
Expand Down
8 changes: 4 additions & 4 deletions src/material/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -207,23 +207,23 @@ describe('MatDialog', () => {
expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull();
}));

it('should dispatch the beforeClose and afterClose events when the ' +
it('should dispatch the beforeClosed and afterClosed events when the ' +
'overlay is detached externally', fakeAsync(inject([Overlay], (overlay: Overlay) => {
const dialogRef = dialog.open(PizzaMsg, {
viewContainerRef: testViewContainerRef,
scrollStrategy: overlay.scrollStrategies.close()
});
const beforeCloseCallback = jasmine.createSpy('beforeClosed callback');
const beforeClosedCallback = jasmine.createSpy('beforeClosed callback');
const afterCloseCallback = jasmine.createSpy('afterClosed callback');

dialogRef.beforeClose().subscribe(beforeCloseCallback);
dialogRef.beforeClosed().subscribe(beforeClosedCallback);
dialogRef.afterClosed().subscribe(afterCloseCallback);

scrolledSubject.next();
viewContainerFixture.detectChanges();
flush();

expect(beforeCloseCallback).toHaveBeenCalledTimes(1);
expect(beforeClosedCallback).toHaveBeenCalledTimes(1);
expect(afterCloseCallback).toHaveBeenCalledTimes(1);
})));

Expand Down
17 changes: 6 additions & 11 deletions src/material/dialog/dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,6 @@ export class MatDialog implements OnDestroy {
return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
}

/**
* Stream that emits when a dialog has been opened.
* @deprecated Use `afterOpened` instead.
* @breaking-change 8.0.0
*/
get afterOpen(): Subject<MatDialogRef<any>> {
return this.afterOpened;
}

get _afterAllClosed(): Subject<void> {
const parent = this._parentDialog;
return parent ? parent._afterAllClosed : this._afterAllClosedAtThisLevel;
Expand All @@ -110,7 +101,11 @@ export class MatDialog implements OnDestroy {
constructor(
private _overlay: Overlay,
private _injector: Injector,
@Optional() private _location: Location,
/**
* @deprecated `_location` parameter to be removed.
* @breaking-change 10.0.0
*/
@Optional() _location: Location,
@Optional() @Inject(MAT_DIALOG_DEFAULT_OPTIONS) private _defaultOptions: MatDialogConfig,
@Inject(MAT_DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
@Optional() @SkipSelf() private _parentDialog: MatDialog,
Expand Down Expand Up @@ -248,7 +243,7 @@ export class MatDialog implements OnDestroy {
// Create a reference to the dialog we're creating in order to give the user a handle
// to modify and close it.
const dialogRef =
new MatDialogRef<T, R>(overlayRef, dialogContainer, this._location, config.id);
new MatDialogRef<T, R>(overlayRef, dialogContainer, config.id);

// When the dialog backdrop is clicked, we want to close it.
if (config.hasBackdrop) {
Expand Down
4 changes: 4 additions & 0 deletions src/material/schematics/ng-update/data/constructor-checks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
{
pr: 'https://github.com/angular/components/pull/17230',
changes: ['MatSelect']
},
{
pr: 'https://github.com/angular/components/pull/17333',
changes: ['MatDialogRef']
}
],
[TargetVersion.V8]: [
Expand Down
22 changes: 22 additions & 0 deletions src/material/schematics/ng-update/data/property-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,28 @@
import {PropertyNameUpgradeData, TargetVersion, VersionChanges} from '@angular/cdk/schematics';

export const propertyNames: VersionChanges<PropertyNameUpgradeData> = {
[TargetVersion.V9]: [
{
pr: 'https://github.com/angular/components/pull/17333',
changes: [
{
replace: 'afterOpen',
replaceWith: 'afterOpened',
whitelist: {classes: ['MatDialogRef']}
},
{
replace: 'beforeClose',
replaceWith: 'beforeClosed',
whitelist: {classes: ['MatDialogRef']}
},
{
replace: 'afterOpen',
replaceWith: 'afterOpened',
whitelist: {classes: ['MatDialog']}
}
]
}
],
[TargetVersion.V6]: [
{
pr: 'https://github.com/angular/components/pull/10163',
Expand Down
9 changes: 3 additions & 6 deletions tools/public_api_guard/material/dialog.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ export declare function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Ove
export declare class MatDialog implements OnDestroy {
readonly _afterAllClosed: Subject<void>;
readonly afterAllClosed: Observable<void>;
readonly afterOpen: Subject<MatDialogRef<any>>;
readonly afterOpened: Subject<MatDialogRef<any>>;
readonly openDialogs: MatDialogRef<any>[];
constructor(_overlay: Overlay, _injector: Injector, _location: Location, _defaultOptions: MatDialogConfig, scrollStrategy: any, _parentDialog: MatDialog, _overlayContainer: OverlayContainer);
constructor(_overlay: Overlay, _injector: Injector,
_location: Location, _defaultOptions: MatDialogConfig, scrollStrategy: any, _parentDialog: MatDialog, _overlayContainer: OverlayContainer);
closeAll(): void;
getDialogById(id: string): MatDialogRef<any> | undefined;
ngOnDestroy(): void;
Expand All @@ -41,7 +41,6 @@ export declare class MatDialogActions {

export declare const matDialogAnimations: {
readonly dialogContainer: AnimationTriggerMetadata;
readonly slideDialog: AnimationTriggerMetadata;
};

export declare class MatDialogClose implements OnInit, OnChanges {
Expand Down Expand Up @@ -109,13 +108,11 @@ export declare class MatDialogRef<T, R = any> {
componentInstance: T;
disableClose: boolean | undefined;
readonly id: string;
constructor(_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, _location?: Location, id?: string);
constructor(_overlayRef: OverlayRef, _containerInstance: MatDialogContainer, id?: string);
addPanelClass(classes: string | string[]): this;
afterClosed(): Observable<R | undefined>;
afterOpen(): Observable<void>;
afterOpened(): Observable<void>;
backdropClick(): Observable<MouseEvent>;
beforeClose(): Observable<R | undefined>;
beforeClosed(): Observable<R | undefined>;
close(dialogResult?: R): void;
getState(): MatDialogState;
Expand Down