@biopassid/face-sdk - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

constants/errors.d.ts

@@ -5,4 +5,5 @@ export declare const permissionsDeniedError = "generic/permissions_denied";
 export declare const failedToExtractFace = "generic/failed_to_extract_face_template";
+export declare const failedToExecuteControllerCommand = "generic/not_permitted";
 export declare const enrollInvalidParamsError = "enroll/face_or_fingers_needed";
 export declare const enrollInvalidCustomId = "enroll/invalid_custom_id";
 export declare const enrollCustomIdAlreadyExists = "enroll/customid_already_exists";

elements/back_button.d.ts

@@ -5,3 +5,3 @@ import { ButtonStyle } from "../types";
     active: boolean;
-    style: ButtonStyle;
+    style?: ButtonStyle;
 }
@@ -8,0 +8,0 @@ interface BackButtonElement {

elements/button.d.ts

 import { ButtonStyle } from "../types";
 interface ButtonParams extends ButtonStyle {
-    icon: string;
     onPressed?: () => void;
     horizontalMargin?: string;
+    iconElement: string | HTMLElement[];
 }
 export default function button(params: ButtonParams): HTMLElement;
 export {};

elements/camera.d.ts

@@ -9,4 +9,5 @@ export interface InitVideoParams {
     dispose: () => void;
+    checkIfIsInitialized: () => boolean;
 }
 export default function camera(): CameraElement;
 export {};

elements/confirmation_buttons.d.ts

@@ -6,4 +6,4 @@ import { ButtonStyle } from "../types";
     active: boolean;
-    cancelButtonStyle: ButtonStyle;
-    confirmButtonStyle: ButtonStyle;
+    cancelButtonStyle?: ButtonStyle;
+    confirmButtonStyle?: ButtonStyle;
 }
@@ -10,0 +10,0 @@ export interface ConfirmationButtonsElement {

elements/loading.d.ts

 import { LoadingStyle } from "../types";
 interface LoadingParams {
     active: boolean;
-    style: LoadingStyle;
+    style?: LoadingStyle;
 }
@@ -6,0 +6,0 @@ interface LoadingElement {

elements/main_container.d.ts

@@ -1,2 +0,2 @@
-import { CameraPresets, Options, Picture, Styles } from '../types';
+import { CameraController, CameraPresets, Options, Picture, Styles } from '../types';
 declare type MainContainerParams = Styles & Options & CameraPresets & {
@@ -6,2 +6,3 @@ request: (picture: Picture) => Promise<void>;
     onFinish: () => void;
+    controller?: CameraController;
 };
@@ -8,0 +9,0 @@ interface MainContainerElement {

elements/mask.d.ts

@@ -5,3 +5,3 @@ import { MaskStyle } from "../types";
 }
-export default function mask(style: MaskStyle): MaskElement;
+export default function mask(style?: MaskStyle): MaskElement;
 export {};

elements/take_picture_button.d.ts

@@ -5,3 +5,3 @@ import { ButtonStyle } from '../types';
     active: boolean;
-    style: ButtonStyle;
+    style?: ButtonStyle;
 }
@@ -8,0 +8,0 @@ interface TakePictureButtonElement {

esm/index.js

@@ -39,3 +39,3 @@ var __create = Object.create;
     var setDomDocument = (document2) => domDocument2 = document2;
-    var r6 = (data) => {
+    var r7 = (data) => {
       if (!domDocument2) {
@@ -79,3 +79,3 @@ throw "\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";
     };
-    var r_default2 = r6;
+    var r_default2 = r7;
   }
@@ -88,2 +88,3 @@ });
 var operationCanceledError = "generic/operation_canceled";
+var failedToExecuteControllerCommand = "generic/not_permitted";
 var enrollInvalidParamsError = "enroll/face_or_fingers_needed";
@@ -183,3 +184,3 @@ var enrollInvalidCustomId = "enroll/invalid_custom_id";
 function button(params) {
-  const { size, backgroundColor, iconSize, icon, onPressed, horizontalMargin = "20px" } = params;
+  const { size, backgroundColor, iconSize, iconElement, onPressed, horizontalMargin = "20px" } = params;
   return r_default({
@@ -196,3 +197,4 @@ tag: "button",
       justifyContent: "center",
-      margin: `0 ${horizontalMargin}`
+      margin: `0 ${horizontalMargin}`,
+      border: "none"
     },
@@ -206,3 +208,3 @@ onClick: onPressed,
         },
-        children: icon
+        children: iconElement
       })
@@ -215,2 +217,3 @@ ]
 function camera() {
+  let initialized = false;
   const video = r_default({
@@ -244,2 +247,3 @@ tag: "video",
     video.play();
+    initialized = true;
   }
@@ -255,2 +259,3 @@ async function dispose() {
     video.srcObject = null;
+    initialized = false;
   }
@@ -262,3 +267,4 @@ const cameraElement = {
     initCamera,
-    dispose
+    dispose,
+    checkIfIsInitialized: () => initialized
   };
@@ -318,14 +324,14 @@ return cameraElement;
 function mask(style) {
-  const {
-    backgroundColor,
-    backgroundOpacity,
-    frameColor,
-    type,
-    frameThickness
-  } = style;
+  const maskStyle = {
+    backgroundColor: style?.backgroundColor ?? "black",
+    backgroundOpacity: style?.backgroundOpacity ?? 0.6,
+    frameColor: style?.frameColor ?? "white",
+    frameThickness: style?.frameThickness ?? 3,
+    type: style?.type ?? "face"
+  };
   function renderMask() {
-    if (type == "face") {
+    if (maskStyle.type == "face") {
       return {
-        mask: landscapeFaceMask({ color: backgroundColor, opacity: backgroundOpacity }),
-        frame: landscapeFaceMaskFrame({ color: frameColor, thickness: frameThickness })
+        mask: landscapeFaceMask({ color: maskStyle.backgroundColor, opacity: maskStyle.backgroundOpacity }),
+        frame: landscapeFaceMaskFrame({ color: maskStyle.frameColor, thickness: maskStyle.frameThickness })
       };
@@ -373,2 +379,15 @@ }
 
+// src/functions/camera_controller.ts
+function notPermitted() {
+  throw failedToExecuteControllerCommand;
+}
+function cameraController() {
+  return {
+    takePicture: notPermitted,
+    confirmPicture: notPermitted,
+    rejectPicture: notPermitted,
+    cancel: notPermitted
+  };
+}
+
 // src/elements/main_container.ts
@@ -380,40 +399,9 @@ function mainContainer(data) {
     onFinish,
-    captureButtonStyle = {
-      backgroundColor: "white",
-      iconColor: "black",
-      iconSize: "30px",
-      size: "50px"
-    },
-    cancelButtonStyle = {
-      backgroundColor: "#E84141",
-      iconColor: "white",
-      iconSize: "30px",
-      size: "50px"
-    },
-    confirmButtonStyle = {
-      backgroundColor: "white",
-      iconColor: "black",
-      iconSize: "30px",
-      size: "50px"
-    },
-    loadingStyle = {
-      backgroundColor: "white",
-      dotsColor: "black",
-      dotsSize: "5px",
-      dotsSpacing: "3px",
-      size: "50px"
-    },
-    maskStyle = {
-      type: "face",
-      backgroundColor: "black",
-      backgroundOpacity: 0.6,
-      frameColor: "white",
-      frameThickness: 3
-    },
-    backButtonStyle = {
-      backgroundColor: "transparent",
-      iconColor: "white",
-      iconSize: "30px",
-      size: "50px"
-    },
+    controller,
+    captureButtonStyle,
+    cancelButtonStyle,
+    confirmButtonStyle,
+    loadingStyle,
+    maskStyle,
+    backButtonStyle,
     showMask = true,
@@ -423,6 +411,8 @@ showBackButton = true,
     height = "100%",
+    showConfirmationButtons = true,
+    showLoading = true,
+    showTakePictureButton = true,
     aspectRatio = 16 / 9,
     preferredResolution = 480
   } = data;
-  console.log(aspectRatio, preferredResolution);
   let picture = null;
@@ -451,6 +441,14 @@ const cameraElement = camera();
   function takePicture() {
-    picture = canvasElement.takePicture(cameraElement.element);
-    picturePreviewElement.image = picture.base64;
-    takePictureButtonElement.active = false;
-    confirmationButtonsElement.active = true;
+    const initialized = cameraElement.checkIfIsInitialized();
+    if (initialized) {
+      picture = canvasElement.takePicture(cameraElement.element);
+      picturePreviewElement.image = picture.base64;
+      takePictureButtonElement.active = false;
+      confirmationButtonsElement.active = true;
+      if (controller) {
+        controller.confirmPicture = confirmPicture;
+        controller.rejectPicture = cancelPicture;
+        controller.takePicture = notPermitted;
+      }
+    }
   }
@@ -460,2 +458,8 @@ async function confirmPicture() {
     loadingElement.active = true;
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = notPermitted;
+      controller.cancel = notPermitted;
+    }
     try {
@@ -475,5 +479,9 @@ await request(picture);
     takePictureButtonElement.active = true;
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = takePicture;
+    }
   }
   async function initCamera() {
-    console.log(aspectRatio, preferredResolution);
     await cameraElement.initCamera({
@@ -487,2 +495,8 @@ aspectRatio,
   function cancel() {
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = notPermitted;
+      controller.cancel = notPermitted;
+    }
     picture = null;
@@ -504,8 +518,12 @@ cameraElement.dispose();
       picturePreviewElement.element,
-      takePictureButtonElement.element,
-      confirmationButtonsElement.element,
-      loadingElement.element,
+      showTakePictureButton ? takePictureButtonElement.element : r_default({ tag: "div" }),
+      showConfirmationButtons ? confirmationButtonsElement.element : r_default({ tag: "div" }),
+      showLoading ? loadingElement.element : r_default({ tag: "div" }),
       showBackButton ? backButtonElement.element : r_default({ tag: "div" })
     ]
   });
+  if (controller) {
+    controller.cancel = cancel;
+    controller.takePicture = takePicture;
+  }
   const mainContainerElement = {
@@ -582,5 +600,5 @@ get element() {
 // src/elements/take_picture_button.ts
-var import_r2 = __toESM(require_r());
+var import_r3 = __toESM(require_r());
 
-// src/icons/takePictureIcon.ts
+// src/icons/take_picture_icon.ts
 function takePictureIcon(color) {
@@ -596,3 +614,3 @@ const takePicture = `
 
-// src/icons/checkIcon.ts
+// src/icons/check_icon.ts
 function checkIcon(color) {
@@ -617,3 +635,3 @@ const check = `
 
-// src/icons/backIcon.ts
+// src/icons/back_icon.ts
 function backIcon(color) {
@@ -628,6 +646,28 @@ const check = `
 
+// src/icons/image_icon.ts
+var import_r2 = __toESM(require_r());
+function imageIcon(icon, size) {
+  return (0, import_r2.default)({
+    tag: "img",
+    attributes: {
+      src: icon
+    },
+    style: {
+      width: size
+    }
+  });
+}
+
 // src/elements/take_picture_button.ts
 function takePictureButton(params) {
   const { onClick, active, style } = params;
-  const el = (0, import_r2.default)({
+  const takePictureButtonStyles = {
+    backgroundColor: style?.backgroundColor ?? "white",
+    iconColor: style?.iconColor ?? "black",
+    iconSize: style?.iconSize ?? "30px",
+    size: style?.size ?? "50px",
+    icon: style?.icon ?? ""
+  };
+  console.log(takePictureButtonStyles);
+  const el = (0, import_r3.default)({
     tag: "div",
@@ -648,7 +688,7 @@ style: {
       button({
-        backgroundColor: style.backgroundColor,
-        size: style.size,
-        iconColor: style.iconColor,
-        iconSize: style.iconSize,
-        icon: takePictureIcon(style.iconColor),
+        backgroundColor: takePictureButtonStyles.backgroundColor,
+        size: takePictureButtonStyles.size,
+        iconColor: takePictureButtonStyles.iconColor,
+        iconSize: takePictureButtonStyles.iconSize,
+        iconElement: takePictureButtonStyles.icon.length > 0 ? [imageIcon(takePictureButtonStyles.icon, takePictureButtonStyles.iconSize)] : takePictureIcon(takePictureButtonStyles.iconColor),
         onPressed: onClick
@@ -689,7 +729,14 @@ })
 // src/elements/loading.ts
-var import_r3 = __toESM(require_r());
+var import_r4 = __toESM(require_r());
 function loading(params) {
   const { active, style } = params;
+  const loadingStyle = {
+    backgroundColor: style?.backgroundColor ?? "white",
+    dotsColor: style?.dotsColor ?? "black",
+    dotsSize: style?.dotsSize ?? "5px",
+    dotsSpacing: style?.dotsSpacing ?? "3px",
+    size: style?.size ?? "50px"
+  };
   function dot(isLast) {
-    return (0, import_r3.default)({
+    return (0, import_r4.default)({
       tag: "div",
@@ -700,7 +747,7 @@ attributes: {
       style: {
-        width: style.dotsSize,
-        height: style.dotsSize,
+        width: loadingStyle.dotsSize,
+        height: loadingStyle.dotsSize,
         borderRadius: "9999px",
-        background: style.dotsColor,
-        marginRight: isLast ? void 0 : style.dotsSpacing,
+        background: loadingStyle.dotsColor,
+        marginRight: isLast ? void 0 : loadingStyle.dotsSpacing,
         opacity: ".5"
@@ -710,3 +757,3 @@ }
   }
-  const el = (0, import_r3.default)({
+  const el = (0, import_r4.default)({
     tag: "div",
@@ -726,8 +773,8 @@ style: {
     children: [
-      (0, import_r3.default)({
+      (0, import_r4.default)({
         tag: "div",
         style: {
-          width: style.size,
-          height: style.size,
-          background: style.backgroundColor,
+          width: loadingStyle.size,
+          height: loadingStyle.size,
+          background: loadingStyle.backgroundColor,
           borderRadius: "9999px",
@@ -803,6 +850,20 @@ cursor: "pointer",
 // src/elements/confirmation_buttons.ts
-var import_r4 = __toESM(require_r());
+var import_r5 = __toESM(require_r());
 function confirmationButtons(params) {
   const { onFinish, onCancel, active, cancelButtonStyle, confirmButtonStyle } = params;
-  const el = (0, import_r4.default)({
+  const cancelButtonDefaultStyles = {
+    backgroundColor: cancelButtonStyle?.backgroundColor ?? "#E84141",
+    iconColor: cancelButtonStyle?.iconColor ?? "white",
+    iconSize: cancelButtonStyle?.iconSize ?? "30px",
+    size: cancelButtonStyle?.size ?? "50px",
+    icon: cancelButtonStyle?.icon ?? ""
+  };
+  const confirmButtonDefaultStyle = {
+    backgroundColor: confirmButtonStyle?.backgroundColor ?? "white",
+    iconColor: confirmButtonStyle?.iconColor ?? "black",
+    iconSize: confirmButtonStyle?.iconSize ?? "30px",
+    size: confirmButtonStyle?.size ?? "50px",
+    icon: confirmButtonStyle?.icon ?? ""
+  };
+  const el = (0, import_r5.default)({
     tag: "div",
@@ -823,15 +884,15 @@ style: {
       button({
-        backgroundColor: cancelButtonStyle.backgroundColor,
-        size: cancelButtonStyle.size,
-        iconColor: cancelButtonStyle.iconColor,
-        iconSize: cancelButtonStyle.iconSize,
-        icon: timesIcon(cancelButtonStyle.iconColor),
+        backgroundColor: cancelButtonDefaultStyles.backgroundColor,
+        size: cancelButtonDefaultStyles.size,
+        iconColor: cancelButtonDefaultStyles.iconColor,
+        iconSize: cancelButtonDefaultStyles.iconSize,
+        iconElement: cancelButtonDefaultStyles.icon.length > 0 ? [imageIcon(cancelButtonDefaultStyles.icon, cancelButtonDefaultStyles.iconSize)] : timesIcon(cancelButtonDefaultStyles.iconColor),
         onPressed: onCancel
       }),
       button({
-        backgroundColor: confirmButtonStyle.backgroundColor,
-        size: confirmButtonStyle.size,
-        iconColor: confirmButtonStyle.iconColor,
-        iconSize: confirmButtonStyle.iconSize,
-        icon: checkIcon(confirmButtonStyle.iconColor),
+        backgroundColor: confirmButtonDefaultStyle.backgroundColor,
+        size: confirmButtonDefaultStyle.size,
+        iconColor: confirmButtonDefaultStyle.iconColor,
+        iconSize: confirmButtonDefaultStyle.iconSize,
+        iconElement: confirmButtonDefaultStyle.icon.length > 0 ? [imageIcon(confirmButtonDefaultStyle.icon, confirmButtonDefaultStyle.iconSize)] : checkIcon(confirmButtonDefaultStyle.iconColor),
         onPressed: onFinish
@@ -874,2 +935,9 @@ })
   const { onClick, active, style } = params;
+  const backButtonStyle = {
+    backgroundColor: style?.backgroundColor ?? "transparent",
+    iconColor: style?.iconColor ?? "white",
+    iconSize: style?.iconSize ?? "30px",
+    size: style?.size ?? "50px",
+    icon: style?.icon ?? ""
+  };
   const el = r_default({
@@ -887,7 +955,7 @@ tag: "div",
         horizontalMargin: "0",
-        backgroundColor: style.backgroundColor,
-        size: style.size,
-        iconColor: style.iconColor,
-        icon: backIcon(style.iconColor),
-        iconSize: style.iconSize,
+        backgroundColor: backButtonStyle.backgroundColor,
+        size: backButtonStyle.size,
+        iconColor: backButtonStyle.iconColor,
+        iconElement: backButtonStyle.icon.length > 0 ? [imageIcon(backButtonStyle.icon, backButtonStyle.iconSize)] : backIcon(backButtonStyle.iconColor),
+        iconSize: backButtonStyle.iconSize,
         onPressed: onClick
@@ -929,3 +997,3 @@ })
 function render(params) {
-  const { data, request, onCancel } = params;
+  const { data, request, onCancel, controller } = params;
   const root = mainContainer({
@@ -940,2 +1008,3 @@ onCancel: () => {
     request,
+    controller,
     ...data.styles,
@@ -969,3 +1038,4 @@ ...data.cameraPresets,
       onCancel: () => reject(operationCanceledError),
-      request: makeRequest2
+      request: makeRequest2,
+      controller: data.controller
     });
@@ -1324,4 +1394,6 @@ });
   window.useQualityServices = useQualityServices;
+  window.cameraController = cameraController;
 }
 export {
+  cameraController,
   useMultibiometricServices,
@@ -1328,0 +1400,0 @@ useMultibiometrics,

functions/render.d.ts

@@ -1,2 +0,2 @@
-import { BaseHookParams, Picture } from "../types";
+import { BaseHookParams, CameraController, Picture } from "../types";
 interface RenderParams {
@@ -6,4 +6,5 @@ data: BaseHookParams;
     request: (picture: Picture) => Promise<void>;
+    controller?: CameraController;
 }
 export default function render(params: RenderParams): void;
 export {};

icons/index.d.ts

@@ -1,4 +0,4 @@
-export { default as takePictureIcon } from './takePictureIcon';
-export { default as checkIcon } from './checkIcon';
+export { default as takePictureIcon } from './take_picture_icon';
+export { default as checkIcon } from './check_icon';
 export { default as timesIcon } from './timesIcon';
-export { default as backIcon } from './backIcon';
+export { default as backIcon } from './back_icon';

index.d.ts

@@ -5,2 +5,3 @@ import useMultibiometrics from "./modules/multibiometrics";
 import useQualityServices from "./services/quality_service";
-export { useMultibiometrics, useMultibiometricServices, useQuality, useQualityServices };
+import cameraController from "./functions/camera_controller";
+export { useMultibiometrics, useMultibiometricServices, useQuality, useQualityServices, cameraController };

index.js

@@ -88,3 +88,3 @@ var __create = Object.create;
     var setDomDocument = (document2) => domDocument = document2;
-    var r11 = (data) => {
+    var r12 = (data) => {
       if (!domDocument) {
@@ -128,3 +128,3 @@ throw "\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";
     };
-    var r_default = r11;
+    var r_default = r12;
     if (typeof window !== "undefined") {
@@ -154,3 +154,3 @@ window.r = r_default;
     var setDomDocument = (document2) => domDocument = document2;
-    var r11 = (data) => {
+    var r12 = (data) => {
       if (!domDocument) {
@@ -194,3 +194,3 @@ throw "\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";
     };
-    var r_default = r11;
+    var r_default = r12;
   }
@@ -202,2 +202,3 @@ });
 __export(src_exports, {
+  cameraController: () => cameraController,
   useMultibiometricServices: () => useMultibiometricServices,
@@ -213,2 +214,3 @@ useMultibiometrics: () => useMultibiometrics,
 var operationCanceledError = "generic/operation_canceled";
+var failedToExecuteControllerCommand = "generic/not_permitted";
 var enrollInvalidParamsError = "enroll/face_or_fingers_needed";
@@ -238,3 +240,3 @@ var enrollInvalidCustomId = "enroll/invalid_custom_id";
 function button(params) {
-  const { size, backgroundColor, iconSize, icon, onPressed, horizontalMargin = "20px" } = params;
+  const { size, backgroundColor, iconSize, iconElement, onPressed, horizontalMargin = "20px" } = params;
   return (0, import_vanilla_render_function.r)({
@@ -251,3 +253,4 @@ tag: "button",
       justifyContent: "center",
-      margin: `0 ${horizontalMargin}`
+      margin: `0 ${horizontalMargin}`,
+      border: "none"
     },
@@ -261,3 +264,3 @@ onClick: onPressed,
         },
-        children: icon
+        children: iconElement
       })
@@ -271,2 +274,3 @@ ]
 function camera() {
+  let initialized = false;
   const video = (0, import_vanilla_render_function2.r)({
@@ -300,2 +304,3 @@ tag: "video",
     video.play();
+    initialized = true;
   }
@@ -311,2 +316,3 @@ async function dispose() {
     video.srcObject = null;
+    initialized = false;
   }
@@ -318,3 +324,4 @@ const cameraElement = {
     initCamera,
-    dispose
+    dispose,
+    checkIfIsInitialized: () => initialized
   };
@@ -381,14 +388,15 @@ return cameraElement;
 function mask(style) {
-  const {
-    backgroundColor,
-    backgroundOpacity,
-    frameColor,
-    type,
-    frameThickness
-  } = style;
+  var _a, _b, _c, _d, _e;
+  const maskStyle = {
+    backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : "black",
+    backgroundOpacity: (_b = style == null ? void 0 : style.backgroundOpacity) != null ? _b : 0.6,
+    frameColor: (_c = style == null ? void 0 : style.frameColor) != null ? _c : "white",
+    frameThickness: (_d = style == null ? void 0 : style.frameThickness) != null ? _d : 3,
+    type: (_e = style == null ? void 0 : style.type) != null ? _e : "face"
+  };
   function renderMask() {
-    if (type == "face") {
+    if (maskStyle.type == "face") {
       return {
-        mask: landscapeFaceMask({ color: backgroundColor, opacity: backgroundOpacity }),
-        frame: landscapeFaceMaskFrame({ color: frameColor, thickness: frameThickness })
+        mask: landscapeFaceMask({ color: maskStyle.backgroundColor, opacity: maskStyle.backgroundOpacity }),
+        frame: landscapeFaceMaskFrame({ color: maskStyle.frameColor, thickness: maskStyle.frameThickness })
       };
@@ -436,2 +444,15 @@ }
 
+// src/functions/camera_controller.ts
+function notPermitted() {
+  throw failedToExecuteControllerCommand;
+}
+function cameraController() {
+  return {
+    takePicture: notPermitted,
+    confirmPicture: notPermitted,
+    rejectPicture: notPermitted,
+    cancel: notPermitted
+  };
+}
+
 // src/elements/main_container.ts
@@ -443,40 +464,9 @@ function mainContainer(data) {
     onFinish,
-    captureButtonStyle = {
-      backgroundColor: "white",
-      iconColor: "black",
-      iconSize: "30px",
-      size: "50px"
-    },
-    cancelButtonStyle = {
-      backgroundColor: "#E84141",
-      iconColor: "white",
-      iconSize: "30px",
-      size: "50px"
-    },
-    confirmButtonStyle = {
-      backgroundColor: "white",
-      iconColor: "black",
-      iconSize: "30px",
-      size: "50px"
-    },
-    loadingStyle = {
-      backgroundColor: "white",
-      dotsColor: "black",
-      dotsSize: "5px",
-      dotsSpacing: "3px",
-      size: "50px"
-    },
-    maskStyle = {
-      type: "face",
-      backgroundColor: "black",
-      backgroundOpacity: 0.6,
-      frameColor: "white",
-      frameThickness: 3
-    },
-    backButtonStyle = {
-      backgroundColor: "transparent",
-      iconColor: "white",
-      iconSize: "30px",
-      size: "50px"
-    },
+    controller,
+    captureButtonStyle,
+    cancelButtonStyle,
+    confirmButtonStyle,
+    loadingStyle,
+    maskStyle,
+    backButtonStyle,
     showMask = true,
@@ -486,6 +476,8 @@ showBackButton = true,
     height = "100%",
+    showConfirmationButtons = true,
+    showLoading = true,
+    showTakePictureButton = true,
     aspectRatio = 16 / 9,
     preferredResolution = 480
   } = data;
-  console.log(aspectRatio, preferredResolution);
   let picture = null;
@@ -514,6 +506,14 @@ const cameraElement = camera();
   function takePicture() {
-    picture = canvasElement.takePicture(cameraElement.element);
-    picturePreviewElement.image = picture.base64;
-    takePictureButtonElement.active = false;
-    confirmationButtonsElement.active = true;
+    const initialized = cameraElement.checkIfIsInitialized();
+    if (initialized) {
+      picture = canvasElement.takePicture(cameraElement.element);
+      picturePreviewElement.image = picture.base64;
+      takePictureButtonElement.active = false;
+      confirmationButtonsElement.active = true;
+      if (controller) {
+        controller.confirmPicture = confirmPicture;
+        controller.rejectPicture = cancelPicture;
+        controller.takePicture = notPermitted;
+      }
+    }
   }
@@ -523,2 +523,8 @@ async function confirmPicture() {
     loadingElement.active = true;
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = notPermitted;
+      controller.cancel = notPermitted;
+    }
     try {
@@ -538,5 +544,9 @@ await request(picture);
     takePictureButtonElement.active = true;
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = takePicture;
+    }
   }
   async function initCamera() {
-    console.log(aspectRatio, preferredResolution);
     await cameraElement.initCamera({
@@ -550,2 +560,8 @@ aspectRatio,
   function cancel() {
+    if (controller) {
+      controller.confirmPicture = notPermitted;
+      controller.rejectPicture = notPermitted;
+      controller.takePicture = notPermitted;
+      controller.cancel = notPermitted;
+    }
     picture = null;
@@ -567,8 +583,12 @@ cameraElement.dispose();
       picturePreviewElement.element,
-      takePictureButtonElement.element,
-      confirmationButtonsElement.element,
-      loadingElement.element,
+      showTakePictureButton ? takePictureButtonElement.element : (0, import_vanilla_render_function5.r)({ tag: "div" }),
+      showConfirmationButtons ? confirmationButtonsElement.element : (0, import_vanilla_render_function5.r)({ tag: "div" }),
+      showLoading ? loadingElement.element : (0, import_vanilla_render_function5.r)({ tag: "div" }),
       showBackButton ? backButtonElement.element : (0, import_vanilla_render_function5.r)({ tag: "div" })
     ]
   });
+  if (controller) {
+    controller.cancel = cancel;
+    controller.takePicture = takePicture;
+  }
   const mainContainerElement = {
@@ -645,5 +665,5 @@ get element() {
 // src/elements/take_picture_button.ts
-var import_r2 = __toESM(require_r());
+var import_r3 = __toESM(require_r());
 
-// src/icons/takePictureIcon.ts
+// src/icons/take_picture_icon.ts
 function takePictureIcon(color) {
@@ -659,3 +679,3 @@ const takePicture = `
 
-// src/icons/checkIcon.ts
+// src/icons/check_icon.ts
 function checkIcon(color) {
@@ -680,3 +700,3 @@ const check = `
 
-// src/icons/backIcon.ts
+// src/icons/back_icon.ts
 function backIcon(color) {
@@ -691,6 +711,29 @@ const check = `
 
+// src/icons/image_icon.ts
+var import_r2 = __toESM(require_r());
+function imageIcon(icon, size) {
+  return (0, import_r2.default)({
+    tag: "img",
+    attributes: {
+      src: icon
+    },
+    style: {
+      width: size
+    }
+  });
+}
+
 // src/elements/take_picture_button.ts
 function takePictureButton(params) {
+  var _a, _b, _c, _d, _e;
   const { onClick, active, style } = params;
-  const el = (0, import_r2.default)({
+  const takePictureButtonStyles = {
+    backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : "white",
+    iconColor: (_b = style == null ? void 0 : style.iconColor) != null ? _b : "black",
+    iconSize: (_c = style == null ? void 0 : style.iconSize) != null ? _c : "30px",
+    size: (_d = style == null ? void 0 : style.size) != null ? _d : "50px",
+    icon: (_e = style == null ? void 0 : style.icon) != null ? _e : ""
+  };
+  console.log(takePictureButtonStyles);
+  const el = (0, import_r3.default)({
     tag: "div",
@@ -711,7 +754,7 @@ style: {
       button({
-        backgroundColor: style.backgroundColor,
-        size: style.size,
-        iconColor: style.iconColor,
-        iconSize: style.iconSize,
-        icon: takePictureIcon(style.iconColor),
+        backgroundColor: takePictureButtonStyles.backgroundColor,
+        size: takePictureButtonStyles.size,
+        iconColor: takePictureButtonStyles.iconColor,
+        iconSize: takePictureButtonStyles.iconSize,
+        iconElement: takePictureButtonStyles.icon.length > 0 ? [imageIcon(takePictureButtonStyles.icon, takePictureButtonStyles.iconSize)] : takePictureIcon(takePictureButtonStyles.iconColor),
         onPressed: onClick
@@ -752,7 +795,15 @@ })
 // src/elements/loading.ts
-var import_r3 = __toESM(require_r());
+var import_r4 = __toESM(require_r());
 function loading(params) {
+  var _a, _b, _c, _d, _e;
   const { active, style } = params;
+  const loadingStyle = {
+    backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : "white",
+    dotsColor: (_b = style == null ? void 0 : style.dotsColor) != null ? _b : "black",
+    dotsSize: (_c = style == null ? void 0 : style.dotsSize) != null ? _c : "5px",
+    dotsSpacing: (_d = style == null ? void 0 : style.dotsSpacing) != null ? _d : "3px",
+    size: (_e = style == null ? void 0 : style.size) != null ? _e : "50px"
+  };
   function dot(isLast) {
-    return (0, import_r3.default)({
+    return (0, import_r4.default)({
       tag: "div",
@@ -763,7 +814,7 @@ attributes: {
       style: {
-        width: style.dotsSize,
-        height: style.dotsSize,
+        width: loadingStyle.dotsSize,
+        height: loadingStyle.dotsSize,
         borderRadius: "9999px",
-        background: style.dotsColor,
-        marginRight: isLast ? void 0 : style.dotsSpacing,
+        background: loadingStyle.dotsColor,
+        marginRight: isLast ? void 0 : loadingStyle.dotsSpacing,
         opacity: ".5"
@@ -773,3 +824,3 @@ }
   }
-  const el = (0, import_r3.default)({
+  const el = (0, import_r4.default)({
     tag: "div",
@@ -789,8 +840,8 @@ style: {
     children: [
-      (0, import_r3.default)({
+      (0, import_r4.default)({
         tag: "div",
         style: {
-          width: style.size,
-          height: style.size,
-          background: style.backgroundColor,
+          width: loadingStyle.size,
+          height: loadingStyle.size,
+          background: loadingStyle.backgroundColor,
           borderRadius: "9999px",
@@ -866,6 +917,21 @@ cursor: "pointer",
 // src/elements/confirmation_buttons.ts
-var import_r4 = __toESM(require_r());
+var import_r5 = __toESM(require_r());
 function confirmationButtons(params) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { onFinish, onCancel, active, cancelButtonStyle, confirmButtonStyle } = params;
-  const el = (0, import_r4.default)({
+  const cancelButtonDefaultStyles = {
+    backgroundColor: (_a = cancelButtonStyle == null ? void 0 : cancelButtonStyle.backgroundColor) != null ? _a : "#E84141",
+    iconColor: (_b = cancelButtonStyle == null ? void 0 : cancelButtonStyle.iconColor) != null ? _b : "white",
+    iconSize: (_c = cancelButtonStyle == null ? void 0 : cancelButtonStyle.iconSize) != null ? _c : "30px",
+    size: (_d = cancelButtonStyle == null ? void 0 : cancelButtonStyle.size) != null ? _d : "50px",
+    icon: (_e = cancelButtonStyle == null ? void 0 : cancelButtonStyle.icon) != null ? _e : ""
+  };
+  const confirmButtonDefaultStyle = {
+    backgroundColor: (_f = confirmButtonStyle == null ? void 0 : confirmButtonStyle.backgroundColor) != null ? _f : "white",
+    iconColor: (_g = confirmButtonStyle == null ? void 0 : confirmButtonStyle.iconColor) != null ? _g : "black",
+    iconSize: (_h = confirmButtonStyle == null ? void 0 : confirmButtonStyle.iconSize) != null ? _h : "30px",
+    size: (_i = confirmButtonStyle == null ? void 0 : confirmButtonStyle.size) != null ? _i : "50px",
+    icon: (_j = confirmButtonStyle == null ? void 0 : confirmButtonStyle.icon) != null ? _j : ""
+  };
+  const el = (0, import_r5.default)({
     tag: "div",
@@ -886,15 +952,15 @@ style: {
       button({
-        backgroundColor: cancelButtonStyle.backgroundColor,
-        size: cancelButtonStyle.size,
-        iconColor: cancelButtonStyle.iconColor,
-        iconSize: cancelButtonStyle.iconSize,
-        icon: timesIcon(cancelButtonStyle.iconColor),
+        backgroundColor: cancelButtonDefaultStyles.backgroundColor,
+        size: cancelButtonDefaultStyles.size,
+        iconColor: cancelButtonDefaultStyles.iconColor,
+        iconSize: cancelButtonDefaultStyles.iconSize,
+        iconElement: cancelButtonDefaultStyles.icon.length > 0 ? [imageIcon(cancelButtonDefaultStyles.icon, cancelButtonDefaultStyles.iconSize)] : timesIcon(cancelButtonDefaultStyles.iconColor),
         onPressed: onCancel
       }),
       button({
-        backgroundColor: confirmButtonStyle.backgroundColor,
-        size: confirmButtonStyle.size,
-        iconColor: confirmButtonStyle.iconColor,
-        iconSize: confirmButtonStyle.iconSize,
-        icon: checkIcon(confirmButtonStyle.iconColor),
+        backgroundColor: confirmButtonDefaultStyle.backgroundColor,
+        size: confirmButtonDefaultStyle.size,
+        iconColor: confirmButtonDefaultStyle.iconColor,
+        iconSize: confirmButtonDefaultStyle.iconSize,
+        iconElement: confirmButtonDefaultStyle.icon.length > 0 ? [imageIcon(confirmButtonDefaultStyle.icon, confirmButtonDefaultStyle.iconSize)] : checkIcon(confirmButtonDefaultStyle.iconColor),
         onPressed: onFinish
@@ -937,3 +1003,11 @@ })
 function backButton(params) {
+  var _a, _b, _c, _d, _e;
   const { onClick, active, style } = params;
+  const backButtonStyle = {
+    backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : "transparent",
+    iconColor: (_b = style == null ? void 0 : style.iconColor) != null ? _b : "white",
+    iconSize: (_c = style == null ? void 0 : style.iconSize) != null ? _c : "30px",
+    size: (_d = style == null ? void 0 : style.size) != null ? _d : "50px",
+    icon: (_e = style == null ? void 0 : style.icon) != null ? _e : ""
+  };
   const el = (0, import_vanilla_render_function6.r)({
@@ -951,7 +1025,7 @@ tag: "div",
         horizontalMargin: "0",
-        backgroundColor: style.backgroundColor,
-        size: style.size,
-        iconColor: style.iconColor,
-        icon: backIcon(style.iconColor),
-        iconSize: style.iconSize,
+        backgroundColor: backButtonStyle.backgroundColor,
+        size: backButtonStyle.size,
+        iconColor: backButtonStyle.iconColor,
+        iconElement: backButtonStyle.icon.length > 0 ? [imageIcon(backButtonStyle.icon, backButtonStyle.iconSize)] : backIcon(backButtonStyle.iconColor),
+        iconSize: backButtonStyle.iconSize,
         onPressed: onClick
@@ -993,3 +1067,3 @@ })
 function render(params) {
-  const { data, request, onCancel } = params;
+  const { data, request, onCancel, controller } = params;
   const root = mainContainer(__spreadValues(__spreadValues(__spreadValues({
@@ -1003,3 +1077,4 @@ onCancel: () => {
     },
-    request
+    request,
+    controller
   }, data.styles), data.cameraPresets), data.options));
@@ -1030,3 +1105,4 @@ data.element.innerHTML = "";
       onCancel: () => reject(operationCanceledError),
-      request: makeRequest2
+      request: makeRequest2,
+      controller: data.controller
     });
@@ -1385,2 +1461,3 @@ });
   window.useQualityServices = useQualityServices;
+  window.cameraController = cameraController;
 }
@@ -1390,2 +1467,3 @@ module.exports = __toCommonJS(src_exports);
 0 && (module.exports = {
+  cameraController,
   useMultibiometricServices,
@@ -1392,0 +1470,0 @@ useMultibiometrics,

package.json

 {
   "name": "@biopassid/face-sdk",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./index.js",

README.md

@@ -17,3 +17,3 @@ # BiopassID Face SDK Web
 ```
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 ```
@@ -26,3 +26,3 @@
 ```html
-<script src="../../../dist/unpkg/biopass.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/face-sdk/unpkg/face-sdk.min.js"></script>
 <script>
@@ -47,3 +47,3 @@ const { enroll } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -73,3 +73,3 @@ const {
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -101,3 +101,3 @@ const { enroll } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -128,3 +128,3 @@ const { verify } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -155,3 +155,3 @@ const { updatePerson } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -182,3 +182,3 @@ const { deletePerson } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -209,3 +209,3 @@ const { extract } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -234,3 +234,3 @@ const { faceDetect } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -259,3 +259,3 @@ const { faceSpoof } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -284,3 +284,3 @@ const { faceSpoof } = useMultibiometrics("your key");
 ```js
-import { useMultibiometrics } from 'face-sdk-web'
+import { useMultibiometrics } from '@biopassid/face-sdk'
 
@@ -308,3 +308,3 @@ const { anonymizer } = useMultibiometrics("your key");
 ```js
-import { useQuality } from 'face-sdk-web'
+import { useQuality } from '@biopassid/face-sdk'
 
@@ -326,3 +326,3 @@ const {
 ```js
-import { useQuality } from 'face-sdk-web'
+import { useQuality } from '@biopassid/face-sdk'
 
@@ -351,3 +351,3 @@ const { icaoQualityCheck } = useQuality("your key");
 ```js
-import { useQuality } from 'face-sdk-web'
+import { useQuality } from '@biopassid/face-sdk'
 
@@ -375,3 +375,3 @@ const { icaoCrop } = useQuality("your key");
 ```js
-import { useMultibiometricServices } from 'face-sdk-web'
+import { useMultibiometricServices } from '@biopassid/face-sdk'
 
@@ -456,3 +456,3 @@ const {
 ```js
-import { useQualityServices } from 'face-sdk-web'
+import { useQualityServices } from '@biopassid/face-sdk'
 
@@ -459,0 +459,0 @@ const {

types/index.d.ts

@@ -29,21 +29,28 @@ export interface Fingers {
 }
+export interface CameraController {
+    takePicture: () => void;
+    confirmPicture: () => void;
+    rejectPicture: () => void;
+    cancel: () => void;
+}
 export interface ButtonStyle {
-    size: string;
-    backgroundColor: string;
-    iconColor: string;
-    iconSize: string;
+    size?: string;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: string;
+    icon?: string;
 }
 export interface LoadingStyle {
-    dotsSize: string;
-    dotsSpacing: string;
-    dotsColor: string;
-    backgroundColor: string;
-    size: string;
+    dotsSize?: string;
+    dotsSpacing?: string;
+    dotsColor?: string;
+    backgroundColor?: string;
+    size?: string;
 }
 export interface MaskStyle {
-    type: 'face';
-    backgroundColor: string;
-    backgroundOpacity: number;
-    frameColor: string;
-    frameThickness: number;
+    type?: 'face';
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    frameColor?: string;
+    frameThickness?: number;
 }
@@ -61,2 +68,5 @@ export interface Styles {
     showBackButton?: boolean;
+    showTakePictureButton?: boolean;
+    showConfirmationButtons?: boolean;
+    showLoading?: boolean;
     width?: string;
@@ -74,2 +84,3 @@ height?: string;
     cameraPresets?: CameraPresets;
+    controller?: CameraController;
 }
@@ -76,0 +87,0 @@ export interface PersonHookParams extends BaseHookParams {

unpkg/face-sdk.min.js

@@ -1,12 +0,12 @@
-(()=>{var ve=Object.create;var U=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var Se=t=>U(t,"__esModule",{value:!0});var Ee=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports);var xe=(t,r,s,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of be(r))!we.call(t,e)&&(s||e!=="default")&&U(t,e,{get:()=>r[e],enumerable:!(o=ke(r,e))||o.enumerable});return t},B=(t,r)=>xe(Se(U(t!=null?ve(Te(t)):{},"default",!r&&t&&t.__esModule?{get:()=>t.default,enumerable:!0}:{value:t,enumerable:!0})),t);var E=Ee(ce=>{var ae=Object.defineProperty,Le=t=>ae(t,"__esModule",{value:!0}),qe=(t,r)=>{Le(t);for(var s in r)ae(t,s,{get:r[s],enumerable:!0})};qe(ce,{default:()=>Fe,setDomDocument:()=>He});var _=typeof window<"u"?window.document:null,He=t=>_=t,ze=t=>{if(!_)throw"\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";let{tag:r,attributes:s,children:o,style:e,onClick:n}=t;if(s&&s.style)throw"Use style property to define element styles";let i=_.createElement(r);if(s&&Object.entries(s).forEach(c=>{i.setAttribute(c[0],c[1])}),e&&Object.entries(e).forEach(([c,m])=>{i.style[c]=m}),o&&Array.isArray(o))o.forEach(a=>{i.appendChild(a)});else if(typeof o=="string"&&/(<\w*)((\s\/>)|(.*<\/\w*>))/gm.test(o)){let a=_.createElement("div");a.innerHTML=o,Array.from(a.children).forEach(c=>{i.appendChild(c)})}else typeof o=="string"&&(i.innerHTML=o);return n&&(i.onclick=n),i},Fe=ze});var re="generic/permissions_denied",y="generic/http_request_error",ne="generic/operation_canceled";var ie="enroll/face_or_fingers_needed",se="enroll/invalid_custom_id";async function Y(){try{let t={audio:!1,video:!0};return(await navigator.mediaDevices.getUserMedia(t)).getTracks().forEach(s=>{s.stop()}),!0}catch(t){return console.log(t),!1}}var De=t=>t.replace(/((?<=[a-z\d])[A-Z]|(?<=[A-Z\d])[A-Z](?=[a-z]))/g,"-$1").toLowerCase(),Oe=(t,r={minify:!0})=>{let o=(r.customWindow?.document||document).createElement("style"),e=t.reduce((n,{selector:i,props:a})=>{let c=Object.entries(a).map(([l,d])=>`${De(l)}: ${d};`);return n+=r.minify?`${i}{${c.join("")}}`:`${i} {
+(()=>{var Re=Object.create;var X=Object.defineProperty;var Oe=Object.getOwnPropertyDescriptor;var Be=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Ie=Object.prototype.hasOwnProperty;var ze=t=>X(t,"__esModule",{value:!0});var Le=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports);var qe=(t,r,a,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of Be(r))!Ie.call(t,e)&&(a||e!=="default")&&X(t,e,{get:()=>r[e],enumerable:!(o=Oe(r,e))||o.enumerable});return t},R=(t,r)=>qe(ze(X(t!=null?Re(Me(t)):{},"default",!r&&t&&t.__esModule?{get:()=>t.default,enumerable:!0}:{value:t,enumerable:!0})),t);var E=Le(ke=>{var Pe=Object.defineProperty,We=t=>Pe(t,"__esModule",{value:!0}),$e=(t,r)=>{We(t);for(var a in r)Pe(t,a,{get:r[a],enumerable:!0})};$e(ke,{default:()=>Ue,setDomDocument:()=>Ve});var W=typeof window<"u"?window.document:null,Ve=t=>W=t,Ze=t=>{if(!W)throw"\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";let{tag:r,attributes:a,children:o,style:e,onClick:n}=t;if(a&&a.style)throw"Use style property to define element styles";let i=W.createElement(r);if(a&&Object.entries(a).forEach(c=>{i.setAttribute(c[0],c[1])}),e&&Object.entries(e).forEach(([c,m])=>{i.style[c]=m}),o&&Array.isArray(o))o.forEach(s=>{i.appendChild(s)});else if(typeof o=="string"&&/(<\w*)((\s\/>)|(.*<\/\w*>))/gm.test(o)){let s=W.createElement("div");s.innerHTML=o,Array.from(s.children).forEach(c=>{i.appendChild(c)})}else typeof o=="string"&&(i.innerHTML=o);return n&&(i.onclick=n),i},Ue=Ze});var pe="generic/permissions_denied",h="generic/http_request_error",Ce="generic/operation_canceled";var ge="generic/not_permitted",ye="enroll/face_or_fingers_needed",he="enroll/invalid_custom_id";async function ee(){try{let t={audio:!1,video:!0};return(await navigator.mediaDevices.getUserMedia(t)).getTracks().forEach(a=>{a.stop()}),!0}catch(t){return console.log(t),!1}}var He=t=>t.replace(/((?<=[a-z\d])[A-Z]|(?<=[A-Z\d])[A-Z](?=[a-z]))/g,"-$1").toLowerCase(),Fe=(t,r={minify:!0})=>{let o=(r.customWindow?.document||document).createElement("style"),e=t.reduce((n,{selector:i,props:s})=>{let c=Object.entries(s).map(([l,u])=>`${He(l)}: ${u};`);return n+=r.minify?`${i}{${c.join("")}}`:`${i} {
 	${c.join(`
 	`)}
 }
-`,n},"");return o.innerHTML=e,o},Re=Oe,Be=(t,r)=>{(r?.customWindow.document||document).querySelector("head").appendChild(t)},Me=Be,N=typeof window<"u"?window.document:null;var Ie=t=>{if(!N)throw"\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";let{tag:r,attributes:s,children:o,style:e,onClick:n}=t;if(s&&s.style)throw"Use style property to define element styles";let i=N.createElement(r);if(s&&Object.entries(s).forEach(c=>{i.setAttribute(c[0],c[1])}),e&&Object.entries(e).forEach(([c,m])=>{i.style[c]=m}),o&&Array.isArray(o))o.forEach(a=>{i.appendChild(a)});else if(typeof o=="string"&&/(<\w*)((\s\/>)|(.*<\/\w*>))/gm.test(o)){let a=N.createElement("div");a.innerHTML=o,Array.from(a.children).forEach(c=>{i.appendChild(c)})}else typeof o=="string"&&(i.innerHTML=o);return n&&(i.onclick=n),i},p=Ie;typeof window<"u"&&(window.r=p,window.attachCSS=Me,window.generateCSS=Re);function v(t){let{size:r,backgroundColor:s,iconSize:o,icon:e,onPressed:n,horizontalMargin:i="20px"}=t;return p({tag:"button",style:{width:r,height:r,borderRadius:"9999px",cursor:"pointer",background:s,display:"flex",alignItems:"center",justifyContent:"center",margin:`0 ${i}`},onClick:n,children:[p({tag:"div",style:{width:o},children:e})]})}function M(){let t=p({tag:"video",style:{width:"100%",height:"100%",objectFit:"cover",background:"#363738"},attributes:{autoplay:"",playsinline:"",muted:""}});async function r(e){let{aspectRatio:n,preferredResolution:i}=e,a={audio:!1,video:{facingMode:"user",aspectRatio:n,height:n>1?i:void 0,width:n<1?i:void 0}},c=await navigator.mediaDevices.getUserMedia(a);t.srcObject=c,t.play()}async function s(){let e=t.srcObject;e&&e.getTracks().forEach(function(i){i.stop()}),t.srcObject=null}return{get element(){return t},initCamera:r,dispose:s}}function I(){let t=p({tag:"canvas",style:{position:"absolute",display:"none"}});function r(o){return t.width=o.videoWidth,t.height=o.videoHeight,t.getContext("2d").drawImage(o,0,0,o.videoWidth,o.videoHeight),{base64:t.toDataURL("image/jpg"),height:t.height,width:t.width}}return{get element(){return t},takePicture:r}}function G(t){let{color:r,opacity:s}=t;return`<svg preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 560 315" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M560 0H0V315H560V0ZM282.051 47.168C307.488 47.7062 326.449 57.5966 338.266 73.6769C350.35 90.2282 354.957 113.44 351.017 140.151C350.834 141.574 350.641 143.017 350.446 144.477C350.142 146.746 349.833 149.054 349.549 151.387C347.813 165.382 345.877 180.251 341.47 192.025C335.528 207.836 324.98 221.831 313.43 231.789C302.013 241.746 289.662 247.667 280.115 247.734H279.848C270.301 247.6 258.016 241.746 246.533 231.789C235.05 221.831 224.434 207.904 218.492 192.025C214.154 180.432 212.275 165.838 210.497 152.033L210.414 151.387C209.947 147.552 209.479 143.784 208.945 140.151C205.073 113.44 209.679 90.2282 221.83 73.6769C233.581 57.5966 252.542 47.7062 277.912 47.168H282.051Z" fill="${r}" fill-opacity="${s}"/>
+`,n},"");return o.innerHTML=e,o},Ae=Fe,_e=(t,r)=>{(r?.customWindow.document||document).querySelector("head").appendChild(t)},Qe=_e,te=typeof window<"u"?window.document:null;var je=t=>{if(!te)throw"\xC9 necess\xE1rio executar esse plugin no navegador, caso esteja em um ambiente node utilize a fun\xE7\xE3o setDomDocument antes de utilizar o plugin";let{tag:r,attributes:a,children:o,style:e,onClick:n}=t;if(a&&a.style)throw"Use style property to define element styles";let i=te.createElement(r);if(a&&Object.entries(a).forEach(c=>{i.setAttribute(c[0],c[1])}),e&&Object.entries(e).forEach(([c,m])=>{i.style[c]=m}),o&&Array.isArray(o))o.forEach(s=>{i.appendChild(s)});else if(typeof o=="string"&&/(<\w*)((\s\/>)|(.*<\/\w*>))/gm.test(o)){let s=te.createElement("div");s.innerHTML=o,Array.from(s.children).forEach(c=>{i.appendChild(c)})}else typeof o=="string"&&(i.innerHTML=o);return n&&(i.onclick=n),i},d=je;typeof window<"u"&&(window.r=d,window.attachCSS=Qe,window.generateCSS=Ae);function S(t){let{size:r,backgroundColor:a,iconSize:o,iconElement:e,onPressed:n,horizontalMargin:i="20px"}=t;return d({tag:"button",style:{width:r,height:r,borderRadius:"9999px",cursor:"pointer",background:a,display:"flex",alignItems:"center",justifyContent:"center",margin:`0 ${i}`,border:"none"},onClick:n,children:[d({tag:"div",style:{width:o},children:e})]})}function L(){let t=!1,r=d({tag:"video",style:{width:"100%",height:"100%",objectFit:"cover",background:"#363738"},attributes:{autoplay:"",playsinline:"",muted:""}});async function a(n){let{aspectRatio:i,preferredResolution:s}=n,c={audio:!1,video:{facingMode:"user",aspectRatio:i,height:i>1?s:void 0,width:i<1?s:void 0}},m=await navigator.mediaDevices.getUserMedia(c);r.srcObject=m,r.play(),t=!0}async function o(){let n=r.srcObject;n&&n.getTracks().forEach(function(s){s.stop()}),r.srcObject=null,t=!1}return{get element(){return r},initCamera:a,dispose:o,checkIfIsInitialized:()=>t}}function q(){let t=d({tag:"canvas",style:{position:"absolute",display:"none"}});function r(o){return t.width=o.videoWidth,t.height=o.videoHeight,t.getContext("2d").drawImage(o,0,0,o.videoWidth,o.videoHeight),{base64:t.toDataURL("image/jpg"),height:t.height,width:t.width}}return{get element(){return t},takePicture:r}}function oe(t){let{color:r,opacity:a}=t;return`<svg preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 560 315" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M560 0H0V315H560V0ZM282.051 47.168C307.488 47.7062 326.449 57.5966 338.266 73.6769C350.35 90.2282 354.957 113.44 351.017 140.151C350.834 141.574 350.641 143.017 350.446 144.477C350.142 146.746 349.833 149.054 349.549 151.387C347.813 165.382 345.877 180.251 341.47 192.025C335.528 207.836 324.98 221.831 313.43 231.789C302.013 241.746 289.662 247.667 280.115 247.734H279.848C270.301 247.6 258.016 241.746 246.533 231.789C235.05 221.831 224.434 207.904 218.492 192.025C214.154 180.432 212.275 165.838 210.497 152.033L210.414 151.387C209.947 147.552 209.479 143.784 208.945 140.151C205.073 113.44 209.679 90.2282 221.83 73.6769C233.581 57.5966 252.542 47.7062 277.912 47.168H282.051Z" fill="${r}" fill-opacity="${a}"/>
     </svg>
-    `}function K(t){return`<svg preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 565 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+    `}function re(t){return`<svg preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 565 320" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M353.52 142.65C353.33 144.07 353.14 145.52 352.95 146.98C352.64 149.25 352.33 151.55 352.05 153.89C350.31 167.88 348.38 182.75 343.97 194.52C338.03 210.34 327.48 224.33 315.93 234.29C304.51 244.25 292.16 250.17 282.61 250.23H282.35C272.8 250.1 260.52 244.25 249.03 234.29C237.55 224.33 226.93 210.4 220.99 194.52C216.65 182.93 214.77 168.34 213 154.53L212.91 153.89C212.45 150.05 211.98 146.28 211.45 142.65C207.57 115.94 212.18 92.73 224.33 76.18C236.08 60.1 255.04 50.21 280.41 49.67H284.55C309.99 50.21 328.95 60.1 340.77 76.18C352.85 92.73 357.46 115.94 353.52 142.65Z" stroke="${t.color}" stroke-width="${t.thickness}" stroke-miterlimit="10"/>
     </svg>
-    `}function J(t){let{backgroundColor:r,backgroundOpacity:s,frameColor:o,type:e,frameThickness:n}=t;function i(){if(e=="face")return{mask:G({color:r,opacity:s}),frame:K({color:o,thickness:n})}}let a=i(),c=p({tag:"div",style:{width:"100%",height:"100%",position:"absolute",top:"0",left:"0"},children:[p({tag:"div",style:{width:"100%",height:"100%",position:"absolute"},children:a?.mask}),p({tag:"div",style:{width:"100%",height:"100%",position:"absolute"},children:a?.frame})]});return{get element(){return c}}}function L(t){let{request:r,onCancel:s,onFinish:o,captureButtonStyle:e={backgroundColor:"white",iconColor:"black",iconSize:"30px",size:"50px"},cancelButtonStyle:n={backgroundColor:"#E84141",iconColor:"white",iconSize:"30px",size:"50px"},confirmButtonStyle:i={backgroundColor:"white",iconColor:"black",iconSize:"30px",size:"50px"},loadingStyle:a={backgroundColor:"white",dotsColor:"black",dotsSize:"5px",dotsSpacing:"3px",size:"50px"},maskStyle:c={type:"face",backgroundColor:"black",backgroundOpacity:.6,frameColor:"white",frameThickness:3},backButtonStyle:m={backgroundColor:"transparent",iconColor:"white",iconSize:"30px",size:"50px"},showMask:l=!0,showBackButton:d=!0,width:k="100%",height:w="100%",aspectRatio:b=16/9,preferredResolution:S=480}=t;console.log(b,S);let T=null,u=M(),P=I(),f=H({active:!1,onClick:pe,style:e}),O=F({active:!1,onFinish:Ce,onCancel:ye,cancelButtonStyle:n,confirmButtonStyle:i}),R=q(""),Z=z({active:!1,style:a}),de=J(c),oe=A({active:!1,onClick:he,style:m});function pe(){T=P.takePicture(u.element),R.image=T.base64,f.active=!1,O.active=!0}async function Ce(){O.active=!1,Z.active=!0;try{await r(T)}finally{u.dispose(),o(),Z.active=!1,R.image=""}}function ye(){T=null,R.image="",O.active=!1,f.active=!0}async function ge(){console.log(b,S),await u.initCamera({aspectRatio:b,preferredResolution:S}),f.active=!0,oe.active=!0}function he(){T=null,u.dispose(),s()}let Pe=p({tag:"div",style:{position:"relative",width:k,height:w},children:[u.element,P.element,l?de.element:p({tag:"div"}),R.element,f.element,O.element,Z.element,d?oe.element:p({tag:"div"})]});return{get element(){return Pe},initCamera:ge}}var me=B(E());function q(t){let r=(0,me.default)({tag:"img",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",objectFit:"cover",opacity:t.length>0?"1":"0",transition:".3s",display:t.length>0?"block":"none"}});t.length>0&&r.setAttribute("src",t);let s={get element(){return r},image:t};return new Proxy(s,{get:(e,n)=>{if(n in e)return e[n]},set(e,n,i){if(n==="element")return!0;if(n==="image"){let a=e.element.getAttribute("src")!=null&&e.element.getAttribute("src").length>0;a&&i.length>0?e.element.setAttribute("src",i):a&&i.length==0?(e.element.style.opacity="0",setTimeout(()=>{e.element.style.display="none",e.element.setAttribute("src","")},300)):!a&&i.length>0&&(e.element.style.opacity="0",e.element.style.display="block",e.element.setAttribute("src",i),setTimeout(()=>{e.element.style.opacity="1"},50)),e.image=i}return!0}})}var le=B(E());function Q(t){return`
+    `}function ne(t){let r={backgroundColor:t?.backgroundColor??"black",backgroundOpacity:t?.backgroundOpacity??.6,frameColor:t?.frameColor??"white",frameThickness:t?.frameThickness??3,type:t?.type??"face"};function a(){if(r.type=="face")return{mask:oe({color:r.backgroundColor,opacity:r.backgroundOpacity}),frame:re({color:r.frameColor,thickness:r.frameThickness})}}let o=a(),e=d({tag:"div",style:{width:"100%",height:"100%",position:"absolute",top:"0",left:"0"},children:[d({tag:"div",style:{width:"100%",height:"100%",position:"absolute"},children:o?.mask}),d({tag:"div",style:{width:"100%",height:"100%",position:"absolute"},children:o?.frame})]});return{get element(){return e}}}function g(){throw ge}function ie(){return{takePicture:g,confirmPicture:g,rejectPicture:g,cancel:g}}function H(t){let{request:r,onCancel:a,onFinish:o,controller:e,captureButtonStyle:n,cancelButtonStyle:i,confirmButtonStyle:s,loadingStyle:c,maskStyle:m,backButtonStyle:l,showMask:u=!0,showBackButton:p=!0,width:b="100%",height:x="100%",showConfirmationButtons:N=!0,showLoading:G=!0,showTakePictureButton:f=!0,aspectRatio:v=16/9,preferredResolution:C=480}=t,D=null,w=L(),le=q(),M=A({active:!1,onClick:J,style:n}),I=Q({active:!1,onFinish:ue,onCancel:fe,cancelButtonStyle:i,confirmButtonStyle:s}),z=F(""),K=_({active:!1,style:c}),Ee=ne(m),me=j({active:!1,onClick:de,style:l});function J(){w.checkIfIsInitialized()&&(D=le.takePicture(w.element),z.image=D.base64,M.active=!1,I.active=!0,e&&(e.confirmPicture=ue,e.rejectPicture=fe,e.takePicture=g))}async function ue(){I.active=!1,K.active=!0,e&&(e.confirmPicture=g,e.rejectPicture=g,e.takePicture=g,e.cancel=g);try{await r(D)}finally{w.dispose(),o(),K.active=!1,z.image=""}}function fe(){D=null,z.image="",I.active=!1,M.active=!0,e&&(e.confirmPicture=g,e.rejectPicture=g,e.takePicture=J)}async function xe(){await w.initCamera({aspectRatio:v,preferredResolution:C}),M.active=!0,me.active=!0}function de(){e&&(e.confirmPicture=g,e.rejectPicture=g,e.takePicture=g,e.cancel=g),D=null,w.dispose(),a()}let De=d({tag:"div",style:{position:"relative",width:b,height:x},children:[w.element,le.element,u?Ee.element:d({tag:"div"}),z.element,f?M.element:d({tag:"div"}),N?I.element:d({tag:"div"}),G?K.element:d({tag:"div"}),p?me.element:d({tag:"div"})]});return e&&(e.cancel=de,e.takePicture=J),{get element(){return De},initCamera:xe}}var ve=R(E());function F(t){let r=(0,ve.default)({tag:"img",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",objectFit:"cover",opacity:t.length>0?"1":"0",transition:".3s",display:t.length>0?"block":"none"}});t.length>0&&r.setAttribute("src",t);let a={get element(){return r},image:t};return new Proxy(a,{get:(e,n)=>{if(n in e)return e[n]},set(e,n,i){if(n==="element")return!0;if(n==="image"){let s=e.element.getAttribute("src")!=null&&e.element.getAttribute("src").length>0;s&&i.length>0?e.element.setAttribute("src",i):s&&i.length==0?(e.element.style.opacity="0",setTimeout(()=>{e.element.style.display="none",e.element.setAttribute("src","")},300)):!s&&i.length>0&&(e.element.style.opacity="0",e.element.style.display="block",e.element.setAttribute("src",i),setTimeout(()=>{e.element.style.opacity="1"},50)),e.image=i}return!0}})}var be=R(E());function $(t){return`
     <svg preserveAspectRatio="xMidYMin meet" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -16,14 +16,14 @@ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1408 11.3621C12.9871 10.7967 13.982 10.4949 14.9997 10.4949C16.3645 10.4949 17.6734 11.037 18.6384 12.0021C19.6035 12.9671 20.1456 14.276 20.1456 15.6408C20.1456 16.6585 19.8438 17.6534 19.2784 18.4997C18.7129 19.3459 17.9093 20.0055 16.969 20.395C16.0287 20.7844 14.994 20.8863 13.9958 20.6878C12.9976 20.4892 12.0807 19.9991 11.361 19.2795C10.6414 18.5598 10.1513 17.6429 9.95272 16.6447C9.75416 15.6465 9.85607 14.6118 10.2455 13.6715C10.635 12.7312 11.2946 11.9276 12.1408 11.3621ZM16.1279 12.9172C15.5892 12.6941 14.9965 12.6357 14.4246 12.7495C13.8528 12.8632 13.3275 13.144 12.9152 13.5563C12.5029 13.9685 12.2222 14.4938 12.1084 15.0657C11.9947 15.6375 12.0531 16.2302 12.2762 16.7689C12.4993 17.3076 12.8772 17.768 13.3619 18.0919C13.8467 18.4158 14.4167 18.5887 14.9997 18.5887C15.7816 18.5887 16.5314 18.2781 17.0842 17.7253C17.6371 17.1724 17.9477 16.4226 17.9477 15.6408C17.9477 15.0577 17.7748 14.4878 17.4509 14.003C17.1269 13.5182 16.6665 13.1404 16.1279 12.9172Z" fill="${t}"/>
     </svg>
-    `}function j(t){return`
+    `}function V(t){return`
     <svg preserveAspectRatio="xMidYMin meet" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M26.8073 6.52089C26.6436 6.35584 26.4489 6.22483 26.2343 6.13543C26.0197 6.04603 25.7895 6 25.557 6C25.3246 6 25.0944 6.04603 24.8798 6.13543C24.6652 6.22483 24.4705 6.35584 24.3068 6.52089L11.1875 19.6578L5.67561 14.1283C5.50564 13.9641 5.30499 13.835 5.08512 13.7484C4.86525 13.6617 4.63047 13.6192 4.39418 13.6233C4.1579 13.6274 3.92473 13.678 3.70799 13.7722C3.49125 13.8664 3.29519 14.0024 3.131 14.1723C2.96681 14.3423 2.8377 14.543 2.75105 14.7628C2.66441 14.9827 2.62191 15.2175 2.626 15.4538C2.63009 15.6901 2.68068 15.9232 2.77488 16.14C2.86908 16.3567 3.00505 16.5528 3.17502 16.717L9.93718 23.4791C10.1009 23.6442 10.2956 23.7752 10.5102 23.8646C10.7248 23.954 10.955 24 11.1875 24C11.4199 24 11.6501 23.954 11.8647 23.8646C12.0793 23.7752 12.2741 23.6442 12.4378 23.4791L26.8073 9.10953C26.9861 8.94463 27.1287 8.74449 27.2263 8.52173C27.3239 8.29897 27.3743 8.05841 27.3743 7.81521C27.3743 7.57202 27.3239 7.33146 27.2263 7.1087C27.1287 6.88593 26.9861 6.6858 26.8073 6.52089Z" fill="${t}"/>
     </svg>
-    `}function W(t){return`
+    `}function Z(t){return`
     <svg preserveAspectRatio="xMidYMin meet" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M17.1133 14.9987L23.558 8.56902C23.8402 8.2868 23.9988 7.90402 23.9988 7.5049C23.9988 7.10577 23.8402 6.723 23.558 6.44077C23.2758 6.15855 22.893 6 22.4939 6C22.0948 6 21.712 6.15855 21.4298 6.44077L15.0001 12.8855L8.57036 6.44077C8.28813 6.15855 7.90536 6 7.50623 6C7.10711 6 6.72433 6.15855 6.44211 6.44077C6.15989 6.723 6.00134 7.10577 6.00134 7.5049C6.00134 7.90402 6.15989 8.2868 6.44211 8.56902L12.8868 14.9987L6.44211 21.4284C6.30163 21.5678 6.19014 21.7335 6.11405 21.9162C6.03795 22.0988 5.99878 22.2947 5.99878 22.4925C5.99878 22.6904 6.03795 22.8863 6.11405 23.0689C6.19014 23.2516 6.30163 23.4173 6.44211 23.5567C6.58144 23.6971 6.74721 23.8086 6.92984 23.8847C7.11248 23.9608 7.30838 24 7.50623 24C7.70409 24 7.89999 23.9608 8.08262 23.8847C8.26526 23.8086 8.43103 23.6971 8.57036 23.5567L15.0001 17.112L21.4298 23.5567C21.5691 23.6971 21.7349 23.8086 21.9175 23.8847C22.1001 23.9608 22.296 24 22.4939 24C22.6917 24 22.8876 23.9608 23.0703 23.8847C23.2529 23.8086 23.4187 23.6971 23.558 23.5567C23.6985 23.4173 23.81 23.2516 23.8861 23.0689C23.9622 22.8863 24.0013 22.6904 24.0013 22.4925C24.0013 22.2947 23.9622 22.0988 23.8861 21.9162C23.81 21.7335 23.6985 21.5678 23.558 21.4284L17.1133 14.9987Z" fill="${t}"/>
     </svg>
-    `}function $(t){return`
+    `}function U(t){return`
     <svg preserveAspectRatio="xMidYMin meet" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path opacity="0.9" d="M7.5512 13.8107L14.9724 21.6702C15.1351 21.8439 15.3287 21.9818 15.542 22.0759C15.7553 22.1701 15.9841 22.2185 16.2151 22.2185C16.4462 22.2185 16.675 22.1701 16.8882 22.0759C17.1015 21.9818 17.2951 21.8439 17.4578 21.6702C17.7838 21.3229 17.9668 20.8531 17.9668 20.3634C17.9668 19.8737 17.7838 19.4039 17.4578 19.0566L11.2618 12.4946L17.4578 5.93271C17.7838 5.5854 17.9668 5.11559 17.9668 4.62588C17.9668 4.13618 17.7838 3.66636 17.4578 3.31906C17.2943 3.14726 17.1003 3.01134 16.8871 2.9191C16.6738 2.82685 16.4455 2.78009 16.2151 2.7815C15.9848 2.78009 15.7564 2.82685 15.5432 2.9191C15.3299 3.01134 15.136 3.14726 14.9724 3.31906L7.5512 11.1785C7.38714 11.3509 7.25693 11.5559 7.16807 11.7818C7.07921 12.0076 7.03346 12.2499 7.03346 12.4946C7.03346 12.7393 7.07921 12.9816 7.16807 13.2075C7.25693 13.4334 7.38714 13.6384 7.5512 13.8107Z" fill="${t}"/>
     </svg>
-    `}function H(t){let{onClick:r,active:s,style:o}=t,e=(0,le.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:s?"1":"0",pointerEvents:s?"all":"none"},children:[v({backgroundColor:o.backgroundColor,size:o.size,iconColor:o.iconColor,iconSize:o.iconSize,icon:Q(o.iconColor),onPressed:r})]}),n={get element(){return e},active:s};return new Proxy(n,{get:(a,c)=>{if(c in a)return a[c]},set(a,c,m){return c==="element"||c==="active"&&(m?(e.style.opacity="1",e.style.pointerEvents="all"):(e.style.opacity="0",e.style.pointerEvents="none")),!0}})}var V=B(E());function z(t){let{active:r,style:s}=t;function o(m){return(0,V.default)({tag:"div",attributes:{class:"loading_dot"},style:{width:s.dotsSize,height:s.dotsSize,borderRadius:"9999px",background:s.dotsColor,marginRight:m?void 0:s.dotsSpacing,opacity:".5"}})}let e=(0,V.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:r?"1":"0",pointerEvents:r?"all":"none"},children:[(0,V.default)({tag:"div",style:{width:s.size,height:s.size,background:s.backgroundColor,borderRadius:"9999px",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 20px"},children:Array(3).fill(void 0).map((m,l)=>o(l==2))})]}),n={get element(){return e},active:r};function i(){let m=Array.from(e.querySelectorAll(".loading_dot"));m&&typeof document.body.animate<"u"&&m.forEach(l=>{l.getAnimations().forEach(d=>d.cancel())})}function a(){let m=Array.from(e.querySelectorAll(".loading_dot"));m&&typeof document.body.animate<"u"&&m.forEach((l,d)=>{l.animate([{opacity:".5",transform:"scale(.8)"},{opacity:"1",transform:"scale(1)"},{opacity:"1",transform:"scale(1)"},{opacity:".5",transform:"scale(.8)"}],{duration:1e3,iterations:1/0,delay:d*100})})}return r&&a(),new Proxy(n,{get:(m,l)=>{if(l in m)return m[l]},set(m,l,d){return l==="element"||l==="active"&&(i(),d?(e.style.opacity="1",a()):e.style.opacity="0"),!0}})}var ue=B(E());function F(t){let{onFinish:r,onCancel:s,active:o,cancelButtonStyle:e,confirmButtonStyle:n}=t,i=(0,ue.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:o?"1":"0",pointerEvents:o?"all":"none"},children:[v({backgroundColor:e.backgroundColor,size:e.size,iconColor:e.iconColor,iconSize:e.iconSize,icon:W(e.iconColor),onPressed:s}),v({backgroundColor:n.backgroundColor,size:n.size,iconColor:n.iconColor,iconSize:n.iconSize,icon:j(n.iconColor),onPressed:r})]}),a={get element(){return i},active:o};return new Proxy(a,{get:(m,l)=>{if(l in m)return m[l]},set(m,l,d){return l==="element"||l==="active"&&(d?(i.style.opacity="1",i.style.pointerEvents="all"):(i.style.opacity="0",i.style.pointerEvents="none")),!0}})}function A(t){let{onClick:r,active:s,style:o}=t,e=p({tag:"div",style:{position:"absolute",top:"10px",left:"10px",opacity:s?"1":"0",pointerEvents:s?"all":"none"},children:[v({horizontalMargin:"0",backgroundColor:o.backgroundColor,size:o.size,iconColor:o.iconColor,icon:$(o.iconColor),iconSize:o.iconSize,onPressed:r})]}),n={get element(){return e},active:s};return new Proxy(n,{get:(a,c)=>{if(c in a)return a[c]},set(a,c,m){return c==="element"||c==="active"&&(m?(e.style.opacity="1",e.style.pointerEvents="all"):(e.style.opacity="0",e.style.pointerEvents="none")),!0}})}function X(t){let{data:r,request:s,onCancel:o}=t,e=L({onCancel:()=>{r.element.innerHTML="",o()},onFinish:()=>{r.element.innerHTML=""},request:s,...r.styles,...r.cameraPresets,...r.options});r.element.innerHTML="",r.element.appendChild(e.element),e.initCamera()}async function h(t,r){return await Y()?new Promise((o,e)=>{async function n(i){try{let a=await r(i);o(a)}catch(a){throw e(a),a}}X({data:t,onCancel:()=>e(ne),request:n})}):Promise.reject(re)}function fe(t){let{customId:r,face:s,fingers:o}=t,e={Person:{CustomID:r}};if(s&&(e.Person.Face=[{"Face-1":s}]),o){let{finger1:n,finger2:i,finger3:a,finger4:c,finger5:m,finger6:l,finger7:d,finger8:k,finger9:w,finger10:b}=o;e.Person.Fingers=[{"Finger-1":n,"Finger-2":i,"Finger-3":a,"Finger-4":c,"Finger-5":m,"Finger-6":l,"Finger-7":d,"Finger-8":k,"Finger-9":w,"Finger-10":b}]}return e}function C(t){let r=t.split(",");return r.length==2?r[1]:t}var Ae="https://api.biopassid.com";async function g(t){let{url:r,method:s,body:o,token:e}=t,n=await fetch(Ae+r,{method:s,body:o!=null?JSON.stringify(o):void 0,headers:{"Ocp-Apim-Subscription-Key":e,"Content-Type":"application/json"}});if(n.status>=400)throw n;return await n.json()}function x(t){async function r(o){let{params:e,method:n,url:i,biometryRequired:a}=o;if(!e.customId||e.customId.length==0)throw se;if(a&&!e.face&&!e.fingers)throw ie;let c={...e};c.face&&(c.face=C(e.face));let m=fe(c);try{let l=await g({url:i,token:t,method:n,body:m});if(l.Success==!1)throw`generic/${l.Message?l.Message.toLowerCase().split(" ").join("_"):"failed"}`;return l}catch(l){if(typeof l=="string")throw l;if(typeof l=="object"){let d=l;if(typeof d.status=="number"&&d.status==400){let k=await d.text();throw k.length>0?`generic/${k.toLowerCase().replaceAll(" ","_").replaceAll(".","")}`:y}}throw y}}return{async enrollService(o){return r({biometryRequired:!0,method:"POST",params:o,url:"/multibiometrics/enroll"})},async updateService(o){return r({biometryRequired:!0,method:"PUT",params:o,url:"/multibiometrics/update"})},async deleteService(o){return r({biometryRequired:!1,method:"DELETE",params:o,url:"/multibiometrics/delete"})},async verifyService(o){return r({biometryRequired:!0,method:"POST",params:o,url:"/multibiometrics/verify"})},async matchService(o){try{let{artifactA:e,artifactB:n,format:i,type:a}=o,c={Match:{Type:a,Artifact_A:C(e),Artifact_B:C(n),Format:i}};return await g({url:"/multibiometrics/match",token:t,method:"POST",body:c})}catch{throw y}},async extractService(o){try{let{artifact:e,format:n,type:i}=o,a={Extract:{Type:i,Artifact:C(e),Format:n}};return await g({url:"/multibiometrics/extract",token:t,method:"POST",body:a})}catch{throw y}},async wsqEncode(o){try{let{compression:e,image:n,ppi:i}=o,a={Encode:{Compression:e,Image:C(n),PPI:i}};return await g({url:"/multibiometrics/wsq_encode",token:t,method:"POST",body:a})}catch{throw y}},async wsqDecode(o){try{let{picture:e}=o,n={Decode:{Wsq:C(e.base64)}};return await g({url:"/multibiometrics/decode",token:t,method:"POST",body:n})}catch{throw y}},async faceDetectService(o){try{let{picture:e}=o,n={Check:{Image:C(e.base64)}},i=await g({url:"/multibiometrics/face_detect",token:t,method:"POST",body:n});return i.Picture={...e},i}catch{throw y}},async faceSpoofService(o){try{let{picture:e}=o,n={Spoof:{Image:C(e.base64)}};return await g({url:"/multibiometrics/face_spoof",token:t,method:"POST",body:n})}catch{throw y}},async anonymizerService(o){try{let{picture:e}=o,n={Check:{Image:C(e.base64)}};return await g({url:"/multibiometrics/anonymizer",token:t,method:"POST",body:n})}catch{throw y}}}}function ee(t){let{enrollService:r,verifyService:s,updateService:o,deleteService:e,extractService:n,faceDetectService:i,faceSpoofService:a,anonymizerService:c}=x(t);function m(u){return h(u,f=>r({customId:u.customId,face:f.base64}))}function l(u){return h(u,f=>s({customId:u.customId,face:f.base64}))}function d(u){return h(u,f=>o({customId:u.customId,face:f.base64}))}function k(u){return h(u,f=>e({customId:u.customId,face:f.base64}))}async function w(u){return h(u,f=>n({artifact:f.base64,format:u.format,type:"FACE"}))}async function b(u){return h(u,f=>i({picture:f}))}async function S(u){return h(u,f=>a({picture:f}))}async function T(u){return h(u,f=>c({picture:f}))}return{enroll:m,verify:l,updatePerson:d,deletePerson:k,extract:w,faceDetect:b,faceSpoof:S,anonymizer:T}}function D(t){return{async icaoQualityCheckService(s){try{let{picture:o}=s,e={Check:{Image:C(o.base64)}};return await g({url:"/quality/check_icao",token:t,method:"POST",body:e})}catch{throw y}},async icaoCropService(s){try{let{picture:o}=s,e={Check:{Image:C(o.base64)}};return await g({url:"/quality/icao_crop",token:t,method:"POST",body:e})}catch{throw y}},async checkNfiqService(s){try{let{picture:o}=s,e={Check:{Image:C(o.base64)}};return await g({url:"/quality/check_nfiq",token:t,method:"POST",body:e})}catch{throw y}}}}function te(t){let{icaoCropService:r,icaoQualityCheckService:s}=D(t);async function o(n){return h(n,a=>s({picture:a}))}async function e(n){return h(n,a=>r({picture:a}))}return{icaoQualityCheck:o,icaoCrop:e}}typeof window<"u"&&(window.useMultibiometrics=ee,window.useMultibiometricServices=x,window.useQuality=te,window.useQualityServices=D);})();
+    `}var Se=R(E());function T(t,r){return(0,Se.default)({tag:"img",attributes:{src:t},style:{width:r}})}function A(t){let{onClick:r,active:a,style:o}=t,e={backgroundColor:o?.backgroundColor??"white",iconColor:o?.iconColor??"black",iconSize:o?.iconSize??"30px",size:o?.size??"50px",icon:o?.icon??""};console.log(e);let n=(0,be.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:a?"1":"0",pointerEvents:a?"all":"none"},children:[S({backgroundColor:e.backgroundColor,size:e.size,iconColor:e.iconColor,iconSize:e.iconSize,iconElement:e.icon.length>0?[T(e.icon,e.iconSize)]:$(e.iconColor),onPressed:r})]}),i={get element(){return n},active:a};return new Proxy(i,{get:(c,m)=>{if(m in c)return c[m]},set(c,m,l){return m==="element"||m==="active"&&(l?(n.style.opacity="1",n.style.pointerEvents="all"):(n.style.opacity="0",n.style.pointerEvents="none")),!0}})}var Y=R(E());function _(t){let{active:r,style:a}=t,o={backgroundColor:a?.backgroundColor??"white",dotsColor:a?.dotsColor??"black",dotsSize:a?.dotsSize??"5px",dotsSpacing:a?.dotsSpacing??"3px",size:a?.size??"50px"};function e(l){return(0,Y.default)({tag:"div",attributes:{class:"loading_dot"},style:{width:o.dotsSize,height:o.dotsSize,borderRadius:"9999px",background:o.dotsColor,marginRight:l?void 0:o.dotsSpacing,opacity:".5"}})}let n=(0,Y.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:r?"1":"0",pointerEvents:r?"all":"none"},children:[(0,Y.default)({tag:"div",style:{width:o.size,height:o.size,background:o.backgroundColor,borderRadius:"9999px",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 20px"},children:Array(3).fill(void 0).map((l,u)=>e(u==2))})]}),i={get element(){return n},active:r};function s(){let l=Array.from(n.querySelectorAll(".loading_dot"));l&&typeof document.body.animate<"u"&&l.forEach(u=>{u.getAnimations().forEach(p=>p.cancel())})}function c(){let l=Array.from(n.querySelectorAll(".loading_dot"));l&&typeof document.body.animate<"u"&&l.forEach((u,p)=>{u.animate([{opacity:".5",transform:"scale(.8)"},{opacity:"1",transform:"scale(1)"},{opacity:"1",transform:"scale(1)"},{opacity:".5",transform:"scale(.8)"}],{duration:1e3,iterations:1/0,delay:p*100})})}return r&&c(),new Proxy(i,{get:(l,u)=>{if(u in l)return l[u]},set(l,u,p){return u==="element"||u==="active"&&(s(),p?(n.style.opacity="1",c()):n.style.opacity="0"),!0}})}var Te=R(E());function Q(t){let{onFinish:r,onCancel:a,active:o,cancelButtonStyle:e,confirmButtonStyle:n}=t,i={backgroundColor:e?.backgroundColor??"#E84141",iconColor:e?.iconColor??"white",iconSize:e?.iconSize??"30px",size:e?.size??"50px",icon:e?.icon??""},s={backgroundColor:n?.backgroundColor??"white",iconColor:n?.iconColor??"black",iconSize:n?.iconSize??"30px",size:n?.size??"50px",icon:n?.icon??""},c=(0,Te.default)({tag:"div",style:{position:"absolute",bottom:"20px",left:"0",right:"0",display:"flex",alignItems:"center",justifyContent:"center",transition:".3s",opacity:o?"1":"0",pointerEvents:o?"all":"none"},children:[S({backgroundColor:i.backgroundColor,size:i.size,iconColor:i.iconColor,iconSize:i.iconSize,iconElement:i.icon.length>0?[T(i.icon,i.iconSize)]:Z(i.iconColor),onPressed:a}),S({backgroundColor:s.backgroundColor,size:s.size,iconColor:s.iconColor,iconSize:s.iconSize,iconElement:s.icon.length>0?[T(s.icon,s.iconSize)]:V(s.iconColor),onPressed:r})]}),m={get element(){return c},active:o};return new Proxy(m,{get:(u,p)=>{if(p in u)return u[p]},set(u,p,b){return p==="element"||p==="active"&&(b?(c.style.opacity="1",c.style.pointerEvents="all"):(c.style.opacity="0",c.style.pointerEvents="none")),!0}})}function j(t){let{onClick:r,active:a,style:o}=t,e={backgroundColor:o?.backgroundColor??"transparent",iconColor:o?.iconColor??"white",iconSize:o?.iconSize??"30px",size:o?.size??"50px",icon:o?.icon??""},n=d({tag:"div",style:{position:"absolute",top:"10px",left:"10px",opacity:a?"1":"0",pointerEvents:a?"all":"none"},children:[S({horizontalMargin:"0",backgroundColor:e.backgroundColor,size:e.size,iconColor:e.iconColor,iconElement:e.icon.length>0?[T(e.icon,e.iconSize)]:U(e.iconColor),iconSize:e.iconSize,onPressed:r})]}),i={get element(){return n},active:a};return new Proxy(i,{get:(c,m)=>{if(m in c)return c[m]},set(c,m,l){return m==="element"||m==="active"&&(l?(n.style.opacity="1",n.style.pointerEvents="all"):(n.style.opacity="0",n.style.pointerEvents="none")),!0}})}function ae(t){let{data:r,request:a,onCancel:o,controller:e}=t,n=H({onCancel:()=>{r.element.innerHTML="",o()},onFinish:()=>{r.element.innerHTML=""},request:a,controller:e,...r.styles,...r.cameraPresets,...r.options});r.element.innerHTML="",r.element.appendChild(n.element),n.initCamera()}async function k(t,r){return await ee()?new Promise((o,e)=>{async function n(i){try{let s=await r(i);o(s)}catch(s){throw e(s),s}}ae({data:t,onCancel:()=>e(Ce),request:n,controller:t.controller})}):Promise.reject(pe)}function we(t){let{customId:r,face:a,fingers:o}=t,e={Person:{CustomID:r}};if(a&&(e.Person.Face=[{"Face-1":a}]),o){let{finger1:n,finger2:i,finger3:s,finger4:c,finger5:m,finger6:l,finger7:u,finger8:p,finger9:b,finger10:x}=o;e.Person.Fingers=[{"Finger-1":n,"Finger-2":i,"Finger-3":s,"Finger-4":c,"Finger-5":m,"Finger-6":l,"Finger-7":u,"Finger-8":p,"Finger-9":b,"Finger-10":x}]}return e}function y(t){let r=t.split(",");return r.length==2?r[1]:t}var Ye="https://api.biopassid.com";async function P(t){let{url:r,method:a,body:o,token:e}=t,n=await fetch(Ye+r,{method:a,body:o!=null?JSON.stringify(o):void 0,headers:{"Ocp-Apim-Subscription-Key":e,"Content-Type":"application/json"}});if(n.status>=400)throw n;return await n.json()}function O(t){async function r(o){let{params:e,method:n,url:i,biometryRequired:s}=o;if(!e.customId||e.customId.length==0)throw he;if(s&&!e.face&&!e.fingers)throw ye;let c={...e};c.face&&(c.face=y(e.face));let m=we(c);try{let l=await P({url:i,token:t,method:n,body:m});if(l.Success==!1)throw`generic/${l.Message?l.Message.toLowerCase().split(" ").join("_"):"failed"}`;return l}catch(l){if(typeof l=="string")throw l;if(typeof l=="object"){let u=l;if(typeof u.status=="number"&&u.status==400){let p=await u.text();throw p.length>0?`generic/${p.toLowerCase().replaceAll(" ","_").replaceAll(".","")}`:h}}throw h}}return{async enrollService(o){return r({biometryRequired:!0,method:"POST",params:o,url:"/multibiometrics/enroll"})},async updateService(o){return r({biometryRequired:!0,method:"PUT",params:o,url:"/multibiometrics/update"})},async deleteService(o){return r({biometryRequired:!1,method:"DELETE",params:o,url:"/multibiometrics/delete"})},async verifyService(o){return r({biometryRequired:!0,method:"POST",params:o,url:"/multibiometrics/verify"})},async matchService(o){try{let{artifactA:e,artifactB:n,format:i,type:s}=o,c={Match:{Type:s,Artifact_A:y(e),Artifact_B:y(n),Format:i}};return await P({url:"/multibiometrics/match",token:t,method:"POST",body:c})}catch{throw h}},async extractService(o){try{let{artifact:e,format:n,type:i}=o,s={Extract:{Type:i,Artifact:y(e),Format:n}};return await P({url:"/multibiometrics/extract",token:t,method:"POST",body:s})}catch{throw h}},async wsqEncode(o){try{let{compression:e,image:n,ppi:i}=o,s={Encode:{Compression:e,Image:y(n),PPI:i}};return await P({url:"/multibiometrics/wsq_encode",token:t,method:"POST",body:s})}catch{throw h}},async wsqDecode(o){try{let{picture:e}=o,n={Decode:{Wsq:y(e.base64)}};return await P({url:"/multibiometrics/decode",token:t,method:"POST",body:n})}catch{throw h}},async faceDetectService(o){try{let{picture:e}=o,n={Check:{Image:y(e.base64)}},i=await P({url:"/multibiometrics/face_detect",token:t,method:"POST",body:n});return i.Picture={...e},i}catch{throw h}},async faceSpoofService(o){try{let{picture:e}=o,n={Spoof:{Image:y(e.base64)}};return await P({url:"/multibiometrics/face_spoof",token:t,method:"POST",body:n})}catch{throw h}},async anonymizerService(o){try{let{picture:e}=o,n={Check:{Image:y(e.base64)}};return await P({url:"/multibiometrics/anonymizer",token:t,method:"POST",body:n})}catch{throw h}}}}function se(t){let{enrollService:r,verifyService:a,updateService:o,deleteService:e,extractService:n,faceDetectService:i,faceSpoofService:s,anonymizerService:c}=O(t);function m(f){return k(f,C=>r({customId:f.customId,face:C.base64}))}function l(f){return k(f,C=>a({customId:f.customId,face:C.base64}))}function u(f){return k(f,C=>o({customId:f.customId,face:C.base64}))}function p(f){return k(f,C=>e({customId:f.customId,face:C.base64}))}async function b(f){return k(f,C=>n({artifact:C.base64,format:f.format,type:"FACE"}))}async function x(f){return k(f,C=>i({picture:C}))}async function N(f){return k(f,C=>s({picture:C}))}async function G(f){return k(f,C=>c({picture:C}))}return{enroll:m,verify:l,updatePerson:u,deletePerson:p,extract:b,faceDetect:x,faceSpoof:N,anonymizer:G}}function B(t){return{async icaoQualityCheckService(a){try{let{picture:o}=a,e={Check:{Image:y(o.base64)}};return await P({url:"/quality/check_icao",token:t,method:"POST",body:e})}catch{throw h}},async icaoCropService(a){try{let{picture:o}=a,e={Check:{Image:y(o.base64)}};return await P({url:"/quality/icao_crop",token:t,method:"POST",body:e})}catch{throw h}},async checkNfiqService(a){try{let{picture:o}=a,e={Check:{Image:y(o.base64)}};return await P({url:"/quality/check_nfiq",token:t,method:"POST",body:e})}catch{throw h}}}}function ce(t){let{icaoCropService:r,icaoQualityCheckService:a}=B(t);async function o(n){return k(n,s=>a({picture:s}))}async function e(n){return k(n,s=>r({picture:s}))}return{icaoQualityCheck:o,icaoCrop:e}}typeof window<"u"&&(window.useMultibiometrics=se,window.useMultibiometricServices=O,window.useQuality=ce,window.useQualityServices=B,window.cameraController=ie);})();

No alert changes

Improved metrics

Total package byte prevSize

156968

increased by7.84%

Number of package files

58

increased by3.57%

Lines of code

3463

increased by5.23%

No dependency changes