DEPRECATED

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.

Version compatibility

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.

Usage

Installation

npm install @api-components/api-navigation --save

The 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.

In an html file

<html>
  <head>
    <script type="module">
      import '@api-components/api-navigation/api-navigation.js';
    </script>
  </head>
  <body>
    <api-navigation amf="..."></api-navigation>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/api-navigation/api-navigation.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <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);

Development

git clone https://github.com/advanced-rest-client/api-navigation
cd api-navigation
npm install

Running the demo locally

npm start

Running the tests

npm test

arc-archive / api-navigation

readme