build(aio): rearrange decorator API doc template (#24000)

The overview of the decorator options is now a table.
The detailed description of each option is now a full section.

PR Close #24000

aio/src/styles/2-modules/_api-pages.scss

@@ -30,7 +30,7 @@
     }
   }
 
-  .method-table {
+  .method-table, .option-table {
     h3 {
       margin: 6px 0;
       font-weight: bold;

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

@@ -4,6 +4,40 @@
 
 {% block overview %}{% include "includes/decorator-overview.html" %}{% endblock %}
 {% block details %}
-  {% include "includes/description.html" %}
-  {$ memberHelper.renderProperties(doc.members, 'metadata-members', 'metadata-member', 'Options') $}
+{% include "includes/description.html" %}
+
+<section class="decorator-options">
+  <h2>Options</h2>
+  {% for option in doc.members %}
+  <a id="{$ option.anchor $}"></a>
+  <table class="is-full-width option-table">
+    <thead><tr><th><h3>{$ option.name $}</h3></th></tr></thead>
+    <tbody>
+      <tr>
+        <td>
+          {% if option.shortDescription %}{$ option.shortDescription | marked $}{% endif %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code-example language="ts" hideCopy="true" class="no-box api-heading">
+          {$ option.name $}: {$ option.type | escape $}
+          </code-example>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {%- if option.description %}
+          {$ option.description | marked({ h3: 'h4' }) $}
+          {% endif %}
+
+          {%- if option.usageNotes %}
+          {$ option.usageNotes | marked({ h3: 'h4' }) $}
+          {% endif %}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  {% endfor %}
+</section>
 {% endblock %}

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

@@ -1,10 +1,33 @@
-{% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
+
+{% macro renderOptionsTable(doc) %}
+<table class="is-full-width list-table option-table">
+  <thead>
+    <tr><th>Option</th><th>Description</th></tr>
+  </thead>
+  <tbody>
+  {%- for option in doc.members %}
+    <tr class="option">
+      <td>
+        <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
+          <code>{$ option.name $}</code>
+        </a>
+      </td>
+      <td>{$ option.shortDescription | marked $}</td>
+    </tr>
+    {% endfor -%}
+  </tbody>
+</table>
+
+{% for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+<h3>Inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a></h3>
+{$ renderOptionsTable(ancestor.doc) $}
+{% endif %}{% endfor %}
+{% endmacro %}
 
 {% if doc.members.length %}
 <section class="decorator-overview">
-<code-example language="ts" hideCopy="true">
-@{$ doc.name $}{$ doc.typeParams | escape $}({ {$ memberHelper.renderMembers(doc) $}
-})
-</code-example>
+  {$ renderOptionsTable(doc) $}
+  {$ descendants.renderDescendants(doc, 'decorator', 'Subclasses') $}
 </section>
-{% endif %}
+{% endif %}