@regulaforensics/vp-frontend-face-components 7.1.1640-rc → 7.1.1651-rc

package/README.md

@@ -256,6 +256,109 @@ component.settings = {
 
 ```
 
+### CSS Parts
+To customize the appearance, use the part attribute and define the desired CSS properties. (Note: The specificity of the ::part styles is greater than that of the styles set via settings). Examples:
+
+```css
+
+/** general component overlay */
+face-liveness {
+    background-color: #e6e6e6;
+}
+
+/** web component container */
+face-liveness::part(wc-container) {
+    box-shadow: none;
+    border-radius: 0;
+}
+
+/** instruction screen */
+face-liveness::part(onboarding-screen-title) {
+    text-decoration: underline;
+}
+face-liveness::part(onboarding-screen-subtitle) {
+    text-decoration: underline;
+}
+face-liveness::part(onboarding-screen-start-button) {
+    background-color: #7c7c7c;
+}
+face-liveness::part(onboarding-screen-start-button):hover {
+    background-color: #bd7dff;
+}
+face-liveness::part(onboarding-screen-start-button) {
+    color: #000;
+}
+face-liveness::part(onboarding-screen-start-button):hover {
+    color: #000;
+}
+
+/** instruction screen icons */
+/** you can set any image from url */
+face-liveness::part(onboarding-screen-illumination) {
+    background: #000;
+}
+face-liveness::part(onboarding-screen-accessories) {
+    background: #000;
+}
+face-liveness::part(onboarding-screen-camera-level) {
+    background: #000;
+}
+
+/** camera mode svg's */
+face-liveness::part(camera-screen-sector-target) {
+    border-left-color: #000;
+}
+face-liveness::part(camera-screen-stroke-normal) {
+    stroke: #000;
+}
+face-liveness::part(camera-screen-sector-active) {
+    stroke: #000;
+}
+
+/** message plate */
+face-liveness::part(camera-screen-front-hint-label) {
+    background: #000;
+    color: yellow;
+}
+
+/** spinner */
+face-liveness::part(processing-screen-progress)::before {
+    border-top-color: #000;
+}
+/** success image */
+face-liveness::part(success-screen-image) {
+    background: #000;
+}
+
+/** retry screen */
+face-liveness::part(retry-screen-environment-text) {
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-environment-image) {
+    background: rgb(88, 82, 82);
+}
+face-liveness::part(retry-screen-person-text) {
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-person-image) {
+    background: rgb(88, 82, 82);
+}
+/** retry button */
+face-liveness::part(retry-screen-retry-button) {
+    background: rgb(88, 82, 82);
+}
+face-liveness::part(retry-screen-title-text) {
+    color: rgb(88, 82, 82);
+    text-decoration: underline;
+}
+face-liveness::part(retry-screen-subtitle-text) {
+    color: rgb(88, 82, 82);
+    text-decoration: underline;
+}
+```
+
+For more details about ::part() CSS pseudo-elements, see the article at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+
 
 ## Events
 
@@ -661,6 +764,10 @@ The list of labels used in the component:
 | **noAccessories**             | No accessories: glasses, mask, hat, etc.                                                            | `face-liveness`, `face-capture` |
 | **getReady**                  | Get ready                                                                                           | `face-liveness`, `face-capture` |
 | **removeOcclusion**           | Remove items covering your face                                                                     | `face-liveness`, `face-capture` |
+| **turnHeadUp**                | Turn head up a bit to look straight                                                                 | `face-liveness`, `face-capture` |
+| **turnHeadDown**              | Turn head down a bit to look straight                                                               | `face-liveness`, `face-capture` |
+| **turnHeadLeft**              | Turn head left a bit to look straight                                                               | `face-liveness`, `face-capture` |
+| **turnHeadRight**             | Turn head right a bit to look straight                                                              | `face-liveness`, `face-capture` |
 
 
 ## Examples

package/dist/index.d.ts

@@ -42,7 +42,26 @@ export declare interface DetailEvent<A, R> {
     data: CustomEventDataType<R> | null;
 }
 
-export declare type ErrorTypes = 'WASM_ERROR' | 'UNKNOWN_ERROR' | 'NOT_SUPPORTED' | 'CAMERA_UNKNOWN_ERROR' | 'CAMERA_PERMISSION_DENIED' | 'NO_CAMERA' | 'INCORRECT_CAMERA_ID' | 'CONNECTION_ERROR' | 'LANDSCAPE_MODE_RESTRICTED' | 'TIMEOUT_ERROR' | 'CHANGE_CAMERA' | 'DEVICE_ROTATE' | 'APP_INACTIVE' | 'HTTP_NOT_SUPPORTED';
+export declare const ErrorTypes: {
+    readonly WASM_ERROR: "WASM_ERROR";
+    readonly UNKNOWN_ERROR: "UNKNOWN_ERROR";
+    readonly NOT_SUPPORTED: "NOT_SUPPORTED";
+    readonly CAMERA_UNKNOWN_ERROR: "CAMERA_UNKNOWN_ERROR";
+    readonly CAMERA_PERMISSION_DENIED: "CAMERA_PERMISSION_DENIED";
+    readonly NO_CAMERA: "NO_CAMERA";
+    readonly INCORRECT_CAMERA_ID: "INCORRECT_CAMERA_ID";
+    readonly CONNECTION_ERROR: "CONNECTION_ERROR";
+    readonly LANDSCAPE_MODE_RESTRICTED: "LANDSCAPE_MODE_RESTRICTED";
+    readonly TIMEOUT_ERROR: "TIMEOUT_ERROR";
+    readonly CHANGE_CAMERA: "CHANGE_CAMERA";
+    readonly DEVICE_ROTATE: "DEVICE_ROTATE";
+    readonly APP_INACTIVE: "APP_INACTIVE";
+    readonly HTTP_NOT_SUPPORTED: "HTTP_NOT_SUPPORTED";
+    readonly WEBSERVICE_NOT_COMPATIBLE: "WEBSERVICE_NOT_COMPATIBLE";
+    readonly CANCELLED: "CANCELLED";
+};
+
+export declare type ErrorTypes = (typeof ErrorTypes)[keyof typeof ErrorTypes];
 
 export declare type FaceCaptureDetailType = Omit<DetailEvent<FaceEventActions, FaceDetectionResponseType>, 'transactionId'>;
 
@@ -90,21 +109,40 @@ export declare class FaceDetectionWebComponent extends HTMLElement {
 
 export declare type FaceDictionaries = Partial<Record<Locales, FaceTranslations>>;
 
-export declare type FaceEventActions = 'ELEMENT_VISIBLE' | 'PRESS_START_BUTTON' | 'PRESS_RETRY_BUTTON' | 'CLOSE' | 'PROCESS_FINISHED' | 'SERVICE_INITIALIZED' | 'RETRY_COUNTER_EXCEEDED';
+export declare const FaceEventActions: {
+    readonly ELEMENT_VISIBLE: "ELEMENT_VISIBLE";
+    readonly PRESS_START_BUTTON: "PRESS_START_BUTTON";
+    readonly PRESS_RETRY_BUTTON: "PRESS_RETRY_BUTTON";
+    readonly CLOSE: "CLOSE";
+    readonly PROCESS_FINISHED: "PROCESS_FINISHED";
+    readonly SERVICE_INITIALIZED: "SERVICE_INITIALIZED";
+    readonly RETRY_COUNTER_EXCEEDED: "RETRY_COUNTER_EXCEEDED";
+};
+
+export declare type FaceEventActions = (typeof FaceEventActions)[keyof typeof FaceEventActions];
 
 export declare type FaceLivenessDetailType = DetailEvent<FaceEventActions, FaceLivenessResponseType>;
 
+/** web component response */
 export declare type FaceLivenessResponseType = {
     images: Array<string>;
     code: number;
     metadata: Record<string, any>;
     estimatedAge: number | null;
     tag: string;
-    status: number;
+    status: FaceLivenessResultStatus;
     transactionId: string;
     type: number;
 };
 
+export declare const FaceLivenessResultStatus: {
+    readonly CONFIRMED: 0;
+    readonly NOT_CONFIRMED: 1;
+    readonly UNKNOWN: 2;
+};
+
+export declare type FaceLivenessResultStatus = (typeof FaceLivenessResultStatus)[keyof typeof FaceLivenessResultStatus];
+
 export declare interface FaceLivenessSettings extends Omit<FaceDetectionSettings, 'holdStillDuration' | 'timeoutInterval' | 'showFaceAnimation'> {
     url?: string;
     deviceOrientation?: boolean;
@@ -117,10 +155,12 @@ export declare interface FaceLivenessSettings extends Omit<FaceDetectionSettings
     livenessType?: FaceLivenessType;
 }
 
-export declare enum FaceLivenessType {
-    ACTIVE = 0,
-    PASSIVE = 1
-}
+export declare const FaceLivenessType: {
+    readonly ACTIVE: 0;
+    readonly PASSIVE: 1;
+};
+
+export declare type FaceLivenessType = (typeof FaceLivenessType)[keyof typeof FaceLivenessType];
 
 export declare class FaceLivenessWebComponent extends HTMLElement {
     private _root;
@@ -205,37 +245,63 @@ export declare interface IFaceLiveness extends IFaceDetection {
 
 export declare type Locales = 'ru' | 'en' | 'de' | 'pl' | 'it' | 'hu' | 'zh' | 'sk' | 'uk' | 'fr' | 'es' | 'pt' | 'ar' | 'nl' | 'id' | 'vi' | 'ko' | 'ms' | 'ro' | 'el' | 'tr' | 'ja' | 'cs' | 'th' | 'hi' | 'bn' | 'he' | 'fi' | 'sv' | 'da' | 'hr' | 'no' | string;
 
-export declare enum RecordingProcess {
-    ASYNCHRONOUS_UPLOAD = 0,
-    SYNCHRONOUS_UPLOAD = 1,
-    NOT_UPLOAD = 2
-}
+export declare const RecordingProcess: {
+    readonly ASYNCHRONOUS_UPLOAD: 0;
+    readonly SYNCHRONOUS_UPLOAD: 1;
+    readonly NOT_UPLOAD: 2;
+};
 
-declare enum ResponseCode {
-    EMPTY = -1,
-    ERROR = 0,
-    OK = 1,
-    TIMEOUT = 2
-}
+export declare type RecordingProcess = (typeof RecordingProcess)[keyof typeof RecordingProcess];
+
+export declare const ResponseCode: {
+    readonly EMPTY: -1;
+    readonly ERROR: 0;
+    readonly OK: 1;
+};
+
+export declare type ResponseCode = (typeof ResponseCode)[keyof typeof ResponseCode];
 
 export { }
 
 
+
 declare global {
+    const FACE_WASM_S3_PATH: string;
+
+    namespace React.JSX {
+        interface IntrinsicElements {
+            'face-liveness': React.DetailedHTMLProps<
+                IFaceLiveness & React.HTMLAttributes<FaceLivenessWebComponent>,
+                FaceLivenessWebComponent
+            >;
+            'face-capture': React.DetailedHTMLProps<
+                IFaceDetection & React.HTMLAttributes<FaceDetectionWebComponent>,
+                FaceDetectionWebComponent
+            >;
+            'fullscreen-container': React.DetailedHTMLProps<
+                React.HTMLAttributes<FullScreenContainer>,
+                FullScreenContainer
+            >;
+        }
+    }
+
     interface HTMLElementEventMap {
         'face-liveness': CustomEvent<FaceLivenessDetailType>;
         'face-capture': CustomEvent<FaceCaptureDetailType>;
     }
 }
 
-
-declare namespace v3 {
-    var DNS: string;
-    var URL: string;
+declare global {
+    const VERSION: string;
+    const ENV: string;
 }
 
+declare module 'react' {
+    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+        part?: string;
+    }
 
-declare namespace v5 {
-    var DNS: string;
-    var URL: string;
+    interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+        part?: string;
+    }
 }