chore(docs): show extends clauses for classes

Classes like `MatAnchor` in the button docs should indicate that those are extending the `MatButton` class. Clauses without any related Dgeni doc can be ignored, because no information for this is available (right now; e.g. `MatSlideToggleBase` with mixins)

Author: devversion

tools/dgeni/processors/categorizer.ts

@@ -19,6 +19,7 @@ import {
   isProperty,
   isService
 } from '../common/decorators';
+import {ClassLikeExportDoc} from 'dgeni-packages/typescript/api-doc-types/ClassLikeExportDoc';
 import {MethodMemberDoc} from 'dgeni-packages/typescript/api-doc-types/MethodMemberDoc';
 import {sortCategorizedMembers} from '../common/sort-members';
 
@@ -31,6 +32,7 @@ export interface CategorizedClassDoc extends ClassExportDoc {
   isDeprecated: boolean;
   directiveExportAs?: string | null;
   directiveSelectors?: string[];
+  extendedDocs: ClassLikeExportDoc[];
 }
 
 export interface CategorizedPropertyMemberDoc extends PropertyMemberDoc {
@@ -88,6 +90,12 @@ export class Categorizer implements Processor {
     classDoc.methods.sort(sortCategorizedMembers);
     classDoc.properties.sort(sortCategorizedMembers);
 
+    // Filter the extends clauses for clauses with an associated Dgeni document. Clauses without
+    // a document are unknown and should not be mentioned in the documentation for this class.
+    classDoc.extendedDocs = classDoc.extendsClauses
+      .filter(clause => clause.doc)
+      .map(clause => clause.doc!);
+
     // Categorize the current visited classDoc into its Angular type.
     if (isDirective(classDoc)) {
       classDoc.isDirective = true;

tools/dgeni/templates/class.template.html

@@ -6,6 +6,15 @@ <h4 class="docs-api-h4 docs-api-class-name">
 <p class="docs-api-class-description">{$ class.description | safe $}</p>
 {%- endif -%}
 
+{% if class.extendedDocs.length %}
+<p class="docs-api-class-extends-clauses">
+  <span class="docs-api-class-extends-label">Extends:</span>
+  {% for extendedDoc in class.extendedDocs %}
+    <span class="docs-api-class-extends-type">{$ extendedDoc.name $}</span>
+  {% endfor %}
+</p>
+{% endif %}
+
 {%- if class.directiveSelectors -%}
 <p class="docs-api-directive-selectors">
   <span class="docs-api-class-selector-label">Selector:</span>