feat(cdk): switch injectables to new scope API

Author: jelbourn

package-lock.json

@@ -9,27 +9,12 @@
 import {PlatformModule} from '@angular/cdk/platform';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {ARIA_DESCRIBER_PROVIDER, AriaDescriber} from './aria-describer/aria-describer';
-import {CdkMonitorFocus, FOCUS_MONITOR_PROVIDER} from './focus-monitor/focus-monitor';
-import {
-  CdkTrapFocus,
-  FocusTrapDeprecatedDirective,
-  FocusTrapFactory,
-} from './focus-trap/focus-trap';
-import {InteractivityChecker} from './interactivity-checker/interactivity-checker';
-import {LIVE_ANNOUNCER_PROVIDER} from './live-announcer/live-announcer';
+import {CdkMonitorFocus} from './focus-monitor/focus-monitor';
+import {CdkTrapFocus, FocusTrapDeprecatedDirective} from './focus-trap/focus-trap';
 
 @NgModule({
   imports: [CommonModule, PlatformModule],
   declarations: [CdkTrapFocus, FocusTrapDeprecatedDirective, CdkMonitorFocus],
   exports: [CdkTrapFocus, FocusTrapDeprecatedDirective, CdkMonitorFocus],
-  providers: [
-    InteractivityChecker,
-    FocusTrapFactory,
-    AriaDescriber,
-    LIVE_ANNOUNCER_PROVIDER,
-    ARIA_DESCRIBER_PROVIDER,
-    FOCUS_MONITOR_PROVIDER,
-  ]
 })
 export class A11yModule {}

src/cdk/a11y/a11y-module.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Inject, InjectionToken, Optional, SkipSelf} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
+import {APP_ROOT_SCOPE, Inject, Injectable} from '@angular/core';
 import {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from './aria-reference';
 
+
 /**
  * Interface used to register message elements and keep a count of how many registrations have
  * the same message and the reference to the message element used for the `aria-describedby`.
@@ -46,7 +47,7 @@ let messagesContainer: HTMLElement | null = null;
  * content.
  * @docs-private
  */
-@Injectable()
+@Injectable({scope: APP_ROOT_SCOPE})
 export class AriaDescriber {
   private _document: Document;
 
@@ -203,19 +204,3 @@ export class AriaDescriber {
   }
 
 }
-
-/** @docs-private */
-export function ARIA_DESCRIBER_PROVIDER_FACTORY(parentDispatcher: AriaDescriber, _document: any) {
-  return parentDispatcher || new AriaDescriber(_document);
-}
-
-/** @docs-private */
-export const ARIA_DESCRIBER_PROVIDER = {
-  // If there is already an AriaDescriber available, use that. Otherwise, provide a new one.
-  provide: AriaDescriber,
-  deps: [
-    [new Optional(), new SkipSelf(), AriaDescriber],
-    DOCUMENT as InjectionToken<any>
-  ],
-  useFactory: ARIA_DESCRIBER_PROVIDER_FACTORY
-};

src/cdk/a11y/aria-describer/aria-describer.ts

@@ -5,18 +5,18 @@
  * 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
  */
+
 import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
 import {
+  APP_ROOT_SCOPE,
   Directive,
   ElementRef,
   EventEmitter,
   Injectable,
   NgZone,
   OnDestroy,
-  Optional,
   Output,
   Renderer2,
-  SkipSelf,
 } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {of as observableOf} from 'rxjs/observable/of';
@@ -40,7 +40,7 @@ type MonitoredElementInfo = {
 
 
 /** Monitors mouse and keyboard events to determine the cause of focus events. */
-@Injectable()
+@Injectable({scope: APP_ROOT_SCOPE})
 export class FocusMonitor implements OnDestroy {
   /** The focus origin that the next focus event is a result of. */
   private _origin: FocusOrigin = null;
@@ -397,17 +397,3 @@ export class CdkMonitorFocus implements OnDestroy {
     this._monitorSubscription.unsubscribe();
   }
 }
-
-/** @docs-private */
-export function FOCUS_MONITOR_PROVIDER_FACTORY(
-    parentDispatcher: FocusMonitor, ngZone: NgZone, platform: Platform) {
-  return parentDispatcher || new FocusMonitor(ngZone, platform);
-}
-
-/** @docs-private */
-export const FOCUS_MONITOR_PROVIDER = {
-  // If there is already a FocusMonitor available, use that. Otherwise, provide a new one.
-  provide: FocusMonitor,
-  deps: [[new Optional(), new SkipSelf(), FocusMonitor], NgZone, Platform],
-  useFactory: FOCUS_MONITOR_PROVIDER_FACTORY
-};

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -6,20 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {DOCUMENT} from '@angular/common';
 import {
+  AfterContentInit,
+  APP_ROOT_SCOPE,
   Directive,
   ElementRef,
+  Inject,
+  Injectable,
   Input,
   NgZone,
   OnDestroy,
-  AfterContentInit,
-  Injectable,
-  Inject,
 } from '@angular/core';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {take} from 'rxjs/operators/take';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
-import {DOCUMENT} from '@angular/common';
 
 
 /**
@@ -278,7 +279,7 @@ export class FocusTrap {
 
 
 /** Factory that allows easy instantiation of focus traps. */
-@Injectable()
+@Injectable({scope: APP_ROOT_SCOPE})
 export class FocusTrapFactory {
   private _document: Document;
 

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
+import {APP_ROOT_SCOPE, Injectable} from '@angular/core';
 
 
 // The InteractivityChecker leans heavily on the ally.js accessibility utilities.
@@ -18,7 +18,7 @@ import {Platform} from '@angular/cdk/platform';
  * Utility for checking the interactivity of an element, such as whether is is focusable or
  * tabbable.
  */
-@Injectable()
+@Injectable({scope: APP_ROOT_SCOPE})
 export class InteractivityChecker {
 
   constructor(private _platform: Platform) {}

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+
+import {APP_ROOT_SCOPE, InjectionToken} from '@angular/core';
+
+// The token for the live announcer element is defined in a separate file from LiveAnnouncer
+// as a workaround for https://github.com/angular/angular/issues/22559
+
+export const LIVE_ANNOUNCER_ELEMENT_TOKEN =
+    new InjectionToken<HTMLElement | null>('liveAnnouncerElement', {
+      scope: APP_ROOT_SCOPE,
+      factory: () => null,
+    });

src/cdk/a11y/live-announcer/live-announcer-token.ts

@@ -1,8 +1,9 @@
-import {inject, fakeAsync, tick, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
+import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {LiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer';
 import {A11yModule} from '../index';
+import {LiveAnnouncer} from './live-announcer';
+import {LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer-token';
 
 
 describe('LiveAnnouncer', () => {

src/cdk/a11y/live-announcer/live-announcer.spec.ts

@@ -6,25 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Injectable,
-  InjectionToken,
-  Optional,
-  Inject,
-  SkipSelf,
-  OnDestroy,
-} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
+import {APP_ROOT_SCOPE, Inject, Injectable, OnDestroy, Optional} from '@angular/core';
+import {LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer-token';
 
 
-export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
-
 /** Possible politeness levels. */
 export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
 
-@Injectable()
+@Injectable({scope: APP_ROOT_SCOPE})
 export class LiveAnnouncer implements OnDestroy {
-  private _liveElement: Element;
+  private readonly _liveElement: Element;
 
   constructor(
       @Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
@@ -80,21 +72,3 @@ export class LiveAnnouncer implements OnDestroy {
   }
 
 }
-
-/** @docs-private */
-export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
-    parentDispatcher: LiveAnnouncer, liveElement: any, _document: any) {
-  return parentDispatcher || new LiveAnnouncer(liveElement, _document);
-}
-
-/** @docs-private */
-export const LIVE_ANNOUNCER_PROVIDER = {
-  // If there is already a LiveAnnouncer available, use that. Otherwise, provide a new one.
-  provide: LiveAnnouncer,
-  deps: [
-    [new Optional(), new SkipSelf(), LiveAnnouncer],
-    [new Optional(), new Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN)],
-    DOCUMENT,
-  ],
-  useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
-};

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -15,6 +15,7 @@ export * from './key-manager/list-key-manager';
 export * from './focus-trap/focus-trap';
 export * from './interactivity-checker/interactivity-checker';
 export * from './live-announcer/live-announcer';
+export * from './live-announcer/live-announcer-token';
 export * from './focus-monitor/focus-monitor';
 export * from './fake-mousedown';
 export * from './a11y-module';

src/cdk/a11y/public-api.ts

@@ -7,13 +7,12 @@
  */
 
 import {NgModule} from '@angular/core';
-import {UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/cdk/collections';
 import {CdkAccordion} from './accordion';
 import {CdkAccordionItem} from './accordion-item';
 
+
 @NgModule({
   exports: [CdkAccordion, CdkAccordionItem],
   declarations: [CdkAccordion, CdkAccordionItem],
-  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER],
 })
 export class CdkAccordionModule {}

src/cdk/accordion/accordion-module.ts

@@ -1,5 +1,7 @@
 package(default_visibility=["//visibility:public"])
 load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
+
 
 ng_module(
   name = "bidi",
@@ -8,3 +10,30 @@ ng_module(
   deps = ["@rxjs"],
   tsconfig = ":tsconfig-build.json",
 )
+
+ts_library(
+  name = "bidi_test_sources",
+  testonly = 1,
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    ":bidi",
+    "@rxjs",
+  ],
+  tsconfig = ":tsconfig-build.json",
+)
+
+ts_web_test(
+  name = "unit_tests",
+  bootstrap = [
+    "//:web_test_bootstrap_scripts",
+  ],
+
+  # Do not sort
+  deps = [
+    "//:tslib_bundle",
+    "//:angular_bundles",
+    "//:angular_test_bundles",
+    "//test:angular_test_init",
+    ":bidi_test_sources",
+  ],
+)

src/cdk/bidi/BUILD.bazel

@@ -7,17 +7,11 @@
  */
 
 import {NgModule} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
 import {Dir} from './dir';
-import {DIR_DOCUMENT, Directionality} from './directionality';
 
 
 @NgModule({
   exports: [Dir],
   declarations: [Dir],
-  providers: [
-    {provide: DIR_DOCUMENT, useExisting: DOCUMENT},
-    Directionality,
-  ]
 })
 export class BidiModule { }

src/cdk/bidi/bidi-module.ts

@@ -0,0 +1,31 @@
+/**
+ * @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
+ */
+
+import {DOCUMENT} from '@angular/common';
+import {APP_ROOT_SCOPE, inject, InjectionToken} from '@angular/core';
+
+
+/**
+ * Injection token used to inject the document into Directionality.
+ * This is used so that the value can be faked in tests.
+ *
+ * We can't use the real document in tests because changing the real `dir` causes geometry-based
+ * tests in Safari to fail.
+ *
+ * We also can't re-provide the DOCUMENT token from platform-brower because the unit tests
+ * themselves use things like `querySelector` in test code.
+ *
+ * This token is defined in a separate file from Directionality as a workaround for
+ * https://github.com/angular/angular/issues/22559
+ *
+ * @docs-private
+ */
+export const DIR_DOCUMENT = new InjectionToken<Document>('cdk-dir-doc', {
+  scope: APP_ROOT_SCOPE,
+  factory: () => inject(DOCUMENT),
+});