build(docs-infra): move directive macros into memberHelpers.html (#25768)

PR Close #25768

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

@@ -1,37 +1,13 @@
 {% import "lib/memberHelpers.html" as memberHelpers -%}
 {% extends 'class.template.html' -%}
 
-{% macro renderAncestorMembers(doc, collectionName) %}
-{%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
-{% set nonInternalMembers = ancestor.doc[collectionName] | filterByPropertyValue('internal', undefined) %}
-{% if nonInternalMembers.length -%}
-<section class="inherited-members-list">
-  <h3>Inherited from <code>{$ ancestor.doc.id $}</code></h3>
-  <ul>
-  {% for member in nonInternalMembers %}
-    <li>
-      <code><a class="code-anchor" href="{$ ancestor.doc.path $}#{$ member.anchor | urlencode $}">{$ memberHelpers.renderMemberSyntax(member, 1) $}</a></code>
-    </li>
-  {% endfor %}
-  </ul>
-</section>
-{% endif %}
-{$ renderAncestorMembers(ancestor.doc, collectionName) $}
-{% endif %}{% endfor -%}
-{% endmacro %}
-
-{% macro renderProperties(doc, heading) %}
-{$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', heading) $}
-{$ renderAncestorMembers(doc, 'properties') $}
-{% endmacro %}
-
 {% block overview %}{% endblock %}
 
 {% block details -%}
   {% include "includes/ngmodule.html" %}
   {% include "includes/selectors.html" %}
 
-  {$ renderProperties(doc, 'Properties') $}
+  {$ memberHelpers.renderDirectiveProperties(doc, 'Properties') $}
 
   {% include "includes/export-as.html" %}
 
@@ -46,7 +22,7 @@
   {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
   {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
   {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
-  {$ renderAncestorMembers(doc, 'methods') $}
+  {$ memberHelpers.renderDirectiveAncestors(doc, 'methods') $}
   {% endblock %}
 
 {% block endNotes %}{% endblock %}

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

@@ -28,12 +28,15 @@
 {%- endmacro -%}
 
 {%- macro renderMemberSyntax(member, truncateLines) -%}
+    {%- if member.boundTo %}<span class="property-binding">@{$ member.boundTo.type $}(
+    {%- if member.boundTo.propertyName != member.boundTo.bindingName %}'{$ member.boundTo.bindingName $}'{% endif -%}
+    )</span><br>{% endif -%}
     {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}
     {%- if member.isAbstract %}abstract {% endif -%}
     {%- if member.isStatic %}static {% endif -%}
     {%- if (member.isGetAccessor or member.isReadonly) and not member.isSetAccessor %}get {% endif -%}
     {%- if member.isSetAccessor and not member.isGetAccessor %}set {% endif -%}
-    {$ member.name $}{$ member.typeParameters | escape $}{% if not member.isGetAccessor %}{$ params.paramList(member.parameters, truncateLines) | trim $}{% endif %}
+    <span class="member-name">{$ member.name $}</span>{$ member.typeParameters | escape $}{% if not member.isGetAccessor %}{$ params.paramList(member.parameters, truncateLines) | trim $}{% endif %}
     {%- if member.isOptional  %}?{% endif -%}
     {$ params.returnType(member.type) | trim | truncateCode(truncateLines) $}
 {%- endmacro -%}
@@ -184,9 +187,8 @@
     {% for property in nonInternalProperties %}
       <tr class="{$ propertyClass $}">
         <td>
-          <code>{%- if property.boundTo %}<span class="property-binding">@{$ property.boundTo.type $}({$ property.boundTo.bindingName $})</span>
+          <a id="{$ property.anchor $}"></a>
-{% endif -%}<a id="{$ property.anchor $}" class="property-name">{$ property.name $}</a>{% if property.type %}: <span class="property-type">{$ property.type | escape $}</span>{% endif -%}
+          <code>{$ renderMemberSyntax(property) $}</code>
-          </code>
         </td>
         <td>
           {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
@@ -201,3 +203,27 @@
 </section>
 {%- endif -%}
 {%- endmacro -%}
+
+{% macro renderDirectiveAncestors(doc, collectionName) %}
+{%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+{% set nonInternalMembers = ancestor.doc[collectionName] | filterByPropertyValue('internal', undefined) %}
+{% if nonInternalMembers.length -%}
+<section class="inherited-members-list">
+  <h3>Inherited from <code>{$ ancestor.doc.id $}</code></h3>
+  <ul>
+  {% for member in nonInternalMembers %}
+    <li>
+        <code><a class="code-anchor" href="{$ ancestor.doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member) $}</a></code>
+    </li>
+  {% endfor %}
+  </ul>
+</section>
+{% endif %}
+{$ renderDirectiveAncestors(ancestor.doc, collectionName) $}
+{% endif %}{% endfor -%}
+{% endmacro %}
+
+{% macro renderDirectiveProperties(doc, heading) %}
+{$ renderProperties(doc.properties, 'instance-properties', 'instance-property', heading) $}
+{$ renderDirectiveAncestors(doc, 'properties') $}
+{% endmacro %}