fix: missing array length restrictions info

Author: carowright

demo/apis.json

@@ -13,6 +13,7 @@
   "SE-19500/SE-19500.raml": "RAML 1.0",
   "enum-test/enum-test.raml": "RAML 1.0",
   "APIC-667/APIC-667.raml": "RAML 1.0",
+  "array-type/array-type.raml": "RAML 1.0",
   "APIC-429/APIC-429.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "SE-17897/SE-17897.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "new-oas3-types/new-oas3-types.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },

demo/array-type/array-type.raml

@@ -0,0 +1,18 @@
+#%RAML 1.0
+title: 00193743
+
+types:
+  Email:
+    type: object
+    properties:
+      name:
+        type: string
+  Emails:
+    type: array
+    items: Email
+    minItems: 1
+    maxItems: 3
+    uniqueItems: true
+  Other:
+    type: string
+    minLength: 2

demo/index.js

@@ -112,6 +112,7 @@ class ApiDemo extends ApiDemoPage {
       ['APIC-282', 'APIC-282'],
       ['new-oas3-types', 'New OAS 3 types API'],
       ['APIC-483', 'APIC 483'],
+      ['array-type', 'array-type'],
     ].map(
       ([file, label]) => html` <anypoint-item data-src="${file}-compact.json"
           >${label} - compact model</anypoint-item

src/ApiTypeDocument.js

@@ -652,6 +652,25 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     );
   }
 
+  _arrayPropertyTemplate(label, value, title) {
+    return html`
+        <div class="property-attribute" part="property-attribute">
+          <span class="attribute-label" part="attribute-label">${label}</span>
+          <span class="attribute-value" part="attribute-value" title=${title}>${value}</span>
+        </div>
+        `
+  }
+
+  _arrayPropertiesTemplate() {
+    const minCount = this._getValue(this._resolvedType, this.ns.w3.shacl.minCount)
+    const maxCount = this._getValue(this._resolvedType, this.ns.w3.shacl.maxCount)
+
+    return html`
+      ${minCount !== undefined ? this._arrayPropertyTemplate('Minimum array length:', minCount, 'Minimum amount of items in array') : ''}
+      ${maxCount !== undefined ? this._arrayPropertyTemplate('Maximum array length:', maxCount, 'Maximum amount of items in array') : ''}
+    `
+  }
+
   /**
    * @return {TemplateResult} Templates for object properties
    */
@@ -688,15 +707,19 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
           : ''}
       `
     );
-    if (!this.hasParentType) {
-      return html`
+
+    return html`
+      ${!this.hasParentType ?
+        html`
         <span>Array of:</span>
         <div class="array-children">
           ${documents}
-        </div>
-      `;
-    }
-    return html`${documents}`;
+        </div>` 
+        : html`${documents}`
+        }
+    
+      ${this._arrayPropertiesTemplate()}
+    `;
   }
 
   /**

src/TypeStyles.js

@@ -85,4 +85,15 @@ export default css`
   .union-type-selector {
     margin: 12px 0;
   }
+
+  .property-attribute {
+    margin: 4px 0;
+    padding: 0;
+    color: var(--api-type-document-type-attribute-color, #616161);
+  }
+
+  .attribute-label {
+    font-weight: var(--api-type-document-property-range-attribute-label-font-weight, 500);
+    margin-right: 12px;
+  }
 `;

test/api-type-document.test.js

@@ -521,6 +521,39 @@ describe('<api-type-document>', () => {
         });
       });
 
+      describe('Array type with restrictions', () => {
+        let element = /** @type ApiTypeDocument */ (null);
+        beforeEach(async () => {
+          const data = await AmfLoader.loadType('Emails', item[1], 'array-type');
+          element = await basicFixture();
+          element.amf = data[0];
+          element.type = data[1];
+          await aTimeout(0);
+        });
+
+        it('isArray is true', () => {
+          assert.isTrue(element.isArray);
+        });
+
+        it('Renders array document', () => {
+          const doc = element.shadowRoot.querySelector(
+            'property-shape-document.array-document'
+          );
+          assert.ok(doc);
+        });
+
+        it('Renders minItems and maxItems info', () => {
+          const properties = element.shadowRoot.querySelectorAll(
+            '.property-attribute'
+          );
+          assert.lengthOf(properties, 2);
+          assert.equal(properties[0].querySelector('.attribute-label').innerText, 'Minimum array length:');
+          assert.equal(properties[0].querySelector('.attribute-value').innerText, '1');
+          assert.equal(properties[1].querySelector('.attribute-label').innerText, 'Maximum array length:');
+          assert.equal(properties[1].querySelector('.attribute-value').innerText, '3');
+        });
+      });
+
       describe('Scalar type', () => {
         let element = /** @type ApiTypeDocument */ (null);