@advanced-rest-client/environment-selector NPM

An element to select current variables environment. Used with Advanced REST Client.

Renders a material design dropdown with list of available environments. It always renders default environment.

It should be used with combination of:

to handle environment-list and environment-current custom events.

Note, it is more convenient to listen on change events on the manager instead of this element. The selector announces new environment to the manager and the manager refreshes the state.

API components

This components is a part of API components ecosystem

Usage

Installation

npm install --save @advanced-rest-client/environment-selector

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/environment-selector/environment-selector.js';
      import '@advanced-rest-client/variables-manager/variables-manager.js';
    </script>
  </head>
  <body>
    <variables-manager></variables-manager>
    <environment-selector></environment-selector>
    <script>
    document.queryElement('environment-selector').onenvironment = (e) => {
      console.log(e.detail.value); // Selected environment
    };
    </script>
  </body>
</html>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/environment-selector/environment-selector.js';
import '@advanced-rest-client/variables-manager/variables-manager.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <variables-manager></variables-manager>
    <environment-selector @selected-environment-changed="${this._envChanged}"></environment-selector>
    `;
  }

  _envChanged(e) {
    this.currentEnvironment = e.detail.environment;
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/environment-selector
cd environment-selector
npm install

Running the demo locally

npm start

Running the tests

npm test

web-components advanced-rest-clinet environment selector

@advanced-rest-client/variables-consumer-mixin @anypoint-web-components/anypoint-dropdown-menu @anypoint-web-components/anypoint-item @anypoint-web-components/anypoint-listbox lit-element

@everything-registry/sub-chunk-30 @advanced-rest-client/arc-app-mixin @advanced-rest-client/variables-editor @infinitebrahmanuniverse/nolb-_adv

5 years ago

5 years ago

5 years ago

5 years ago