npm package: @leminnow/ng-lemin-cropped-captcha
Description: Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.
Latest version: 0.6.1

<div>
<br>

<p style="padding: 30px" align="center">
  <a href="https://leminnow.com">
    <img width="200" src="https://assets.website-files.com/60d493b79d3973812262066c/60d6025cca81ce4522c799ed_footer-logo.svg" >
  </a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@leminnow/ng-lemin-cropped-captcha">
    <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge&logo=angular&logoColor=white">
  </a>
</p>
<p align="center">
<a><img src="https://img.shields.io/npm/v/@leminnow/ng-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npm/dw/@leminnow/ng-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/bundlephobia/min/@leminnow/ng-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npm/types/@leminnow/ng-lemin-cropped-captcha?style=for-the-badge"></a>
</p>

<br>

<h1>Ng Lemin Cropped Captcha</h1>
<p style="font-size: 20px">Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.</p>

<br>
<br>
</div>

## Table Of Contents
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Integration](#integration)
- [Usage](#usage)
- [Documentation](#documentation)
- [API](#api)

<br>

## <div id="getting-started"></div> Getting Started

### How can I get my `captchaId` ?
Select a puzzle captcha from <a href="https://dashboard.leminnow.com/products/captcha-list">your puzzle captchas</a>
<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_captcha_id.jpg" width="70%" height="auto">
</p>

Copy your `captchaId` from your puzzle's captcha script source

<br>

### How can I get my `containerId` ?

Click on **Advanced Settings** from the puzzle captcha of your choice

<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_container_id.jpg" width="70%" height="auto">
</p>

Copy your `containerId` from Captcha Div ID

<br>

## <div id="installation"></div> Installation
Installation with npm:

    npm install @leminnow/ng-lemin-cropped-captcha

Installation with yarn:

    yarn add @leminnow/ng-lemin-cropped-captcha

<br>

## <div id="integration"></div> Integration


### Import `LeminCroppedCaptchaModule`

```typescript
import {LeminCroppedCaptchaModule} from "@leminnow/ng-lemin-cropped-captcha";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeminCroppedCaptchaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

<br>


### Use `LeminCroppedCaptcha` in your component

```html
<form>
  <!-- Your Captcha Id and Captcha Container Id -->
  <lemin-cropped-captcha
    containerId="..."
    captchaId="CROPPED_..."
  ></lemin-cropped-captcha>
</form>
```

<br>

## <div id="usage"></div> Usage Examples

### Using with component ref

```html
<form>
  <lemin-cropped-captcha
    containerId="..."
    captchaId="CROPPED_..."
  ></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
```

```typescript
import {LeminCroppedCaptchaComponent} from "@leminnow/ng-lemin-cropped-captcha";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(LeminCroppedCaptchaComponent) leminCroppedCaptcha!: LeminCroppedCaptchaComponent;

  constructor() {
  }

  getCaptchaValues() {
    const values = this.leminCroppedCaptcha.getCaptchaValue();
  }
}
```

<br>

### Using with `LeminCroppedCaptchaService`

```html
<form>
  <lemin-cropped-captcha
    containerId="..."
    captchaId="CROPPED_..."
  ></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
```

```typescript
import {LeminCroppedCaptchaService} from "@leminnow/ng-lemin-cropped-captcha";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private leminCroppedCaptchaService: LeminCroppedCaptchaService) {
  }

  getCaptchaValues() {
    const values = this.leminCroppedCaptchaService.getCaptcha('...').getCaptchaValue()
  }
}
```

<br>

## <div id="documentation"></div> Documentation

### Click <a href="https://dashboard.leminnow.com/documentation/">here</a> to documentation for Lemin Cropped Captcha
### Click <a href="https://www.leminnow.com/developers">here</a> to developers guide

<br>

## <div id="api"></div> API

### Captcha Service Methods

|  Name                      | Return Type               | Parameter      |  Description     |
|----------------------------|---------------------------|----------------|  --------------- |
| `getCaptcha`               |  CaptchaInstance          |(CAPTCHA_KEY: Optional String) => | Returns the given CAPTCHA_KEY's captcha instance. If CAPTCHA_KEY is empty, it will return first captcha instance.|
| `getInstances`             |  CaptchaInstance{}        | (CAPTCHA_KEY: Optional String) => | Returns all the instances of captchas                    |
| `destroyAll`               |  void                     | () =>                |  Destroys all captchas on the page.                |
| `reloadAll`                |  void                     | () =>               | Reload all captchas on the page.                 |               |

<br>

### Captcha Component Methods

|  Name                      | Return Type               | Parameter       | Description           |
|----------------------------|---------------------------|------------------|----------------------|
| `getCaptchaValue`          |  {"answer": "answer","challenge_id": "challenge_id"}|   () =>| Returns the captcha value on the page for needed validation |
| `isReady`                  |  boolean                     | () =>               |  Returns the state of captcha                      |
| `reloadPuzzle`             |  void                     |  () =>               | Reloads puzzle, you may use it in fail scenarios.                       |
| `onLoad`                   |  void                     |  (callbackFunction = function(){}) => | Calls the function when the captcha loaded.                        |
| `loadPuzzleError`          |  void                     | (callbackFunction = function(){}) =>                 |    Calls the function when the captcha loaded.                    |
| `destroyCaptcha`           |  void                     | () =>                 |  Destroys the captcha on the page                      |
| `adjustSize`               |  void                     | () =>                 |                      |
| `execute`         | Promise<{"answer": "answer","challenge_id": "challenge_id"}> | () =>    |         | It initiates invisible captcha programmatically; it's only applicable for Invisible Captcha!
| `display`                  |  void                     | () =>                 |                      |
| `getToken`                 |  void                     | () =>                 |                      |
| `loadPuzzleImage`          |  void                     | () =>                 |                      |
| `setUserinfo`              |  void                     | () =>                 |                      |
| `stopRefreshing`           |  void                     | () =>                 |                      |