DEPRECATED

Use the @anypoint-web-components/awc module instead.

---

A component that is an input specialized with selecting a color. The package contains a color-selector that only renders an interactive control to select a color, and color-input-selector that contains additional label and enabling checkbox.

Usage

Installation

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

In a LitElement

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

class SampleElement extends LitElement {
  render() {
    return html`
    <color-selector
      .value="${value}"
      @change="${this._valueHandler}"
      slot="content"
    ></color-selector>
    <color-input-selector
      .value="${value}"
      @change="${this._valueHandler}"
      slot="content"
    >
      Select a color
    </color-input-selector>
    `;
  }

  _valueHandler(e) {
    this.value = e.target.value;
  }

  _inputValueHandler(e) {
    this.value = e.target.value;
    this.colorEnabled = e.target.enabled;
  }
}
customElements.define('sample-element', SampleElement);

Development

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

Running the demo locally

npm start

Running the tests

npm test