@angular/cdk 19.2.3 → 20.0.0-next.1
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/a11y/index.d.ts +12 -843
- package/a11y-module.d-7d03e079.d.ts +313 -0
- package/accordion/index.d.ts +1 -1
- package/activedescendant-key-manager.d-11921e3a.d.ts +31 -0
- package/bidi/index.d.ts +3 -52
- package/bidi-module.d-f8648621.d.ts +53 -0
- package/coercion/index.d.ts +2 -15
- package/collections/index.d.ts +10 -269
- package/data-source.d-7cab2c9d.d.ts +42 -0
- package/dialog/index.d.ts +17 -32
- package/drag-drop/index.d.ts +14 -18
- package/fesm2022/a11y-module-e6996d20.mjs +952 -0
- package/fesm2022/a11y-module-e6996d20.mjs.map +1 -0
- package/fesm2022/a11y.mjs +42 -2448
- package/fesm2022/a11y.mjs.map +1 -1
- package/fesm2022/accordion.mjs +12 -12
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/activedescendant-key-manager-1351a9d3.mjs +16 -0
- package/fesm2022/activedescendant-key-manager-1351a9d3.mjs.map +1 -0
- package/fesm2022/array-ee3b4bab.mjs +6 -0
- package/fesm2022/array-ee3b4bab.mjs.map +1 -0
- package/fesm2022/backwards-compatibility-bcbe473e.mjs +25 -0
- package/fesm2022/backwards-compatibility-bcbe473e.mjs.map +1 -0
- package/fesm2022/bidi-module-0726b65c.mjs +78 -0
- package/fesm2022/bidi-module-0726b65c.mjs.map +1 -0
- package/fesm2022/bidi.mjs +4 -143
- package/fesm2022/bidi.mjs.map +1 -1
- package/fesm2022/breakpoints-observer-d4584b66.mjs +179 -0
- package/fesm2022/breakpoints-observer-d4584b66.mjs.map +1 -0
- package/fesm2022/cdk.mjs +1 -1
- package/fesm2022/cdk.mjs.map +1 -1
- package/fesm2022/clipboard.mjs +10 -10
- package/fesm2022/clipboard.mjs.map +1 -1
- package/fesm2022/coercion/private.mjs +2 -14
- package/fesm2022/coercion/private.mjs.map +1 -1
- package/fesm2022/coercion.mjs +5 -39
- package/fesm2022/coercion.mjs.map +1 -1
- package/fesm2022/collections.mjs +7 -472
- package/fesm2022/collections.mjs.map +1 -1
- package/fesm2022/css-pixel-value-286c9a60.mjs +10 -0
- package/fesm2022/css-pixel-value-286c9a60.mjs.map +1 -0
- package/fesm2022/data-source-5320b6fd.mjs +15 -0
- package/fesm2022/data-source-5320b6fd.mjs.map +1 -0
- package/fesm2022/dialog.mjs +37 -41
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/directionality-7ea26429.mjs +72 -0
- package/fesm2022/directionality-7ea26429.mjs.map +1 -0
- package/fesm2022/dispose-view-repeater-strategy-b11b87ea.mjs +44 -0
- package/fesm2022/dispose-view-repeater-strategy-b11b87ea.mjs.map +1 -0
- package/fesm2022/drag-drop.mjs +48 -46
- package/fesm2022/drag-drop.mjs.map +1 -1
- package/fesm2022/element-705567fe.mjs +29 -0
- package/fesm2022/element-705567fe.mjs.map +1 -0
- package/fesm2022/fake-event-detection-7055b1bd.mjs +24 -0
- package/fesm2022/fake-event-detection-7055b1bd.mjs.map +1 -0
- package/fesm2022/focus-key-manager-58d29acd.mjs +22 -0
- package/fesm2022/focus-key-manager-58d29acd.mjs.map +1 -0
- package/fesm2022/focus-monitor-cebaa0d1.mjs +629 -0
- package/fesm2022/focus-monitor-cebaa0d1.mjs.map +1 -0
- package/fesm2022/id-generator-fba495fb.mjs +37 -0
- package/fesm2022/id-generator-fba495fb.mjs.map +1 -0
- package/fesm2022/keycodes-107cd3e4.mjs +122 -0
- package/fesm2022/keycodes-107cd3e4.mjs.map +1 -0
- package/fesm2022/keycodes.mjs +2 -132
- package/fesm2022/keycodes.mjs.map +1 -1
- package/fesm2022/layout.mjs +12 -180
- package/fesm2022/layout.mjs.map +1 -1
- package/fesm2022/list-key-manager-c7b5cefb.mjs +360 -0
- package/fesm2022/list-key-manager-c7b5cefb.mjs.map +1 -0
- package/fesm2022/listbox.mjs +21 -16
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/menu.mjs +76 -56
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/modifiers-33a5859e.mjs +13 -0
- package/fesm2022/modifiers-33a5859e.mjs.map +1 -0
- package/fesm2022/observable-97c0792c.mjs +15 -0
- package/fesm2022/observable-97c0792c.mjs.map +1 -0
- package/fesm2022/observe-content-d2a6b5a0.mjs +210 -0
- package/fesm2022/observe-content-d2a6b5a0.mjs.map +1 -0
- package/fesm2022/observers/private.mjs +3 -3
- package/fesm2022/observers/private.mjs.map +1 -1
- package/fesm2022/observers.mjs +5 -209
- package/fesm2022/observers.mjs.map +1 -1
- package/fesm2022/overlay-module-863b82c9.mjs +3029 -0
- package/fesm2022/overlay-module-863b82c9.mjs.map +1 -0
- package/fesm2022/overlay.mjs +28 -3023
- package/fesm2022/overlay.mjs.map +1 -1
- package/fesm2022/passive-listeners-c0bdc49f.mjs +31 -0
- package/fesm2022/passive-listeners-c0bdc49f.mjs.map +1 -0
- package/fesm2022/platform-1be098b0.mjs +77 -0
- package/fesm2022/platform-1be098b0.mjs.map +1 -0
- package/fesm2022/platform.mjs +13 -289
- package/fesm2022/platform.mjs.map +1 -1
- package/fesm2022/portal-directives-c88fea11.mjs +615 -0
- package/fesm2022/portal-directives-c88fea11.mjs.map +1 -0
- package/fesm2022/portal.mjs +3 -675
- package/fesm2022/portal.mjs.map +1 -1
- package/fesm2022/private.mjs +3 -59
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/recycle-view-repeater-strategy-c1712813.mjs +156 -0
- package/fesm2022/recycle-view-repeater-strategy-c1712813.mjs.map +1 -0
- package/fesm2022/scrolling-61955dd1.mjs +99 -0
- package/fesm2022/scrolling-61955dd1.mjs.map +1 -0
- package/fesm2022/scrolling-module-aa9eeac5.mjs +1463 -0
- package/fesm2022/scrolling-module-aa9eeac5.mjs.map +1 -0
- package/fesm2022/scrolling.mjs +12 -1459
- package/fesm2022/scrolling.mjs.map +1 -1
- package/fesm2022/selection-model-30243dba.mjs +221 -0
- package/fesm2022/selection-model-30243dba.mjs.map +1 -0
- package/fesm2022/shadow-dom-9f403d00.mjs +49 -0
- package/fesm2022/shadow-dom-9f403d00.mjs.map +1 -0
- package/fesm2022/stepper.mjs +32 -26
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/style-loader-e14dc585.mjs +47 -0
- package/fesm2022/style-loader-e14dc585.mjs.map +1 -0
- package/fesm2022/table.mjs +87 -121
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/test-environment-34eef1ee.mjs +19 -0
- package/fesm2022/test-environment-34eef1ee.mjs.map +1 -0
- package/fesm2022/testing/selenium-webdriver.mjs +2 -1
- package/fesm2022/testing/selenium-webdriver.mjs.map +1 -1
- package/fesm2022/testing/testbed.mjs +33 -34
- package/fesm2022/testing/testbed.mjs.map +1 -1
- package/fesm2022/testing.mjs +2 -697
- package/fesm2022/testing.mjs.map +1 -1
- package/fesm2022/text-field.mjs +20 -19
- package/fesm2022/text-field.mjs.map +1 -1
- package/fesm2022/text-filtering-b60ba8a2.mjs +698 -0
- package/fesm2022/text-filtering-b60ba8a2.mjs.map +1 -0
- package/fesm2022/tree-key-manager-2f20c79c.mjs +360 -0
- package/fesm2022/tree-key-manager-2f20c79c.mjs.map +1 -0
- package/fesm2022/tree.mjs +33 -29
- package/fesm2022/tree.mjs.map +1 -1
- package/fesm2022/typeahead-11ae39bd.mjs +88 -0
- package/fesm2022/typeahead-11ae39bd.mjs.map +1 -0
- package/fesm2022/unique-selection-dispatcher-1d6f91d8.mjs +49 -0
- package/fesm2022/unique-selection-dispatcher-1d6f91d8.mjs.map +1 -0
- package/fesm2022/visually-hidden-83aea4a0.mjs +18 -0
- package/fesm2022/visually-hidden-83aea4a0.mjs.map +1 -0
- package/focus-key-manager.d-415a6958.d.ts +33 -0
- package/focus-monitor.d-810a02e6.d.ts +209 -0
- package/harness-environment.d-4d615248.d.ts +619 -0
- package/list-key-manager.d-72e9a2e7.d.ts +164 -0
- package/listbox/index.d.ts +5 -4
- package/menu/index.d.ts +14 -6
- package/number-property.d-ce316715.d.ts +15 -0
- package/observe-content.d-c08bc882.d.ts +84 -0
- package/observers/index.d.ts +4 -84
- package/overlay/index.d.ts +16 -792
- package/overlay-module.d-5d06db8a.d.ts +790 -0
- package/package.json +3 -3
- package/platform/index.d.ts +2 -31
- package/platform.d-0a5b4792.d.ts +33 -0
- package/portal/index.d.ts +5 -266
- package/portal-directives.d-d345bd53.d.ts +210 -0
- package/private/index.d.ts +2 -19
- package/schematics/migration.json +4 -4
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-update/index.d.ts +2 -2
- package/schematics/ng-update/index.js +5 -5
- package/schematics/ng-update/index.mjs +5 -5
- package/schematics/update-tool/target-version.d.ts +1 -1
- package/schematics/update-tool/target-version.js +2 -2
- package/schematics/update-tool/target-version.mjs +2 -2
- package/scrolling/index.d.ts +7 -604
- package/scrolling-module.d-a08a462d.d.ts +551 -0
- package/selection-model.d-1a70542c.d.ts +111 -0
- package/stepper/index.d.ts +5 -3
- package/style-loader.d-19baab84.d.ts +21 -0
- package/table/index.d.ts +8 -19
- package/testing/index.d.ts +2 -618
- package/testing/selenium-webdriver/index.d.ts +1 -1
- package/testing/testbed/index.d.ts +1 -1
- package/text-field/index.d.ts +1 -1
- package/tree/index.d.ts +3 -2
- package/tree-key-manager-strategy.d-603161dd.d.ts +116 -0
- package/unique-selection-dispatcher.d-7993b9f5.d.ts +32 -0
- package/view-repeater.d-79039e1f.d.ts +88 -0
- package/viewport-ruler.d-f3d3e82f.d.ts +57 -0
package/fesm2022/a11y.mjs
CHANGED
|
@@ -1,15 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
export { C as CdkMonitorFocus, c as FOCUS_MONITOR_DEFAULT_OPTIONS, d as FocusMonitor, F as FocusMonitorDetectionMode, a as INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS, b as INPUT_MODALITY_DETECTOR_OPTIONS, I as InputModalityDetector } from './focus-monitor-cebaa0d1.mjs';
|
|
2
|
+
import { F as FocusTrap, I as InteractivityChecker } from './a11y-module-e6996d20.mjs';
|
|
3
|
+
export { A as A11yModule, d as CdkAriaLive, C as CdkTrapFocus, F as FocusTrap, b as FocusTrapFactory, a as HighContrastMode, H as HighContrastModeDetector, I as InteractivityChecker, c as IsFocusableConfig, g as LIVE_ANNOUNCER_DEFAULT_OPTIONS, e as LIVE_ANNOUNCER_ELEMENT_TOKEN, f as LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, L as LiveAnnouncer } from './a11y-module-e6996d20.mjs';
|
|
4
|
+
export { _ as _IdGenerator } from './id-generator-fba495fb.mjs';
|
|
5
5
|
import { DOCUMENT } from '@angular/common';
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { _CdkPrivateStyleLoader
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
import * as i0 from '@angular/core';
|
|
7
|
+
import { inject, APP_ID, Injectable, InjectionToken, NgZone, Injector } from '@angular/core';
|
|
8
|
+
import { P as Platform } from './platform-1be098b0.mjs';
|
|
9
|
+
import { _ as _CdkPrivateStyleLoader } from './style-loader-e14dc585.mjs';
|
|
10
|
+
import { _ as _VisuallyHiddenLoader } from './visually-hidden-83aea4a0.mjs';
|
|
11
|
+
export { A as ActiveDescendantKeyManager } from './activedescendant-key-manager-1351a9d3.mjs';
|
|
12
|
+
export { F as FocusKeyManager } from './focus-key-manager-58d29acd.mjs';
|
|
13
|
+
export { L as ListKeyManager } from './list-key-manager-c7b5cefb.mjs';
|
|
14
|
+
import { Subject } from 'rxjs';
|
|
15
|
+
import { T as TREE_KEY_MANAGER } from './tree-key-manager-2f20c79c.mjs';
|
|
16
|
+
export { T as TREE_KEY_MANAGER, b as TREE_KEY_MANAGER_FACTORY, c as TREE_KEY_MANAGER_FACTORY_PROVIDER, a as TreeKeyManager } from './tree-key-manager-2f20c79c.mjs';
|
|
17
|
+
export { i as isFakeMousedownFromScreenReader, a as isFakeTouchstartFromScreenReader } from './fake-event-detection-7055b1bd.mjs';
|
|
18
|
+
import 'rxjs/operators';
|
|
19
|
+
import './keycodes-107cd3e4.mjs';
|
|
20
|
+
import './shadow-dom-9f403d00.mjs';
|
|
21
|
+
import './backwards-compatibility-bcbe473e.mjs';
|
|
22
|
+
import './passive-listeners-c0bdc49f.mjs';
|
|
23
|
+
import './element-705567fe.mjs';
|
|
24
|
+
import './breakpoints-observer-d4584b66.mjs';
|
|
25
|
+
import './array-ee3b4bab.mjs';
|
|
26
|
+
import './observe-content-d2a6b5a0.mjs';
|
|
27
|
+
import './typeahead-11ae39bd.mjs';
|
|
28
|
+
import './modifiers-33a5859e.mjs';
|
|
29
|
+
import './observable-97c0792c.mjs';
|
|
13
30
|
|
|
14
31
|
/** IDs are delimited by an empty space, as per the spec. */
|
|
15
32
|
const ID_DELIMITER = ' ';
|
|
@@ -244,10 +261,10 @@ class AriaDescriber {
|
|
|
244
261
|
_isElementNode(element) {
|
|
245
262
|
return element.nodeType === this._document.ELEMENT_NODE;
|
|
246
263
|
}
|
|
247
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
248
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: AriaDescriber, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
265
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: AriaDescriber, providedIn: 'root' });
|
|
249
266
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: AriaDescriber, decorators: [{
|
|
251
268
|
type: Injectable,
|
|
252
269
|
args: [{ providedIn: 'root' }]
|
|
253
270
|
}], ctorParameters: () => [] });
|
|
@@ -262,822 +279,6 @@ function setMessageId(element, serviceId) {
|
|
|
262
279
|
}
|
|
263
280
|
}
|
|
264
281
|
|
|
265
|
-
const DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS = 200;
|
|
266
|
-
/**
|
|
267
|
-
* Selects items based on keyboard inputs. Implements the typeahead functionality of
|
|
268
|
-
* `role="listbox"` or `role="tree"` and other related roles.
|
|
269
|
-
*/
|
|
270
|
-
class Typeahead {
|
|
271
|
-
_letterKeyStream = new Subject();
|
|
272
|
-
_items = [];
|
|
273
|
-
_selectedItemIndex = -1;
|
|
274
|
-
/** Buffer for the letters that the user has pressed */
|
|
275
|
-
_pressedLetters = [];
|
|
276
|
-
_skipPredicateFn;
|
|
277
|
-
_selectedItem = new Subject();
|
|
278
|
-
selectedItem = this._selectedItem;
|
|
279
|
-
constructor(initialItems, config) {
|
|
280
|
-
const typeAheadInterval = typeof config?.debounceInterval === 'number'
|
|
281
|
-
? config.debounceInterval
|
|
282
|
-
: DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS;
|
|
283
|
-
if (config?.skipPredicate) {
|
|
284
|
-
this._skipPredicateFn = config.skipPredicate;
|
|
285
|
-
}
|
|
286
|
-
if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
|
|
287
|
-
initialItems.length &&
|
|
288
|
-
initialItems.some(item => typeof item.getLabel !== 'function')) {
|
|
289
|
-
throw new Error('KeyManager items in typeahead mode must implement the `getLabel` method.');
|
|
290
|
-
}
|
|
291
|
-
this.setItems(initialItems);
|
|
292
|
-
this._setupKeyHandler(typeAheadInterval);
|
|
293
|
-
}
|
|
294
|
-
destroy() {
|
|
295
|
-
this._pressedLetters = [];
|
|
296
|
-
this._letterKeyStream.complete();
|
|
297
|
-
this._selectedItem.complete();
|
|
298
|
-
}
|
|
299
|
-
setCurrentSelectedItemIndex(index) {
|
|
300
|
-
this._selectedItemIndex = index;
|
|
301
|
-
}
|
|
302
|
-
setItems(items) {
|
|
303
|
-
this._items = items;
|
|
304
|
-
}
|
|
305
|
-
handleKey(event) {
|
|
306
|
-
const keyCode = event.keyCode;
|
|
307
|
-
// Attempt to use the `event.key` which also maps it to the user's keyboard language,
|
|
308
|
-
// otherwise fall back to resolving alphanumeric characters via the keyCode.
|
|
309
|
-
if (event.key && event.key.length === 1) {
|
|
310
|
-
this._letterKeyStream.next(event.key.toLocaleUpperCase());
|
|
311
|
-
}
|
|
312
|
-
else if ((keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE)) {
|
|
313
|
-
this._letterKeyStream.next(String.fromCharCode(keyCode));
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
/** Gets whether the user is currently typing into the manager using the typeahead feature. */
|
|
317
|
-
isTyping() {
|
|
318
|
-
return this._pressedLetters.length > 0;
|
|
319
|
-
}
|
|
320
|
-
/** Resets the currently stored sequence of typed letters. */
|
|
321
|
-
reset() {
|
|
322
|
-
this._pressedLetters = [];
|
|
323
|
-
}
|
|
324
|
-
_setupKeyHandler(typeAheadInterval) {
|
|
325
|
-
// Debounce the presses of non-navigational keys, collect the ones that correspond to letters
|
|
326
|
-
// and convert those letters back into a string. Afterwards find the first item that starts
|
|
327
|
-
// with that string and select it.
|
|
328
|
-
this._letterKeyStream
|
|
329
|
-
.pipe(tap(letter => this._pressedLetters.push(letter)), debounceTime(typeAheadInterval), filter(() => this._pressedLetters.length > 0), map(() => this._pressedLetters.join('').toLocaleUpperCase()))
|
|
330
|
-
.subscribe(inputString => {
|
|
331
|
-
// Start at 1 because we want to start searching at the item immediately
|
|
332
|
-
// following the current active item.
|
|
333
|
-
for (let i = 1; i < this._items.length + 1; i++) {
|
|
334
|
-
const index = (this._selectedItemIndex + i) % this._items.length;
|
|
335
|
-
const item = this._items[index];
|
|
336
|
-
if (!this._skipPredicateFn?.(item) &&
|
|
337
|
-
item.getLabel?.().toLocaleUpperCase().trim().indexOf(inputString) === 0) {
|
|
338
|
-
this._selectedItem.next(item);
|
|
339
|
-
break;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
this._pressedLetters = [];
|
|
343
|
-
});
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/**
|
|
348
|
-
* This class manages keyboard events for selectable lists. If you pass it a query list
|
|
349
|
-
* of items, it will set the active item correctly when arrow events occur.
|
|
350
|
-
*/
|
|
351
|
-
class ListKeyManager {
|
|
352
|
-
_items;
|
|
353
|
-
_activeItemIndex = -1;
|
|
354
|
-
_activeItem = signal(null);
|
|
355
|
-
_wrap = false;
|
|
356
|
-
_typeaheadSubscription = Subscription.EMPTY;
|
|
357
|
-
_itemChangesSubscription;
|
|
358
|
-
_vertical = true;
|
|
359
|
-
_horizontal;
|
|
360
|
-
_allowedModifierKeys = [];
|
|
361
|
-
_homeAndEnd = false;
|
|
362
|
-
_pageUpAndDown = { enabled: false, delta: 10 };
|
|
363
|
-
_effectRef;
|
|
364
|
-
_typeahead;
|
|
365
|
-
/**
|
|
366
|
-
* Predicate function that can be used to check whether an item should be skipped
|
|
367
|
-
* by the key manager. By default, disabled items are skipped.
|
|
368
|
-
*/
|
|
369
|
-
_skipPredicateFn = (item) => item.disabled;
|
|
370
|
-
constructor(_items, injector) {
|
|
371
|
-
this._items = _items;
|
|
372
|
-
// We allow for the items to be an array because, in some cases, the consumer may
|
|
373
|
-
// not have access to a QueryList of the items they want to manage (e.g. when the
|
|
374
|
-
// items aren't being collected via `ViewChildren` or `ContentChildren`).
|
|
375
|
-
if (_items instanceof QueryList) {
|
|
376
|
-
this._itemChangesSubscription = _items.changes.subscribe((newItems) => this._itemsChanged(newItems.toArray()));
|
|
377
|
-
}
|
|
378
|
-
else if (isSignal(_items)) {
|
|
379
|
-
if (!injector && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
380
|
-
throw new Error('ListKeyManager constructed with a signal must receive an injector');
|
|
381
|
-
}
|
|
382
|
-
this._effectRef = effect(() => this._itemsChanged(_items()), { injector });
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
/**
|
|
386
|
-
* Stream that emits any time the TAB key is pressed, so components can react
|
|
387
|
-
* when focus is shifted off of the list.
|
|
388
|
-
*/
|
|
389
|
-
tabOut = new Subject();
|
|
390
|
-
/** Stream that emits whenever the active item of the list manager changes. */
|
|
391
|
-
change = new Subject();
|
|
392
|
-
/**
|
|
393
|
-
* Sets the predicate function that determines which items should be skipped by the
|
|
394
|
-
* list key manager.
|
|
395
|
-
* @param predicate Function that determines whether the given item should be skipped.
|
|
396
|
-
*/
|
|
397
|
-
skipPredicate(predicate) {
|
|
398
|
-
this._skipPredicateFn = predicate;
|
|
399
|
-
return this;
|
|
400
|
-
}
|
|
401
|
-
/**
|
|
402
|
-
* Configures wrapping mode, which determines whether the active item will wrap to
|
|
403
|
-
* the other end of list when there are no more items in the given direction.
|
|
404
|
-
* @param shouldWrap Whether the list should wrap when reaching the end.
|
|
405
|
-
*/
|
|
406
|
-
withWrap(shouldWrap = true) {
|
|
407
|
-
this._wrap = shouldWrap;
|
|
408
|
-
return this;
|
|
409
|
-
}
|
|
410
|
-
/**
|
|
411
|
-
* Configures whether the key manager should be able to move the selection vertically.
|
|
412
|
-
* @param enabled Whether vertical selection should be enabled.
|
|
413
|
-
*/
|
|
414
|
-
withVerticalOrientation(enabled = true) {
|
|
415
|
-
this._vertical = enabled;
|
|
416
|
-
return this;
|
|
417
|
-
}
|
|
418
|
-
/**
|
|
419
|
-
* Configures the key manager to move the selection horizontally.
|
|
420
|
-
* Passing in `null` will disable horizontal movement.
|
|
421
|
-
* @param direction Direction in which the selection can be moved.
|
|
422
|
-
*/
|
|
423
|
-
withHorizontalOrientation(direction) {
|
|
424
|
-
this._horizontal = direction;
|
|
425
|
-
return this;
|
|
426
|
-
}
|
|
427
|
-
/**
|
|
428
|
-
* Modifier keys which are allowed to be held down and whose default actions will be prevented
|
|
429
|
-
* as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.
|
|
430
|
-
*/
|
|
431
|
-
withAllowedModifierKeys(keys) {
|
|
432
|
-
this._allowedModifierKeys = keys;
|
|
433
|
-
return this;
|
|
434
|
-
}
|
|
435
|
-
/**
|
|
436
|
-
* Turns on typeahead mode which allows users to set the active item by typing.
|
|
437
|
-
* @param debounceInterval Time to wait after the last keystroke before setting the active item.
|
|
438
|
-
*/
|
|
439
|
-
withTypeAhead(debounceInterval = 200) {
|
|
440
|
-
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
441
|
-
const items = this._getItemsArray();
|
|
442
|
-
if (items.length > 0 && items.some(item => typeof item.getLabel !== 'function')) {
|
|
443
|
-
throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
|
|
444
|
-
}
|
|
445
|
-
}
|
|
446
|
-
this._typeaheadSubscription.unsubscribe();
|
|
447
|
-
const items = this._getItemsArray();
|
|
448
|
-
this._typeahead = new Typeahead(items, {
|
|
449
|
-
debounceInterval: typeof debounceInterval === 'number' ? debounceInterval : undefined,
|
|
450
|
-
skipPredicate: item => this._skipPredicateFn(item),
|
|
451
|
-
});
|
|
452
|
-
this._typeaheadSubscription = this._typeahead.selectedItem.subscribe(item => {
|
|
453
|
-
this.setActiveItem(item);
|
|
454
|
-
});
|
|
455
|
-
return this;
|
|
456
|
-
}
|
|
457
|
-
/** Cancels the current typeahead sequence. */
|
|
458
|
-
cancelTypeahead() {
|
|
459
|
-
this._typeahead?.reset();
|
|
460
|
-
return this;
|
|
461
|
-
}
|
|
462
|
-
/**
|
|
463
|
-
* Configures the key manager to activate the first and last items
|
|
464
|
-
* respectively when the Home or End key is pressed.
|
|
465
|
-
* @param enabled Whether pressing the Home or End key activates the first/last item.
|
|
466
|
-
*/
|
|
467
|
-
withHomeAndEnd(enabled = true) {
|
|
468
|
-
this._homeAndEnd = enabled;
|
|
469
|
-
return this;
|
|
470
|
-
}
|
|
471
|
-
/**
|
|
472
|
-
* Configures the key manager to activate every 10th, configured or first/last element in up/down direction
|
|
473
|
-
* respectively when the Page-Up or Page-Down key is pressed.
|
|
474
|
-
* @param enabled Whether pressing the Page-Up or Page-Down key activates the first/last item.
|
|
475
|
-
* @param delta Whether pressing the Home or End key activates the first/last item.
|
|
476
|
-
*/
|
|
477
|
-
withPageUpDown(enabled = true, delta = 10) {
|
|
478
|
-
this._pageUpAndDown = { enabled, delta };
|
|
479
|
-
return this;
|
|
480
|
-
}
|
|
481
|
-
setActiveItem(item) {
|
|
482
|
-
const previousActiveItem = this._activeItem();
|
|
483
|
-
this.updateActiveItem(item);
|
|
484
|
-
if (this._activeItem() !== previousActiveItem) {
|
|
485
|
-
this.change.next(this._activeItemIndex);
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
/**
|
|
489
|
-
* Sets the active item depending on the key event passed in.
|
|
490
|
-
* @param event Keyboard event to be used for determining which element should be active.
|
|
491
|
-
*/
|
|
492
|
-
onKeydown(event) {
|
|
493
|
-
const keyCode = event.keyCode;
|
|
494
|
-
const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
|
|
495
|
-
const isModifierAllowed = modifiers.every(modifier => {
|
|
496
|
-
return !event[modifier] || this._allowedModifierKeys.indexOf(modifier) > -1;
|
|
497
|
-
});
|
|
498
|
-
switch (keyCode) {
|
|
499
|
-
case TAB:
|
|
500
|
-
this.tabOut.next();
|
|
501
|
-
return;
|
|
502
|
-
case DOWN_ARROW:
|
|
503
|
-
if (this._vertical && isModifierAllowed) {
|
|
504
|
-
this.setNextItemActive();
|
|
505
|
-
break;
|
|
506
|
-
}
|
|
507
|
-
else {
|
|
508
|
-
return;
|
|
509
|
-
}
|
|
510
|
-
case UP_ARROW:
|
|
511
|
-
if (this._vertical && isModifierAllowed) {
|
|
512
|
-
this.setPreviousItemActive();
|
|
513
|
-
break;
|
|
514
|
-
}
|
|
515
|
-
else {
|
|
516
|
-
return;
|
|
517
|
-
}
|
|
518
|
-
case RIGHT_ARROW:
|
|
519
|
-
if (this._horizontal && isModifierAllowed) {
|
|
520
|
-
this._horizontal === 'rtl' ? this.setPreviousItemActive() : this.setNextItemActive();
|
|
521
|
-
break;
|
|
522
|
-
}
|
|
523
|
-
else {
|
|
524
|
-
return;
|
|
525
|
-
}
|
|
526
|
-
case LEFT_ARROW:
|
|
527
|
-
if (this._horizontal && isModifierAllowed) {
|
|
528
|
-
this._horizontal === 'rtl' ? this.setNextItemActive() : this.setPreviousItemActive();
|
|
529
|
-
break;
|
|
530
|
-
}
|
|
531
|
-
else {
|
|
532
|
-
return;
|
|
533
|
-
}
|
|
534
|
-
case HOME:
|
|
535
|
-
if (this._homeAndEnd && isModifierAllowed) {
|
|
536
|
-
this.setFirstItemActive();
|
|
537
|
-
break;
|
|
538
|
-
}
|
|
539
|
-
else {
|
|
540
|
-
return;
|
|
541
|
-
}
|
|
542
|
-
case END:
|
|
543
|
-
if (this._homeAndEnd && isModifierAllowed) {
|
|
544
|
-
this.setLastItemActive();
|
|
545
|
-
break;
|
|
546
|
-
}
|
|
547
|
-
else {
|
|
548
|
-
return;
|
|
549
|
-
}
|
|
550
|
-
case PAGE_UP:
|
|
551
|
-
if (this._pageUpAndDown.enabled && isModifierAllowed) {
|
|
552
|
-
const targetIndex = this._activeItemIndex - this._pageUpAndDown.delta;
|
|
553
|
-
this._setActiveItemByIndex(targetIndex > 0 ? targetIndex : 0, 1);
|
|
554
|
-
break;
|
|
555
|
-
}
|
|
556
|
-
else {
|
|
557
|
-
return;
|
|
558
|
-
}
|
|
559
|
-
case PAGE_DOWN:
|
|
560
|
-
if (this._pageUpAndDown.enabled && isModifierAllowed) {
|
|
561
|
-
const targetIndex = this._activeItemIndex + this._pageUpAndDown.delta;
|
|
562
|
-
const itemsLength = this._getItemsArray().length;
|
|
563
|
-
this._setActiveItemByIndex(targetIndex < itemsLength ? targetIndex : itemsLength - 1, -1);
|
|
564
|
-
break;
|
|
565
|
-
}
|
|
566
|
-
else {
|
|
567
|
-
return;
|
|
568
|
-
}
|
|
569
|
-
default:
|
|
570
|
-
if (isModifierAllowed || hasModifierKey(event, 'shiftKey')) {
|
|
571
|
-
this._typeahead?.handleKey(event);
|
|
572
|
-
}
|
|
573
|
-
// Note that we return here, in order to avoid preventing
|
|
574
|
-
// the default action of non-navigational keys.
|
|
575
|
-
return;
|
|
576
|
-
}
|
|
577
|
-
this._typeahead?.reset();
|
|
578
|
-
event.preventDefault();
|
|
579
|
-
}
|
|
580
|
-
/** Index of the currently active item. */
|
|
581
|
-
get activeItemIndex() {
|
|
582
|
-
return this._activeItemIndex;
|
|
583
|
-
}
|
|
584
|
-
/** The active item. */
|
|
585
|
-
get activeItem() {
|
|
586
|
-
return this._activeItem();
|
|
587
|
-
}
|
|
588
|
-
/** Gets whether the user is currently typing into the manager using the typeahead feature. */
|
|
589
|
-
isTyping() {
|
|
590
|
-
return !!this._typeahead && this._typeahead.isTyping();
|
|
591
|
-
}
|
|
592
|
-
/** Sets the active item to the first enabled item in the list. */
|
|
593
|
-
setFirstItemActive() {
|
|
594
|
-
this._setActiveItemByIndex(0, 1);
|
|
595
|
-
}
|
|
596
|
-
/** Sets the active item to the last enabled item in the list. */
|
|
597
|
-
setLastItemActive() {
|
|
598
|
-
this._setActiveItemByIndex(this._getItemsArray().length - 1, -1);
|
|
599
|
-
}
|
|
600
|
-
/** Sets the active item to the next enabled item in the list. */
|
|
601
|
-
setNextItemActive() {
|
|
602
|
-
this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1);
|
|
603
|
-
}
|
|
604
|
-
/** Sets the active item to a previous enabled item in the list. */
|
|
605
|
-
setPreviousItemActive() {
|
|
606
|
-
this._activeItemIndex < 0 && this._wrap
|
|
607
|
-
? this.setLastItemActive()
|
|
608
|
-
: this._setActiveItemByDelta(-1);
|
|
609
|
-
}
|
|
610
|
-
updateActiveItem(item) {
|
|
611
|
-
const itemArray = this._getItemsArray();
|
|
612
|
-
const index = typeof item === 'number' ? item : itemArray.indexOf(item);
|
|
613
|
-
const activeItem = itemArray[index];
|
|
614
|
-
// Explicitly check for `null` and `undefined` because other falsy values are valid.
|
|
615
|
-
this._activeItem.set(activeItem == null ? null : activeItem);
|
|
616
|
-
this._activeItemIndex = index;
|
|
617
|
-
this._typeahead?.setCurrentSelectedItemIndex(index);
|
|
618
|
-
}
|
|
619
|
-
/** Cleans up the key manager. */
|
|
620
|
-
destroy() {
|
|
621
|
-
this._typeaheadSubscription.unsubscribe();
|
|
622
|
-
this._itemChangesSubscription?.unsubscribe();
|
|
623
|
-
this._effectRef?.destroy();
|
|
624
|
-
this._typeahead?.destroy();
|
|
625
|
-
this.tabOut.complete();
|
|
626
|
-
this.change.complete();
|
|
627
|
-
}
|
|
628
|
-
/**
|
|
629
|
-
* This method sets the active item, given a list of items and the delta between the
|
|
630
|
-
* currently active item and the new active item. It will calculate differently
|
|
631
|
-
* depending on whether wrap mode is turned on.
|
|
632
|
-
*/
|
|
633
|
-
_setActiveItemByDelta(delta) {
|
|
634
|
-
this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta);
|
|
635
|
-
}
|
|
636
|
-
/**
|
|
637
|
-
* Sets the active item properly given "wrap" mode. In other words, it will continue to move
|
|
638
|
-
* down the list until it finds an item that is not disabled, and it will wrap if it
|
|
639
|
-
* encounters either end of the list.
|
|
640
|
-
*/
|
|
641
|
-
_setActiveInWrapMode(delta) {
|
|
642
|
-
const items = this._getItemsArray();
|
|
643
|
-
for (let i = 1; i <= items.length; i++) {
|
|
644
|
-
const index = (this._activeItemIndex + delta * i + items.length) % items.length;
|
|
645
|
-
const item = items[index];
|
|
646
|
-
if (!this._skipPredicateFn(item)) {
|
|
647
|
-
this.setActiveItem(index);
|
|
648
|
-
return;
|
|
649
|
-
}
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
/**
|
|
653
|
-
* Sets the active item properly given the default mode. In other words, it will
|
|
654
|
-
* continue to move down the list until it finds an item that is not disabled. If
|
|
655
|
-
* it encounters either end of the list, it will stop and not wrap.
|
|
656
|
-
*/
|
|
657
|
-
_setActiveInDefaultMode(delta) {
|
|
658
|
-
this._setActiveItemByIndex(this._activeItemIndex + delta, delta);
|
|
659
|
-
}
|
|
660
|
-
/**
|
|
661
|
-
* Sets the active item to the first enabled item starting at the index specified. If the
|
|
662
|
-
* item is disabled, it will move in the fallbackDelta direction until it either
|
|
663
|
-
* finds an enabled item or encounters the end of the list.
|
|
664
|
-
*/
|
|
665
|
-
_setActiveItemByIndex(index, fallbackDelta) {
|
|
666
|
-
const items = this._getItemsArray();
|
|
667
|
-
if (!items[index]) {
|
|
668
|
-
return;
|
|
669
|
-
}
|
|
670
|
-
while (this._skipPredicateFn(items[index])) {
|
|
671
|
-
index += fallbackDelta;
|
|
672
|
-
if (!items[index]) {
|
|
673
|
-
return;
|
|
674
|
-
}
|
|
675
|
-
}
|
|
676
|
-
this.setActiveItem(index);
|
|
677
|
-
}
|
|
678
|
-
/** Returns the items as an array. */
|
|
679
|
-
_getItemsArray() {
|
|
680
|
-
if (isSignal(this._items)) {
|
|
681
|
-
return this._items();
|
|
682
|
-
}
|
|
683
|
-
return this._items instanceof QueryList ? this._items.toArray() : this._items;
|
|
684
|
-
}
|
|
685
|
-
/** Callback for when the items have changed. */
|
|
686
|
-
_itemsChanged(newItems) {
|
|
687
|
-
this._typeahead?.setItems(newItems);
|
|
688
|
-
const activeItem = this._activeItem();
|
|
689
|
-
if (activeItem) {
|
|
690
|
-
const newIndex = newItems.indexOf(activeItem);
|
|
691
|
-
if (newIndex > -1 && newIndex !== this._activeItemIndex) {
|
|
692
|
-
this._activeItemIndex = newIndex;
|
|
693
|
-
this._typeahead?.setCurrentSelectedItemIndex(newIndex);
|
|
694
|
-
}
|
|
695
|
-
}
|
|
696
|
-
}
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
class ActiveDescendantKeyManager extends ListKeyManager {
|
|
700
|
-
setActiveItem(index) {
|
|
701
|
-
if (this.activeItem) {
|
|
702
|
-
this.activeItem.setInactiveStyles();
|
|
703
|
-
}
|
|
704
|
-
super.setActiveItem(index);
|
|
705
|
-
if (this.activeItem) {
|
|
706
|
-
this.activeItem.setActiveStyles();
|
|
707
|
-
}
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
|
|
711
|
-
class FocusKeyManager extends ListKeyManager {
|
|
712
|
-
_origin = 'program';
|
|
713
|
-
/**
|
|
714
|
-
* Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.
|
|
715
|
-
* @param origin Focus origin to be used when focusing items.
|
|
716
|
-
*/
|
|
717
|
-
setFocusOrigin(origin) {
|
|
718
|
-
this._origin = origin;
|
|
719
|
-
return this;
|
|
720
|
-
}
|
|
721
|
-
setActiveItem(item) {
|
|
722
|
-
super.setActiveItem(item);
|
|
723
|
-
if (this.activeItem) {
|
|
724
|
-
this.activeItem.focus(this._origin);
|
|
725
|
-
}
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
/**
|
|
730
|
-
* This class manages keyboard events for trees. If you pass it a QueryList or other list of tree
|
|
731
|
-
* items, it will set the active item, focus, handle expansion and typeahead correctly when
|
|
732
|
-
* keyboard events occur.
|
|
733
|
-
*/
|
|
734
|
-
class TreeKeyManager {
|
|
735
|
-
/** The index of the currently active (focused) item. */
|
|
736
|
-
_activeItemIndex = -1;
|
|
737
|
-
/** The currently active (focused) item. */
|
|
738
|
-
_activeItem = null;
|
|
739
|
-
/** Whether or not we activate the item when it's focused. */
|
|
740
|
-
_shouldActivationFollowFocus = false;
|
|
741
|
-
/**
|
|
742
|
-
* The orientation that the tree is laid out in. In `rtl` mode, the behavior of Left and
|
|
743
|
-
* Right arrow are switched.
|
|
744
|
-
*/
|
|
745
|
-
_horizontalOrientation = 'ltr';
|
|
746
|
-
/**
|
|
747
|
-
* Predicate function that can be used to check whether an item should be skipped
|
|
748
|
-
* by the key manager.
|
|
749
|
-
*
|
|
750
|
-
* The default value for this doesn't skip any elements in order to keep tree items focusable
|
|
751
|
-
* when disabled. This aligns with ARIA guidelines:
|
|
752
|
-
* https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols.
|
|
753
|
-
*/
|
|
754
|
-
_skipPredicateFn = (_item) => false;
|
|
755
|
-
/** Function to determine equivalent items. */
|
|
756
|
-
_trackByFn = (item) => item;
|
|
757
|
-
/** Synchronous cache of the items to manage. */
|
|
758
|
-
_items = [];
|
|
759
|
-
_typeahead;
|
|
760
|
-
_typeaheadSubscription = Subscription.EMPTY;
|
|
761
|
-
_hasInitialFocused = false;
|
|
762
|
-
_initializeFocus() {
|
|
763
|
-
if (this._hasInitialFocused || this._items.length === 0) {
|
|
764
|
-
return;
|
|
765
|
-
}
|
|
766
|
-
let activeIndex = 0;
|
|
767
|
-
for (let i = 0; i < this._items.length; i++) {
|
|
768
|
-
if (!this._skipPredicateFn(this._items[i]) && !this._isItemDisabled(this._items[i])) {
|
|
769
|
-
activeIndex = i;
|
|
770
|
-
break;
|
|
771
|
-
}
|
|
772
|
-
}
|
|
773
|
-
const activeItem = this._items[activeIndex];
|
|
774
|
-
// Use `makeFocusable` here, because we want the item to just be focusable, not actually
|
|
775
|
-
// capture the focus since the user isn't interacting with it. See #29628.
|
|
776
|
-
if (activeItem.makeFocusable) {
|
|
777
|
-
this._activeItem?.unfocus();
|
|
778
|
-
this._activeItemIndex = activeIndex;
|
|
779
|
-
this._activeItem = activeItem;
|
|
780
|
-
this._typeahead?.setCurrentSelectedItemIndex(activeIndex);
|
|
781
|
-
activeItem.makeFocusable();
|
|
782
|
-
}
|
|
783
|
-
else {
|
|
784
|
-
// Backwards compatibility for items that don't implement `makeFocusable`.
|
|
785
|
-
this.focusItem(activeIndex);
|
|
786
|
-
}
|
|
787
|
-
this._hasInitialFocused = true;
|
|
788
|
-
}
|
|
789
|
-
/**
|
|
790
|
-
*
|
|
791
|
-
* @param items List of TreeKeyManager options. Can be synchronous or asynchronous.
|
|
792
|
-
* @param config Optional configuration options. By default, use 'ltr' horizontal orientation. By
|
|
793
|
-
* default, do not skip any nodes. By default, key manager only calls `focus` method when items
|
|
794
|
-
* are focused and does not call `activate`. If `typeaheadDefaultInterval` is `true`, use a
|
|
795
|
-
* default interval of 200ms.
|
|
796
|
-
*/
|
|
797
|
-
constructor(items, config) {
|
|
798
|
-
// We allow for the items to be an array or Observable because, in some cases, the consumer may
|
|
799
|
-
// not have access to a QueryList of the items they want to manage (e.g. when the
|
|
800
|
-
// items aren't being collected via `ViewChildren` or `ContentChildren`).
|
|
801
|
-
if (items instanceof QueryList) {
|
|
802
|
-
this._items = items.toArray();
|
|
803
|
-
items.changes.subscribe((newItems) => {
|
|
804
|
-
this._items = newItems.toArray();
|
|
805
|
-
this._typeahead?.setItems(this._items);
|
|
806
|
-
this._updateActiveItemIndex(this._items);
|
|
807
|
-
this._initializeFocus();
|
|
808
|
-
});
|
|
809
|
-
}
|
|
810
|
-
else if (isObservable(items)) {
|
|
811
|
-
items.subscribe(newItems => {
|
|
812
|
-
this._items = newItems;
|
|
813
|
-
this._typeahead?.setItems(newItems);
|
|
814
|
-
this._updateActiveItemIndex(newItems);
|
|
815
|
-
this._initializeFocus();
|
|
816
|
-
});
|
|
817
|
-
}
|
|
818
|
-
else {
|
|
819
|
-
this._items = items;
|
|
820
|
-
this._initializeFocus();
|
|
821
|
-
}
|
|
822
|
-
if (typeof config.shouldActivationFollowFocus === 'boolean') {
|
|
823
|
-
this._shouldActivationFollowFocus = config.shouldActivationFollowFocus;
|
|
824
|
-
}
|
|
825
|
-
if (config.horizontalOrientation) {
|
|
826
|
-
this._horizontalOrientation = config.horizontalOrientation;
|
|
827
|
-
}
|
|
828
|
-
if (config.skipPredicate) {
|
|
829
|
-
this._skipPredicateFn = config.skipPredicate;
|
|
830
|
-
}
|
|
831
|
-
if (config.trackBy) {
|
|
832
|
-
this._trackByFn = config.trackBy;
|
|
833
|
-
}
|
|
834
|
-
if (typeof config.typeAheadDebounceInterval !== 'undefined') {
|
|
835
|
-
this._setTypeAhead(config.typeAheadDebounceInterval);
|
|
836
|
-
}
|
|
837
|
-
}
|
|
838
|
-
/** Stream that emits any time the focused item changes. */
|
|
839
|
-
change = new Subject();
|
|
840
|
-
/** Cleans up the key manager. */
|
|
841
|
-
destroy() {
|
|
842
|
-
this._typeaheadSubscription.unsubscribe();
|
|
843
|
-
this._typeahead?.destroy();
|
|
844
|
-
this.change.complete();
|
|
845
|
-
}
|
|
846
|
-
/**
|
|
847
|
-
* Handles a keyboard event on the tree.
|
|
848
|
-
* @param event Keyboard event that represents the user interaction with the tree.
|
|
849
|
-
*/
|
|
850
|
-
onKeydown(event) {
|
|
851
|
-
const key = event.key;
|
|
852
|
-
switch (key) {
|
|
853
|
-
case 'Tab':
|
|
854
|
-
// Return early here, in order to allow Tab to actually tab out of the tree
|
|
855
|
-
return;
|
|
856
|
-
case 'ArrowDown':
|
|
857
|
-
this._focusNextItem();
|
|
858
|
-
break;
|
|
859
|
-
case 'ArrowUp':
|
|
860
|
-
this._focusPreviousItem();
|
|
861
|
-
break;
|
|
862
|
-
case 'ArrowRight':
|
|
863
|
-
this._horizontalOrientation === 'rtl'
|
|
864
|
-
? this._collapseCurrentItem()
|
|
865
|
-
: this._expandCurrentItem();
|
|
866
|
-
break;
|
|
867
|
-
case 'ArrowLeft':
|
|
868
|
-
this._horizontalOrientation === 'rtl'
|
|
869
|
-
? this._expandCurrentItem()
|
|
870
|
-
: this._collapseCurrentItem();
|
|
871
|
-
break;
|
|
872
|
-
case 'Home':
|
|
873
|
-
this._focusFirstItem();
|
|
874
|
-
break;
|
|
875
|
-
case 'End':
|
|
876
|
-
this._focusLastItem();
|
|
877
|
-
break;
|
|
878
|
-
case 'Enter':
|
|
879
|
-
case ' ':
|
|
880
|
-
this._activateCurrentItem();
|
|
881
|
-
break;
|
|
882
|
-
default:
|
|
883
|
-
if (event.key === '*') {
|
|
884
|
-
this._expandAllItemsAtCurrentItemLevel();
|
|
885
|
-
break;
|
|
886
|
-
}
|
|
887
|
-
this._typeahead?.handleKey(event);
|
|
888
|
-
// Return here, in order to avoid preventing the default action of non-navigational
|
|
889
|
-
// keys or resetting the buffer of pressed letters.
|
|
890
|
-
return;
|
|
891
|
-
}
|
|
892
|
-
// Reset the typeahead since the user has used a navigational key.
|
|
893
|
-
this._typeahead?.reset();
|
|
894
|
-
event.preventDefault();
|
|
895
|
-
}
|
|
896
|
-
/** Index of the currently active item. */
|
|
897
|
-
getActiveItemIndex() {
|
|
898
|
-
return this._activeItemIndex;
|
|
899
|
-
}
|
|
900
|
-
/** The currently active item. */
|
|
901
|
-
getActiveItem() {
|
|
902
|
-
return this._activeItem;
|
|
903
|
-
}
|
|
904
|
-
/** Focus the first available item. */
|
|
905
|
-
_focusFirstItem() {
|
|
906
|
-
this.focusItem(this._findNextAvailableItemIndex(-1));
|
|
907
|
-
}
|
|
908
|
-
/** Focus the last available item. */
|
|
909
|
-
_focusLastItem() {
|
|
910
|
-
this.focusItem(this._findPreviousAvailableItemIndex(this._items.length));
|
|
911
|
-
}
|
|
912
|
-
/** Focus the next available item. */
|
|
913
|
-
_focusNextItem() {
|
|
914
|
-
this.focusItem(this._findNextAvailableItemIndex(this._activeItemIndex));
|
|
915
|
-
}
|
|
916
|
-
/** Focus the previous available item. */
|
|
917
|
-
_focusPreviousItem() {
|
|
918
|
-
this.focusItem(this._findPreviousAvailableItemIndex(this._activeItemIndex));
|
|
919
|
-
}
|
|
920
|
-
focusItem(itemOrIndex, options = {}) {
|
|
921
|
-
// Set default options
|
|
922
|
-
options.emitChangeEvent ??= true;
|
|
923
|
-
let index = typeof itemOrIndex === 'number'
|
|
924
|
-
? itemOrIndex
|
|
925
|
-
: this._items.findIndex(item => this._trackByFn(item) === this._trackByFn(itemOrIndex));
|
|
926
|
-
if (index < 0 || index >= this._items.length) {
|
|
927
|
-
return;
|
|
928
|
-
}
|
|
929
|
-
const activeItem = this._items[index];
|
|
930
|
-
// If we're just setting the same item, don't re-call activate or focus
|
|
931
|
-
if (this._activeItem !== null &&
|
|
932
|
-
this._trackByFn(activeItem) === this._trackByFn(this._activeItem)) {
|
|
933
|
-
return;
|
|
934
|
-
}
|
|
935
|
-
const previousActiveItem = this._activeItem;
|
|
936
|
-
this._activeItem = activeItem ?? null;
|
|
937
|
-
this._activeItemIndex = index;
|
|
938
|
-
this._typeahead?.setCurrentSelectedItemIndex(index);
|
|
939
|
-
this._activeItem?.focus();
|
|
940
|
-
previousActiveItem?.unfocus();
|
|
941
|
-
if (options.emitChangeEvent) {
|
|
942
|
-
this.change.next(this._activeItem);
|
|
943
|
-
}
|
|
944
|
-
if (this._shouldActivationFollowFocus) {
|
|
945
|
-
this._activateCurrentItem();
|
|
946
|
-
}
|
|
947
|
-
}
|
|
948
|
-
_updateActiveItemIndex(newItems) {
|
|
949
|
-
const activeItem = this._activeItem;
|
|
950
|
-
if (!activeItem) {
|
|
951
|
-
return;
|
|
952
|
-
}
|
|
953
|
-
const newIndex = newItems.findIndex(item => this._trackByFn(item) === this._trackByFn(activeItem));
|
|
954
|
-
if (newIndex > -1 && newIndex !== this._activeItemIndex) {
|
|
955
|
-
this._activeItemIndex = newIndex;
|
|
956
|
-
this._typeahead?.setCurrentSelectedItemIndex(newIndex);
|
|
957
|
-
}
|
|
958
|
-
}
|
|
959
|
-
_setTypeAhead(debounceInterval) {
|
|
960
|
-
this._typeahead = new Typeahead(this._items, {
|
|
961
|
-
debounceInterval: typeof debounceInterval === 'number' ? debounceInterval : undefined,
|
|
962
|
-
skipPredicate: item => this._skipPredicateFn(item),
|
|
963
|
-
});
|
|
964
|
-
this._typeaheadSubscription = this._typeahead.selectedItem.subscribe(item => {
|
|
965
|
-
this.focusItem(item);
|
|
966
|
-
});
|
|
967
|
-
}
|
|
968
|
-
_findNextAvailableItemIndex(startingIndex) {
|
|
969
|
-
for (let i = startingIndex + 1; i < this._items.length; i++) {
|
|
970
|
-
if (!this._skipPredicateFn(this._items[i])) {
|
|
971
|
-
return i;
|
|
972
|
-
}
|
|
973
|
-
}
|
|
974
|
-
return startingIndex;
|
|
975
|
-
}
|
|
976
|
-
_findPreviousAvailableItemIndex(startingIndex) {
|
|
977
|
-
for (let i = startingIndex - 1; i >= 0; i--) {
|
|
978
|
-
if (!this._skipPredicateFn(this._items[i])) {
|
|
979
|
-
return i;
|
|
980
|
-
}
|
|
981
|
-
}
|
|
982
|
-
return startingIndex;
|
|
983
|
-
}
|
|
984
|
-
/**
|
|
985
|
-
* If the item is already expanded, we collapse the item. Otherwise, we will focus the parent.
|
|
986
|
-
*/
|
|
987
|
-
_collapseCurrentItem() {
|
|
988
|
-
if (!this._activeItem) {
|
|
989
|
-
return;
|
|
990
|
-
}
|
|
991
|
-
if (this._isCurrentItemExpanded()) {
|
|
992
|
-
this._activeItem.collapse();
|
|
993
|
-
}
|
|
994
|
-
else {
|
|
995
|
-
const parent = this._activeItem.getParent();
|
|
996
|
-
if (!parent || this._skipPredicateFn(parent)) {
|
|
997
|
-
return;
|
|
998
|
-
}
|
|
999
|
-
this.focusItem(parent);
|
|
1000
|
-
}
|
|
1001
|
-
}
|
|
1002
|
-
/**
|
|
1003
|
-
* If the item is already collapsed, we expand the item. Otherwise, we will focus the first child.
|
|
1004
|
-
*/
|
|
1005
|
-
_expandCurrentItem() {
|
|
1006
|
-
if (!this._activeItem) {
|
|
1007
|
-
return;
|
|
1008
|
-
}
|
|
1009
|
-
if (!this._isCurrentItemExpanded()) {
|
|
1010
|
-
this._activeItem.expand();
|
|
1011
|
-
}
|
|
1012
|
-
else {
|
|
1013
|
-
coerceObservable(this._activeItem.getChildren())
|
|
1014
|
-
.pipe(take(1))
|
|
1015
|
-
.subscribe(children => {
|
|
1016
|
-
const firstChild = children.find(child => !this._skipPredicateFn(child));
|
|
1017
|
-
if (!firstChild) {
|
|
1018
|
-
return;
|
|
1019
|
-
}
|
|
1020
|
-
this.focusItem(firstChild);
|
|
1021
|
-
});
|
|
1022
|
-
}
|
|
1023
|
-
}
|
|
1024
|
-
_isCurrentItemExpanded() {
|
|
1025
|
-
if (!this._activeItem) {
|
|
1026
|
-
return false;
|
|
1027
|
-
}
|
|
1028
|
-
return typeof this._activeItem.isExpanded === 'boolean'
|
|
1029
|
-
? this._activeItem.isExpanded
|
|
1030
|
-
: this._activeItem.isExpanded();
|
|
1031
|
-
}
|
|
1032
|
-
_isItemDisabled(item) {
|
|
1033
|
-
return typeof item.isDisabled === 'boolean' ? item.isDisabled : item.isDisabled?.();
|
|
1034
|
-
}
|
|
1035
|
-
/** For all items that are the same level as the current item, we expand those items. */
|
|
1036
|
-
_expandAllItemsAtCurrentItemLevel() {
|
|
1037
|
-
if (!this._activeItem) {
|
|
1038
|
-
return;
|
|
1039
|
-
}
|
|
1040
|
-
const parent = this._activeItem.getParent();
|
|
1041
|
-
let itemsToExpand;
|
|
1042
|
-
if (!parent) {
|
|
1043
|
-
itemsToExpand = of(this._items.filter(item => item.getParent() === null));
|
|
1044
|
-
}
|
|
1045
|
-
else {
|
|
1046
|
-
itemsToExpand = coerceObservable(parent.getChildren());
|
|
1047
|
-
}
|
|
1048
|
-
itemsToExpand.pipe(take(1)).subscribe(items => {
|
|
1049
|
-
for (const item of items) {
|
|
1050
|
-
item.expand();
|
|
1051
|
-
}
|
|
1052
|
-
});
|
|
1053
|
-
}
|
|
1054
|
-
_activateCurrentItem() {
|
|
1055
|
-
this._activeItem?.activate();
|
|
1056
|
-
}
|
|
1057
|
-
}
|
|
1058
|
-
/**
|
|
1059
|
-
* @docs-private
|
|
1060
|
-
* @deprecated No longer used, will be removed.
|
|
1061
|
-
* @breaking-change 21.0.0
|
|
1062
|
-
*/
|
|
1063
|
-
function TREE_KEY_MANAGER_FACTORY() {
|
|
1064
|
-
return (items, options) => new TreeKeyManager(items, options);
|
|
1065
|
-
}
|
|
1066
|
-
/** Injection token that determines the key manager to use. */
|
|
1067
|
-
const TREE_KEY_MANAGER = new InjectionToken('tree-key-manager', {
|
|
1068
|
-
providedIn: 'root',
|
|
1069
|
-
factory: TREE_KEY_MANAGER_FACTORY,
|
|
1070
|
-
});
|
|
1071
|
-
/**
|
|
1072
|
-
* @docs-private
|
|
1073
|
-
* @deprecated No longer used, will be removed.
|
|
1074
|
-
* @breaking-change 21.0.0
|
|
1075
|
-
*/
|
|
1076
|
-
const TREE_KEY_MANAGER_FACTORY_PROVIDER = {
|
|
1077
|
-
provide: TREE_KEY_MANAGER,
|
|
1078
|
-
useFactory: TREE_KEY_MANAGER_FACTORY,
|
|
1079
|
-
};
|
|
1080
|
-
|
|
1081
282
|
// NoopTreeKeyManager is a "noop" implementation of TreeKeyMangerStrategy. Methods are noops. Does
|
|
1082
283
|
// not emit to streams.
|
|
1083
284
|
//
|
|
@@ -1162,620 +363,10 @@ const NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER = {
|
|
|
1162
363
|
};
|
|
1163
364
|
|
|
1164
365
|
/**
|
|
1165
|
-
*
|
|
1166
|
-
|
|
1167
|
-
class
|
|
1168
|
-
|
|
1169
|
-
* Whether to count an element as focusable even if it is not currently visible.
|
|
1170
|
-
*/
|
|
1171
|
-
ignoreVisibility = false;
|
|
1172
|
-
}
|
|
1173
|
-
// The InteractivityChecker leans heavily on the ally.js accessibility utilities.
|
|
1174
|
-
// Methods like `isTabbable` are only covering specific edge-cases for the browsers which are
|
|
1175
|
-
// supported.
|
|
1176
|
-
/**
|
|
1177
|
-
* Utility for checking the interactivity of an element, such as whether it is focusable or
|
|
1178
|
-
* tabbable.
|
|
1179
|
-
*/
|
|
1180
|
-
class InteractivityChecker {
|
|
1181
|
-
_platform = inject(Platform);
|
|
1182
|
-
constructor() { }
|
|
1183
|
-
/**
|
|
1184
|
-
* Gets whether an element is disabled.
|
|
1185
|
-
*
|
|
1186
|
-
* @param element Element to be checked.
|
|
1187
|
-
* @returns Whether the element is disabled.
|
|
1188
|
-
*/
|
|
1189
|
-
isDisabled(element) {
|
|
1190
|
-
// This does not capture some cases, such as a non-form control with a disabled attribute or
|
|
1191
|
-
// a form control inside of a disabled form, but should capture the most common cases.
|
|
1192
|
-
return element.hasAttribute('disabled');
|
|
1193
|
-
}
|
|
1194
|
-
/**
|
|
1195
|
-
* Gets whether an element is visible for the purposes of interactivity.
|
|
1196
|
-
*
|
|
1197
|
-
* This will capture states like `display: none` and `visibility: hidden`, but not things like
|
|
1198
|
-
* being clipped by an `overflow: hidden` parent or being outside the viewport.
|
|
1199
|
-
*
|
|
1200
|
-
* @returns Whether the element is visible.
|
|
1201
|
-
*/
|
|
1202
|
-
isVisible(element) {
|
|
1203
|
-
return hasGeometry(element) && getComputedStyle(element).visibility === 'visible';
|
|
1204
|
-
}
|
|
1205
|
-
/**
|
|
1206
|
-
* Gets whether an element can be reached via Tab key.
|
|
1207
|
-
* Assumes that the element has already been checked with isFocusable.
|
|
1208
|
-
*
|
|
1209
|
-
* @param element Element to be checked.
|
|
1210
|
-
* @returns Whether the element is tabbable.
|
|
1211
|
-
*/
|
|
1212
|
-
isTabbable(element) {
|
|
1213
|
-
// Nothing is tabbable on the server 😎
|
|
1214
|
-
if (!this._platform.isBrowser) {
|
|
1215
|
-
return false;
|
|
1216
|
-
}
|
|
1217
|
-
const frameElement = getFrameElement(getWindow(element));
|
|
1218
|
-
if (frameElement) {
|
|
1219
|
-
// Frame elements inherit their tabindex onto all child elements.
|
|
1220
|
-
if (getTabIndexValue(frameElement) === -1) {
|
|
1221
|
-
return false;
|
|
1222
|
-
}
|
|
1223
|
-
// Browsers disable tabbing to an element inside of an invisible frame.
|
|
1224
|
-
if (!this.isVisible(frameElement)) {
|
|
1225
|
-
return false;
|
|
1226
|
-
}
|
|
1227
|
-
}
|
|
1228
|
-
let nodeName = element.nodeName.toLowerCase();
|
|
1229
|
-
let tabIndexValue = getTabIndexValue(element);
|
|
1230
|
-
if (element.hasAttribute('contenteditable')) {
|
|
1231
|
-
return tabIndexValue !== -1;
|
|
1232
|
-
}
|
|
1233
|
-
if (nodeName === 'iframe' || nodeName === 'object') {
|
|
1234
|
-
// The frame or object's content may be tabbable depending on the content, but it's
|
|
1235
|
-
// not possibly to reliably detect the content of the frames. We always consider such
|
|
1236
|
-
// elements as non-tabbable.
|
|
1237
|
-
return false;
|
|
1238
|
-
}
|
|
1239
|
-
// In iOS, the browser only considers some specific elements as tabbable.
|
|
1240
|
-
if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
|
|
1241
|
-
return false;
|
|
1242
|
-
}
|
|
1243
|
-
if (nodeName === 'audio') {
|
|
1244
|
-
// Audio elements without controls enabled are never tabbable, regardless
|
|
1245
|
-
// of the tabindex attribute explicitly being set.
|
|
1246
|
-
if (!element.hasAttribute('controls')) {
|
|
1247
|
-
return false;
|
|
1248
|
-
}
|
|
1249
|
-
// Audio elements with controls are by default tabbable unless the
|
|
1250
|
-
// tabindex attribute is set to `-1` explicitly.
|
|
1251
|
-
return tabIndexValue !== -1;
|
|
1252
|
-
}
|
|
1253
|
-
if (nodeName === 'video') {
|
|
1254
|
-
// For all video elements, if the tabindex attribute is set to `-1`, the video
|
|
1255
|
-
// is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`
|
|
1256
|
-
// property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The
|
|
1257
|
-
// tabindex attribute is the source of truth here.
|
|
1258
|
-
if (tabIndexValue === -1) {
|
|
1259
|
-
return false;
|
|
1260
|
-
}
|
|
1261
|
-
// If the tabindex is explicitly set, and not `-1` (as per check before), the
|
|
1262
|
-
// video element is always tabbable (regardless of whether it has controls or not).
|
|
1263
|
-
if (tabIndexValue !== null) {
|
|
1264
|
-
return true;
|
|
1265
|
-
}
|
|
1266
|
-
// Otherwise (when no explicit tabindex is set), a video is only tabbable if it
|
|
1267
|
-
// has controls enabled. Firefox is special as videos are always tabbable regardless
|
|
1268
|
-
// of whether there are controls or not.
|
|
1269
|
-
return this._platform.FIREFOX || element.hasAttribute('controls');
|
|
1270
|
-
}
|
|
1271
|
-
return element.tabIndex >= 0;
|
|
1272
|
-
}
|
|
1273
|
-
/**
|
|
1274
|
-
* Gets whether an element can be focused by the user.
|
|
1275
|
-
*
|
|
1276
|
-
* @param element Element to be checked.
|
|
1277
|
-
* @param config The config object with options to customize this method's behavior
|
|
1278
|
-
* @returns Whether the element is focusable.
|
|
1279
|
-
*/
|
|
1280
|
-
isFocusable(element, config) {
|
|
1281
|
-
// Perform checks in order of left to most expensive.
|
|
1282
|
-
// Again, naive approach that does not capture many edge cases and browser quirks.
|
|
1283
|
-
return (isPotentiallyFocusable(element) &&
|
|
1284
|
-
!this.isDisabled(element) &&
|
|
1285
|
-
(config?.ignoreVisibility || this.isVisible(element)));
|
|
1286
|
-
}
|
|
1287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InteractivityChecker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1288
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InteractivityChecker, providedIn: 'root' });
|
|
1289
|
-
}
|
|
1290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InteractivityChecker, decorators: [{
|
|
1291
|
-
type: Injectable,
|
|
1292
|
-
args: [{ providedIn: 'root' }]
|
|
1293
|
-
}], ctorParameters: () => [] });
|
|
1294
|
-
/**
|
|
1295
|
-
* Returns the frame element from a window object. Since browsers like MS Edge throw errors if
|
|
1296
|
-
* the frameElement property is being accessed from a different host address, this property
|
|
1297
|
-
* should be accessed carefully.
|
|
1298
|
-
*/
|
|
1299
|
-
function getFrameElement(window) {
|
|
1300
|
-
try {
|
|
1301
|
-
return window.frameElement;
|
|
1302
|
-
}
|
|
1303
|
-
catch {
|
|
1304
|
-
return null;
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
/** Checks whether the specified element has any geometry / rectangles. */
|
|
1308
|
-
function hasGeometry(element) {
|
|
1309
|
-
// Use logic from jQuery to check for an invisible element.
|
|
1310
|
-
// See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12
|
|
1311
|
-
return !!(element.offsetWidth ||
|
|
1312
|
-
element.offsetHeight ||
|
|
1313
|
-
(typeof element.getClientRects === 'function' && element.getClientRects().length));
|
|
1314
|
-
}
|
|
1315
|
-
/** Gets whether an element's */
|
|
1316
|
-
function isNativeFormElement(element) {
|
|
1317
|
-
let nodeName = element.nodeName.toLowerCase();
|
|
1318
|
-
return (nodeName === 'input' ||
|
|
1319
|
-
nodeName === 'select' ||
|
|
1320
|
-
nodeName === 'button' ||
|
|
1321
|
-
nodeName === 'textarea');
|
|
1322
|
-
}
|
|
1323
|
-
/** Gets whether an element is an `<input type="hidden">`. */
|
|
1324
|
-
function isHiddenInput(element) {
|
|
1325
|
-
return isInputElement(element) && element.type == 'hidden';
|
|
1326
|
-
}
|
|
1327
|
-
/** Gets whether an element is an anchor that has an href attribute. */
|
|
1328
|
-
function isAnchorWithHref(element) {
|
|
1329
|
-
return isAnchorElement(element) && element.hasAttribute('href');
|
|
1330
|
-
}
|
|
1331
|
-
/** Gets whether an element is an input element. */
|
|
1332
|
-
function isInputElement(element) {
|
|
1333
|
-
return element.nodeName.toLowerCase() == 'input';
|
|
1334
|
-
}
|
|
1335
|
-
/** Gets whether an element is an anchor element. */
|
|
1336
|
-
function isAnchorElement(element) {
|
|
1337
|
-
return element.nodeName.toLowerCase() == 'a';
|
|
1338
|
-
}
|
|
1339
|
-
/** Gets whether an element has a valid tabindex. */
|
|
1340
|
-
function hasValidTabIndex(element) {
|
|
1341
|
-
if (!element.hasAttribute('tabindex') || element.tabIndex === undefined) {
|
|
1342
|
-
return false;
|
|
1343
|
-
}
|
|
1344
|
-
let tabIndex = element.getAttribute('tabindex');
|
|
1345
|
-
return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));
|
|
1346
|
-
}
|
|
1347
|
-
/**
|
|
1348
|
-
* Returns the parsed tabindex from the element attributes instead of returning the
|
|
1349
|
-
* evaluated tabindex from the browsers defaults.
|
|
1350
|
-
*/
|
|
1351
|
-
function getTabIndexValue(element) {
|
|
1352
|
-
if (!hasValidTabIndex(element)) {
|
|
1353
|
-
return null;
|
|
1354
|
-
}
|
|
1355
|
-
// See browser issue in Gecko https://bugzilla.mozilla.org/show_bug.cgi?id=1128054
|
|
1356
|
-
const tabIndex = parseInt(element.getAttribute('tabindex') || '', 10);
|
|
1357
|
-
return isNaN(tabIndex) ? -1 : tabIndex;
|
|
1358
|
-
}
|
|
1359
|
-
/** Checks whether the specified element is potentially tabbable on iOS */
|
|
1360
|
-
function isPotentiallyTabbableIOS(element) {
|
|
1361
|
-
let nodeName = element.nodeName.toLowerCase();
|
|
1362
|
-
let inputType = nodeName === 'input' && element.type;
|
|
1363
|
-
return (inputType === 'text' ||
|
|
1364
|
-
inputType === 'password' ||
|
|
1365
|
-
nodeName === 'select' ||
|
|
1366
|
-
nodeName === 'textarea');
|
|
1367
|
-
}
|
|
1368
|
-
/**
|
|
1369
|
-
* Gets whether an element is potentially focusable without taking current visible/disabled state
|
|
1370
|
-
* into account.
|
|
1371
|
-
*/
|
|
1372
|
-
function isPotentiallyFocusable(element) {
|
|
1373
|
-
// Inputs are potentially focusable *unless* they're type="hidden".
|
|
1374
|
-
if (isHiddenInput(element)) {
|
|
1375
|
-
return false;
|
|
1376
|
-
}
|
|
1377
|
-
return (isNativeFormElement(element) ||
|
|
1378
|
-
isAnchorWithHref(element) ||
|
|
1379
|
-
element.hasAttribute('contenteditable') ||
|
|
1380
|
-
hasValidTabIndex(element));
|
|
1381
|
-
}
|
|
1382
|
-
/** Gets the parent window of a DOM node with regards of being inside of an iframe. */
|
|
1383
|
-
function getWindow(node) {
|
|
1384
|
-
// ownerDocument is null if `node` itself *is* a document.
|
|
1385
|
-
return (node.ownerDocument && node.ownerDocument.defaultView) || window;
|
|
1386
|
-
}
|
|
1387
|
-
|
|
1388
|
-
/**
|
|
1389
|
-
* Class that allows for trapping focus within a DOM element.
|
|
1390
|
-
*
|
|
1391
|
-
* This class currently uses a relatively simple approach to focus trapping.
|
|
1392
|
-
* It assumes that the tab order is the same as DOM order, which is not necessarily true.
|
|
1393
|
-
* Things like `tabIndex > 0`, flex `order`, and shadow roots can cause the two to be misaligned.
|
|
1394
|
-
*/
|
|
1395
|
-
class FocusTrap {
|
|
1396
|
-
_element;
|
|
1397
|
-
_checker;
|
|
1398
|
-
_ngZone;
|
|
1399
|
-
_document;
|
|
1400
|
-
_injector;
|
|
1401
|
-
_startAnchor;
|
|
1402
|
-
_endAnchor;
|
|
1403
|
-
_hasAttached = false;
|
|
1404
|
-
// Event listeners for the anchors. Need to be regular functions so that we can unbind them later.
|
|
1405
|
-
startAnchorListener = () => this.focusLastTabbableElement();
|
|
1406
|
-
endAnchorListener = () => this.focusFirstTabbableElement();
|
|
1407
|
-
/** Whether the focus trap is active. */
|
|
1408
|
-
get enabled() {
|
|
1409
|
-
return this._enabled;
|
|
1410
|
-
}
|
|
1411
|
-
set enabled(value) {
|
|
1412
|
-
this._enabled = value;
|
|
1413
|
-
if (this._startAnchor && this._endAnchor) {
|
|
1414
|
-
this._toggleAnchorTabIndex(value, this._startAnchor);
|
|
1415
|
-
this._toggleAnchorTabIndex(value, this._endAnchor);
|
|
1416
|
-
}
|
|
1417
|
-
}
|
|
1418
|
-
_enabled = true;
|
|
1419
|
-
constructor(_element, _checker, _ngZone, _document, deferAnchors = false,
|
|
1420
|
-
/** @breaking-change 20.0.0 param to become required */
|
|
1421
|
-
_injector) {
|
|
1422
|
-
this._element = _element;
|
|
1423
|
-
this._checker = _checker;
|
|
1424
|
-
this._ngZone = _ngZone;
|
|
1425
|
-
this._document = _document;
|
|
1426
|
-
this._injector = _injector;
|
|
1427
|
-
if (!deferAnchors) {
|
|
1428
|
-
this.attachAnchors();
|
|
1429
|
-
}
|
|
1430
|
-
}
|
|
1431
|
-
/** Destroys the focus trap by cleaning up the anchors. */
|
|
1432
|
-
destroy() {
|
|
1433
|
-
const startAnchor = this._startAnchor;
|
|
1434
|
-
const endAnchor = this._endAnchor;
|
|
1435
|
-
if (startAnchor) {
|
|
1436
|
-
startAnchor.removeEventListener('focus', this.startAnchorListener);
|
|
1437
|
-
startAnchor.remove();
|
|
1438
|
-
}
|
|
1439
|
-
if (endAnchor) {
|
|
1440
|
-
endAnchor.removeEventListener('focus', this.endAnchorListener);
|
|
1441
|
-
endAnchor.remove();
|
|
1442
|
-
}
|
|
1443
|
-
this._startAnchor = this._endAnchor = null;
|
|
1444
|
-
this._hasAttached = false;
|
|
1445
|
-
}
|
|
1446
|
-
/**
|
|
1447
|
-
* Inserts the anchors into the DOM. This is usually done automatically
|
|
1448
|
-
* in the constructor, but can be deferred for cases like directives with `*ngIf`.
|
|
1449
|
-
* @returns Whether the focus trap managed to attach successfully. This may not be the case
|
|
1450
|
-
* if the target element isn't currently in the DOM.
|
|
1451
|
-
*/
|
|
1452
|
-
attachAnchors() {
|
|
1453
|
-
// If we're not on the browser, there can be no focus to trap.
|
|
1454
|
-
if (this._hasAttached) {
|
|
1455
|
-
return true;
|
|
1456
|
-
}
|
|
1457
|
-
this._ngZone.runOutsideAngular(() => {
|
|
1458
|
-
if (!this._startAnchor) {
|
|
1459
|
-
this._startAnchor = this._createAnchor();
|
|
1460
|
-
this._startAnchor.addEventListener('focus', this.startAnchorListener);
|
|
1461
|
-
}
|
|
1462
|
-
if (!this._endAnchor) {
|
|
1463
|
-
this._endAnchor = this._createAnchor();
|
|
1464
|
-
this._endAnchor.addEventListener('focus', this.endAnchorListener);
|
|
1465
|
-
}
|
|
1466
|
-
});
|
|
1467
|
-
if (this._element.parentNode) {
|
|
1468
|
-
this._element.parentNode.insertBefore(this._startAnchor, this._element);
|
|
1469
|
-
this._element.parentNode.insertBefore(this._endAnchor, this._element.nextSibling);
|
|
1470
|
-
this._hasAttached = true;
|
|
1471
|
-
}
|
|
1472
|
-
return this._hasAttached;
|
|
1473
|
-
}
|
|
1474
|
-
/**
|
|
1475
|
-
* Waits for the zone to stabilize, then focuses the first tabbable element.
|
|
1476
|
-
* @returns Returns a promise that resolves with a boolean, depending
|
|
1477
|
-
* on whether focus was moved successfully.
|
|
1478
|
-
*/
|
|
1479
|
-
focusInitialElementWhenReady(options) {
|
|
1480
|
-
return new Promise(resolve => {
|
|
1481
|
-
this._executeOnStable(() => resolve(this.focusInitialElement(options)));
|
|
1482
|
-
});
|
|
1483
|
-
}
|
|
1484
|
-
/**
|
|
1485
|
-
* Waits for the zone to stabilize, then focuses
|
|
1486
|
-
* the first tabbable element within the focus trap region.
|
|
1487
|
-
* @returns Returns a promise that resolves with a boolean, depending
|
|
1488
|
-
* on whether focus was moved successfully.
|
|
1489
|
-
*/
|
|
1490
|
-
focusFirstTabbableElementWhenReady(options) {
|
|
1491
|
-
return new Promise(resolve => {
|
|
1492
|
-
this._executeOnStable(() => resolve(this.focusFirstTabbableElement(options)));
|
|
1493
|
-
});
|
|
1494
|
-
}
|
|
1495
|
-
/**
|
|
1496
|
-
* Waits for the zone to stabilize, then focuses
|
|
1497
|
-
* the last tabbable element within the focus trap region.
|
|
1498
|
-
* @returns Returns a promise that resolves with a boolean, depending
|
|
1499
|
-
* on whether focus was moved successfully.
|
|
1500
|
-
*/
|
|
1501
|
-
focusLastTabbableElementWhenReady(options) {
|
|
1502
|
-
return new Promise(resolve => {
|
|
1503
|
-
this._executeOnStable(() => resolve(this.focusLastTabbableElement(options)));
|
|
1504
|
-
});
|
|
1505
|
-
}
|
|
1506
|
-
/**
|
|
1507
|
-
* Get the specified boundary element of the trapped region.
|
|
1508
|
-
* @param bound The boundary to get (start or end of trapped region).
|
|
1509
|
-
* @returns The boundary element.
|
|
1510
|
-
*/
|
|
1511
|
-
_getRegionBoundary(bound) {
|
|
1512
|
-
// Contains the deprecated version of selector, for temporary backwards comparability.
|
|
1513
|
-
const markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + `[cdkFocusRegion${bound}], ` + `[cdk-focus-${bound}]`);
|
|
1514
|
-
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
1515
|
-
for (let i = 0; i < markers.length; i++) {
|
|
1516
|
-
// @breaking-change 8.0.0
|
|
1517
|
-
if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {
|
|
1518
|
-
console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}', ` +
|
|
1519
|
-
`use 'cdkFocusRegion${bound}' instead. The deprecated ` +
|
|
1520
|
-
`attribute will be removed in 8.0.0.`, markers[i]);
|
|
1521
|
-
}
|
|
1522
|
-
else if (markers[i].hasAttribute(`cdk-focus-region-${bound}`)) {
|
|
1523
|
-
console.warn(`Found use of deprecated attribute 'cdk-focus-region-${bound}', ` +
|
|
1524
|
-
`use 'cdkFocusRegion${bound}' instead. The deprecated attribute ` +
|
|
1525
|
-
`will be removed in 8.0.0.`, markers[i]);
|
|
1526
|
-
}
|
|
1527
|
-
}
|
|
1528
|
-
}
|
|
1529
|
-
if (bound == 'start') {
|
|
1530
|
-
return markers.length ? markers[0] : this._getFirstTabbableElement(this._element);
|
|
1531
|
-
}
|
|
1532
|
-
return markers.length
|
|
1533
|
-
? markers[markers.length - 1]
|
|
1534
|
-
: this._getLastTabbableElement(this._element);
|
|
1535
|
-
}
|
|
1536
|
-
/**
|
|
1537
|
-
* Focuses the element that should be focused when the focus trap is initialized.
|
|
1538
|
-
* @returns Whether focus was moved successfully.
|
|
1539
|
-
*/
|
|
1540
|
-
focusInitialElement(options) {
|
|
1541
|
-
// Contains the deprecated version of selector, for temporary backwards comparability.
|
|
1542
|
-
const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` + `[cdkFocusInitial]`);
|
|
1543
|
-
if (redirectToElement) {
|
|
1544
|
-
// @breaking-change 8.0.0
|
|
1545
|
-
if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
|
|
1546
|
-
redirectToElement.hasAttribute(`cdk-focus-initial`)) {
|
|
1547
|
-
console.warn(`Found use of deprecated attribute 'cdk-focus-initial', ` +
|
|
1548
|
-
`use 'cdkFocusInitial' instead. The deprecated attribute ` +
|
|
1549
|
-
`will be removed in 8.0.0`, redirectToElement);
|
|
1550
|
-
}
|
|
1551
|
-
// Warn the consumer if the element they've pointed to
|
|
1552
|
-
// isn't focusable, when not in production mode.
|
|
1553
|
-
if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
|
|
1554
|
-
!this._checker.isFocusable(redirectToElement)) {
|
|
1555
|
-
console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);
|
|
1556
|
-
}
|
|
1557
|
-
if (!this._checker.isFocusable(redirectToElement)) {
|
|
1558
|
-
const focusableChild = this._getFirstTabbableElement(redirectToElement);
|
|
1559
|
-
focusableChild?.focus(options);
|
|
1560
|
-
return !!focusableChild;
|
|
1561
|
-
}
|
|
1562
|
-
redirectToElement.focus(options);
|
|
1563
|
-
return true;
|
|
1564
|
-
}
|
|
1565
|
-
return this.focusFirstTabbableElement(options);
|
|
1566
|
-
}
|
|
1567
|
-
/**
|
|
1568
|
-
* Focuses the first tabbable element within the focus trap region.
|
|
1569
|
-
* @returns Whether focus was moved successfully.
|
|
1570
|
-
*/
|
|
1571
|
-
focusFirstTabbableElement(options) {
|
|
1572
|
-
const redirectToElement = this._getRegionBoundary('start');
|
|
1573
|
-
if (redirectToElement) {
|
|
1574
|
-
redirectToElement.focus(options);
|
|
1575
|
-
}
|
|
1576
|
-
return !!redirectToElement;
|
|
1577
|
-
}
|
|
1578
|
-
/**
|
|
1579
|
-
* Focuses the last tabbable element within the focus trap region.
|
|
1580
|
-
* @returns Whether focus was moved successfully.
|
|
1581
|
-
*/
|
|
1582
|
-
focusLastTabbableElement(options) {
|
|
1583
|
-
const redirectToElement = this._getRegionBoundary('end');
|
|
1584
|
-
if (redirectToElement) {
|
|
1585
|
-
redirectToElement.focus(options);
|
|
1586
|
-
}
|
|
1587
|
-
return !!redirectToElement;
|
|
1588
|
-
}
|
|
1589
|
-
/**
|
|
1590
|
-
* Checks whether the focus trap has successfully been attached.
|
|
1591
|
-
*/
|
|
1592
|
-
hasAttached() {
|
|
1593
|
-
return this._hasAttached;
|
|
1594
|
-
}
|
|
1595
|
-
/** Get the first tabbable element from a DOM subtree (inclusive). */
|
|
1596
|
-
_getFirstTabbableElement(root) {
|
|
1597
|
-
if (this._checker.isFocusable(root) && this._checker.isTabbable(root)) {
|
|
1598
|
-
return root;
|
|
1599
|
-
}
|
|
1600
|
-
const children = root.children;
|
|
1601
|
-
for (let i = 0; i < children.length; i++) {
|
|
1602
|
-
const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE
|
|
1603
|
-
? this._getFirstTabbableElement(children[i])
|
|
1604
|
-
: null;
|
|
1605
|
-
if (tabbableChild) {
|
|
1606
|
-
return tabbableChild;
|
|
1607
|
-
}
|
|
1608
|
-
}
|
|
1609
|
-
return null;
|
|
1610
|
-
}
|
|
1611
|
-
/** Get the last tabbable element from a DOM subtree (inclusive). */
|
|
1612
|
-
_getLastTabbableElement(root) {
|
|
1613
|
-
if (this._checker.isFocusable(root) && this._checker.isTabbable(root)) {
|
|
1614
|
-
return root;
|
|
1615
|
-
}
|
|
1616
|
-
// Iterate in reverse DOM order.
|
|
1617
|
-
const children = root.children;
|
|
1618
|
-
for (let i = children.length - 1; i >= 0; i--) {
|
|
1619
|
-
const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE
|
|
1620
|
-
? this._getLastTabbableElement(children[i])
|
|
1621
|
-
: null;
|
|
1622
|
-
if (tabbableChild) {
|
|
1623
|
-
return tabbableChild;
|
|
1624
|
-
}
|
|
1625
|
-
}
|
|
1626
|
-
return null;
|
|
1627
|
-
}
|
|
1628
|
-
/** Creates an anchor element. */
|
|
1629
|
-
_createAnchor() {
|
|
1630
|
-
const anchor = this._document.createElement('div');
|
|
1631
|
-
this._toggleAnchorTabIndex(this._enabled, anchor);
|
|
1632
|
-
anchor.classList.add('cdk-visually-hidden');
|
|
1633
|
-
anchor.classList.add('cdk-focus-trap-anchor');
|
|
1634
|
-
anchor.setAttribute('aria-hidden', 'true');
|
|
1635
|
-
return anchor;
|
|
1636
|
-
}
|
|
1637
|
-
/**
|
|
1638
|
-
* Toggles the `tabindex` of an anchor, based on the enabled state of the focus trap.
|
|
1639
|
-
* @param isEnabled Whether the focus trap is enabled.
|
|
1640
|
-
* @param anchor Anchor on which to toggle the tabindex.
|
|
1641
|
-
*/
|
|
1642
|
-
_toggleAnchorTabIndex(isEnabled, anchor) {
|
|
1643
|
-
// Remove the tabindex completely, rather than setting it to -1, because if the
|
|
1644
|
-
// element has a tabindex, the user might still hit it when navigating with the arrow keys.
|
|
1645
|
-
isEnabled ? anchor.setAttribute('tabindex', '0') : anchor.removeAttribute('tabindex');
|
|
1646
|
-
}
|
|
1647
|
-
/**
|
|
1648
|
-
* Toggles the`tabindex` of both anchors to either trap Tab focus or allow it to escape.
|
|
1649
|
-
* @param enabled: Whether the anchors should trap Tab.
|
|
1650
|
-
*/
|
|
1651
|
-
toggleAnchors(enabled) {
|
|
1652
|
-
if (this._startAnchor && this._endAnchor) {
|
|
1653
|
-
this._toggleAnchorTabIndex(enabled, this._startAnchor);
|
|
1654
|
-
this._toggleAnchorTabIndex(enabled, this._endAnchor);
|
|
1655
|
-
}
|
|
1656
|
-
}
|
|
1657
|
-
/** Executes a function when the zone is stable. */
|
|
1658
|
-
_executeOnStable(fn) {
|
|
1659
|
-
// TODO: remove this conditional when injector is required in the constructor.
|
|
1660
|
-
if (this._injector) {
|
|
1661
|
-
afterNextRender(fn, { injector: this._injector });
|
|
1662
|
-
}
|
|
1663
|
-
else {
|
|
1664
|
-
setTimeout(fn);
|
|
1665
|
-
}
|
|
1666
|
-
}
|
|
1667
|
-
}
|
|
1668
|
-
/**
|
|
1669
|
-
* Factory that allows easy instantiation of focus traps.
|
|
1670
|
-
*/
|
|
1671
|
-
class FocusTrapFactory {
|
|
1672
|
-
_checker = inject(InteractivityChecker);
|
|
1673
|
-
_ngZone = inject(NgZone);
|
|
1674
|
-
_document = inject(DOCUMENT);
|
|
1675
|
-
_injector = inject(Injector);
|
|
1676
|
-
constructor() {
|
|
1677
|
-
inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
|
|
1678
|
-
}
|
|
1679
|
-
/**
|
|
1680
|
-
* Creates a focus-trapped region around the given element.
|
|
1681
|
-
* @param element The element around which focus will be trapped.
|
|
1682
|
-
* @param deferCaptureElements Defers the creation of focus-capturing elements to be done
|
|
1683
|
-
* manually by the user.
|
|
1684
|
-
* @returns The created focus trap instance.
|
|
1685
|
-
*/
|
|
1686
|
-
create(element, deferCaptureElements = false) {
|
|
1687
|
-
return new FocusTrap(element, this._checker, this._ngZone, this._document, deferCaptureElements, this._injector);
|
|
1688
|
-
}
|
|
1689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusTrapFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1690
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusTrapFactory, providedIn: 'root' });
|
|
1691
|
-
}
|
|
1692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusTrapFactory, decorators: [{
|
|
1693
|
-
type: Injectable,
|
|
1694
|
-
args: [{ providedIn: 'root' }]
|
|
1695
|
-
}], ctorParameters: () => [] });
|
|
1696
|
-
/** Directive for trapping focus within a region. */
|
|
1697
|
-
class CdkTrapFocus {
|
|
1698
|
-
_elementRef = inject(ElementRef);
|
|
1699
|
-
_focusTrapFactory = inject(FocusTrapFactory);
|
|
1700
|
-
/** Underlying FocusTrap instance. */
|
|
1701
|
-
focusTrap;
|
|
1702
|
-
/** Previously focused element to restore focus to upon destroy when using autoCapture. */
|
|
1703
|
-
_previouslyFocusedElement = null;
|
|
1704
|
-
/** Whether the focus trap is active. */
|
|
1705
|
-
get enabled() {
|
|
1706
|
-
return this.focusTrap?.enabled || false;
|
|
1707
|
-
}
|
|
1708
|
-
set enabled(value) {
|
|
1709
|
-
if (this.focusTrap) {
|
|
1710
|
-
this.focusTrap.enabled = value;
|
|
1711
|
-
}
|
|
1712
|
-
}
|
|
1713
|
-
/**
|
|
1714
|
-
* Whether the directive should automatically move focus into the trapped region upon
|
|
1715
|
-
* initialization and return focus to the previous activeElement upon destruction.
|
|
1716
|
-
*/
|
|
1717
|
-
autoCapture;
|
|
1718
|
-
constructor() {
|
|
1719
|
-
const platform = inject(Platform);
|
|
1720
|
-
if (platform.isBrowser) {
|
|
1721
|
-
this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);
|
|
1722
|
-
}
|
|
1723
|
-
}
|
|
1724
|
-
ngOnDestroy() {
|
|
1725
|
-
this.focusTrap?.destroy();
|
|
1726
|
-
// If we stored a previously focused element when using autoCapture, return focus to that
|
|
1727
|
-
// element now that the trapped region is being destroyed.
|
|
1728
|
-
if (this._previouslyFocusedElement) {
|
|
1729
|
-
this._previouslyFocusedElement.focus();
|
|
1730
|
-
this._previouslyFocusedElement = null;
|
|
1731
|
-
}
|
|
1732
|
-
}
|
|
1733
|
-
ngAfterContentInit() {
|
|
1734
|
-
this.focusTrap?.attachAnchors();
|
|
1735
|
-
if (this.autoCapture) {
|
|
1736
|
-
this._captureFocus();
|
|
1737
|
-
}
|
|
1738
|
-
}
|
|
1739
|
-
ngDoCheck() {
|
|
1740
|
-
if (this.focusTrap && !this.focusTrap.hasAttached()) {
|
|
1741
|
-
this.focusTrap.attachAnchors();
|
|
1742
|
-
}
|
|
1743
|
-
}
|
|
1744
|
-
ngOnChanges(changes) {
|
|
1745
|
-
const autoCaptureChange = changes['autoCapture'];
|
|
1746
|
-
if (autoCaptureChange &&
|
|
1747
|
-
!autoCaptureChange.firstChange &&
|
|
1748
|
-
this.autoCapture &&
|
|
1749
|
-
this.focusTrap?.hasAttached()) {
|
|
1750
|
-
this._captureFocus();
|
|
1751
|
-
}
|
|
1752
|
-
}
|
|
1753
|
-
_captureFocus() {
|
|
1754
|
-
this._previouslyFocusedElement = _getFocusedElementPierceShadowDom();
|
|
1755
|
-
this.focusTrap?.focusInitialElementWhenReady();
|
|
1756
|
-
}
|
|
1757
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkTrapFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1758
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.0", type: CdkTrapFocus, isStandalone: true, selector: "[cdkTrapFocus]", inputs: { enabled: ["cdkTrapFocus", "enabled", booleanAttribute], autoCapture: ["cdkTrapFocusAutoCapture", "autoCapture", booleanAttribute] }, exportAs: ["cdkTrapFocus"], usesOnChanges: true, ngImport: i0 });
|
|
1759
|
-
}
|
|
1760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkTrapFocus, decorators: [{
|
|
1761
|
-
type: Directive,
|
|
1762
|
-
args: [{
|
|
1763
|
-
selector: '[cdkTrapFocus]',
|
|
1764
|
-
exportAs: 'cdkTrapFocus',
|
|
1765
|
-
}]
|
|
1766
|
-
}], ctorParameters: () => [], propDecorators: { enabled: [{
|
|
1767
|
-
type: Input,
|
|
1768
|
-
args: [{ alias: 'cdkTrapFocus', transform: booleanAttribute }]
|
|
1769
|
-
}], autoCapture: [{
|
|
1770
|
-
type: Input,
|
|
1771
|
-
args: [{ alias: 'cdkTrapFocusAutoCapture', transform: booleanAttribute }]
|
|
1772
|
-
}] } });
|
|
1773
|
-
|
|
1774
|
-
/**
|
|
1775
|
-
* Class that allows for trapping focus within a DOM element.
|
|
1776
|
-
*
|
|
1777
|
-
* This class uses a strategy pattern that determines how it traps focus.
|
|
1778
|
-
* See FocusTrapInertStrategy.
|
|
366
|
+
* Class that allows for trapping focus within a DOM element.
|
|
367
|
+
*
|
|
368
|
+
* This class uses a strategy pattern that determines how it traps focus.
|
|
369
|
+
* See FocusTrapInertStrategy.
|
|
1779
370
|
*/
|
|
1780
371
|
class ConfigurableFocusTrap extends FocusTrap {
|
|
1781
372
|
_focusTrapManager;
|
|
@@ -1905,10 +496,10 @@ class FocusTrapManager {
|
|
|
1905
496
|
}
|
|
1906
497
|
}
|
|
1907
498
|
}
|
|
1908
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1909
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
499
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: FocusTrapManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
500
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: FocusTrapManager, providedIn: 'root' });
|
|
1910
501
|
}
|
|
1911
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: FocusTrapManager, decorators: [{
|
|
1912
503
|
type: Injectable,
|
|
1913
504
|
args: [{ providedIn: 'root' }]
|
|
1914
505
|
}] });
|
|
@@ -1936,1010 +527,13 @@ class ConfigurableFocusTrapFactory {
|
|
|
1936
527
|
}
|
|
1937
528
|
return new ConfigurableFocusTrap(element, this._checker, this._ngZone, this._document, this._focusTrapManager, this._inertStrategy, configObject, this._injector);
|
|
1938
529
|
}
|
|
1939
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1940
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
530
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: ConfigurableFocusTrapFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
531
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: ConfigurableFocusTrapFactory, providedIn: 'root' });
|
|
1941
532
|
}
|
|
1942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.1", ngImport: i0, type: ConfigurableFocusTrapFactory, decorators: [{
|
|
1943
534
|
type: Injectable,
|
|
1944
535
|
args: [{ providedIn: 'root' }]
|
|
1945
536
|
}], ctorParameters: () => [] });
|
|
1946
537
|
|
|
1947
|
-
|
|
1948
|
-
function isFakeMousedownFromScreenReader(event) {
|
|
1949
|
-
// Some screen readers will dispatch a fake `mousedown` event when pressing enter or space on
|
|
1950
|
-
// a clickable element. We can distinguish these events when `event.buttons` is zero, or
|
|
1951
|
-
// `event.detail` is zero depending on the browser:
|
|
1952
|
-
// - `event.buttons` works on Firefox, but fails on Chrome.
|
|
1953
|
-
// - `detail` works on Chrome, but fails on Firefox.
|
|
1954
|
-
return event.buttons === 0 || event.detail === 0;
|
|
1955
|
-
}
|
|
1956
|
-
/** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */
|
|
1957
|
-
function isFakeTouchstartFromScreenReader(event) {
|
|
1958
|
-
const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
|
|
1959
|
-
// A fake `touchstart` can be distinguished from a real one by looking at the `identifier`
|
|
1960
|
-
// which is typically >= 0 on a real device versus -1 from a screen reader. Just to be safe,
|
|
1961
|
-
// we can also look at `radiusX` and `radiusY`. This behavior was observed against a Windows 10
|
|
1962
|
-
// device with a touch screen running NVDA v2020.4 and Firefox 85 or Chrome 88.
|
|
1963
|
-
return (!!touch &&
|
|
1964
|
-
touch.identifier === -1 &&
|
|
1965
|
-
(touch.radiusX == null || touch.radiusX === 1) &&
|
|
1966
|
-
(touch.radiusY == null || touch.radiusY === 1));
|
|
1967
|
-
}
|
|
1968
|
-
|
|
1969
|
-
/**
|
|
1970
|
-
* Injectable options for the InputModalityDetector. These are shallowly merged with the default
|
|
1971
|
-
* options.
|
|
1972
|
-
*/
|
|
1973
|
-
const INPUT_MODALITY_DETECTOR_OPTIONS = new InjectionToken('cdk-input-modality-detector-options');
|
|
1974
|
-
/**
|
|
1975
|
-
* Default options for the InputModalityDetector.
|
|
1976
|
-
*
|
|
1977
|
-
* Modifier keys are ignored by default (i.e. when pressed won't cause the service to detect
|
|
1978
|
-
* keyboard input modality) for two reasons:
|
|
1979
|
-
*
|
|
1980
|
-
* 1. Modifier keys are commonly used with mouse to perform actions such as 'right click' or 'open
|
|
1981
|
-
* in new tab', and are thus less representative of actual keyboard interaction.
|
|
1982
|
-
* 2. VoiceOver triggers some keyboard events when linearly navigating with Control + Option (but
|
|
1983
|
-
* confusingly not with Caps Lock). Thus, to have parity with other screen readers, we ignore
|
|
1984
|
-
* these keys so as to not update the input modality.
|
|
1985
|
-
*
|
|
1986
|
-
* Note that we do not by default ignore the right Meta key on Safari because it has the same key
|
|
1987
|
-
* code as the ContextMenu key on other browsers. When we switch to using event.key, we can
|
|
1988
|
-
* distinguish between the two.
|
|
1989
|
-
*/
|
|
1990
|
-
const INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS = {
|
|
1991
|
-
ignoreKeys: [ALT, CONTROL, MAC_META, META, SHIFT],
|
|
1992
|
-
};
|
|
1993
|
-
/**
|
|
1994
|
-
* The amount of time needed to pass after a touchstart event in order for a subsequent mousedown
|
|
1995
|
-
* event to be attributed as mouse and not touch.
|
|
1996
|
-
*
|
|
1997
|
-
* This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
|
|
1998
|
-
* that a value of around 650ms seems appropriate.
|
|
1999
|
-
*/
|
|
2000
|
-
const TOUCH_BUFFER_MS = 650;
|
|
2001
|
-
/**
|
|
2002
|
-
* Event listener options that enable capturing and also mark the listener as passive if the browser
|
|
2003
|
-
* supports it.
|
|
2004
|
-
*/
|
|
2005
|
-
const modalityEventListenerOptions = {
|
|
2006
|
-
passive: true,
|
|
2007
|
-
capture: true,
|
|
2008
|
-
};
|
|
2009
|
-
/**
|
|
2010
|
-
* Service that detects the user's input modality.
|
|
2011
|
-
*
|
|
2012
|
-
* This service does not update the input modality when a user navigates with a screen reader
|
|
2013
|
-
* (e.g. linear navigation with VoiceOver, object navigation / browse mode with NVDA, virtual PC
|
|
2014
|
-
* cursor mode with JAWS). This is in part due to technical limitations (i.e. keyboard events do not
|
|
2015
|
-
* fire as expected in these modes) but is also arguably the correct behavior. Navigating with a
|
|
2016
|
-
* screen reader is akin to visually scanning a page, and should not be interpreted as actual user
|
|
2017
|
-
* input interaction.
|
|
2018
|
-
*
|
|
2019
|
-
* When a user is not navigating but *interacting* with a screen reader, this service attempts to
|
|
2020
|
-
* update the input modality to keyboard, but in general this service's behavior is largely
|
|
2021
|
-
* undefined.
|
|
2022
|
-
*/
|
|
2023
|
-
class InputModalityDetector {
|
|
2024
|
-
_platform = inject(Platform);
|
|
2025
|
-
_listenerCleanups;
|
|
2026
|
-
/** Emits whenever an input modality is detected. */
|
|
2027
|
-
modalityDetected;
|
|
2028
|
-
/** Emits when the input modality changes. */
|
|
2029
|
-
modalityChanged;
|
|
2030
|
-
/** The most recently detected input modality. */
|
|
2031
|
-
get mostRecentModality() {
|
|
2032
|
-
return this._modality.value;
|
|
2033
|
-
}
|
|
2034
|
-
/**
|
|
2035
|
-
* The most recently detected input modality event target. Is null if no input modality has been
|
|
2036
|
-
* detected or if the associated event target is null for some unknown reason.
|
|
2037
|
-
*/
|
|
2038
|
-
_mostRecentTarget = null;
|
|
2039
|
-
/** The underlying BehaviorSubject that emits whenever an input modality is detected. */
|
|
2040
|
-
_modality = new BehaviorSubject(null);
|
|
2041
|
-
/** Options for this InputModalityDetector. */
|
|
2042
|
-
_options;
|
|
2043
|
-
/**
|
|
2044
|
-
* The timestamp of the last touch input modality. Used to determine whether mousedown events
|
|
2045
|
-
* should be attributed to mouse or touch.
|
|
2046
|
-
*/
|
|
2047
|
-
_lastTouchMs = 0;
|
|
2048
|
-
/**
|
|
2049
|
-
* Handles keydown events. Must be an arrow function in order to preserve the context when it gets
|
|
2050
|
-
* bound.
|
|
2051
|
-
*/
|
|
2052
|
-
_onKeydown = (event) => {
|
|
2053
|
-
// If this is one of the keys we should ignore, then ignore it and don't update the input
|
|
2054
|
-
// modality to keyboard.
|
|
2055
|
-
if (this._options?.ignoreKeys?.some(keyCode => keyCode === event.keyCode)) {
|
|
2056
|
-
return;
|
|
2057
|
-
}
|
|
2058
|
-
this._modality.next('keyboard');
|
|
2059
|
-
this._mostRecentTarget = _getEventTarget(event);
|
|
2060
|
-
};
|
|
2061
|
-
/**
|
|
2062
|
-
* Handles mousedown events. Must be an arrow function in order to preserve the context when it
|
|
2063
|
-
* gets bound.
|
|
2064
|
-
*/
|
|
2065
|
-
_onMousedown = (event) => {
|
|
2066
|
-
// Touches trigger both touch and mouse events, so we need to distinguish between mouse events
|
|
2067
|
-
// that were triggered via mouse vs touch. To do so, check if the mouse event occurs closely
|
|
2068
|
-
// after the previous touch event.
|
|
2069
|
-
if (Date.now() - this._lastTouchMs < TOUCH_BUFFER_MS) {
|
|
2070
|
-
return;
|
|
2071
|
-
}
|
|
2072
|
-
// Fake mousedown events are fired by some screen readers when controls are activated by the
|
|
2073
|
-
// screen reader. Attribute them to keyboard input modality.
|
|
2074
|
-
this._modality.next(isFakeMousedownFromScreenReader(event) ? 'keyboard' : 'mouse');
|
|
2075
|
-
this._mostRecentTarget = _getEventTarget(event);
|
|
2076
|
-
};
|
|
2077
|
-
/**
|
|
2078
|
-
* Handles touchstart events. Must be an arrow function in order to preserve the context when it
|
|
2079
|
-
* gets bound.
|
|
2080
|
-
*/
|
|
2081
|
-
_onTouchstart = (event) => {
|
|
2082
|
-
// Same scenario as mentioned in _onMousedown, but on touch screen devices, fake touchstart
|
|
2083
|
-
// events are fired. Again, attribute to keyboard input modality.
|
|
2084
|
-
if (isFakeTouchstartFromScreenReader(event)) {
|
|
2085
|
-
this._modality.next('keyboard');
|
|
2086
|
-
return;
|
|
2087
|
-
}
|
|
2088
|
-
// Store the timestamp of this touch event, as it's used to distinguish between mouse events
|
|
2089
|
-
// triggered via mouse vs touch.
|
|
2090
|
-
this._lastTouchMs = Date.now();
|
|
2091
|
-
this._modality.next('touch');
|
|
2092
|
-
this._mostRecentTarget = _getEventTarget(event);
|
|
2093
|
-
};
|
|
2094
|
-
constructor() {
|
|
2095
|
-
const ngZone = inject(NgZone);
|
|
2096
|
-
const document = inject(DOCUMENT);
|
|
2097
|
-
const options = inject(INPUT_MODALITY_DETECTOR_OPTIONS, { optional: true });
|
|
2098
|
-
this._options = {
|
|
2099
|
-
...INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS,
|
|
2100
|
-
...options,
|
|
2101
|
-
};
|
|
2102
|
-
// Skip the first emission as it's null.
|
|
2103
|
-
this.modalityDetected = this._modality.pipe(skip(1));
|
|
2104
|
-
this.modalityChanged = this.modalityDetected.pipe(distinctUntilChanged());
|
|
2105
|
-
// If we're not in a browser, this service should do nothing, as there's no relevant input
|
|
2106
|
-
// modality to detect.
|
|
2107
|
-
if (this._platform.isBrowser) {
|
|
2108
|
-
const renderer = inject(RendererFactory2).createRenderer(null, null);
|
|
2109
|
-
this._listenerCleanups = ngZone.runOutsideAngular(() => {
|
|
2110
|
-
return [
|
|
2111
|
-
_bindEventWithOptions(renderer, document, 'keydown', this._onKeydown, modalityEventListenerOptions),
|
|
2112
|
-
_bindEventWithOptions(renderer, document, 'mousedown', this._onMousedown, modalityEventListenerOptions),
|
|
2113
|
-
_bindEventWithOptions(renderer, document, 'touchstart', this._onTouchstart, modalityEventListenerOptions),
|
|
2114
|
-
];
|
|
2115
|
-
});
|
|
2116
|
-
}
|
|
2117
|
-
}
|
|
2118
|
-
ngOnDestroy() {
|
|
2119
|
-
this._modality.complete();
|
|
2120
|
-
this._listenerCleanups?.forEach(cleanup => cleanup());
|
|
2121
|
-
}
|
|
2122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InputModalityDetector, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2123
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InputModalityDetector, providedIn: 'root' });
|
|
2124
|
-
}
|
|
2125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: InputModalityDetector, decorators: [{
|
|
2126
|
-
type: Injectable,
|
|
2127
|
-
args: [{ providedIn: 'root' }]
|
|
2128
|
-
}], ctorParameters: () => [] });
|
|
2129
|
-
|
|
2130
|
-
const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken('liveAnnouncerElement', {
|
|
2131
|
-
providedIn: 'root',
|
|
2132
|
-
factory: LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY,
|
|
2133
|
-
});
|
|
2134
|
-
/**
|
|
2135
|
-
* @docs-private
|
|
2136
|
-
* @deprecated No longer used, will be removed.
|
|
2137
|
-
* @breaking-change 21.0.0
|
|
2138
|
-
*/
|
|
2139
|
-
function LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY() {
|
|
2140
|
-
return null;
|
|
2141
|
-
}
|
|
2142
|
-
/** Injection token that can be used to configure the default options for the LiveAnnouncer. */
|
|
2143
|
-
const LIVE_ANNOUNCER_DEFAULT_OPTIONS = new InjectionToken('LIVE_ANNOUNCER_DEFAULT_OPTIONS');
|
|
2144
|
-
|
|
2145
|
-
let uniqueIds = 0;
|
|
2146
|
-
class LiveAnnouncer {
|
|
2147
|
-
_ngZone = inject(NgZone);
|
|
2148
|
-
_defaultOptions = inject(LIVE_ANNOUNCER_DEFAULT_OPTIONS, {
|
|
2149
|
-
optional: true,
|
|
2150
|
-
});
|
|
2151
|
-
_liveElement;
|
|
2152
|
-
_document = inject(DOCUMENT);
|
|
2153
|
-
_previousTimeout;
|
|
2154
|
-
_currentPromise;
|
|
2155
|
-
_currentResolve;
|
|
2156
|
-
constructor() {
|
|
2157
|
-
const elementToken = inject(LIVE_ANNOUNCER_ELEMENT_TOKEN, { optional: true });
|
|
2158
|
-
this._liveElement = elementToken || this._createLiveElement();
|
|
2159
|
-
}
|
|
2160
|
-
announce(message, ...args) {
|
|
2161
|
-
const defaultOptions = this._defaultOptions;
|
|
2162
|
-
let politeness;
|
|
2163
|
-
let duration;
|
|
2164
|
-
if (args.length === 1 && typeof args[0] === 'number') {
|
|
2165
|
-
duration = args[0];
|
|
2166
|
-
}
|
|
2167
|
-
else {
|
|
2168
|
-
[politeness, duration] = args;
|
|
2169
|
-
}
|
|
2170
|
-
this.clear();
|
|
2171
|
-
clearTimeout(this._previousTimeout);
|
|
2172
|
-
if (!politeness) {
|
|
2173
|
-
politeness =
|
|
2174
|
-
defaultOptions && defaultOptions.politeness ? defaultOptions.politeness : 'polite';
|
|
2175
|
-
}
|
|
2176
|
-
if (duration == null && defaultOptions) {
|
|
2177
|
-
duration = defaultOptions.duration;
|
|
2178
|
-
}
|
|
2179
|
-
// TODO: ensure changing the politeness works on all environments we support.
|
|
2180
|
-
this._liveElement.setAttribute('aria-live', politeness);
|
|
2181
|
-
if (this._liveElement.id) {
|
|
2182
|
-
this._exposeAnnouncerToModals(this._liveElement.id);
|
|
2183
|
-
}
|
|
2184
|
-
// This 100ms timeout is necessary for some browser + screen-reader combinations:
|
|
2185
|
-
// - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.
|
|
2186
|
-
// - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a
|
|
2187
|
-
// second time without clearing and then using a non-zero delay.
|
|
2188
|
-
// (using JAWS 17 at time of this writing).
|
|
2189
|
-
return this._ngZone.runOutsideAngular(() => {
|
|
2190
|
-
if (!this._currentPromise) {
|
|
2191
|
-
this._currentPromise = new Promise(resolve => (this._currentResolve = resolve));
|
|
2192
|
-
}
|
|
2193
|
-
clearTimeout(this._previousTimeout);
|
|
2194
|
-
this._previousTimeout = setTimeout(() => {
|
|
2195
|
-
this._liveElement.textContent = message;
|
|
2196
|
-
if (typeof duration === 'number') {
|
|
2197
|
-
this._previousTimeout = setTimeout(() => this.clear(), duration);
|
|
2198
|
-
}
|
|
2199
|
-
// For some reason in tests this can be undefined
|
|
2200
|
-
// Probably related to ZoneJS and every other thing that patches browser APIs in tests
|
|
2201
|
-
this._currentResolve?.();
|
|
2202
|
-
this._currentPromise = this._currentResolve = undefined;
|
|
2203
|
-
}, 100);
|
|
2204
|
-
return this._currentPromise;
|
|
2205
|
-
});
|
|
2206
|
-
}
|
|
2207
|
-
/**
|
|
2208
|
-
* Clears the current text from the announcer element. Can be used to prevent
|
|
2209
|
-
* screen readers from reading the text out again while the user is going
|
|
2210
|
-
* through the page landmarks.
|
|
2211
|
-
*/
|
|
2212
|
-
clear() {
|
|
2213
|
-
if (this._liveElement) {
|
|
2214
|
-
this._liveElement.textContent = '';
|
|
2215
|
-
}
|
|
2216
|
-
}
|
|
2217
|
-
ngOnDestroy() {
|
|
2218
|
-
clearTimeout(this._previousTimeout);
|
|
2219
|
-
this._liveElement?.remove();
|
|
2220
|
-
this._liveElement = null;
|
|
2221
|
-
this._currentResolve?.();
|
|
2222
|
-
this._currentPromise = this._currentResolve = undefined;
|
|
2223
|
-
}
|
|
2224
|
-
_createLiveElement() {
|
|
2225
|
-
const elementClass = 'cdk-live-announcer-element';
|
|
2226
|
-
const previousElements = this._document.getElementsByClassName(elementClass);
|
|
2227
|
-
const liveEl = this._document.createElement('div');
|
|
2228
|
-
// Remove any old containers. This can happen when coming in from a server-side-rendered page.
|
|
2229
|
-
for (let i = 0; i < previousElements.length; i++) {
|
|
2230
|
-
previousElements[i].remove();
|
|
2231
|
-
}
|
|
2232
|
-
liveEl.classList.add(elementClass);
|
|
2233
|
-
liveEl.classList.add('cdk-visually-hidden');
|
|
2234
|
-
liveEl.setAttribute('aria-atomic', 'true');
|
|
2235
|
-
liveEl.setAttribute('aria-live', 'polite');
|
|
2236
|
-
liveEl.id = `cdk-live-announcer-${uniqueIds++}`;
|
|
2237
|
-
this._document.body.appendChild(liveEl);
|
|
2238
|
-
return liveEl;
|
|
2239
|
-
}
|
|
2240
|
-
/**
|
|
2241
|
-
* Some browsers won't expose the accessibility node of the live announcer element if there is an
|
|
2242
|
-
* `aria-modal` and the live announcer is outside of it. This method works around the issue by
|
|
2243
|
-
* pointing the `aria-owns` of all modals to the live announcer element.
|
|
2244
|
-
*/
|
|
2245
|
-
_exposeAnnouncerToModals(id) {
|
|
2246
|
-
// TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with
|
|
2247
|
-
// the `SnakBarContainer` and other usages.
|
|
2248
|
-
//
|
|
2249
|
-
// Note that the selector here is limited to CDK overlays at the moment in order to reduce the
|
|
2250
|
-
// section of the DOM we need to look through. This should cover all the cases we support, but
|
|
2251
|
-
// the selector can be expanded if it turns out to be too narrow.
|
|
2252
|
-
const modals = this._document.querySelectorAll('body > .cdk-overlay-container [aria-modal="true"]');
|
|
2253
|
-
for (let i = 0; i < modals.length; i++) {
|
|
2254
|
-
const modal = modals[i];
|
|
2255
|
-
const ariaOwns = modal.getAttribute('aria-owns');
|
|
2256
|
-
if (!ariaOwns) {
|
|
2257
|
-
modal.setAttribute('aria-owns', id);
|
|
2258
|
-
}
|
|
2259
|
-
else if (ariaOwns.indexOf(id) === -1) {
|
|
2260
|
-
modal.setAttribute('aria-owns', ariaOwns + ' ' + id);
|
|
2261
|
-
}
|
|
2262
|
-
}
|
|
2263
|
-
}
|
|
2264
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LiveAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2265
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LiveAnnouncer, providedIn: 'root' });
|
|
2266
|
-
}
|
|
2267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: LiveAnnouncer, decorators: [{
|
|
2268
|
-
type: Injectable,
|
|
2269
|
-
args: [{ providedIn: 'root' }]
|
|
2270
|
-
}], ctorParameters: () => [] });
|
|
2271
|
-
/**
|
|
2272
|
-
* A directive that works similarly to aria-live, but uses the LiveAnnouncer to ensure compatibility
|
|
2273
|
-
* with a wider range of browsers and screen readers.
|
|
2274
|
-
*/
|
|
2275
|
-
class CdkAriaLive {
|
|
2276
|
-
_elementRef = inject(ElementRef);
|
|
2277
|
-
_liveAnnouncer = inject(LiveAnnouncer);
|
|
2278
|
-
_contentObserver = inject(ContentObserver);
|
|
2279
|
-
_ngZone = inject(NgZone);
|
|
2280
|
-
/** The aria-live politeness level to use when announcing messages. */
|
|
2281
|
-
get politeness() {
|
|
2282
|
-
return this._politeness;
|
|
2283
|
-
}
|
|
2284
|
-
set politeness(value) {
|
|
2285
|
-
this._politeness = value === 'off' || value === 'assertive' ? value : 'polite';
|
|
2286
|
-
if (this._politeness === 'off') {
|
|
2287
|
-
if (this._subscription) {
|
|
2288
|
-
this._subscription.unsubscribe();
|
|
2289
|
-
this._subscription = null;
|
|
2290
|
-
}
|
|
2291
|
-
}
|
|
2292
|
-
else if (!this._subscription) {
|
|
2293
|
-
this._subscription = this._ngZone.runOutsideAngular(() => {
|
|
2294
|
-
return this._contentObserver.observe(this._elementRef).subscribe(() => {
|
|
2295
|
-
// Note that we use textContent here, rather than innerText, in order to avoid a reflow.
|
|
2296
|
-
const elementText = this._elementRef.nativeElement.textContent;
|
|
2297
|
-
// The `MutationObserver` fires also for attribute
|
|
2298
|
-
// changes which we don't want to announce.
|
|
2299
|
-
if (elementText !== this._previousAnnouncedText) {
|
|
2300
|
-
this._liveAnnouncer.announce(elementText, this._politeness, this.duration);
|
|
2301
|
-
this._previousAnnouncedText = elementText;
|
|
2302
|
-
}
|
|
2303
|
-
});
|
|
2304
|
-
});
|
|
2305
|
-
}
|
|
2306
|
-
}
|
|
2307
|
-
_politeness = 'polite';
|
|
2308
|
-
/** Time in milliseconds after which to clear out the announcer element. */
|
|
2309
|
-
duration;
|
|
2310
|
-
_previousAnnouncedText;
|
|
2311
|
-
_subscription;
|
|
2312
|
-
constructor() {
|
|
2313
|
-
inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
|
|
2314
|
-
}
|
|
2315
|
-
ngOnDestroy() {
|
|
2316
|
-
if (this._subscription) {
|
|
2317
|
-
this._subscription.unsubscribe();
|
|
2318
|
-
}
|
|
2319
|
-
}
|
|
2320
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkAriaLive, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2321
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: CdkAriaLive, isStandalone: true, selector: "[cdkAriaLive]", inputs: { politeness: ["cdkAriaLive", "politeness"], duration: ["cdkAriaLiveDuration", "duration"] }, exportAs: ["cdkAriaLive"], ngImport: i0 });
|
|
2322
|
-
}
|
|
2323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkAriaLive, decorators: [{
|
|
2324
|
-
type: Directive,
|
|
2325
|
-
args: [{
|
|
2326
|
-
selector: '[cdkAriaLive]',
|
|
2327
|
-
exportAs: 'cdkAriaLive',
|
|
2328
|
-
}]
|
|
2329
|
-
}], ctorParameters: () => [], propDecorators: { politeness: [{
|
|
2330
|
-
type: Input,
|
|
2331
|
-
args: ['cdkAriaLive']
|
|
2332
|
-
}], duration: [{
|
|
2333
|
-
type: Input,
|
|
2334
|
-
args: ['cdkAriaLiveDuration']
|
|
2335
|
-
}] } });
|
|
2336
|
-
|
|
2337
|
-
/** Detection mode used for attributing the origin of a focus event. */
|
|
2338
|
-
var FocusMonitorDetectionMode;
|
|
2339
|
-
(function (FocusMonitorDetectionMode) {
|
|
2340
|
-
/**
|
|
2341
|
-
* Any mousedown, keydown, or touchstart event that happened in the previous
|
|
2342
|
-
* tick or the current tick will be used to assign a focus event's origin (to
|
|
2343
|
-
* either mouse, keyboard, or touch). This is the default option.
|
|
2344
|
-
*/
|
|
2345
|
-
FocusMonitorDetectionMode[FocusMonitorDetectionMode["IMMEDIATE"] = 0] = "IMMEDIATE";
|
|
2346
|
-
/**
|
|
2347
|
-
* A focus event's origin is always attributed to the last corresponding
|
|
2348
|
-
* mousedown, keydown, or touchstart event, no matter how long ago it occurred.
|
|
2349
|
-
*/
|
|
2350
|
-
FocusMonitorDetectionMode[FocusMonitorDetectionMode["EVENTUAL"] = 1] = "EVENTUAL";
|
|
2351
|
-
})(FocusMonitorDetectionMode || (FocusMonitorDetectionMode = {}));
|
|
2352
|
-
/** InjectionToken for FocusMonitorOptions. */
|
|
2353
|
-
const FOCUS_MONITOR_DEFAULT_OPTIONS = new InjectionToken('cdk-focus-monitor-default-options');
|
|
2354
|
-
/**
|
|
2355
|
-
* Event listener options that enable capturing and also
|
|
2356
|
-
* mark the listener as passive if the browser supports it.
|
|
2357
|
-
*/
|
|
2358
|
-
const captureEventListenerOptions = normalizePassiveListenerOptions({
|
|
2359
|
-
passive: true,
|
|
2360
|
-
capture: true,
|
|
2361
|
-
});
|
|
2362
|
-
/** Monitors mouse and keyboard events to determine the cause of focus events. */
|
|
2363
|
-
class FocusMonitor {
|
|
2364
|
-
_ngZone = inject(NgZone);
|
|
2365
|
-
_platform = inject(Platform);
|
|
2366
|
-
_inputModalityDetector = inject(InputModalityDetector);
|
|
2367
|
-
/** The focus origin that the next focus event is a result of. */
|
|
2368
|
-
_origin = null;
|
|
2369
|
-
/** The FocusOrigin of the last focus event tracked by the FocusMonitor. */
|
|
2370
|
-
_lastFocusOrigin;
|
|
2371
|
-
/** Whether the window has just been focused. */
|
|
2372
|
-
_windowFocused = false;
|
|
2373
|
-
/** The timeout id of the window focus timeout. */
|
|
2374
|
-
_windowFocusTimeoutId;
|
|
2375
|
-
/** The timeout id of the origin clearing timeout. */
|
|
2376
|
-
_originTimeoutId;
|
|
2377
|
-
/**
|
|
2378
|
-
* Whether the origin was determined via a touch interaction. Necessary as properly attributing
|
|
2379
|
-
* focus events to touch interactions requires special logic.
|
|
2380
|
-
*/
|
|
2381
|
-
_originFromTouchInteraction = false;
|
|
2382
|
-
/** Map of elements being monitored to their info. */
|
|
2383
|
-
_elementInfo = new Map();
|
|
2384
|
-
/** The number of elements currently being monitored. */
|
|
2385
|
-
_monitoredElementCount = 0;
|
|
2386
|
-
/**
|
|
2387
|
-
* Keeps track of the root nodes to which we've currently bound a focus/blur handler,
|
|
2388
|
-
* as well as the number of monitored elements that they contain. We have to treat focus/blur
|
|
2389
|
-
* handlers differently from the rest of the events, because the browser won't emit events
|
|
2390
|
-
* to the document when focus moves inside of a shadow root.
|
|
2391
|
-
*/
|
|
2392
|
-
_rootNodeFocusListenerCount = new Map();
|
|
2393
|
-
/**
|
|
2394
|
-
* The specified detection mode, used for attributing the origin of a focus
|
|
2395
|
-
* event.
|
|
2396
|
-
*/
|
|
2397
|
-
_detectionMode;
|
|
2398
|
-
/**
|
|
2399
|
-
* Event listener for `focus` events on the window.
|
|
2400
|
-
* Needs to be an arrow function in order to preserve the context when it gets bound.
|
|
2401
|
-
*/
|
|
2402
|
-
_windowFocusListener = () => {
|
|
2403
|
-
// Make a note of when the window regains focus, so we can
|
|
2404
|
-
// restore the origin info for the focused element.
|
|
2405
|
-
this._windowFocused = true;
|
|
2406
|
-
this._windowFocusTimeoutId = setTimeout(() => (this._windowFocused = false));
|
|
2407
|
-
};
|
|
2408
|
-
/** Used to reference correct document/window */
|
|
2409
|
-
_document = inject(DOCUMENT, { optional: true });
|
|
2410
|
-
/** Subject for stopping our InputModalityDetector subscription. */
|
|
2411
|
-
_stopInputModalityDetector = new Subject();
|
|
2412
|
-
constructor() {
|
|
2413
|
-
const options = inject(FOCUS_MONITOR_DEFAULT_OPTIONS, {
|
|
2414
|
-
optional: true,
|
|
2415
|
-
});
|
|
2416
|
-
this._detectionMode = options?.detectionMode || FocusMonitorDetectionMode.IMMEDIATE;
|
|
2417
|
-
}
|
|
2418
|
-
/**
|
|
2419
|
-
* Event listener for `focus` and 'blur' events on the document.
|
|
2420
|
-
* Needs to be an arrow function in order to preserve the context when it gets bound.
|
|
2421
|
-
*/
|
|
2422
|
-
_rootNodeFocusAndBlurListener = (event) => {
|
|
2423
|
-
const target = _getEventTarget(event);
|
|
2424
|
-
// We need to walk up the ancestor chain in order to support `checkChildren`.
|
|
2425
|
-
for (let element = target; element; element = element.parentElement) {
|
|
2426
|
-
if (event.type === 'focus') {
|
|
2427
|
-
this._onFocus(event, element);
|
|
2428
|
-
}
|
|
2429
|
-
else {
|
|
2430
|
-
this._onBlur(event, element);
|
|
2431
|
-
}
|
|
2432
|
-
}
|
|
2433
|
-
};
|
|
2434
|
-
monitor(element, checkChildren = false) {
|
|
2435
|
-
const nativeElement = coerceElement(element);
|
|
2436
|
-
// Do nothing if we're not on the browser platform or the passed in node isn't an element.
|
|
2437
|
-
if (!this._platform.isBrowser || nativeElement.nodeType !== 1) {
|
|
2438
|
-
// Note: we don't want the observable to emit at all so we don't pass any parameters.
|
|
2439
|
-
return of();
|
|
2440
|
-
}
|
|
2441
|
-
// If the element is inside the shadow DOM, we need to bind our focus/blur listeners to
|
|
2442
|
-
// the shadow root, rather than the `document`, because the browser won't emit focus events
|
|
2443
|
-
// to the `document`, if focus is moving within the same shadow root.
|
|
2444
|
-
const rootNode = _getShadowRoot(nativeElement) || this._getDocument();
|
|
2445
|
-
const cachedInfo = this._elementInfo.get(nativeElement);
|
|
2446
|
-
// Check if we're already monitoring this element.
|
|
2447
|
-
if (cachedInfo) {
|
|
2448
|
-
if (checkChildren) {
|
|
2449
|
-
// TODO(COMP-318): this can be problematic, because it'll turn all non-checkChildren
|
|
2450
|
-
// observers into ones that behave as if `checkChildren` was turned on. We need a more
|
|
2451
|
-
// robust solution.
|
|
2452
|
-
cachedInfo.checkChildren = true;
|
|
2453
|
-
}
|
|
2454
|
-
return cachedInfo.subject;
|
|
2455
|
-
}
|
|
2456
|
-
// Create monitored element info.
|
|
2457
|
-
const info = {
|
|
2458
|
-
checkChildren: checkChildren,
|
|
2459
|
-
subject: new Subject(),
|
|
2460
|
-
rootNode,
|
|
2461
|
-
};
|
|
2462
|
-
this._elementInfo.set(nativeElement, info);
|
|
2463
|
-
this._registerGlobalListeners(info);
|
|
2464
|
-
return info.subject;
|
|
2465
|
-
}
|
|
2466
|
-
stopMonitoring(element) {
|
|
2467
|
-
const nativeElement = coerceElement(element);
|
|
2468
|
-
const elementInfo = this._elementInfo.get(nativeElement);
|
|
2469
|
-
if (elementInfo) {
|
|
2470
|
-
elementInfo.subject.complete();
|
|
2471
|
-
this._setClasses(nativeElement);
|
|
2472
|
-
this._elementInfo.delete(nativeElement);
|
|
2473
|
-
this._removeGlobalListeners(elementInfo);
|
|
2474
|
-
}
|
|
2475
|
-
}
|
|
2476
|
-
focusVia(element, origin, options) {
|
|
2477
|
-
const nativeElement = coerceElement(element);
|
|
2478
|
-
const focusedElement = this._getDocument().activeElement;
|
|
2479
|
-
// If the element is focused already, calling `focus` again won't trigger the event listener
|
|
2480
|
-
// which means that the focus classes won't be updated. If that's the case, update the classes
|
|
2481
|
-
// directly without waiting for an event.
|
|
2482
|
-
if (nativeElement === focusedElement) {
|
|
2483
|
-
this._getClosestElementsInfo(nativeElement).forEach(([currentElement, info]) => this._originChanged(currentElement, origin, info));
|
|
2484
|
-
}
|
|
2485
|
-
else {
|
|
2486
|
-
this._setOrigin(origin);
|
|
2487
|
-
// `focus` isn't available on the server
|
|
2488
|
-
if (typeof nativeElement.focus === 'function') {
|
|
2489
|
-
nativeElement.focus(options);
|
|
2490
|
-
}
|
|
2491
|
-
}
|
|
2492
|
-
}
|
|
2493
|
-
ngOnDestroy() {
|
|
2494
|
-
this._elementInfo.forEach((_info, element) => this.stopMonitoring(element));
|
|
2495
|
-
}
|
|
2496
|
-
/** Access injected document if available or fallback to global document reference */
|
|
2497
|
-
_getDocument() {
|
|
2498
|
-
return this._document || document;
|
|
2499
|
-
}
|
|
2500
|
-
/** Use defaultView of injected document if available or fallback to global window reference */
|
|
2501
|
-
_getWindow() {
|
|
2502
|
-
const doc = this._getDocument();
|
|
2503
|
-
return doc.defaultView || window;
|
|
2504
|
-
}
|
|
2505
|
-
_getFocusOrigin(focusEventTarget) {
|
|
2506
|
-
if (this._origin) {
|
|
2507
|
-
// If the origin was realized via a touch interaction, we need to perform additional checks
|
|
2508
|
-
// to determine whether the focus origin should be attributed to touch or program.
|
|
2509
|
-
if (this._originFromTouchInteraction) {
|
|
2510
|
-
return this._shouldBeAttributedToTouch(focusEventTarget) ? 'touch' : 'program';
|
|
2511
|
-
}
|
|
2512
|
-
else {
|
|
2513
|
-
return this._origin;
|
|
2514
|
-
}
|
|
2515
|
-
}
|
|
2516
|
-
// If the window has just regained focus, we can restore the most recent origin from before the
|
|
2517
|
-
// window blurred. Otherwise, we've reached the point where we can't identify the source of the
|
|
2518
|
-
// focus. This typically means one of two things happened:
|
|
2519
|
-
//
|
|
2520
|
-
// 1) The element was programmatically focused, or
|
|
2521
|
-
// 2) The element was focused via screen reader navigation (which generally doesn't fire
|
|
2522
|
-
// events).
|
|
2523
|
-
//
|
|
2524
|
-
// Because we can't distinguish between these two cases, we default to setting `program`.
|
|
2525
|
-
if (this._windowFocused && this._lastFocusOrigin) {
|
|
2526
|
-
return this._lastFocusOrigin;
|
|
2527
|
-
}
|
|
2528
|
-
// If the interaction is coming from an input label, we consider it a mouse interactions.
|
|
2529
|
-
// This is a special case where focus moves on `click`, rather than `mousedown` which breaks
|
|
2530
|
-
// our detection, because all our assumptions are for `mousedown`. We need to handle this
|
|
2531
|
-
// special case, because it's very common for checkboxes and radio buttons.
|
|
2532
|
-
if (focusEventTarget && this._isLastInteractionFromInputLabel(focusEventTarget)) {
|
|
2533
|
-
return 'mouse';
|
|
2534
|
-
}
|
|
2535
|
-
return 'program';
|
|
2536
|
-
}
|
|
2537
|
-
/**
|
|
2538
|
-
* Returns whether the focus event should be attributed to touch. Recall that in IMMEDIATE mode, a
|
|
2539
|
-
* touch origin isn't immediately reset at the next tick (see _setOrigin). This means that when we
|
|
2540
|
-
* handle a focus event following a touch interaction, we need to determine whether (1) the focus
|
|
2541
|
-
* event was directly caused by the touch interaction or (2) the focus event was caused by a
|
|
2542
|
-
* subsequent programmatic focus call triggered by the touch interaction.
|
|
2543
|
-
* @param focusEventTarget The target of the focus event under examination.
|
|
2544
|
-
*/
|
|
2545
|
-
_shouldBeAttributedToTouch(focusEventTarget) {
|
|
2546
|
-
// Please note that this check is not perfect. Consider the following edge case:
|
|
2547
|
-
//
|
|
2548
|
-
// <div #parent tabindex="0">
|
|
2549
|
-
// <div #child tabindex="0" (click)="#parent.focus()"></div>
|
|
2550
|
-
// </div>
|
|
2551
|
-
//
|
|
2552
|
-
// Suppose there is a FocusMonitor in IMMEDIATE mode attached to #parent. When the user touches
|
|
2553
|
-
// #child, #parent is programmatically focused. This code will attribute the focus to touch
|
|
2554
|
-
// instead of program. This is a relatively minor edge-case that can be worked around by using
|
|
2555
|
-
// focusVia(parent, 'program') to focus #parent.
|
|
2556
|
-
return (this._detectionMode === FocusMonitorDetectionMode.EVENTUAL ||
|
|
2557
|
-
!!focusEventTarget?.contains(this._inputModalityDetector._mostRecentTarget));
|
|
2558
|
-
}
|
|
2559
|
-
/**
|
|
2560
|
-
* Sets the focus classes on the element based on the given focus origin.
|
|
2561
|
-
* @param element The element to update the classes on.
|
|
2562
|
-
* @param origin The focus origin.
|
|
2563
|
-
*/
|
|
2564
|
-
_setClasses(element, origin) {
|
|
2565
|
-
element.classList.toggle('cdk-focused', !!origin);
|
|
2566
|
-
element.classList.toggle('cdk-touch-focused', origin === 'touch');
|
|
2567
|
-
element.classList.toggle('cdk-keyboard-focused', origin === 'keyboard');
|
|
2568
|
-
element.classList.toggle('cdk-mouse-focused', origin === 'mouse');
|
|
2569
|
-
element.classList.toggle('cdk-program-focused', origin === 'program');
|
|
2570
|
-
}
|
|
2571
|
-
/**
|
|
2572
|
-
* Updates the focus origin. If we're using immediate detection mode, we schedule an async
|
|
2573
|
-
* function to clear the origin at the end of a timeout. The duration of the timeout depends on
|
|
2574
|
-
* the origin being set.
|
|
2575
|
-
* @param origin The origin to set.
|
|
2576
|
-
* @param isFromInteraction Whether we are setting the origin from an interaction event.
|
|
2577
|
-
*/
|
|
2578
|
-
_setOrigin(origin, isFromInteraction = false) {
|
|
2579
|
-
this._ngZone.runOutsideAngular(() => {
|
|
2580
|
-
this._origin = origin;
|
|
2581
|
-
this._originFromTouchInteraction = origin === 'touch' && isFromInteraction;
|
|
2582
|
-
// If we're in IMMEDIATE mode, reset the origin at the next tick (or in `TOUCH_BUFFER_MS` ms
|
|
2583
|
-
// for a touch event). We reset the origin at the next tick because Firefox focuses one tick
|
|
2584
|
-
// after the interaction event. We wait `TOUCH_BUFFER_MS` ms before resetting the origin for
|
|
2585
|
-
// a touch event because when a touch event is fired, the associated focus event isn't yet in
|
|
2586
|
-
// the event queue. Before doing so, clear any pending timeouts.
|
|
2587
|
-
if (this._detectionMode === FocusMonitorDetectionMode.IMMEDIATE) {
|
|
2588
|
-
clearTimeout(this._originTimeoutId);
|
|
2589
|
-
const ms = this._originFromTouchInteraction ? TOUCH_BUFFER_MS : 1;
|
|
2590
|
-
this._originTimeoutId = setTimeout(() => (this._origin = null), ms);
|
|
2591
|
-
}
|
|
2592
|
-
});
|
|
2593
|
-
}
|
|
2594
|
-
/**
|
|
2595
|
-
* Handles focus events on a registered element.
|
|
2596
|
-
* @param event The focus event.
|
|
2597
|
-
* @param element The monitored element.
|
|
2598
|
-
*/
|
|
2599
|
-
_onFocus(event, element) {
|
|
2600
|
-
// NOTE(mmalerba): We currently set the classes based on the focus origin of the most recent
|
|
2601
|
-
// focus event affecting the monitored element. If we want to use the origin of the first event
|
|
2602
|
-
// instead we should check for the cdk-focused class here and return if the element already has
|
|
2603
|
-
// it. (This only matters for elements that have includesChildren = true).
|
|
2604
|
-
// If we are not counting child-element-focus as focused, make sure that the event target is the
|
|
2605
|
-
// monitored element itself.
|
|
2606
|
-
const elementInfo = this._elementInfo.get(element);
|
|
2607
|
-
const focusEventTarget = _getEventTarget(event);
|
|
2608
|
-
if (!elementInfo || (!elementInfo.checkChildren && element !== focusEventTarget)) {
|
|
2609
|
-
return;
|
|
2610
|
-
}
|
|
2611
|
-
this._originChanged(element, this._getFocusOrigin(focusEventTarget), elementInfo);
|
|
2612
|
-
}
|
|
2613
|
-
/**
|
|
2614
|
-
* Handles blur events on a registered element.
|
|
2615
|
-
* @param event The blur event.
|
|
2616
|
-
* @param element The monitored element.
|
|
2617
|
-
*/
|
|
2618
|
-
_onBlur(event, element) {
|
|
2619
|
-
// If we are counting child-element-focus as focused, make sure that we aren't just blurring in
|
|
2620
|
-
// order to focus another child of the monitored element.
|
|
2621
|
-
const elementInfo = this._elementInfo.get(element);
|
|
2622
|
-
if (!elementInfo ||
|
|
2623
|
-
(elementInfo.checkChildren &&
|
|
2624
|
-
event.relatedTarget instanceof Node &&
|
|
2625
|
-
element.contains(event.relatedTarget))) {
|
|
2626
|
-
return;
|
|
2627
|
-
}
|
|
2628
|
-
this._setClasses(element);
|
|
2629
|
-
this._emitOrigin(elementInfo, null);
|
|
2630
|
-
}
|
|
2631
|
-
_emitOrigin(info, origin) {
|
|
2632
|
-
if (info.subject.observers.length) {
|
|
2633
|
-
this._ngZone.run(() => info.subject.next(origin));
|
|
2634
|
-
}
|
|
2635
|
-
}
|
|
2636
|
-
_registerGlobalListeners(elementInfo) {
|
|
2637
|
-
if (!this._platform.isBrowser) {
|
|
2638
|
-
return;
|
|
2639
|
-
}
|
|
2640
|
-
const rootNode = elementInfo.rootNode;
|
|
2641
|
-
const rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode) || 0;
|
|
2642
|
-
if (!rootNodeFocusListeners) {
|
|
2643
|
-
this._ngZone.runOutsideAngular(() => {
|
|
2644
|
-
rootNode.addEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
|
|
2645
|
-
rootNode.addEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
|
|
2646
|
-
});
|
|
2647
|
-
}
|
|
2648
|
-
this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners + 1);
|
|
2649
|
-
// Register global listeners when first element is monitored.
|
|
2650
|
-
if (++this._monitoredElementCount === 1) {
|
|
2651
|
-
// Note: we listen to events in the capture phase so we
|
|
2652
|
-
// can detect them even if the user stops propagation.
|
|
2653
|
-
this._ngZone.runOutsideAngular(() => {
|
|
2654
|
-
const window = this._getWindow();
|
|
2655
|
-
window.addEventListener('focus', this._windowFocusListener);
|
|
2656
|
-
});
|
|
2657
|
-
// The InputModalityDetector is also just a collection of global listeners.
|
|
2658
|
-
this._inputModalityDetector.modalityDetected
|
|
2659
|
-
.pipe(takeUntil(this._stopInputModalityDetector))
|
|
2660
|
-
.subscribe(modality => {
|
|
2661
|
-
this._setOrigin(modality, true /* isFromInteraction */);
|
|
2662
|
-
});
|
|
2663
|
-
}
|
|
2664
|
-
}
|
|
2665
|
-
_removeGlobalListeners(elementInfo) {
|
|
2666
|
-
const rootNode = elementInfo.rootNode;
|
|
2667
|
-
if (this._rootNodeFocusListenerCount.has(rootNode)) {
|
|
2668
|
-
const rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode);
|
|
2669
|
-
if (rootNodeFocusListeners > 1) {
|
|
2670
|
-
this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners - 1);
|
|
2671
|
-
}
|
|
2672
|
-
else {
|
|
2673
|
-
rootNode.removeEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
|
|
2674
|
-
rootNode.removeEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
|
|
2675
|
-
this._rootNodeFocusListenerCount.delete(rootNode);
|
|
2676
|
-
}
|
|
2677
|
-
}
|
|
2678
|
-
// Unregister global listeners when last element is unmonitored.
|
|
2679
|
-
if (!--this._monitoredElementCount) {
|
|
2680
|
-
const window = this._getWindow();
|
|
2681
|
-
window.removeEventListener('focus', this._windowFocusListener);
|
|
2682
|
-
// Equivalently, stop our InputModalityDetector subscription.
|
|
2683
|
-
this._stopInputModalityDetector.next();
|
|
2684
|
-
// Clear timeouts for all potentially pending timeouts to prevent the leaks.
|
|
2685
|
-
clearTimeout(this._windowFocusTimeoutId);
|
|
2686
|
-
clearTimeout(this._originTimeoutId);
|
|
2687
|
-
}
|
|
2688
|
-
}
|
|
2689
|
-
/** Updates all the state on an element once its focus origin has changed. */
|
|
2690
|
-
_originChanged(element, origin, elementInfo) {
|
|
2691
|
-
this._setClasses(element, origin);
|
|
2692
|
-
this._emitOrigin(elementInfo, origin);
|
|
2693
|
-
this._lastFocusOrigin = origin;
|
|
2694
|
-
}
|
|
2695
|
-
/**
|
|
2696
|
-
* Collects the `MonitoredElementInfo` of a particular element and
|
|
2697
|
-
* all of its ancestors that have enabled `checkChildren`.
|
|
2698
|
-
* @param element Element from which to start the search.
|
|
2699
|
-
*/
|
|
2700
|
-
_getClosestElementsInfo(element) {
|
|
2701
|
-
const results = [];
|
|
2702
|
-
this._elementInfo.forEach((info, currentElement) => {
|
|
2703
|
-
if (currentElement === element || (info.checkChildren && currentElement.contains(element))) {
|
|
2704
|
-
results.push([currentElement, info]);
|
|
2705
|
-
}
|
|
2706
|
-
});
|
|
2707
|
-
return results;
|
|
2708
|
-
}
|
|
2709
|
-
/**
|
|
2710
|
-
* Returns whether an interaction is likely to have come from the user clicking the `label` of
|
|
2711
|
-
* an `input` or `textarea` in order to focus it.
|
|
2712
|
-
* @param focusEventTarget Target currently receiving focus.
|
|
2713
|
-
*/
|
|
2714
|
-
_isLastInteractionFromInputLabel(focusEventTarget) {
|
|
2715
|
-
const { _mostRecentTarget: mostRecentTarget, mostRecentModality } = this._inputModalityDetector;
|
|
2716
|
-
// If the last interaction used the mouse on an element contained by one of the labels
|
|
2717
|
-
// of an `input`/`textarea` that is currently focused, it is very likely that the
|
|
2718
|
-
// user redirected focus using the label.
|
|
2719
|
-
if (mostRecentModality !== 'mouse' ||
|
|
2720
|
-
!mostRecentTarget ||
|
|
2721
|
-
mostRecentTarget === focusEventTarget ||
|
|
2722
|
-
(focusEventTarget.nodeName !== 'INPUT' && focusEventTarget.nodeName !== 'TEXTAREA') ||
|
|
2723
|
-
focusEventTarget.disabled) {
|
|
2724
|
-
return false;
|
|
2725
|
-
}
|
|
2726
|
-
const labels = focusEventTarget.labels;
|
|
2727
|
-
if (labels) {
|
|
2728
|
-
for (let i = 0; i < labels.length; i++) {
|
|
2729
|
-
if (labels[i].contains(mostRecentTarget)) {
|
|
2730
|
-
return true;
|
|
2731
|
-
}
|
|
2732
|
-
}
|
|
2733
|
-
}
|
|
2734
|
-
return false;
|
|
2735
|
-
}
|
|
2736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2737
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusMonitor, providedIn: 'root' });
|
|
2738
|
-
}
|
|
2739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: FocusMonitor, decorators: [{
|
|
2740
|
-
type: Injectable,
|
|
2741
|
-
args: [{ providedIn: 'root' }]
|
|
2742
|
-
}], ctorParameters: () => [] });
|
|
2743
|
-
/**
|
|
2744
|
-
* Directive that determines how a particular element was focused (via keyboard, mouse, touch, or
|
|
2745
|
-
* programmatically) and adds corresponding classes to the element.
|
|
2746
|
-
*
|
|
2747
|
-
* There are two variants of this directive:
|
|
2748
|
-
* 1) cdkMonitorElementFocus: does not consider an element to be focused if one of its children is
|
|
2749
|
-
* focused.
|
|
2750
|
-
* 2) cdkMonitorSubtreeFocus: considers an element focused if it or any of its children are focused.
|
|
2751
|
-
*/
|
|
2752
|
-
class CdkMonitorFocus {
|
|
2753
|
-
_elementRef = inject(ElementRef);
|
|
2754
|
-
_focusMonitor = inject(FocusMonitor);
|
|
2755
|
-
_monitorSubscription;
|
|
2756
|
-
_focusOrigin = null;
|
|
2757
|
-
cdkFocusChange = new EventEmitter();
|
|
2758
|
-
constructor() { }
|
|
2759
|
-
get focusOrigin() {
|
|
2760
|
-
return this._focusOrigin;
|
|
2761
|
-
}
|
|
2762
|
-
ngAfterViewInit() {
|
|
2763
|
-
const element = this._elementRef.nativeElement;
|
|
2764
|
-
this._monitorSubscription = this._focusMonitor
|
|
2765
|
-
.monitor(element, element.nodeType === 1 && element.hasAttribute('cdkMonitorSubtreeFocus'))
|
|
2766
|
-
.subscribe(origin => {
|
|
2767
|
-
this._focusOrigin = origin;
|
|
2768
|
-
this.cdkFocusChange.emit(origin);
|
|
2769
|
-
});
|
|
2770
|
-
}
|
|
2771
|
-
ngOnDestroy() {
|
|
2772
|
-
this._focusMonitor.stopMonitoring(this._elementRef);
|
|
2773
|
-
if (this._monitorSubscription) {
|
|
2774
|
-
this._monitorSubscription.unsubscribe();
|
|
2775
|
-
}
|
|
2776
|
-
}
|
|
2777
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkMonitorFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2778
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: CdkMonitorFocus, isStandalone: true, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: { cdkFocusChange: "cdkFocusChange" }, exportAs: ["cdkMonitorFocus"], ngImport: i0 });
|
|
2779
|
-
}
|
|
2780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkMonitorFocus, decorators: [{
|
|
2781
|
-
type: Directive,
|
|
2782
|
-
args: [{
|
|
2783
|
-
selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',
|
|
2784
|
-
exportAs: 'cdkMonitorFocus',
|
|
2785
|
-
}]
|
|
2786
|
-
}], ctorParameters: () => [], propDecorators: { cdkFocusChange: [{
|
|
2787
|
-
type: Output
|
|
2788
|
-
}] } });
|
|
2789
|
-
|
|
2790
|
-
/** Set of possible high-contrast mode backgrounds. */
|
|
2791
|
-
var HighContrastMode;
|
|
2792
|
-
(function (HighContrastMode) {
|
|
2793
|
-
HighContrastMode[HighContrastMode["NONE"] = 0] = "NONE";
|
|
2794
|
-
HighContrastMode[HighContrastMode["BLACK_ON_WHITE"] = 1] = "BLACK_ON_WHITE";
|
|
2795
|
-
HighContrastMode[HighContrastMode["WHITE_ON_BLACK"] = 2] = "WHITE_ON_BLACK";
|
|
2796
|
-
})(HighContrastMode || (HighContrastMode = {}));
|
|
2797
|
-
/** CSS class applied to the document body when in black-on-white high-contrast mode. */
|
|
2798
|
-
const BLACK_ON_WHITE_CSS_CLASS = 'cdk-high-contrast-black-on-white';
|
|
2799
|
-
/** CSS class applied to the document body when in white-on-black high-contrast mode. */
|
|
2800
|
-
const WHITE_ON_BLACK_CSS_CLASS = 'cdk-high-contrast-white-on-black';
|
|
2801
|
-
/** CSS class applied to the document body when in high-contrast mode. */
|
|
2802
|
-
const HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = 'cdk-high-contrast-active';
|
|
2803
|
-
/**
|
|
2804
|
-
* Service to determine whether the browser is currently in a high-contrast-mode environment.
|
|
2805
|
-
*
|
|
2806
|
-
* Microsoft Windows supports an accessibility feature called "High Contrast Mode". This mode
|
|
2807
|
-
* changes the appearance of all applications, including web applications, to dramatically increase
|
|
2808
|
-
* contrast.
|
|
2809
|
-
*
|
|
2810
|
-
* IE, Edge, and Firefox currently support this mode. Chrome does not support Windows High Contrast
|
|
2811
|
-
* Mode. This service does not detect high-contrast mode as added by the Chrome "High Contrast"
|
|
2812
|
-
* browser extension.
|
|
2813
|
-
*/
|
|
2814
|
-
class HighContrastModeDetector {
|
|
2815
|
-
_platform = inject(Platform);
|
|
2816
|
-
/**
|
|
2817
|
-
* Figuring out the high contrast mode and adding the body classes can cause
|
|
2818
|
-
* some expensive layouts. This flag is used to ensure that we only do it once.
|
|
2819
|
-
*/
|
|
2820
|
-
_hasCheckedHighContrastMode;
|
|
2821
|
-
_document = inject(DOCUMENT);
|
|
2822
|
-
_breakpointSubscription;
|
|
2823
|
-
constructor() {
|
|
2824
|
-
this._breakpointSubscription = inject(BreakpointObserver)
|
|
2825
|
-
.observe('(forced-colors: active)')
|
|
2826
|
-
.subscribe(() => {
|
|
2827
|
-
if (this._hasCheckedHighContrastMode) {
|
|
2828
|
-
this._hasCheckedHighContrastMode = false;
|
|
2829
|
-
this._applyBodyHighContrastModeCssClasses();
|
|
2830
|
-
}
|
|
2831
|
-
});
|
|
2832
|
-
}
|
|
2833
|
-
/** Gets the current high-contrast-mode for the page. */
|
|
2834
|
-
getHighContrastMode() {
|
|
2835
|
-
if (!this._platform.isBrowser) {
|
|
2836
|
-
return HighContrastMode.NONE;
|
|
2837
|
-
}
|
|
2838
|
-
// Create a test element with an arbitrary background-color that is neither black nor
|
|
2839
|
-
// white; high-contrast mode will coerce the color to either black or white. Also ensure that
|
|
2840
|
-
// appending the test element to the DOM does not affect layout by absolutely positioning it
|
|
2841
|
-
const testElement = this._document.createElement('div');
|
|
2842
|
-
testElement.style.backgroundColor = 'rgb(1,2,3)';
|
|
2843
|
-
testElement.style.position = 'absolute';
|
|
2844
|
-
this._document.body.appendChild(testElement);
|
|
2845
|
-
// Get the computed style for the background color, collapsing spaces to normalize between
|
|
2846
|
-
// browsers. Once we get this color, we no longer need the test element. Access the `window`
|
|
2847
|
-
// via the document so we can fake it in tests. Note that we have extra null checks, because
|
|
2848
|
-
// this logic will likely run during app bootstrap and throwing can break the entire app.
|
|
2849
|
-
const documentWindow = this._document.defaultView || window;
|
|
2850
|
-
const computedStyle = documentWindow && documentWindow.getComputedStyle
|
|
2851
|
-
? documentWindow.getComputedStyle(testElement)
|
|
2852
|
-
: null;
|
|
2853
|
-
const computedColor = ((computedStyle && computedStyle.backgroundColor) || '').replace(/ /g, '');
|
|
2854
|
-
testElement.remove();
|
|
2855
|
-
switch (computedColor) {
|
|
2856
|
-
// Pre Windows 11 dark theme.
|
|
2857
|
-
case 'rgb(0,0,0)':
|
|
2858
|
-
// Windows 11 dark themes.
|
|
2859
|
-
case 'rgb(45,50,54)':
|
|
2860
|
-
case 'rgb(32,32,32)':
|
|
2861
|
-
return HighContrastMode.WHITE_ON_BLACK;
|
|
2862
|
-
// Pre Windows 11 light theme.
|
|
2863
|
-
case 'rgb(255,255,255)':
|
|
2864
|
-
// Windows 11 light theme.
|
|
2865
|
-
case 'rgb(255,250,239)':
|
|
2866
|
-
return HighContrastMode.BLACK_ON_WHITE;
|
|
2867
|
-
}
|
|
2868
|
-
return HighContrastMode.NONE;
|
|
2869
|
-
}
|
|
2870
|
-
ngOnDestroy() {
|
|
2871
|
-
this._breakpointSubscription.unsubscribe();
|
|
2872
|
-
}
|
|
2873
|
-
/** Applies CSS classes indicating high-contrast mode to document body (browser-only). */
|
|
2874
|
-
_applyBodyHighContrastModeCssClasses() {
|
|
2875
|
-
if (!this._hasCheckedHighContrastMode && this._platform.isBrowser && this._document.body) {
|
|
2876
|
-
const bodyClasses = this._document.body.classList;
|
|
2877
|
-
bodyClasses.remove(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);
|
|
2878
|
-
this._hasCheckedHighContrastMode = true;
|
|
2879
|
-
const mode = this.getHighContrastMode();
|
|
2880
|
-
if (mode === HighContrastMode.BLACK_ON_WHITE) {
|
|
2881
|
-
bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS);
|
|
2882
|
-
}
|
|
2883
|
-
else if (mode === HighContrastMode.WHITE_ON_BLACK) {
|
|
2884
|
-
bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);
|
|
2885
|
-
}
|
|
2886
|
-
}
|
|
2887
|
-
}
|
|
2888
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: HighContrastModeDetector, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2889
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: HighContrastModeDetector, providedIn: 'root' });
|
|
2890
|
-
}
|
|
2891
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: HighContrastModeDetector, decorators: [{
|
|
2892
|
-
type: Injectable,
|
|
2893
|
-
args: [{ providedIn: 'root' }]
|
|
2894
|
-
}], ctorParameters: () => [] });
|
|
2895
|
-
|
|
2896
|
-
class A11yModule {
|
|
2897
|
-
constructor() {
|
|
2898
|
-
inject(HighContrastModeDetector)._applyBodyHighContrastModeCssClasses();
|
|
2899
|
-
}
|
|
2900
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: A11yModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2901
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: A11yModule, imports: [ObserversModule, CdkAriaLive, CdkTrapFocus, CdkMonitorFocus], exports: [CdkAriaLive, CdkTrapFocus, CdkMonitorFocus] });
|
|
2902
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: A11yModule, imports: [ObserversModule] });
|
|
2903
|
-
}
|
|
2904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: A11yModule, decorators: [{
|
|
2905
|
-
type: NgModule,
|
|
2906
|
-
args: [{
|
|
2907
|
-
imports: [ObserversModule, CdkAriaLive, CdkTrapFocus, CdkMonitorFocus],
|
|
2908
|
-
exports: [CdkAriaLive, CdkTrapFocus, CdkMonitorFocus],
|
|
2909
|
-
}]
|
|
2910
|
-
}], ctorParameters: () => [] });
|
|
2911
|
-
|
|
2912
|
-
/**
|
|
2913
|
-
* Keeps track of the ID count per prefix. This helps us make the IDs a bit more deterministic
|
|
2914
|
-
* like they were before the service was introduced. Note that ideally we wouldn't have to do
|
|
2915
|
-
* this, but there are some internal tests that rely on the IDs.
|
|
2916
|
-
*/
|
|
2917
|
-
const counters = {};
|
|
2918
|
-
/** Service that generates unique IDs for DOM nodes. */
|
|
2919
|
-
class _IdGenerator {
|
|
2920
|
-
_appId = inject(APP_ID);
|
|
2921
|
-
/**
|
|
2922
|
-
* Generates a unique ID with a specific prefix.
|
|
2923
|
-
* @param prefix Prefix to add to the ID.
|
|
2924
|
-
*/
|
|
2925
|
-
getId(prefix) {
|
|
2926
|
-
// Omit the app ID if it's the default `ng`. Since the vast majority of pages have one
|
|
2927
|
-
// Angular app on them, we can reduce the amount of breakages by not adding it.
|
|
2928
|
-
if (this._appId !== 'ng') {
|
|
2929
|
-
prefix += this._appId;
|
|
2930
|
-
}
|
|
2931
|
-
if (!counters.hasOwnProperty(prefix)) {
|
|
2932
|
-
counters[prefix] = 0;
|
|
2933
|
-
}
|
|
2934
|
-
return `${prefix}${counters[prefix]++}`;
|
|
2935
|
-
}
|
|
2936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: _IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2937
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: _IdGenerator, providedIn: 'root' });
|
|
2938
|
-
}
|
|
2939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: _IdGenerator, decorators: [{
|
|
2940
|
-
type: Injectable,
|
|
2941
|
-
args: [{ providedIn: 'root' }]
|
|
2942
|
-
}] });
|
|
2943
|
-
|
|
2944
|
-
export { A11yModule, ActiveDescendantKeyManager, AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, CdkAriaLive, CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_MONITOR_DEFAULT_OPTIONS, FOCUS_TRAP_INERT_STRATEGY, FocusKeyManager, FocusMonitor, FocusMonitorDetectionMode, FocusTrap, FocusTrapFactory, HighContrastMode, HighContrastModeDetector, INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS, INPUT_MODALITY_DETECTOR_OPTIONS, InputModalityDetector, InteractivityChecker, IsFocusableConfig, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, NOOP_TREE_KEY_MANAGER_FACTORY, NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER, NoopTreeKeyManager, TREE_KEY_MANAGER, TREE_KEY_MANAGER_FACTORY, TREE_KEY_MANAGER_FACTORY_PROVIDER, TreeKeyManager, _IdGenerator, addAriaReferencedId, getAriaReferenceIds, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, removeAriaReferencedId };
|
|
538
|
+
export { AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_TRAP_INERT_STRATEGY, MESSAGES_CONTAINER_ID, NOOP_TREE_KEY_MANAGER_FACTORY, NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER, NoopTreeKeyManager, addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId };
|
|
2945
539
|
//# sourceMappingURL=a11y.mjs.map
|