kwikid-forms 0.0.1 → 0.0.3

package/README.md

@@ -1,189 +1,38 @@
 ## kwikid-forms
-[![Npm Version](https://img.shields.io/badge/npm-v1.8.1-blue.svg)](https://www.npmjs.com/package/kwikid-forms)
 
-A fully customizable, one-time password input component for the web built with Angular.
-
-![GIPHY](https://media.giphy.com/media/TdpKuX7H1KBvvR2Hpu/giphy.gif)
-
-
-<a href="https://code-farmz.github.io/kwikid-forms" target="_blank">Demo</a>
-
-<a href="https://stackblitz.com/github/code-farmz/kwikid-forms" target="_blank">Edit on Stackbliz</a>
 ## Installation
+
 ```
 npm install --save kwikid-forms
 ```
-## Usage
-Add KwikidFormBuilderModule to imports `app.module.ts` something like
-
-    import { BrowserModule } from  '@angular/platform-browser';
-    import { NgModule } from  '@angular/core';
-    import { AppComponent } from  './app.component';
-    import { KwikidFormBuilderModule } from  'kwikid-forms';
-
-        @NgModule({
-        declarations: [AppComponent],
-        imports: [ BrowserModule,
-        KwikidFormBuilderModule],
-        bootstrap: [AppComponent]
-        })
-
-Add component to your page:
-
-
-
-    <kwikid-forms  (onInputChange)="onOtpChange($event)"  [config]="{length:5}"></kwikid-forms>
-
-## API
-
-<table>
-<tr>
-<th>Name</th>
-<th>Type</th>
-<th>Required</th>
-<th>default</th>
-<th>Description</th>
-</tr>
-<tr>
-<td>config</td>
-<td>object</td>
-<td>true</td>
-<td>{length:4}</td>
-<td>Various configuration options to customize the component</td>
-</tr>
-<tr>
-<td>onOtpChange</td>
-<td>function</td>
-<td>true</td>
-<td>--</td>
-<td>Function that will receive the otp</td>
-</tr>
-<tr>
-<td>setValue</td>
-<td>function</td>
-<td>false</td>
-<td>--</td>
-<td>Call setValue method of component to update component value. See example below</td>
-</tr>
-</table>
-
-<u>**Config options**</u>
-<table>
-<tr>
-<th>Name</th>
-<th>Type</th>
-<th>Required</th>
-<th>default</th>
-<th>Description</th>
-</tr>
-<tr>
-<td>length</td>
-<td>number</td>
-<td>true</td>
-<td>4</td>
-<td>Number of OTP inputs to be rendered.</td>
-</tr>
-<tr>
-<td>inputStyles</td>
-<td>object</td>
-<td>false</td>
-<td>--</td>
-<td>Style applied to each input.Check https://angular.io/api/common/NgStyle for more info.</td>
-</tr>
-<tr>
-<td>inputClass</td>
-<td>string</td>
-<td>false</td>
-<td>--</td>
-<td>Class applied to each input.</td>
-</tr>
-<tr>
-<td>containerClass</td>
-<td>string</td>
-<td>false</td>
-<td>--</td>
-<td>Class applied to container element.</td>
-</tr>
-<tr>
-<td>containerStyles</td>
-<td>object</td>
-<td>false</td>
-<td>--</td>
-<td>Style applied to container element.Check https://angular.io/api/common/NgStyle for more info.</td>
-</tr>
-<tr>
-<tr>
-<td>allowNumbersOnly</td>
-<td>bool</td>
-<td>false</td>
-<td>--</td>
-<td>set true to allow only numbers as input</td>
-</tr>
-<td>allowKeyCodes</td>
-<td>string[]</td>
-<td>false</td>
-<td>--</td>
-<td>By default numbers alphabets and _ - are allowed.Y
-ou can define other key codes if needed.</td>
-</tr>
-<tr>
-<td>isPasswordInput</td>
-<td>bool</td>
-<td>false</td>
-<td>--</td>
-<td>set true for password type input</td>
-</tr>
-<tr>
-<td>disableAutoFocus</td>
-<td>bool</td>
-<td>false</td>
-<td>--</td>
-<td>First input will be auto focused on component load and to next empty input on setValue excecution.Set this flag to true to prevent this behaviour</td>
-</tr>
-<tr>
-<td>placeholder</td>
-<td>string</td>
-<td>false</td>
-<td>--</td>
-<td>input placeholder</td>
-</tr>
-<tr>
-<td>letterCase</td>
-<td>string</td>
-<td>--</td>
-<td>--</td>
-<td>Set value to Upper or Lower to change the otp to upper case or lower case</td>
-</tr>
-</table>
-
-<u>**Updating component value using setValue method**</u>
-
-Component value can be updated using `setValue` method of the component example:-
 
+## Usage
 
-```<kwikid-forms #ngOtpInput ></kwikid-forms> //add hash to kwikid-forms component```
+Add KwikIDFormsModule to imports `app.module.ts` something like
 
-then in your component reference using [@ViewChild](https://angular.io/api/core/ViewChild) and call `setValue` method when you want to set the value of component like
+```js
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { KwikIDFormsModule } from 'kwikid-forms';
 
+@NgModule({
+    declarations: [AppComponent],
+    imports: [KwikIDFormsModule],
+    bootstrap: [AppComponent]
+})
 ```
-//Get reference using ViewChild and the specified hash
-@ViewChild('ngOtpInput') ngOtpInputRef:any;
 
-yourMethod(){
-  this.ngOtpInputRef.setValue(yourValue);
-  //yourvalue can be any string or number
-}
+Add component to your page:
 
+```html
+<kwikid-forms></kwikid-forms>
 ```
 
-<u>**Disable inputs**</u>
-
-Inputs can be disabled by getting the otp form instance of the component and calling disable method
+## Docs
 
-1.Get the component ref in the same way as done in SetValue method above
-2.Call disable method of otpForm as follow
+Storybook - [link](https://docs.getkwikid.com:7072/kwikid-forms/storybook/)
 
-``` this.ngOtpInputRef.otpForm.disable(); ```
+Code - [link](https://docs.getkwikid.com:7072/kwikid-forms/code/)
 
 ## License
 
@@ -191,4 +40,4 @@ Inputs can be disabled by getting the otp form instance of the component and cal
 
 ## Contributing
 
-Add a star to show your support and feel free to open [issues](https://github.com/code-farmz/kwikid-forms/issues/new) and [pull requests](https://github.com/code-farmz/kwikid-forms/compare)!
+Add a star to show your support and feel free to open [pull requests](https://bitbucket.org/team360noscope/kwikid-forms/pull-requests/)!