@advanced-rest-client/variables-preview-overlaydeprecated

An element to display quick preview of variables values for selected environment

Usage no npm install needed!

<script type="module">
  import advancedRestClientVariablesPreviewOverlay from 'https://cdn.skypack.dev/@advanced-rest-client/variables-preview-overlay';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

<variables-preview-overlay>

An element to render an overlay with application and system variables (if applicable). It uses VariablesPreviewOverlay to manage list of variable and works with variables-manager and variables-model to get information about current environment, available environments, and variables.

Usage

Installation

npm install --save @advanced-rest-client/variables-preview-overlay

In an LitElement template

import { LitElement, html } from 'lit-element';
import './node_odules/@advanced-rest-client/variables-preview-overlay/variables-preview-overlay.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <variables-preview-overlay
      maskedvalues
      ?compatibility="${this.compatibility}"
      @open-variables-editor="${this._openEditor}"></variables-preview-overlay>

    <variables-manager></variables-manager>
    <variables-editor hidden></variables-editor>
    <variables-model></variables-model>
    `;
  }

  _openEditor() {
    this.shadowRoot.querySelector('variables-editor').removeAttribute('hidden');
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/variables-preview-overlay
cd variables-preview-overlay
npm install

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem