@W-21259173 Update dependencies and improve API navigation support

[alexpmule]

• Added '@api-components/api-navigation' version 4.3.21 to package.json and package-lock.json.
• Updated existing references to '@api-components/api-navigation' to reflect the new version.
• Refactored ApiTypeDocument to ensure correct mediaType handling and improve example rendering logic.
• Enhanced tests to validate mediaType behavior and example section visibility.

Issue: Examples Not Displaying in Exchange

The Problem

The issue was in how the examples section was rendered and how mediaType was calculated in the api-type-document component.

Before the Fix (Problematic Code)

1. Conditional rendering that removed the section from the DOM:

   ${shouldRenderExamples ? html`<section class="examples">` : ''}

   • If shouldRenderExamples was false, the entire section was not created in the DOM.
   • This caused examples to never appear, even when they should be displayed.

2. Complex exampleMediaType calculation:

   const exampleMediaType = this._exampleMediaType !== undefined
     ? this._exampleMediaType
     : (this.mediaType || (this.isObject || this.isArray ? 'application/json' : undefined));

   • This complex logic could result in undefined in certain cases.
   • When mediaType was undefined, the api-resource-example-document component couldn't render examples correctly.

The Solution

After the Fix

1. The section is always rendered, but hidden with ?hidden:

   <section class="examples" ?hidden="${!this._renderMainExample}">

   • The section always exists in the DOM.
   • It's visually hidden using the hidden attribute when _renderMainExample is false.
   • This allows the component to initialize and render correctly, even if it's initially hidden.

2. Direct use of this.mediaType:

   .mediaType="${this.mediaType}"

   • Removed the complex exampleMediaType logic.
   • Now directly uses this.mediaType, simplifying the code and avoiding unexpected undefined values.

Summary

• Problem: Conditional rendering removed the section from the DOM when shouldRenderExamples was false, and the complex exampleMediaType calculation could result in undefined.
• Solution: The section is always rendered (using ?hidden to hide it) and this.mediaType is used directly without additional calculations.
• Result: Examples display correctly because the section always exists in the DOM and mediaType is passed consistently.

Code Changes

Before:

const shouldRenderExamples = this._showExamples !== undefined 
  ? this._showExamples 
  : this._renderMainExample;
const exampleMediaType = this._exampleMediaType !== undefined
  ? this._exampleMediaType
  : (this.mediaType || (this.isObject || this.isArray ? 'application/json' : undefined));

return html`<style>${this.styles}</style>
  ${shouldRenderExamples ? html`<section class="examples">
    ...
    <api-resource-example-document
      .mediaType="${exampleMediaType}"
      ?rawOnly="${!exampleMediaType}"
    ></api-resource-example-document>
  </section>` : ''}
`;

After:

return html`<style>${this.styles}</style>
  <section class="examples" ?hidden="${!this._renderMainExample}">
    ...
    <api-resource-example-document
      .mediaType="${this.mediaType}"
      ?rawOnly="${!this.mediaType}"
    ></api-resource-example-document>
  </section>
`;

Impact

This fix resolves the issue where examples defined under requestBodies with inherited properties via allOf in OpenAPI 3.0.1 specifications were not displaying in Exchange.

Nested api(Original error):

GRPC:

Verification: ProductOrder Examples Now Displaying Correctly

This screenshot demonstrates that the fix is working correctly. The product-order-minimal.json specification (which uses OpenAPI 3.0.1 with allOf inheritance) now properly displays all examples.

What the Image Shows

Operation: POST /productOrder - CreateProductOrder

Key Evidence of the Fix:

1. Three examples are visible in the "Code examples" section:

   • simpleProductOrder (currently selected and displayed)
   • productOrderWithDescription
   • productOrderWithPriority

2. Example content is properly rendered: The JSON for simpleProductOrder shows a complete, valid example with:

   • @type: "ProductOrder"
   • description: "A simple product order"
   • productOrderItem array with nested product details

3. Inherited properties are recognized: The interface correctly shows:

   • "Properties inherited from Entity_FVO"
   • "Properties inherited from Extensible_FVO"

4. Media type is correctly set: The request body shows application/json as the media type, confirming that mediaType is being passed correctly to the api-resource-example-document component.

Technical Details

This screenshot validates that:

• ✅ The examples section always exists in the DOM (fix: changed from conditional rendering to always render with ?hidden)
• ✅ The mediaType is correctly passed (application/json) without being undefined (fix: simplified to use this.mediaType directly)
• ✅ Examples defined under requestBodies with allOf inheritance are properly resolved and displayed
• ✅ The ProductOrder_FVO type with inherited properties from Entity_FVO and Extensible_FVO renders correctly

Before the fix: This same specification would not show any examples - the examples section would either be missing from the DOM entirely or the examples would be empty/undefined.

After the fix: All three examples are visible and functional, allowing users to see and test different request payload variations.