@api-components/api-type-document 4.2.17 → 4.2.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.17",
+  "version": "4.2.18",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package/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()}
+    `;
   }
 
   /**

package/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;
+  }
 `;