fix: Display array items with "Array of:" in unions

Author: deiteris

src/ApiTypeDocument.js

@@ -765,34 +765,46 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
    * @private
    */
   _multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type }) {
+    const selectedUnion = items[selected];
+    const unionsSelector = html`<div class="union-type-selector">
+      <span>${label}:</span>
+      ${items.map(
+        (item, index) => html`<anypoint-button
+              class="${typeName}-toggle"
+              data-index="${index}"
+              ?activated="${selected === index}"
+              aria-pressed="${selected === index ? 'true' : 'false'}"
+              @click="${selectTypeCallback}"
+              ?compatibility="${this.compatibility}"
+              title="Select ${item.label} type"
+              >${item.label}</anypoint-button
+            >`
+      )}
+      </div>`
+    const document = html`<api-type-document
+      class="${typeName}-document"
+      .amf="${this.amf}"
+      .parentTypeName="${this.parentTypeName}"
+      .type="${type}"
+      ?narrow="${this.narrow}"
+      ?noExamplesActions="${this.noExamplesActions}"
+      ?noMainExample="${this._renderMainExample}"
+      ?compatibility="${this.compatibility}"
+      .mediaType="${this.mediaType}"
+      ?graph="${this.graph}"
+    ></api-type-document>`
+    if (selectedUnion.isArray) {
+      return html`
+        ${unionsSelector}
+        <span>Array of:</span>
+        <div class="array-children">
+          ${document}
+        </div>
+      `;
+    }
     return html`
-      <div class="union-type-selector">
-        <span>${label}:</span>
-        ${items.map(
-      (item, index) => html`<anypoint-button
-            class="${typeName}-toggle"
-            data-index="${index}"
-            ?activated="${selected === index}"
-            aria-pressed="${selected === index ? 'true' : 'false'}"
-            @click="${selectTypeCallback}"
-            ?compatibility="${this.compatibility}"
-            title="Select ${item.label} type"
-            >${item.label}</anypoint-button
-          >`
-    )}
-      </div>
-      <api-type-document
-        class="${typeName}-document"
-        .amf="${this.amf}"
-        .parentTypeName="${this.parentTypeName}"
-        .type="${type}"
-        ?narrow="${this.narrow}"
-        ?noExamplesActions="${this.noExamplesActions}"
-        ?noMainExample="${this._renderMainExample}"
-        ?compatibility="${this.compatibility}"
-        .mediaType="${this.mediaType}"
-        ?graph="${this.graph}"
-      ></api-type-document>
+      ${unionsSelector}
+      ${document}
     `;
   }