@api-components/api-type-document 4.2.30 → 4.2.33

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.30",
+  "version": "4.2.33",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -28,7 +28,7 @@
     "@advanced-rest-client/arc-marked": "^1.1.0",
     "@advanced-rest-client/markdown-styles": "^3.1.4",
     "@anypoint-web-components/anypoint-button": "^1.2.3",
-    "@api-components/amf-helper-mixin": "^4.5.24",
+    "@api-components/amf-helper-mixin": "^4.5.29",
     "@api-components/api-annotation-document": "^4.1.0",
     "@api-components/api-resource-example-document": "^4.3.3",
     "@open-wc/dedupe-mixin": "^1.3.0",

package/src/ApiTypeDocument.js

@@ -671,6 +671,19 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     this._hasExamples = value;
   }
 
+  /**
+   * Return the type mappings
+   */
+  _typesMappings(item) {
+    const itemName = this._getValue(item, this._getAmfKey(this.ns.w3.shacl.name));
+    const typeTarget = this._getValue(this.type, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminator));
+    let type;
+    if (itemName && typeTarget && itemName === typeTarget) {
+      type = this.type;
+    }
+    return type;
+  }
+
   /**
    * @return {TemplateResult[]|string} Templates for object properties
    */
@@ -691,6 +704,7 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
         ?graph="${this.graph}"
         .mediaType="${this.mediaType}"
         ?renderReadOnly="${this.renderReadOnly}"
+        .discriminatorMapping="${this._typesMappings(item)}"
       ></property-shape-document>`
     );
   }

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

@@ -379,7 +379,7 @@ const mxFunction = (base) => {
     }catch(_){
       return undefined
     }
-   
+
   }
 
     /**
@@ -493,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.d.ts

@@ -143,6 +143,11 @@ export class PropertyShapeDocument extends  PropertyDocumentMixin(LitElement) {
    * @attribute
    */
   deprecated: boolean
+  /**
+   * List type mappings
+   * @attribute
+   */
+  discriminatorMapping: any;
 
   get complexToggleLabel(): string;
 

package/src/PropertyShapeDocument.js

@@ -123,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.
        */
@@ -159,6 +159,10 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
        * Determines if shape's range is deprecated
        */
       deprecated: { type: Boolean, reflect: true },
+      /**
+       * Used for discriminator types mappings
+       */
+      discriminatorMapping: { type: Object },   
     };
   }
 
@@ -247,6 +251,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     this.narrow = false;
     this.renderReadOnly = false;
     this.deprecated = false;
+    this.discriminatorMapping = undefined;
   }
 
   connectedCallback() {
@@ -319,6 +324,7 @@ 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)
@@ -326,8 +332,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     this.namespace = namespace
     this.aliases = aliases
     this.defaultValue = defaultValue
-    
-    
+
     this.hasDisplayName = this._computeHasDisplayName(
       this.displayName,
       this.propertyName
@@ -498,7 +503,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     }catch(_){
       return undefined
     }
-   
+
   }
 
   /**
@@ -518,7 +523,6 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
 
 
 
-  
 
   /**
    * Computes value for `hasDisplayName` property.
@@ -714,6 +718,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)
    */
@@ -722,7 +736,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}"
@@ -843,7 +857,6 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
   `;
 }
 
-  
 
   /**
    * @return {TemplateResult|string} Template for the description
@@ -893,7 +906,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       parentTypeName,
       hasParentTypeName
     } = this;
-    
+
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
       : ''}
@@ -928,6 +941,42 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return ''
   }
 
+  _navigateItem(e) {
+    e.preventDefault();
+    const data = e.composedPath()[0].dataset;
+    if (!data.id || !data.shapeType) {
+      return;
+    }
+    const ev = new CustomEvent("api-navigation-selection-changed", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        selected: data.id,
+        type: data.shapeType,
+      },
+    });
+    this.dispatchEvent(ev);
+  }
+
+  _keydownNavigateItem(e) {
+    if (e.key === "Enter") {
+      this._navigateItem(e);
+    }
+  }
+
+  _typesMappingsTemplate() {
+    const mappings = this._getValueArray(this.discriminatorMapping, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminatorValueMapping));
+    if (!mappings) return html``;
+
+    return html`<ul class="types-mappings-container">
+      ${mappings.map((mapping) => {
+        const name = this._getValue(mapping, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminatorValue));
+        const target = this._getLinkValue(mapping, this._getAmfKey(this.ns.aml.vocabularies.shapes.discriminatorValueTarget));
+        return html`<li class="types-mappings-item" data-id="${target}" data-shape-type="type" @click="${this._navigateItem}" @keydown="${this._keydownNavigateItem}">${name}</li>`;
+      })}
+    </ul>`;
+  }
+
   /**
    * @return {TemplateResult} Main render function.
    */
@@ -967,6 +1016,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       ${this._getTypeAliasesAvroTemplate()}
       ${this._deprecatedWarningTemplate()}
       ${this._descriptionTemplate()}
+      ${this._typesMappingsTemplate()}
       <property-range-document
         .amf="${this.amf}"
         .shape="${this.shape}"

package/src/ShapeStyles.js

@@ -163,4 +163,14 @@ export default css`
     border-radius: var(--api-type-document-deprecated-warning-border-radius, 3px);
     display: inline-flex;
   }
+  .types-mappings-container {
+    margin-top: -10px;
+  }
+  .types-mappings-item {
+    cursor: pointer;
+    color: var(--link-color, #0277bd);
+  }
+  .types-mappings-item:hover {
+    text-decoration: underline;
+  }
 `;