chore(docs): show extends clauses for classes (#8078)

* 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)

* Address feedback

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[];
+  extendedDoc: ClassLikeExportDoc | null;
 }
 
 export interface CategorizedPropertyMemberDoc extends PropertyMemberDoc {
@@ -88,6 +90,11 @@ export class Categorizer implements Processor {
     classDoc.methods.sort(sortCategorizedMembers);
     classDoc.properties.sort(sortCategorizedMembers);
 
+    // Classes can only extend a single class. This means that there can't be multiple extend
+    // clauses for the Dgeni document. To make the template syntax simpler and more readable,
+    // store the extended class in a variable.
+    classDoc.extendedDoc = classDoc.extendsClauses[0] ? classDoc.extendsClauses[0].doc! : null;
+
     // Categorize the current visited classDoc into its Angular type.
     if (isDirective(classDoc)) {
       classDoc.isDirective = true;

tools/dgeni/templates/class.template.html

@@ -1,6 +1,12 @@
 <h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-name">
   <span header-link="{$ class.name $}"></span>
   <code>{$ class.name $}</code>
+  {% if class.extendedDoc %}
+  <span class="docs-api-class-extends-clauses">
+    <span class="docs-api-class-extends-label">extends</span>
+    <span class="docs-api-class-extends-type">{$ class.extendedDoc.name $}</span>
+  </span>
+  {% endif %}
 </h4>
 
 {%- if class.description -%}