@api-components/api-type-document 4.2.29 → 4.2.31

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.29",
+  "version": "4.2.31",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -99,4 +99,4 @@
       "eslint --fix"
     ]
   }
-}
+}

package/src/ApiTypeDocument.js

@@ -560,9 +560,9 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     if (Array.isArray(item)) {
       return item;
     }
-
+    
     const propertyKey = this._getAmfKey(this.ns.w3.shacl.property);
-    const itemProperties = this._ensureArray(item[propertyKey])
+    const itemProperties = this._ensureArray(item[propertyKey]||[])
     const additionalPropertiesKey = this._getAmfKey(this.ns.w3.shacl.additionalPropertiesSchema);
 
     // If the item doesn't have additional properties, filter the read-only properties and return
@@ -571,9 +571,9 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     }
 
     const additionalPropertiesSchema = this._ensureArray(item[additionalPropertiesKey])
-
+    
     // If the item does have additional properties, ensure they are in an array
-    const additionalProperties = this._ensureArray(additionalPropertiesSchema[0][propertyKey])
+    const additionalProperties = this._ensureArray(additionalPropertiesSchema[0][propertyKey] || additionalPropertiesSchema[0])
 
     // Combine the item's properties and additional properties
     const combinedProperties = [...itemProperties, ...additionalProperties]
@@ -819,6 +819,14 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type });
   }
 
+  _getItemLabel(item){
+    if(item.label==='Unknown type' && item.avroValue){
+      return item.avroValue 
+    }
+    return item.label
+
+  }
+
   /**
    *
    * @param {Object} args
@@ -843,8 +851,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
             aria-pressed="${selected === index ? 'true' : 'false'}"
             @click="${selectTypeCallback}"
             ?compatibility="${this.compatibility}"
-            title="Select ${item.label} type"
-            >${item.label}</anypoint-button
+            title="Select ${this._getItemLabel(item)} type"
+            >${this._getItemLabel(item)}</anypoint-button
           >`
     )}
       </div>

package/src/PropertyDocumentMixin.d.ts

@@ -25,7 +25,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * This is used to select/generate examples according to current body
    * media type. When not set it only renders examples that were defined
    * in API spec file in a form as they were written.
-   * 
+   *
    * @attribute
    */
   mediaType: string;
@@ -55,7 +55,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param range AMF property range object
    * @returns Data type of the property.
    */
-  _computeRangeDataType(range: Object): String|undefined;
+  _computeRangeDataType(range: Object): String | undefined;
 
   /**
    * Computes type from a scalar shape.
@@ -78,7 +78,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param range Range object of current shape.
    * @returns List of Array items.
    */
-  _computeArrayProperties(range: Object): ArrayPropertyItem[]|undefined;
+  _computeArrayProperties(range: Object): ArrayPropertyItem[] | undefined;
 
   /**
    * Computes value for `isUnion` property.
@@ -110,7 +110,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
   /**
    * Computes value for `isAnyOf` property.
    * AnyOf type is identified as a `http://www.w3.org/ns/shacl#or`
-   * 
+   *
    * @param range Range object of current shape.
    */
   _computeIsAnyOf(range: Object): boolean
@@ -141,7 +141,7 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param items Array's items property or a single property
    * @returns Label for the union type.
    */
-  _computeArrayUnionLabel(items: object|object[]): string|undefined;
+  _computeArrayUnionLabel(items: object | object[]): string | undefined;
 
   /**
    * Computes name label for the shape.
@@ -150,7 +150,9 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
    * @param shape The shape of the property.
    * @returns Display name of the property
    */
-  _computeDisplayName(range: Object, shape: Object): string|undefined;
+  _computeDisplayName(range: Object, shape: Object): string | undefined;
+
+  _computeParentName(range: Object, shape: Object): string | undefined;
 
   _computeHasMediaType(mediaType: string): boolean;
 
@@ -159,5 +161,5 @@ interface PropertyDocumentMixin extends AmfHelperMixin {
   _isPropertyReadOnly(property: any): boolean;
   _isReadOnly(property: any): boolean;
 }
-export {PropertyDocumentMixinConstructor};
-export {PropertyDocumentMixin};
+export { PropertyDocumentMixinConstructor };
+export { PropertyDocumentMixin };

package/src/PropertyDocumentMixin.js

@@ -172,6 +172,7 @@ const mxFunction = (base) => {
           return 'String';
         case this._getAmfKey(sc.integer):
         case sc.integer:
+        case sc.int:
           return 'Integer';
         case this._getAmfKey(sc.long):
         case sc.long:
@@ -205,6 +206,10 @@ const mxFunction = (base) => {
         case this._getAmfKey(rs.password):
         case rs.password:
           return 'Password';
+        case sc.bytes:
+          return 'Bytes'
+        case sc.fixed:
+          return 'Fixed'
         default:
           return 'Unknown type';
       }
@@ -356,6 +361,37 @@ const mxFunction = (base) => {
       return this._hasProperty(range, this.ns.w3.shacl.and);
     }
 
+     /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   */
+   _computeAvroSourceMap(data) {
+    try{
+      const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources)
+      const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema)
+      const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value)
+      if(data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]){
+         const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey])
+         return avroValues[0][valueKey][0]['@value']
+      }
+      return undefined
+    }catch(_){
+      return undefined
+    }
+
+  }
+
+    /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   * @return {Object} Size of the property
+   */
+  _computeAvroShapeRangeSourceMap(data) {
+    return this._computeAvroSourceMap(data)
+   }
+
     /**
      * Computes list of type labels to render.
      *
@@ -369,6 +405,7 @@ const mxFunction = (base) => {
         return undefined;
       }
       return list.map((obj) => {
+        const avroValue = this._computeAvroShapeRangeSourceMap(obj) || null
         let item = obj;
         if (Array.isArray(item)) {
           [item] = item;
@@ -419,6 +456,7 @@ const mxFunction = (base) => {
           isArray,
           isType,
           label,
+          avroValue
         };
       });
     }
@@ -455,6 +493,33 @@ const mxFunction = (base) => {
       if (!shape || !range) {
         return undefined;
       }
+
+      const coreName = this.ns.aml.vocabularies.core.name;
+      const shaclName = this.ns.w3.shacl.name;
+      const parameterType = this.ns.aml.vocabularies.apiContract.Parameter;
+      const nodeShapeType = this.ns.w3.shacl.NodeShape;
+
+      // Check if the shape is of type Parameter
+      if (this._hasType(shape, parameterType)) {
+        return /** @type string */ (this._getValue(range, coreName));
+      }
+
+      // Check if the range is of type NodeShape
+      if (this._hasType(range, nodeShapeType)) {
+        return (
+          /** @type string */ (this._getValue(range, coreName)) ||
+          /** @type string */ (this._getValue(shape, shaclName))
+        );
+      }
+
+      // Default case: return the core name from the range
+      return /** @type string */ (this._getValue(range, coreName));
+    }
+
+    _computeParentName(range, shape) {
+      if (!shape || !range) {
+        return undefined;
+      }
       // let name;
       if (
         this._hasType(shape, this.ns.aml.vocabularies.apiContract.Parameter)

package/src/PropertyShapeDocument.js

@@ -34,6 +34,31 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
        * `displayName` was specified in the API spec for this property.
        */
       propertyName: { type: String },
+      /**
+       * A type size.
+       * Is only used for async / avro api
+       */
+      size: { type: String },
+      /**
+       * A type defaultValue.
+       * Is only used for async / avro api
+       */
+      defaultValue: { type: String },
+      /**
+       * A type namespace.
+       * Is only used for async / avro api
+       */
+      namespace: { type: String },
+      /**
+       * A type aliases.
+       * Is only used for async / avro api
+       */
+      aliases: { type: Array },
+      /**
+       * Avro original value type.
+       * Is only used for async / avro api
+       */
+      avroValue: { type: String },
       /**
        * Computed value, true if `displayName` has been defined for this
        * property.
@@ -98,7 +123,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       /**
        * A description of the shape to render.
        */
-      shapeDescription: { type: String },      
+      shapeDescription: { type: String },
       /**
        * Computed value, true if description is set.
        */
@@ -211,6 +236,11 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
 
   constructor() {
     super();
+    this.avroValue = undefined
+    this.defaultValue = undefined
+    this.size = undefined
+    this.namespace = undefined
+    this.aliases = undefined
     this.hasDisplayName = false;
     this.hasParentTypeName = false;
     this.hasPropertyDescription = false;
@@ -289,7 +319,15 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
 
   _shapeRangeChanged(shape, range) {
     this.displayName = this._computeDisplayName(range, shape);
+    this.parentName = this.isObject ? this._computeParentName(range, shape) : undefined;
     this.propertyName = this._computePropertyName(range, shape);
+    this.avroValue = this._computeAvroShapeRangeSourceMap(range, shape)
+    const {size,namespace,aliases, defaultValue} = this._computeAvroProperties(range, shape)
+    this.size = size
+    this.namespace = namespace
+    this.aliases = aliases
+    this.defaultValue = defaultValue
+
     this.hasDisplayName = this._computeHasDisplayName(
       this.displayName,
       this.propertyName
@@ -369,6 +407,118 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return undefined;
   }
 
+  /**
+   * Computes avro property. Only for async / avro
+   *
+   * @param {Object} range Range object of current shape.
+   * @param {Object} shape The shape object
+   * @return {String|undefined} Size of the property
+   */
+  _computeAvroProperty(range, shape, prop) {
+    if (!shape && !range) {
+      return undefined;
+    }
+    let result
+    if (shape) {
+      shape = this._resolve(shape);
+      result = /** @type string */ (this._getValue(
+        shape,
+        this.ns.aml.vocabularies.shapes[prop]
+      ));
+
+    }
+    if (range && !result) {
+      range = this._resolve(range);
+      result = this._getValue(range, this.ns.aml.vocabularies.shapes[prop]);
+    }
+    return result ? String(result): undefined;
+  }
+
+  /**
+   * Computes avro defaultValue. Only for async / avro
+   *
+   * @param {Object} range Range object of current shape.
+   * @param {Object} shape The shape object
+   * @return {String|undefined} Size of the property
+   */
+  _computeAvroDefaultValue(range, shape) {
+    if (!shape && !range) {
+      return undefined;
+    }
+    const defaultValueKey = this.ns.w3.shacl.defaultValue
+    let result
+    if (shape) {
+      shape = this._resolve(shape);
+      if(shape[defaultValueKey]){
+        result = this._getValue(shape[defaultValueKey][0], this.ns.aml.vocabularies.data.value)
+      }
+    }
+    if (range && !result) {
+      range = this._resolve(range);
+      if(range[defaultValueKey]){
+        result = this._getValue(range[defaultValueKey], this.ns.aml.vocabularies.data.value)
+      }
+    }
+    return result ? String(result): undefined;
+  }
+
+  /**
+   * Computes size of the property. Only for async / avro
+   *
+   * @param {Object} range Range object of current shape.
+   * @param {Object} shape The shape object
+   * @return {Object|undefined} Size,namespace,aliases,defaultValue of the property (only when has avroValues)
+   */
+  _computeAvroProperties(range, shape) {
+    if(!this.avroValue){
+      return {size:undefined, namespace:undefined, aliases:undefined, defaultValue:undefined}
+    }
+   const size = this._computeAvroProperty(range,shape,"size")
+   const namespace = this._computeAvroProperty(range,shape,"namespace")
+   const aliases = this._computeAvroProperty(range,shape,"aliases")
+   const defaultValue = this._computeAvroDefaultValue(range,shape)
+   return {size, namespace, aliases, defaultValue}
+  }
+
+  /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   */
+  _computeAvroSourceMap(data) {
+    try{
+      const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources)
+      const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema)
+      const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value)
+      if(data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]){
+         const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey])
+         return avroValues[0][valueKey][0]['@value']
+      }
+      return undefined
+    }catch(_){
+      return undefined
+    }
+
+  }
+
+  /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} range Range object of current shape.
+   * @param {Object} shape The shape object
+   * @return {Object} Size of the property
+   */
+  _computeAvroShapeRangeSourceMap(range,shape) {
+   const shapeValue = this._computeAvroSourceMap(shape)
+   if(shapeValue){
+    return shapeValue
+   }
+   return this._computeAvroSourceMap(range)
+  }
+
+
+
+
   /**
    * Computes value for `hasDisplayName` property.
    * Indicates that `displayName` has been defined in the API specification.
@@ -563,6 +713,16 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return this._hasType(item, this.ns.aml.vocabularies.shapes.ScalarShape);
   }
 
+  _getParentTypeName() {
+    if (this.isArray) {
+      return 'item'
+    }
+    if(this.isObject){
+      return this.parentName
+    }
+    return this.displayName
+  }
+
   /**
    * @return {TemplateResult|string} Template for a complex shape (object/array/union)
    */
@@ -571,7 +731,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       return '';
     }
     const range = this._resolve(this.range);
-    const parentTypeName = this.isArray ? 'item' : this.displayName;
+    const parentTypeName = this._getParentTypeName();
     return html`<api-type-document
       class="children complex"
       .amf="${this.amf}"
@@ -588,13 +748,24 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     ></api-type-document>`;
   }
 
+  _getTypeLabelData(){
+    const { propertyDataType, avroValue } = this;
+    if(avroValue==='map'){
+      return {dataType:'Map',customValue:false}
+    }
+    if(propertyDataType==='Unknown type' && avroValue){
+      return {dataType:avroValue,customValue:true}
+    }
+    return {dataType:propertyDataType,customValue:false}
+  }
+
   /**
    * @return {TemplateResult} Template for a type name label
    */
   _getTypeNameTemplate() {
-    let dataType = this.propertyDataType;
-    const id = this._targetTypeId;
     const { isScalarArray } = this;
+    let {dataType} = this._getTypeLabelData();
+    const id = this._targetTypeId;
     if (id) {
       const label = this._targetTypeName;
       return html`
@@ -613,9 +784,75 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       const itemType = this.arrayScalarTypeName;
       dataType = `${dataType} of ${itemType}`;
     }
-    return html`<span class="data-type">${dataType}</span>`;
+    return html`
+      <span class="data-type">${dataType}</span>`;
+
+  }
+
+  /**
+   * @return {TemplateResult | String} Template size value (only for async / avro)
+   */
+  _getFixedTypeSizeAvroTemplate() {
+    const { size } = this;
+    if(!size){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>Size: ${size}</span></div>`;
+  }
+
+  /**
+   * @return {TemplateResult | String} Template size value (only for async / avro)
+   */
+  _getCustomAvroValueTemplate() {
+    const {customValue} = this._getTypeLabelData()
+    if(!customValue){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>This is a custom Avro type. You can read the definitions for this value in the specification.</span></div>`;
+  }
+
+  /**
+   * @return {TemplateResult | String} Template size value (only for async / avro)
+   */
+  _getDefaultValueAvroTemplate() {
+    const { defaultValue } = this;
+    if(!defaultValue){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>Default Value: ${defaultValue}</span></div>`;
+  }
+
+  /**
+   * @return {TemplateResult | String} Template namespace value (only for async / avro)
+   */
+  _getTypeNamespaceAvroTemplate() {
+    const { namespace } = this;
+    if(!namespace){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>Namespace: ${namespace}</span></div>`;
   }
 
+  /**
+   * @return {TemplateResult | String} Template namespace value (only for async / avro)
+   */
+  _getTypeAliasesAvroTemplate() {
+  const { aliases } = this;
+  if (!aliases) {
+    return '';
+  }
+  return html`
+    <div class="fixed-type-size">
+      Aliases: ${aliases.map(alias => html`<span>${alias}</span>`)}
+    </div>
+  `;
+}
+
+
   /**
    * @return {TemplateResult|string} Template for the description
    */
@@ -662,8 +899,9 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       displayName,
       propertyName,
       parentTypeName,
-      hasParentTypeName,
+      hasParentTypeName
     } = this;
+
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
       : ''}
@@ -684,6 +922,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return html`<div class="deprecated-warning">Warning: Deprecated</div>`
   }
 
+  _noNameAvroClass() {
+    const {
+      hasDisplayName,
+      propertyName,
+      isComplex,
+      avroValue,
+      _renderToggleButton
+    } = this;
+    if(!hasDisplayName && !propertyName && isComplex && avroValue && _renderToggleButton){
+      return ' no-name'
+    }
+    return ''
+  }
+
   /**
    * @return {TemplateResult} Main render function.
    */
@@ -692,7 +944,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
         ${this.styles}
       </style>
       ${this._headerTemplate()}
-      <div class="property-traits">
+      <div class="property-traits${this._noNameAvroClass()}">
         ${this._getTypeNameTemplate()}
         ${this.isRequired
           ? html`<span
@@ -716,6 +968,11 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
             >`
           : ''}
       </div>
+      ${this._getCustomAvroValueTemplate()}
+      ${this._getDefaultValueAvroTemplate()}
+      ${this._getFixedTypeSizeAvroTemplate()}
+      ${this._getTypeNamespaceAvroTemplate()}
+      ${this._getTypeAliasesAvroTemplate()}
       ${this._deprecatedWarningTemplate()}
       ${this._descriptionTemplate()}
       <property-range-document

package/src/ShapeStyles.js

@@ -1,17 +1,11 @@
-import { css } from 'lit-element';
+import { css } from "lit-element";
 
 export default css`
   :host {
     display: block;
     border-bottom-width: 1px;
-    border-bottom-color: var(
-      --property-shape-document-border-bottom-color,
-      #cfd8dc
-    );
-    border-bottom-style: var(
-      --property-shape-document-border-bottom-style,
-      dashed
-    );
+    border-bottom-color: var(--property-shape-document-border-bottom-color, #cfd8dc);
+    border-bottom-style: var(--property-shape-document-border-bottom-style, dashed);
     padding: var(--property-shape-document-padding);
   }
 
@@ -24,27 +18,12 @@ export default css`
   }
 
   .property-title {
-    font-family: var(
-      --property-shape-document-title-font-family,
-      var(--arc-font-subhead-font-family)
-    );
-    font-size: var(
-      --property-shape-document-title-font-size,
-      var(--arc-font-subhead-font-size, 1rem)
-    );
-    font-weight: var(
-      --property-shape-document-title-font-weight,
-      var(--arc-font-subhead-font-weight)
-    );
-    line-height: var(
-      --property-shape-document-title-line-height,
-      var(--arc-font-subhead-line-height)
-    );
-
-    margin: var(
-      --property-shape-document-title-margin,
-      4px 0 4px 0
-    );
+    font-family: var(--property-shape-document-title-font-family, var(--arc-font-subhead-font-family));
+    font-size: var(--property-shape-document-title-font-size, var(--arc-font-subhead-font-size, 1rem));
+    font-weight: var(--property-shape-document-title-font-weight, var(--arc-font-subhead-font-weight));
+    line-height: var(--property-shape-document-title-line-height, var(--arc-font-subhead-line-height));
+
+    margin: var(--property-shape-document-title-margin, 4px 0 4px 0);
     font-size: 1rem;
     font-weight: var(--api-type-document-property-title-font-weight, 500);
     word-break: break-word;
@@ -52,10 +31,7 @@ export default css`
   }
 
   .property-title[secondary] {
-    font-weight: var(
-      --api-type-document-property-title-secondary-font-weight,
-      400
-    );
+    font-weight: var(--api-type-document-property-title-secondary-font-weight, 400);
     color: var(--api-type-document-property-title-secondary-color, #616161);
   }
 
@@ -65,10 +41,7 @@ export default css`
 
   .property-display-name {
     font-weight: var(--api-type-document-property-name-font-weight, 500);
-    color: var(
-      --api-type-document-property-name-color,
-      var(--api-type-document-property-color, #212121)
-    );
+    color: var(--api-type-document-property-name-color, var(--api-type-document-property-color, #212121));
     margin: 4px 0 4px 0;
     font-size: var(--api-type-document-property-name-font-size, 16px);
   }
@@ -117,6 +90,10 @@ export default css`
     margin-bottom: 8px;
   }
 
+  .property-traits.no-name {
+    margin-top: -33px;
+  }
+
   .property-traits > span {
     display: inline-block;
     margin-right: 8px;
@@ -134,6 +111,10 @@ export default css`
     font-weight: var(--api-type-document-trait-data-type-font-weight, normal);
   }
 
+  .property-traits > span.fixed-type-size {
+    padding: var(--api-type-document-trait-fixed-type-size-padding, 2px 1px);
+  }
+
   arc-marked {
     background-color: transparent;
     padding: 0;
@@ -159,7 +140,7 @@ export default css`
     -ms-flex: 1;
     flex: 1;
   }
-  
+
   .property-traits > span.readonly-type {
     background-color: var(--api-type-readonly-property-background-color, #ff9292);
     color: var(--api-type-readonly-property-color, black);