@angular/cdk 9.2.0 → 9.2.4

package/bundles/cdk-a11y.umd.js

@@ -11,8 +11,8 @@
      * 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
      */
-    /** IDs are deliminated by an empty space, as per the spec. */
-    var ID_DELIMINATOR = ' ';
+    /** IDs are delimited by an empty space, as per the spec. */
+    var ID_DELIMITER = ' ';
     /**
      * Adds the given ID to the specified ARIA attribute on an element.
      * Used for attributes such as aria-labelledby, aria-owns, etc.
@@ -23,7 +23,7 @@
             return;
         }
         ids.push(id.trim());
-        el.setAttribute(attr, ids.join(ID_DELIMINATOR));
+        el.setAttribute(attr, ids.join(ID_DELIMITER));
     }
     /**
      * Removes the given ID from the specified ARIA attribute on an element.
@@ -33,7 +33,7 @@
         var ids = getAriaReferenceIds(el, attr);
         var filteredIds = ids.filter(function (val) { return val != id.trim(); });
         if (filteredIds.length) {
-            el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
+            el.setAttribute(attr, filteredIds.join(ID_DELIMITER));
         }
         else {
             el.removeAttribute(attr);
@@ -44,7 +44,7 @@
      * Used for attributes such as aria-labelledby, aria-owns, etc.
      */
     function getAriaReferenceIds(el, attr) {
-        // Get string array of all individual ids (whitespace deliminated) in the attribute value
+        // Get string array of all individual ids (whitespace delimited) in the attribute value
         return (el.getAttribute(attr) || '').match(/\S+/g) || [];
     }
 
@@ -1881,6 +1881,24 @@
         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.
@@ -1917,6 +1935,13 @@
             this._elementInfo = new Map();
             /** The number of elements currently being monitored. */
             this._monitoredElementCount = 0;
+            /**
+             * Keeps track of the root nodes to which we've currently bound a focus/blur handler,
+             * as well as the number of monitored elements that they contain. We have to treat focus/blur
+             * handlers differently from the rest of the events, because the browser won't emit events
+             * to the document when focus moves inside of a shadow root.
+             */
+            this._rootNodeFocusListenerCount = new Map();
             /**
              * Event listener for `keydown` events on the document.
              * Needs to be an arrow function in order to preserve the context when it gets bound.
@@ -1930,11 +1955,14 @@
              * 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);
                 }
             };
             /**
@@ -1948,10 +1976,7 @@
                 if (_this._touchTimeoutId != null) {
                     clearTimeout(_this._touchTimeoutId);
                 }
-                // Since this listener is bound on the `document` level, any events coming from the shadow DOM
-                // will have their `target` set to the shadow root. If available, use `composedPath` to
-                // figure out the event target.
-                _this._lastTouchTarget = event.composedPath ? event.composedPath()[0] : event.target;
+                _this._lastTouchTarget = getTarget(event);
                 _this._touchTimeoutId = setTimeout(function () { return _this._lastTouchTarget = null; }, TOUCH_BUFFER_MS);
             };
             /**
@@ -1964,54 +1989,61 @@
                 _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._rootNodeFocusAndBlurListener = function (event) {
+                var target = getTarget(event);
+                var handler = event.type === 'focus' ? _this._onFocus : _this._onBlur;
+                // We need to walk up the ancestor chain in order to support `checkChildren`.
+                for (var element = target; element; element = element.parentElement) {
+                    handler.call(_this, event, element);
+                }
+            };
             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) {
                 return rxjs.of(null);
             }
             var nativeElement = coercion.coerceElement(element);
+            // If the element is inside the shadow DOM, we need to bind our focus/blur listeners to
+            // the shadow root, rather than the `document`, because the browser won't emit focus events
+            // to the `document`, if focus is moving within the same shadow root.
+            var rootNode = i1._getShadowRoot(nativeElement) || this._getDocument();
+            var cachedInfo = this._elementInfo.get(nativeElement);
             // Check if we're already monitoring this element.
-            if (this._elementInfo.has(nativeElement)) {
-                var cachedInfo = this._elementInfo.get(nativeElement);
-                cachedInfo.checkChildren = checkChildren;
+            if (cachedInfo) {
+                if (checkChildren) {
+                    // TODO(COMP-318): this can be problematic, because it'll turn all non-checkChildren
+                    // observers into ones that behave as if `checkChildren` was turned on. We need a more
+                    // robust solution.
+                    cachedInfo.checkChildren = true;
+                }
                 return cachedInfo.subject.asObservable();
             }
             // Create monitored element info.
             var info = {
-                unlisten: function () { },
                 checkChildren: checkChildren,
-                subject: new rxjs.Subject()
+                subject: new rxjs.Subject(),
+                rootNode: rootNode
             };
             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);
-            };
+            this._registerGlobalListeners(info);
             return info.subject.asObservable();
         };
         FocusMonitor.prototype.stopMonitoring = function (element) {
             var nativeElement = coercion.coerceElement(element);
             var elementInfo = this._elementInfo.get(nativeElement);
             if (elementInfo) {
-                elementInfo.unlisten();
                 elementInfo.subject.complete();
                 this._setClasses(nativeElement);
                 this._elementInfo.delete(nativeElement);
-                this._decrementMonitoredElementCount();
+                this._removeGlobalListeners(elementInfo);
             }
         };
         FocusMonitor.prototype.focusVia = function (element, origin, options) {
@@ -2044,20 +2076,37 @@
                 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.
@@ -2099,7 +2148,7 @@
             // for the first focus event after the touchstart, and then the first blur event after that
             // focus event. When that blur event fires we know that whatever follows is not a result of the
             // touchstart.
-            var focusTarget = event.target;
+            var focusTarget = getTarget(event);
             return this._lastTouchTarget instanceof Node && focusTarget instanceof Node &&
                 (focusTarget === this._lastTouchTarget || focusTarget.contains(this._lastTouchTarget));
         };
@@ -2116,27 +2165,10 @@
             // If we are not counting child-element-focus as focused, make sure that the event target is the
             // monitored element itself.
             var elementInfo = this._elementInfo.get(element);
-            if (!elementInfo || (!elementInfo.checkChildren && element !== event.target)) {
+            if (!elementInfo || (!elementInfo.checkChildren && element !== getTarget(event))) {
                 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;
@@ -2160,10 +2192,22 @@
         FocusMonitor.prototype._emitOrigin = function (subject, origin) {
             this._ngZone.run(function () { return subject.next(origin); });
         };
-        FocusMonitor.prototype._incrementMonitoredElementCount = function () {
+        FocusMonitor.prototype._registerGlobalListeners = function (elementInfo) {
             var _this = this;
+            if (!this._platform.isBrowser) {
+                return;
+            }
+            var rootNode = elementInfo.rootNode;
+            var rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode) || 0;
+            if (!rootNodeFocusListeners) {
+                this._ngZone.runOutsideAngular(function () {
+                    rootNode.addEventListener('focus', _this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                    rootNode.addEventListener('blur', _this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                });
+            }
+            this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners + 1);
             // Register global listeners when first element is monitored.
-            if (++this._monitoredElementCount == 1 && this._platform.isBrowser) {
+            if (++this._monitoredElementCount === 1) {
                 // Note: we listen to events in the capture phase so we
                 // can detect them even if the user stops propagation.
                 this._ngZone.runOutsideAngular(function () {
@@ -2176,7 +2220,19 @@
                 });
             }
         };
-        FocusMonitor.prototype._decrementMonitoredElementCount = function () {
+        FocusMonitor.prototype._removeGlobalListeners = function (elementInfo) {
+            var rootNode = elementInfo.rootNode;
+            if (this._rootNodeFocusListenerCount.has(rootNode)) {
+                var rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode);
+                if (rootNodeFocusListeners > 1) {
+                    this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners - 1);
+                }
+                else {
+                    rootNode.removeEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                    rootNode.removeEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                    this._rootNodeFocusListenerCount.delete(rootNode);
+                }
+            }
             // Unregister global listeners when last element is unmonitored.
             if (!--this._monitoredElementCount) {
                 var document_1 = this._getDocument();
@@ -2204,6 +2260,12 @@
         FocusMonitor.ɵprov = i0.ɵɵdefineInjectable({ factory: function FocusMonitor_Factory() { return new FocusMonitor(i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i1.Platform), i0.ɵɵinject(i2.DOCUMENT, 8), i0.ɵɵinject(FOCUS_MONITOR_DEFAULT_OPTIONS, 8)); }, token: FocusMonitor, providedIn: "root" });
         return FocusMonitor;
     }());
+    /** Gets the target of an event, accounting for Shadow DOM. */
+    function getTarget(event) {
+        // If an event is bound outside the Shadow DOM, the `event.target` will
+        // point to the shadow root so we have to use `composedPath` instead.
+        return (event.composedPath ? event.composedPath()[0] : event.target);
+    }
     /**
      * Directive that determines how a particular element was focused (via keyboard, mouse, touch, or
      * programmatically) and adds corresponding classes to the element.
@@ -2242,24 +2304,6 @@
         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.
@@ -2274,7 +2318,7 @@
     /** CSS class applied to the document body when in high-contrast mode. */
     var HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = 'cdk-high-contrast-active';
     /**
-     * Service to determine whether the browser is currently in a high-constrast-mode environment.
+     * Service to determine whether the browser is currently in a high-contrast-mode environment.
      *
      * Microsoft Windows supports an accessibility feature called "High Contrast Mode". This mode
      * changes the appearance of all applications, including web applications, to dramatically increase
@@ -2289,7 +2333,7 @@
             this._platform = _platform;
             this._document = document;
         }
-        /** Gets the current high-constrast-mode for the page. */
+        /** Gets the current high-contrast-mode for the page. */
         HighContrastModeDetector.prototype.getHighContrastMode = function () {
             if (!this._platform.isBrowser) {
                 return 0 /* NONE */;
@@ -2303,9 +2347,12 @@
             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 */;