From 1665bda6ccddbad60244d2ddd10cd3d30b94a0a7 Mon Sep 17 00:00:00 2001
From: twerske <pokepsi@gmail.com>
Date: Wed, 21 Apr 2021 09:21:16 -0700
Subject: [PATCH] fix(devtools): links to docs in property view tab

---
 .../property-view-body/property-view-body.component.html   | 5 +++++
 .../property-view-body/property-view-body.component.scss   | 7 +++++++
 .../property-view-body/property-view-body.component.ts     | 5 ++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.html b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.html
index c2a626e1adc..e52096a092b 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.html
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.html
@@ -4,6 +4,11 @@
       <mat-expansion-panel-header collapsedHeight="25px" expandedHeight="25px">
         <mat-panel-title>
           {{ panels[index].title }}
+          <a href="{{ panels[index].documentation }}" target="_blank">
+            <mat-icon class="docs-link">
+              link
+            </mat-icon>
+          </a>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-property-view-tree
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.scss b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.scss
index 71141d76bfd..b8b70160439 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.scss
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.scss
@@ -14,6 +14,13 @@
 
     .mat-expansion-panel-header {
       padding: 0 15px;
+
+      .docs-link {
+        height: inherit;
+        width: fit-content;
+        font-size: initial;
+        padding-left: 0.1rem;
+      }
     }
 
     .mat-expansion-panel-header-title {
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.ts
index d1265bec2a2..0363916beeb 100644
--- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.ts
+++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.ts
@@ -22,22 +22,25 @@ export class PropertyViewBodyComponent {
 
   categoryOrder = [0, 1, 2];
 
-  get panels(): { title: string; hidden: boolean; controls: DirectiveTreeData }[] {
+  get panels(): { title: string; hidden: boolean; controls: DirectiveTreeData; documentation: string }[] {
     return [
       {
         title: '@Inputs',
         hidden: this.directiveInputControls.dataSource.data.length === 0,
         controls: this.directiveInputControls,
+        documentation: 'https://angular.io/api/core/Input',
       },
       {
         title: '@Outputs',
         hidden: this.directiveOutputControls.dataSource.data.length === 0,
         controls: this.directiveOutputControls,
+        documentation: 'https://angular.io/api/core/Output',
       },
       {
         title: 'Properties',
         hidden: this.directiveStateControls.dataSource.data.length === 0,
         controls: this.directiveStateControls,
+        documentation: 'https://angular.io/guide/property-binding',
       },
     ];
   }