feat(FocusOriginMonitor): support monitoring subtree focus as well as…

… element (#3113)

* focus origin monitor improvements

* addressed comment + tests

* addressed comments and replaced Observable w/ EventEmitter

* simplify fat arrow

* rename the files now that the directive name has changed

src/demo-app/style/style-demo.html

@@ -1,4 +1,4 @@
-<button #b class="demo-button" cdkFocusClasses>focus me!</button>
+<button #b class="demo-focusable" cdkMonitorElementFocus>focus me!</button>
 <button (click)="b.focus()">focus programmatically</button>
 
 <button (click)="fom.focusVia(b, renderer, 'mouse')">focusVia: mouse</button>
@@ -7,3 +7,15 @@
 <button (click)="fom.focusVia(b, renderer, 'program')">focusVia: program</button>
 
 <div>Active classes: {{b.classList}}</div>
+
+<br>
+
+<div class="demo-focusable" tabindex="0" cdkMonitorElementFocus>
+  <p>div with element focus monitored</p>
+  <button>1</button><button>2</button>
+</div>
+
+<div class="demo-focusable" tabindex="0" cdkMonitorSubtreeFocus>
+  <p>div with subtree focus monitored</p>
+  <button>1</button><button>2</button>
+</div>

src/demo-app/style/style-demo.scss

@@ -1,19 +1,19 @@
-.demo-button.cdk-focused {
+.demo-focusable.cdk-focused {
   border: 2px solid red;
 }
 
-.demo-button.cdk-mouse-focused {
+.demo-focusable.cdk-mouse-focused {
   background: green;
 }
 
-.demo-button.cdk-keyboard-focused {
+.demo-focusable.cdk-keyboard-focused {
   background: yellow;
 }
 
-.demo-button.cdk-program-focused {
+.demo-focusable.cdk-program-focused {
   background: blue;
 }
 
-.demo-button.cdk-touch-focused {
+.demo-focusable.cdk-touch-focused {
   background: purple;
 }