# Validation

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

##Description

This is a simple library that makes confirmation number easier to create.

After sign up, most of web-sites sends you a confirm number on phone or email. And then you need to type it or click links. Using this library you can type pin on separated inputs, that passes in new input automatically.

## Usage

##### Module

You need to import it on AppModule

`ValidationModule`

#### HTML

```HTML
    //length of pin numbers
    <Pin-Validation
        [length]="6"
        [type]="`number`"
        (codeNumber)="codeNumber($event)"
        ...>
    </Pin-Validation>
```

You can set input types

- number
- password

#### JS

```typescript
    //Get the pin code
    codeNumber(code) {
        console.log(code);
    }
```

```typescript
//Clear Inputs
this.validation.clear();
```

To clear inputs you need to define service on constructor

```typescript
    constructor(private validation: ValidationService) {}
```

#### Style

You can style it as you want

##### Theme

Use themes

```html
<Pin-Validation [theme]="val-underline" ...> </Pin-Validation>
```

Themes type:

- val-underline
- val-round
- val-frame
- val-classic
- val-outline

##### Custom style

```html
<Pin-Validation [custom]="myStyle" ...> </Pin-Validation>
```

```Typescript
// Your own css style
myStyle = {
    width: "30px",
    height: "30px",
    border: "1px solid black",
    "background-color": "#F2F2F2",
    "border-style": "solid",
    color: "blue"
  };
```

In order to use custom styling you need to remove theme directive

##### Style using CSS

Or you can create your own style using these selectors

```css
//Id of container
#inputsContainer { //Style }

//Class of inputs
.codeInput { //Style }
```

## TODO

    * New Designs

## Support

Tested on Ionic 4 and 3

## License

[MIT](https://choosealicense.com/licenses/mit/)