@angular/cdk 21.0.0-next.9 → 21.0.0-rc.0
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.
- package/_adev_assets/cdk_drag_drop.json +13 -12
- package/_adev_assets/cdk_testing.json +9 -9
- package/_adev_assets/cdk_testing_protractor.json +1 -1
- package/_adev_assets/cdk_testing_selenium_webdriver.json +1 -1
- package/_adev_assets/cdk_testing_testbed.json +1 -1
- package/fesm2022/_a11y-module-chunk.mjs +755 -869
- package/fesm2022/_a11y-module-chunk.mjs.map +1 -1
- package/fesm2022/_activedescendant-key-manager-chunk.mjs +8 -8
- package/fesm2022/_activedescendant-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_array-chunk.mjs +1 -1
- package/fesm2022/_array-chunk.mjs.map +1 -1
- package/fesm2022/_breakpoints-observer-chunk.mjs +149 -152
- package/fesm2022/_breakpoints-observer-chunk.mjs.map +1 -1
- package/fesm2022/_css-pixel-value-chunk.mjs +4 -5
- package/fesm2022/_css-pixel-value-chunk.mjs.map +1 -1
- package/fesm2022/_data-source-chunk.mjs +2 -8
- package/fesm2022/_data-source-chunk.mjs.map +1 -1
- package/fesm2022/_directionality-chunk.mjs +54 -54
- package/fesm2022/_directionality-chunk.mjs.map +1 -1
- package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs +25 -36
- package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs.map +1 -1
- package/fesm2022/_element-chunk.mjs +6 -17
- package/fesm2022/_element-chunk.mjs.map +1 -1
- package/fesm2022/_fake-event-detection-chunk.mjs +3 -17
- package/fesm2022/_fake-event-detection-chunk.mjs.map +1 -1
- package/fesm2022/_focus-key-manager-chunk.mjs +10 -14
- package/fesm2022/_focus-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_focus-monitor-chunk.mjs +376 -566
- package/fesm2022/_focus-monitor-chunk.mjs.map +1 -1
- package/fesm2022/_id-generator-chunk.mjs +36 -27
- package/fesm2022/_id-generator-chunk.mjs.map +1 -1
- package/fesm2022/_keycodes-chunk.mjs +9 -9
- package/fesm2022/_keycodes-chunk.mjs.map +1 -1
- package/fesm2022/_list-key-manager-chunk.mjs +248 -336
- package/fesm2022/_list-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_overlay-module-chunk.mjs +2534 -2948
- package/fesm2022/_overlay-module-chunk.mjs.map +1 -1
- package/fesm2022/_passive-listeners-chunk.mjs +10 -22
- package/fesm2022/_passive-listeners-chunk.mjs.map +1 -1
- package/fesm2022/_platform-chunk.mjs +42 -65
- package/fesm2022/_platform-chunk.mjs.map +1 -1
- package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs +78 -134
- package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs.map +1 -1
- package/fesm2022/_scrolling-chunk.mjs +44 -85
- package/fesm2022/_scrolling-chunk.mjs.map +1 -1
- package/fesm2022/_selection-model-chunk.mjs +138 -209
- package/fesm2022/_selection-model-chunk.mjs.map +1 -1
- package/fesm2022/_shadow-dom-chunk.mjs +21 -35
- package/fesm2022/_shadow-dom-chunk.mjs.map +1 -1
- package/fesm2022/_style-loader-chunk.mjs +50 -37
- package/fesm2022/_style-loader-chunk.mjs.map +1 -1
- package/fesm2022/_test-environment-chunk.mjs +2 -14
- package/fesm2022/_test-environment-chunk.mjs.map +1 -1
- package/fesm2022/_tree-key-manager-chunk.mjs +229 -308
- package/fesm2022/_tree-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_typeahead-chunk.mjs +52 -74
- package/fesm2022/_typeahead-chunk.mjs.map +1 -1
- package/fesm2022/_unique-selection-dispatcher-chunk.mjs +43 -40
- package/fesm2022/_unique-selection-dispatcher-chunk.mjs.map +1 -1
- package/fesm2022/a11y.mjs +351 -449
- package/fesm2022/a11y.mjs.map +1 -1
- package/fesm2022/accordion.mjs +254 -192
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/bidi.mjs +121 -64
- package/fesm2022/bidi.mjs.map +1 -1
- package/fesm2022/cdk.mjs +1 -2
- package/fesm2022/cdk.mjs.map +1 -1
- package/fesm2022/clipboard.mjs +208 -186
- package/fesm2022/clipboard.mjs.map +1 -1
- package/fesm2022/coercion-private.mjs +4 -8
- package/fesm2022/coercion-private.mjs.map +1 -1
- package/fesm2022/coercion.mjs +11 -29
- package/fesm2022/coercion.mjs.map +1 -1
- package/fesm2022/dialog.mjs +660 -808
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/drag-drop.mjs +3347 -4286
- package/fesm2022/drag-drop.mjs.map +1 -1
- package/fesm2022/keycodes.mjs +4 -8
- package/fesm2022/keycodes.mjs.map +1 -1
- package/fesm2022/layout.mjs +44 -26
- package/fesm2022/layout.mjs.map +1 -1
- package/fesm2022/listbox.mjs +841 -895
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/menu.mjs +1942 -1858
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/observers-private.mjs +88 -106
- package/fesm2022/observers-private.mjs.map +1 -1
- package/fesm2022/observers.mjs +262 -184
- package/fesm2022/observers.mjs.map +1 -1
- package/fesm2022/overlay.mjs +72 -68
- package/fesm2022/overlay.mjs.map +1 -1
- package/fesm2022/platform.mjs +43 -54
- package/fesm2022/platform.mjs.map +1 -1
- package/fesm2022/portal.mjs +402 -560
- package/fesm2022/portal.mjs.map +1 -1
- package/fesm2022/private.mjs +38 -10
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/scrolling.mjs +1323 -1400
- package/fesm2022/scrolling.mjs.map +1 -1
- package/fesm2022/stepper.mjs +758 -590
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +2327 -2319
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/testing-selenium-webdriver.mjs +252 -325
- package/fesm2022/testing-selenium-webdriver.mjs.map +1 -1
- package/fesm2022/testing-testbed.mjs +592 -709
- package/fesm2022/testing-testbed.mjs.map +1 -1
- package/fesm2022/testing.mjs +368 -889
- package/fesm2022/testing.mjs.map +1 -1
- package/fesm2022/text-field.mjs +459 -388
- package/fesm2022/text-field.mjs.map +1 -1
- package/fesm2022/tree.mjs +1483 -1731
- package/fesm2022/tree.mjs.map +1 -1
- package/overlay/_index.scss +28 -0
- package/overlay-prebuilt.css +1 -1
- package/package.json +1 -1
- package/schematics/ng-add/index.js +1 -1
- package/types/_overlay-module-chunk.d.ts +59 -7
- package/types/_portal-directives-chunk.d.ts +2 -18
- package/types/accordion.d.ts +3 -1
- package/types/dialog.d.ts +1 -1
- package/types/overlay.d.ts +6 -2
- package/types/portal.d.ts +1 -1
package/fesm2022/dialog.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { inject, ElementRef, NgZone, Renderer2, ChangeDetectorRef, Injector, DOCUMENT, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, InjectionToken, TemplateRef, Injectable, signal, EventEmitter, NgModule } from '@angular/core';
|
|
3
3
|
import { Subject, defer } from 'rxjs';
|
|
4
4
|
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from './portal.mjs';
|
|
5
|
-
export { CdkPortal as ɵɵCdkPortal
|
|
5
|
+
export { CdkPortal as ɵɵCdkPortal } from './portal.mjs';
|
|
6
6
|
import { FocusTrapFactory, InteractivityChecker, A11yModule } from './_a11y-module-chunk.mjs';
|
|
7
7
|
import { FocusMonitor } from './_focus-monitor-chunk.mjs';
|
|
8
8
|
import { Platform } from './_platform-chunk.mjs';
|
|
@@ -30,845 +30,697 @@ import './bidi.mjs';
|
|
|
30
30
|
import './_recycle-view-repeater-strategy-chunk.mjs';
|
|
31
31
|
import './_data-source-chunk.mjs';
|
|
32
32
|
|
|
33
|
-
/** Configuration for opening a modal dialog. */
|
|
34
33
|
class DialogConfig {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
/** Min-height of the dialog. If a number is provided, assumes pixel units. */
|
|
68
|
-
minHeight;
|
|
69
|
-
/** Max-width of the dialog. If a number is provided, assumes pixel units. */
|
|
70
|
-
maxWidth;
|
|
71
|
-
/** Max-height of the dialog. If a number is provided, assumes pixel units. */
|
|
72
|
-
maxHeight;
|
|
73
|
-
/** Strategy to use when positioning the dialog. Defaults to centering it on the page. */
|
|
74
|
-
positionStrategy;
|
|
75
|
-
/** Data being injected into the child component. */
|
|
76
|
-
data = null;
|
|
77
|
-
/** Layout direction for the dialog's content. */
|
|
78
|
-
direction;
|
|
79
|
-
/** ID of the element that describes the dialog. */
|
|
80
|
-
ariaDescribedBy = null;
|
|
81
|
-
/** ID of the element that labels the dialog. */
|
|
82
|
-
ariaLabelledBy = null;
|
|
83
|
-
/** Dialog label applied via `aria-label` */
|
|
84
|
-
ariaLabel = null;
|
|
85
|
-
/**
|
|
86
|
-
* Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
|
|
87
|
-
* because it can interfere with other overlay-based components (e.g. `mat-select`) and because
|
|
88
|
-
* it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
|
|
89
|
-
*/
|
|
90
|
-
ariaModal = false;
|
|
91
|
-
/**
|
|
92
|
-
* Where the dialog should focus on open.
|
|
93
|
-
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
|
|
94
|
-
* AutoFocusTarget instead.
|
|
95
|
-
*/
|
|
96
|
-
autoFocus = 'first-tabbable';
|
|
97
|
-
/**
|
|
98
|
-
* Whether the dialog should restore focus to the previously-focused element upon closing.
|
|
99
|
-
* Has the following behavior based on the type that is passed in:
|
|
100
|
-
* - `boolean` - when true, will return focus to the element that was focused before the dialog
|
|
101
|
-
* was opened, otherwise won't restore focus at all.
|
|
102
|
-
* - `string` - focus will be restored to the first element that matches the CSS selector.
|
|
103
|
-
* - `HTMLElement` - focus will be restored to the specific element.
|
|
104
|
-
*/
|
|
105
|
-
restoreFocus = true;
|
|
106
|
-
/**
|
|
107
|
-
* Scroll strategy to be used for the dialog. This determines how
|
|
108
|
-
* the dialog responds to scrolling underneath the panel element.
|
|
109
|
-
*/
|
|
110
|
-
scrollStrategy;
|
|
111
|
-
/**
|
|
112
|
-
* Whether the dialog should close when the user navigates backwards or forwards through browser
|
|
113
|
-
* history. This does not apply to navigation via anchor element unless using URL-hash based
|
|
114
|
-
* routing (`HashLocationStrategy` in the Angular router).
|
|
115
|
-
*/
|
|
116
|
-
closeOnNavigation = true;
|
|
117
|
-
/**
|
|
118
|
-
* Whether the dialog should close when the dialog service is destroyed. This is useful if
|
|
119
|
-
* another service is wrapping the dialog and is managing the destruction instead.
|
|
120
|
-
*/
|
|
121
|
-
closeOnDestroy = true;
|
|
122
|
-
/**
|
|
123
|
-
* Whether the dialog should close when the underlying overlay is detached. This is useful if
|
|
124
|
-
* another service is wrapping the dialog and is managing the destruction instead. E.g. an
|
|
125
|
-
* external detachment can happen as a result of a scroll strategy triggering it or when the
|
|
126
|
-
* browser location changes.
|
|
127
|
-
*/
|
|
128
|
-
closeOnOverlayDetachments = true;
|
|
129
|
-
/**
|
|
130
|
-
* Whether the built-in overlay animations should be disabled.
|
|
131
|
-
*/
|
|
132
|
-
disableAnimations = false;
|
|
133
|
-
/**
|
|
134
|
-
* Providers that will be exposed to the contents of the dialog. Can also
|
|
135
|
-
* be provided as a function in order to generate the providers lazily.
|
|
136
|
-
*/
|
|
137
|
-
providers;
|
|
138
|
-
/**
|
|
139
|
-
* Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.
|
|
140
|
-
* A configuration object can be passed in to customize the providers that will be exposed
|
|
141
|
-
* to the dialog container.
|
|
142
|
-
*/
|
|
143
|
-
container;
|
|
144
|
-
/**
|
|
145
|
-
* Context that will be passed to template-based dialogs.
|
|
146
|
-
* A function can be passed in to resolve the context lazily.
|
|
147
|
-
*/
|
|
148
|
-
templateContext;
|
|
34
|
+
viewContainerRef;
|
|
35
|
+
injector;
|
|
36
|
+
id;
|
|
37
|
+
role = 'dialog';
|
|
38
|
+
panelClass = '';
|
|
39
|
+
hasBackdrop = true;
|
|
40
|
+
backdropClass = '';
|
|
41
|
+
disableClose = false;
|
|
42
|
+
closePredicate;
|
|
43
|
+
width = '';
|
|
44
|
+
height = '';
|
|
45
|
+
minWidth;
|
|
46
|
+
minHeight;
|
|
47
|
+
maxWidth;
|
|
48
|
+
maxHeight;
|
|
49
|
+
positionStrategy;
|
|
50
|
+
data = null;
|
|
51
|
+
direction;
|
|
52
|
+
ariaDescribedBy = null;
|
|
53
|
+
ariaLabelledBy = null;
|
|
54
|
+
ariaLabel = null;
|
|
55
|
+
ariaModal = false;
|
|
56
|
+
autoFocus = 'first-tabbable';
|
|
57
|
+
restoreFocus = true;
|
|
58
|
+
scrollStrategy;
|
|
59
|
+
closeOnNavigation = true;
|
|
60
|
+
closeOnDestroy = true;
|
|
61
|
+
closeOnOverlayDetachments = true;
|
|
62
|
+
disableAnimations = false;
|
|
63
|
+
providers;
|
|
64
|
+
container;
|
|
65
|
+
templateContext;
|
|
149
66
|
}
|
|
150
67
|
|
|
151
68
|
function throwDialogContentAlreadyAttachedError() {
|
|
152
|
-
|
|
69
|
+
throw Error('Attempting to attach dialog content after content is already attached');
|
|
153
70
|
}
|
|
154
|
-
/**
|
|
155
|
-
* Internal component that wraps user-provided dialog content.
|
|
156
|
-
* @docs-private
|
|
157
|
-
*/
|
|
158
71
|
class CdkDialogContainer extends BasePortalOutlet {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
72
|
+
_elementRef = inject(ElementRef);
|
|
73
|
+
_focusTrapFactory = inject(FocusTrapFactory);
|
|
74
|
+
_config;
|
|
75
|
+
_interactivityChecker = inject(InteractivityChecker);
|
|
76
|
+
_ngZone = inject(NgZone);
|
|
77
|
+
_focusMonitor = inject(FocusMonitor);
|
|
78
|
+
_renderer = inject(Renderer2);
|
|
79
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
80
|
+
_injector = inject(Injector);
|
|
81
|
+
_platform = inject(Platform);
|
|
82
|
+
_document = inject(DOCUMENT);
|
|
83
|
+
_portalOutlet;
|
|
84
|
+
_focusTrapped = new Subject();
|
|
85
|
+
_focusTrap = null;
|
|
86
|
+
_elementFocusedBeforeDialogWasOpened = null;
|
|
87
|
+
_closeInteractionType = null;
|
|
88
|
+
_ariaLabelledByQueue = [];
|
|
89
|
+
_isDestroyed = false;
|
|
90
|
+
constructor() {
|
|
91
|
+
super();
|
|
92
|
+
this._config = inject(DialogConfig, {
|
|
93
|
+
optional: true
|
|
94
|
+
}) || new DialogConfig();
|
|
95
|
+
if (this._config.ariaLabelledBy) {
|
|
96
|
+
this._ariaLabelledByQueue.push(this._config.ariaLabelledBy);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
_addAriaLabelledBy(id) {
|
|
100
|
+
this._ariaLabelledByQueue.push(id);
|
|
101
|
+
this._changeDetectorRef.markForCheck();
|
|
102
|
+
}
|
|
103
|
+
_removeAriaLabelledBy(id) {
|
|
104
|
+
const index = this._ariaLabelledByQueue.indexOf(id);
|
|
105
|
+
if (index > -1) {
|
|
106
|
+
this._ariaLabelledByQueue.splice(index, 1);
|
|
107
|
+
this._changeDetectorRef.markForCheck();
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
_contentAttached() {
|
|
111
|
+
this._initializeFocusTrap();
|
|
112
|
+
this._captureInitialFocus();
|
|
113
|
+
}
|
|
114
|
+
_captureInitialFocus() {
|
|
115
|
+
this._trapFocus();
|
|
116
|
+
}
|
|
117
|
+
ngOnDestroy() {
|
|
118
|
+
this._focusTrapped.complete();
|
|
119
|
+
this._isDestroyed = true;
|
|
120
|
+
this._restoreFocus();
|
|
121
|
+
}
|
|
122
|
+
attachComponentPortal(portal) {
|
|
123
|
+
if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
124
|
+
throwDialogContentAlreadyAttachedError();
|
|
125
|
+
}
|
|
126
|
+
const result = this._portalOutlet.attachComponentPortal(portal);
|
|
127
|
+
this._contentAttached();
|
|
128
|
+
return result;
|
|
129
|
+
}
|
|
130
|
+
attachTemplatePortal(portal) {
|
|
131
|
+
if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
132
|
+
throwDialogContentAlreadyAttachedError();
|
|
133
|
+
}
|
|
134
|
+
const result = this._portalOutlet.attachTemplatePortal(portal);
|
|
135
|
+
this._contentAttached();
|
|
136
|
+
return result;
|
|
137
|
+
}
|
|
138
|
+
attachDomPortal = portal => {
|
|
139
|
+
if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
140
|
+
throwDialogContentAlreadyAttachedError();
|
|
141
|
+
}
|
|
142
|
+
const result = this._portalOutlet.attachDomPortal(portal);
|
|
143
|
+
this._contentAttached();
|
|
144
|
+
return result;
|
|
145
|
+
};
|
|
146
|
+
_recaptureFocus() {
|
|
147
|
+
if (!this._containsFocus()) {
|
|
148
|
+
this._trapFocus();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
_forceFocus(element, options) {
|
|
152
|
+
if (!this._interactivityChecker.isFocusable(element)) {
|
|
153
|
+
element.tabIndex = -1;
|
|
154
|
+
this._ngZone.runOutsideAngular(() => {
|
|
155
|
+
const callback = () => {
|
|
156
|
+
deregisterBlur();
|
|
157
|
+
deregisterMousedown();
|
|
158
|
+
element.removeAttribute('tabindex');
|
|
159
|
+
};
|
|
160
|
+
const deregisterBlur = this._renderer.listen(element, 'blur', callback);
|
|
161
|
+
const deregisterMousedown = this._renderer.listen(element, 'mousedown', callback);
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
element.focus(options);
|
|
165
|
+
}
|
|
166
|
+
_focusByCssSelector(selector, options) {
|
|
167
|
+
let elementToFocus = this._elementRef.nativeElement.querySelector(selector);
|
|
168
|
+
if (elementToFocus) {
|
|
169
|
+
this._forceFocus(elementToFocus, options);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
_trapFocus(options) {
|
|
173
|
+
if (this._isDestroyed) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
afterNextRender(() => {
|
|
177
|
+
const element = this._elementRef.nativeElement;
|
|
178
|
+
switch (this._config.autoFocus) {
|
|
179
|
+
case false:
|
|
180
|
+
case 'dialog':
|
|
181
|
+
if (!this._containsFocus()) {
|
|
182
|
+
element.focus(options);
|
|
183
|
+
}
|
|
184
|
+
break;
|
|
185
|
+
case true:
|
|
186
|
+
case 'first-tabbable':
|
|
187
|
+
const focusedSuccessfully = this._focusTrap?.focusInitialElement(options);
|
|
188
|
+
if (!focusedSuccessfully) {
|
|
189
|
+
this._focusDialogContainer(options);
|
|
190
|
+
}
|
|
191
|
+
break;
|
|
192
|
+
case 'first-heading':
|
|
193
|
+
this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]', options);
|
|
194
|
+
break;
|
|
195
|
+
default:
|
|
196
|
+
this._focusByCssSelector(this._config.autoFocus, options);
|
|
197
|
+
break;
|
|
198
|
+
}
|
|
199
|
+
this._focusTrapped.next();
|
|
200
|
+
}, {
|
|
201
|
+
injector: this._injector
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
_restoreFocus() {
|
|
205
|
+
const focusConfig = this._config.restoreFocus;
|
|
206
|
+
let focusTargetElement = null;
|
|
207
|
+
if (typeof focusConfig === 'string') {
|
|
208
|
+
focusTargetElement = this._document.querySelector(focusConfig);
|
|
209
|
+
} else if (typeof focusConfig === 'boolean') {
|
|
210
|
+
focusTargetElement = focusConfig ? this._elementFocusedBeforeDialogWasOpened : null;
|
|
211
|
+
} else if (focusConfig) {
|
|
212
|
+
focusTargetElement = focusConfig;
|
|
213
|
+
}
|
|
214
|
+
if (this._config.restoreFocus && focusTargetElement && typeof focusTargetElement.focus === 'function') {
|
|
215
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
216
|
+
const element = this._elementRef.nativeElement;
|
|
217
|
+
if (!activeElement || activeElement === this._document.body || activeElement === element || element.contains(activeElement)) {
|
|
218
|
+
if (this._focusMonitor) {
|
|
219
|
+
this._focusMonitor.focusVia(focusTargetElement, this._closeInteractionType);
|
|
220
|
+
this._closeInteractionType = null;
|
|
221
|
+
} else {
|
|
222
|
+
focusTargetElement.focus();
|
|
198
223
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
/**
|
|
273
|
-
* Focuses the provided element. If the element is not focusable, it will add a tabIndex
|
|
274
|
-
* attribute to forcefully focus it. The attribute is removed after focus is moved.
|
|
275
|
-
* @param element The element to focus.
|
|
276
|
-
*/
|
|
277
|
-
_forceFocus(element, options) {
|
|
278
|
-
if (!this._interactivityChecker.isFocusable(element)) {
|
|
279
|
-
element.tabIndex = -1;
|
|
280
|
-
// The tabindex attribute should be removed to avoid navigating to that element again
|
|
281
|
-
this._ngZone.runOutsideAngular(() => {
|
|
282
|
-
const callback = () => {
|
|
283
|
-
deregisterBlur();
|
|
284
|
-
deregisterMousedown();
|
|
285
|
-
element.removeAttribute('tabindex');
|
|
286
|
-
};
|
|
287
|
-
const deregisterBlur = this._renderer.listen(element, 'blur', callback);
|
|
288
|
-
const deregisterMousedown = this._renderer.listen(element, 'mousedown', callback);
|
|
289
|
-
});
|
|
290
|
-
}
|
|
291
|
-
element.focus(options);
|
|
292
|
-
}
|
|
293
|
-
/**
|
|
294
|
-
* Focuses the first element that matches the given selector within the focus trap.
|
|
295
|
-
* @param selector The CSS selector for the element to set focus to.
|
|
296
|
-
*/
|
|
297
|
-
_focusByCssSelector(selector, options) {
|
|
298
|
-
let elementToFocus = this._elementRef.nativeElement.querySelector(selector);
|
|
299
|
-
if (elementToFocus) {
|
|
300
|
-
this._forceFocus(elementToFocus, options);
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
/**
|
|
304
|
-
* Moves the focus inside the focus trap. When autoFocus is not set to 'dialog', if focus
|
|
305
|
-
* cannot be moved then focus will go to the dialog container.
|
|
306
|
-
*/
|
|
307
|
-
_trapFocus(options) {
|
|
308
|
-
if (this._isDestroyed) {
|
|
309
|
-
return;
|
|
310
|
-
}
|
|
311
|
-
// If were to attempt to focus immediately, then the content of the dialog would not yet be
|
|
312
|
-
// ready in instances where change detection has to run first. To deal with this, we simply
|
|
313
|
-
// wait until after the next render.
|
|
314
|
-
afterNextRender(() => {
|
|
315
|
-
const element = this._elementRef.nativeElement;
|
|
316
|
-
switch (this._config.autoFocus) {
|
|
317
|
-
case false:
|
|
318
|
-
case 'dialog':
|
|
319
|
-
// Ensure that focus is on the dialog container. It's possible that a different
|
|
320
|
-
// component tried to move focus while the open animation was running. See:
|
|
321
|
-
// https://github.com/angular/components/issues/16215. Note that we only want to do this
|
|
322
|
-
// if the focus isn't inside the dialog already, because it's possible that the consumer
|
|
323
|
-
// turned off `autoFocus` in order to move focus themselves.
|
|
324
|
-
if (!this._containsFocus()) {
|
|
325
|
-
element.focus(options);
|
|
326
|
-
}
|
|
327
|
-
break;
|
|
328
|
-
case true:
|
|
329
|
-
case 'first-tabbable':
|
|
330
|
-
const focusedSuccessfully = this._focusTrap?.focusInitialElement(options);
|
|
331
|
-
// If we weren't able to find a focusable element in the dialog, then focus the dialog
|
|
332
|
-
// container instead.
|
|
333
|
-
if (!focusedSuccessfully) {
|
|
334
|
-
this._focusDialogContainer(options);
|
|
335
|
-
}
|
|
336
|
-
break;
|
|
337
|
-
case 'first-heading':
|
|
338
|
-
this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]', options);
|
|
339
|
-
break;
|
|
340
|
-
default:
|
|
341
|
-
this._focusByCssSelector(this._config.autoFocus, options);
|
|
342
|
-
break;
|
|
343
|
-
}
|
|
344
|
-
this._focusTrapped.next();
|
|
345
|
-
}, { injector: this._injector });
|
|
346
|
-
}
|
|
347
|
-
/** Restores focus to the element that was focused before the dialog opened. */
|
|
348
|
-
_restoreFocus() {
|
|
349
|
-
const focusConfig = this._config.restoreFocus;
|
|
350
|
-
let focusTargetElement = null;
|
|
351
|
-
if (typeof focusConfig === 'string') {
|
|
352
|
-
focusTargetElement = this._document.querySelector(focusConfig);
|
|
353
|
-
}
|
|
354
|
-
else if (typeof focusConfig === 'boolean') {
|
|
355
|
-
focusTargetElement = focusConfig ? this._elementFocusedBeforeDialogWasOpened : null;
|
|
356
|
-
}
|
|
357
|
-
else if (focusConfig) {
|
|
358
|
-
focusTargetElement = focusConfig;
|
|
359
|
-
}
|
|
360
|
-
// We need the extra check, because IE can set the `activeElement` to null in some cases.
|
|
361
|
-
if (this._config.restoreFocus &&
|
|
362
|
-
focusTargetElement &&
|
|
363
|
-
typeof focusTargetElement.focus === 'function') {
|
|
364
|
-
const activeElement = _getFocusedElementPierceShadowDom();
|
|
365
|
-
const element = this._elementRef.nativeElement;
|
|
366
|
-
// Make sure that focus is still inside the dialog or is on the body (usually because a
|
|
367
|
-
// non-focusable element like the backdrop was clicked) before moving it. It's possible that
|
|
368
|
-
// the consumer moved it themselves before the animation was done, in which case we shouldn't
|
|
369
|
-
// do anything.
|
|
370
|
-
if (!activeElement ||
|
|
371
|
-
activeElement === this._document.body ||
|
|
372
|
-
activeElement === element ||
|
|
373
|
-
element.contains(activeElement)) {
|
|
374
|
-
if (this._focusMonitor) {
|
|
375
|
-
this._focusMonitor.focusVia(focusTargetElement, this._closeInteractionType);
|
|
376
|
-
this._closeInteractionType = null;
|
|
377
|
-
}
|
|
378
|
-
else {
|
|
379
|
-
focusTargetElement.focus();
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
if (this._focusTrap) {
|
|
384
|
-
this._focusTrap.destroy();
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
/** Focuses the dialog container. */
|
|
388
|
-
_focusDialogContainer(options) {
|
|
389
|
-
// Note that there is no focus method when rendering on the server.
|
|
390
|
-
this._elementRef.nativeElement.focus?.(options);
|
|
391
|
-
}
|
|
392
|
-
/** Returns whether focus is inside the dialog. */
|
|
393
|
-
_containsFocus() {
|
|
394
|
-
const element = this._elementRef.nativeElement;
|
|
395
|
-
const activeElement = _getFocusedElementPierceShadowDom();
|
|
396
|
-
return element === activeElement || element.contains(activeElement);
|
|
397
|
-
}
|
|
398
|
-
/** Sets up the focus trap. */
|
|
399
|
-
_initializeFocusTrap() {
|
|
400
|
-
if (this._platform.isBrowser) {
|
|
401
|
-
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
|
|
402
|
-
// Save the previously focused element. This element will be re-focused
|
|
403
|
-
// when the dialog closes.
|
|
404
|
-
if (this._document) {
|
|
405
|
-
this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkDialogContainer, isStandalone: true, selector: "cdk-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "_config.id || null", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null" }, classAttribute: "cdk-dialog-container" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet />\n", styles: [".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
if (this._focusTrap) {
|
|
227
|
+
this._focusTrap.destroy();
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
_focusDialogContainer(options) {
|
|
231
|
+
this._elementRef.nativeElement.focus?.(options);
|
|
232
|
+
}
|
|
233
|
+
_containsFocus() {
|
|
234
|
+
const element = this._elementRef.nativeElement;
|
|
235
|
+
const activeElement = _getFocusedElementPierceShadowDom();
|
|
236
|
+
return element === activeElement || element.contains(activeElement);
|
|
237
|
+
}
|
|
238
|
+
_initializeFocusTrap() {
|
|
239
|
+
if (this._platform.isBrowser) {
|
|
240
|
+
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
|
|
241
|
+
if (this._document) {
|
|
242
|
+
this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
247
|
+
minVersion: "12.0.0",
|
|
248
|
+
version: "20.2.0-next.2",
|
|
249
|
+
ngImport: i0,
|
|
250
|
+
type: CdkDialogContainer,
|
|
251
|
+
deps: [],
|
|
252
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
253
|
+
});
|
|
254
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
255
|
+
minVersion: "14.0.0",
|
|
256
|
+
version: "20.2.0-next.2",
|
|
257
|
+
type: CdkDialogContainer,
|
|
258
|
+
isStandalone: true,
|
|
259
|
+
selector: "cdk-dialog-container",
|
|
260
|
+
host: {
|
|
261
|
+
attributes: {
|
|
262
|
+
"tabindex": "-1"
|
|
263
|
+
},
|
|
264
|
+
properties: {
|
|
265
|
+
"attr.id": "_config.id || null",
|
|
266
|
+
"attr.role": "_config.role",
|
|
267
|
+
"attr.aria-modal": "_config.ariaModal",
|
|
268
|
+
"attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]",
|
|
269
|
+
"attr.aria-label": "_config.ariaLabel",
|
|
270
|
+
"attr.aria-describedby": "_config.ariaDescribedBy || null"
|
|
271
|
+
},
|
|
272
|
+
classAttribute: "cdk-dialog-container"
|
|
273
|
+
},
|
|
274
|
+
viewQueries: [{
|
|
275
|
+
propertyName: "_portalOutlet",
|
|
276
|
+
first: true,
|
|
277
|
+
predicate: CdkPortalOutlet,
|
|
278
|
+
descendants: true,
|
|
279
|
+
static: true
|
|
280
|
+
}],
|
|
281
|
+
usesInheritance: true,
|
|
282
|
+
ngImport: i0,
|
|
283
|
+
template: "<ng-template cdkPortalOutlet />\n",
|
|
284
|
+
styles: [".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"],
|
|
285
|
+
dependencies: [{
|
|
286
|
+
kind: "directive",
|
|
287
|
+
type: CdkPortalOutlet,
|
|
288
|
+
selector: "[cdkPortalOutlet]",
|
|
289
|
+
inputs: ["cdkPortalOutlet"],
|
|
290
|
+
outputs: ["attached"],
|
|
291
|
+
exportAs: ["cdkPortalOutlet"]
|
|
292
|
+
}],
|
|
293
|
+
changeDetection: i0.ChangeDetectionStrategy.Default,
|
|
294
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
295
|
+
});
|
|
411
296
|
}
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
297
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
298
|
+
minVersion: "12.0.0",
|
|
299
|
+
version: "20.2.0-next.2",
|
|
300
|
+
ngImport: i0,
|
|
301
|
+
type: CdkDialogContainer,
|
|
302
|
+
decorators: [{
|
|
303
|
+
type: Component,
|
|
304
|
+
args: [{
|
|
305
|
+
selector: 'cdk-dialog-container',
|
|
306
|
+
encapsulation: ViewEncapsulation.None,
|
|
307
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
308
|
+
imports: [CdkPortalOutlet],
|
|
309
|
+
host: {
|
|
310
|
+
'class': 'cdk-dialog-container',
|
|
311
|
+
'tabindex': '-1',
|
|
312
|
+
'[attr.id]': '_config.id || null',
|
|
313
|
+
'[attr.role]': '_config.role',
|
|
314
|
+
'[attr.aria-modal]': '_config.ariaModal',
|
|
315
|
+
'[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
|
|
316
|
+
'[attr.aria-label]': '_config.ariaLabel',
|
|
317
|
+
'[attr.aria-describedby]': '_config.ariaDescribedBy || null'
|
|
318
|
+
},
|
|
319
|
+
template: "<ng-template cdkPortalOutlet />\n",
|
|
320
|
+
styles: [".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\n"]
|
|
321
|
+
}]
|
|
322
|
+
}],
|
|
323
|
+
ctorParameters: () => [],
|
|
324
|
+
propDecorators: {
|
|
325
|
+
_portalOutlet: [{
|
|
326
|
+
type: ViewChild,
|
|
327
|
+
args: [CdkPortalOutlet, {
|
|
328
|
+
static: true
|
|
329
|
+
}]
|
|
330
|
+
}]
|
|
331
|
+
}
|
|
332
|
+
});
|
|
428
333
|
|
|
429
|
-
/**
|
|
430
|
-
* Reference to a dialog opened via the Dialog service.
|
|
431
|
-
*/
|
|
432
334
|
class DialogRef {
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
disableClose;
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
id;
|
|
459
|
-
/** Subscription to external detachments of the dialog. */
|
|
460
|
-
_detachSubscription;
|
|
461
|
-
constructor(overlayRef, config) {
|
|
462
|
-
this.overlayRef = overlayRef;
|
|
463
|
-
this.config = config;
|
|
464
|
-
this.disableClose = config.disableClose;
|
|
465
|
-
this.backdropClick = overlayRef.backdropClick();
|
|
466
|
-
this.keydownEvents = overlayRef.keydownEvents();
|
|
467
|
-
this.outsidePointerEvents = overlayRef.outsidePointerEvents();
|
|
468
|
-
this.id = config.id; // By the time the dialog is created we are guaranteed to have an ID.
|
|
469
|
-
this.keydownEvents.subscribe(event => {
|
|
470
|
-
if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
|
|
471
|
-
event.preventDefault();
|
|
472
|
-
this.close(undefined, { focusOrigin: 'keyboard' });
|
|
473
|
-
}
|
|
335
|
+
overlayRef;
|
|
336
|
+
config;
|
|
337
|
+
componentInstance;
|
|
338
|
+
componentRef;
|
|
339
|
+
containerInstance;
|
|
340
|
+
disableClose;
|
|
341
|
+
closed = new Subject();
|
|
342
|
+
backdropClick;
|
|
343
|
+
keydownEvents;
|
|
344
|
+
outsidePointerEvents;
|
|
345
|
+
id;
|
|
346
|
+
_detachSubscription;
|
|
347
|
+
constructor(overlayRef, config) {
|
|
348
|
+
this.overlayRef = overlayRef;
|
|
349
|
+
this.config = config;
|
|
350
|
+
this.disableClose = config.disableClose;
|
|
351
|
+
this.backdropClick = overlayRef.backdropClick();
|
|
352
|
+
this.keydownEvents = overlayRef.keydownEvents();
|
|
353
|
+
this.outsidePointerEvents = overlayRef.outsidePointerEvents();
|
|
354
|
+
this.id = config.id;
|
|
355
|
+
this.keydownEvents.subscribe(event => {
|
|
356
|
+
if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
|
|
357
|
+
event.preventDefault();
|
|
358
|
+
this.close(undefined, {
|
|
359
|
+
focusOrigin: 'keyboard'
|
|
474
360
|
});
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
// Recapture it if closing via the backdrop is disabled.
|
|
482
|
-
this.containerInstance._recaptureFocus?.();
|
|
483
|
-
}
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
this.backdropClick.subscribe(() => {
|
|
364
|
+
if (!this.disableClose && this._canClose()) {
|
|
365
|
+
this.close(undefined, {
|
|
366
|
+
focusOrigin: 'mouse'
|
|
484
367
|
});
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
/** Remove a CSS class or an array of classes from the overlay pane. */
|
|
530
|
-
removePanelClass(classes) {
|
|
531
|
-
this.overlayRef.removePanelClass(classes);
|
|
532
|
-
return this;
|
|
533
|
-
}
|
|
534
|
-
/** Whether the dialog is allowed to close. */
|
|
535
|
-
_canClose(result) {
|
|
536
|
-
const config = this.config;
|
|
537
|
-
return (!!this.containerInstance &&
|
|
538
|
-
(!config.closePredicate || config.closePredicate(result, config, this.componentInstance)));
|
|
539
|
-
}
|
|
368
|
+
} else {
|
|
369
|
+
this.containerInstance._recaptureFocus?.();
|
|
370
|
+
}
|
|
371
|
+
});
|
|
372
|
+
this._detachSubscription = overlayRef.detachments().subscribe(() => {
|
|
373
|
+
if (config.closeOnOverlayDetachments !== false) {
|
|
374
|
+
this.close();
|
|
375
|
+
}
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
close(result, options) {
|
|
379
|
+
if (this._canClose(result)) {
|
|
380
|
+
const closedSubject = this.closed;
|
|
381
|
+
this.containerInstance._closeInteractionType = options?.focusOrigin || 'program';
|
|
382
|
+
this._detachSubscription.unsubscribe();
|
|
383
|
+
this.overlayRef.dispose();
|
|
384
|
+
closedSubject.next(result);
|
|
385
|
+
closedSubject.complete();
|
|
386
|
+
this.componentInstance = this.containerInstance = null;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
updatePosition() {
|
|
390
|
+
this.overlayRef.updatePosition();
|
|
391
|
+
return this;
|
|
392
|
+
}
|
|
393
|
+
updateSize(width = '', height = '') {
|
|
394
|
+
this.overlayRef.updateSize({
|
|
395
|
+
width,
|
|
396
|
+
height
|
|
397
|
+
});
|
|
398
|
+
return this;
|
|
399
|
+
}
|
|
400
|
+
addPanelClass(classes) {
|
|
401
|
+
this.overlayRef.addPanelClass(classes);
|
|
402
|
+
return this;
|
|
403
|
+
}
|
|
404
|
+
removePanelClass(classes) {
|
|
405
|
+
this.overlayRef.removePanelClass(classes);
|
|
406
|
+
return this;
|
|
407
|
+
}
|
|
408
|
+
_canClose(result) {
|
|
409
|
+
const config = this.config;
|
|
410
|
+
return !!this.containerInstance && (!config.closePredicate || config.closePredicate(result, config, this.componentInstance));
|
|
411
|
+
}
|
|
540
412
|
}
|
|
541
413
|
|
|
542
|
-
/** Injection token for the Dialog's ScrollStrategy. */
|
|
543
414
|
const DIALOG_SCROLL_STRATEGY = new InjectionToken('DialogScrollStrategy', {
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
415
|
+
providedIn: 'root',
|
|
416
|
+
factory: () => {
|
|
417
|
+
const injector = inject(Injector);
|
|
418
|
+
return () => createBlockScrollStrategy(injector);
|
|
419
|
+
}
|
|
549
420
|
});
|
|
550
|
-
/** Injection token for the Dialog's Data. */
|
|
551
421
|
const DIALOG_DATA = new InjectionToken('DialogData');
|
|
552
|
-
/** Injection token that can be used to provide default options for the dialog module. */
|
|
553
422
|
const DEFAULT_DIALOG_CONFIG = new InjectionToken('DefaultDialogConfig');
|
|
554
423
|
|
|
555
424
|
function getDirectionality(value) {
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
425
|
+
const valueSignal = signal(value, ...(ngDevMode ? [{
|
|
426
|
+
debugName: "valueSignal"
|
|
427
|
+
}] : []));
|
|
428
|
+
const change = new EventEmitter();
|
|
429
|
+
return {
|
|
430
|
+
valueSignal,
|
|
431
|
+
get value() {
|
|
432
|
+
return valueSignal();
|
|
433
|
+
},
|
|
434
|
+
change,
|
|
435
|
+
ngOnDestroy() {
|
|
436
|
+
change.complete();
|
|
437
|
+
}
|
|
438
|
+
};
|
|
568
439
|
}
|
|
569
440
|
class Dialog {
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
// mock it out and depend on it being synchronous.
|
|
614
|
-
const overlayContainer = this._overlayContainer.getContainerElement();
|
|
615
|
-
if (dialogContainer._focusTrapped) {
|
|
616
|
-
dialogContainer._focusTrapped.pipe(take(1)).subscribe(() => {
|
|
617
|
-
this._hideNonDialogContentFromAssistiveTechnology(overlayContainer);
|
|
618
|
-
});
|
|
619
|
-
}
|
|
620
|
-
else {
|
|
621
|
-
this._hideNonDialogContentFromAssistiveTechnology(overlayContainer);
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
this._attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config);
|
|
625
|
-
this.openDialogs.push(dialogRef);
|
|
626
|
-
dialogRef.closed.subscribe(() => this._removeOpenDialog(dialogRef, true));
|
|
627
|
-
this.afterOpened.next(dialogRef);
|
|
628
|
-
return dialogRef;
|
|
629
|
-
}
|
|
630
|
-
/**
|
|
631
|
-
* Closes all of the currently-open dialogs.
|
|
632
|
-
*/
|
|
633
|
-
closeAll() {
|
|
634
|
-
reverseForEach(this.openDialogs, dialog => dialog.close());
|
|
635
|
-
}
|
|
636
|
-
/**
|
|
637
|
-
* Finds an open dialog by its id.
|
|
638
|
-
* @param id ID to use when looking up the dialog.
|
|
639
|
-
*/
|
|
640
|
-
getDialogById(id) {
|
|
641
|
-
return this.openDialogs.find(dialog => dialog.id === id);
|
|
642
|
-
}
|
|
643
|
-
ngOnDestroy() {
|
|
644
|
-
// Make one pass over all the dialogs that need to be untracked, but should not be closed. We
|
|
645
|
-
// want to stop tracking the open dialog even if it hasn't been closed, because the tracking
|
|
646
|
-
// determines when `aria-hidden` is removed from elements outside the dialog.
|
|
647
|
-
reverseForEach(this._openDialogsAtThisLevel, dialog => {
|
|
648
|
-
// Check for `false` specifically since we want `undefined` to be interpreted as `true`.
|
|
649
|
-
if (dialog.config.closeOnDestroy === false) {
|
|
650
|
-
this._removeOpenDialog(dialog, false);
|
|
651
|
-
}
|
|
441
|
+
_injector = inject(Injector);
|
|
442
|
+
_defaultOptions = inject(DEFAULT_DIALOG_CONFIG, {
|
|
443
|
+
optional: true
|
|
444
|
+
});
|
|
445
|
+
_parentDialog = inject(Dialog, {
|
|
446
|
+
optional: true,
|
|
447
|
+
skipSelf: true
|
|
448
|
+
});
|
|
449
|
+
_overlayContainer = inject(OverlayContainer);
|
|
450
|
+
_idGenerator = inject(_IdGenerator);
|
|
451
|
+
_openDialogsAtThisLevel = [];
|
|
452
|
+
_afterAllClosedAtThisLevel = new Subject();
|
|
453
|
+
_afterOpenedAtThisLevel = new Subject();
|
|
454
|
+
_ariaHiddenElements = new Map();
|
|
455
|
+
_scrollStrategy = inject(DIALOG_SCROLL_STRATEGY);
|
|
456
|
+
get openDialogs() {
|
|
457
|
+
return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
|
|
458
|
+
}
|
|
459
|
+
get afterOpened() {
|
|
460
|
+
return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
|
|
461
|
+
}
|
|
462
|
+
afterAllClosed = defer(() => this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));
|
|
463
|
+
constructor() {}
|
|
464
|
+
open(componentOrTemplateRef, config) {
|
|
465
|
+
const defaults = this._defaultOptions || new DialogConfig();
|
|
466
|
+
config = {
|
|
467
|
+
...defaults,
|
|
468
|
+
...config
|
|
469
|
+
};
|
|
470
|
+
config.id = config.id || this._idGenerator.getId('cdk-dialog-');
|
|
471
|
+
if (config.id && this.getDialogById(config.id) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
472
|
+
throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
|
|
473
|
+
}
|
|
474
|
+
const overlayConfig = this._getOverlayConfig(config);
|
|
475
|
+
const overlayRef = createOverlayRef(this._injector, overlayConfig);
|
|
476
|
+
const dialogRef = new DialogRef(overlayRef, config);
|
|
477
|
+
const dialogContainer = this._attachContainer(overlayRef, dialogRef, config);
|
|
478
|
+
dialogRef.containerInstance = dialogContainer;
|
|
479
|
+
if (!this.openDialogs.length) {
|
|
480
|
+
const overlayContainer = this._overlayContainer.getContainerElement();
|
|
481
|
+
if (dialogContainer._focusTrapped) {
|
|
482
|
+
dialogContainer._focusTrapped.pipe(take(1)).subscribe(() => {
|
|
483
|
+
this._hideNonDialogContentFromAssistiveTechnology(overlayContainer);
|
|
652
484
|
});
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
485
|
+
} else {
|
|
486
|
+
this._hideNonDialogContentFromAssistiveTechnology(overlayContainer);
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
this._attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config);
|
|
490
|
+
this.openDialogs.push(dialogRef);
|
|
491
|
+
dialogRef.closed.subscribe(() => this._removeOpenDialog(dialogRef, true));
|
|
492
|
+
this.afterOpened.next(dialogRef);
|
|
493
|
+
return dialogRef;
|
|
494
|
+
}
|
|
495
|
+
closeAll() {
|
|
496
|
+
reverseForEach(this.openDialogs, dialog => dialog.close());
|
|
497
|
+
}
|
|
498
|
+
getDialogById(id) {
|
|
499
|
+
return this.openDialogs.find(dialog => dialog.id === id);
|
|
500
|
+
}
|
|
501
|
+
ngOnDestroy() {
|
|
502
|
+
reverseForEach(this._openDialogsAtThisLevel, dialog => {
|
|
503
|
+
if (dialog.config.closeOnDestroy === false) {
|
|
504
|
+
this._removeOpenDialog(dialog, false);
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
reverseForEach(this._openDialogsAtThisLevel, dialog => dialog.close());
|
|
508
|
+
this._afterAllClosedAtThisLevel.complete();
|
|
509
|
+
this._afterOpenedAtThisLevel.complete();
|
|
510
|
+
this._openDialogsAtThisLevel = [];
|
|
511
|
+
}
|
|
512
|
+
_getOverlayConfig(config) {
|
|
513
|
+
const state = new OverlayConfig({
|
|
514
|
+
positionStrategy: config.positionStrategy || createGlobalPositionStrategy(this._injector).centerHorizontally().centerVertically(),
|
|
515
|
+
scrollStrategy: config.scrollStrategy || this._scrollStrategy(),
|
|
516
|
+
panelClass: config.panelClass,
|
|
517
|
+
hasBackdrop: config.hasBackdrop,
|
|
518
|
+
direction: config.direction,
|
|
519
|
+
minWidth: config.minWidth,
|
|
520
|
+
minHeight: config.minHeight,
|
|
521
|
+
maxWidth: config.maxWidth,
|
|
522
|
+
maxHeight: config.maxHeight,
|
|
523
|
+
width: config.width,
|
|
524
|
+
height: config.height,
|
|
525
|
+
disposeOnNavigation: config.closeOnNavigation,
|
|
526
|
+
disableAnimations: config.disableAnimations
|
|
527
|
+
});
|
|
528
|
+
if (config.backdropClass) {
|
|
529
|
+
state.backdropClass = config.backdropClass;
|
|
530
|
+
}
|
|
531
|
+
return state;
|
|
532
|
+
}
|
|
533
|
+
_attachContainer(overlay, dialogRef, config) {
|
|
534
|
+
const userInjector = config.injector || config.viewContainerRef?.injector;
|
|
535
|
+
const providers = [{
|
|
536
|
+
provide: DialogConfig,
|
|
537
|
+
useValue: config
|
|
538
|
+
}, {
|
|
539
|
+
provide: DialogRef,
|
|
540
|
+
useValue: dialogRef
|
|
541
|
+
}, {
|
|
542
|
+
provide: OverlayRef,
|
|
543
|
+
useValue: overlay
|
|
544
|
+
}];
|
|
545
|
+
let containerType;
|
|
546
|
+
if (config.container) {
|
|
547
|
+
if (typeof config.container === 'function') {
|
|
548
|
+
containerType = config.container;
|
|
549
|
+
} else {
|
|
550
|
+
containerType = config.container.type;
|
|
551
|
+
providers.push(...config.container.providers(config));
|
|
552
|
+
}
|
|
553
|
+
} else {
|
|
554
|
+
containerType = CdkDialogContainer;
|
|
555
|
+
}
|
|
556
|
+
const containerPortal = new ComponentPortal(containerType, config.viewContainerRef, Injector.create({
|
|
557
|
+
parent: userInjector || this._injector,
|
|
558
|
+
providers
|
|
559
|
+
}));
|
|
560
|
+
const containerRef = overlay.attach(containerPortal);
|
|
561
|
+
return containerRef.instance;
|
|
562
|
+
}
|
|
563
|
+
_attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config) {
|
|
564
|
+
if (componentOrTemplateRef instanceof TemplateRef) {
|
|
565
|
+
const injector = this._createInjector(config, dialogRef, dialogContainer, undefined);
|
|
566
|
+
let context = {
|
|
567
|
+
$implicit: config.data,
|
|
568
|
+
dialogRef
|
|
569
|
+
};
|
|
570
|
+
if (config.templateContext) {
|
|
571
|
+
context = {
|
|
572
|
+
...context,
|
|
573
|
+
...(typeof config.templateContext === 'function' ? config.templateContext() : config.templateContext)
|
|
574
|
+
};
|
|
575
|
+
}
|
|
576
|
+
dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, context, injector));
|
|
577
|
+
} else {
|
|
578
|
+
const injector = this._createInjector(config, dialogRef, dialogContainer, this._injector);
|
|
579
|
+
const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
|
|
580
|
+
dialogRef.componentRef = contentRef;
|
|
581
|
+
dialogRef.componentInstance = contentRef.instance;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
_createInjector(config, dialogRef, dialogContainer, fallbackInjector) {
|
|
585
|
+
const userInjector = config.injector || config.viewContainerRef?.injector;
|
|
586
|
+
const providers = [{
|
|
587
|
+
provide: DIALOG_DATA,
|
|
588
|
+
useValue: config.data
|
|
589
|
+
}, {
|
|
590
|
+
provide: DialogRef,
|
|
591
|
+
useValue: dialogRef
|
|
592
|
+
}];
|
|
593
|
+
if (config.providers) {
|
|
594
|
+
if (typeof config.providers === 'function') {
|
|
595
|
+
providers.push(...config.providers(dialogRef, config, dialogContainer));
|
|
596
|
+
} else {
|
|
597
|
+
providers.push(...config.providers);
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
if (config.direction && (!userInjector || !userInjector.get(Directionality, null, {
|
|
601
|
+
optional: true
|
|
602
|
+
}))) {
|
|
603
|
+
providers.push({
|
|
604
|
+
provide: Directionality,
|
|
605
|
+
useValue: getDirectionality(config.direction)
|
|
606
|
+
});
|
|
607
|
+
}
|
|
608
|
+
return Injector.create({
|
|
609
|
+
parent: userInjector || fallbackInjector,
|
|
610
|
+
providers
|
|
611
|
+
});
|
|
612
|
+
}
|
|
613
|
+
_removeOpenDialog(dialogRef, emitEvent) {
|
|
614
|
+
const index = this.openDialogs.indexOf(dialogRef);
|
|
615
|
+
if (index > -1) {
|
|
616
|
+
this.openDialogs.splice(index, 1);
|
|
617
|
+
if (!this.openDialogs.length) {
|
|
618
|
+
this._ariaHiddenElements.forEach((previousValue, element) => {
|
|
619
|
+
if (previousValue) {
|
|
620
|
+
element.setAttribute('aria-hidden', previousValue);
|
|
621
|
+
} else {
|
|
622
|
+
element.removeAttribute('aria-hidden');
|
|
623
|
+
}
|
|
682
624
|
});
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
return state;
|
|
687
|
-
}
|
|
688
|
-
/**
|
|
689
|
-
* Attaches a dialog container to a dialog's already-created overlay.
|
|
690
|
-
* @param overlay Reference to the dialog's underlying overlay.
|
|
691
|
-
* @param config The dialog configuration.
|
|
692
|
-
* @returns A promise resolving to a ComponentRef for the attached container.
|
|
693
|
-
*/
|
|
694
|
-
_attachContainer(overlay, dialogRef, config) {
|
|
695
|
-
const userInjector = config.injector || config.viewContainerRef?.injector;
|
|
696
|
-
const providers = [
|
|
697
|
-
{ provide: DialogConfig, useValue: config },
|
|
698
|
-
{ provide: DialogRef, useValue: dialogRef },
|
|
699
|
-
{ provide: OverlayRef, useValue: overlay },
|
|
700
|
-
];
|
|
701
|
-
let containerType;
|
|
702
|
-
if (config.container) {
|
|
703
|
-
if (typeof config.container === 'function') {
|
|
704
|
-
containerType = config.container;
|
|
705
|
-
}
|
|
706
|
-
else {
|
|
707
|
-
containerType = config.container.type;
|
|
708
|
-
providers.push(...config.container.providers(config));
|
|
709
|
-
}
|
|
710
|
-
}
|
|
711
|
-
else {
|
|
712
|
-
containerType = CdkDialogContainer;
|
|
713
|
-
}
|
|
714
|
-
const containerPortal = new ComponentPortal(containerType, config.viewContainerRef, Injector.create({ parent: userInjector || this._injector, providers }));
|
|
715
|
-
const containerRef = overlay.attach(containerPortal);
|
|
716
|
-
return containerRef.instance;
|
|
717
|
-
}
|
|
718
|
-
/**
|
|
719
|
-
* Attaches the user-provided component to the already-created dialog container.
|
|
720
|
-
* @param componentOrTemplateRef The type of component being loaded into the dialog,
|
|
721
|
-
* or a TemplateRef to instantiate as the content.
|
|
722
|
-
* @param dialogRef Reference to the dialog being opened.
|
|
723
|
-
* @param dialogContainer Component that is going to wrap the dialog content.
|
|
724
|
-
* @param config Configuration used to open the dialog.
|
|
725
|
-
*/
|
|
726
|
-
_attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config) {
|
|
727
|
-
if (componentOrTemplateRef instanceof TemplateRef) {
|
|
728
|
-
const injector = this._createInjector(config, dialogRef, dialogContainer, undefined);
|
|
729
|
-
let context = { $implicit: config.data, dialogRef };
|
|
730
|
-
if (config.templateContext) {
|
|
731
|
-
context = {
|
|
732
|
-
...context,
|
|
733
|
-
...(typeof config.templateContext === 'function'
|
|
734
|
-
? config.templateContext()
|
|
735
|
-
: config.templateContext),
|
|
736
|
-
};
|
|
737
|
-
}
|
|
738
|
-
dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, context, injector));
|
|
739
|
-
}
|
|
740
|
-
else {
|
|
741
|
-
const injector = this._createInjector(config, dialogRef, dialogContainer, this._injector);
|
|
742
|
-
const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector));
|
|
743
|
-
dialogRef.componentRef = contentRef;
|
|
744
|
-
dialogRef.componentInstance = contentRef.instance;
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
/**
|
|
748
|
-
* Creates a custom injector to be used inside the dialog. This allows a component loaded inside
|
|
749
|
-
* of a dialog to close itself and, optionally, to return a value.
|
|
750
|
-
* @param config Config object that is used to construct the dialog.
|
|
751
|
-
* @param dialogRef Reference to the dialog being opened.
|
|
752
|
-
* @param dialogContainer Component that is going to wrap the dialog content.
|
|
753
|
-
* @param fallbackInjector Injector to use as a fallback when a lookup fails in the custom
|
|
754
|
-
* dialog injector, if the user didn't provide a custom one.
|
|
755
|
-
* @returns The custom injector that can be used inside the dialog.
|
|
756
|
-
*/
|
|
757
|
-
_createInjector(config, dialogRef, dialogContainer, fallbackInjector) {
|
|
758
|
-
const userInjector = config.injector || config.viewContainerRef?.injector;
|
|
759
|
-
const providers = [
|
|
760
|
-
{ provide: DIALOG_DATA, useValue: config.data },
|
|
761
|
-
{ provide: DialogRef, useValue: dialogRef },
|
|
762
|
-
];
|
|
763
|
-
if (config.providers) {
|
|
764
|
-
if (typeof config.providers === 'function') {
|
|
765
|
-
providers.push(...config.providers(dialogRef, config, dialogContainer));
|
|
766
|
-
}
|
|
767
|
-
else {
|
|
768
|
-
providers.push(...config.providers);
|
|
769
|
-
}
|
|
625
|
+
this._ariaHiddenElements.clear();
|
|
626
|
+
if (emitEvent) {
|
|
627
|
+
this._getAfterAllClosed().next();
|
|
770
628
|
}
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
_hideNonDialogContentFromAssistiveTechnology(overlayContainer) {
|
|
633
|
+
if (overlayContainer.parentElement) {
|
|
634
|
+
const siblings = overlayContainer.parentElement.children;
|
|
635
|
+
for (let i = siblings.length - 1; i > -1; i--) {
|
|
636
|
+
const sibling = siblings[i];
|
|
637
|
+
if (sibling !== overlayContainer && sibling.nodeName !== 'SCRIPT' && sibling.nodeName !== 'STYLE' && !sibling.hasAttribute('aria-live') && !sibling.hasAttribute('popover')) {
|
|
638
|
+
this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
|
|
639
|
+
sibling.setAttribute('aria-hidden', 'true');
|
|
778
640
|
}
|
|
779
|
-
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
this._ariaHiddenElements.clear();
|
|
802
|
-
if (emitEvent) {
|
|
803
|
-
this._getAfterAllClosed().next();
|
|
804
|
-
}
|
|
805
|
-
}
|
|
806
|
-
}
|
|
807
|
-
}
|
|
808
|
-
/** Hides all of the content that isn't an overlay from assistive technology. */
|
|
809
|
-
_hideNonDialogContentFromAssistiveTechnology(overlayContainer) {
|
|
810
|
-
// Ensure that the overlay container is attached to the DOM.
|
|
811
|
-
if (overlayContainer.parentElement) {
|
|
812
|
-
const siblings = overlayContainer.parentElement.children;
|
|
813
|
-
for (let i = siblings.length - 1; i > -1; i--) {
|
|
814
|
-
const sibling = siblings[i];
|
|
815
|
-
if (sibling !== overlayContainer &&
|
|
816
|
-
sibling.nodeName !== 'SCRIPT' &&
|
|
817
|
-
sibling.nodeName !== 'STYLE' &&
|
|
818
|
-
!sibling.hasAttribute('aria-live')) {
|
|
819
|
-
this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
|
|
820
|
-
sibling.setAttribute('aria-hidden', 'true');
|
|
821
|
-
}
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
_getAfterAllClosed() {
|
|
826
|
-
const parent = this._parentDialog;
|
|
827
|
-
return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
|
|
828
|
-
}
|
|
829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
830
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: Dialog, providedIn: 'root' });
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
_getAfterAllClosed() {
|
|
645
|
+
const parent = this._parentDialog;
|
|
646
|
+
return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
|
|
647
|
+
}
|
|
648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
649
|
+
minVersion: "12.0.0",
|
|
650
|
+
version: "20.2.0-next.2",
|
|
651
|
+
ngImport: i0,
|
|
652
|
+
type: Dialog,
|
|
653
|
+
deps: [],
|
|
654
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
655
|
+
});
|
|
656
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
657
|
+
minVersion: "12.0.0",
|
|
658
|
+
version: "20.2.0-next.2",
|
|
659
|
+
ngImport: i0,
|
|
660
|
+
type: Dialog,
|
|
661
|
+
providedIn: 'root'
|
|
662
|
+
});
|
|
831
663
|
}
|
|
832
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
665
|
+
minVersion: "12.0.0",
|
|
666
|
+
version: "20.2.0-next.2",
|
|
667
|
+
ngImport: i0,
|
|
668
|
+
type: Dialog,
|
|
669
|
+
decorators: [{
|
|
670
|
+
type: Injectable,
|
|
671
|
+
args: [{
|
|
672
|
+
providedIn: 'root'
|
|
673
|
+
}]
|
|
674
|
+
}],
|
|
675
|
+
ctorParameters: () => []
|
|
676
|
+
});
|
|
840
677
|
function reverseForEach(items, callback) {
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
678
|
+
let i = items.length;
|
|
679
|
+
while (i--) {
|
|
680
|
+
callback(items[i]);
|
|
681
|
+
}
|
|
845
682
|
}
|
|
846
683
|
|
|
847
684
|
class DialogModule {
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
685
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
686
|
+
minVersion: "12.0.0",
|
|
687
|
+
version: "20.2.0-next.2",
|
|
688
|
+
ngImport: i0,
|
|
689
|
+
type: DialogModule,
|
|
690
|
+
deps: [],
|
|
691
|
+
target: i0.ɵɵFactoryTarget.NgModule
|
|
692
|
+
});
|
|
693
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({
|
|
694
|
+
minVersion: "14.0.0",
|
|
695
|
+
version: "20.2.0-next.2",
|
|
696
|
+
ngImport: i0,
|
|
697
|
+
type: DialogModule,
|
|
698
|
+
imports: [OverlayModule, PortalModule, A11yModule, CdkDialogContainer],
|
|
699
|
+
exports: [PortalModule, CdkDialogContainer]
|
|
700
|
+
});
|
|
701
|
+
static ɵinj = i0.ɵɵngDeclareInjector({
|
|
702
|
+
minVersion: "12.0.0",
|
|
703
|
+
version: "20.2.0-next.2",
|
|
704
|
+
ngImport: i0,
|
|
705
|
+
type: DialogModule,
|
|
706
|
+
providers: [Dialog],
|
|
707
|
+
imports: [OverlayModule, PortalModule, A11yModule, PortalModule]
|
|
708
|
+
});
|
|
858
709
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
711
|
+
minVersion: "12.0.0",
|
|
712
|
+
version: "20.2.0-next.2",
|
|
713
|
+
ngImport: i0,
|
|
714
|
+
type: DialogModule,
|
|
715
|
+
decorators: [{
|
|
716
|
+
type: NgModule,
|
|
717
|
+
args: [{
|
|
718
|
+
imports: [OverlayModule, PortalModule, A11yModule, CdkDialogContainer],
|
|
719
|
+
exports: [PortalModule, CdkDialogContainer],
|
|
720
|
+
providers: [Dialog]
|
|
721
|
+
}]
|
|
722
|
+
}]
|
|
723
|
+
});
|
|
872
724
|
|
|
873
725
|
export { CdkDialogContainer, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_SCROLL_STRATEGY, Dialog, DialogConfig, DialogModule, DialogRef, throwDialogContentAlreadyAttachedError, CdkPortalOutlet as ɵɵCdkPortalOutlet };
|
|
874
726
|
//# sourceMappingURL=dialog.mjs.map
|