Feat/w 17482615/list mapping types

.gitignore

@@ -64,4 +64,5 @@ dist/
 !demo/avro.json
 !demo/avro2.json
 
-.idea/
+.idea/
+.codegenie/

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.31",
+  "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",

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>`
     );
   }

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;
 

src/PropertyShapeDocument.js

@@ -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() {
@@ -936,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.
    */
@@ -975,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}"

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