fix(tree-view): associate tree node content with checkbox as label

This change allows clicking the tree node content to select/deselect
the tree node.

The code initializes `this._model.textContent` had to be moved to
after view init because the DOM element's text content wasn't available
in after content init after the DOM structure changes.

VPAT-791

BREAKING CHANGE: The internal DOM structure of the tree node component
has been changed. The `.clr-treenode-content` element is no longer
rendered for selectable tree nodes; instead, the tree node content is
rendered inside the checkbox's label element.

projects/angular/clarity.api.md

@@ -4031,7 +4031,7 @@ export class ClrTree<T> implements AfterContentInit, OnDestroy {
 }
 
 // @public (undocumented)
-export class ClrTreeNode<T> implements OnInit, AfterContentInit, OnDestroy {
+export class ClrTreeNode<T> implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
     constructor(platformId: any, parent: ClrTreeNode<T>, featuresService: TreeFeaturesService<T>, expandService: IfExpandService, commonStrings: ClrCommonStringsService, focusManager: TreeFocusManagerService<T>, elementRef: ElementRef<HTMLElement>, injector: Injector);
     // (undocumented)
     get ariaSelected(): boolean;
@@ -4067,6 +4067,8 @@ export class ClrTreeNode<T> implements OnInit, AfterContentInit, OnDestroy {
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
+    ngAfterViewInit(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;

projects/angular/src/data/tree-view/tree-node.html

@@ -44,15 +44,21 @@
       (focus)="focusTreeNode()"
       tabindex="-1"
     />
-    <label for="{{nodeId}}-check" class="clr-control-label"></label>
+    <label for="{{nodeId}}-check">
+      <ng-container [ngTemplateOutlet]="treenodeContent"></ng-container>
+    </label>
   </div>
-  <div class="clr-treenode-content" (mousedown)="focusTreeNode()">
+  <div class="clr-treenode-content" (mousedown)="focusTreeNode()" *ngIf="!featuresService.selectable">
+    <ng-container [ngTemplateOutlet]="treenodeContent"></ng-container>
+  </div>
+
+  <ng-template #treenodeContent>
     <ng-content></ng-content>
     <div class="clr-sr-only" *ngIf="featuresService.selectable || ariaSelected">
       <span *ngIf="ariaSelected"> selected</span>
       <span *ngIf="!ariaSelected"> unselected</span>
     </div>
-  </div>
+  </ng-template>
 </div>
 <div
   class="clr-treenode-children"

projects/angular/src/data/tree-view/tree-node.ts

@@ -8,6 +8,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { isPlatformBrowser } from '@angular/common';
 import {
   AfterContentInit,
+  AfterViewInit,
   Component,
   ContentChildren,
   ElementRef,
@@ -62,7 +63,7 @@ const TREE_TYPE_AHEAD_TIMEOUT = 200;
     '[class.clr-tree-node]': 'true',
   },
 })
-export class ClrTreeNode<T> implements OnInit, AfterContentInit, OnDestroy {
+export class ClrTreeNode<T> implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
   STATES = ClrSelectedState;
   private skipEmitChange = false;
   isModelLoading = false;
@@ -207,10 +208,6 @@ export class ClrTreeNode<T> implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
-    if (!this._model.textContent) {
-      this._model.textContent = trimAndLowerCase(this.elementRef.nativeElement.textContent);
-    }
-
     this.subscriptions.push(
       this.typeAheadKeyEvent.pipe(debounceTime(TREE_TYPE_AHEAD_TIMEOUT)).subscribe((bufferedKeys: string) => {
         this.focusManager.focusNodeStartsWith(bufferedKeys, this._model);
@@ -220,6 +217,12 @@ export class ClrTreeNode<T> implements OnInit, AfterContentInit, OnDestroy {
     );
   }
 
+  ngAfterViewInit() {
+    if (!this._model.textContent) {
+      this._model.textContent = trimAndLowerCase(this.elementRef.nativeElement.textContent);
+    }
+  }
+
   ngOnDestroy() {
     this._model.destroy();
     this.subscriptions.forEach(sub => sub.unsubscribe());