build(aio): render class/interface "descendants" in API docs (#19343)

For classes, the tree of subclasses is rendered, recursively.

For interfaces, the descendants are separated into child interfaces, which
extend the interface, and classes, which implement the interface.

Closes #19306

aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.js

@@ -0,0 +1,9 @@
+module.exports = function filterBy() {
+  return {
+    name: 'filterByPropertyValue',
+    process: function(list, property, value) {
+      if (!list) return list;
+      return list.filter(item => item[property] === value);
+    }
+  };
+};

aio/tools/transforms/angular-base-package/rendering/filterByPropertyValue.spec.js

@@ -0,0 +1,14 @@
+const factory = require('./filterByPropertyValue');
+
+describe('filterByPropertyValue filter', () => {
+  let filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "filterByPropertyValue"', function() { expect(filter.name).toEqual('filterByPropertyValue'); });
+
+  it('should filter out items that do not match the given property value', function() {
+    expect(filter.process([{ a: 1 }, { a: 2 }, { b: 1 }, { a: 1, b: 2 }, { a: null }, { a: undefined }], 'a', 1))
+        .toEqual([{ a: 1 }, { a: 1, b: 2 }]);
+  });
+});

aio/tools/transforms/templates/api/class.template.html

@@ -1,4 +1,5 @@
 {% import "lib/memberHelpers.html" as memberHelpers -%}
+{% import "lib/descendants.html" as descendants -%}
 {% import "lib/paramList.html" as params -%}
 {% extends 'export-base.template.html' -%}
 
@@ -6,6 +7,7 @@
 {% block details %}
 {% block additional %}{% endblock %}
 {% include "includes/description.html" %}
+{$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
 {$ memberHelpers.renderMemberDetails(doc.statics, 'static-members', 'static-member', 'Static Members') $}
 {% if doc.constructorDoc %}{$ memberHelpers.renderMemberDetails([doc.constructorDoc], 'constructors', 'constructor', 'Constructor') $}{% endif %}
 {$ memberHelpers.renderMemberDetails(doc.members, 'instance-members', 'instance-member', 'Members') $}

aio/tools/transforms/templates/api/interface.template.html

@@ -1,9 +1,12 @@
 {% import "lib/paramList.html" as params -%}
 {% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
 {% extends 'export-base.template.html' -%}
 
 {% block overview %}{% include "includes/interface-overview.html" %}{% endblock %}
 {% block details %}
   {% include "includes/description.html" %}
+  {$ descendants.renderDescendants(doc, 'interface', 'Child Interfaces') $}
+  {$ descendants.renderDescendants(doc, 'class', 'Class Implementations') $}
   {$ memberHelper.renderMemberDetails(doc.members, 'instance-members', 'instance-member', 'Members') $}
 {% endblock %}

aio/tools/transforms/templates/api/lib/descendants.html

@@ -0,0 +1,14 @@
+{% macro renderDescendants(doc, docType, title='', recursed=false) %}
+  {% set descendants = doc.descendants | filterByPropertyValue('docType', docType) %}
+  {% if descendants.length %}
+  {% if title %}<h2>{$ title $}</h2>{% endif %}
+  <ul {% if not recursed %}class="descendants {$ docType $}"{% endif %}>
+  {% for descendant in descendants %}
+    <li>
+      <pre class="prettyprint lang-ts"><code>{$ descendant.name $}</code></pre>
+      {$ renderDescendants(descendant, docType, '', true) $}
+    </li>
+  {% endfor %}
+  </ul>
+  {% endif %}
+{% endmacro %}