@ppci/custom-input

Input

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties
5. Events

Installation

NPM

npm i @ppci/custom-input

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/custom-input'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-input/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-input/builds/legacy.min.js" />

<!-- Component -->
<custom-input
  type=${String}
  name=${String}
  label=${String}
  placeholder=${String}
  @change=${Function}
  @change-delayed=${Function}
  ?checked=${Boolean}
></custom-input>

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 {
  --input-padding: 8px 16px;
  --input-border: 1px solid #eeee;
  --input-border-radius: 8px;
  --input-color: gray;
  --input-background: white;
  --input-placeholder-color: gray;
  --input-focus-border: 1px solid blue;
}

Properties

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

Events

Name	Description	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>