@advanced-rest-client/paper-combobox

An input element with a dropdown list of suggestions

Usage no npm install needed!

<script type="module">
  import advancedRestClientPaperCombobox from 'https://cdn.skypack.dev/@advanced-rest-client/paper-combobox';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

paper-combobox

An input element with a dropdown list of suggestions.

Example

<paper-combobox label="Fruit name"></paper-combobox>

Usage

Installation

npm install --save @advanced-rest-client/paper-combobox

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/advanced-rest-client/paper-combobox.js';
    </script>
  </head>
  <body>
    <paper-combobox></paper-combobox>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/advanced-rest-client/paper-combobox.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <paper-combobox label="Fruit name" id="fruits" source="[[suggestions]]" on-query="_queryCalled"></paper-combobox>
    `;
  }

  static get properties() {
    return {
      suggestions: {
        type: Array,
        value: function() {
          return ['Apple', 'Apricot', 'Avocado',
          'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
          'Boysenberry', 'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya',
          'Cloudberry', 'Coconut', 'Cranberry', 'Damson', 'Date', 'Dragonfruit',
          'Durian', 'Elderberry', 'Feijoa', 'Fig', 'Goji berry', 'Gooseberry',
          'Grape', 'Grapefruit', 'Guava', 'Huckleberry', 'Jabuticaba', 'Jackfruit',
          'Jambul', 'Jujube', 'Juniper berry', 'Kiwi fruit', 'Kumquat', 'Lemon',
          'Lime', 'Loquat', 'Lychee', 'Mango', 'Marion berry', 'Melon', 'Miracle fruit',
          'Mulberry', 'Nectarine', 'Olive', 'Orange']
        }
      }
    };
  }

  _queryCalled(e) {
    console.log(e.detail.value);
  }
}
customElements.define('sample-element', SampleElement);

Installation

git clone https://github.com/advanced-rest-client/paper-combobox
cd api-url-editor
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

Required dependencies

The CryptoJS and RSAKey libraries are not included into the element sources. If your project do not use this libraries already include it into your project.

npm i cryptojslib jsrsasign
<script src="../../../cryptojslib/components/core.js"></script>
<script src="../../../cryptojslib/rollups/sha1.js"></script>
<script src="../../../cryptojslib/components/enc-base64-min.js"></script>
<script src="../../../cryptojslib/rollups/md5.js"></script>
<script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>