build(aio): improve `enum` API rendering (#23872)

* The member details section is now called "Members", rather
than "Properties".
* The property table now displays appropriate table headings:
"Member", "Value", "Description".
* The "Value" column is not shown if none of the members have
a value.

Closes #22678

PR Close #23872

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

@@ -0,0 +1,9 @@
+module.exports = function hasValues() {
+  return {
+    name: 'hasValues',
+    process: function(list, property) {
+      if (!list || !Array.isArray(list)) return false;
+      return list.some(item => item[property]);
+    }
+  };
+};

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

@@ -0,0 +1,19 @@
+const factory = require('./hasValues');
+
+describe('hasValues filter', () => {
+  let filter;
+
+  beforeEach(function() { filter = factory(); });
+
+  it('should be called "hasValues"', function() { expect(filter.name).toEqual('hasValues'); });
+
+  it('should return true if the specified property is truthy on any item in the list', function() {
+    expect(filter.process([], 'a')).toEqual(false);
+    expect(filter.process(0), 'a').toEqual(false);
+    expect(filter.process({}, 'a')).toEqual(false);
+    expect(filter.process([{a: 1}], 'a')).toEqual(true);
+    expect(filter.process([{b: 2}], 'a')).toEqual(false);
+    expect(filter.process([{a: 1, b: 2}], 'a')).toEqual(true);
+    expect(filter.process([{b: 2}, {a: 1}], 'a')).toEqual(true);
+  });
+});

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

@@ -1 +1,14 @@
-{% extends 'class.template.html' -%}
+{% import "lib/memberHelpers.html" as memberHelpers -%}
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+<section class="enum-overview">
+<code-example language="ts" hideCopy="true">
+enum {$ doc.name $} {{$ memberHelpers.renderMembers(doc) $}
+}
+</code-example>
+</section>
+
+{% include "includes/description.html" %}
+{$ memberHelpers.renderProperties(doc.properties, 'members', 'member', 'Members', ['Member', 'Value']) $}
+{% endblock %}

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

@@ -135,20 +135,25 @@
 {%- endmacro -%}
 
 
-{%- macro renderProperties(properties, containerClass, propertyClass, headingText) -%}
+{%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%}
 {% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %}
+{% set hasTypes = properties | hasValues('type') %}
 {% if nonInternalProperties.length -%}
 <section class="{$ containerClass $}">
   <h2>{$ headingText $}</h2>
   <table class="is-full-width list-table properties-table">
     <thead>
-      <tr><th>Property</th><th>Type</th><th>Description</th></tr>
+      <tr>
+        <th>{$ headings[0] or 'Property' $}</th>
+        {% if hasTypes %}<th>{$ headings[1] or 'Type' $}</th>{% endif %}
+        <th>{$ headings[2] or 'Description' $}</th>
+      </tr>
     </thead>
     <tbody>
     {% for property in nonInternalProperties %}
       <tr class="{$ propertyClass $}">
         <td><a id="{$ property.anchor $}"></a>{$ property.name $}</td>
-        <td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>
+        {% if hasTypes %}<td><label class="property-type-label"><code>{$ property.type | escape $}</code></label></td>{% endif %}
         <td>
           {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}<span class='read-only-property'>Read-only.</span>{% endif %}
           {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}