This component is being deprecated. The code base has been moved to amf-components module. This module will be archived when PR 1 is merged.
A navigation for an API spec generated from AMF ld+json model.
This version only works with AMF model version 2 (AMF parser >= 4.0.0).
For compatibility with previous model version use 3.x.x version of the component.
npm install @api-components/api-navigation --saveThe element works with AMF json/ld model. When the model is set it computes list of documentation nodes, types, endpoints, methods and security schemas. As a result user can select any of the items in the UI and the application is informed about user choice via custom event.
The selection is a selected API shape @id. The application is responsible for computing the model selected by the user.
Note, this element does not contain polyfills for Array platform features.
Passive navigation
Passive navigation means that a navigation event occurred but it wasn't invoked by intentional user interaction.
For example api-endpoint-documentation component renders list of documentations for HTTP methods.
While scrolling through the list navigation context changes (user reads documentation of a method) but the navigation never was caused by user intentional interaction. This event, annotated with passive: true property in the detail object, prohibits other element from taking a navigation action but some may reflect the change in the UI.
<html><head><scripttype="module">import'@api-components/api-navigation/api-navigation.js';</script></head><body><api-navigationamf="..."></api-navigation></body></html>import{LitElement,html}from'lit-element';import'@api-components/api-navigation/api-navigation.js';classSampleElementextendsLitElement{render(){returnhtml`<api-navigation.amf="${this.amf}"@api-navigation-selection-changed="${this._navigationHandler}"></api-navigation> `;}_navigationHandler(e){const{ selected, type, endpointId, passive }=e.detail;}}customElements.define('sample-element',SampleElement);git clone https://github.com/advanced-rest-client/api-navigation
cd api-navigation
npm installnpm startnpm test