Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(material/dialog): switch to standalone #27860

Merged
merged 1 commit into from
Sep 28, 2023
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
4 changes: 3 additions & 1 deletion src/material/dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {MatDialogConfig} from './dialog-config';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {CdkDialogContainer} from '@angular/cdk/dialog';
import {coerceNumberProperty} from '@angular/cdk/coercion';
import {ComponentPortal} from '@angular/cdk/portal';
import {ComponentPortal, PortalModule} from '@angular/cdk/portal';

/** Event that captures the state of dialog container animations. */
interface LegacyDialogAnimationEvent {
Expand Down Expand Up @@ -56,6 +56,8 @@ export const CLOSE_ANIMATION_DURATION = 75;
// Disabled for consistency with the non-MDC dialog container.
// tslint:disable-next-line:validate-decorators
changeDetection: ChangeDetectionStrategy.Default,
standalone: true,
imports: [PortalModule],
host: {
'class': 'mat-mdc-dialog-container mdc-dialog',
'tabindex': '-1',
Expand Down
4 changes: 4 additions & 0 deletions src/material/dialog/dialog-content-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ let dialogElementUid = 0;
@Directive({
selector: '[mat-dialog-close], [matDialogClose]',
exportAs: 'matDialogClose',
standalone: true,
host: {
'(click)': '_onButtonClick($event)',
'[attr.aria-label]': 'ariaLabel || null',
Expand Down Expand Up @@ -93,6 +94,7 @@ export class MatDialogClose implements OnInit, OnChanges {
@Directive({
selector: '[mat-dialog-title], [matDialogTitle]',
exportAs: 'matDialogTitle',
standalone: true,
host: {
'class': 'mat-mdc-dialog-title mdc-dialog__title',
'[id]': 'id',
Expand Down Expand Up @@ -146,6 +148,7 @@ export class MatDialogTitle implements OnInit, OnDestroy {
@Directive({
selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
host: {'class': 'mat-mdc-dialog-content mdc-dialog__content'},
standalone: true,
})
export class MatDialogContent {}

Expand All @@ -155,6 +158,7 @@ export class MatDialogContent {}
*/
@Directive({
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
standalone: true,
host: {
'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
'[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
Expand Down
22 changes: 19 additions & 3 deletions src/material/dialog/dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
SkipSelf,
TemplateRef,
Type,
inject,
} from '@angular/core';
import {MatDialogConfig} from './dialog-config';
import {MatDialogContainer} from './dialog-container';
Expand All @@ -39,16 +40,31 @@ export const MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken<MatDialogConfig>(
/** Injection token that determines the scroll handling while the dialog is open. */
export const MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
'mat-mdc-dialog-scroll-strategy',
{
providedIn: 'root',
factory: () => {
const overlay = inject(Overlay);
return () => overlay.scrollStrategies.block();
},
},
);

/** @docs-private */
/**
* @docs-private
* @deprecated No longer used. To be removed.
* @breaking-change 19.0.0
*/
export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(
overlay: Overlay,
): () => ScrollStrategy {
return () => overlay.scrollStrategies.block();
}

/** @docs-private */
/**
* @docs-private
* @deprecated No longer used. To be removed.
* @breaking-change 19.0.0
*/
export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
provide: MAT_DIALOG_SCROLL_STRATEGY,
deps: [Overlay],
Expand All @@ -61,7 +77,7 @@ let uniqueId = 0;
/**
* Service to open Material Design modal dialogs.
*/
@Injectable()
@Injectable({providedIn: 'root'})
export class MatDialog implements OnDestroy {
private readonly _openDialogsAtThisLevel: MatDialogRef<any>[] = [];
private readonly _afterAllClosedAtThisLevel = new Subject<void>();
Expand Down
30 changes: 12 additions & 18 deletions src/material/dialog/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
import {PortalModule} from '@angular/cdk/portal';
import {NgModule} from '@angular/core';
import {MatCommonModule} from '@angular/material/core';
import {MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MatDialog} from './dialog';
import {MatDialog} from './dialog';
import {MatDialogContainer} from './dialog-container';
import {
MatDialogActions,
Expand All @@ -20,23 +20,17 @@ import {
MatDialogTitle,
} from './dialog-content-directives';

const DIRECTIVES = [
MatDialogContainer,
MatDialogClose,
MatDialogTitle,
MatDialogActions,
MatDialogContent,
];

@NgModule({
imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule],
exports: [
MatDialogContainer,
MatDialogClose,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatCommonModule,
],
declarations: [
MatDialogContainer,
MatDialogClose,
MatDialogTitle,
MatDialogActions,
MatDialogContent,
],
providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],
imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, ...DIRECTIVES],
exports: [MatCommonModule, ...DIRECTIVES],
providers: [MatDialog],
})
export class MatDialogModule {}
24 changes: 12 additions & 12 deletions tools/public_api_guard/material/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ import { FocusMonitor } from '@angular/cdk/a11y';
import { FocusOrigin } from '@angular/cdk/a11y';
import { FocusTrapFactory } from '@angular/cdk/a11y';
import * as i0 from '@angular/core';
import * as i3 from '@angular/cdk/dialog';
import * as i4 from '@angular/cdk/overlay';
import * as i5 from '@angular/cdk/portal';
import * as i6 from '@angular/material/core';
import * as i1 from '@angular/cdk/dialog';
import * as i2 from '@angular/cdk/overlay';
import * as i3 from '@angular/cdk/portal';
import * as i4 from '@angular/material/core';
import { InjectionToken } from '@angular/core';
import { Injector } from '@angular/core';
import { InteractivityChecker } from '@angular/cdk/a11y';
Expand Down Expand Up @@ -74,14 +74,14 @@ export const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;
// @public
export const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

// @public
// @public @deprecated
export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER: {
provide: InjectionToken<() => ScrollStrategy>;
deps: (typeof Overlay)[];
useFactory: typeof MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY;
};

// @public
// @public @deprecated
export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;

// @public
Expand Down Expand Up @@ -113,7 +113,7 @@ export class MatDialog implements OnDestroy {
export class MatDialogActions {
align?: 'start' | 'center' | 'end';
// (undocumented)
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, false, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
}
Expand All @@ -140,7 +140,7 @@ export class MatDialogClose implements OnInit, OnChanges {
_onButtonClick(event: MouseEvent): void;
type: 'submit' | 'button' | 'reset';
// (undocumented)
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>;
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>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, [{ optional: true; }, null, null]>;
}
Expand Down Expand Up @@ -194,15 +194,15 @@ export class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> impl
protected _openAnimationDone(totalTime: number): void;
_startExitAnimation(): void;
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, true, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
}

// @public
export class MatDialogContent {
// (undocumented)
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, false, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContent, never>;
}
Expand All @@ -214,7 +214,7 @@ export class MatDialogModule {
// (undocumented)
static ɵinj: i0.ɵɵInjectorDeclaration<MatDialogModule>;
// (undocumented)
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]>;
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]>;
}

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