npm package: @springtree/eva-config-picker
Description: Configuration picker for the eva configuration suite
Author: SpringTree B.V.
Latest version: 1.16.3

# eva config picker ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) [![Build Status](https://travis-ci.com/springtreesolutions/eva-config-picker.svg?branch=master)](https://travis-ci.com/springtreesolutions/eva-config-picker)


This will be for eva projects that support switching endpoints runtime.

## Usage

The only component you will need in order to render all the required UI is the `eva-config-picker`, you will do so the following way.

```html
<eva-config-picker></eva-config-picker>
```

This component dispatches a custom event named `endPointSelect`, you can listen to this event in multiple ways.

- Plain JS
  ```javascript
  document.querySelector('eva-config-picker').addEventListener( 'endPointSelect', event => {
    console.log(event.detail); // BaseEnvironment (endpoint, type, customerName)
  })
  ```
- Angular
  ```html
  <eva-config-picker (endPointSelect)="onEndPointSelect($event"></eva-config-picker>
  ```

  ```typescript
  import { BaseEnvironment } from '@springtree/eva-config-picker';
  class Component {
    onEndPointSelect(event: CustomEvent<BaseEnvironment>) {
      console.log(event.detail); // BaseEnvironment
    }
  }
  ```

Please refer to the [stencil documentation](https://stenciljs.com/docs/overview) on how to consume web components created in this project. Also this project has a dependency on two image assets under `src/assets/images/` make sure those are bundled in your final version.

This is how to do so for angular projects

`angular.json` under `build.options.assets`
```json
{
  "glob": "**",
  "input": "node_modules/@springtree/eva-config-picker/dist/collection/assets/images",
  "output": "assets/images"
}
```

# Development

Make sure you first run the `nvm use` command as this project has an `.nvmrc` file

the `start` will run a web server pointing to `index.html` in this project.


Need help? Check out the stencil docs [here](https://stenciljs.com/docs/my-first-component).

# Publishing

This project automatically publishes when pushed to master with [semantic-release](https://github.com/semantic-release/semantic-release)


## Naming Components

When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component! Instead, use the `eva-config` prefix.