@powerpeers-test/custom-input

Input

A custom input field

Table of contents

1. Installation
2. Usage
3. Theme | Styling
4. Properties
5. Events
6. Changelog

Installation

CDN

  <script src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

NPM

  npm i @ppci/custom-input

Usage

// Javascript import
import '@ppci/custom-input'
// or module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

const onChange = (event) => {
  const { name, value } = event.detail;
}

const onChangeDelayed = (event) => {
  const { name, value } = event.detail;
}

<custom-input
  name='firstname'
  placeholder='First name'
  @change="${onChange}"
  @change-delayed='${onChangeDelayed}'>
</custom-input>

Theme | Styling

We have a predefined powerpeers theme ready for you! Just add the theme-powerpeers boolean attribute to your custom-button.

<custom-input
  theme-powerpeers>
</custom-input>

Not completely satisfied with our powerpeers theme? Well you can do it yourself. We have a set of css variables available for you.

custom-input {
  /* todo */
}

Properties

Property	Type	Description	Possible Values
name	string	Name of the input field. Which could be used in a form as field identifier.	first name, surname, email, etc.
value	string	The value of the input field.
label	string	Label of the input field. Which is placed above the input field itself.
placeholder	string	Placeholder value. Visible when the input field is empty.

Events

Name	Description	Detail / Payload
@change	Every time something changes on the input field this event is triggered. The name and value of the input field are passed in the detail section of the event. The value in the response reflects the current state of the input field. </td> <td>```{ name: 'firstname', value: 'p' }```</td>
@change-delayed	This is exactly like the change event. However, it's not triggered immediately after every key change. It's delayed so that it is possible to capture more than one key change at once. This could be useful to prevent too many network requests on a search box. </td> <td>```{ name: 'firstname', value: 'powerpeers' }```</td>

Changelog

1.0.1 ( Patch )

• Firefox style bug fix

1.0.0 ( Major )

• Initial version of the custom input field.