@angular/cdk 9.1.2 → 9.2.1

package/fesm5/a11y.js

@@ -1688,6 +1688,24 @@ var CdkAriaLive = /** @class */ (function () {
     return CdkAriaLive;
 }());
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Screenreaders will often fire fake mousedown events when a focusable element
+ * is activated using the keyboard. We can typically distinguish between these faked
+ * mousedown events and real mousedown events using the "buttons" property. While
+ * real mousedowns will indicate the mouse button that was pressed (e.g. "1" for
+ * the left mouse button), faked mousedowns will usually set the property value to 0.
+ */
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1698,6 +1716,8 @@ var CdkAriaLive = /** @class */ (function () {
 // This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
 // that a value of around 650ms seems appropriate.
 var TOUCH_BUFFER_MS = 650;
+/** InjectionToken for FocusMonitorOptions. */
+var FOCUS_MONITOR_DEFAULT_OPTIONS = new InjectionToken('cdk-focus-monitor-default-options');
 /**
  * Event listener options that enable capturing and also
  * mark the listener as passive if the browser supports it.
@@ -1708,7 +1728,9 @@ var captureEventListenerOptions = normalizePassiveListenerOptions({
 });
 /** Monitors mouse and keyboard events to determine the cause of focus events. */
 var FocusMonitor = /** @class */ (function () {
-    function FocusMonitor(_ngZone, _platform) {
+    function FocusMonitor(_ngZone, _platform, 
+    /** @breaking-change 11.0.0 make document required */
+    document, options) {
         var _this = this;
         this._ngZone = _ngZone;
         this._platform = _platform;
@@ -1733,11 +1755,14 @@ var FocusMonitor = /** @class */ (function () {
          * Event listener for `mousedown` events on the document.
          * Needs to be an arrow function in order to preserve the context when it gets bound.
          */
-        this._documentMousedownListener = function () {
+        this._documentMousedownListener = function (event) {
             // On mousedown record the origin only if there is not touch
             // target, since a mousedown can happen as a result of a touch event.
             if (!_this._lastTouchTarget) {
-                _this._setOriginForCurrentEventQueue('mouse');
+                // In some cases screen readers fire fake `mousedown` events instead of `keydown`.
+                // Resolve the focus source to `keyboard` if we detect one of them.
+                var source = isFakeMousedownFromScreenReader(event) ? 'keyboard' : 'mouse';
+                _this._setOriginForCurrentEventQueue(source);
             }
         };
         /**
@@ -1767,9 +1792,22 @@ var FocusMonitor = /** @class */ (function () {
             _this._windowFocused = true;
             _this._windowFocusTimeoutId = setTimeout(function () { return _this._windowFocused = false; });
         };
+        /**
+         * Event listener for `focus` and 'blur' events on the document.
+         * Needs to be an arrow function in order to preserve the context when it gets bound.
+         */
+        this._documentFocusAndBlurListener = function (event) {
+            var target = event.target;
+            var handler = event.type === 'focus' ? _this._onFocus : _this._onBlur;
+            // We need to walk up the ancestor chain in order to support `checkChildren`.
+            for (var el = target; el; el = el.parentElement) {
+                handler.call(_this, event, el);
+            }
+        };
+        this._document = document;
+        this._detectionMode = (options === null || options === void 0 ? void 0 : options.detectionMode) || 0 /* IMMEDIATE */;
     }
     FocusMonitor.prototype.monitor = function (element, checkChildren) {
-        var _this = this;
         if (checkChildren === void 0) { checkChildren = false; }
         // Do nothing if we're not on the browser platform.
         if (!this._platform.isBrowser) {
@@ -1784,31 +1822,17 @@ var FocusMonitor = /** @class */ (function () {
         }
         // Create monitored element info.
         var info = {
-            unlisten: function () { },
             checkChildren: checkChildren,
             subject: new Subject()
         };
         this._elementInfo.set(nativeElement, info);
         this._incrementMonitoredElementCount();
-        // Start listening. We need to listen in capture phase since focus events don't bubble.
-        var focusListener = function (event) { return _this._onFocus(event, nativeElement); };
-        var blurListener = function (event) { return _this._onBlur(event, nativeElement); };
-        this._ngZone.runOutsideAngular(function () {
-            nativeElement.addEventListener('focus', focusListener, true);
-            nativeElement.addEventListener('blur', blurListener, true);
-        });
-        // Create an unlisten function for later.
-        info.unlisten = function () {
-            nativeElement.removeEventListener('focus', focusListener, true);
-            nativeElement.removeEventListener('blur', blurListener, true);
-        };
         return info.subject.asObservable();
     };
     FocusMonitor.prototype.stopMonitoring = function (element) {
         var nativeElement = coerceElement(element);
         var elementInfo = this._elementInfo.get(nativeElement);
         if (elementInfo) {
-            elementInfo.unlisten();
             elementInfo.subject.complete();
             this._setClasses(nativeElement);
             this._elementInfo.delete(nativeElement);
@@ -1828,6 +1852,15 @@ var FocusMonitor = /** @class */ (function () {
         var _this = this;
         this._elementInfo.forEach(function (_info, element) { return _this.stopMonitoring(element); });
     };
+    /** Access injected document if available or fallback to global document reference */
+    FocusMonitor.prototype._getDocument = function () {
+        return this._document || document;
+    };
+    /** Use defaultView of injected document if available or fallback to global window reference */
+    FocusMonitor.prototype._getWindow = function () {
+        var doc = this._getDocument();
+        return doc.defaultView || window;
+    };
     FocusMonitor.prototype._toggleClass = function (element, className, shouldSet) {
         if (shouldSet) {
             element.classList.add(className);
@@ -1836,33 +1869,53 @@ var FocusMonitor = /** @class */ (function () {
             element.classList.remove(className);
         }
     };
+    FocusMonitor.prototype._getFocusOrigin = function (event) {
+        // If we couldn't detect a cause for the focus event, it's due to one of three reasons:
+        // 1) The window has just regained focus, in which case we want to restore the focused state of
+        //    the element from before the window blurred.
+        // 2) It was caused by a touch event, in which case we mark the origin as 'touch'.
+        // 3) The element was programmatically focused, in which case we should mark the origin as
+        //    'program'.
+        if (this._origin) {
+            return this._origin;
+        }
+        if (this._windowFocused && this._lastFocusOrigin) {
+            return this._lastFocusOrigin;
+        }
+        else if (this._wasCausedByTouch(event)) {
+            return 'touch';
+        }
+        else {
+            return 'program';
+        }
+    };
     /**
      * Sets the focus classes on the element based on the given focus origin.
      * @param element The element to update the classes on.
      * @param origin The focus origin.
      */
     FocusMonitor.prototype._setClasses = function (element, origin) {
-        var elementInfo = this._elementInfo.get(element);
-        if (elementInfo) {
-            this._toggleClass(element, 'cdk-focused', !!origin);
-            this._toggleClass(element, 'cdk-touch-focused', origin === 'touch');
-            this._toggleClass(element, 'cdk-keyboard-focused', origin === 'keyboard');
-            this._toggleClass(element, 'cdk-mouse-focused', origin === 'mouse');
-            this._toggleClass(element, 'cdk-program-focused', origin === 'program');
-        }
+        this._toggleClass(element, 'cdk-focused', !!origin);
+        this._toggleClass(element, 'cdk-touch-focused', origin === 'touch');
+        this._toggleClass(element, 'cdk-keyboard-focused', origin === 'keyboard');
+        this._toggleClass(element, 'cdk-mouse-focused', origin === 'mouse');
+        this._toggleClass(element, 'cdk-program-focused', origin === 'program');
     };
     /**
      * Sets the origin and schedules an async function to clear it at the end of the event queue.
+     * If the detection mode is 'eventual', the origin is never cleared.
      * @param origin The origin to set.
      */
     FocusMonitor.prototype._setOriginForCurrentEventQueue = function (origin) {
         var _this = this;
         this._ngZone.runOutsideAngular(function () {
             _this._origin = origin;
-            // Sometimes the focus origin won't be valid in Firefox because Firefox seems to focus *one*
-            // tick after the interaction event fired. To ensure the focus origin is always correct,
-            // the focus origin will be determined at the beginning of the next tick.
-            _this._originTimeoutId = setTimeout(function () { return _this._origin = null; }, 1);
+            if (_this._detectionMode === 0 /* IMMEDIATE */) {
+                // Sometimes the focus origin won't be valid in Firefox because Firefox seems to focus *one*
+                // tick after the interaction event fired. To ensure the focus origin is always correct,
+                // the focus origin will be determined at the beginning of the next tick.
+                _this._originTimeoutId = setTimeout(function () { return _this._origin = null; }, 1);
+            }
         });
     };
     /**
@@ -1908,24 +1961,7 @@ var FocusMonitor = /** @class */ (function () {
         if (!elementInfo || (!elementInfo.checkChildren && element !== event.target)) {
             return;
         }
-        // If we couldn't detect a cause for the focus event, it's due to one of three reasons:
-        // 1) The window has just regained focus, in which case we want to restore the focused state of
-        //    the element from before the window blurred.
-        // 2) It was caused by a touch event, in which case we mark the origin as 'touch'.
-        // 3) The element was programmatically focused, in which case we should mark the origin as
-        //    'program'.
-        var origin = this._origin;
-        if (!origin) {
-            if (this._windowFocused && this._lastFocusOrigin) {
-                origin = this._lastFocusOrigin;
-            }
-            else if (this._wasCausedByTouch(event)) {
-                origin = 'touch';
-            }
-            else {
-                origin = 'program';
-            }
-        }
+        var origin = this._getFocusOrigin(event);
         this._setClasses(element, origin);
         this._emitOrigin(elementInfo.subject, origin);
         this._lastFocusOrigin = origin;
@@ -1956,6 +1992,10 @@ var FocusMonitor = /** @class */ (function () {
             // Note: we listen to events in the capture phase so we
             // can detect them even if the user stops propagation.
             this._ngZone.runOutsideAngular(function () {
+                var document = _this._getDocument();
+                var window = _this._getWindow();
+                document.addEventListener('focus', _this._documentFocusAndBlurListener, captureEventListenerOptions);
+                document.addEventListener('blur', _this._documentFocusAndBlurListener, captureEventListenerOptions);
                 document.addEventListener('keydown', _this._documentKeydownListener, captureEventListenerOptions);
                 document.addEventListener('mousedown', _this._documentMousedownListener, captureEventListenerOptions);
                 document.addEventListener('touchstart', _this._documentTouchstartListener, captureEventListenerOptions);
@@ -1966,10 +2006,14 @@ var FocusMonitor = /** @class */ (function () {
     FocusMonitor.prototype._decrementMonitoredElementCount = function () {
         // Unregister global listeners when last element is unmonitored.
         if (!--this._monitoredElementCount) {
-            document.removeEventListener('keydown', this._documentKeydownListener, captureEventListenerOptions);
-            document.removeEventListener('mousedown', this._documentMousedownListener, captureEventListenerOptions);
-            document.removeEventListener('touchstart', this._documentTouchstartListener, captureEventListenerOptions);
-            window.removeEventListener('focus', this._windowFocusListener);
+            var document_1 = this._getDocument();
+            var window_1 = this._getWindow();
+            document_1.removeEventListener('focus', this._documentFocusAndBlurListener, captureEventListenerOptions);
+            document_1.removeEventListener('blur', this._documentFocusAndBlurListener, captureEventListenerOptions);
+            document_1.removeEventListener('keydown', this._documentKeydownListener, captureEventListenerOptions);
+            document_1.removeEventListener('mousedown', this._documentMousedownListener, captureEventListenerOptions);
+            document_1.removeEventListener('touchstart', this._documentTouchstartListener, captureEventListenerOptions);
+            window_1.removeEventListener('focus', this._windowFocusListener);
             // Clear timeouts for all potentially pending timeouts to prevent the leaks.
             clearTimeout(this._windowFocusTimeoutId);
             clearTimeout(this._touchTimeoutId);
@@ -1982,9 +2026,11 @@ var FocusMonitor = /** @class */ (function () {
     /** @nocollapse */
     FocusMonitor.ctorParameters = function () { return [
         { type: NgZone },
-        { type: Platform }
+        { type: Platform },
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [FOCUS_MONITOR_DEFAULT_OPTIONS,] }] }
     ]; };
-    FocusMonitor.ɵprov = ɵɵdefineInjectable({ factory: function FocusMonitor_Factory() { return new FocusMonitor(ɵɵinject(NgZone), ɵɵinject(Platform)); }, token: FocusMonitor, providedIn: "root" });
+    FocusMonitor.ɵprov = ɵɵdefineInjectable({ factory: function FocusMonitor_Factory() { return new FocusMonitor(ɵɵinject(NgZone), ɵɵinject(Platform), ɵɵinject(DOCUMENT, 8), ɵɵinject(FOCUS_MONITOR_DEFAULT_OPTIONS, 8)); }, token: FocusMonitor, providedIn: "root" });
     return FocusMonitor;
 }());
 /**
@@ -2025,24 +2071,6 @@ var CdkMonitorFocus = /** @class */ (function () {
     return CdkMonitorFocus;
 }());
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Screenreaders will often fire fake mousedown events when a focusable element
- * is activated using the keyboard. We can typically distinguish between these faked
- * mousedown events and real mousedown events using the "buttons" property. While
- * real mousedowns will indicate the mouse button that was pressed (e.g. "1" for
- * the left mouse button), faked mousedowns will usually set the property value to 0.
- */
-function isFakeMousedownFromScreenReader(event) {
-    return event.buttons === 0;
-}
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -2086,9 +2114,12 @@ var HighContrastModeDetector = /** @class */ (function () {
         this._document.body.appendChild(testElement);
         // Get the computed style for the background color, collapsing spaces to normalize between
         // browsers. Once we get this color, we no longer need the test element. Access the `window`
-        // via the document so we can fake it in tests.
-        var documentWindow = this._document.defaultView;
-        var computedColor = (documentWindow.getComputedStyle(testElement).backgroundColor || '').replace(/ /g, '');
+        // via the document so we can fake it in tests. Note that we have extra null checks, because
+        // this logic will likely run during app bootstrap and throwing can break the entire app.
+        var documentWindow = this._document.defaultView || window;
+        var computedStyle = (documentWindow && documentWindow.getComputedStyle) ?
+            documentWindow.getComputedStyle(testElement) : null;
+        var computedColor = (computedStyle && computedStyle.backgroundColor || '').replace(/ /g, '');
         this._document.body.removeChild(testElement);
         switch (computedColor) {
             case 'rgb(0,0,0)': return 2 /* WHITE_ON_BLACK */;
@@ -2164,5 +2195,5 @@ var A11yModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { A11yModule, ActiveDescendantKeyManager, AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, CdkAriaLive, CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_TRAP_INERT_STRATEGY, FocusKeyManager, FocusMonitor, FocusTrap, FocusTrapFactory, HighContrastModeDetector, InteractivityChecker, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, TOUCH_BUFFER_MS, isFakeMousedownFromScreenReader, FocusTrapManager as ɵangular_material_src_cdk_a11y_a11y_a, ConfigurableFocusTrapConfig as ɵangular_material_src_cdk_a11y_a11y_b };
+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, FocusTrap, FocusTrapFactory, HighContrastModeDetector, InteractivityChecker, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, TOUCH_BUFFER_MS, isFakeMousedownFromScreenReader, FocusTrapManager as ɵangular_material_src_cdk_a11y_a11y_a, ConfigurableFocusTrapConfig as ɵangular_material_src_cdk_a11y_a11y_b };
 //# sourceMappingURL=a11y.js.map