chore: add css classes to api docs templates (#2328)

tools/dgeni/templates/class.template.html

@@ -1,5 +1,5 @@
-<h4>{$ class.name $}</h4>
-<p> {$ class.description $} </p>
+<h3 class="docs-api-h3 docs-api-class-name">{$ class.name $}</h3>
+<p class="docs-api-class-description">{$ class.description $}</p>
 
 {$ propertyList(class.properties) $}
 

tools/dgeni/templates/componentGroup.template.html

@@ -32,14 +32,14 @@
   {% include 'class.template.html' %}
 {% endmacro %}
 
-<h1>{$ doc.name $}</h1>
-<h2>
+<h1 class="docs-api-h1">{$ doc.name $}</h1>
+<h2 class="docs-api-h2">
   Module: <code>{$ doc.ngModule.name $}</code>
 </h2>
 
 
 {%- if doc.services.length -%}
-  <h2>Services</h2>
+  <h2 class="docs-api-h2">Services</h2>
   {% for service in doc.services %}
     {$ class(service) $}
   {% endfor %}

tools/dgeni/templates/method-list.template.html

@@ -1,5 +1,5 @@
 {%- if methodList.length -%}
-  <h5> Methods </h5>
+  <h4 class="docs-api-h4 docs-api-method-header">Methods</h4>
   {% for m in methodList %}
     {$ method(m) $}
   {% endfor %}

tools/dgeni/templates/method.template.html

@@ -1,40 +1,50 @@
-<table>
-  <tr>
-    <th colspan="2">{$ method.name $}</th>
-  </tr>
-  <tr>
-    <td colspan="2"> {$ method.description $}</td>
+<table class="docs-api-method-table">
+  <thead>
+    <tr class="docs-api-method-name-row">
+      <th colspan="2" class="docs-api-method-name-cell">{$ method.name $}</th>
+    </tr>
+  </thead>
+  <tr class="docs-api-method-description-row">
+    <td colspan="2" class="docs-api-method-description-cell">{$ method.description $}</td>
   </tr>
 
   {%- if method.params.length -%}
-  <tr>
-    <th colspan="2"> Parameters</th>
-  </tr>
+  <thead>
+    <tr class="docs-api-method-parameters-header-row">
+      <th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
+    </tr>
+  </thead>
   {% for parameter in method.params %}
-  <tr>
-    <td>
-      <p>
+  <tr class="docs-api-method-parameter-row">
+    <td class="docs-api-method-parameter-cell">
+      <p class="docs-api-method-parameter-name">
         {$ parameter.name $}
         {%- if parameter.isOptional -%}
-          <span>?</span>
+          <span class="docs-api-method-parameter-optional-marker">?</span>
         {%- endif -%}
       </p>
-      <p>{$ parameter.type $}</p>
+      <code class="docs-api-method-parameter-type">{$ parameter.type $}</code>
     </td>
-    <td>
-      {$ parameter.description $}
+    <td class="docs-api-method-parameter-description-cell">
+      <p class="docs-api-method-parameter-description">{$ parameter.description $}</p>
     </td>
   </tr>
   {% endfor %}
   {%- endif -%}
 
   {%- if method.showReturns -%}
+  <thead>
+    <tr class="docs-api-method-returns-header-row">
+      <th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
+    </tr>
+  </thead>
   <tr>
-    <th colspan="2"> Returns</th>
-  </tr>
-  <tr>
-    <td>{$ method.returnType $}</td>
-    <td>{$ method.returns.description $}</td>
+    <td class="docs-api-method-returns-type-cell">
+      <code class="docs-api-method-returns-type">{$ method.returnType $}</code>
+    </td>
+    <td class="docs-api-method-returns-description-cell">
+      <p class="docs-api-method-returns-description">{$ method.returns.description $}</p>
+    </td>
   </tr>
   {%- endif -%}
 </table>

tools/dgeni/templates/property-list.template.html

@@ -1,9 +1,9 @@
 {%- if propertyList.length -%}
-  <h5> Properties </h5>
-  <table>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
+  <h4 class="docs-api-h4 docs-api-method-header">Properties</h4>
+  <table class="docs-api-properties-table">
+    <tr class="docs-api-properties-header-row">
+      <th class="docs-api-properties-th">Name</th>
+      <th class="docs-api-properties-th">Description</th>
     </tr>
     {% for p in propertyList %}
       {$ property(p) $}

tools/dgeni/templates/property.template.html

@@ -1,22 +1,28 @@
-<tr>
-  <td>
+<tr class="docs-api-properties-row">
+  <td class="docs-api-properties-name-cell">
     {%- if property.isDirectiveInput -%}
-      {%- if property.directiveInputAlias -%}
-        <p>@Input({$ property.directiveInputAlias $})</p>
-      {% else %}
-        <p>@Input()</p>
-      {%- endif -%}
+      <div class="docs-api-input-marker">
+        {%- if property.directiveInputAlias -%}
+        @Input(<span class="docs-api-input-alias">{$ property.directiveInputAlias $}</span>)
+        {% else %}
+          @Input()
+        {%- endif -%}
+      </div>
     {%- endif -%}
     {%- if property.isDirectiveOutput -%}
-      {%- if property.directiveOutputAlias -%}
-        <p>@Output({$ property.directiveOutputAlias $})</p>
-      {% else %}
-        <p>@Output()</p>
-      {%- endif -%}
+      <div class="docs-api-output-marker">
+        {%- if property.directiveOutputAlias -%}
+        @Output(<span class="docs-api-output-alias">{$ property.directiveOutputAlias $}</span>)
+        {% else %}
+          @Output()
+        {%- endif -%}
+      </div>
     {%- endif -%}
 
-    <p>{$ property.name $}</p>
-    <p><code>{$ property.type $}</code></p>
+    <p class="docs-api-property-name">
+      {$ property.name $}
+    </p>
+    <code class="docs-api-property-type">{$ property.type $}</code>
   </td>
-  <td> {$ property.description $}</td>
+  <td class="docs-api-property-description">{$ property.description $}</td>
 </tr>