# Angular Multidigits OTP v-17+

An Angular library that simplifies the integration of OTP (One-Time Password) input fields into your Angular applications. This library offers customizable and secure OTP input components to enhance user authentication experiences.

## Instaltion

`npm install --save wts-otp`

## Getting started

```typescript
import { Component } from "@angular/core";

import { WtsOtpComponent, IOptions } from "wts-otp";

@Component({
  selector: "<COMPONENT-SELECTOR>",
  standalone: true,
  imports: [WtsOtpComponent],
  templateUrl: "<COMPONENT>.html",
  styleUrl: "<COMPONENT>.scss",
})
export class MyComponent {

  protected otp!:string;

  options: IOptions = {
  digits: 4
  placholder: '-' //●|★|－
  type: 'text'
  };

  protected getOTP(e: string): void {
    this.otp = e;
  }
}
```

## HTML

```html
  <wts-otp [options]="options" (getValue)="getOTP($event)"></wts-otp>
```

## Properties

| Name                                | Description         |
| ----------------------------------- | ------------------- |
| _(Optional)_ **options**: `IOptions` | \*Default: **{}\*** |

## Methods

| Name                     | Description                         |
| ------------------------ | ----------------------------------- |
| **getValue**: `Function` | _Trigger after a valid otp entered_ |

## Style Customization

```css
:host {
  --border: solid 2px #545353;
  --borderRadius: 4px;
  --fontWeight: 600;
  --fontSize: 16px;
  --fontColor: #1b1b1b;
  --placeholderColor: #000;
  --inputHeight: 46px;
  --inputWidth: 60px;
  --gapBetweenInput: 5px;
  --focusBorderColor: green;
  --invalidInputBorderColor: #e84545;
}
```

## Example

[Stackblitz Demo](https://stackblitz.com/edit/stackblitz-starters-4kqm5o?file=src%2Fmain.ts)