build(aio): group API members by type in overview (angular#22438)

Now the overview groups the members in the following order:

* static properties
* static methods
* constructor
* instance properties
* instance members

Closes angular#22132

PR Close angular#22438

Author: petebacondarwin

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -9,12 +9,7 @@ <h2>Overview</h2>
 </div>
 {% endif %}
 <code-example language="ts" hideCopy="true">
-{$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
-{%- if doc.constructorDoc %}{% if not doc.constructorDoc.internal %}
-  <a class="code-anchor" href="#{$ doc.constructorDoc.anchor | urlencode $}">{$ memberHelper.renderMemberSyntax(doc.constructorDoc, 1) $}</a>{% endif %}{% endif -%}
-{%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
-  <a class="code-anchor" href="#{$ member.anchor | urlencode $}">{$ memberHelper.renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor %}{% endif -%}
-{$ memberHelper.renderMembers(doc) $}
+{$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
 </code-example>
 <div class="inline-sidebar">

aio/tools/transforms/templates/api/includes/interface-overview.html

@@ -8,8 +8,7 @@ <h2>Interface Overview</h2>
   {% include "includes/see-also.html" %}
 </div>
 <code-example language="ts" hideCopy="true">
-interface {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} { {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
-  <a class="code-anchor" href="#{$ member.anchor | urlencode $}">{$ memberHelper.renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+interface {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
 </code-example>
 </section>

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

@@ -10,10 +10,20 @@
 {%- endmacro -%}
 
 {%- macro renderMembers(doc) -%}
-{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
-  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
-{%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
-  // inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a>{$ renderMembers(ancestor.doc) $}{% endif %}{% endfor %}
+  {%- for member in doc.staticProperties %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% for member in doc.staticMethods %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% if doc.constructorDoc and not doc.constructorDoc.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ doc.constructorDoc.anchor | urlencode $}">{$ renderMemberSyntax(doc.constructorDoc, 1) $}</a>{% endif -%}
+  {% for member in doc.properties %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  {% for member in doc.methods %}{% if not member.internal %}
+  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+
+  {%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+
+  // inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a>{$ renderMembers(ancestor.doc) $}{% endif %}{% endfor -%}
 {%- endmacro -%}
 
 {%- macro renderMemberSyntax(member, truncateLines) -%}