@angular/material 21.0.0-next.1 → 21.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/autocomplete/index.d.ts +1 -23
  2. package/bottom-sheet/index.d.ts +1 -10
  3. package/button/index.d.ts +1 -7
  4. package/button-toggle/index.d.ts +1 -1
  5. package/button-toggle.d.d.ts +1 -7
  6. package/checkbox/index.d.ts +1 -7
  7. package/core/index.d.ts +1 -1
  8. package/core/tokens/_classes.scss +20 -16
  9. package/date-adapter.d.d.ts +1 -7
  10. package/datepicker/index.d.ts +2 -55
  11. package/dialog/index.d.ts +1 -23
  12. package/expansion/index.d.ts +1 -36
  13. package/fesm2022/autocomplete.mjs +5 -33
  14. package/fesm2022/autocomplete.mjs.map +1 -1
  15. package/fesm2022/bottom-sheet.mjs +1 -82
  16. package/fesm2022/bottom-sheet.mjs.map +1 -1
  17. package/fesm2022/button-toggle.mjs +5 -13
  18. package/fesm2022/button-toggle.mjs.map +1 -1
  19. package/fesm2022/button.mjs +6 -14
  20. package/fesm2022/button.mjs.map +1 -1
  21. package/fesm2022/checkbox.mjs +10 -19
  22. package/fesm2022/checkbox.mjs.map +1 -1
  23. package/fesm2022/core.mjs +1 -2
  24. package/fesm2022/core.mjs.map +1 -1
  25. package/fesm2022/date-formats.mjs +2 -10
  26. package/fesm2022/date-formats.mjs.map +1 -1
  27. package/fesm2022/datepicker.mjs +26 -178
  28. package/fesm2022/datepicker.mjs.map +1 -1
  29. package/fesm2022/dialog/testing.mjs +5 -5
  30. package/fesm2022/dialog.mjs +882 -114
  31. package/fesm2022/dialog.mjs.map +1 -1
  32. package/fesm2022/expansion.mjs +1 -103
  33. package/fesm2022/expansion.mjs.map +1 -1
  34. package/fesm2022/form-field.mjs +37 -49
  35. package/fesm2022/form-field.mjs.map +1 -1
  36. package/fesm2022/icon-registry.mjs +2 -29
  37. package/fesm2022/icon-registry.mjs.map +1 -1
  38. package/fesm2022/icon.mjs +11 -17
  39. package/fesm2022/icon.mjs.map +1 -1
  40. package/fesm2022/input.mjs +1 -1
  41. package/fesm2022/menu.mjs +5 -152
  42. package/fesm2022/menu.mjs.map +1 -1
  43. package/fesm2022/paginator.mjs +7 -27
  44. package/fesm2022/paginator.mjs.map +1 -1
  45. package/fesm2022/progress-bar.mjs +13 -16
  46. package/fesm2022/progress-bar.mjs.map +1 -1
  47. package/fesm2022/progress-spinner.mjs +2 -10
  48. package/fesm2022/progress-spinner.mjs.map +1 -1
  49. package/fesm2022/radio.mjs +4 -12
  50. package/fesm2022/radio.mjs.map +1 -1
  51. package/fesm2022/ripple.mjs +2 -2
  52. package/fesm2022/ripple.mjs.map +1 -1
  53. package/fesm2022/select.mjs +1293 -90
  54. package/fesm2022/select.mjs.map +1 -1
  55. package/fesm2022/sidenav.mjs +2 -88
  56. package/fesm2022/sidenav.mjs.map +1 -1
  57. package/fesm2022/snack-bar.mjs +2 -80
  58. package/fesm2022/snack-bar.mjs.map +1 -1
  59. package/fesm2022/sort.mjs +3 -329
  60. package/fesm2022/sort.mjs.map +1 -1
  61. package/fesm2022/stepper.mjs +4 -171
  62. package/fesm2022/stepper.mjs.map +1 -1
  63. package/fesm2022/tabs.mjs +8 -153
  64. package/fesm2022/tabs.mjs.map +1 -1
  65. package/fesm2022/tooltip.mjs +21 -53
  66. package/fesm2022/tooltip.mjs.map +1 -1
  67. package/fesm2022/tooltip2.mjs +6 -33
  68. package/fesm2022/tooltip2.mjs.map +1 -1
  69. package/form-field/index.d.ts +1 -11
  70. package/icon/index.d.ts +2 -2
  71. package/icon-module.d.d.ts +1 -7
  72. package/icon-registry.d.d.ts +2 -18
  73. package/menu/index.d.ts +1 -42
  74. package/package.json +2 -2
  75. package/paginator/index.d.ts +3 -3
  76. package/paginator.d.d.ts +2 -18
  77. package/progress-bar/index.d.ts +1 -7
  78. package/progress-spinner/index.d.ts +1 -1
  79. package/progress-spinner.d.d.ts +3 -9
  80. package/radio/index.d.ts +1 -7
  81. package/ripple.d.d.ts +3 -3
  82. package/schematics/ng-add/index.js +1 -1
  83. package/select/index.d.ts +439 -27
  84. package/sidenav/index.d.ts +1 -17
  85. package/snack-bar/index.d.ts +1 -17
  86. package/sort/index.d.ts +2 -33
  87. package/stepper/index.d.ts +2 -29
  88. package/tabs/index.d.ts +1 -18
  89. package/tooltip/index.d.ts +302 -16
  90. package/fesm2022/dialog-module.mjs +0 -891
  91. package/fesm2022/dialog-module.mjs.map +0 -1
  92. package/fesm2022/form-field-module.mjs +0 -39
  93. package/fesm2022/form-field-module.mjs.map +0 -1
  94. package/fesm2022/select-module.mjs +0 -1318
  95. package/fesm2022/select-module.mjs.map +0 -1
  96. package/fesm2022/tooltip-module.mjs +0 -24
  97. package/fesm2022/tooltip-module.mjs.map +0 -1
  98. package/select-module.d.d.ts +0 -456
  99. package/tooltip-module.d.d.ts +0 -329
@@ -1,891 +0,0 @@
1
- import { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';
2
- import { createBlockScrollStrategy, createGlobalPositionStrategy, OverlayModule } from '@angular/cdk/overlay';
3
- import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
4
- import * as i0 from '@angular/core';
5
- import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, inject, Injector, Injectable, ElementRef, Directive, Input, NgModule } from '@angular/core';
6
- import { coerceNumberProperty } from '@angular/cdk/coercion';
7
- import { _animationsDisabled } from './animation.mjs';
8
- import { Subject, merge, defer } from 'rxjs';
9
- import { filter, take, startWith } from 'rxjs/operators';
10
- import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
11
- import { _IdGenerator } from '@angular/cdk/a11y';
12
- import * as i1 from '@angular/cdk/scrolling';
13
- import { CdkScrollable } from '@angular/cdk/scrolling';
14
- import { MatCommonModule } from './common-module.mjs';
15
-
16
- /**
17
- * Configuration for opening a modal dialog with the MatDialog service.
18
- */
19
- class MatDialogConfig {
20
- /**
21
- * Where the attached component should live in Angular's *logical* component tree.
22
- * This affects what is available for injection and the change detection order for the
23
- * component instantiated inside of the dialog. This does not affect where the dialog
24
- * content will be rendered.
25
- */
26
- viewContainerRef;
27
- /**
28
- * Injector used for the instantiation of the component to be attached. If provided,
29
- * takes precedence over the injector indirectly provided by `ViewContainerRef`.
30
- */
31
- injector;
32
- /** ID for the dialog. If omitted, a unique one will be generated. */
33
- id;
34
- /** The ARIA role of the dialog element. */
35
- role = 'dialog';
36
- /** Custom class for the overlay pane. */
37
- panelClass = '';
38
- /** Whether the dialog has a backdrop. */
39
- hasBackdrop = true;
40
- /** Custom class for the backdrop. */
41
- backdropClass = '';
42
- /** Whether the user can use escape or clicking on the backdrop to close the modal. */
43
- disableClose = false;
44
- /** Function used to determine whether the dialog is allowed to close. */
45
- closePredicate;
46
- /** Width of the dialog. */
47
- width = '';
48
- /** Height of the dialog. */
49
- height = '';
50
- /** Min-width of the dialog. If a number is provided, assumes pixel units. */
51
- minWidth;
52
- /** Min-height of the dialog. If a number is provided, assumes pixel units. */
53
- minHeight;
54
- /** Max-width of the dialog. If a number is provided, assumes pixel units. */
55
- maxWidth;
56
- /** Max-height of the dialog. If a number is provided, assumes pixel units. */
57
- maxHeight;
58
- /** Position overrides. */
59
- position;
60
- /** Data being injected into the child component. */
61
- data = null;
62
- /** Layout direction for the dialog's content. */
63
- direction;
64
- /** ID of the element that describes the dialog. */
65
- ariaDescribedBy = null;
66
- /** ID of the element that labels the dialog. */
67
- ariaLabelledBy = null;
68
- /** Aria label to assign to the dialog element. */
69
- ariaLabel = null;
70
- /**
71
- * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
72
- * because it can interfere with other overlay-based components (e.g. `mat-select`) and because
73
- * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
74
- */
75
- ariaModal = false;
76
- /**
77
- * Where the dialog should focus on open.
78
- * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
79
- * AutoFocusTarget instead.
80
- */
81
- autoFocus = 'first-tabbable';
82
- /**
83
- * Whether the dialog should restore focus to the
84
- * previously-focused element, after it's closed.
85
- */
86
- restoreFocus = true;
87
- /** Whether to wait for the opening animation to finish before trapping focus. */
88
- delayFocusTrap = true;
89
- /** Scroll strategy to be used for the dialog. */
90
- scrollStrategy;
91
- /**
92
- * Whether the dialog should close when the user goes backwards/forwards in history.
93
- * Note that this usually doesn't include clicking on links (unless the user is using
94
- * the `HashLocationStrategy`).
95
- */
96
- closeOnNavigation = true;
97
- /**
98
- * Duration of the enter animation in ms.
99
- * Should be a number, string type is deprecated.
100
- * @breaking-change 17.0.0 Remove string signature.
101
- */
102
- enterAnimationDuration;
103
- /**
104
- * Duration of the exit animation in ms.
105
- * Should be a number, string type is deprecated.
106
- * @breaking-change 17.0.0 Remove string signature.
107
- */
108
- exitAnimationDuration;
109
- }
110
-
111
- /** Class added when the dialog is open. */
112
- const OPEN_CLASS = 'mdc-dialog--open';
113
- /** Class added while the dialog is opening. */
114
- const OPENING_CLASS = 'mdc-dialog--opening';
115
- /** Class added while the dialog is closing. */
116
- const CLOSING_CLASS = 'mdc-dialog--closing';
117
- /** Duration of the opening animation in milliseconds. */
118
- const OPEN_ANIMATION_DURATION = 150;
119
- /** Duration of the closing animation in milliseconds. */
120
- const CLOSE_ANIMATION_DURATION = 75;
121
- class MatDialogContainer extends CdkDialogContainer {
122
- /** Emits when an animation state changes. */
123
- _animationStateChanged = new EventEmitter();
124
- /** Whether animations are enabled. */
125
- _animationsEnabled = !_animationsDisabled();
126
- /** Number of actions projected in the dialog. */
127
- _actionSectionCount = 0;
128
- /** Host element of the dialog container component. */
129
- _hostElement = this._elementRef.nativeElement;
130
- /** Duration of the dialog open animation. */
131
- _enterAnimationDuration = this._animationsEnabled
132
- ? (parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION)
133
- : 0;
134
- /** Duration of the dialog close animation. */
135
- _exitAnimationDuration = this._animationsEnabled
136
- ? (parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION)
137
- : 0;
138
- /** Current timer for dialog animations. */
139
- _animationTimer = null;
140
- _contentAttached() {
141
- // Delegate to the original dialog-container initialization (i.e. saving the
142
- // previous element, setting up the focus trap and moving focus to the container).
143
- super._contentAttached();
144
- // Note: Usually we would be able to use the MDC dialog foundation here to handle
145
- // the dialog animation for us, but there are a few reasons why we just leverage
146
- // their styles and not use the runtime foundation code:
147
- // 1. Foundation does not allow us to disable animations.
148
- // 2. Foundation contains unnecessary features we don't need and aren't
149
- // tree-shakeable. e.g. background scrim, keyboard event handlers for ESC button.
150
- this._startOpenAnimation();
151
- }
152
- /** Starts the dialog open animation if enabled. */
153
- _startOpenAnimation() {
154
- this._animationStateChanged.emit({ state: 'opening', totalTime: this._enterAnimationDuration });
155
- if (this._animationsEnabled) {
156
- this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._enterAnimationDuration}ms`);
157
- // We need to give the `setProperty` call from above some time to be applied.
158
- // One would expect that the open class is added once the animation finished, but MDC
159
- // uses the open class in combination with the opening class to start the animation.
160
- this._requestAnimationFrame(() => this._hostElement.classList.add(OPENING_CLASS, OPEN_CLASS));
161
- this._waitForAnimationToComplete(this._enterAnimationDuration, this._finishDialogOpen);
162
- }
163
- else {
164
- this._hostElement.classList.add(OPEN_CLASS);
165
- // Note: We could immediately finish the dialog opening here with noop animations,
166
- // but we defer until next tick so that consumers can subscribe to `afterOpened`.
167
- // Executing this immediately would mean that `afterOpened` emits synchronously
168
- // on `dialog.open` before the consumer had a change to subscribe to `afterOpened`.
169
- Promise.resolve().then(() => this._finishDialogOpen());
170
- }
171
- }
172
- /**
173
- * Starts the exit animation of the dialog if enabled. This method is
174
- * called by the dialog ref.
175
- */
176
- _startExitAnimation() {
177
- this._animationStateChanged.emit({ state: 'closing', totalTime: this._exitAnimationDuration });
178
- this._hostElement.classList.remove(OPEN_CLASS);
179
- if (this._animationsEnabled) {
180
- this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._exitAnimationDuration}ms`);
181
- // We need to give the `setProperty` call from above some time to be applied.
182
- this._requestAnimationFrame(() => this._hostElement.classList.add(CLOSING_CLASS));
183
- this._waitForAnimationToComplete(this._exitAnimationDuration, this._finishDialogClose);
184
- }
185
- else {
186
- // This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
187
- // set up before any user can subscribe to the backdrop click. The subscription triggers
188
- // the dialog close and this method synchronously. If we'd synchronously emit the `CLOSED`
189
- // animation state event if animations are disabled, the overlay would be disposed
190
- // immediately and all other subscriptions to `DialogRef#backdropClick` would be silently
191
- // skipped. We work around this by waiting with the dialog close until the next tick when
192
- // all subscriptions have been fired as expected. This is not an ideal solution, but
193
- // there doesn't seem to be any other good way. Alternatives that have been considered:
194
- // 1. Deferring `DialogRef.close`. This could be a breaking change due to a new microtask.
195
- // Also this issue is specific to the MDC implementation where the dialog could
196
- // technically be closed synchronously. In the non-MDC one, Angular animations are used
197
- // and closing always takes at least a tick.
198
- // 2. Ensuring that user subscriptions to `backdropClick`, `keydownEvents` in the dialog
199
- // ref are first. This would solve the issue, but has the risk of memory leaks and also
200
- // doesn't solve the case where consumers call `DialogRef.close` in their subscriptions.
201
- // Based on the fact that this is specific to the MDC-based implementation of the dialog
202
- // animations, the defer is applied here.
203
- Promise.resolve().then(() => this._finishDialogClose());
204
- }
205
- }
206
- /**
207
- * Updates the number action sections.
208
- * @param delta Increase/decrease in the number of sections.
209
- */
210
- _updateActionSectionCount(delta) {
211
- this._actionSectionCount += delta;
212
- this._changeDetectorRef.markForCheck();
213
- }
214
- /**
215
- * Completes the dialog open by clearing potential animation classes, trapping
216
- * focus and emitting an opened event.
217
- */
218
- _finishDialogOpen = () => {
219
- this._clearAnimationClasses();
220
- this._openAnimationDone(this._enterAnimationDuration);
221
- };
222
- /**
223
- * Completes the dialog close by clearing potential animation classes, restoring
224
- * focus and emitting a closed event.
225
- */
226
- _finishDialogClose = () => {
227
- this._clearAnimationClasses();
228
- this._animationStateChanged.emit({ state: 'closed', totalTime: this._exitAnimationDuration });
229
- };
230
- /** Clears all dialog animation classes. */
231
- _clearAnimationClasses() {
232
- this._hostElement.classList.remove(OPENING_CLASS, CLOSING_CLASS);
233
- }
234
- _waitForAnimationToComplete(duration, callback) {
235
- if (this._animationTimer !== null) {
236
- clearTimeout(this._animationTimer);
237
- }
238
- // Note that we want this timer to run inside the NgZone, because we want
239
- // the related events like `afterClosed` to be inside the zone as well.
240
- this._animationTimer = setTimeout(callback, duration);
241
- }
242
- /** Runs a callback in `requestAnimationFrame`, if available. */
243
- _requestAnimationFrame(callback) {
244
- this._ngZone.runOutsideAngular(() => {
245
- if (typeof requestAnimationFrame === 'function') {
246
- requestAnimationFrame(callback);
247
- }
248
- else {
249
- callback();
250
- }
251
- });
252
- }
253
- _captureInitialFocus() {
254
- if (!this._config.delayFocusTrap) {
255
- this._trapFocus();
256
- }
257
- }
258
- /**
259
- * Callback for when the open dialog animation has finished. Intended to
260
- * be called by sub-classes that use different animation implementations.
261
- */
262
- _openAnimationDone(totalTime) {
263
- if (this._config.delayFocusTrap) {
264
- this._trapFocus();
265
- }
266
- this._animationStateChanged.next({ state: 'opened', totalTime });
267
- }
268
- ngOnDestroy() {
269
- super.ngOnDestroy();
270
- if (this._animationTimer !== null) {
271
- clearTimeout(this._animationTimer);
272
- }
273
- }
274
- attachComponentPortal(portal) {
275
- // When a component is passed into the dialog, the host element interrupts
276
- // the `display:flex` from affecting the dialog title, content, and
277
- // actions. To fix this, we make the component host `display: contents` by
278
- // marking its host with the `mat-mdc-dialog-component-host` class.
279
- //
280
- // Note that this problem does not exist when a template ref is used since
281
- // the title, contents, and actions are then nested directly under the
282
- // dialog surface.
283
- const ref = super.attachComponentPortal(portal);
284
- ref.location.nativeElement.classList.add('mat-mdc-dialog-component-host');
285
- return ref;
286
- }
287
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
288
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogContainer, isStandalone: true, selector: "mat-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class._mat-animation-noopable": "!_animationsEnabled", "class.mat-mdc-dialog-container-with-actions": "_actionSectionCount > 0" }, classAttribute: "mat-mdc-dialog-container mdc-dialog" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mat-mdc-dialog-inner-container mdc-dialog__container\">\n <div class=\"mat-mdc-dialog-surface mdc-dialog__surface\">\n <ng-template cdkPortalOutlet />\n </div>\n</div>\n", styles: [".mat-mdc-dialog-container{width:100%;height:100%;display:block;box-sizing:border-box;max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;outline:0}.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-max-width, 560px);min-width:var(--mat-dialog-container-min-width, 280px)}@media(max-width: 599px){.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-small-max-width, calc(100vw - 32px))}}.mat-mdc-dialog-inner-container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;opacity:0;transition:opacity linear var(--mat-dialog-transition-duration, 0ms);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit}.mdc-dialog--closing .mat-mdc-dialog-inner-container{transition:opacity 75ms linear;transform:none}.mdc-dialog--open .mat-mdc-dialog-inner-container{opacity:1}._mat-animation-noopable .mat-mdc-dialog-inner-container{transition:none}.mat-mdc-dialog-surface{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;width:100%;height:100%;position:relative;overflow-y:auto;outline:0;transform:scale(0.8);transition:transform var(--mat-dialog-transition-duration, 0ms) cubic-bezier(0, 0, 0.2, 1);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;box-shadow:var(--mat-dialog-container-elevation-shadow, none);border-radius:var(--mat-dialog-container-shape, var(--mat-sys-corner-extra-large, 4px));background-color:var(--mat-dialog-container-color, var(--mat-sys-surface, white))}[dir=rtl] .mat-mdc-dialog-surface{text-align:right}.mdc-dialog--open .mat-mdc-dialog-surface,.mdc-dialog--closing .mat-mdc-dialog-surface{transform:none}._mat-animation-noopable .mat-mdc-dialog-surface{transition:none}.mat-mdc-dialog-surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}.mat-mdc-dialog-title{display:block;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:var(--mat-dialog-headline-padding, 6px 24px 13px)}.mat-mdc-dialog-title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}[dir=rtl] .mat-mdc-dialog-title{text-align:right}.mat-mdc-dialog-container .mat-mdc-dialog-title{color:var(--mat-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));font-family:var(--mat-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));line-height:var(--mat-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));font-size:var(--mat-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));font-weight:var(--mat-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));letter-spacing:var(--mat-dialog-subhead-tracking, var(--mat-sys-headline-small-tracking, 0.03125em))}.mat-mdc-dialog-content{display:block;flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;max-height:65vh}.mat-mdc-dialog-content>:first-child{margin-top:0}.mat-mdc-dialog-content>:last-child{margin-bottom:0}.mat-mdc-dialog-container .mat-mdc-dialog-content{color:var(--mat-dialog-supporting-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)));font-family:var(--mat-dialog-supporting-text-font, var(--mat-sys-body-medium-font, inherit));line-height:var(--mat-dialog-supporting-text-line-height, var(--mat-sys-body-medium-line-height, 1.5rem));font-size:var(--mat-dialog-supporting-text-size, var(--mat-sys-body-medium-size, 1rem));font-weight:var(--mat-dialog-supporting-text-weight, var(--mat-sys-body-medium-weight, 400));letter-spacing:var(--mat-dialog-supporting-text-tracking, var(--mat-sys-body-medium-tracking, 0.03125em))}.mat-mdc-dialog-container .mat-mdc-dialog-content{padding:var(--mat-dialog-content-padding, 20px 24px)}.mat-mdc-dialog-container-with-actions .mat-mdc-dialog-content{padding:var(--mat-dialog-with-actions-content-padding, 20px 24px 0)}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:0}.mat-mdc-dialog-actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;box-sizing:border-box;min-height:52px;margin:0;border-top:1px solid rgba(0,0,0,0);padding:var(--mat-dialog-actions-padding, 16px 24px);justify-content:var(--mat-dialog-actions-alignment, flex-end)}@media(forced-colors: active){.mat-mdc-dialog-actions{border-top-color:CanvasText}}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-start,.mat-mdc-dialog-actions[align=start]{justify-content:start}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-center,.mat-mdc-dialog-actions[align=center]{justify-content:center}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,.mat-mdc-dialog-actions[align=end]{justify-content:flex-end}.mat-mdc-dialog-actions .mat-button-base+.mat-button-base,.mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-mdc-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}.mat-mdc-dialog-component-host{display:contents}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
289
- }
290
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogContainer, decorators: [{
291
- type: Component,
292
- args: [{ selector: 'mat-dialog-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [CdkPortalOutlet], host: {
293
- 'class': 'mat-mdc-dialog-container mdc-dialog',
294
- 'tabindex': '-1',
295
- '[attr.aria-modal]': '_config.ariaModal',
296
- '[id]': '_config.id',
297
- '[attr.role]': '_config.role',
298
- '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
299
- '[attr.aria-label]': '_config.ariaLabel',
300
- '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
301
- '[class._mat-animation-noopable]': '!_animationsEnabled',
302
- '[class.mat-mdc-dialog-container-with-actions]': '_actionSectionCount > 0',
303
- }, template: "<div class=\"mat-mdc-dialog-inner-container mdc-dialog__container\">\n <div class=\"mat-mdc-dialog-surface mdc-dialog__surface\">\n <ng-template cdkPortalOutlet />\n </div>\n</div>\n", styles: [".mat-mdc-dialog-container{width:100%;height:100%;display:block;box-sizing:border-box;max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;outline:0}.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-max-width, 560px);min-width:var(--mat-dialog-container-min-width, 280px)}@media(max-width: 599px){.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-small-max-width, calc(100vw - 32px))}}.mat-mdc-dialog-inner-container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;opacity:0;transition:opacity linear var(--mat-dialog-transition-duration, 0ms);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit}.mdc-dialog--closing .mat-mdc-dialog-inner-container{transition:opacity 75ms linear;transform:none}.mdc-dialog--open .mat-mdc-dialog-inner-container{opacity:1}._mat-animation-noopable .mat-mdc-dialog-inner-container{transition:none}.mat-mdc-dialog-surface{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;width:100%;height:100%;position:relative;overflow-y:auto;outline:0;transform:scale(0.8);transition:transform var(--mat-dialog-transition-duration, 0ms) cubic-bezier(0, 0, 0.2, 1);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;box-shadow:var(--mat-dialog-container-elevation-shadow, none);border-radius:var(--mat-dialog-container-shape, var(--mat-sys-corner-extra-large, 4px));background-color:var(--mat-dialog-container-color, var(--mat-sys-surface, white))}[dir=rtl] .mat-mdc-dialog-surface{text-align:right}.mdc-dialog--open .mat-mdc-dialog-surface,.mdc-dialog--closing .mat-mdc-dialog-surface{transform:none}._mat-animation-noopable .mat-mdc-dialog-surface{transition:none}.mat-mdc-dialog-surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}.mat-mdc-dialog-title{display:block;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:var(--mat-dialog-headline-padding, 6px 24px 13px)}.mat-mdc-dialog-title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}[dir=rtl] .mat-mdc-dialog-title{text-align:right}.mat-mdc-dialog-container .mat-mdc-dialog-title{color:var(--mat-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));font-family:var(--mat-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));line-height:var(--mat-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));font-size:var(--mat-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));font-weight:var(--mat-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));letter-spacing:var(--mat-dialog-subhead-tracking, var(--mat-sys-headline-small-tracking, 0.03125em))}.mat-mdc-dialog-content{display:block;flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;max-height:65vh}.mat-mdc-dialog-content>:first-child{margin-top:0}.mat-mdc-dialog-content>:last-child{margin-bottom:0}.mat-mdc-dialog-container .mat-mdc-dialog-content{color:var(--mat-dialog-supporting-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)));font-family:var(--mat-dialog-supporting-text-font, var(--mat-sys-body-medium-font, inherit));line-height:var(--mat-dialog-supporting-text-line-height, var(--mat-sys-body-medium-line-height, 1.5rem));font-size:var(--mat-dialog-supporting-text-size, var(--mat-sys-body-medium-size, 1rem));font-weight:var(--mat-dialog-supporting-text-weight, var(--mat-sys-body-medium-weight, 400));letter-spacing:var(--mat-dialog-supporting-text-tracking, var(--mat-sys-body-medium-tracking, 0.03125em))}.mat-mdc-dialog-container .mat-mdc-dialog-content{padding:var(--mat-dialog-content-padding, 20px 24px)}.mat-mdc-dialog-container-with-actions .mat-mdc-dialog-content{padding:var(--mat-dialog-with-actions-content-padding, 20px 24px 0)}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:0}.mat-mdc-dialog-actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;box-sizing:border-box;min-height:52px;margin:0;border-top:1px solid rgba(0,0,0,0);padding:var(--mat-dialog-actions-padding, 16px 24px);justify-content:var(--mat-dialog-actions-alignment, flex-end)}@media(forced-colors: active){.mat-mdc-dialog-actions{border-top-color:CanvasText}}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-start,.mat-mdc-dialog-actions[align=start]{justify-content:start}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-center,.mat-mdc-dialog-actions[align=center]{justify-content:center}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,.mat-mdc-dialog-actions[align=end]{justify-content:flex-end}.mat-mdc-dialog-actions .mat-button-base+.mat-button-base,.mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-mdc-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}.mat-mdc-dialog-component-host{display:contents}\n"] }]
304
- }] });
305
- const TRANSITION_DURATION_PROPERTY = '--mat-dialog-transition-duration';
306
- // TODO(mmalerba): Remove this function after animation durations are required
307
- // to be numbers.
308
- /**
309
- * Converts a CSS time string to a number in ms. If the given time is already a
310
- * number, it is assumed to be in ms.
311
- */
312
- function parseCssTime(time) {
313
- if (time == null) {
314
- return null;
315
- }
316
- if (typeof time === 'number') {
317
- return time;
318
- }
319
- if (time.endsWith('ms')) {
320
- return coerceNumberProperty(time.substring(0, time.length - 2));
321
- }
322
- if (time.endsWith('s')) {
323
- return coerceNumberProperty(time.substring(0, time.length - 1)) * 1000;
324
- }
325
- if (time === '0') {
326
- return 0;
327
- }
328
- return null; // anything else is invalid.
329
- }
330
-
331
- var MatDialogState;
332
- (function (MatDialogState) {
333
- MatDialogState[MatDialogState["OPEN"] = 0] = "OPEN";
334
- MatDialogState[MatDialogState["CLOSING"] = 1] = "CLOSING";
335
- MatDialogState[MatDialogState["CLOSED"] = 2] = "CLOSED";
336
- })(MatDialogState || (MatDialogState = {}));
337
- /**
338
- * Reference to a dialog opened via the MatDialog service.
339
- */
340
- class MatDialogRef {
341
- _ref;
342
- _config;
343
- _containerInstance;
344
- /** The instance of component opened into the dialog. */
345
- componentInstance;
346
- /**
347
- * `ComponentRef` of the component opened into the dialog. Will be
348
- * null when the dialog is opened using a `TemplateRef`.
349
- */
350
- componentRef;
351
- /** Whether the user is allowed to close the dialog. */
352
- disableClose;
353
- /** Unique ID for the dialog. */
354
- id;
355
- /** Subject for notifying the user that the dialog has finished opening. */
356
- _afterOpened = new Subject();
357
- /** Subject for notifying the user that the dialog has started closing. */
358
- _beforeClosed = new Subject();
359
- /** Result to be passed to afterClosed. */
360
- _result;
361
- /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
362
- _closeFallbackTimeout;
363
- /** Current state of the dialog. */
364
- _state = MatDialogState.OPEN;
365
- // TODO(crisbeto): we shouldn't have to declare this property, because `DialogRef.close`
366
- // already has a second `options` parameter that we can use. The problem is that internal tests
367
- // have assertions like `expect(MatDialogRef.close).toHaveBeenCalledWith(foo)` which will break,
368
- // because it'll be called with two arguments by things like `MatDialogClose`.
369
- /** Interaction that caused the dialog to close. */
370
- _closeInteractionType;
371
- constructor(_ref, _config, _containerInstance) {
372
- this._ref = _ref;
373
- this._config = _config;
374
- this._containerInstance = _containerInstance;
375
- this.disableClose = _config.disableClose;
376
- this.id = _ref.id;
377
- // Used to target panels specifically tied to dialogs.
378
- _ref.addPanelClass('mat-mdc-dialog-panel');
379
- // Emit when opening animation completes
380
- _containerInstance._animationStateChanged
381
- .pipe(filter(event => event.state === 'opened'), take(1))
382
- .subscribe(() => {
383
- this._afterOpened.next();
384
- this._afterOpened.complete();
385
- });
386
- // Dispose overlay when closing animation is complete
387
- _containerInstance._animationStateChanged
388
- .pipe(filter(event => event.state === 'closed'), take(1))
389
- .subscribe(() => {
390
- clearTimeout(this._closeFallbackTimeout);
391
- this._finishDialogClose();
392
- });
393
- _ref.overlayRef.detachments().subscribe(() => {
394
- this._beforeClosed.next(this._result);
395
- this._beforeClosed.complete();
396
- this._finishDialogClose();
397
- });
398
- merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)))).subscribe(event => {
399
- if (!this.disableClose) {
400
- event.preventDefault();
401
- _closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');
402
- }
403
- });
404
- }
405
- /**
406
- * Close the dialog.
407
- * @param dialogResult Optional result to return to the dialog opener.
408
- */
409
- close(dialogResult) {
410
- const closePredicate = this._config.closePredicate;
411
- if (closePredicate && !closePredicate(dialogResult, this._config, this.componentInstance)) {
412
- return;
413
- }
414
- this._result = dialogResult;
415
- // Transition the backdrop in parallel to the dialog.
416
- this._containerInstance._animationStateChanged
417
- .pipe(filter(event => event.state === 'closing'), take(1))
418
- .subscribe(event => {
419
- this._beforeClosed.next(dialogResult);
420
- this._beforeClosed.complete();
421
- this._ref.overlayRef.detachBackdrop();
422
- // The logic that disposes of the overlay depends on the exit animation completing, however
423
- // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
424
- // timeout which will clean everything up if the animation hasn't fired within the specified
425
- // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
426
- // vast majority of cases the timeout will have been cleared before it has the chance to fire.
427
- this._closeFallbackTimeout = setTimeout(() => this._finishDialogClose(), event.totalTime + 100);
428
- });
429
- this._state = MatDialogState.CLOSING;
430
- this._containerInstance._startExitAnimation();
431
- }
432
- /**
433
- * Gets an observable that is notified when the dialog is finished opening.
434
- */
435
- afterOpened() {
436
- return this._afterOpened;
437
- }
438
- /**
439
- * Gets an observable that is notified when the dialog is finished closing.
440
- */
441
- afterClosed() {
442
- return this._ref.closed;
443
- }
444
- /**
445
- * Gets an observable that is notified when the dialog has started closing.
446
- */
447
- beforeClosed() {
448
- return this._beforeClosed;
449
- }
450
- /**
451
- * Gets an observable that emits when the overlay's backdrop has been clicked.
452
- */
453
- backdropClick() {
454
- return this._ref.backdropClick;
455
- }
456
- /**
457
- * Gets an observable that emits when keydown events are targeted on the overlay.
458
- */
459
- keydownEvents() {
460
- return this._ref.keydownEvents;
461
- }
462
- /**
463
- * Updates the dialog's position.
464
- * @param position New dialog position.
465
- */
466
- updatePosition(position) {
467
- let strategy = this._ref.config.positionStrategy;
468
- if (position && (position.left || position.right)) {
469
- position.left ? strategy.left(position.left) : strategy.right(position.right);
470
- }
471
- else {
472
- strategy.centerHorizontally();
473
- }
474
- if (position && (position.top || position.bottom)) {
475
- position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
476
- }
477
- else {
478
- strategy.centerVertically();
479
- }
480
- this._ref.updatePosition();
481
- return this;
482
- }
483
- /**
484
- * Updates the dialog's width and height.
485
- * @param width New width of the dialog.
486
- * @param height New height of the dialog.
487
- */
488
- updateSize(width = '', height = '') {
489
- this._ref.updateSize(width, height);
490
- return this;
491
- }
492
- /** Add a CSS class or an array of classes to the overlay pane. */
493
- addPanelClass(classes) {
494
- this._ref.addPanelClass(classes);
495
- return this;
496
- }
497
- /** Remove a CSS class or an array of classes from the overlay pane. */
498
- removePanelClass(classes) {
499
- this._ref.removePanelClass(classes);
500
- return this;
501
- }
502
- /** Gets the current state of the dialog's lifecycle. */
503
- getState() {
504
- return this._state;
505
- }
506
- /**
507
- * Finishes the dialog close by updating the state of the dialog
508
- * and disposing the overlay.
509
- */
510
- _finishDialogClose() {
511
- this._state = MatDialogState.CLOSED;
512
- this._ref.close(this._result, { focusOrigin: this._closeInteractionType });
513
- this.componentInstance = null;
514
- }
515
- }
516
- /**
517
- * Closes the dialog with the specified interaction type. This is currently not part of
518
- * `MatDialogRef` as that would conflict with custom dialog ref mocks provided in tests.
519
- * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.
520
- */
521
- // TODO: Move this back into `MatDialogRef` when we provide an official mock dialog ref.
522
- function _closeDialogVia(ref, interactionType, result) {
523
- ref._closeInteractionType = interactionType;
524
- return ref.close(result);
525
- }
526
-
527
- /** Injection token that can be used to access the data that was passed in to a dialog. */
528
- const MAT_DIALOG_DATA = new InjectionToken('MatMdcDialogData');
529
- /** Injection token that can be used to specify default dialog options. */
530
- const MAT_DIALOG_DEFAULT_OPTIONS = new InjectionToken('mat-mdc-dialog-default-options');
531
- /** Injection token that determines the scroll handling while the dialog is open. */
532
- const MAT_DIALOG_SCROLL_STRATEGY = new InjectionToken('mat-mdc-dialog-scroll-strategy', {
533
- providedIn: 'root',
534
- factory: () => {
535
- const injector = inject(Injector);
536
- return () => createBlockScrollStrategy(injector);
537
- },
538
- });
539
- /**
540
- * Service to open Material Design modal dialogs.
541
- */
542
- class MatDialog {
543
- _defaultOptions = inject(MAT_DIALOG_DEFAULT_OPTIONS, { optional: true });
544
- _scrollStrategy = inject(MAT_DIALOG_SCROLL_STRATEGY);
545
- _parentDialog = inject(MatDialog, { optional: true, skipSelf: true });
546
- _idGenerator = inject(_IdGenerator);
547
- _injector = inject(Injector);
548
- _dialog = inject(Dialog);
549
- _animationsDisabled = _animationsDisabled();
550
- _openDialogsAtThisLevel = [];
551
- _afterAllClosedAtThisLevel = new Subject();
552
- _afterOpenedAtThisLevel = new Subject();
553
- dialogConfigClass = MatDialogConfig;
554
- _dialogRefConstructor;
555
- _dialogContainerType;
556
- _dialogDataToken;
557
- /** Keeps track of the currently-open dialogs. */
558
- get openDialogs() {
559
- return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
560
- }
561
- /** Stream that emits when a dialog has been opened. */
562
- get afterOpened() {
563
- return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
564
- }
565
- _getAfterAllClosed() {
566
- const parent = this._parentDialog;
567
- return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
568
- }
569
- /**
570
- * Stream that emits when all open dialog have finished closing.
571
- * Will emit on subscribe if there are no open dialogs to begin with.
572
- */
573
- afterAllClosed = defer(() => this.openDialogs.length
574
- ? this._getAfterAllClosed()
575
- : this._getAfterAllClosed().pipe(startWith(undefined)));
576
- constructor() {
577
- this._dialogRefConstructor = MatDialogRef;
578
- this._dialogContainerType = MatDialogContainer;
579
- this._dialogDataToken = MAT_DIALOG_DATA;
580
- }
581
- open(componentOrTemplateRef, config) {
582
- let dialogRef;
583
- config = { ...(this._defaultOptions || new MatDialogConfig()), ...config };
584
- config.id = config.id || this._idGenerator.getId('mat-mdc-dialog-');
585
- config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
586
- const cdkRef = this._dialog.open(componentOrTemplateRef, {
587
- ...config,
588
- positionStrategy: createGlobalPositionStrategy(this._injector)
589
- .centerHorizontally()
590
- .centerVertically(),
591
- // Disable closing since we need to sync it up to the animation ourselves.
592
- disableClose: true,
593
- // Closing is tied to our animation so the close predicate has to be implemented separately.
594
- closePredicate: undefined,
595
- // Disable closing on destroy, because this service cleans up its open dialogs as well.
596
- // We want to do the cleanup here, rather than the CDK service, because the CDK destroys
597
- // the dialogs immediately whereas we want it to wait for the animations to finish.
598
- closeOnDestroy: false,
599
- // Disable closing on detachments so that we can sync up the animation.
600
- // The Material dialog ref handles this manually.
601
- closeOnOverlayDetachments: false,
602
- disableAnimations: this._animationsDisabled ||
603
- config.enterAnimationDuration?.toLocaleString() === '0' ||
604
- config.exitAnimationDuration?.toString() === '0',
605
- container: {
606
- type: this._dialogContainerType,
607
- providers: () => [
608
- // Provide our config as the CDK config as well since it has the same interface as the
609
- // CDK one, but it contains the actual values passed in by the user for things like
610
- // `disableClose` which we disable for the CDK dialog since we handle it ourselves.
611
- { provide: this.dialogConfigClass, useValue: config },
612
- { provide: DialogConfig, useValue: config },
613
- ],
614
- },
615
- templateContext: () => ({ dialogRef }),
616
- providers: (ref, cdkConfig, dialogContainer) => {
617
- dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);
618
- dialogRef.updatePosition(config?.position);
619
- return [
620
- { provide: this._dialogContainerType, useValue: dialogContainer },
621
- { provide: this._dialogDataToken, useValue: cdkConfig.data },
622
- { provide: this._dialogRefConstructor, useValue: dialogRef },
623
- ];
624
- },
625
- });
626
- // This can't be assigned in the `providers` callback, because
627
- // the instance hasn't been assigned to the CDK ref yet.
628
- dialogRef.componentRef = cdkRef.componentRef;
629
- dialogRef.componentInstance = cdkRef.componentInstance;
630
- this.openDialogs.push(dialogRef);
631
- this.afterOpened.next(dialogRef);
632
- dialogRef.afterClosed().subscribe(() => {
633
- const index = this.openDialogs.indexOf(dialogRef);
634
- if (index > -1) {
635
- this.openDialogs.splice(index, 1);
636
- if (!this.openDialogs.length) {
637
- this._getAfterAllClosed().next();
638
- }
639
- }
640
- });
641
- return dialogRef;
642
- }
643
- /**
644
- * Closes all of the currently-open dialogs.
645
- */
646
- closeAll() {
647
- this._closeDialogs(this.openDialogs);
648
- }
649
- /**
650
- * Finds an open dialog by its id.
651
- * @param id ID to use when looking up the dialog.
652
- */
653
- getDialogById(id) {
654
- return this.openDialogs.find(dialog => dialog.id === id);
655
- }
656
- ngOnDestroy() {
657
- // Only close the dialogs at this level on destroy
658
- // since the parent service may still be active.
659
- this._closeDialogs(this._openDialogsAtThisLevel);
660
- this._afterAllClosedAtThisLevel.complete();
661
- this._afterOpenedAtThisLevel.complete();
662
- }
663
- _closeDialogs(dialogs) {
664
- let i = dialogs.length;
665
- while (i--) {
666
- dialogs[i].close();
667
- }
668
- }
669
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
670
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialog, providedIn: 'root' });
671
- }
672
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialog, decorators: [{
673
- type: Injectable,
674
- args: [{ providedIn: 'root' }]
675
- }], ctorParameters: () => [] });
676
-
677
- /**
678
- * Button that will close the current dialog.
679
- */
680
- class MatDialogClose {
681
- dialogRef = inject(MatDialogRef, { optional: true });
682
- _elementRef = inject(ElementRef);
683
- _dialog = inject(MatDialog);
684
- /** Screen-reader label for the button. */
685
- ariaLabel;
686
- /** Default to "button" to prevents accidental form submits. */
687
- type = 'button';
688
- /** Dialog close input. */
689
- dialogResult;
690
- _matDialogClose;
691
- constructor() { }
692
- ngOnInit() {
693
- if (!this.dialogRef) {
694
- // When this directive is included in a dialog via TemplateRef (rather than being
695
- // in a Component), the DialogRef isn't available via injection because embedded
696
- // views cannot be given a custom injector. Instead, we look up the DialogRef by
697
- // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
698
- // be resolved at constructor time.
699
- this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
700
- }
701
- }
702
- ngOnChanges(changes) {
703
- const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];
704
- if (proxiedChange) {
705
- this.dialogResult = proxiedChange.currentValue;
706
- }
707
- }
708
- _onButtonClick(event) {
709
- // Determinate the focus origin using the click event, because using the FocusMonitor will
710
- // result in incorrect origins. Most of the time, close buttons will be auto focused in the
711
- // dialog, and therefore clicking the button won't result in a focus change. This means that
712
- // the FocusMonitor won't detect any origin change, and will always output `program`.
713
- _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
714
- }
715
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
716
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogClose, isStandalone: true, selector: "[mat-dialog-close], [matDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["mat-dialog-close", "dialogResult"], _matDialogClose: ["matDialogClose", "_matDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["matDialogClose"], usesOnChanges: true, ngImport: i0 });
717
- }
718
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogClose, decorators: [{
719
- type: Directive,
720
- args: [{
721
- selector: '[mat-dialog-close], [matDialogClose]',
722
- exportAs: 'matDialogClose',
723
- host: {
724
- '(click)': '_onButtonClick($event)',
725
- '[attr.aria-label]': 'ariaLabel || null',
726
- '[attr.type]': 'type',
727
- },
728
- }]
729
- }], ctorParameters: () => [], propDecorators: { ariaLabel: [{
730
- type: Input,
731
- args: ['aria-label']
732
- }], type: [{
733
- type: Input
734
- }], dialogResult: [{
735
- type: Input,
736
- args: ['mat-dialog-close']
737
- }], _matDialogClose: [{
738
- type: Input,
739
- args: ['matDialogClose']
740
- }] } });
741
- class MatDialogLayoutSection {
742
- _dialogRef = inject(MatDialogRef, { optional: true });
743
- _elementRef = inject(ElementRef);
744
- _dialog = inject(MatDialog);
745
- constructor() { }
746
- ngOnInit() {
747
- if (!this._dialogRef) {
748
- this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);
749
- }
750
- if (this._dialogRef) {
751
- Promise.resolve().then(() => {
752
- this._onAdd();
753
- });
754
- }
755
- }
756
- ngOnDestroy() {
757
- // Note: we null check because there are some internal
758
- // tests that are mocking out `MatDialogRef` incorrectly.
759
- const instance = this._dialogRef?._containerInstance;
760
- if (instance) {
761
- Promise.resolve().then(() => {
762
- this._onRemove();
763
- });
764
- }
765
- }
766
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogLayoutSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
767
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogLayoutSection, isStandalone: true, ngImport: i0 });
768
- }
769
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogLayoutSection, decorators: [{
770
- type: Directive
771
- }], ctorParameters: () => [] });
772
- /**
773
- * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
774
- */
775
- class MatDialogTitle extends MatDialogLayoutSection {
776
- id = inject(_IdGenerator).getId('mat-mdc-dialog-title-');
777
- _onAdd() {
778
- // Note: we null check the queue, because there are some internal
779
- // tests that are mocking out `MatDialogRef` incorrectly.
780
- this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
781
- }
782
- _onRemove() {
783
- this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
784
- }
785
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
786
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogTitle, isStandalone: true, selector: "[mat-dialog-title], [matDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id" }, classAttribute: "mat-mdc-dialog-title mdc-dialog__title" }, exportAs: ["matDialogTitle"], usesInheritance: true, ngImport: i0 });
787
- }
788
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogTitle, decorators: [{
789
- type: Directive,
790
- args: [{
791
- selector: '[mat-dialog-title], [matDialogTitle]',
792
- exportAs: 'matDialogTitle',
793
- host: {
794
- 'class': 'mat-mdc-dialog-title mdc-dialog__title',
795
- '[id]': 'id',
796
- },
797
- }]
798
- }], propDecorators: { id: [{
799
- type: Input
800
- }] } });
801
- /**
802
- * Scrollable content container of a dialog.
803
- */
804
- class MatDialogContent {
805
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
806
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogContent, isStandalone: true, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]", host: { classAttribute: "mat-mdc-dialog-content mdc-dialog__content" }, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 });
807
- }
808
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogContent, decorators: [{
809
- type: Directive,
810
- args: [{
811
- selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
812
- host: { 'class': 'mat-mdc-dialog-content mdc-dialog__content' },
813
- hostDirectives: [CdkScrollable],
814
- }]
815
- }] });
816
- /**
817
- * Container for the bottom action buttons in a dialog.
818
- * Stays fixed to the bottom when scrolling.
819
- */
820
- class MatDialogActions extends MatDialogLayoutSection {
821
- /**
822
- * Horizontal alignment of action buttons.
823
- */
824
- align;
825
- _onAdd() {
826
- this._dialogRef._containerInstance?._updateActionSectionCount?.(1);
827
- }
828
- _onRemove() {
829
- this._dialogRef._containerInstance?._updateActionSectionCount?.(-1);
830
- }
831
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
832
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: MatDialogActions, isStandalone: true, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: { align: "align" }, host: { properties: { "class.mat-mdc-dialog-actions-align-start": "align === \"start\"", "class.mat-mdc-dialog-actions-align-center": "align === \"center\"", "class.mat-mdc-dialog-actions-align-end": "align === \"end\"" }, classAttribute: "mat-mdc-dialog-actions mdc-dialog__actions" }, usesInheritance: true, ngImport: i0 });
833
- }
834
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogActions, decorators: [{
835
- type: Directive,
836
- args: [{
837
- selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
838
- host: {
839
- 'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
840
- '[class.mat-mdc-dialog-actions-align-start]': 'align === "start"',
841
- '[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
842
- '[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
843
- },
844
- }]
845
- }], propDecorators: { align: [{
846
- type: Input
847
- }] } });
848
- /**
849
- * Finds the closest MatDialogRef to an element by looking at the DOM.
850
- * @param element Element relative to which to look for a dialog.
851
- * @param openDialogs References to the currently-open dialogs.
852
- */
853
- function getClosestDialog(element, openDialogs) {
854
- let parent = element.nativeElement.parentElement;
855
- while (parent && !parent.classList.contains('mat-mdc-dialog-container')) {
856
- parent = parent.parentElement;
857
- }
858
- return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;
859
- }
860
-
861
- const DIRECTIVES = [
862
- MatDialogContainer,
863
- MatDialogClose,
864
- MatDialogTitle,
865
- MatDialogActions,
866
- MatDialogContent,
867
- ];
868
- class MatDialogModule {
869
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
870
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogModule, imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatDialogContainer,
871
- MatDialogClose,
872
- MatDialogTitle,
873
- MatDialogActions,
874
- MatDialogContent], exports: [MatCommonModule, MatDialogContainer,
875
- MatDialogClose,
876
- MatDialogTitle,
877
- MatDialogActions,
878
- MatDialogContent] });
879
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogModule, providers: [MatDialog], imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatCommonModule] });
880
- }
881
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatDialogModule, decorators: [{
882
- type: NgModule,
883
- args: [{
884
- imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, ...DIRECTIVES],
885
- exports: [MatCommonModule, ...DIRECTIVES],
886
- providers: [MatDialog],
887
- }]
888
- }] });
889
-
890
- export { MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MatDialog, MatDialogActions, MatDialogClose, MatDialogConfig, MatDialogContainer, MatDialogContent, MatDialogModule, MatDialogRef, MatDialogState, MatDialogTitle, _closeDialogVia };
891
- //# sourceMappingURL=dialog-module.mjs.map