@unissey-web/sdk-angular 3.8.0-rc → 3.8.2

package/README.md

@@ -0,0 +1,311 @@
+# `@unissey-web/sdk-angular__next`
+
+> Unissey's Angular Library
+
+1. [Installation](#1-installation)
+2. [Getting Started](#2-getting-started)
+3. [Reference](#3-reference)
+4. [About](#4-about)
+
+# 1. Installation
+
+## Get a personnal access token
+
+First generate an access token by following [this link](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line). Make sure to include at least the `repo` && `read:packages` permission to the access token.
+
+Then, to get access permissions, you will need to contact someone from the Unissey organisation with your github account name.
+
+## Authenticate to the registry
+
+```shell
+# set your repository token environnement variable
+export NPM_TOKEN=repositoryToken
+```
+
+Then reference the new registry in a `.npmrc` in your project directory
+
+```shell
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+@unissey:registry=https://npm.pkg.github.com
+```
+
+.
+
+## Download the package
+
+```shell
+npm install @unissey-web/sdk-angular__next
+```
+
+# 2. Getting Started
+
+## Required configuration
+
+This library requires polyfills to work correctly. At the moment this library only needs polyfills for async functions.
+We recommend to add one of the following package in your application dependencies:
+
+- `babel-polyfill`
+- `regenerator-runtime`
+
+```shell
+npm install babel-polyfill
+```
+
+or
+
+```shell
+npm install regenerator-runtime
+```
+
+And then import one the dependency in your polyfill file:
+
+```typescript
+import "babel-polyfill";
+```
+
+or
+
+```typescript
+import "regenerator-runtime/runtime";
+```
+
+After that, all you need is to register the UnisseySdkModule in your application module.
+
+```typescript
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+
+import { UnisseySdkModule } from "@unissey-web/sdk-angular__next"; // Unissey's SDK module
+
+@NgModule({
+  declarations: [AppComponent],
+  // We need to register the Unissey SDK module in the Angular module
+  imports: [BrowserModule, AppRoutingModule, UnisseySdkModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+# 3. Reference
+
+These is the list of all components present in the public API:
+
+## Liveness
+
+Component responsible to record a selfie
+
+```html
+<unissey-liveness></unissey-liveness>
+```
+
+### Reference
+
+| Property type | Name    | Default value                                    | Type                                 | Description                                                           |
+| ------------- | ------- | ------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------- |
+| `Input`       | strings | [see LivenessStrings defaults](#livenessstrings) | [LivenessStrings](#livenessstrings)  | Text to be displayed for the instructions and actions                 |
+| `Output`      | record  | `N/A`                                            | (event: [Capture](#capture)) => void | Callback triggered when the liveness selfie was successfully recorded |
+
+### Customizations
+
+You can override the default instructions and add custom actions next to the record button.
+To do so, you must add a child element, within the `unissey-liveness` tag, with the attribute `slot="custom-instructions"`, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+</unissey-liveness>
+```
+
+You can also add custom actions near the record button, which could be usefull to exit the liveness process.
+Just like for the custom instructions, you need to a child element with the attribute `slot="instructions-actions"`, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-liveness>
+```
+
+You can also combine both custom instructions & actions, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-liveness>
+```
+
+## Reference Capture
+
+Component responsible to take either a photo or a short video of a reference document (e.g. ID card, Driving license...)
+
+```html
+<unissey-reference-capture></unissey-reference-capture>
+```
+
+### Reference
+
+| Property type | Name      | Default value                                                    | Type                                                               | Description                                                     |
+| ------------- | --------- | ---------------------------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------- |
+| `Input`       | strings   | [see ReferenceCaptureStrings defaults](#referenceCaptureStrings) | [ReferenceCaptureStrings](#referencecapturestrings)                | Text to be displayed for the instructions and actions           |
+| `Output`      | reference | `N/A`                                                            | (event: [ReferenceCaptureResult](#referencecaptureresult)) => void | Callback triggered when the reference was successfully recorded |
+
+### Customizations
+
+You can override the default instructions and add custom actions next to the record button.
+To do so, you must add a child element, within the `unissey-liveness` tag, with the attribute `slot="custom-instructions"`, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+</unissey-reference-capture>
+```
+
+You can also add custom actions near the record button, which could be usefull to exit the liveness process.
+Just like for the custom instructions, you need to a child element with the attribute `slot="instructions-actions"`, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-reference-capture>
+```
+
+You can also combine both custom instructions & actions, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-reference-capture>
+```
+
+## Full Capture
+
+Component responsible to take both a liveness selfie & a reference media
+
+```html
+<unissey-full-capture></unissey-full-capture>
+```
+
+### Reference
+
+| Property type | Name      | Default value                                          | Type                                                               | Description                                                           |
+| ------------- | --------- | ------------------------------------------------------ | ------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| `Input`       | strings   | [see FullCaptureStrings defaults](#fullcapturestrings) | [FullCaptureStrings](#fullcapturestrings)                          | Text to be displayed for the instructions and actions                 |
+| `Output`      | reference | `N/A`                                                  | (event: [ReferenceCaptureResult](#referencecaptureresult)) => void | Callback triggered when the reference was successfully recorded       |
+| `Output`      | target    | `N/A`                                                  | (event: [Capture](#capture)) => void                               | Callback triggered when the liveness selfie was successfully recorded |
+
+### Example:
+
+```html
+<unissey-full-capture (reference)="onReference($event)" (target)="onLiveness($event)"></unissey-full-capture>
+```
+
+## Capture
+
+```typescript
+type Capture = {
+  video: Blob;
+  metadata: unknown;
+};
+```
+
+## LivenessStrings
+
+```typescript
+type LivenessStrings = {
+  back: string;
+  directionSubtitle: string;
+  recordBtnLabel: string;
+  title: string;
+  recordSubtitle: string;
+};
+```
+
+## ReferenceCaptureStrings
+
+```typescript
+type ReferenceCaptureStrings = {
+  back: string;
+  title: string;
+  captureTitle: string;
+  editorTitle: string;
+  directionSubtitle: string;
+  pictureRecordSubtitle: string;
+  videoRecordSubtitle: string;
+  uploadBtn: string;
+  pictureBtn: string;
+  recordVidBtn: string;
+  retryPictureCaptureBtn: string;
+  retryVideoCaptureBtn: string;
+  replayValidation: string;
+  editor: {
+    validate: string;
+  };
+  directions: {
+    document: string;
+    face: string;
+    light: string;
+  };
+  videoRecorder: {
+    capture: string;
+    retry: string;
+    errors: {
+      noFace: string;
+    };
+    hints: {
+      up: string;
+      down: string;
+      perfect: string;
+      right: string;
+      left: string;
+      closer: string;
+      record: string;
+      nil: string;
+    };
+  };
+  pictureRecorder: {
+    validate: string;
+  };
+};
+```
+
+## FullCaptureStrings
+
+```typescript
+type FullCaptureStrings = {
+  liveness: LivenessStrings;
+  reference: ReferenceCaptureStrings;
+};
+```
+
+## ReferenceCaptureResult
+
+```typescript
+type ReferenceCaptureResult = { kind: "video"; capture: Capture } | { kind: "picture"; picture: Blob };
+```
+
+# 4. About
+
+## Versions
+
+| Version | Date | Description |
+| ------- | ---- | ----------- |

package/dist/unissey-sdk/README.md

@@ -0,0 +1,311 @@
+# `@unissey-web/sdk-angular__next`
+
+> Unissey's Angular Library
+
+1. [Installation](#1-installation)
+2. [Getting Started](#2-getting-started)
+3. [Reference](#3-reference)
+4. [About](#4-about)
+
+# 1. Installation
+
+## Get a personnal access token
+
+First generate an access token by following [this link](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line). Make sure to include at least the `repo` && `read:packages` permission to the access token.
+
+Then, to get access permissions, you will need to contact someone from the Unissey organisation with your github account name.
+
+## Authenticate to the registry
+
+```shell
+# set your repository token environnement variable
+export NPM_TOKEN=repositoryToken
+```
+
+Then reference the new registry in a `.npmrc` in your project directory
+
+```shell
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+@unissey:registry=https://npm.pkg.github.com
+```
+
+.
+
+## Download the package
+
+```shell
+npm install @unissey-web/sdk-angular__next
+```
+
+# 2. Getting Started
+
+## Required configuration
+
+This library requires polyfills to work correctly. At the moment this library only needs polyfills for async functions.
+We recommend to add one of the following package in your application dependencies:
+
+- `babel-polyfill`
+- `regenerator-runtime`
+
+```shell
+npm install babel-polyfill
+```
+
+or
+
+```shell
+npm install regenerator-runtime
+```
+
+And then import one the dependency in your polyfill file:
+
+```typescript
+import "babel-polyfill";
+```
+
+or
+
+```typescript
+import "regenerator-runtime/runtime";
+```
+
+After that, all you need is to register the UnisseySdkModule in your application module.
+
+```typescript
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+
+import { UnisseySdkModule } from "@unissey-web/sdk-angular__next"; // Unissey's SDK module
+
+@NgModule({
+  declarations: [AppComponent],
+  // We need to register the Unissey SDK module in the Angular module
+  imports: [BrowserModule, AppRoutingModule, UnisseySdkModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+# 3. Reference
+
+These is the list of all components present in the public API:
+
+## Liveness
+
+Component responsible to record a selfie
+
+```html
+<unissey-liveness></unissey-liveness>
+```
+
+### Reference
+
+| Property type | Name    | Default value                                    | Type                                 | Description                                                           |
+| ------------- | ------- | ------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------- |
+| `Input`       | strings | [see LivenessStrings defaults](#livenessstrings) | [LivenessStrings](#livenessstrings)  | Text to be displayed for the instructions and actions                 |
+| `Output`      | record  | `N/A`                                            | (event: [Capture](#capture)) => void | Callback triggered when the liveness selfie was successfully recorded |
+
+### Customizations
+
+You can override the default instructions and add custom actions next to the record button.
+To do so, you must add a child element, within the `unissey-liveness` tag, with the attribute `slot="custom-instructions"`, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+</unissey-liveness>
+```
+
+You can also add custom actions near the record button, which could be usefull to exit the liveness process.
+Just like for the custom instructions, you need to a child element with the attribute `slot="instructions-actions"`, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-liveness>
+```
+
+You can also combine both custom instructions & actions, as the example below:
+
+```html
+<unissey-liveness (record)="onRecord($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-liveness>
+```
+
+## Reference Capture
+
+Component responsible to take either a photo or a short video of a reference document (e.g. ID card, Driving license...)
+
+```html
+<unissey-reference-capture></unissey-reference-capture>
+```
+
+### Reference
+
+| Property type | Name      | Default value                                                    | Type                                                               | Description                                                     |
+| ------------- | --------- | ---------------------------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------- |
+| `Input`       | strings   | [see ReferenceCaptureStrings defaults](#referenceCaptureStrings) | [ReferenceCaptureStrings](#referencecapturestrings)                | Text to be displayed for the instructions and actions           |
+| `Output`      | reference | `N/A`                                                            | (event: [ReferenceCaptureResult](#referencecaptureresult)) => void | Callback triggered when the reference was successfully recorded |
+
+### Customizations
+
+You can override the default instructions and add custom actions next to the record button.
+To do so, you must add a child element, within the `unissey-liveness` tag, with the attribute `slot="custom-instructions"`, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+</unissey-reference-capture>
+```
+
+You can also add custom actions near the record button, which could be usefull to exit the liveness process.
+Just like for the custom instructions, you need to a child element with the attribute `slot="instructions-actions"`, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-reference-capture>
+```
+
+You can also combine both custom instructions & actions, as the example below:
+
+```html
+<unissey-reference-capture reference="onReference($event)">
+  <div slot="custom-instructions">
+    <p>Time for a selfie!</p>
+  </div>
+  <div slot="instructions-actions">
+    <button (click)="goBackToHome()">Back</button>
+  </div>
+</unissey-reference-capture>
+```
+
+## Full Capture
+
+Component responsible to take both a liveness selfie & a reference media
+
+```html
+<unissey-full-capture></unissey-full-capture>
+```
+
+### Reference
+
+| Property type | Name      | Default value                                          | Type                                                               | Description                                                           |
+| ------------- | --------- | ------------------------------------------------------ | ------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| `Input`       | strings   | [see FullCaptureStrings defaults](#fullcapturestrings) | [FullCaptureStrings](#fullcapturestrings)                          | Text to be displayed for the instructions and actions                 |
+| `Output`      | reference | `N/A`                                                  | (event: [ReferenceCaptureResult](#referencecaptureresult)) => void | Callback triggered when the reference was successfully recorded       |
+| `Output`      | target    | `N/A`                                                  | (event: [Capture](#capture)) => void                               | Callback triggered when the liveness selfie was successfully recorded |
+
+### Example:
+
+```html
+<unissey-full-capture (reference)="onReference($event)" (target)="onLiveness($event)"></unissey-full-capture>
+```
+
+## Capture
+
+```typescript
+type Capture = {
+  video: Blob;
+  metadata: unknown;
+};
+```
+
+## LivenessStrings
+
+```typescript
+type LivenessStrings = {
+  back: string;
+  directionSubtitle: string;
+  recordBtnLabel: string;
+  title: string;
+  recordSubtitle: string;
+};
+```
+
+## ReferenceCaptureStrings
+
+```typescript
+type ReferenceCaptureStrings = {
+  back: string;
+  title: string;
+  captureTitle: string;
+  editorTitle: string;
+  directionSubtitle: string;
+  pictureRecordSubtitle: string;
+  videoRecordSubtitle: string;
+  uploadBtn: string;
+  pictureBtn: string;
+  recordVidBtn: string;
+  retryPictureCaptureBtn: string;
+  retryVideoCaptureBtn: string;
+  replayValidation: string;
+  editor: {
+    validate: string;
+  };
+  directions: {
+    document: string;
+    face: string;
+    light: string;
+  };
+  videoRecorder: {
+    capture: string;
+    retry: string;
+    errors: {
+      noFace: string;
+    };
+    hints: {
+      up: string;
+      down: string;
+      perfect: string;
+      right: string;
+      left: string;
+      closer: string;
+      record: string;
+      nil: string;
+    };
+  };
+  pictureRecorder: {
+    validate: string;
+  };
+};
+```
+
+## FullCaptureStrings
+
+```typescript
+type FullCaptureStrings = {
+  liveness: LivenessStrings;
+  reference: ReferenceCaptureStrings;
+};
+```
+
+## ReferenceCaptureResult
+
+```typescript
+type ReferenceCaptureResult = { kind: "video"; capture: Capture } | { kind: "picture"; picture: Blob };
+```
+
+# 4. About
+
+## Versions
+
+| Version | Date | Description |
+| ------- | ---- | ----------- |

package/dist/unissey-sdk/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@unissey-web/sdk-angular",
+  "description": "Unissey's Angular SDK",
+  "version": "3.8.2",
+  "peerDependencies": {
+    "@angular/common": "^12.1.1 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
+    "@angular/core": "^12.1.1 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0",
+    "@unissey-web/web-components": "3.8.2"
+  },
+  "main": "bundles/unissey-web-sdk-angular.umd.js",
+  "module": "fesm2015/unissey-web-sdk-angular.js",
+  "es2015": "fesm2015/unissey-web-sdk-angular.js",
+  "esm2015": "esm2015/unissey-web-sdk-angular.js",
+  "fesm2015": "fesm2015/unissey-web-sdk-angular.js",
+  "typings": "unissey-web-sdk-angular.d.ts",
+  "sideEffects": false
+}

package/package.json

@@ -1,20 +1,76 @@
 {
   "name": "@unissey-web/sdk-angular",
+  "version": "3.8.2",
   "description": "Unissey's Angular SDK",
-  "version": "3.8.0-rc",
-  "peerDependencies": {
-    "@angular/common": "^12.1.1 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-    "@angular/core": "^12.1.1 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "rimraf storybook-static && npm run docs:json && start-storybook -p 6009 --ci",
+    "build": "ng build",
+    "build:pkgs": "rimraf dist && npm run build -- --configuration=production",
+    "postbuild:pkgs": "npm run update-wc-version",
+    "prepublishOnly": "node ./lifecycles/prepublishOnly.js",
+    "build:pkg": "rimraf dist && npm run build",
+    "test": "ng test --no-watch --no-progress --browsers ChromeHeadless",
+    "lint": "ng lint",
+    "docs:html": "compodoc -p ./tsconfig.json -d docs",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "rimraf storybook-static && npm run docs:json && start-storybook -p 6009 --ci",
+    "build:storybook": "npm run docs:json && build-storybook",
+    "update-wc-version": "node update-web-component.mjs"
   },
+  "publishConfig": {
+    "directory": "dist/unissey-sdk"
+  },
+  "license": "ISC",
+  "private": false,
   "dependencies": {
+    "@angular/animations": "~12.2.17",
+    "@angular/common": "~12.2.17",
+    "@angular/compiler": "~12.2.17",
+    "@angular/core": "~12.2.17",
+    "@angular/forms": "~12.2.17",
+    "@angular/platform-browser": "~12.2.17",
+    "@angular/platform-browser-dynamic": "~12.2.17",
+    "@angular/router": "~12.2.17",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "@unissey-web/web-components": "3.8.0-rc"
+    "zone.js": "~0.11.3",
+    "@unissey-web/web-components": "file:packages/web-components"
   },
-  "main": "bundles/unissey-web-sdk-angular.umd.js",
-  "module": "fesm2015/unissey-web-sdk-angular.js",
-  "es2015": "fesm2015/unissey-web-sdk-angular.js",
-  "esm2015": "esm2015/unissey-web-sdk-angular.js",
-  "fesm2015": "fesm2015/unissey-web-sdk-angular.js",
-  "typings": "unissey-web-sdk-angular.d.ts",
-  "sideEffects": false
-}
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~12.2.18",
+    "@angular/cli": "~12.2.18",
+    "@angular/compiler-cli": "~12.2.17",
+    "@babel/core": "^7.17.0",
+    "@compodoc/compodoc": "^1.1.18",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-cssresources": "^6.2.9",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/angular": "^6.4.18",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "babel-loader": "^8.2.3",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.8.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
+    "ng-packagr": "^12.2.7",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.3.5"
+  }
+}