Skip to content

Commit 06559a0

Browse files
crisbetocrisbeto
authored
feat(material/dialog): switch to standalone (#27860)
Reworks `MatDialog` to support standalone.
1 parent cc3428e commit 06559a0

File tree

5 files changed

+50
-34
lines changed

5 files changed

+50
-34
lines changed

‎src/material/dialog/dialog-container.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {MatDialogConfig} from './dialog-config';
2525
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
2626
import {CdkDialogContainer} from '@angular/cdk/dialog';
2727
import {coerceNumberProperty} from '@angular/cdk/coercion';
28-
import {ComponentPortal} from '@angular/cdk/portal';
28+
import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
2929

3030
/** Event that captures the state of dialog container animations. */
3131
interface LegacyDialogAnimationEvent {
@@ -56,6 +56,8 @@ export const CLOSE_ANIMATION_DURATION = 75;
5656
// Disabled for consistency with the non-MDC dialog container.
5757
// tslint:disable-next-line:validate-decorators
5858
changeDetection: ChangeDetectionStrategy.Default,
59+
standalone: true,
60+
imports: [PortalModule],
5961
host: {
6062
'class': 'mat-mdc-dialog-container mdc-dialog',
6163
'tabindex': '-1',

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ let dialogElementUid = 0;
2929
@Directive({
3030
selector: '[mat-dialog-close], [matDialogClose]',
3131
exportAs: 'matDialogClose',
32+
standalone: true,
3233
host: {
3334
'(click)': '_onButtonClick($event)',
3435
'[attr.aria-label]': 'ariaLabel || null',
@@ -93,6 +94,7 @@ export class MatDialogClose implements OnInit, OnChanges {
9394
@Directive({
9495
selector: '[mat-dialog-title], [matDialogTitle]',
9596
exportAs: 'matDialogTitle',
97+
standalone: true,
9698
host: {
9799
'class': 'mat-mdc-dialog-title mdc-dialog__title',
98100
'[id]': 'id',
@@ -146,6 +148,7 @@ export class MatDialogTitle implements OnInit, OnDestroy {
146148
@Directive({
147149
selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
148150
host: {'class': 'mat-mdc-dialog-content mdc-dialog__content'},
151+
standalone: true,
149152
})
150153
export class MatDialogContent {}
151154

@@ -155,6 +158,7 @@ export class MatDialogContent {}
155158
*/
156159
@Directive({
157160
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
161+
standalone: true,
158162
host: {
159163
'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
160164
'[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',

‎src/material/dialog/dialog.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
SkipSelf,
2121
TemplateRef,
2222
Type,
23+
inject,
2324
} from '@angular/core';
2425
import {MatDialogConfig} from './dialog-config';
2526
import {MatDialogContainer} from './dialog-container';
@@ -39,16 +40,31 @@ export const MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken<MatDialogConfig>(
3940
/** Injection token that determines the scroll handling while the dialog is open. */
4041
export const MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
4142
'mat-mdc-dialog-scroll-strategy',
43+
{
44+
providedIn: 'root',
45+
factory: () => {
46+
const overlay = inject(Overlay);
47+
return () => overlay.scrollStrategies.block();
48+
},
49+
},
4250
);
4351

44-
/** @docs-private */
52+
/**
53+
* @docs-private
54+
* @deprecated No longer used. To be removed.
55+
* @breaking-change 19.0.0
56+
*/
4557
export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(
4658
overlay: Overlay,
4759
): () => ScrollStrategy {
4860
return () => overlay.scrollStrategies.block();
4961
}
5062

51-
/** @docs-private */
63+
/**
64+
* @docs-private
65+
* @deprecated No longer used. To be removed.
66+
* @breaking-change 19.0.0
67+
*/
5268
export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
5369
provide: MAT_DIALOG_SCROLL_STRATEGY,
5470
deps: [Overlay],
@@ -61,7 +77,7 @@ let uniqueId = 0;
6177
/**
6278
* Service to open Material Design modal dialogs.
6379
*/
64-
@Injectable()
80+
@Injectable({providedIn: 'root'})
6581
export class MatDialog implements OnDestroy {
6682
private readonly _openDialogsAtThisLevel: MatDialogRef<any>[] = [];
6783
private readonly _afterAllClosedAtThisLevel = new Subject<void>();

‎src/material/dialog/module.ts‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
1111
import {PortalModule} from '@angular/cdk/portal';
1212
import {NgModule} from '@angular/core';
1313
import {MatCommonModule} from '@angular/material/core';
14-
import {MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MatDialog} from './dialog';
14+
import {MatDialog} from './dialog';
1515
import {MatDialogContainer} from './dialog-container';
1616
import {
1717
MatDialogActions,
@@ -20,23 +20,17 @@ import {
2020
MatDialogTitle,
2121
} from './dialog-content-directives';
2222

23+
const DIRECTIVES = [
24+
MatDialogContainer,
25+
MatDialogClose,
26+
MatDialogTitle,
27+
MatDialogActions,
28+
MatDialogContent,
29+
];
30+
2331
@NgModule({
24-
imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule],
25-
exports: [
26-
MatDialogContainer,
27-
MatDialogClose,
28-
MatDialogTitle,
29-
MatDialogContent,
30-
MatDialogActions,
31-
MatCommonModule,
32-
],
33-
declarations: [
34-
MatDialogContainer,
35-
MatDialogClose,
36-
MatDialogTitle,
37-
MatDialogActions,
38-
MatDialogContent,
39-
],
40-
providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],
32+
imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, ...DIRECTIVES],
33+
exports: [MatCommonModule, ...DIRECTIVES],
34+
providers: [MatDialog],
4135
})
4236
export class MatDialogModule {}

‎tools/public_api_guard/material/dialog.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import { FocusMonitor } from '@angular/cdk/a11y';
1818
import { FocusOrigin } from '@angular/cdk/a11y';
1919
import { FocusTrapFactory } from '@angular/cdk/a11y';
2020
import * as i0 from '@angular/core';
21-
import * as i3 from '@angular/cdk/dialog';
22-
import * as i4 from '@angular/cdk/overlay';
23-
import * as i5 from '@angular/cdk/portal';
24-
import * as i6 from '@angular/material/core';
21+
import * as i1 from '@angular/cdk/dialog';
22+
import * as i2 from '@angular/cdk/overlay';
23+
import * as i3 from '@angular/cdk/portal';
24+
import * as i4 from '@angular/material/core';
2525
import { InjectionToken } from '@angular/core';
2626
import { Injector } from '@angular/core';
2727
import { InteractivityChecker } from '@angular/cdk/a11y';
@@ -74,14 +74,14 @@ export const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;
7474
// @public
7575
export const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
7676

77-
// @public
77+
// @public @deprecated
7878
export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER: {
7979
provide: InjectionToken<() => ScrollStrategy>;
8080
deps: (typeof Overlay)[];
8181
useFactory: typeof MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
8282
};
8383

84-
// @public
84+
// @public @deprecated
8585
export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
8686

8787
// @public
@@ -113,7 +113,7 @@ export class MatDialog implements OnDestroy {
113113
export class MatDialogActions {
114114
align?: 'start' | 'center' | 'end';
115115
// (undocumented)
116-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, false, never>;
116+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
117117
// (undocumented)
118118
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
119119
}
@@ -140,7 +140,7 @@ export class MatDialogClose implements OnInit, OnChanges {
140140
_onButtonClick(event: MouseEvent): void;
141141
type: 'submit' | 'button' | 'reset';
142142
// (undocumented)
143-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogClose, "[mat-dialog-close], [matDialogClose]", ["matDialogClose"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dialogResult": { "alias": "mat-dialog-close"; "required": false; }; "_matDialogClose": { "alias": "matDialogClose"; "required": false; }; }, {}, never, never, false, never>;
143+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogClose, "[mat-dialog-close], [matDialogClose]", ["matDialogClose"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dialogResult": { "alias": "mat-dialog-close"; "required": false; }; "_matDialogClose": { "alias": "matDialogClose"; "required": false; }; }, {}, never, never, true, never>;
144144
// (undocumented)
145145
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, [{ optional: true; }, null, null]>;
146146
}
@@ -194,15 +194,15 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
194194
protected _openAnimationDone(totalTime: number): void;
195195
_startExitAnimation(): void;
196196
// (undocumented)
197-
static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false, never>;
197+
static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, true, never>;
198198
// (undocumented)
199199
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
200200
}
201201

202202
// @public
203203
export class MatDialogContent {
204204
// (undocumented)
205-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, false, never>;
205+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
206206
// (undocumented)
207207
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
208208
}
@@ -214,7 +214,7 @@ export class MatDialogModule {
214214
// (undocumented)
215215
static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
216216
// (undocumented)
217-
static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogActions, typeof i2.MatDialogContent], [typeof i3.DialogModule, typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.MatCommonModule], [typeof i1.MatDialogContainer, typeof i2.MatDialogClose, typeof i2.MatDialogTitle, typeof i2.MatDialogContent, typeof i2.MatDialogActions, typeof i6.MatCommonModule]>;
217+
static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
218218
}
219219

220220
// @public
@@ -259,7 +259,7 @@ export class MatDialogTitle implements OnInit, OnDestroy {
259259
// (undocumented)
260260
ngOnInit(): void;
261261
// (undocumented)
262-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
262+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
263263
// (undocumented)
264264
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
265265
}

0 commit comments

Comments
 (0)