@microblink/blinkinput-in-browser-sdk
Version:
A simple barcode scanning library for WebAssembly-enabled browsers.
4,936 lines • 373 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a39cc62f.js';
import { s as stringToArray, a as stringToObject, b as setWebComponentParts, c as classNames, g as getWebComponentParts, h as hasSupportedImageFiles } from './generic.helpers-ec366719.js';
/*! ****************************************************************************
Copyright (c) Microblink. All rights reserved.
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
***************************************************************************** */
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
let nextMessageID = 0;
function getNextMessageID() {
const msgId = nextMessageID;
nextMessageID = nextMessageID + 1;
return msgId;
}
class BaseRequestMessage {
constructor(action) {
this.action = action;
this.messageID = getNextMessageID();
}
}
class InitMessage extends BaseRequestMessage {
constructor(wasmLoadSettings, userId) {
super(InitMessage.action);
this.wasmModuleName = wasmLoadSettings.wasmModuleName;
this.licenseKey = wasmLoadSettings.licenseKey;
this.userId = userId;
this.registerLoadCallback = wasmLoadSettings.loadProgressCallback !== null;
this.allowHelloMessage = wasmLoadSettings.allowHelloMessage;
this.engineLocation = wasmLoadSettings.engineLocation;
this.wasmType = wasmLoadSettings.wasmType;
this.numberOfWorkers = wasmLoadSettings.numberOfWorkers;
}
}
InitMessage.action = "init";
var ParameterType;
(function (ParameterType) {
ParameterType[ParameterType["Any"] = 0] = "Any";
ParameterType[ParameterType["Recognizer"] = 1] = "Recognizer";
ParameterType[ParameterType["RecognizerSettings"] = 2] = "RecognizerSettings";
ParameterType[ParameterType["Callback"] = 3] = "Callback";
})(ParameterType || (ParameterType = {}));
class CreateNewRecognizer extends BaseRequestMessage {
constructor(className, params) {
super(CreateNewRecognizer.action);
this.className = className;
this.params = params;
}
}
CreateNewRecognizer.action = "createNewNativeObject";
class CreateRecognizerRunner extends BaseRequestMessage {
constructor(recognizerHandles, allowMultipleResults, registeredMetadataCallbacks) {
super(CreateRecognizerRunner.action);
this.recognizerHandles = recognizerHandles;
this.allowMultipleResults = allowMultipleResults;
this.registeredMetadataCallbacks = registeredMetadataCallbacks;
}
}
CreateRecognizerRunner.action = "createRecognizerRunner";
class ReconfigureRecognizerRunner extends BaseRequestMessage {
constructor(recognizerHandles, allowMultipleResults) {
super(ReconfigureRecognizerRunner.action);
this.recognizerHandles = recognizerHandles;
this.allowMultipleResults = allowMultipleResults;
}
}
ReconfigureRecognizerRunner.action = "reconfigureRecognizerRunner";
class DeleteRecognizerRunner extends BaseRequestMessage {
constructor() {
super(DeleteRecognizerRunner.action);
}
}
DeleteRecognizerRunner.action = "deleteRecognizerRunner";
class InvokeObjectMethod extends BaseRequestMessage {
constructor(objectHandle, methodName, params) {
super(InvokeObjectMethod.action);
this.objectHandle = objectHandle;
this.methodName = methodName;
this.params = params;
}
}
InvokeObjectMethod.action = "invokeObject";
class ProcessImage extends BaseRequestMessage {
constructor(image) {
super(ProcessImage.action);
this.frame = image;
}
getTransferrables() {
return [this.frame.imageData.data.buffer];
}
}
ProcessImage.action = "processImage";
class ResetRecognizers extends BaseRequestMessage {
constructor(hardReset) {
super(ResetRecognizers.action);
this.hardReset = hardReset;
}
}
ResetRecognizers.action = "resetRecognizers";
class RegisteredMetadataCallbacks {
constructor() {
this.onDebugText = false;
this.onDetectionFailed = false;
this.onQuadDetection = false;
this.onPointsDetection = false;
this.onFirstSideResult = false;
this.onGlare = false;
}
}
class RegisterMetadataCallbacks extends BaseRequestMessage {
constructor(registeredMetadataCallbacks) {
super(RegisterMetadataCallbacks.action);
this.registeredMetadataCallbacks = registeredMetadataCallbacks;
}
}
RegisterMetadataCallbacks.action = "registerMetadataCallbacks";
class SetDetectionOnly extends BaseRequestMessage {
constructor(detectionOnlyMode) {
super(SetDetectionOnly.action);
this.detectionOnlyMode = detectionOnlyMode;
}
}
SetDetectionOnly.action = "setDetectionOnly";
class SetClearTimeoutCallback extends BaseRequestMessage {
constructor(callbackNonEmpty) {
super(SetClearTimeoutCallback.action);
this.callbackNonEmpty = callbackNonEmpty;
}
}
SetClearTimeoutCallback.action = "setClearTimeoutCallback";
class SetCameraPreviewMirrored extends BaseRequestMessage {
constructor(cameraPreviewMirrored) {
super(SetCameraPreviewMirrored.action);
this.cameraPreviewMirrored = cameraPreviewMirrored;
}
}
SetCameraPreviewMirrored.action = "setCameraPreviewMirrored";
// ===================================== /
// Metadata callback messages
// ===================================== /
var MetadataCallback;
(function (MetadataCallback) {
MetadataCallback[MetadataCallback["onDebugText"] = 0] = "onDebugText";
MetadataCallback[MetadataCallback["onDetectionFailed"] = 1] = "onDetectionFailed";
MetadataCallback[MetadataCallback["onQuadDetection"] = 2] = "onQuadDetection";
MetadataCallback[MetadataCallback["onPointsDetection"] = 3] = "onPointsDetection";
MetadataCallback[MetadataCallback["onFirstSideResult"] = 4] = "onFirstSideResult";
MetadataCallback[MetadataCallback["clearTimeoutCallback"] = 5] = "clearTimeoutCallback";
MetadataCallback[MetadataCallback["onGlare"] = 6] = "onGlare";
MetadataCallback[MetadataCallback["recognizerCallback"] = 7] = "recognizerCallback";
})(MetadataCallback || (MetadataCallback = {}));
/* eslint-enable @typescript-eslint/no-explicit-any */
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Defines the type of the WASM that will be loaded.
*/
var WasmType;
(function (WasmType) {
/**
* The WASM that will be loaded will be most compatible with all browsers that
* support the WASM, but will lack features that could be used to improve performance.
*/
WasmType["Basic"] = "BASIC";
/**
* The WASM that will be loaded will be built with advanced WASM features, such as
* bulk memory, SIMD, non-trapping floating point and sign extension. Such WASM can only
* be executed in browsers that support those features. Attempting to run this
* WASM in a non-compatible browser will crash your app.
*/
WasmType["Advanced"] = "ADVANCED";
/**
* The WASM that will be loaded will be build with advanced WASM features, just
* like above. Additionally, it will be also built with support for multi-threaded
* processing. This feature requires a browser with support for both advanced WASM
* features and `SharedArrayBuffer`
*/
WasmType["AdvancedWithThreads"] = "ADVANCED_WITH_THREADS";
})(WasmType || (WasmType = {}));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
const defaultWasmModuleName = "BlinkInputWasmSDK";
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function defaultEventHandler(resolve, reject) {
return (msg) => {
const resultMsg = msg;
if (resultMsg.success) {
resolve();
}
else {
reject(resultMsg.error);
}
};
}
function defaultResultEventHandler(successResolver, reject) {
return (msg) => {
const resultMsg = msg;
if (resultMsg.success) {
successResolver(msg);
}
else {
reject(resultMsg.error);
}
};
}
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment */
function wrapParameters(params) {
// convert params
const wrappedPrameters = [];
for (let param of params) {
let paramType = ParameterType.Any;
if (param instanceof RemoteRecognizer) {
paramType = ParameterType.Recognizer;
param = param.getRemoteObjectHandle();
}
wrappedPrameters.push({
parameter: param,
type: paramType
});
}
return wrappedPrameters;
}
/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment */
class RemoteRecognizer {
/* eslint-enable lines-between-class-members */
constructor(wasmWorker, recognizerName, remoteObjHandle) {
this.wasmSDKWorker = wasmWorker;
this.objectHandle = remoteObjHandle;
this.recognizerName = recognizerName;
this.callbacks = new Map();
}
/* eslint-enable @typescript-eslint/ban-types */
getRemoteObjectHandle() {
return this.objectHandle;
}
currentSettings() {
return new Promise((resolve, reject) => {
if (this.objectHandle < 0) {
reject("Invalid object handle: " + this.objectHandle.toString());
return;
}
const msg = new InvokeObjectMethod(this.objectHandle, "currentSettings", []);
const handler = defaultResultEventHandler((msg) => {
resolve(msg.result);
}, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
toJSON() {
{
// native module does not support toJSON method
return Promise.resolve(null);
}
}
clearAllCallbacks() {
this.callbacks.clear();
this.wasmSDKWorker.unregisterRecognizerCallbacks(this.objectHandle);
}
/* eslint-disable @typescript-eslint/no-explicit-any,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-return
*/
// convert each function member into wrapped parameter, containing address where callback needs to be delivered
removeFunctions(settings) {
// clear any existing callbacks
this.clearAllCallbacks();
const keys = Object.keys(settings);
let needsRegistering = false;
for (const key of keys) {
const data = settings[key];
if (typeof data === "function") {
this.callbacks.set(key, data);
const wrappedFunction = {
parameter: {
recognizerHandle: this.objectHandle,
callbackName: key
},
type: ParameterType.Callback
};
settings[key] = wrappedFunction;
needsRegistering = true;
}
}
if (needsRegistering) {
this.wasmSDKWorker.registerRecognizerCallbacks(this.objectHandle, this);
}
return settings;
}
/* eslint-enable @typescript-eslint/no-explicit-any,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-return
*/
updateSettings(newSettings) {
return new Promise((resolve, reject) => {
if (this.objectHandle < 0) {
reject("Invalid object handle: " + this.objectHandle.toString());
return;
}
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
const msg = new InvokeObjectMethod(this.objectHandle, "updateSettings", [
{
parameter: this.removeFunctions(newSettings),
type: ParameterType.RecognizerSettings
}
]);
/* eslint-enable @typescript-eslint/no-unsafe-assignment */
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
/* eslint-disable @typescript-eslint/no-explicit-any */
invokeCallback(callbackName, args) {
const callback = this.callbacks.get(callbackName);
if (callback !== undefined) {
callback(...args);
}
else {
console.warn("Cannot find callback", callbackName);
}
}
/* eslint-enable @typescript-eslint/no-explicit-any */
getResult() {
return new Promise((resolve, reject) => {
if (this.objectHandle < 0) {
reject("Invalid object handle: " + this.objectHandle.toString());
return;
}
const msg = new InvokeObjectMethod(this.objectHandle, "getResult", []);
const handler = defaultResultEventHandler((msg) => {
resolve(msg.result);
}, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
delete() {
return new Promise((resolve, reject) => {
if (this.objectHandle < 0) {
reject("Invalid object handle: " + this.objectHandle.toString());
return;
}
this.clearAllCallbacks();
const msg = new InvokeObjectMethod(this.objectHandle, "delete", []);
const handler = defaultEventHandler(() => {
this.objectHandle = -1;
resolve();
}, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
}
function createRegisteredCallbacks(metadataCallbacks) {
const msg = new RegisteredMetadataCallbacks();
// https://stackoverflow.com/a/20093686/213057
msg.onDebugText = !!metadataCallbacks.onDebugText;
msg.onDetectionFailed = !!metadataCallbacks.onDetectionFailed;
msg.onPointsDetection = !!metadataCallbacks.onPointsDetection;
msg.onQuadDetection = !!metadataCallbacks.onQuadDetection;
msg.onFirstSideResult = !!metadataCallbacks.onFirstSideResult;
msg.onGlare = !!metadataCallbacks.onGlare;
return msg;
}
class RemoteRecognizerRunner {
constructor(wasmWorker) {
this.deleted = false;
this.wasmSDKWorker = wasmWorker;
}
processImage(image) {
return new Promise((resolve, reject) => {
if (this.deleted) {
reject("Recognizer runner is deleted. It cannot be used anymore!");
return;
}
const msg = new ProcessImage(image);
const handler = defaultResultEventHandler((response) => {
const state = response.recognitionState;
resolve(state);
}, reject);
this.wasmSDKWorker.postTransferrableMessage(msg, handler);
});
}
reconfigureRecognizers(recognizers, allowMultipleResults) {
return new Promise((resolve, reject) => {
if (this.deleted) {
reject("Recognizer runner is deleted. It cannot be used anymore!");
return;
}
const recognizerHandles = getRecognizerHandles(recognizers);
const msg = new ReconfigureRecognizerRunner(recognizerHandles, allowMultipleResults);
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
setMetadataCallbacks(metadataCallbacks) {
return new Promise((resolve, reject) => {
const msg = new RegisterMetadataCallbacks(createRegisteredCallbacks(metadataCallbacks));
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessageAndRegisterCallbacks(msg, metadataCallbacks, handler);
});
}
resetRecognizers(hardReset) {
return new Promise((resolve, reject) => {
const msg = new ResetRecognizers(hardReset);
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
setDetectionOnlyMode(detectionOnly) {
return new Promise((resolve, reject) => {
const msg = new SetDetectionOnly(detectionOnly);
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
setClearTimeoutCallback(clearTimeoutCallback) {
return new Promise((resolve, reject) => {
const msg = new SetClearTimeoutCallback(clearTimeoutCallback !== null);
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.registerClearTimeoutCallback(clearTimeoutCallback);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
setCameraPreviewMirrored(mirrored) {
return new Promise((resolve, reject) => {
const msg = new SetCameraPreviewMirrored(mirrored);
const handler = defaultEventHandler(resolve, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
delete() {
if (this.deleted) {
return Promise.reject("Recognizer runner is already deleted.");
}
return new Promise((resolve, reject) => {
const msg = new DeleteRecognizerRunner();
const handler = defaultEventHandler(() => {
this.deleted = true;
resolve();
}, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
}
function getRecognizerHandles(remoteRecognizers) {
const recognizerHandles = [];
for (const remoteRecognizer of remoteRecognizers) {
recognizerHandles.push(remoteRecognizer.getRemoteObjectHandle());
}
return recognizerHandles;
}
class WasmModuleWorkerProxy {
constructor(wasmSDKWorker) {
this.wasmSDKWorker = wasmSDKWorker;
}
createRecognizerRunner(recognizers, allowMultipleResults = false, metadataCallbacks = {}) {
return new Promise((resolve, reject) => {
const recognizerHandles = getRecognizerHandles(recognizers);
const msg = new CreateRecognizerRunner(recognizerHandles, allowMultipleResults, createRegisteredCallbacks(metadataCallbacks));
const handler = defaultEventHandler(() => {
resolve(new RemoteRecognizerRunner(this.wasmSDKWorker));
}, reject);
this.wasmSDKWorker.postMessageAndRegisterCallbacks(msg, metadataCallbacks, handler);
});
}
/* eslint-disable @typescript-eslint/no-explicit-any */
newRecognizer(className, ...constructorArgs) {
return new Promise((resolve, reject) => {
const msg = new CreateNewRecognizer(className, wrapParameters(constructorArgs));
const handler = defaultResultEventHandler((msg) => {
const remoteRecognizer = new RemoteRecognizer(this.wasmSDKWorker, className, msg.objectHandle);
resolve(remoteRecognizer);
}, reject);
this.wasmSDKWorker.postMessage(msg, handler);
});
}
}
class WasmSDKWorker {
/* eslint-enable lines-between-class-members */
constructor(worker, loadProgressCallback, rejectHandler) {
this.eventHandlers = {};
this.metadataCallbacks = {};
this.clearTimeoutCallback = null;
this.loadedWasmType = WasmType.Basic; // will be updated after WASM gets loaded
this.mbWasmWorker = worker;
this.mbWasmWorker.onmessage = (event) => { this.handleWorkerEvent(event); };
this.mbWasmWorker.onerror = () => {
rejectHandler("Problem during initialization of worker file!");
return;
};
this.mbWasmModule = new WasmModuleWorkerProxy(this);
this.loadCallback = loadProgressCallback;
this.recognizersWithCallbacks = new Map();
this.showOverlay = false;
}
postMessage(message, eventHandler) {
this.eventHandlers[message.messageID] = eventHandler;
this.mbWasmWorker.postMessage(message);
}
postTransferrableMessage(message, eventHandler) {
this.eventHandlers[message.messageID] = eventHandler;
this.mbWasmWorker.postMessage(message, message.getTransferrables());
}
postMessageAndRegisterCallbacks(message, metadataCallbacks, eventHandler) {
this.eventHandlers[message.messageID] = eventHandler;
this.metadataCallbacks = metadataCallbacks;
this.mbWasmWorker.postMessage(message);
}
registerClearTimeoutCallback(callback) {
this.clearTimeoutCallback = callback;
}
registerRecognizerCallbacks(remoteRecognizerHandle, recognizer) {
this.recognizersWithCallbacks.set(remoteRecognizerHandle, recognizer);
}
unregisterRecognizerCallbacks(remoteRecognizerHandle) {
this.recognizersWithCallbacks.delete(remoteRecognizerHandle);
}
/**
* Clean up the active instance of the SDK.
*
* It's not possible to use the SDK after this method is called.
*/
delete() {
this.mbWasmWorker.terminate();
}
handleWorkerEvent(event) {
if ("isCallbackMessage" in event.data) {
const msg = event.data;
switch (msg.callbackType) {
case MetadataCallback.onDebugText:
if (typeof this.metadataCallbacks.onDebugText === "function") {
this.metadataCallbacks.onDebugText(msg.callbackParameters[0]);
}
break;
case MetadataCallback.onDetectionFailed:
if (typeof this.metadataCallbacks.onDetectionFailed === "function") {
this.metadataCallbacks.onDetectionFailed();
}
break;
case MetadataCallback.onPointsDetection:
if (typeof this.metadataCallbacks.onPointsDetection === "function") {
this.metadataCallbacks.onPointsDetection(msg.callbackParameters[0]);
}
break;
case MetadataCallback.onQuadDetection:
if (typeof this.metadataCallbacks.onQuadDetection === "function") {
this.metadataCallbacks.onQuadDetection(msg.callbackParameters[0]);
}
break;
case MetadataCallback.onFirstSideResult:
if (typeof this.metadataCallbacks.onFirstSideResult === "function") {
this.metadataCallbacks.onFirstSideResult();
}
break;
case MetadataCallback.clearTimeoutCallback:
if (this.clearTimeoutCallback && typeof this.clearTimeoutCallback.onClearTimeout === "function") {
this.clearTimeoutCallback.onClearTimeout();
}
break;
case MetadataCallback.onGlare:
if (typeof this.metadataCallbacks.onGlare === "function") {
this.metadataCallbacks.onGlare(msg.callbackParameters[0]);
}
break;
case MetadataCallback.recognizerCallback:
{
// first parameter is address, other parameters are callback parameters
const address = msg.callbackParameters.shift();
const recognizer = this.recognizersWithCallbacks.get(address.recognizerHandle);
if (recognizer !== undefined) {
recognizer.invokeCallback(address.callbackName, msg.callbackParameters);
}
else {
console.warn("Cannot find recognizer to deliver callback message. Maybe it's destroyed?", address);
}
break;
}
default:
throw new Error(`Unknown callback type: ${MetadataCallback[msg.callbackType]}`);
}
}
else if ("isLoadProgressMessage" in event.data) {
const msg = event.data;
if (typeof this.loadCallback === "function") {
this.loadCallback(msg.progress);
}
}
else {
const msg = event.data;
const eventHandler = this.eventHandlers[msg.messageID];
delete this.eventHandlers[msg.messageID];
eventHandler(msg);
}
}
static createWasmWorker(worker, wasmLoadSettings, userId) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve, reject) => {
const wasmWorker = new WasmSDKWorker(worker, wasmLoadSettings.loadProgressCallback, reject);
const initMessage = new InitMessage(wasmLoadSettings, userId);
const initEventHandler = defaultResultEventHandler((msg) => {
const successMsg = msg;
wasmWorker.showOverlay = successMsg.showOverlay;
wasmWorker.loadedWasmType = successMsg.wasmType;
resolve(wasmWorker);
},
/* eslint-disable @typescript-eslint/no-explicit-any */
(error) => {
if (wasmWorker && typeof wasmWorker.delete === "function") {
wasmWorker.delete();
}
reject(error);
}
/* eslint-enable @typescript-eslint/no-explicit-any */
);
wasmWorker.postMessage(initMessage, initEventHandler);
});
});
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/* eslint-disable @typescript-eslint/no-explicit-any,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/explicit-module-boundary-types */
class SDKError {
constructor(error, details) {
if (!error.code || !error.message) {
throw new Error("Instance of SDKError is required to have code and message.");
}
this.message = error.message;
this.code = error.code;
this.details = details;
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/* eslint-disable max-len */
/**
* Structures of Error Codes, Error Messages, and CustomError compatible objects for the Error Generator utility.
* Error Code convention: SECTION_OBJECT_(ACTION)_PROBLEM
*/
var ErrorCodes$1;
(function (ErrorCodes) {
ErrorCodes["WORKER_WASM_LOAD_FAILURE"] = "WORKER_WASM_LOAD_FAILURE";
ErrorCodes["WORKER_WASM_INIT_MISSING"] = "WORKER_WASM_INIT_MISSING";
ErrorCodes["WORKER_FUNCTION_INVOKE_FAILURE"] = "WORKER_FUNCTION_INVOKE_FAILURE";
ErrorCodes["WORKER_RECOGNIZER_CREATION_FAILURE"] = "WORKER_RECOGNIZER_CREATION_FAILURE";
ErrorCodes["WORKER_RUNNER_EXISTS"] = "WORKER_RUNNER_EXISTS";
ErrorCodes["WORKER_RUNNER_CREATION_FAILURE"] = "WORKER_RUNNER_CREATION_FAILURE";
ErrorCodes["WORKER_RUNNER_MISSING"] = "WORKER_RUNNER_MISSING";
ErrorCodes["WORKER_RUNNER_RECONFIGURE_FAILURE"] = "WORKER_RUNNER_RECONFIGURE_FAILURE";
ErrorCodes["WORKER_RUNNER_DELETED"] = "WORKER_RUNNER_DELETED";
ErrorCodes["WORKER_RUNNER_DELETE_FAILURE"] = "WORKER_RUNNER_DELETE_FAILURE";
ErrorCodes["WORKER_OBJECT_INVOKE_FAILURE"] = "WORKER_OBJECT_INVOKE_FAILURE";
ErrorCodes["WORKER_IMAGE_PROCESS_FAILURE"] = "WORKER_IMAGE_PROCESS_FAILURE";
ErrorCodes["WORKER_HANDLE_UNDEFINED"] = "WORKER_HANDLE_UNDEFINED";
ErrorCodes["WORKER_MESSAGE_ACTION_UNKNOWN"] = "WORKER_MESSAGE_ACTION_UNKNOWN";
ErrorCodes["WORKER_LICENSE_UNLOCK_ERROR"] = "WORKER_LICENSE_UNLOCK_ERROR";
ErrorCodes["LOCAL_SDK_RUNNER_MISSING"] = "LOCAL_SDK_RUNNER_MISSING";
ErrorCodes["LOCAL_SDK_RUNNER_EMPTY"] = "LOCAL_SDK_RUNNER_EMPTY";
ErrorCodes["LICENSE_UNLOCK_ERROR"] = "LICENSE_UNLOCK_ERROR";
ErrorCodes["FRAME_CAPTURE_SVG_UNSUPPORTED"] = "FRAME_CAPTURE_SVG_UNSUPPORTED";
ErrorCodes["FRAME_CAPTURE_CANVAS_MISSING"] = "FRAME_CAPTURE_CANVAS_MISSING";
ErrorCodes["SDK_WASM_SETTINGS_MISSING"] = "SDK_WASM_SETTINGS_MISSING";
ErrorCodes["SDK_LICENSE_KEY_MISSING"] = "SDK_LICENSE_KEY_MISSING";
ErrorCodes["SDK_WASM_MODULE_NAME_MISSING"] = "SDK_WASM_MODULE_NAME_MISSING";
ErrorCodes["SDK_ENGINE_LOCATION_INVALID"] = "SDK_ENGINE_LOCATION_INVALID";
ErrorCodes["SDK_MISSING"] = "SDK_MISSING";
ErrorCodes["SDK_RECOGNIZERS_MISSING"] = "SDK_RECOGNIZERS_MISSING";
ErrorCodes["VIDEO_RECOGNIZER_ELEMENT_MISSING"] = "VIDEO_RECOGNIZER_ELEMENT_MISSING";
ErrorCodes["VIDEO_RECOGNIZER_CAMERA_MISSING"] = "VIDEO_RECOGNIZER_CAMERA_MISSING";
ErrorCodes["VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED"] = "VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED";
ErrorCodes["VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE"] = "VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE";
ErrorCodes["VIDEO_RECOGNIZER_CAMERA_IN_USE"] = "VIDEO_RECOGNIZER_CAMERA_IN_USE";
ErrorCodes["VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED"] = "VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED";
ErrorCodes["VIDEO_RECOGNIZER_FEED_RELEASED"] = "VIDEO_RECOGNIZER_FEED_RELEASED";
ErrorCodes["VIDEO_RECOGNIZER_FEED_NOT_PAUSED"] = "VIDEO_RECOGNIZER_FEED_NOT_PAUSED";
ErrorCodes["VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED"] = "VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED";
ErrorCodes["VIDEO_RECOGNIZER_FEED_PAUSED"] = "VIDEO_RECOGNIZER_FEED_PAUSED";
ErrorCodes["VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE"] = "VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE";
ErrorCodes["VIDEO_RECOGNIZER_FEED_MISSING"] = "VIDEO_RECOGNIZER_FEED_MISSING";
})(ErrorCodes$1 || (ErrorCodes$1 = {}));
var ErrorMessages$1;
(function (ErrorMessages) {
ErrorMessages["WORKER_HANDLE_UNDEFINED"] = "Cannot find object with handle: undefined";
ErrorMessages["WORKER_WASM_LOAD_FAILURE"] = "Failed to load WASM in web worker!";
ErrorMessages["WORKER_WASM_INIT_MISSING"] = "WASM module is not initialized!";
ErrorMessages["WORKER_FUNCTION_INVOKE_FAILURE"] = "Failed to invoke function!";
ErrorMessages["WORKER_RECOGNIZER_CREATION_FAILURE"] = "Failed to create new recognizer!";
ErrorMessages["WORKER_RUNNER_EXISTS"] = "Recognizer runner is already created! Multiple instances are not allowed!";
ErrorMessages["WORKER_RUNNER_CREATION_FAILURE"] = "Failed to create new recognizer runner!";
ErrorMessages["WORKER_RUNNER_MISSING"] = "Recognizer runner is not created! There is nothing to reconfigure!";
ErrorMessages["WORKER_RUNNER_RECONFIGURE_FAILURE"] = "Failed to reconfigure recognizer runner!";
ErrorMessages["WORKER_RUNNER_DELETED"] = "Recognizer runner is already deleted!";
ErrorMessages["WORKER_RUNNER_DELETE_FAILURE"] = "Failed to delete recognizer runner!";
ErrorMessages["WORKER_OBJECT_INVOKE_FAILURE"] = "Failed to invoke object!";
ErrorMessages["WORKER_IMAGE_PROCESS_FAILURE"] = "Recognizer runner is not initialized! Cannot process image!";
ErrorMessages["LOCAL_SDK_RUNNER_MISSING"] = "Property nativeRecognizerRunner is not available!";
ErrorMessages["LOCAL_SDK_RUNNER_EMPTY"] = "Native RecognizerRunner cannot be empty!";
ErrorMessages["LICENSE_TOKEN_STATE_INCORRECT"] = "Internal error (Incorrect token state)";
ErrorMessages["LICENSE_PAYLOAD_VERIFICATION_FAILED"] = "Failed to verify server permission's digital signature!";
ErrorMessages["LICENSE_PAYLOAD_CORRUPTED"] = "Server permission payload is corrupted!";
ErrorMessages["LICENSE_PERMISSION_EXPIRED"] = "Internal error (server permission expired)";
ErrorMessages["LICENSE_REMOTE_LOCKED"] = "Provided license key has been remotely locked. Please contact support for more information!";
ErrorMessages["FRAME_CAPTURE_SVG_UNSUPPORTED"] = "Recognition of SVG elements not supported!";
ErrorMessages["FRAME_CAPTURE_CANVAS_MISSING"] = "Could not get canvas 2d context!";
ErrorMessages["SDK_WASM_SETTINGS_MISSING"] = "Missing WASM load settings!";
ErrorMessages["SDK_LICENSE_KEY_MISSING"] = "Missing license key!";
ErrorMessages["SDK_WASM_MODULE_NAME_MISSING"] = "Missing WASM module name!";
ErrorMessages["SDK_ENGINE_LOCATION_INVALID"] = "Setting property 'engineLocation' must be a string!";
ErrorMessages["SDK_MISSING"] = "SDK is not provided!";
ErrorMessages["SDK_RECOGNIZERS_MISSING"] = "To create RecognizerRunner at least 1 recognizer is required.";
ErrorMessages["VIDEO_RECOGNIZER_ELEMENT_MISSING"] = "Video element, i.e. camera feed is not provided!";
ErrorMessages["VIDEO_RECOGNIZER_CAMERA_MISSING"] = "Camera not found!";
ErrorMessages["VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED"] = "Camera not allowed!";
ErrorMessages["VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE"] = "Camera not available!";
ErrorMessages["VIDEO_RECOGNIZER_CAMERA_IN_USE"] = "Camera in use!";
ErrorMessages["VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED"] = "Media devices not supported by browser.";
ErrorMessages["VIDEO_RECOGNIZER_FEED_RELEASED"] = "The associated video feed has been released!";
ErrorMessages["VIDEO_RECOGNIZER_FEED_NOT_PAUSED"] = "The associated video feed is not paused. Use resumeRecognition instead!";
ErrorMessages["VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED"] = "The play() request was interrupted or prevented by browser security rules!";
ErrorMessages["VIDEO_RECOGNIZER_FEED_PAUSED"] = "Cannot resume recognition while video feed is paused! Use recognize or startRecognition";
ErrorMessages["VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE"] = "Could not reset recognizers!";
ErrorMessages["VIDEO_RECOGNIZER_FEED_MISSING"] = "Missing video feed!";
})(ErrorMessages$1 || (ErrorMessages$1 = {}));
const videoRecognizerErrors = {
feedMissing: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_FEED_MISSING,
code: ErrorCodes$1.VIDEO_RECOGNIZER_FEED_MISSING,
},
recognizersResetFailure: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE,
code: ErrorCodes$1.VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE,
},
feedPaused: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_FEED_PAUSED,
code: ErrorCodes$1.VIDEO_RECOGNIZER_FEED_PAUSED,
},
playRequestInterrupted: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED,
code: ErrorCodes$1.VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED,
},
videoFeedNotPaused: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_FEED_NOT_PAUSED,
code: ErrorCodes$1.VIDEO_RECOGNIZER_FEED_NOT_PAUSED,
},
videoFeedReleased: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_FEED_RELEASED,
code: ErrorCodes$1.VIDEO_RECOGNIZER_FEED_RELEASED,
},
mediaDevicesUnsupported: {
code: ErrorCodes$1.VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED,
message: ErrorMessages$1.VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED,
},
cameraMissing: {
code: ErrorCodes$1.VIDEO_RECOGNIZER_CAMERA_MISSING,
message: ErrorMessages$1.VIDEO_RECOGNIZER_CAMERA_MISSING,
},
elementMissing: {
message: ErrorMessages$1.VIDEO_RECOGNIZER_ELEMENT_MISSING,
code: ErrorCodes$1.VIDEO_RECOGNIZER_ELEMENT_MISSING,
},
};
const sdkErrors = {
wasmSettingsMissing: {
message: ErrorMessages$1.SDK_WASM_SETTINGS_MISSING,
code: ErrorCodes$1.SDK_WASM_SETTINGS_MISSING,
},
licenseKeyMissing: {
message: ErrorMessages$1.SDK_LICENSE_KEY_MISSING,
code: ErrorCodes$1.SDK_LICENSE_KEY_MISSING,
},
wasmModuleNameMissing: {
message: ErrorMessages$1.SDK_WASM_MODULE_NAME_MISSING,
code: ErrorCodes$1.SDK_WASM_MODULE_NAME_MISSING,
},
engineLocationInvalid: {
message: ErrorMessages$1.SDK_ENGINE_LOCATION_INVALID,
code: ErrorCodes$1.SDK_ENGINE_LOCATION_INVALID,
},
missing: {
message: ErrorMessages$1.SDK_MISSING,
code: ErrorCodes$1.SDK_MISSING,
},
recognizersMissing: {
message: ErrorMessages$1.SDK_RECOGNIZERS_MISSING,
code: ErrorCodes$1.SDK_RECOGNIZERS_MISSING,
},
};
const frameCaptureErrors = {
svgUnsupported: {
message: ErrorMessages$1.FRAME_CAPTURE_SVG_UNSUPPORTED,
code: ErrorCodes$1.FRAME_CAPTURE_SVG_UNSUPPORTED,
},
canvasMissing: {
message: ErrorMessages$1.FRAME_CAPTURE_CANVAS_MISSING,
code: ErrorCodes$1.FRAME_CAPTURE_CANVAS_MISSING,
},
};
const licenseErrors = {
licenseTokenStateIncorrect: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
message: ErrorMessages$1.LICENSE_TOKEN_STATE_INCORRECT,
},
licensePayloadVerificationFailed: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
message: ErrorMessages$1.LICENSE_PAYLOAD_VERIFICATION_FAILED,
},
licensePayloadCorrupted: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
message: ErrorMessages$1.LICENSE_PAYLOAD_CORRUPTED,
},
licensePermissionExpired: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
message: ErrorMessages$1.LICENSE_PERMISSION_EXPIRED,
},
licenseRemoteLocked: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
message: ErrorMessages$1.LICENSE_REMOTE_LOCKED,
},
licenseNetworkError: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
},
licenseInvalid: {
code: ErrorCodes$1.LICENSE_UNLOCK_ERROR,
},
};
const localSdkErrors = {
runnerMissing: {
message: ErrorMessages$1.LOCAL_SDK_RUNNER_MISSING,
code: ErrorCodes$1.LOCAL_SDK_RUNNER_MISSING,
},
runnerEmpty: {
message: ErrorMessages$1.LOCAL_SDK_RUNNER_EMPTY,
code: ErrorCodes$1.LOCAL_SDK_RUNNER_EMPTY,
},
};
const workerErrors = {
imageProcessFailure: {
message: ErrorMessages$1.WORKER_IMAGE_PROCESS_FAILURE,
code: ErrorCodes$1.WORKER_IMAGE_PROCESS_FAILURE,
},
objectInvokeFailure: {
message: ErrorMessages$1.WORKER_OBJECT_INVOKE_FAILURE,
code: ErrorCodes$1.WORKER_OBJECT_INVOKE_FAILURE,
},
runnerDeleteFailure: {
message: ErrorMessages$1.WORKER_RUNNER_DELETE_FAILURE,
code: ErrorCodes$1.WORKER_RUNNER_DELETE_FAILURE,
},
runnerDeleted: {
message: ErrorMessages$1.WORKER_RUNNER_DELETED,
code: ErrorCodes$1.WORKER_RUNNER_DELETED,
},
runnerReconfigureFailure: {
message: ErrorMessages$1.WORKER_RUNNER_RECONFIGURE_FAILURE,
code: ErrorCodes$1.WORKER_RUNNER_RECONFIGURE_FAILURE,
},
runnerMissing: {
message: ErrorMessages$1.WORKER_RUNNER_MISSING,
code: ErrorCodes$1.WORKER_RUNNER_MISSING,
},
runnerCreationFailure: {
message: ErrorMessages$1.WORKER_RUNNER_CREATION_FAILURE,
code: ErrorCodes$1.WORKER_RUNNER_CREATION_FAILURE,
},
runnerExists: {
message: ErrorMessages$1.WORKER_RUNNER_EXISTS,
code: ErrorCodes$1.WORKER_RUNNER_EXISTS,
},
recognizerCreationFailure: {
message: ErrorMessages$1.WORKER_RECOGNIZER_CREATION_FAILURE,
code: ErrorCodes$1.WORKER_RECOGNIZER_CREATION_FAILURE,
},
functionInvokeFailure: {
message: ErrorMessages$1.WORKER_FUNCTION_INVOKE_FAILURE,
code: ErrorCodes$1.WORKER_FUNCTION_INVOKE_FAILURE,
},
wasmInitMissing: {
message: ErrorMessages$1.WORKER_WASM_INIT_MISSING,
code: ErrorCodes$1.WORKER_WASM_INIT_MISSING,
},
wasmLoadFailure: {
message: ErrorMessages$1.WORKER_WASM_LOAD_FAILURE,
code: ErrorCodes$1.WORKER_WASM_LOAD_FAILURE,
},
handleUndefined: {
message: ErrorMessages$1.WORKER_HANDLE_UNDEFINED,
code: ErrorCodes$1.WORKER_HANDLE_UNDEFINED,
},
};
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Preferred type of camera to be used when opening the camera feed.
*/
var PreferredCameraType;
(function (PreferredCameraType) {
/** Prefer back facing camera */
PreferredCameraType[PreferredCameraType["BackFacingCamera"] = 0] = "BackFacingCamera";
/** Prefer front facing camera */
PreferredCameraType[PreferredCameraType["FrontFacingCamera"] = 1] = "FrontFacingCamera";
})(PreferredCameraType || (PreferredCameraType = {}));
// inspired by https://unpkg.com/browse/scandit-sdk@4.6.1/src/lib/cameraAccess.ts
const backCameraKeywords = [
"rear",
"back",
"rück",
"arrière",
"trasera",
"trás",
"traseira",
"posteriore",
"后面",
"後面",
"背面",
"后置",
"後置",
"背置",
"задней",
"الخلفية",
"후",
"arka",
"achterzijde",
"หลัง",
"baksidan",
"bagside",
"sau",
"bak",
"tylny",
"takakamera",
"belakang",
"אחורית",
"πίσω",
"spate",
"hátsó",
"zadní",
"darrere",
"zadná",
"задня",
"stražnja",
"belakang",
"बैक"
];
function isBackCameraLabel(label) {
const lowercaseLabel = label.toLowerCase();
return backCameraKeywords.some(keyword => lowercaseLabel.includes(keyword));
}
class SelectedCamera {
constructor(mdi, facing) {
this.deviceId = mdi.deviceId;
this.facing = facing;
this.groupId = mdi.groupId;
this.label = mdi.label;
}
}
function getCameraDevices$1() {
return __awaiter(this, void 0, void 0, function* () {
const frontCameras = [];
const backCameras = [];
{
let devices = yield navigator.mediaDevices.enumerateDevices();
// if permission is not given, label of video devices will be empty string
if (devices.filter(device => device.kind === "videoinput").every(device => device.label === "")) {
const stream = yield navigator.mediaDevices.getUserMedia({
video: {
facingMode: { ideal: "environment" }
},
audio: false
});
// enumerate devices again - now the label field should be non-empty, as we have a stream active
// (even if we didn't get persistent permission for camera)
devices = yield navigator.mediaDevices.enumerateDevices();
// close the stream, as we don't need it anymore
stream.getTracks().forEach(track => track.stop());
}
const cameras = devices.filter(device => device.kind === "videoinput");
for (const camera of cameras) {
if (isBackCameraLabel(camera.label)) {
backCameras.push(new SelectedCamera(camera, PreferredCameraType.BackFacingCamera));
}
else {
frontCameras.push(new SelectedCamera(camera, PreferredCameraType.FrontFacingCamera));
}
}
}
return {
frontCameras,
backCameras
};
});
}
function selectCamera(cameraId, preferredCameraType) {
return __awaiter(this, void 0, void 0, function* () {
const { frontCameras, backCameras } = yield getCameraDevices$1();
if (frontCameras.length > 0 || backCameras.length > 0) {
// decide from which array the camera will be selected
let cameraPool = (backCameras.length > 0 ? backCameras : frontCameras);
// if there is at least one back facing camera and user prefers back facing camera, use that as a selection pool
if (preferredCameraType === PreferredCameraType.BackFacingCamera && backCameras.length > 0) {
cameraPool = backCameras;
}
// if there is at least one front facing camera and is preferred by user, use that as a selection pool
if (preferredCameraType === PreferredCameraType.FrontFacingCamera && frontCameras.length > 0) {
cameraPool = frontCameras;
}
// otherwise use whichever pool is non-empty
// sort camera pool by label
cameraPool = cameraPool.sort((camera1, camera2) => camera1.label.localeCompare(camera2.label));
// Check if cameras are labeled with resolution information, take the higher-resolution one in that case
// Otherwise pick the first camera
{
let selectedCameraIndex = 0;
const cameraResolutions = cameraPool.map(camera => {
const regExp = RegExp(/\b([0-9]+)MP?\b/, "i");
const match = regExp.exec(camera.label);
if (match !== null) {
return parseInt(match[1], 10);
}
else {
return NaN;
}
});
if (!cameraResolutions.some(cameraResolution => isNaN(cameraResolution))) {
selectedCameraIndex = cameraResolutions.lastIndexOf(Math.max(...cameraResolutions));
}
if (cameraId) {
let cameraDevice = null;
cameraDevice = frontCameras.filter(device => device.deviceId === cameraId)[0];
if (!cameraDevice) {
cameraDevice = backCameras.filter(device => device.deviceId === cameraId)[0];
}
return cameraDevice || null;
}
return cameraPool[selectedCameraIndex];
}
}
else {
// no cameras available on the device
return null;
}
});
}
/**
* Bind camera device to video feed (HTMLVideoElement).
*
* This function will return `true` in case that video feed of camera device has been flipped,
* and `false` otherwise.
*
* @param camera Camera device which should be binded with the video element.
* @param videoFeed HTMLVideoElement to which camera device should be binded.
* @param preferredCameraType Enum representing whether to use front facing or back facing camera.
*/
function bindCameraToVideoFeed(camera, videoFeed, preferredCameraType = PreferredCameraType.BackFacingCamera) {
return __awaiter(this, void 0, void 0, function* () {
const constraints = {
audio: false,
video: {
width: {
min: 640,
ideal: 1920,
max: 1920
},
height: {
min: 480,
ideal: 1080,
max: 1080
}
}
};
if (camera.deviceId === "") {
const isPreferredBackFacing = preferredCameraType === PreferredCameraType.BackFacingCamera;
constraints.video.facingMode =
{
ideal: isPreferredBackFacing ? "environment" : "user"
};
}
else {
constraints.video.deviceId =
{
exact: camera.deviceId
};
}
const stream = yield navigator.mediaDevices.getUserMedia(constraints);
videoFeed.controls = false;
videoFeed.srcObject = stream;
let cameraFlipped = false;
if (camera.facing === PreferredCameraType.FrontFacingCamera) {
videoFeed.style.transform = "scaleX(-1)";
cameraFlipped = true;
}
return cameraFlipped;
});
}
function clearVideoFeed(videoFeed) {
if (videoFeed && videoFeed.srcObject !== null) {
videoFeed.srcObject.getTracks().forEach(track => track.stop());
videoFeed.srcObject = null;
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
// ============================================ /
// DATA STRUCTURES /
// ============================================ /
/**
* Specifies the orientation of the contents of the image.
* This is important for some recognizers, especially when
* performing recognition on the mobile device.
*/
var ImageOrientation;
(function (ImageOrientation) {
/**
* Image contents are rotated 90 degrees left.
* This usually happens on mobile devices when capturing image while
* device is held in "portrait" orientation, while device camera sensor
* is mounted horizontally (i.e. produced image is in "landscape" orienation).
*/
ImageOrientation[ImageOrientation["RotatedLeft90"] = 0] = "RotatedLeft90";
/**
* Image contents are not rotated in any manner.
* This is the default for images captured using HTML canvas, as
* used in FrameCapture class.
* This orientation also usually happens on mobile devices when capturing
* image while device is held in "landscape" orientation, while device
* camera sensor is mounted horizontally (i.e. also in same orientation).
*/
ImageOrientation[ImageOrientation["NoRotation"] = 1] = "NoRotation";
/**
* Image contents are rotated 90 degrees right.
* This usually happens on mobile devices when capturing image while
* device is held in "reverse-portrait" orientation, while device camera sensor
* is mounted horizontally (i.e. produced image is in "landscape" orienation).
*/
ImageOrientation[ImageOrientation["RotatedRight90"] = 2] = "RotatedRight90";
/**
* Image contents are rotated 180 degrees, i.e. image contents are "upside down".
* This usually happens on mobile devices when capturing image while
* device is held in "reverse-landscape" orientation, while device camera sensor
* is mounted horizontally (i.e. produced image is in "landscape" orienation).
*/
ImageOrientation[ImageOrientation["Rotated180"] = 3] = "Rotated180";
})(ImageOrientation || (ImageOrientation = {}));
/**
* Specifies the state of the recognition result.
*/
var RecognizerResultState;
(function (RecognizerResultState) {
/** Nothing has been recognized. */
RecognizerResultState[RecognizerResultState["Empty"] = 0] = "Empty";
/** Something has been recognized, but some mandatory data is still missing. */
RecognizerResultState[RecognizerResultState["Uncertain"] = 1] = "Uncertain";
/** All required data has been recognized. */
RecognizerResultState[RecognizerResultState["Valid"] = 2] = "Valid";
/** Single stage of a multi-stage recognition is finished. */
RecognizerResultState[RecognizerResultState["StageValid"] = 3] = "StageValid";
})(RecognizerResultState || (RecognizerResultState = {}));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Checks if browser is supported by the SDK. The minimum requirements for the browser is
* the support for WebAssembly. If your browser does not support executing WebAssembly,
* this function will return `false`.
*/
function isBrowserSupported() {
// based on https://stackoverflow.com/a/47880734
try {
if (typeof WebAssembly === "object" && typeof WebAssembly.instantiate === "function") {
const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
if (module instanceof WebAssembly.Module)
return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
}
}
catch (ignored) {
return false;
}
return false;
}
/**
* Check if current browser is in-app / embedded.
* Detects Instagram, Facebook, LinkedIn, Twitter, WeChat, Whatsapp, and Tiktok.
* @returns Boolean whether the browser is in-app or not
*/
function isInAppBrowser() {
const inAppRegex = /(instagram|fbav|linkedinapp|twitter|micromessenger|whatsapp|tiktok)[/\s]?([\w.]*)/i;
const userAgent = navigator.userAgent || navigator.vendor;
return !!inAppRegex.exec(userAgent);
}
/**
* Check if browser supports ES6, which is prerequisite for this SDK to execute.
*
* IMPORTANT: it's not possible to run this function from MicroblinkSDK if browser doesn't support
* ES6 since this file won't be able to load.
*
* This function is here as a placeholder so it can be copied to standalone JS file or directly into 'index.html'.
*/
// export function isES6Supported(): boolean
// {
// if ( typeof Symbol === "undefined" )
// {
// return false;
// }
// try
// {
// eval( "class Foo {}" );
// eval( "var bar = (x) => x+1" );
// }
// catch ( e )
// {
// return false;
// }
// return true;
// }
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
// ============================================ /
// Frame capture and camera management support. /
// ============================================ /
let canvas;
/**
* Represents a captured frame from HTMLVideoElement.
*/
class CapturedFrame {
constructor(imageData, orientation, videoFrame) {
this.imageData = imageData;
this.orientation = orientation;
this.videoFrame = videoFrame;
}
}
/**
* Captures a frame from any CanvasImageSource, such as HTMLVideoElement or HTMLImageElement.
* @param imageSource image source from which frame should be captured
* @returns instance of CapturedFrame
*/
function captureFrame(imageSource) {
let imageWidth;
let imageHeight;
let videoFrame = false;
if (imageSource instanceof HTMLVideoElement) {
imageWidth = imageSource.videoWidth;
imageHeight = imageSource.videoHeight;
videoFrame = true;
}
else if (imageSource instanceof HTMLImageElement) {
imageWidth = imageSource.naturalWidth;
imageHeight = imageSource.naturalHeight;
}
else if (imageSource instanceof SVGImageElement) {
throw new SDKError(frameCaptureErrors.svgUnsupported);
}
else {
imageWidth = imageSource.width;
imageHeight = imageSource.height;
}
canvas = canvas || document.createElement("canvas");
canvas.width = imageWidth;
canvas.height = imageHeight;
const ctx = canvas.getContext("2d");
if (!ctx) {
throw new SDKError(frameCaptureErrors.canvasMissing);
}
ctx.drawImage(imageSource, 0, 0, canvas.width, canvas.height);
const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height);
return new CapturedFrame(pixelData,
// TODO: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
// or https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
ImageOrientation.NoRotation, videoFrame);
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
var LicenseTokenState;
(function (LicenseTokenState) {
LicenseTokenState[LicenseTokenState["Invalid"] = 0] = "Invalid";
LicenseTokenState[LicenseTokenState["RequiresServerPermission"] = 1] = "RequiresServerPermission";
LicenseTokenState[LicenseTokenState["Valid"] = 2] = "Valid";
})(LicenseTokenState || (LicenseTokenState = {}));
var LicenseErrorType;
(function (LicenseErrorType) {
LicenseErrorType["LicenseTokenStateInvalid"] = "LICENSE_TOKEN_STATE_INVALID";
LicenseErrorType["NetworkError"] = "NETWORK_ERROR";
LicenseErrorType["RemoteLock"] = "REMOTE_LOCK";
LicenseErrorType["PermissionExpired"] = "PERMISSION_EXPIRED";
LicenseErrorType["PayloadCorrupted"] = "PAYLOAD_CORRUPTED";
LicenseErrorType["PayloadSignatureVerificationFailed"] = "PAYLOAD_SIGNATURE_VERIFICATION_FAILED";
LicenseErrorType["IncorrectTokenState"] = "INCORRECT_TOKEN_STATE";
})(LicenseErrorType || (LicenseErrorType = {}));
const baltazar = "https://baltazar.microblink.com/api/v1/status/check";
function toBaltazarRequest(unlockResult) {
return {
licenseId: unlockResult.licenseId,
licensee: unlockResult.licensee,
packageName: unlockResult.packageName,
platform: "Browser",
sdkName: unlockResult.sdkName,
sdkVersion: unlockResult.sdkVersion
};
}
function shouldShowOverlay(isTrial, allowRemoveDemoOverlay, allowRemoveProductionOverlay) {
if (isTrial && allowRemoveDemoOverlay) {
return false;
}
if (!isTrial && allowRemoveProductionOverlay) {
return false;
}
return true;
}
var ServerPermissionSubmitResultStatus;
(function (ServerPermissionSubmitResultStatus) {
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["Ok"] = 0] = "Ok";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["NetworkError"] = 1] = "NetworkError";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["RemoteLock"] = 2] = "RemoteLock";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["PermissionExpired"] = 3] = "PermissionExpired";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["PayloadCorrupted"] = 4] = "PayloadCorrupted";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["PayloadSignatureVerificationFailed"] = 5] = "PayloadSignatureVerificationFailed";
ServerPermissionSubmitResultStatus[ServerPermissionSubmitResultStatus["IncorrectTokenState"] = 6] = "IncorrectTokenState";
})(ServerPermissionSubmitResultStatus || (ServerPermissionSubmitResultStatus = {}));
/* eslint-disable @typescript-eslint/no-explicit-any,
@typescript-eslint/explicit-module-boundary-types,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-call
*/
function obtainNewServerPermission(unlockResult, wasmModule) {
return __awaiter(this, void 0, void 0, function* () {
// request permission from Baltazar service
try {
const response = yield fetch(baltazar, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
cache: "no-cache",
body: JSON.stringify(toBaltazarRequest(unlockResult))
});
if (response.ok) {
const serverPermission = (yield response.text()).toString();
const result = wasmModule.submitServerPermission(serverPermission);
return result;
}
else {
return {
status: ServerPermissionSubmitResultStatus.NetworkError,
lease: 0,
networkErrorDescription: `Server responded with status ${response.status}`
};
}
}
catch (error) {
return {
status: ServerPermissionSubmitResultStatus.NetworkError,
lease: 0,
networkErrorDescription: `Unexpected error: ${JSON.stringify(error)}`
};
}
});
}
function unlockWasmSDK(licenseKey, allowHelloMessage, userId, wasmModule) {
return __awaiter(this, void 0, void 0, function* () {
const unlockResult = wasmModule.initializeWithLicenseKey(licenseKey, userId, allowHelloMessage);
switch (unlockResult.unlockResult) {
case LicenseTokenState.Invalid:
return {
error: new SDKError(Object.assign(Object.assign({}, licenseErrors.licenseInvalid), { message: unlockResult.licenseError }), {
type: LicenseErrorType.LicenseTokenStateInvalid,
}),
};
case LicenseTokenState.Valid:
return {
error: null,
showOverlay: shouldShowOverlay(unlockResult.isTrial, unlockResult.allowRemoveDemoOverlay, unlockResult.allowRemoveProductionOverlay)
};
case LicenseTokenState.RequiresServerPermission:
{
const serverPermission = yield obtainNewServerPermission(unlockResult, wasmModule);
switch (serverPermission.status) {
case ServerPermissionSubmitResultStatus.Ok:
return {
error: null,
lease: serverPermission.lease
};
case ServerPermissionSubmitResultStatus.NetworkError:
{
let additionalInfo = "";
if (serverPermission.networkErrorDescription) {
additionalInfo = " " + serverPermission.networkErrorDescription;
}
return {
error: new SDKError(Object.assign(Object.assign({}, licenseErrors.licenseNetworkError), { message: "There has been a network error while obtaining the server permission!"
+ additionalInfo }), {
type: LicenseErrorType.NetworkError,
})
};
}
case ServerPermissionSubmitResultStatus.RemoteLock:
return {
error: new SDKError(licenseErrors.licenseRemoteLocked, {
type: LicenseErrorType.RemoteLock,
}),
lease: serverPermission.lease
};
case ServerPermissionSubmitResultStatus.PermissionExpired:
return {
error: new SDKError(licenseErrors.licensePermissionExpired, {
type: LicenseErrorType.PermissionExpired
}),
lease: serverPermission.lease
};
case ServerPermissionSubmitResultStatus.PayloadCorrupted:
return {
error: new SDKError(licenseErrors.licensePayloadCorrupted, {
type: LicenseErrorType.PayloadCorrupted
}),
lease: serverPermission.lease
};
case ServerPermissionSubmitResultStatus.PayloadSignatureVerificationFailed:
return {
error: new SDKError(licenseErrors.licensePayloadVerificationFailed, {
type: LicenseErrorType.PayloadSignatureVerificationFailed
}),
lease: serverPermission.lease
};
case ServerPermissionSubmitResultStatus.IncorrectTokenState:
return {
error: new SDKError(licenseErrors.licenseTokenStateIncorrect, {
type: LicenseErrorType.IncorrectTokenState
}),
lease: serverPermission.lease
};
}
}
}
});
}
/* eslint-enable @typescript-eslint/no-explicit-any,
@typescript-eslint/explicit-module-boundary-types,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-call
*/
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Detection status of the specific detected object.
*/
var DetectionStatus;
(function (DetectionStatus) {
/** Detection failed, form not detected */
DetectionStatus[DetectionStatus["Fail"] = 0] = "Fail";
/** Object was successfully detected */
DetectionStatus[DetectionStatus["Success"] = 1] = "Success";
/** Object detected, but the camera is too far above it */
DetectionStatus[DetectionStatus["CameraTooHigh"] = 2] = "CameraTooHigh";
/** Fallback detection of an object was successful */
DetectionStatus[DetectionStatus["FallbackSuccess"] = 3] = "FallbackSuccess";
/** Object is detected, but parts of it are not in image */
DetectionStatus[DetectionStatus["Partial"] = 4] = "Partial";
/** Object detected, but camera is at too big angle */
DetectionStatus[DetectionStatus["CameraAtAngle"] = 5] = "CameraAtAngle";
/** Object detected, but the camera is too near to it */
DetectionStatus[DetectionStatus["CameraTooNear"] = 6] = "CameraTooNear";
/** Document detected, but document is too close to the edge of the frame */
DetectionStatus[DetectionStatus["DocumentTooCloseToEdge"] = 7] = "DocumentTooCloseToEdge";
})(DetectionStatus || (DetectionStatus = {}));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Explanation why VideoRecognizer has failed to open the camera feed.
*/
var NotSupportedReason;
(function (NotSupportedReason) {
/** navigator.mediaDevices.getUserMedia is not supported by current browser for current context. */
NotSupportedReason["MediaDevicesNotSupported"] = "MediaDevicesNotSupported";
/** Camera with requested features is not available on current device. */
NotSupportedReason["CameraNotFound"] = "CameraNotFound";
/** Camera access was not granted by the user. */
NotSupportedReason["CameraNotAllowed"] = "CameraNotAllowed";
/** Unable to start playing because camera is already in use. */
NotSupportedReason["CameraInUse"] = "CameraInUse";
/** Camera is currently not available due to a OS or hardware error. */
NotSupportedReason["CameraNotAvailable"] = "CameraNotAvailable";
/** There is no provided video element to which the camera feed should be redirected. */
NotSupportedReason["VideoElementNotProvided"] = "VideoElementNotProvided";
})(NotSupportedReason || (NotSupportedReason = {}));
/**
* Indicates mode of recognition in VideoRecognizer.
*/
var VideoRecognitionMode;
(function (VideoRecognitionMode) {
/** Normal recognition */
VideoRecognitionMode[VideoRecognitionMode["Recognition"] = 0] = "Recognition";
/** Indefinite scan. Useful for profiling the performance of scan (using onDebugText metadata callback) */
VideoRecognitionMode[VideoRecognitionMode["RecognitionTest"] = 1] = "RecognitionTest";
/** Only detection. Useful for profiling the performance of detection (using onDebugText metadata callback) */
VideoRecognitionMode[VideoRecognitionMode["DetectionTest"] = 2] = "DetectionTest";
})(VideoRecognitionMode || (VideoRecognitionMode = {}));
/**
* A wrapper around RecognizerRunner that can use it to perform recognition of video feeds - either from live camera or
* from predefined video file.
*/
class VideoRecognizer {
/**
* **Use only if provided factory functions are not well-suited for your use case.**
*
* Creates a new VideoRecognizer with provided HTMLVideoElement.
*
* Keep in mind that HTMLVideoElement **must have** a video feed which is ready to use.
*
* - If you want to take advantage of provided camera management, use `createVideoRecognizerFromCameraStream`
* - In case that static video file should be processed, use `createVideoRecognizerFromVideoPath`
*
* @param videoFeed HTMLVideoElement with video feed which is going to be processed
* @param recognizerRunner RecognizerRunner that should be used for video stream recognition
* @param cameraFlipped Whether the camera is flipped, e.g. if front-facing camera is used
* @param allowManualVideoPlayout Whether to allow manual video playout. Default value is `false`
*/
constructor(videoFeed, recognizerRunner, cameraFlipped = false, allowManualVideoPlayout = false, deviceId = null) {
this.deviceId = null;
/** *********************************************************************************************
* PRIVATE AREA
*/
this.videoFeed = null;
this.cancelled = false;
this.timedOut = false;
this.recognitionPaused = false;
this.recognitionTimeoutMs = 20000;
this.timeoutID = 0;
this.videoRecognitionMode = VideoRecognitionMode.Recognition;
this.onScanningDone = null;
this.allowManualVideoPlayout = false;
this.cameraFlipped = false;
this.shouldReleaseVideoFeed = false;
this.videoFeed = videoFeed;
this.recognizerRunner = recognizerRunner;
this.cameraFlipped = cameraFlipped;
this.allowManualVideoPlayout = allowManualVideoPlayout;
this.deviceId = deviceId;
}
/**
* Creates a new VideoRecognizer by opening a camera stream and attaching it to given HTMLVideoElement. If camera
* cannot be accessed, the returned promise will be rejected.
*
* @param cameraFeed HTMLVideoELement to which camera stream should be attached
* @param recognizerRunner RecognizerRunner that should be used for video stream recognition
* @param cameraId User can provide specific camera ID to be selected and used
* @param preferredCameraType Whether back facing or front facing camera is preferred. Obeyed only if there is
* a choice (i.e. if device has only front-facing camera, the opened camera will be a front-facing camera,
* regardless of preference)
*/
static createVideoRecognizerFromCameraStream(cameraFeed, recognizerRunner, cameraId = null, preferredCameraType = PreferredCameraType.BackFacingCamera) {
return __awaiter(this, void 0, void 0, function* () {
// TODO: refactor this function into async/await syntax, instead of reject use throw
/* eslint-disable */
return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
// Check for tag name intentionally left out, so it's possible to use VideoRecognizer with custom elements.
if (!cameraFeed || !(cameraFeed instanceof Element)) {
reject(new SDKError(videoRecognizerErrors.elementMissing, {
reason: NotSupportedReason.VideoElementNotProvided,
}));
return;
}
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia !== undefined) {
try {
const selectedCamera = yield selectCamera(cameraId, preferredCameraType);
if (selectedCamera === null) {
reject(new SDKError(videoRecognizerErrors.cameraMissing, {
reason: NotSupportedReason.CameraNotFound,
}));
return;
}
const cameraFlipped = yield bindCameraToVideoFeed(selectedCamera, cameraFeed, preferredCameraType);
// TODO: await maybe not needed here
yield recognizerRunner.setCameraPreviewMirrored(cameraFlipped);
resolve(new VideoRecognizer(cameraFeed, recognizerRunner, cameraFlipped, false, selectedCamera.deviceId));
}
catch (error) {
let errorReason = NotSupportedReason.CameraInUse;
let errorCode = ErrorCodes$1.VIDEO_RECOGNIZER_CAMERA_IN_USE;
switch (error.name) {
case "NotFoundError":
case "OverconstrainedError":
errorReason = NotSupportedReason.CameraNotFound;
errorCode = ErrorCodes$1.VIDEO_RECOGNIZER_CAMERA_MISSING;
break;
case "NotAllowedError":
case "SecurityError":
errorReason = NotSupportedReason.CameraNotAllowed;
errorCode = ErrorCodes$1.VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED;
break;
case "AbortError":
case "NotReadableError":
errorReason = NotSupportedReason.CameraNotAvailable;
errorCode = ErrorCodes$1.VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE;
break;
case "TypeError": // this should never happen. If it does, rethrow it
throw error;
}
reject(new SDKError({
message: error.message,
code: errorCode,
}, {
reason: errorReason,
}));
}
}
else {
reject(new SDKError(videoRecognizerErrors.mediaDevicesUnsupported, {
reason: NotSupportedReason.MediaDevicesNotSupported
}));
}
}));
/* eslint-enable */
});
}
/**
* Creates a new VideoRecognizer by attaching the given URL to video to given HTMLVideoElement and using it to
* display video frames while processing them.
*
* @param videoPath URL of the video file that should be recognized.
* @param videoFeed HTMLVideoElement to which video file will be attached
* @param recognizerRunner RecognizerRunner that should be used for video stream recognition.
*/
static createVideoRecognizerFromVideoPath(videoPath, videoFeed, recognizerRunner) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
videoFeed.src = videoPath;
videoFeed.currentTime = 0;
videoFeed.onended = () => {
videoRecognizer.cancelRecognition();
};
const videoRecognizer = new VideoRecognizer(videoFeed, recognizerRunner);
resolve(videoRecognizer);
});
});
}
flipCamera() {
return __awaiter(this, void 0, void 0, function* () {
if (this.videoFeed) {
if (!this.cameraFlipped) {
this.videoFeed.style.transform = "scaleX(-1)";
this.cameraFlipped = true;
}
else {
this.videoFeed.style.transform = "scaleX(1)";
this.cameraFlipped = false;
}
yield this.recognizerRunner.setCameraPreviewMirrored(this.cameraFlipped);
}
});
}
isCameraFlipped() {
return this.cameraFlipped;
}
/**
* Sets the video recognition mode to be used.
*
* @param videoRecognitionMode the video recognition mode to be used.
*/
setVideoRecognitionMode(videoRecognitionMode) {
return __awaiter(this, void 0, void 0, function* () {
this.videoRecognitionMode = videoRecognitionMode;
const isDetectionMode = this.videoRecognitionMode === VideoRecognitionMode.DetectionTest;
yield this.recognizerRunner.setDetectionOnlyMode(isDetectionMode);
});
}
/**
* Starts the recognition of the video stream associated with this VideoRecognizer. The stream will be unpaused and
* recognition loop will start. After recognition completes, a onScanningDone callback will be invoked with state of
* the recognition.
*
* NOTE: As soon as the execution of the callback completes, the recognition loop will continue and recognition
* state will be retained. To clear the recognition state, use resetRecognizers (within your callback). To
* pause the recognition loop, use pauseRecognition (within your callback) - to resume it later use
* resumeRecognition. To completely stop the recognition and video feed, while keeping the ability to use this
* VideoRecognizer later, use pauseVideoFeed. To completely stop the recognition and video feed and release
* all the resources involved with video stream, use releaseVideoFeed.
*
* @param onScanningDone Callback that will be invoked when recognition completes.
* @param recognitionTimeoutMs Amount of time before returned promise will be resolved regardless of whether
* recognition was successful or not.
*/
startRecognition(onScanningDone, recognitionTimeoutMs = 20000) {
return new Promise((resolve, reject) => {
if (this.videoFeed === null) {
reject(new SDKError(videoRecognizerErrors.videoFeedReleased));
return;
}
if (!this.videoFeed.paused) {
reject(new SDKError(videoRecognizerErrors.videoFeedNotPaused));
return;
}
this.cancelled = false;
this.recognitionPaused = false;
this.clearTimeout();
this.recognitionTimeoutMs = recognitionTimeoutMs;
this.onScanningDone = onScanningDone;
void this.recognizerRunner.setClearTimeoutCallback({ onClearTimeout: () => this.clearTimeout() });
this.videoFeed.play().then(() => this.playPauseEvent().then(() => resolve()).catch((error) => reject(error)),
/* eslint-disable @typescript-eslint/no-explicit-any */
(nativeError) => {
if (!this.allowManualVideoPlayout) {
reject(new SDKError(videoRecognizerErrors.playRequestInterrupted, nativeError));
return;
}
if (!this.videoFeed) {
return;
}
this.videoFeed.controls = true;
this.videoFeed.addEventListener("play", () => void this.playPauseEvent().then().catch((error) => reject(error)));
this.videoFeed.addEventListener("pause", () => void this.playPauseEvent().then().catch((error) => reject(error)));
}
/* eslint-enable @typescript-eslint/no-explicit-any */
);
});
}
/**
* Performs the recognition of the video stream associated with this VideoRecognizer. The stream will be
* unpaused, recognition will be performed and promise will be resolved with recognition status. After
* the resolution of returned promise, the video stream will be paused, but not released. To release the
* stream, use function releaseVideoFeed.
*
* This is a simple version of startRecognition that should be used for most cases, like when you only need
* to perform one scan per video session.
*
* @param recognitionTimeoutMs Amount of time before returned promise will be resolved regardless of whether
* recognition was successful or not.
*/
recognize(recognitionTimeoutMs = 20000) {
return new Promise((resolve, reject) => {
try {
void this.startRecognition((recognitionState) => {
this.pauseVideoFeed();
resolve(recognitionState);
}, recognitionTimeoutMs).then(
// Do nothing, callback is used for resolving
).catch((error) => reject(error));
}
catch (error) {
reject(error);
}
});
}
/**
* Cancels current ongoing recognition. Note that after cancelling the recognition, the callback given to
* startRecognition will be immediately called. This also means that the promise returned from method
* recognize will be resolved immediately.
*/
cancelRecognition() {
this.cancelled = true;
}
/**
* Pauses the video feed. You can resume the feed by calling recognize or startRecognition.
* Note that this pauses both the camera feed and recognition. If you just want to pause
* recognition, while keeping the camera feed active, call method pauseRecognition.
*/
pauseVideoFeed() {
this.pauseRecognition();
if (this.videoFeed) {
this.videoFeed.pause();
}
}
/**
* Pauses the recognition. This means that video frames that arrive from given video source
* will not be recognized. To resume recognition, call resumeRecognition(boolean).
* Unlike cancelRecognition, the callback given to startRecognition will not be invoked after pausing
* the recognition (unless there is already processing in-flight that may call the callback just before
* pausing the actual recognition loop).
*/
pauseRecognition() {
this.recognitionPaused = true;
}
/**
* Convenience method for invoking resetRecognizers on associated RecognizerRunner.
* @param hardReset Same as in RecognizerRunner.resetRecognizers.
*/
resetRecognizers(hardReset) {
return __awaiter(this, void 0, void 0, function* () {
yield this.recognizerRunner.resetRecognizers(hardReset);
});
}
/**
* Convenience method for accessing RecognizerRunner associated with this VideoRecognizer.
* Sometimes it's useful to reconfigure RecognizerRunner while handling onScanningDone callback
* and this method makes that much more convenient.
*/
getRecognizerRunner() {
return this.recognizerRunner;
}
/**
* Resumes the recognition. The video feed must not be paused. If it is, an error will be thrown.
* If video feed is paused, you should use recognize or startRecognition methods.
* @param resetRecognizers Indicates whether resetRecognizers should be invoked while resuming the recognition
*/
resumeRecognition(resetRecognizers) {
return new Promise((resolve, reject) => {
this.cancelled = false;
this.timedOut = false;
this.recognitionPaused = false;
if (this.videoFeed && this.videoFeed.paused) {
reject(new SDKError(videoRecognizerErrors.feedPaused));
return;
}
setTimeout(() => {
if (resetRecognizers) {
this.resetRecognizers(true).then(() => {
this.recognitionLoop().then(() => resolve()).catch((error) => reject(error));
}).catch(() => {
reject(new SDKError(videoRecognizerErrors.recognizersResetFailure));
});
}
else {
void this.recognitionLoop().then(() => resolve()).catch((error) => reject(error));
}
}, 1);
});
}
/**
* Stops all media stream tracks associated with current HTMLVideoElement and removes any references to it.
* Note that after calling this method you can no longer use this VideoRecognizer for recognition.
* This method should be called after you no longer plan on performing video recognition to let browser know
* that it can release resources related to any media streams used.
*/
releaseVideoFeed() {
var _a, _b;
if (!this.videoFeed || ((_a = this.videoFeed) === null || _a === void 0 ? void 0 : _a.readyState) < ((_b = this.videoFeed) === null || _b === void 0 ? void 0 : _b.HAVE_CURRENT_DATA)) {
this.shouldReleaseVideoFeed = true;
return;
}
if (!this.videoFeed.paused) {
this.cancelRecognition();
}
clearVideoFeed(this.videoFeed);
this.videoFeed = null;
this.shouldReleaseVideoFeed = false;
}
/**
* Change currently used camera device for recognition. To get list of available camera devices
* use "getCameraDevices" method.
*
* Keep in mind that this method will reset recognizers.
*
* @param camera Desired camera device which should be used for recognition.
*/
changeCameraDevice(camera) {
return new Promise((resolve, reject) => {
if (this.videoFeed === null) {
reject(new SDKError(videoRecognizerErrors.feedMissing));
return;
}
this.pauseRecognition();
clearVideoFeed(this.videoFeed);
bindCameraToVideoFeed(camera, this.videoFeed).then(() => {
if (this.videoFeed === null) {
reject(new SDKError(videoRecognizerErrors.feedMissing));
return;
}
this.videoFeed.play().then(() => {
// Recognition errors should be handled by `startRecognition` or `recognize` method
void this.resumeRecognition(true);
resolve();
},
/* eslint-disable @typescript-eslint/no-explicit-any */
(nativeError) => {
if (!this.allowManualVideoPlayout) {
reject(new SDKError(videoRecognizerErrors.playRequestInterrupted, nativeError));
return;
}
if (!this.videoFeed) {
reject(new SDKError(videoRecognizerErrors.feedMissing));
return;
}
this.videoFeed.controls = true;
}
/* eslint-enable @typescript-eslint/no-explicit-any */
);
}).catch((error) => reject(error));
});
}
playPauseEvent() {
return new Promise((resolve, reject) => {
if (this.videoFeed && this.videoFeed.paused) {
this.cancelRecognition();
resolve();
return;
}
else {
this.resumeRecognition(true).then(() => resolve()).catch((error) => reject(error));
}
});
}
recognitionLoop() {
return new Promise((resolve, reject) => {
if (!this.videoFeed) {
reject(new SDKError(videoRecognizerErrors.feedMissing));
return;
}
if (this.shouldReleaseVideoFeed && this.videoFeed.readyState > this.videoFeed.HAVE_CURRENT_DATA) {
this.releaseVideoFeed();
resolve();
return;
}
const cameraFrame = captureFrame(this.videoFeed);
this.recognizerRunner.processImage(cameraFrame).then((processResult) => {
const completeFn = () => {
if (!this.recognitionPaused) {
// ensure browser events are processed and then recognize another frame
setTimeout(() => {
this.recognitionLoop().then(() => resolve()).catch((error) => reject(error));
}, 1);
}
else {
resolve();
}
};
if (processResult === RecognizerResultState.Valid || this.cancelled || this.timedOut) {
if (this.videoRecognitionMode === VideoRecognitionMode.Recognition || this.cancelled) {
// valid results, clear the timeout and invoke the callback
this.clearTimeout();
if (this.onScanningDone) {
void this.onScanningDone(processResult);
}
// after returning from callback, resume scanning if not paused
}
else {
// in test mode - reset the recognizers and continue the loop indefinitely
this.recognizerRunner.resetRecognizers(true).then(() => {
// clear any time outs
this.clearTimeout();
completeFn();
}).catch((error) => reject(error));
return;
}
}
else if (processResult === RecognizerResultState.Uncertain) {
if (this.timeoutID === 0) {
// first non-empty result - start timeout
this.timeoutID = window.setTimeout(() => { this.timedOut = true; }, this.recognitionTimeoutMs);
}
completeFn();
return;
}
else if (processResult === RecognizerResultState.StageValid) {
// stage recognition is finished, clear timeout and resume recognition
this.clearTimeout();
completeFn();
return;
}
completeFn();
}).catch((error) => reject(error));
});
}
clearTimeout() {
if (this.timeoutID > 0) {
window.clearTimeout(this.timeoutID);
this.timeoutID = 0;
}
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Settings object for function loadWasmModule.
*/
class WasmSDKLoadSettings {
/**
* @param licenseKey License key for unlocking the WebAssembly module.
*/
constructor(licenseKey) {
/**
* Write a hello message to the browser console when license check is successfully performed.
*
* Hello message will contain the name and version of the SDK, which are required information for all support
* tickets.
*
* The default value is true.
*/
this.allowHelloMessage = true;
/**
* Absolute location of WASM and related JS/data files. Useful when resource files should be loaded over CDN, or
* when web frameworks/libraries are used which store resources in specific locations, e.g. inside "assets" folder.
*
* Important: if the engine is hosted on another origin, CORS must be enabled between two hosts. That is, server
* where engine is hosted must have 'Access-Control-Allow-Origin' header for the location of the web app.
*
* Important: SDK and WASM resources must be from the same version of a package.
*
* Default value is empty string, i.e. "". In case of empty string, value of "window.location.origin" property is
* going to be used.
*/
this.engineLocation = "";
/**
* Type of the WASM that will be loaded. By default, if not set, the SDK will automatically determine the best WASM
* to load.
*/
this.wasmType = null;
/**
* Defines the number of workers that will be used for multi-threaded processing of the images. If not set, the
* number of worker used will match the number of detected CPU cores on a device.
*
* If the browser does not support multi-threaded processing or it was deliberately disabled using the `wasmType`
* property, then this property will be ignored.
*/
this.numberOfWorkers = null;
/**
* Optional callback function that will report the SDK loading progress.
*
* This can be useful for displaying progress bar to users with slow connections.
*
* The default value is null.
*/
this.loadProgressCallback = null;
/**
* Name of the file containing the WebAssembly module.
*
* Change this only if you have renamed the original WASM and its support JS file for your purposes.
*/
this.wasmModuleName = defaultWasmModuleName;
if (!licenseKey) {
throw new SDKError(sdkErrors.licenseKeyMissing);
}
this.licenseKey = licenseKey;
}
}
const bulkMemory = async () => WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 5, 3, 1, 0, 1, 10, 14, 1, 12, 0, 65, 0, 65, 0, 65, 0, 252, 10, 0, 0, 11])),
saturatedFloatToInt = async () => WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 10, 12, 1, 10, 0, 67, 0, 0, 0, 0, 252, 0, 26, 11])),
signExtensions = async () => WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 10, 8, 1, 6, 0, 65, 0, 192, 26, 11])),
simd = async () => WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0, 253, 15, 253, 98, 11])),
threads = () => (async e => {
try {
return "undefined" != typeof MessageChannel && new MessageChannel().port1.postMessage(new SharedArrayBuffer(1)), WebAssembly.validate(e);
} catch (e) {
return !1;
}
})(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 4, 1, 96, 0, 0, 3, 2, 1, 0, 5, 4, 1, 3, 1, 1, 10, 11, 1, 9, 0, 65, 0, 254, 16, 2, 0, 26, 11]));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function detectWasmType(engineLocation) {
return __awaiter(this, void 0, void 0, function* () {
// determine if all features required for advanced WASM are available
// currently, advanced wasm requires bulk memory, non-trapping floating point
// and sign extension (this may change in the future).
const haveBulkMemory = yield bulkMemory();
const haveNonTrappingFloatingPoint = yield saturatedFloatToInt();
const haveSignExtension = yield signExtensions();
const haveSIMD = yield simd();
const haveThreads = yield threads();
if (haveBulkMemory && haveNonTrappingFloatingPoint && haveSignExtension && haveSIMD) {
if (haveThreads) {
/* The external worker files are loaded by the Emscripten’s thread support code - each
* worker represents a thread. It’s not currently possible to put all those workers
* inline.
*
* Also, due to browser security rules, it's not possible to load external worker files
* from a different origin.
*
* Therefore, we need to ensure that remote workers are accessible. For that reason,
* there is a dummy `Worker.test.js` file. If that file is loaded successfully, we can
* say that `AdvancedWithThreads` bundle is available.
*/
try {
const worker = new Worker(`${engineLocation}/Worker.test.js`);
worker.terminate();
return WasmType.AdvancedWithThreads;
}
catch (_a) {
return WasmType.Advanced;
}
}
else {
return WasmType.Advanced;
}
}
else {
return WasmType.Basic;
}
});
}
function wasmFolder(wasmType) {
switch (wasmType) {
case WasmType.AdvancedWithThreads: return "advanced-threads";
case WasmType.Advanced: return "advanced";
case WasmType.Basic: return "basic";
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
// taken from https://stackoverflow.com/a/2117523/213057
/* eslint-disable */
function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
}
/* eslint-enable */
function getUserID() {
try {
let userId = localStorage.getItem("mb-user-id");
if (userId === null) {
userId = uuidv4();
localStorage.setItem("mb-user-id", userId);
}
return userId;
}
catch (error) {
// local storage is disabled, generate new user ID every time
return uuidv4();
}
}
/**
* Asynchronously loads and compiles the WebAssembly module.
* @param loadSettings Object defining the settings for loading the WebAssembly module.
* @returns Promise that resolves if WebAssembly module was successfully loaded and rejects if not.
*/
/* eslint-disable @typescript-eslint/no-explicit-any,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-call */
function loadWasmModule(loadSettings) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve, reject) => {
if (!loadSettings || typeof loadSettings !== "object") {
reject(new SDKError(sdkErrors.wasmSettingsMissing));
return;
}
if (typeof loadSettings.licenseKey !== "string") {
reject(new SDKError(sdkErrors.licenseKeyMissing));
return;
}
if (!loadSettings.wasmModuleName) {
reject(new SDKError(sdkErrors.wasmModuleNameMissing));
return;
}
if (typeof loadSettings.engineLocation !== "string") {
reject(new SDKError(sdkErrors.engineLocationInvalid));
return;
}
// obtain user ID from local storage
const userId = getUserID();
try {
const blob = new Blob([String.raw `!function(){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function e(e,t,s,n){return new(s||(s=Promise))((function(r,i){function o(e){try{c(n.next(e))}catch(e){i(e)}}function a(e){try{c(n.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(o,a)}c((n=n.apply(e,t||[])).next())}))}let t=0;class s{constructor(e){this.action=e,this.messageID=function(){const e=t;return t+=1,e}()}}class n extends s{constructor(e,t){super(n.action),this.wasmModuleName=e.wasmModuleName,this.licenseKey=e.licenseKey,this.userId=t,this.registerLoadCallback=null!==e.loadProgressCallback,this.allowHelloMessage=e.allowHelloMessage,this.engineLocation=e.engineLocation,this.wasmType=e.wasmType,this.numberOfWorkers=e.numberOfWorkers}}var r,i;n.action="init",function(e){e[e.Any=0]="Any",e[e.Recognizer=1]="Recognizer",e[e.RecognizerSettings=2]="RecognizerSettings",e[e.Callback=3]="Callback"}(r||(r={}));class o extends s{constructor(e,t){super(o.action),this.funcName=e,this.params=t}}o.action="invokeFunction";class a extends s{constructor(e,t){super(a.action),this.className=e,this.params=t}}a.action="createNewNativeObject";class c extends s{constructor(e,t,s){super(c.action),this.recognizerHandles=e,this.allowMultipleResults=t,this.registeredMetadataCallbacks=s}}c.action="createRecognizerRunner";class E extends s{constructor(e,t){super(E.action),this.recognizerHandles=e,this.allowMultipleResults=t}}E.action="reconfigureRecognizerRunner";class R extends s{constructor(){super(R.action)}}R.action="deleteRecognizerRunner";class l extends s{constructor(e,t,s){super(l.action),this.objectHandle=e,this.methodName=t,this.params=s}}l.action="invokeObject";class _ extends s{constructor(e){super(_.action),this.frame=e}getTransferrables(){return[this.frame.imageData.data.buffer]}}_.action="processImage";class u extends s{constructor(e){super(u.action),this.hardReset=e}}u.action="resetRecognizers";class I extends s{constructor(e){super(I.action),this.registeredMetadataCallbacks=e}}I.action="registerMetadataCallbacks";class d extends s{constructor(e){super(d.action),this.detectionOnlyMode=e}}d.action="setDetectionOnly";class N extends s{constructor(e){super(N.action),this.callbackNonEmpty=e}}N.action="setClearTimeoutCallback";class O extends s{constructor(e){super(O.action),this.cameraPreviewMirrored=e}}O.action="setCameraPreviewMirrored";class h{constructor(e,t,s){this.success=!0,this.error=null,this.messageID=e,this.success=t,this.error=s}}class S{constructor(e,t,s,n){this.success=!0,this.showOverlay=!0,this.messageID=e,this.success=t,this.showOverlay=s,this.wasmType=n}}class g extends h{constructor(e,t){super(e,!0,null),this.result=t}}class C extends h{constructor(e,t){super(e,!0,null),this.objectHandle=t}}class m extends h{constructor(e,t){super(e,!0,null),this.recognitionState=t}}class A{constructor(e){this.isLoadProgressMessage=!0,this.progress=e}}!function(e){e[e.onDebugText=0]="onDebugText",e[e.onDetectionFailed=1]="onDetectionFailed",e[e.onQuadDetection=2]="onQuadDetection",e[e.onPointsDetection=3]="onPointsDetection",e[e.onFirstSideResult=4]="onFirstSideResult",e[e.clearTimeoutCallback=5]="clearTimeoutCallback",e[e.onGlare=6]="onGlare",e[e.recognizerCallback=7]="recognizerCallback"}(i||(i={}));class D{constructor(e,t){this.isCallbackMessage=!0,this.callbackType=e,this.callbackParameters=t}}function f(e,t){return t=t||"",""===(e=e||"")?t:e.endsWith("/")?t.startsWith("/")?e+t.substring(1):e+t:t.startsWith("/")?e+t:e+"/"+t}var M,L,y;function w(t){return e(this,void 0,void 0,(function*(){const e=yield(async()=>WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,5,3,1,0,1,10,14,1,12,0,65,0,65,0,65,0,252,10,0,0,11])))(),s=yield(async()=>WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,10,12,1,10,0,67,0,0,0,0,252,0,26,11])))(),n=yield(async()=>WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,10,8,1,6,0,65,0,192,26,11])))(),r=yield(async()=>WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11])))(),i=yield(async e=>{try{return"undefined"!=typeof MessageChannel&&(new MessageChannel).port1.postMessage(new SharedArrayBuffer(1)),WebAssembly.validate(e)}catch(e){return!1}})(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,5,4,1,3,1,1,10,11,1,9,0,65,0,254,16,2,0,26,11]));if(!(e&&s&&n&&r))return M.Basic;if(!i)return M.Advanced;try{return new Worker(t+"/Worker.test.js").terminate(),M.AdvancedWithThreads}catch(e){return M.Advanced}}))}!function(e){e.Basic="BASIC",e.Advanced="ADVANCED",e.AdvancedWithThreads="ADVANCED_WITH_THREADS"}(M||(M={}));class T{constructor(e,t){if(!e.code||!e.message)throw Error("Instance of SDKError is required to have code and message.");this.message=e.message,this.code=e.code,this.details=t}}!function(e){e.WORKER_WASM_LOAD_FAILURE="WORKER_WASM_LOAD_FAILURE",e.WORKER_WASM_INIT_MISSING="WORKER_WASM_INIT_MISSING",e.WORKER_FUNCTION_INVOKE_FAILURE="WORKER_FUNCTION_INVOKE_FAILURE",e.WORKER_RECOGNIZER_CREATION_FAILURE="WORKER_RECOGNIZER_CREATION_FAILURE",e.WORKER_RUNNER_EXISTS="WORKER_RUNNER_EXISTS",e.WORKER_RUNNER_CREATION_FAILURE="WORKER_RUNNER_CREATION_FAILURE",e.WORKER_RUNNER_MISSING="WORKER_RUNNER_MISSING",e.WORKER_RUNNER_RECONFIGURE_FAILURE="WORKER_RUNNER_RECONFIGURE_FAILURE",e.WORKER_RUNNER_DELETED="WORKER_RUNNER_DELETED",e.WORKER_RUNNER_DELETE_FAILURE="WORKER_RUNNER_DELETE_FAILURE",e.WORKER_OBJECT_INVOKE_FAILURE="WORKER_OBJECT_INVOKE_FAILURE",e.WORKER_IMAGE_PROCESS_FAILURE="WORKER_IMAGE_PROCESS_FAILURE",e.WORKER_HANDLE_UNDEFINED="WORKER_HANDLE_UNDEFINED",e.WORKER_MESSAGE_ACTION_UNKNOWN="WORKER_MESSAGE_ACTION_UNKNOWN",e.WORKER_LICENSE_UNLOCK_ERROR="WORKER_LICENSE_UNLOCK_ERROR",e.LOCAL_SDK_RUNNER_MISSING="LOCAL_SDK_RUNNER_MISSING",e.LOCAL_SDK_RUNNER_EMPTY="LOCAL_SDK_RUNNER_EMPTY",e.LICENSE_UNLOCK_ERROR="LICENSE_UNLOCK_ERROR",e.FRAME_CAPTURE_SVG_UNSUPPORTED="FRAME_CAPTURE_SVG_UNSUPPORTED",e.FRAME_CAPTURE_CANVAS_MISSING="FRAME_CAPTURE_CANVAS_MISSING",e.SDK_WASM_SETTINGS_MISSING="SDK_WASM_SETTINGS_MISSING",e.SDK_LICENSE_KEY_MISSING="SDK_LICENSE_KEY_MISSING",e.SDK_WASM_MODULE_NAME_MISSING="SDK_WASM_MODULE_NAME_MISSING",e.SDK_ENGINE_LOCATION_INVALID="SDK_ENGINE_LOCATION_INVALID",e.SDK_MISSING="SDK_MISSING",e.SDK_RECOGNIZERS_MISSING="SDK_RECOGNIZERS_MISSING",e.VIDEO_RECOGNIZER_ELEMENT_MISSING="VIDEO_RECOGNIZER_ELEMENT_MISSING",e.VIDEO_RECOGNIZER_CAMERA_MISSING="VIDEO_RECOGNIZER_CAMERA_MISSING",e.VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED="VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED",e.VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE="VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE",e.VIDEO_RECOGNIZER_CAMERA_IN_USE="VIDEO_RECOGNIZER_CAMERA_IN_USE",e.VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED="VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED",e.VIDEO_RECOGNIZER_FEED_RELEASED="VIDEO_RECOGNIZER_FEED_RELEASED",e.VIDEO_RECOGNIZER_FEED_NOT_PAUSED="VIDEO_RECOGNIZER_FEED_NOT_PAUSED",e.VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED="VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED",e.VIDEO_RECOGNIZER_FEED_PAUSED="VIDEO_RECOGNIZER_FEED_PAUSED",e.VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE="VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE",e.VIDEO_RECOGNIZER_FEED_MISSING="VIDEO_RECOGNIZER_FEED_MISSING"}(L||(L={})),function(e){e.WORKER_HANDLE_UNDEFINED="Cannot find object with handle: undefined",e.WORKER_WASM_LOAD_FAILURE="Failed to load WASM in web worker!",e.WORKER_WASM_INIT_MISSING="WASM module is not initialized!",e.WORKER_FUNCTION_INVOKE_FAILURE="Failed to invoke function!",e.WORKER_RECOGNIZER_CREATION_FAILURE="Failed to create new recognizer!",e.WORKER_RUNNER_EXISTS="Recognizer runner is already created! Multiple instances are not allowed!",e.WORKER_RUNNER_CREATION_FAILURE="Failed to create new recognizer runner!",e.WORKER_RUNNER_MISSING="Recognizer runner is not created! There is nothing to reconfigure!",e.WORKER_RUNNER_RECONFIGURE_FAILURE="Failed to reconfigure recognizer runner!",e.WORKER_RUNNER_DELETED="Recognizer runner is already deleted!",e.WORKER_RUNNER_DELETE_FAILURE="Failed to delete recognizer runner!",e.WORKER_OBJECT_INVOKE_FAILURE="Failed to invoke object!",e.WORKER_IMAGE_PROCESS_FAILURE="Recognizer runner is not initialized! Cannot process image!",e.LOCAL_SDK_RUNNER_MISSING="Property nativeRecognizerRunner is not available!",e.LOCAL_SDK_RUNNER_EMPTY="Native RecognizerRunner cannot be empty!",e.LICENSE_TOKEN_STATE_INCORRECT="Internal error (Incorrect token state)",e.LICENSE_PAYLOAD_VERIFICATION_FAILED="Failed to verify server permission's digital signature!",e.LICENSE_PAYLOAD_CORRUPTED="Server permission payload is corrupted!",e.LICENSE_PERMISSION_EXPIRED="Internal error (server permission expired)",e.LICENSE_REMOTE_LOCKED="Provided license key has been remotely locked. Please contact support for more information!",e.FRAME_CAPTURE_SVG_UNSUPPORTED="Recognition of SVG elements not supported!",e.FRAME_CAPTURE_CANVAS_MISSING="Could not get canvas 2d context!",e.SDK_WASM_SETTINGS_MISSING="Missing WASM load settings!",e.SDK_LICENSE_KEY_MISSING="Missing license key!",e.SDK_WASM_MODULE_NAME_MISSING="Missing WASM module name!",e.SDK_ENGINE_LOCATION_INVALID="Setting property 'engineLocation' must be a string!",e.SDK_MISSING="SDK is not provided!",e.SDK_RECOGNIZERS_MISSING="To create RecognizerRunner at least 1 recognizer is required.",e.VIDEO_RECOGNIZER_ELEMENT_MISSING="Video element, i.e. camera feed is not provided!",e.VIDEO_RECOGNIZER_CAMERA_MISSING="Camera not found!",e.VIDEO_RECOGNIZER_CAMERA_NOT_ALLOWED="Camera not allowed!",e.VIDEO_RECOGNIZER_CAMERA_UNAVAILABLE="Camera not available!",e.VIDEO_RECOGNIZER_CAMERA_IN_USE="Camera in use!",e.VIDEO_RECOGNIZER_MEDIA_DEVICES_UNSUPPORTED="Media devices not supported by browser.",e.VIDEO_RECOGNIZER_FEED_RELEASED="The associated video feed has been released!",e.VIDEO_RECOGNIZER_FEED_NOT_PAUSED="The associated video feed is not paused. Use resumeRecognition instead!",e.VIDEO_RECOGNIZER_PLAY_REQUEST_INTERRUPTED="The play() request was interrupted or prevented by browser security rules!",e.VIDEO_RECOGNIZER_FEED_PAUSED="Cannot resume recognition while video feed is paused! Use recognize or startRecognition",e.VIDEO_RECOGNIZER_RECOGNIZERS_RESET_FAILURE="Could not reset recognizers!",e.VIDEO_RECOGNIZER_FEED_MISSING="Missing video feed!"}(y||(y={}));const p={licenseTokenStateIncorrect:{code:L.LICENSE_UNLOCK_ERROR,message:y.LICENSE_TOKEN_STATE_INCORRECT},licensePayloadVerificationFailed:{code:L.LICENSE_UNLOCK_ERROR,message:y.LICENSE_PAYLOAD_VERIFICATION_FAILED},licensePayloadCorrupted:{code:L.LICENSE_UNLOCK_ERROR,message:y.LICENSE_PAYLOAD_CORRUPTED},licensePermissionExpired:{code:L.LICENSE_UNLOCK_ERROR,message:y.LICENSE_PERMISSION_EXPIRED},licenseRemoteLocked:{code:L.LICENSE_UNLOCK_ERROR,message:y.LICENSE_REMOTE_LOCKED},licenseNetworkError:{code:L.LICENSE_UNLOCK_ERROR},licenseInvalid:{code:L.LICENSE_UNLOCK_ERROR}},U={imageProcessFailure:{message:y.WORKER_IMAGE_PROCESS_FAILURE,code:L.WORKER_IMAGE_PROCESS_FAILURE},objectInvokeFailure:{message:y.WORKER_OBJECT_INVOKE_FAILURE,code:L.WORKER_OBJECT_INVOKE_FAILURE},runnerDeleteFailure:{message:y.WORKER_RUNNER_DELETE_FAILURE,code:L.WORKER_RUNNER_DELETE_FAILURE},runnerDeleted:{message:y.WORKER_RUNNER_DELETED,code:L.WORKER_RUNNER_DELETED},runnerReconfigureFailure:{message:y.WORKER_RUNNER_RECONFIGURE_FAILURE,code:L.WORKER_RUNNER_RECONFIGURE_FAILURE},runnerMissing:{message:y.WORKER_RUNNER_MISSING,code:L.WORKER_RUNNER_MISSING},runnerCreationFailure:{message:y.WORKER_RUNNER_CREATION_FAILURE,code:L.WORKER_RUNNER_CREATION_FAILURE},runnerExists:{message:y.WORKER_RUNNER_EXISTS,code:L.WORKER_RUNNER_EXISTS},recognizerCreationFailure:{message:y.WORKER_RECOGNIZER_CREATION_FAILURE,code:L.WORKER_RECOGNIZER_CREATION_FAILURE},functionInvokeFailure:{message:y.WORKER_FUNCTION_INVOKE_FAILURE,code:L.WORKER_FUNCTION_INVOKE_FAILURE},wasmInitMissing:{message:y.WORKER_WASM_INIT_MISSING,code:L.WORKER_WASM_INIT_MISSING},wasmLoadFailure:{message:y.WORKER_WASM_LOAD_FAILURE,code:L.WORKER_WASM_LOAD_FAILURE},handleUndefined:{message:y.WORKER_HANDLE_UNDEFINED,code:L.WORKER_HANDLE_UNDEFINED}};var b,F;!function(e){e[e.Invalid=0]="Invalid",e[e.RequiresServerPermission=1]="RequiresServerPermission",e[e.Valid=2]="Valid"}(b||(b={})),function(e){e.LicenseTokenStateInvalid="LICENSE_TOKEN_STATE_INVALID",e.NetworkError="NETWORK_ERROR",e.RemoteLock="REMOTE_LOCK",e.PermissionExpired="PERMISSION_EXPIRED",e.PayloadCorrupted="PAYLOAD_CORRUPTED",e.PayloadSignatureVerificationFailed="PAYLOAD_SIGNATURE_VERIFICATION_FAILED",e.IncorrectTokenState="INCORRECT_TOKEN_STATE"}(F||(F={}));function k(e){return{licenseId:e.licenseId,licensee:e.licensee,packageName:e.packageName,platform:"Browser",sdkName:e.sdkName,sdkVersion:e.sdkVersion}}var K;function v(t,s){return e(this,void 0,void 0,(function*(){try{const e=yield fetch("https://baltazar.microblink.com/api/v1/status/check",{method:"POST",headers:{"Content-Type":"application/json"},cache:"no-cache",body:JSON.stringify(k(t))});if(e.ok){const t=""+(yield e.text());return s.submitServerPermission(t)}return{status:K.NetworkError,lease:0,networkErrorDescription:"Server responded with status "+e.status}}catch(e){return{status:K.NetworkError,lease:0,networkErrorDescription:"Unexpected error: "+JSON.stringify(e)}}}))}function P(e){return e===M.AdvancedWithThreads}!function(e){e[e.Ok=0]="Ok",e[e.NetworkError=1]="NetworkError",e[e.RemoteLock=2]="RemoteLock",e[e.PermissionExpired=3]="PermissionExpired",e[e.PayloadCorrupted=4]="PayloadCorrupted",e[e.PayloadSignatureVerificationFailed=5]="PayloadSignatureVerificationFailed",e[e.IncorrectTokenState=6]="IncorrectTokenState"}(K||(K={}));new class{constructor(){this.context=self,this.wasmModule=null,this.nativeRecognizerRunner=null,this.objects={},this.nextObjectHandle=0,this.metadataCallbacks={},this.clearTimeoutCallback=null,this.context.onmessage=e=>{const t=e.data;switch(t.action){case n.action:this.processInitMessage(t);break;case o.action:this.processInvokeFunction(t);break;case a.action:this.processCreateNewRecognizer(t);break;case l.action:this.processInvokeObject(t);break;case c.action:this.processCreateRecognizerRunner(t);break;case E.action:this.processReconfigureRecognizerRunner(t);break;case R.action:this.processDeleteRecognizerRunner(t);break;case _.action:this.processImage(t);break;case u.action:this.resetRecognizers(t);break;case d.action:this.setDetectionOnly(t);break;case O.action:this.setCameraPreviewMirrored(t);break;case I.action:this.registerMetadataCallbacks(t);break;case N.action:this.registerClearTimeoutCallback(t);break;default:throw new T({code:L.WORKER_MESSAGE_ACTION_UNKNOWN,message:"Unknown message action: "+JSON.stringify(t.action)})}}}getNextObjectHandle(){const e=this.nextObjectHandle;return this.nextObjectHandle=this.nextObjectHandle+1,e}notifyError(e,t){this.context.postMessage(new h(e.messageID,!1,t))}notifySuccess(e){this.context.postMessage(new h(e.messageID,!0,null))}notifyInitSuccess(e,t,s){this.context.postMessage(new S(e.messageID,!0,t,s))}unwrapParameters(e){const t=[];for(const s of e.params){let n=s.parameter;s.type===r.Recognizer?(n=this.objects[n],void 0===n&&this.notifyError(e,new T(U.handleUndefined))):s.type===r.RecognizerSettings&&(n=this.restoreFunctions(n)),t.push(n)}return t}restoreFunctions(e){const t=Object.keys(e);for(const s of t){const t=e[s];"object"==typeof t&&null!==t&&"parameter"in t&&"type"in t&&t.type===r.Callback&&(e[s]=(...e)=>{const s=new D(i.recognizerCallback,[t.parameter].concat(e));this.context.postMessage(s)})}return e}scanForTransferrables(e){if("object"==typeof e){const t=Object.keys(e),s=[];for(const n of t){const t=e[n];t instanceof ImageData?s.push(t.data.buffer):t instanceof Uint8Array?s.push(t.buffer):null!==t&&"object"==typeof t&&s.push(...this.scanForTransferrables(t))}return s}return[]}registerHeartBeat(e){this.unregisterHeartBeat(),this.lease=e;let t=e-Math.floor(Date.now()/1e3);t>120?t-=120:t/=2,this.inFlightHeartBeatTimeoutId=setTimeout((()=>{this.obtainNewServerPermission(!0)}),1e3*t)}unregisterHeartBeat(){this.lease&&delete this.lease,this.inFlightHeartBeatTimeoutId&&(clearTimeout(this.inFlightHeartBeatTimeoutId),delete this.inFlightHeartBeatTimeoutId)}obtainNewServerPermission(t){return e(this,void 0,void 0,(function*(){if(this.wasmModule){const e=this.wasmModule.getActiveLicenseTokenInfo(),s=yield v(e,this.wasmModule);switch(s.status){case K.Ok:case K.RemoteLock:this.registerHeartBeat(s.lease);break;case K.NetworkError:case K.PayloadSignatureVerificationFailed:case K.PayloadCorrupted:t?(console.warn("Problem with obtaining server permission. Will attempt in 10 seconds "+K[s.status]),this.inFlightHeartBeatTimeoutId=setTimeout((()=>{this.obtainNewServerPermission(!1)}),1e4)):console.error("Problem with obtaining server permission. "+K[s.status]);break;case K.IncorrectTokenState:case K.PermissionExpired:console.error("Internal error: "+K[s.status])}return s.status}return console.error("Internal inconsistency! Wasm module not initialized where it's expected to be!"),K.IncorrectTokenState}))}willSoonExpire(){if(this.lease){if(this.wasmModule.getActiveLicenseTokenInfo().unlockResult===b.Valid){const e=Math.floor(Date.now()/1e3);return 30>this.lease-e}return!0}return!1}calculateWasmType(t){return e(this,void 0,void 0,(function*(){return null!==t.wasmType?t.wasmType:yield w(t.engineLocation)}))}calculateEngineLocationPrefix(e,t){const s=f(""===e.engineLocation?self.location.origin:e.engineLocation,function(e){switch(e){case M.AdvancedWithThreads:return"advanced-threads";case M.Advanced:return"advanced";case M.Basic:return"basic"}}(t));return e.allowHelloMessage&&console.log("Engine location prefix is:",s),s}processInitMessage(t){return e(this,void 0,void 0,(function*(){const s=yield this.calculateWasmType(t),n=this.calculateEngineLocationPrefix(t,s);let r={locateFile:e=>f(n,e)};t.registerLoadCallback&&(r=Object.assign(r,{setStatus:e=>{const t=new A(function(e){if("Running..."===e)return 100;if(0===e.length)return 0;const t=/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/.exec(e);if(t)return 100*parseInt(t[2])/parseInt(t[4]);return NaN}(e));this.context.postMessage(t)}}));try{const i=f(n,t.wasmModuleName+".js");P(s)&&(r=function(e,t,s){return t&&t>0&&(e=Object.assign(e,{allowedThreads:t})),null!==s&&(e=Object.assign(e,{mainScriptUrlOrBlob:s})),e}(r,t.numberOfWorkers,i)),importScripts(i);(0,self[t.wasmModuleName])(r).then((n=>e(this,void 0,void 0,(function*(){P(s)&&(t.allowHelloMessage&&console.log("Waiting for thread workers to boot..."),yield function(t){return e(this,void 0,void 0,(function*(){t.threadWorkersReadyPromise&&(yield t.threadWorkersReadyPromise)}))}(n));const r=yield function(t,s,n,r){return e(this,void 0,void 0,(function*(){const e=r.initializeWithLicenseKey(t,n,s);switch(e.unlockResult){case b.Invalid:return{error:new T(Object.assign(Object.assign({},p.licenseInvalid),{message:e.licenseError}),{type:F.LicenseTokenStateInvalid})};case b.Valid:return{error:null,showOverlay:(i=e.isTrial,o=e.allowRemoveDemoOverlay,a=e.allowRemoveProductionOverlay,!(i&&o||!i&&a))};case b.RequiresServerPermission:{const t=yield v(e,r);switch(t.status){case K.Ok:return{error:null,lease:t.lease};case K.NetworkError:{let e="";return t.networkErrorDescription&&(e=" "+t.networkErrorDescription),{error:new T(Object.assign(Object.assign({},p.licenseNetworkError),{message:"There has been a network error while obtaining the server permission!"+e}),{type:F.NetworkError})}}case K.RemoteLock:return{error:new T(p.licenseRemoteLocked,{type:F.RemoteLock}),lease:t.lease};case K.PermissionExpired:return{error:new T(p.licensePermissionExpired,{type:F.PermissionExpired}),lease:t.lease};case K.PayloadCorrupted:return{error:new T(p.licensePayloadCorrupted,{type:F.PayloadCorrupted}),lease:t.lease};case K.PayloadSignatureVerificationFailed:return{error:new T(p.licensePayloadVerificationFailed,{type:F.PayloadSignatureVerificationFailed}),lease:t.lease};case K.IncorrectTokenState:return{error:new T(p.licenseTokenStateIncorrect,{type:F.IncorrectTokenState}),lease:t.lease}}}}var i,o,a}))}(t.licenseKey,t.allowHelloMessage,t.userId,n);null===r.error?(this.wasmModule=n,r.lease?this.registerHeartBeat(r.lease):this.unregisterHeartBeat(),this.notifyInitSuccess(t,!!r.showOverlay,s)):this.notifyError(t,r.error)}))),(e=>{this.notifyError(t,new T(U.wasmLoadFailure,e))}))}catch(e){this.notifyError(t,new T(U.wasmLoadFailure,e))}}))}processInvokeFunction(e){if(null===this.wasmModule)return void this.notifyError(e,new T(U.wasmInitMissing));const t=e.funcName,s=this.unwrapParameters(e);try{const n=this.wasmModule[t](...s);this.context.postMessage(new g(e.messageID,n))}catch(t){this.notifyError(e,new T(U.functionInvokeFailure,t))}}processCreateNewRecognizer(e){if(null===this.wasmModule)return void this.notifyError(e,new T(U.wasmInitMissing));const t=e.className,s=this.unwrapParameters(e);try{const n=new this.wasmModule[t](...s),r=this.getNextObjectHandle();this.objects[r]=n,this.context.postMessage(new C(e.messageID,r))}catch(t){this.notifyError(e,new T(U.recognizerCreationFailure,t))}}getRecognizers(e){const t=[];for(const s of e){t.push(this.objects[s])}return t}processCreateRecognizerRunner(t){return e(this,void 0,void 0,(function*(){if(null===this.wasmModule)this.notifyError(t,new T(U.wasmInitMissing));else if(null!==this.nativeRecognizerRunner)this.notifyError(t,new T(U.runnerExists));else{this.setupMetadataCallbacks(t.registeredMetadataCallbacks);try{if(this.willSoonExpire()){const e=yield this.obtainNewServerPermission(!1);if(e!==K.Ok){const s=K[e];return void this.notifyError(t,new T({code:L.WORKER_LICENSE_UNLOCK_ERROR,message:"Cannot initialize recognizers because of invalid server permission: \n "+s},{type:F[s]}))}}const e=this.getRecognizers(t.recognizerHandles);this.nativeRecognizerRunner=new this.wasmModule.RecognizerRunner(e,t.allowMultipleResults,this.metadataCallbacks),this.notifySuccess(t)}catch(e){this.notifyError(t,new T(U.runnerCreationFailure,e))}}}))}processReconfigureRecognizerRunner(e){if(null===this.wasmModule)this.notifyError(e,new T(U.wasmInitMissing));else if(null===this.nativeRecognizerRunner)this.notifyError(e,new T(U.runnerMissing));else try{const t=this.getRecognizers(e.recognizerHandles);this.nativeRecognizerRunner.reconfigureRecognizers(t,e.allowMultipleResults),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.runnerReconfigureFailure,t))}}processDeleteRecognizerRunner(e){if(null!==this.nativeRecognizerRunner)try{this.nativeRecognizerRunner.delete(),this.nativeRecognizerRunner=null,this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.runnerDeleteFailure,t))}else this.notifyError(e,new T(U.runnerDeleted))}wrapFunctions(e,t){if("object"!=typeof e)return e;const s=Object.assign({},e),n=Object.keys(s);for(const e of n){if("function"==typeof s[e]){s[e]={parameter:{recognizerHandle:t,callbackName:e},type:r.Callback}}}return s}processInvokeObject(e){try{const t=e.objectHandle,s=e.methodName,n=this.unwrapParameters(e),r=this.objects[t];if(void 0===r)this.notifyError(e,new T({message:"Cannot find object with handle: "+t,code:L.WORKER_HANDLE_UNDEFINED}));else{const i=this.wrapFunctions(r[s](...n),t),o=this.scanForTransferrables(i);"delete"===s&&delete this.objects[t],this.context.postMessage(new g(e.messageID,i),o)}}catch(t){this.notifyError(e,new T(U.objectInvokeFailure,t))}}processImage(e){if(null!==this.nativeRecognizerRunner)try{const t=this.nativeRecognizerRunner.processImage(e.frame);this.context.postMessage(new m(e.messageID,t))}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}else this.notifyError(e,new T(U.imageProcessFailure))}resetRecognizers(e){if(null!==this.nativeRecognizerRunner)try{this.nativeRecognizerRunner.resetRecognizers(e.hardReset),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}else this.notifyError(e,new T(U.imageProcessFailure))}setDetectionOnly(e){if(null!==this.nativeRecognizerRunner)try{this.nativeRecognizerRunner.setDetectionOnlyMode(e.detectionOnlyMode),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}else this.notifyError(e,new T(U.imageProcessFailure))}setCameraPreviewMirrored(e){if(null!==this.nativeRecognizerRunner)try{this.nativeRecognizerRunner.setCameraPreviewMirrored(e.cameraPreviewMirrored),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}else this.notifyError(e,new T(U.imageProcessFailure))}setupMetadataCallbacks(e){e.onDebugText?this.metadataCallbacks.onDebugText=e=>{const t=new D(i.onDebugText,[e]);this.context.postMessage(t)}:delete this.metadataCallbacks.onDebugText,e.onDetectionFailed?this.metadataCallbacks.onDetectionFailed=()=>{const e=new D(i.onDetectionFailed,[]);this.context.postMessage(e)}:delete this.metadataCallbacks.onDetectionFailed,e.onPointsDetection?this.metadataCallbacks.onPointsDetection=e=>{const t=new D(i.onPointsDetection,[e]);this.context.postMessage(t)}:delete this.metadataCallbacks.onPointsDetection,e.onQuadDetection?this.metadataCallbacks.onQuadDetection=e=>{const t=new D(i.onQuadDetection,[e]);this.context.postMessage(t)}:delete this.metadataCallbacks.onQuadDetection,e.onFirstSideResult?this.metadataCallbacks.onFirstSideResult=()=>{const e=new D(i.onFirstSideResult,[]);this.context.postMessage(e)}:delete this.metadataCallbacks.onFirstSideResult,e.onGlare?this.metadataCallbacks.onGlare=e=>{const t=new D(i.onGlare,[e]);this.context.postMessage(t)}:delete this.metadataCallbacks.onGlare}registerMetadataCallbacks(e){if(null!==this.nativeRecognizerRunner){this.setupMetadataCallbacks(e.registeredMetadataCallbacks);try{this.nativeRecognizerRunner.setJSDelegate(this.metadataCallbacks),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}}else this.notifyError(e,new T(U.imageProcessFailure))}registerClearTimeoutCallback(e){if(null!==this.nativeRecognizerRunner){this.clearTimeoutCallback=e.callbackNonEmpty?{onClearTimeout:()=>{const e=new D(i.clearTimeoutCallback,[]);this.context.postMessage(e)}}:null;try{this.nativeRecognizerRunner.setClearTimeoutCallback(this.clearTimeoutCallback),this.notifySuccess(e)}catch(t){this.notifyError(e,new T(U.imageProcessFailure,t))}}else this.notifyError(e,new T(U.imageProcessFailure))}}}();
`], { type: "application/javascript" });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
WasmSDKWorker.createWasmWorker(worker, loadSettings, userId).then(wasmSDK => {
resolve(wasmSDK);
}, reject);
}
catch (initError) {
reject(initError);
}
});
});
}
/* eslint-enable @typescript-eslint/no-explicit-any,
@typescript-eslint/no-unsafe-assignment,
@typescript-eslint/no-unsafe-member-access,
@typescript-eslint/no-unsafe-call */
/**
* Function for creating a new RecognizerRunner.
* Note that it is currently not possible to have multiple instances of RecognizerRunner per instance of WasmSDK.
* Attempt to create new instance of RecognizerRunner prior deleting the previous one will fail.
* @param wasmSDK Instance of WasmSDK which will be used to communicate with the WebAssembly module.
* @param recognizers Array of recognizers that will be used by RecognizerRunner.
* @param allowMultipleResults Whether or not it is allowed to return multiple results from single recognition session.
* See README.md for more information.
* @param metadataCallbacks
*/
function createRecognizerRunner(wasmSDK, recognizers, allowMultipleResults = false, metadataCallbacks = {}) {
return __awaiter(this, void 0, void 0, function* () {
if (typeof wasmSDK !== "object") {
throw new SDKError(sdkErrors.missing);
}
if (typeof recognizers !== "object" || recognizers.length < 1) {
throw new SDKError(sdkErrors.recognizersMissing);
}
return wasmSDK.mbWasmModule.createRecognizerRunner(recognizers, allowMultipleResults, metadataCallbacks);
});
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Creates a new instance of `SuccessFrameGrabberRecognizer`.
* @param wasmSDK Instance of WasmSDK which will be used to communicate with the
* WebAssembly module.
* @param slaveRecognizer Instance of Recognizer that will be wrapped.
*/
function createSuccessFrameGrabberRecognizer(wasmSDK, slaveRecognizer) {
return __awaiter(this, void 0, void 0, function* () {
// taken from https://stackoverflow.com/a/53615996
const sfgr = yield wasmSDK.mbWasmModule.newRecognizer("SuccessFrameGrabberRecognizer", slaveRecognizer);
const mutableSFGR = sfgr;
mutableSFGR.wrappedRecognizer = slaveRecognizer;
return sfgr;
});
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Possible formats of barcodes that can be detected. This enum will be returned
* as part of BarcodeRecognizerResult interface.
*/
var BarcodeFormat;
(function (BarcodeFormat) {
/** Indicates that no barcode has been detected. */
BarcodeFormat[BarcodeFormat["NONE"] = 0] = "NONE";
/** Indicates that QR code has been detected. */
BarcodeFormat[BarcodeFormat["QR_CODE"] = 1] = "QR_CODE";
/** Indicates that Data Matrix 2D barcode has been detected. */
BarcodeFormat[BarcodeFormat["DATA_MATRIX"] = 2] = "DATA_MATRIX";
/** Indicates that UPC E 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["UPC_E"] = 3] = "UPC_E";
/** Indicates that UPC A 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["UPC_A"] = 4] = "UPC_A";
/** Indicates that EAN 8 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["EAN_8"] = 5] = "EAN_8";
/** Indicates that EAN 13 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["EAN_13"] = 6] = "EAN_13";
/** Indicates that Code 128 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["CODE_128"] = 7] = "CODE_128";
/** Indicates that Code 39 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["CODE_39"] = 8] = "CODE_39";
/** Indicates that ITF 1D barcode has been detected. */
BarcodeFormat[BarcodeFormat["ITF"] = 9] = "ITF";
/** Indicates that Aztec 2D barcode has been detected. */
BarcodeFormat[BarcodeFormat["AZTEC_BARCODE"] = 10] = "AZTEC_BARCODE";
/** Indicates that PDF417 2D barcode has been detected. */
BarcodeFormat[BarcodeFormat["PDF417_BARCODE"] = 11] = "PDF417_BARCODE";
})(BarcodeFormat || (BarcodeFormat = {}));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* A settings object that is used for configuring the BarcodeRecognizer.
*/
class BarcodeRecognizerSettings {
constructor() {
/**
* Enables scanning of barcodes with inverse intensity values
* (e.g. white barcode on black background).
*/
this.shouldScanInverse = false;
/**
* Enable slower, but more thorough scanning, thus giving the higher
* possibility of successful scan.
*
* NOTE: this option has no effect on PDF417 barcode scanning
*/
this.slowerThoroughScan = true;
/**
* Allow scanning PDF417 barcodes which don't have quiet zone
* surrounding it (e.g. text concatenated with barcode). This
* option can significantly increase recognition time.
*/
this.nullQuietZoneAllowed = false;
/**
* Enable decoding of non-standard PDF417 barcodes, but without
* guarantee that all data will be read. This option should be enabled
* for PDF417 barcode that has missing rows (i.e. not whole barcode is
* printed)
*/
this.uncertainDecodingAllowed = true;
/**
* Allow enabling the autodetection of image scale when scanning barcodes.
* If set to true, prior reading barcode, image scale will be
* corrected. This enabled correct reading of barcodes on high
* resolution images but slows down the recognition process.
*
* NOTE: This setting is applied only for Code39 and Code128 barcode scanning.
*/
this.useAutoScale = true;
/**
* Enable reading code39 barcode contents as extended data. For more information about code39
* extended data (a.k.a. full ASCII mode), see https://en.wikipedia.org/wiki/Code_39#Full_ASCII_Code_39
*/
this.readCode39AsExtendedData = false;
/** Should Code 128 1D barcode be scanned. */
this.scanCode128 = false;
/** Should Code 39 1D barcode be scanned. */
this.scanCode39 = false;
/** Should EAN 13 1D barcode be scanned. */
this.scanEAN13 = false;
/** Should EAN 8 1D barcode be scanned. */
this.scanEAN8 = false;
/** Should ITF 1D barcode be scanned. */
this.scanITF = false;
/** Should PDF417 2D barcode be scanned. */
this.scanPDF417 = false;
/** Should QR code be scanned. */
this.scanQRCode = false;
/** Should UPC A 1D barcode be scanned. */
this.scanUPCA = false;
/** Should UPC E 1D barcode be scanned. */
this.scanUPCE = false;
}
}
/**
* This function is used to create a new instance of `BarcodeRecognizer`.
* @param wasmSDK Instance of WasmSDK which will be used to communicate with the WebAssembly module.
*/
function createBarcodeRecognizer(wasmSDK) {
return __awaiter(this, void 0, void 0, function* () {
return wasmSDK.mbWasmModule.newRecognizer("BarcodeRecognizer");
});
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* A settings object that is used for configuring the SimNumberRecognizer.
*/
class SimNumberRecognizerSettings {
}
/**
* This function is used to create a new instance of `SimNumberRecognizer`.
* @param wasmSDK Instance of WasmSDK which will be used to communicate with the WebAssembly module.
*/
function createSimNumberRecognizer(wasmSDK) {
return __awaiter(this, void 0, void 0, function* () {
return wasmSDK.mbWasmModule.newRecognizer("SimNumberRecognizer");
});
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* A settings object that is used for configuring the VinRecognizer.
*/
class VinRecognizerSettings {
}
/**
* This function is used to create a new instance of `VinRecognizer`.
* @param wasmSDK Instance of WasmSDK which will be used to communicate with the WebAssembly module.
*/
function createVinRecognizer(wasmSDK) {
return __awaiter(this, void 0, void 0, function* () {
return wasmSDK.mbWasmModule.newRecognizer("VinRecognizer");
});
}
const BlinkInputSDK = /*#__PURE__*/Object.freeze({
__proto__: null,
get BarcodeFormat () { return BarcodeFormat; },
BarcodeRecognizerSettings: BarcodeRecognizerSettings,
CapturedFrame: CapturedFrame,
get DetectionStatus () { return DetectionStatus; },
get ErrorCodes () { return ErrorCodes$1; },
get ErrorMessages () { return ErrorMessages$1; },
get ImageOrientation () { return ImageOrientation; },
get LicenseErrorType () { return LicenseErrorType; },
get LicenseTokenState () { return LicenseTokenState; },
get NotSupportedReason () { return NotSupportedReason; },
get PreferredCameraType () { return PreferredCameraType; },
get RecognizerResultState () { return RecognizerResultState; },
SDKError: SDKError,
SelectedCamera: SelectedCamera,
get ServerPermissionSubmitResultStatus () { return ServerPermissionSubmitResultStatus; },
SimNumberRecognizerSettings: SimNumberRecognizerSettings,
get VideoRecognitionMode () { return VideoRecognitionMode; },
VideoRecognizer: VideoRecognizer,
VinRecognizerSettings: VinRecognizerSettings,
WasmSDKLoadSettings: WasmSDKLoadSettings,
get WasmType () { return WasmType; },
bindCameraToVideoFeed: bindCameraToVideoFeed,
captureFrame: captureFrame,
clearVideoFeed: clearVideoFeed,
createBarcodeRecognizer: createBarcodeRecognizer,
createRecognizerRunner: createRecognizerRunner,
createSimNumberRecognizer: createSimNumberRecognizer,
createSuccessFrameGrabberRecognizer: createSuccessFrameGrabberRecognizer,
createVinRecognizer: createVinRecognizer,
detectWasmType: detectWasmType,
frameCaptureErrors: frameCaptureErrors,
getCameraDevices: getCameraDevices$1,
isBrowserSupported: isBrowserSupported,
isInAppBrowser: isInAppBrowser,
licenseErrors: licenseErrors,
loadWasmModule: loadWasmModule,
localSdkErrors: localSdkErrors,
obtainNewServerPermission: obtainNewServerPermission,
sdkErrors: sdkErrors,
selectCamera: selectCamera,
unlockWasmSDK: unlockWasmSDK,
videoRecognizerErrors: videoRecognizerErrors,
wasmFolder: wasmFolder,
workerErrors: workerErrors
});
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/**
* Events
*/
class EventReady {
constructor(sdk) {
this.sdk = sdk;
}
}
/**
* Error codes
*/
var Code;
(function (Code) {
Code["EmptyResult"] = "EMPTY_RESULT";
Code["InvalidRecognizerOptions"] = "INVALID_RECOGNIZER_OPTIONS";
Code["NoImageFileFound"] = "NO_IMAGE_FILE_FOUND";
Code["NoFirstImageFileFound"] = "NO_FIRST_IMAGE_FILE_FOUND";
Code["NoSecondImageFileFound"] = "NO_SECOND_IMAGE_FILE_FOUND";
Code["GenericScanError"] = "GENERIC_SCAN_ERROR";
Code["CameraNotAllowed"] = "CAMERA_NOT_ALLOWED";
Code["CameraInUse"] = "CAMERA_IN_USE";
Code["CameraGenericError"] = "CAMERA_GENERIC_ERROR";
})(Code || (Code = {}));
/**
* Scan structures
*/
const AvailableRecognizers = {
BarcodeRecognizer: 'createBarcodeRecognizer',
SimNumberRecognizer: 'createSimNumberRecognizer',
VinRecognizer: 'createVinRecognizer',
};
var ImageRecognitionType;
(function (ImageRecognitionType) {
ImageRecognitionType["Single"] = "Single";
ImageRecognitionType["Combined"] = "Combined";
})(ImageRecognitionType || (ImageRecognitionType = {}));
var CombinedImageType;
(function (CombinedImageType) {
CombinedImageType["First"] = "First";
CombinedImageType["Second"] = "Second";
})(CombinedImageType || (CombinedImageType = {}));
var RecognitionStatus;
(function (RecognitionStatus) {
RecognitionStatus["NoImageFileFound"] = "NoImageFileFound";
RecognitionStatus["NoFirstImageFileFound"] = "NoFirstImageFileFound";
RecognitionStatus["NoSecondImageFileFound"] = "NoSecondImageFileFound";
RecognitionStatus["Preparing"] = "Preparing";
RecognitionStatus["Ready"] = "Ready";
RecognitionStatus["Processing"] = "Processing";
RecognitionStatus["DetectionFailed"] = "DetectionFailed";
RecognitionStatus["EmptyResultState"] = "EmptyResultState";
RecognitionStatus["OnFirstSideResult"] = "OnFirstSideResult";
RecognitionStatus["ScanSuccessful"] = "ScanSuccessful";
RecognitionStatus["DocumentClassified"] = "DocumentClassified";
// Camera states
RecognitionStatus["DetectionStatusChange"] = "DetectionStatusChange";
RecognitionStatus["NoSupportForMediaDevices"] = "NoSupportForMediaDevices";
RecognitionStatus["CameraNotFound"] = "CameraNotFound";
RecognitionStatus["CameraNotAllowed"] = "CameraNotAllowed";
RecognitionStatus["UnableToAccessCamera"] = "UnableToAccessCamera";
RecognitionStatus["CameraInUse"] = "CameraInUse";
RecognitionStatus["CameraGenericError"] = "CameraGenericError";
// Errors
RecognitionStatus["UnknownError"] = "UnknownError";
// BlinkInputSDK.DetectionStatus
RecognitionStatus["DetectionStatusFail"] = "Fail";
RecognitionStatus["DetectionStatusSuccess"] = "Success";
RecognitionStatus["DetectionStatusCameraTooHigh"] = "CameraTooHigh";
RecognitionStatus["DetectionStatusFallbackSuccess"] = "FallbackSuccess";
RecognitionStatus["DetectionStatusPartial"] = "Partial";
RecognitionStatus["DetectionStatusCameraAtAngle"] = "CameraAtAngle";
RecognitionStatus["DetectionStatusCameraTooNear"] = "CameraTooNear";
RecognitionStatus["DetectionStatusDocumentTooCloseToEdge"] = "DocumentTooCloseToEdge";
})(RecognitionStatus || (RecognitionStatus = {}));
var CameraExperience;
(function (CameraExperience) {
CameraExperience["Barcode"] = "BARCODE";
CameraExperience["CardCombined"] = "CARD_COMBINED";
CameraExperience["CardSingleSide"] = "CARD_SINGLE_SIDE";
CameraExperience["PaymentCard"] = "PAYMENT_CARD";
})(CameraExperience || (CameraExperience = {}));
var CameraExperienceState;
(function (CameraExperienceState) {
CameraExperienceState["AdjustAngle"] = "AdjustAngle";
CameraExperienceState["Classification"] = "Classification";
CameraExperienceState["Default"] = "Default";
CameraExperienceState["Detection"] = "Detection";
CameraExperienceState["Done"] = "Done";
CameraExperienceState["DoneAll"] = "DoneAll";
CameraExperienceState["Flip"] = "Flip";
CameraExperienceState["MoveCloser"] = "MoveCloser";
CameraExperienceState["MoveFarther"] = "MoveFarther";
})(CameraExperienceState || (CameraExperienceState = {}));
const CameraExperienceStateDuration = new Map([
[CameraExperienceState.AdjustAngle, 2500],
[CameraExperienceState.Default, 500],
[CameraExperienceState.Done, 300],
[CameraExperienceState.DoneAll, 400],
[CameraExperienceState.Flip, 3500],
[CameraExperienceState.MoveCloser, 2500],
[CameraExperienceState.MoveFarther, 2500]
]);
var CameraExperienceReticleAnimation;
(function (CameraExperienceReticleAnimation) {
CameraExperienceReticleAnimation[CameraExperienceReticleAnimation["Default"] = 0] = "Default";
CameraExperienceReticleAnimation[CameraExperienceReticleAnimation["Detection"] = 1] = "Detection";
CameraExperienceReticleAnimation[CameraExperienceReticleAnimation["Classification"] = 2] = "Classification";
})(CameraExperienceReticleAnimation || (CameraExperienceReticleAnimation = {}));
/**
* User feedback structures
*/
var FeedbackCode;
(function (FeedbackCode) {
FeedbackCode["CameraDisabled"] = "CAMERA_DISABLED";
FeedbackCode["CameraGenericError"] = "CAMERA_GENERIC_ERROR";
FeedbackCode["CameraInUse"] = "CAMERA_IN_USE";
FeedbackCode["CameraNotAllowed"] = "CAMERA_NOT_ALLOWED";
FeedbackCode["GenericScanError"] = "GENERIC_SCAN_ERROR";
FeedbackCode["ScanStarted"] = "SCAN_STARTED";
FeedbackCode["ScanUnsuccessful"] = "SCAN_UNSUCCESSFUL";
FeedbackCode["ScanSuccessful"] = "SCAN_SUCCESSFUL";
})(FeedbackCode || (FeedbackCode = {}));
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
/* eslint-disable max-len */
/**
* Structures of Error Codes, Error Messages, and CustomError compatible objects for the Error Generator utility.
* Error Code convention: SECTION_OBJECT_(ACTION)_PROBLEM
*/
var ErrorCodes;
(function (ErrorCodes) {
ErrorCodes["BrowserNotSupported"] = "BROWSER_NOT_SUPPORTED";
ErrorCodes["LicenseError"] = "LICENSE_ERROR";
ErrorCodes["SdkLoadFailed"] = "SDK_LOAD_FAILED";
ErrorCodes["InternetNotAvailable"] = "INTERNET_NOT_AVAILABLE";
ErrorCodes["InvalidRecognizers"] = "INVALID_RECOGNIZERS";
})(ErrorCodes || (ErrorCodes = {}));
var ErrorMessages;
(function (ErrorMessages) {
ErrorMessages["BrowserNotSupported"] = "Browser is not supported!";
ErrorMessages["LicenseError"] = "Something is wrong with the license.";
ErrorMessages["SdkLoadFailed"] = "Failed to load SDK!";
})(ErrorMessages || (ErrorMessages = {}));
const componentErrors = {
browserNotSupported: {
code: ErrorCodes.BrowserNotSupported,
message: ErrorMessages.BrowserNotSupported,
},
licenseError: {
code: ErrorCodes.LicenseError,
message: ErrorMessages.LicenseError,
},
sdkLoadFailed: {
code: ErrorCodes.SdkLoadFailed,
message: ErrorMessages.SdkLoadFailed,
}
};
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
const _IS_IMAGE_CAPTURE = false;
async function getCameraDevices() {
const devices = await getCameraDevices$1();
const allDevices = devices.frontCameras.concat(devices.backCameras);
const finalEntries = allDevices.map((el) => {
return {
prettyName: el.label,
details: el
};
});
return finalEntries;
}
class SdkService {
constructor() {
this.cancelInitiatedFromOutside = false;
this.showOverlay = false;
this.eventEmitter$ = document.createElement('a');
}
delete() {
var _a;
(_a = this.sdk) === null || _a === void 0 ? void 0 : _a.delete();
}
initialize(licenseKey, sdkSettings) {
const loadSettings = new WasmSDKLoadSettings(licenseKey);
loadSettings.allowHelloMessage = sdkSettings.allowHelloMessage;
loadSettings.engineLocation = sdkSettings.engineLocation;
if (sdkSettings.wasmType) {
loadSettings.wasmType = sdkSettings.wasmType;
}
return new Promise((resolve) => {
loadWasmModule(loadSettings)
.then((sdk) => {
this.sdk = sdk;
this.showOverlay = sdk.showOverlay;
resolve(new EventReady(this.sdk));
})
.catch(error => {
resolve(new SDKError(componentErrors.sdkLoadFailed, error));
});
});
}
checkRecognizers(recognizers) {
if (!recognizers || !recognizers.length) {
return {
status: false,
message: 'There are no provided recognizers!'
};
}
for (const recognizer of recognizers) {
if (!this.isRecognizerAvailable(recognizer)) {
return {
status: false,
message: `Recognizer "${recognizer}" doesn't exist!`
};
}
}
return {
status: true
};
}
getDesiredCameraExperience(_recognizers = [], _recognizerOptions = {}) {
return CameraExperience.Barcode;
}
async scanFromCamera(configuration, eventCallback) {
var _a, _b;
eventCallback({ status: RecognitionStatus.Preparing });
this.cancelInitiatedFromOutside = false;
// Prepare terminate mechanism before recognizer and runner instances are created
this.eventEmitter$.addEventListener('terminate', async () => {
var _a, _b, _c, _d, _e, _f, _g, _h;
(_b = (_a = this.videoRecognizer) === null || _a === void 0 ? void 0 : _a.cancelRecognition) === null || _b === void 0 ? void 0 : _b.call(_a);
window.setTimeout(() => { var _a, _b; return (_b = (_a = this.videoRecognizer) === null || _a === void 0 ? void 0 : _a.releaseVideoFeed) === null || _b === void 0 ? void 0 : _b.call(_a); }, 1);
if (recognizerRunner) {
try {
await recognizerRunner.delete();
}
catch (error) {
// Psst, this error should not happen.
}
}
for (const recognizer of recognizers) {
if (!recognizer) {
continue;
}
if (((_c = recognizer.recognizer) === null || _c === void 0 ? void 0 : _c.objectHandle) > -1) {
(_e = (_d = recognizer.recognizer).delete) === null || _e === void 0 ? void 0 : _e.call(_d);
}
if (((_f = recognizer.successFrame) === null || _f === void 0 ? void 0 : _f.objectHandle) > -1) {
(_h = (_g = recognizer.successFrame).delete) === null || _h === void 0 ? void 0 : _h.call(_g);
}
}
});
// Prepare recognizers and runner
const recognizers = await this.createRecognizers(configuration.recognizers, configuration.recognizerOptions, configuration.successFrame);
const recognizerRunner = await this.createRecognizerRunner(recognizers, eventCallback);
try {
this.videoRecognizer = await VideoRecognizer.createVideoRecognizerFromCameraStream(configuration.cameraFeed, recognizerRunner, configuration.cameraId);
eventCallback({ status: RecognitionStatus.Ready });
await this.videoRecognizer.setVideoRecognitionMode(VideoRecognitionMode.Recognition);
this.videoRecognizer.startRecognition(async (recognitionState) => {
this.videoRecognizer.pauseRecognition();
eventCallback({ status: RecognitionStatus.Processing });
if (recognitionState !== RecognizerResultState.Empty) {
for (const recognizer of recognizers) {
const results = await recognizer.recognizer.getResult();
this.recognizerName = recognizer.recognizer.recognizerName;
if (!results || results.state === RecognizerResultState.Empty) {
eventCallback({
status: RecognitionStatus.EmptyResultState,
data: {
initiatedByUser: this.cancelInitiatedFromOutside,
recognizerName: this.recognizerName
}
});
}
else {
const recognitionResults = {
recognizer: results,
recognizerName: this.recognizerName
};
if (recognizer.successFrame) {
const successFrameResults = await recognizer.successFrame.getResult();
if (successFrameResults && successFrameResults.state !== RecognizerResultState.Empty) {
recognitionResults.successFrame = successFrameResults;
}
}
recognitionResults.imageCapture = _IS_IMAGE_CAPTURE;
const scanData = {
result: recognitionResults,
initiatedByUser: this.cancelInitiatedFromOutside,
imageCapture: _IS_IMAGE_CAPTURE
};
eventCallback({
status: RecognitionStatus.ScanSuccessful,
data: scanData
});
break;
}
}
}
else {
eventCallback({
status: RecognitionStatus.EmptyResultState,
data: {
initiatedByUser: this.cancelInitiatedFromOutside,
recognizerName: ''
}
});
}
window.setTimeout(() => void this.cancelRecognition(), 400);
}, configuration.recognitionTimeout);
}
catch (error) {
if (error && ((_a = error.details) === null || _a === void 0 ? void 0 : _a.reason)) {
const reason = (_b = error.details) === null || _b === void 0 ? void 0 : _b.reason;
switch (reason) {
case NotSupportedReason.MediaDevicesNotSupported:
eventCallback({ status: RecognitionStatus.NoSupportForMediaDevices });
break;
case NotSupportedReason.CameraNotFound:
eventCallback({ status: RecognitionStatus.CameraNotFound });
break;
case NotSupportedReason.CameraNotAllowed:
eventCallback({ status: RecognitionStatus.CameraNotAllowed });
break;
case NotSupportedReason.CameraInUse:
eventCallback({ status: RecognitionStatus.CameraInUse });
break;
default:
eventCallback({ status: RecognitionStatus.UnableToAccessCamera });
}
console.warn('VideoRecognizerError', error.name, '[' + reason + ']:', error.message);
}
else {
eventCallback({ status: RecognitionStatus.UnknownError });
}
void this.cancelRecognition();
}
}
async flipCamera() {
await this.videoRecognizer.flipCamera();
}
isCameraFlipped() {
if (!this.videoRecognizer) {
return false;
}
return this.videoRecognizer.isCameraFlipped();
}
isScanFromImageAvailable(_recognizers = [], _recognizerOptions = {}) {
return true;
}
getScanFromImageType(_recognizers = [], _recognizerOptions = {}) {
return ImageRecognitionType.Single;
}
async scanFromImage(configuration, eventCallback) {
eventCallback({ status: RecognitionStatus.Preparing });
const recognizers = await this.createRecognizers(configuration.recognizers, configuration.recognizerOptions);
const recognizerRunner = await this.createRecognizerRunner(recognizers, eventCallback);
const handleTerminate = async () => {
var _a, _b, _c;
this.eventEmitter$.removeEventListener('terminate', handleTerminate);
if (recognizerRunner) {
try {
await recognizerRunner.delete();
}
catch (error) {
// Psst, this error should not happen.
}
}
for (const recognizer of recognizers) {
if (!recognizer) {
continue;
}
if (((_a = recognizer.recognizer) === null || _a === void 0 ? void 0 : _a.objectHandle) > -1) {
(_c = (_b = recognizer.recognizer).delete) === null || _c === void 0 ? void 0 : _c.call(_b);
}
}
this.eventEmitter$.dispatchEvent(new Event('terminate:done'));
};
this.eventEmitter$.addEventListener('terminate', handleTerminate);
// Get image file
if (!configuration.file || !RegExp(/^image\//).exec(configuration.file.type)) {
eventCallback({ status: RecognitionStatus.NoImageFileFound });
window.setTimeout(() => void this.cancelRecognition(), 500);
return;
}
const file = configuration.file;
const imageElement = new Image();
imageElement.src = URL.createObjectURL(file);
await imageElement.decode();
const imageFrame = captureFrame(imageElement);
// Get results
eventCallback({ status: RecognitionStatus.Processing });
const processResult = await recognizerRunner.processImage(imageFrame);
if (processResult !== RecognizerResultState.Empty) {
for (const recognizer of recognizers) {
const results = await recognizer.recognizer.getResult();
if (!results || results.state === RecognizerResultState.Empty) {
eventCallback({
status: RecognitionStatus.EmptyResultState,
data: {
initiatedByUser: this.cancelInitiatedFromOutside,
recognizerName: recognizer.name
}
});
}
else {
const recognitionResults = {
recognizer: results,
imageCapture: _IS_IMAGE_CAPTURE,
recognizerName: recognizer.name
};
eventCallback({
status: RecognitionStatus.ScanSuccessful,
data: recognitionResults
});
break;
}
}
}
else {
eventCallback({
status: RecognitionStatus.EmptyResultState,
data: {
initiatedByUser: this.cancelInitiatedFromOutside,
recognizerName: ''
}
});
}
window.setTimeout(() => void this.cancelRecognition(), 500);
}
async stopRecognition() {
void await this.cancelRecognition(true);
}
async resumeRecognition() {
this.videoRecognizer.resumeRecognition(true);
}
changeCameraDevice(camera) {
return new Promise((resolve) => {
this.videoRecognizer.changeCameraDevice(camera)
.then(() => resolve(true))
.catch(() => resolve(false));
});
}
//////////////////////////////////////////////////////////////////////////////
//
// PRIVATE METHODS
isRecognizerAvailable(recognizer) {
return !!AvailableRecognizers[recognizer];
}
async createRecognizers(recognizers, recognizerOptions, successFrame = false) {
const pureRecognizers = [];
for (const recognizer of recognizers) {
const instance = await BlinkInputSDK[AvailableRecognizers[recognizer]](this.sdk);
pureRecognizers.push(instance);
}
if (recognizerOptions && Object.keys(recognizerOptions).length > 0) {
for (const recognizer of pureRecognizers) {
const settings = await recognizer.currentSettings();
let updated = false;
if (!recognizerOptions[recognizer.recognizerName] ||
Object.keys(recognizerOptions[recognizer.recognizerName]).length < 1) {
continue;
}
for (const [key, value] of Object.entries(recognizerOptions[recognizer.recognizerName])) {
if (key in settings) {
settings[key] = value;
updated = true;
}
}
if (updated) {
await recognizer.updateSettings(settings);
}
}
}
const recognizerInstances = [];
for (let i = 0; i < pureRecognizers.length; ++i) {
const recognizer = pureRecognizers[i];
const instance = { name: recognizers[i], recognizer };
if (successFrame) {
const successFrameGrabber = await createSuccessFrameGrabberRecognizer(this.sdk, recognizer);
instance.successFrame = successFrameGrabber;
}
recognizerInstances.push(instance);
}
return recognizerInstances;
}
async createRecognizerRunner(recognizers, eventCallback) {
const metadataCallbacks = {
onDetectionFailed: () => eventCallback({ status: RecognitionStatus.DetectionFailed }),
onQuadDetection: (quad) => {
eventCallback({ status: RecognitionStatus.DetectionStatusChange, data: quad });
const detectionStatus = quad.detectionStatus;
switch (detectionStatus) {
case DetectionStatus.Fail:
eventCallback({ status: RecognitionStatus.DetectionStatusSuccess });
break;
case DetectionStatus.Success:
eventCallback({ status: RecognitionStatus.DetectionStatusSuccess });
break;
case DetectionStatus.CameraTooHigh:
eventCallback({ status: RecognitionStatus.DetectionStatusCameraTooHigh });
break;
case DetectionStatus.FallbackSuccess:
eventCallback({ status: RecognitionStatus.DetectionStatusFallbackSuccess });
break;
case DetectionStatus.Partial:
eventCallback({ status: RecognitionStatus.DetectionStatusPartial });
break;
case DetectionStatus.CameraAtAngle:
eventCallback({ status: RecognitionStatus.DetectionStatusCameraAtAngle });
break;
case DetectionStatus.CameraTooNear:
eventCallback({ status: RecognitionStatus.DetectionStatusCameraTooNear });
break;
case DetectionStatus.DocumentTooCloseToEdge:
eventCallback({ status: RecognitionStatus.DetectionStatusDocumentTooCloseToEdge });
break;
// Send nothing
}
}
};
const recognizerRunner = await createRecognizerRunner(this.sdk, recognizers.map((el) => el.successFrame || el.recognizer), false, metadataCallbacks);
return recognizerRunner;
}
async cancelRecognition(initiatedFromOutside = false) {
this.cancelInitiatedFromOutside = initiatedFromOutside;
this.eventEmitter$.dispatchEvent(new Event('terminate'));
}
}
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
const defaultTranslations = {
'action-alt-camera': 'Device camera',
'action-alt-gallery': 'From gallery',
'action-message': 'Scan or choose from gallery',
'action-message-camera': 'Device camera',
'action-message-camera-disabled': 'Camera disabled',
'action-message-camera-not-allowed': 'Camera not allowed',
'action-message-camera-in-use': 'Camera in use',
'action-message-image': 'From gallery',
'action-message-image-not-supported': 'Not supported',
'camera-disabled': 'Camera disabled',
'camera-not-allowed': 'Cannot access camera.',
'camera-in-use': 'Camera is already used by another application.',
'camera-generic-error': 'Cannot access camera.',
'camera-feedback-scan-front': ['Scan the front side', 'of a document'],
'camera-feedback-scan-back': ['Scan the back side', 'of a document'],
'camera-feedback-flip': 'Flip the document',
'camera-feedback-barcode-message': 'Scan the barcode',
'camera-feedback-move-farther': 'Move farther',
'camera-feedback-move-closer': 'Move closer',
'camera-feedback-adjust-angle': 'Adjust the angle',
'drop-info': 'Drop image here',
'drop-error': 'Whoops, we don\'t support that image format. Please upload a JPEG or PNG file.',
'initialization-error': 'Failed to load component. Try using another device or update your browser.',
'process-image-box-add': 'Add image',
'process-image-message': 'Just a moment.',
'process-image-message-inline': 'Processing',
'process-image-message-inline-done': 'Processing done',
'process-api-message': 'Just a moment',
'process-api-retry': 'Retry',
'feedback-scan-unsuccessful-title': 'Scan unsuccessful',
'feedback-scan-unsuccessful': 'We weren\'t able to recognize your document. Please try again.',
'feedback-error-generic': 'Whoops, that didn\'t work. Please give it another go.',
'check-internet-connection': 'Check internet connection.',
'network-error': 'Network error.',
'scanning-not-available': 'Scanning not available.',
'modal-window-close': 'Close',
};
class TranslationService {
constructor(alternativeTranslations) {
this.translations = defaultTranslations;
for (const key in alternativeTranslations) {
if (key in defaultTranslations) {
if (this.isExpectedValue(alternativeTranslations[key])) {
this.translations[key] = alternativeTranslations[key];
}
}
}
}
i(key) {
if (this.translations[key]) {
if (Array.isArray(this.translations[key])) {
return JSON.parse(JSON.stringify(this.translations[key]));
}
return this.translations[key];
}
}
isExpectedValue(value) {
if (Array.isArray(value)) {
const notValidFound = value.filter(item => typeof item !== 'string');
return notValidFound.length == 0;
}
return typeof value === 'string';
}
}
const blinkinputInBrowserCss = ":host{--mb-font-family:inherit;--mb-font-size:max(16px, 1rem);--mb-font-size-desktop:max(20px, 1rem);--mb-font-style:normal;--mb-font-weight:400;--mb-letter-spacing:normal;--mb-line-height:1.5em;--mb-component-background:#FFF;--mb-component-width:100%;--mb-component-font-color:#000;--mb-component-font-color-secondary:#3C3C43B2;--mb-component-font-size:inherit;--mb-component-text-transform:none;--mb-component-border-color:rgba(120, 120, 128, 0.2);--mb-component-border-radius:5px;--mb-component-border-style:solid;--mb-component-border-width:1px;--mb-component-box-shadow:none;--mb-component-button-size:40px;--mb-component-button-icon-size:20px;--mb-component-button-background:#FFF;--mb-component-button-background-selected:rgba(72, 178, 232, 0.1);--mb-component-button-border-color:rgba(120, 120, 128, 0.2);--mb-component-button-border-color-selected:rgba(120, 120, 128, 0.2);--mb-component-button-border-color-focus:rgba(72, 178, 232, 0.5);--mb-component-button-border-color-hover:rgba(60, 60, 67, 0.29);--mb-component-button-border-color-disabled:rgba(116, 116, 128, 0.08);--mb-component-button-border-radius:20px;--mb-component-button-border-style:solid;--mb-component-button-border-width:1px;--mb-component-button-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1);--mb-component-button-box-shadow-disabled:none;--mb-component-button-classic-background:#48B2E8;--mb-component-button-classic-font-size:1em;--mb-component-button-classic-font-weight:500;--mb-component-button-classic-text-color:#FFF;--mb-component-image-box-border-color:rgba(120, 120, 128, 0.2);--mb-component-image-box-border-radius:2px;--mb-component-image-box-border-width:1px;--mb-component-image-box-label-height:16px;--mb-component-image-box-label-color:rgba(60, 60, 67, 0.5);--mb-component-image-box-label-font-size:0.875em;--mb-component-image-box-label-font-weight:400;--mb-component-image-box-cta-height:20px;--mb-component-image-box-cta-label-height:20px;--mb-component-image-box-cta-color:#48B2E8;--mb-component-image-box-cta-font-size:0.875em;--mb-component-image-box-cta-font-weight:600;--mb-component-image-box-file-color:#000;--mb-component-image-box-file-font-weight:400;--mb-component-action-buttons-justify-content:flex-end;--mb-component-action-buttons-width:calc(2 * 40px + 8px);--mb-component-action-buttons-last-margin:0 0 0 8px;--mb-component-action-label:block;--mb-component-action-label-font-size:inherit;--mb-blur-filter:27px;--mb-blur-scanning-line:4px;--mb-toolbar-color:#FFF;--mb-toolbar-border-color:#FFF;--mb-toolbar-border-radius:4px;--mb-toolbar-selection-width:298px;--mb-toolbar-list-background:#FFF;--mb-toolbar-list-shadow:0px 2px 8px rgba(0, 0, 0, 0.05), 0px 2px 24px rgba(0, 0, 0, 0.1);--mb-reticle-size:6em;--mb-feedback-font-color-error:#FF2D55;--mb-feedback-font-color-info:rgba(60, 60, 67, 0.7);--mb-feedback-font-size:0.875em;--mb-feedback-font-style:normal;--mb-feedback-font-weight:400;--mb-feedback-letter-spacing:normal;--mb-feedback-line-height:1em;--mb-feedback-text-transform:none;--mb-overlay-draganddrop-background:#EDF7FD;--mb-overlay-draganddrop-background-error:#FFEAEE;--mb-overlay-draganddrop-border-color:#48B2E8;--mb-overlay-draganddrop-border-color-error:#FF2D55;--mb-overlay-draganddrop-border-style:dashed;--mb-overlay-gallery-experience-background:rgba(0, 0, 0, 0.6);--mb-overlay-gallery-experience-font-color:#FFF;--mb-overlay-gallery-experience-font-size:1em;--mb-overlay-gallery-experience-font-weight:500;--mb-overlay-gallery-experience-line-height:1.5em;--mb-modal-title-font-size:1em;--mb-modal-title-line-height:1.5em;--mb-modal-content-font-size:0.875em;--mb-modal-content-line-height:1.4em}:host{display:block;width:100%}";
let BlinkinputInBrowser = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.fatalError = createEvent(this, "fatalError", 7);
this.ready = createEvent(this, "ready", 7);
this.scanError = createEvent(this, "scanError", 7);
this.scanSuccess = createEvent(this, "scanSuccess", 7);
this.feedback = createEvent(this, "feedback", 7);
this.cameraScanStarted = createEvent(this, "cameraScanStarted", 7);
this.imageScanStarted = createEvent(this, "imageScanStarted", 7);
this.scanAborted = createEvent(this, "scanAborted", 7);
this.blocked = false;
/**
* Write a hello message to the browser console when license check is successfully performed.
*
* Hello message will contain the name and version of the SDK, which are required information for all support
* tickets.
*
* Default value is true.
*/
this.allowHelloMessage = true;
/**
* Absolute location of WASM and related JS/data files. Useful when resource files should be loaded over CDN, or
* when web frameworks/libraries are used which store resources in specific locations, e.g. inside "assets" folder.
*
* Important: if engine is hosted on another origin, CORS must be enabled between two hosts. That is, server where
* engine is hosted must have 'Access-Control-Allow-Origin' header for the location of the web app.
*
* Important: SDK and WASM resources must be from the same version of package.
*
* Default value is empty string, i.e. "". In case of empty string, value of "window.location.origin" property is
* going to be used.
*/
this.engineLocation = '';
/**
* Defines the type of the WebAssembly build that will be loaded. If omitted, SDK will determine
* the best possible WebAssembly build which should be loaded based on the browser support.
*
* Available WebAssembly builds:
*
* - 'BASIC'
* - 'ADVANCED'
* - 'ADVANCED_WITH_THREADS'
*
* For more information about different WebAssembly builds, check out the `src/MicroblinkSDK/WasmType.ts` file.
*/
this.wasmType = '';
/**
* Set to 'true' if success frame should be included in final scanning results.
*
* Default value is 'false'.
*/
this.includeSuccessFrame = false;
/**
* Set to 'false' if component should not enable drag and drop functionality.
*
* Default value is 'true'.
*/
this.enableDrag = true;
/**
* If set to 'true', UI component will not display feedback, i.e. information and error messages.
*
* Setting this attribute to 'false' won't disable 'scanError' and 'scanInfo' events.
*
* Default value is 'false'.
*/
this.hideFeedback = false;
/**
* If set to 'true', UI component will become visible after successful SDK initialization. Also, error screen
* is not going to be displayed in case of initialization error.
*
* If set to 'false', loading and error screens of the UI component will be visible during initialization and in case
* of an error.
*
* Default value is 'false'.
*/
this.hideLoadingAndErrorUi = false;
/**
* Set to 'true' if scan from camera should be enabled. If set to 'true' and camera is not available or disabled,
* related button will be visible but disabled.
*
* Default value is 'true'.
*/
this.scanFromCamera = true;
/**
* Set to 'true' if scan from image should be enabled.
*
* Default value is 'true'.
*/
this.scanFromImage = true;
/**
* Define whether to use 'FULLSCREEN' or 'INLINE' gallery overlay type.
*
* If 'FULLSCREEN' is used, when a user selects an image from which data should be extracted, an overlay will pop up
* and cover the whole screen.
*
* On the other hand, if 'INLINE' is used, there is no overlay but rather a 'Processing' message inside the UI
* component.
*
* Default value is 'INLINE'.
*/
this.galleryOverlayType = 'INLINE';
/**
* Define whether to use 'FULLSCREEN' or 'INLINE' gallery dropdown type.
*
* If 'FULLSCREEN' is used, when a user drags an image over the UI component, an overlay will pop up and cover the
* whole screen.
*
* If 'INLINE' is used, there is no fullscreen overlay, but rather the overlay is restricted to the size of the UI
* component.
*
* Default value is 'INLINE'.
*/
this.galleryDropType = 'INLINE';
/**
* Set to 'true' if text labels should be displayed below action buttons.
*
* Default value is 'false'.
*/
this.showActionLabels = false;
/**
* Set to 'true' if modal window should be displayed in case of an error.
*
* Default value is 'false'.
*/
this.showModalWindows = false;
/**
* Set to 'true' if for Barcode scanning camera feedback message should be displayed on camera screen.
*
* Default value is 'false'.
*/
this.showCameraFeedbackBarcodeMessage = false;
/**
* Camera device ID passed from root component.
*
* Client can choose which camera to turn on if array of cameras exists.
*
*/
this.cameraId = null;
/**
* Scan line animation option passed from root component.
*
* Client can choose if scan line animation will be present in UI.
*
* Default value is 'false'
*
*/
this.showScanningLine = false;
}
/**
* Control UI state of camera overlay.
*
* Possible values are 'ERROR' | 'LOADING' | 'NONE' | 'SUCCESS'.
*
* In case of state `ERROR` and if `showModalWindows` is set to `true`, modal window
* with error message will be displayed. Otherwise, UI will close.
*/
async setUiState(state) {
this.mbComponentEl.setUiState(state);
}
/**
* Starts camera scan using camera overlay with usage instructions.
*/
async startCameraScan() {
this.mbComponentEl.startCameraScan();
}
/**
* Starts image scan, emits results from provided file.
*
* @param file File to scan
*/
async startImageScan(file) {
this.mbComponentEl.startImageScan(file);
}
/**
* Show message alongside UI component.
*
* Possible values for `state` are 'FEEDBACK_ERROR' | 'FEEDBACK_INFO' | 'FEEDBACK_OK'.
*/
async setUiMessage(state, message) {
this.feedbackEl.show({ state, message });
}
componentWillLoad() {
this.init();
}
componentWillUpdate() {
var _a;
if (this.blocked) {
return;
}
(_a = this.sdkService) === null || _a === void 0 ? void 0 : _a.delete();
this.init();
}
disconnectedCallback() {
var _a;
(_a = this.sdkService) === null || _a === void 0 ? void 0 : _a.delete();
}
init() {
const rawRecognizers = stringToArray(this.rawRecognizers);
this.finalRecognizers = this.recognizers ? this.recognizers : rawRecognizers;
const rawTranslations = stringToObject(this.rawTranslations);
this.finalTranslations = this.translations ? this.translations : rawTranslations;
this.translationService = new TranslationService(this.finalTranslations || {});
this.sdkService = new SdkService();
}
render() {
return (h(Host, null, h("mb-container", null, h("mb-component", { dir: this.hostEl.getAttribute('dir'), ref: el => this.mbComponentEl = el, allowHelloMessage: this.allowHelloMessage, engineLocation: this.engineLocation, licenseKey: this.licenseKey, wasmType: this.wasmType, recognizers: this.finalRecognizers, recognizerOptions: this.recognizerOptions, recognitionTimeout: this.recognitionTimeout, includeSuccessFrame: this.includeSuccessFrame, enableDrag: this.enableDrag, hideLoadingAndErrorUi: this.hideLoadingAndErrorUi, scanFromCamera: this.scanFromCamera, scanFromImage: this.scanFromImage, galleryOverlayType: this.galleryOverlayType, galleryDropType: this.galleryDropType, showActionLabels: this.showActionLabels, showScanningLine: this.showScanningLine, showModalWindows: this.showModalWindows, showCameraFeedbackBarcodeMessage: this.showCameraFeedbackBarcodeMessage, iconCameraDefault: this.iconCameraDefault, iconCameraActive: this.iconCameraActive, iconGalleryDefault: this.iconGalleryDefault, iconGalleryActive: this.iconGalleryActive, iconInvalidFormat: this.iconInvalidFormat, iconSpinnerScreenLoading: this.iconSpinnerScreenLoading, iconSpinnerFromGalleryExperience: this.iconSpinnerFromGalleryExperience, iconGalleryScanningCompleted: this.iconGalleryScanningCompleted, sdkService: this.sdkService, translationService: this.translationService, cameraId: this.cameraId, onBlock: (ev) => { this.blocked = ev.detail; }, onFeedback: (ev) => this.feedbackEl.show(ev.detail) }), h("mb-feedback", { dir: this.hostEl.getAttribute('dir'), visible: !this.hideFeedback, ref: el => this.feedbackEl = el }))));
}
get hostEl() { return getElement(this); }
};
BlinkinputInBrowser.style = blinkinputInBrowserCss;
const mbApiProcessStatusCss = "@-webkit-keyframes reticle-rotation{100%{transform:rotate(360deg)}}@keyframes reticle-rotation{100%{transform:rotate(360deg)}}@-webkit-keyframes reticle-horizontal-shrink{0%{height:50%;top:25%}50%{height:30%;top:35%}80%{height:30%;top:35%}100%{height:50%;top:25%}}@keyframes reticle-horizontal-shrink{0%{height:50%;top:25%}50%{height:30%;top:35%}80%{height:30%;top:35%}100%{height:50%;top:25%}}@-webkit-keyframes reticle-cursor-horizontal-flip{0%{opacity:0}100%{opacity:0}}@keyframes reticle-cursor-horizontal-flip{0%{opacity:0}100%{opacity:0}}@-webkit-keyframes reticle-horizontal-flip{0%{border-radius:0;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05));background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0;transform:rotate3d()}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;opacity:0}}@keyframes reticle-horizontal-flip{0%{border-radius:0;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05));background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0;transform:rotate3d()}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;opacity:0}}:host .reticle{box-sizing:border-box;position:relative;width:100%;height:100%;border-radius:50%;background-color:rgba(60, 60, 67, 0.3);background-position:center;background-size:contain;background-repeat:no-repeat;-webkit-backdrop-filter:blur(var(--mb-blur-filter));backdrop-filter:blur(var(--mb-blur-filter));transition:all 0.4s ease}:host .reticle__cursor{box-sizing:border-box;display:block;position:absolute;width:50%;height:50%;left:25%;top:25%;border-radius:50%;border-color:transparent;border-style:solid;border-width:4px;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);background-position:center;background-size:contain;background-repeat:no-repeat}:host .reticle__cursor::before{content:\"\";position:absolute;width:4px;height:4px;top:50%;left:50%;transition:all 0.2s ease;transform-origin:center;transform:translate(-50%, -50%);background-color:#ffffff;border-radius:50%}:host .reticle__cursor::after{content:\"\";position:absolute;top:-4px;left:-4px;width:calc(50% + 4px);height:calc(50% + 4px);display:block;border-left-width:4px;border-left-style:solid;border-left-color:#ffffff;border-top-width:4px;border-top-style:solid;border-top-color:#ffffff;border-top-left-radius:100%;transition:all 0.2s ease;opacity:0;filter:drop-shadow(0 0 4px rgba(0, 0, 0, 0.1))}:host .reticle__el{box-sizing:border-box}:host .reticle__done{display:block;position:absolute;width:50%;height:50%;left:25%;top:25%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);transform-origin:center;transform:rotate(15deg) translateY(-5%);opacity:0}:host .reticle.is-default~.label[data-message=is-default],:host .reticle.is-detection~.label[data-message=is-detection],:host .reticle.is-classification~.label[data-message=is-classification],:host .reticle.is-done~.label[data-message=is-done],:host .reticle.is-done-all~.label[data-message=is-done-all],:host .reticle.is-flip~.label[data-message=is-flip],:host .reticle.is-error-move-farther~.label[data-message=is-error-move-farther],:host .reticle.is-error-move-closer~.label[data-message=is-error-move-closer],:host .reticle.is-error-adjust-angle~.label[data-message=is-error-adjust-angle]{opacity:1;visibility:visible;margin:8px 0 0 0}:host .reticle.is-default .reticle__cursor{-webkit-animation:reticle-rotation 1000ms ease-in-out infinite;animation:reticle-rotation 1000ms ease-in-out infinite;border-style:none}:host .reticle.is-default .reticle__el{position:absolute;display:block;width:50%;height:50%;overflow:hidden}:host .reticle.is-default .reticle__el::after,:host .reticle.is-default .reticle__el::before{content:\"\";position:absolute;display:block;width:100%;height:100%}:host .reticle.is-default .reticle__el:nth-child(1){top:0;left:0}:host .reticle.is-default .reticle__el:nth-child(1)::after,:host .reticle.is-default .reticle__el:nth-child(1)::before{top:0;left:0;border-top:4px solid rgba(255, 255, 255, 0.5);border-left:4px solid rgba(255, 255, 255, 0.5);border-top-left-radius:100%;transform-origin:bottom right}:host .reticle.is-default .reticle__el:nth-child(1)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(1)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(2){top:0;right:0}:host .reticle.is-default .reticle__el:nth-child(2)::after,:host .reticle.is-default .reticle__el:nth-child(2)::before{top:0;right:0;border-top:4px solid rgba(255, 255, 255, 0.5);border-right:4px solid rgba(255, 255, 255, 0.5);border-top-right-radius:100%;transform-origin:bottom left}:host .reticle.is-default .reticle__el:nth-child(2)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(2)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(3){bottom:0;right:0}:host .reticle.is-default .reticle__el:nth-child(3)::after,:host .reticle.is-default .reticle__el:nth-child(3)::before{bottom:0;right:0;transform-origin:top left;border-bottom:4px solid rgba(255, 255, 255, 0.5);border-right:4px solid rgba(255, 255, 255, 0.5);border-bottom-right-radius:100%}:host .reticle.is-default .reticle__el:nth-child(3)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(3)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(4){bottom:0;left:0}:host .reticle.is-default .reticle__el:nth-child(4)::after,:host .reticle.is-default .reticle__el:nth-child(4)::before{bottom:0;left:0;border-bottom:4px solid rgba(255, 255, 255, 0.5);border-left:4px solid rgba(255, 255, 255, 0.5);border-bottom-left-radius:100%;transform-origin:top right}:host .reticle.is-default .reticle__el:nth-child(4)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(4)::before{transform:rotate(-67.5deg)}:host .reticle.is-detection .reticle__cursor{border-color:rgba(255, 255, 255, 0.75)}:host .reticle.is-classification .reticle__cursor{-webkit-animation:reticle-rotation 250ms cubic-bezier(0.4, 0.02, 1, 1) infinite;animation:reticle-rotation 250ms cubic-bezier(0.4, 0.02, 1, 1) infinite;border-style:solid;border-color:rgba(255, 255, 255, 0.25)}:host .reticle.is-classification .reticle__cursor::after{opacity:1}:host .reticle.is-flip{-webkit-animation:reticle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;animation:reticle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both}:host .reticle.is-flip .reticle__cursor{transform-style:preserve-3d;-webkit-animation:reticle-cursor-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;animation:reticle-cursor-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both}:host .reticle.is-done{display:none}:host .reticle.is-done-all{background-color:#ffffff;box-shadow:0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05);transition:all 125ms cubic-bezier(0.4, 0.02, 1, 1)}:host .reticle.is-done-all .reticle__done{transform:rotate(0) translateY(0);opacity:1}:host .reticle.is-done-all .reticle__cursor::before{width:150vw;height:150vh;opacity:0;transition:all 200ms ease}:host .reticle.is-error-move-farther{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-move-farther .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);width:40%;height:40%;left:30%;top:30%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}:host .reticle.is-error-move-closer{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-move-closer .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);width:60%;height:60%;left:20%;top:20%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}:host .reticle.is-error-adjust-angle{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-adjust-angle .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);-webkit-animation:reticle-horizontal-shrink 600ms cubic-bezier(0.42, 0.01, 0.35, 1.74);animation:reticle-horizontal-shrink 600ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}*::after,*::before{box-sizing:border-box}:host .message{display:block;position:absolute;top:100%;left:50%;transform-origin:center;transform:translate(-50%, 0);margin:8px 0 0 0;margin-top:20px;padding:8px 12px;font-weight:500;text-align:center;text-shadow:0px 1px 4px rgba(0, 0, 0, 0.1);white-space:nowrap;color:#fff;background-color:rgba(60, 60, 67, 0.3);-webkit-backdrop-filter:blur(var(--mb-blur-filter));backdrop-filter:blur(var(--mb-blur-filter));border-radius:8px}:host .reticle-container{position:absolute;top:50%;left:50%;width:96px;height:96px;transform-origin:center;transform:translate(-50%, -50%);perspective:600px}:host button.modal-action-button{width:126px;height:32px;border-radius:0;border:0;background:#48B2E8;color:#ffffff;cursor:pointer}";
let MbApiProcessStatus = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.closeTryAgain = createEvent(this, "closeTryAgain", 7);
this.closeFromStart = createEvent(this, "closeFromStart", 7);
/**
* Element visibility, default is 'false'.
*/
this.visible = false;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: classNames({ visible: this.visible }) }, this.state === 'LOADING' &&
h("div", { class: "reticle-container" }, h("div", { class: "reticle is-classification" }, h("div", { class: "reticle__cursor" }, h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }))), h("p", { class: "message" }, this.translationService.i('process-api-message').toString())), this.state === 'SUCCESS' &&
h("div", { class: "reticle-container" }, h("div", { class: "reticle is-done-all" }, h("div", { class: "reticle__cursor" }, h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" })), h("img", { class: "reticle__done", src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjk3MiAzMy40NkMyMC43MDk1IDMzLjQ2MDUgMjAuNDQ5NCAzMy40MDkyIDIwLjIwNjggMzMuMzA5QzE5Ljk2NDEgMzMuMjA4OCAxOS43NDM2IDMzLjA2MTYgMTkuNTU4IDMyLjg3NkwxMS4wNzQgMjQuMzlDMTAuODgyOSAyNC4yMDU2IDEwLjczMDMgMjMuOTg1MSAxMC42MjU0IDIzLjc0MTFDMTAuNTIwNCAyMy40OTcyIDEwLjQ2NSAyMy4yMzQ4IDEwLjQ2MjUgMjIuOTY5MkMxMC40NiAyMi43MDM3IDEwLjUxMDQgMjIuNDQwMyAxMC42MTA4IDIyLjE5NDRDMTAuNzExMiAyMS45NDg2IDEwLjg1OTYgMjEuNzI1MiAxMS4wNDcyIDIxLjUzNzNDMTEuMjM0OSAyMS4zNDkzIDExLjQ1ODEgMjEuMjAwNyAxMS43MDM4IDIxLjA5OTlDMTEuOTQ5NSAyMC45OTkyIDEyLjIxMjggMjAuOTQ4NCAxMi40Nzg0IDIwLjk1MDVDMTIuNzQzOSAyMC45NTI2IDEzLjAwNjQgMjEuMDA3NiAxMy4yNTA1IDIxLjExMjNDMTMuNDk0NiAyMS4yMTY5IDEzLjcxNTQgMjEuMzY5MSAxMy45IDIxLjU2TDIwLjk3IDI4LjYzTDMzLjcgMTUuOTA0QzM0LjA3NSAxNS41Mjg3IDM0LjU4MzggMTUuMzE3OCAzNS4xMTQzIDE1LjMxNzZDMzUuNjQ0OCAxNS4zMTc0IDM2LjE1MzcgMTUuNTI4IDM2LjUyOSAxNS45MDNDMzYuOTA0MyAxNi4yNzggMzcuMTE1MiAxNi43ODY4IDM3LjExNTQgMTcuMzE3M0MzNy4xMTU2IDE3Ljg0NzggMzYuOTA1IDE4LjM1NjcgMzYuNTMgMTguNzMyTDIyLjM4NiAzMi44NzZDMjIuMjAwNCAzMy4wNjE2IDIxLjk3OTkgMzMuMjA4OCAyMS43MzcyIDMzLjMwOUMyMS40OTQ2IDMzLjQwOTIgMjEuMjM0NSAzMy40NjA1IDIwLjk3MiAzMy40NloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=" }))), this.state === 'ERROR' &&
h("mb-modal", { visible: true, modalTitle: this.translationService.i('feedback-scan-unsuccessful-title').toString(), content: this.translationService.i('feedback-scan-unsuccessful').toString(), onClose: () => this.closeFromStart.emit() }, h("div", { slot: "actionButtons" }, h("button", { class: "primary modal-action-button", onClick: () => this.closeTryAgain.emit() }, this.translationService.i('process-api-retry').toString())))));
}
get hostEl() { return getElement(this); }
};
MbApiProcessStatus.style = mbApiProcessStatusCss;
const mbButtonCss = ":host{box-sizing:border-box;display:none}:host a{display:block;margin:0 auto;width:calc(var(--mb-component-button-size) - 2 * var(--mb-component-button-border-width));height:calc(var(--mb-component-button-size) - 2 * var(--mb-component-button-border-width));background:var(--mb-component-button-background);border-color:var(--mb-component-button-border-color);border-radius:var(--mb-component-button-border-radius);border-style:var(--mb-component-button-border-style);border-width:var(--mb-component-button-border-width);box-shadow:var(--mb-component-button-box-shadow);text-decoration:none}:host a:hover,:host a:active,:host a:focus{cursor:pointer}:host a:focus{border-color:var(--mb-component-button-border-color-focus)}:host a:hover{border-color:var(--mb-component-button-border-color-hover)}:host(.disabled) a{border-color:var(--mb-component-button-border-color-disabled);box-shadow:var(--mb-component-button-box-shadow-disabled);cursor:default}:host(.disabled) img{opacity:0.5}:host(.visible){display:block}:host(.selected) a{background-color:var(--mb-component-button-background-selected);border-color:var(--mb-component-button-border-color-selected)}:host(.icon) a{display:flex;align-items:center;justify-content:center}:host label{cursor:inherit}:host img{display:block;width:var(--mb-component-button-icon-size);height:var(--mb-component-button-icon-size)}:host span{display:block;padding-top:8px;font-size:var(--mb-component-font-size);font-weight:var(--mb-font-weight);line-height:var(--mb-line-height);color:var(--mb-feedback-font-color-info)}";
let MbButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.buttonClick = createEvent(this, "buttonClick", 7);
/**
* Set to 'true' if button should be disabled, and if click events should not be triggered.
*/
this.disabled = false;
/**
* Set to 'true' if button contains an icon.
*/
this.icon = false;
/**
* Set to 'true' if default event should be prevented.
*/
this.preventDefault = false;
/**
* Set to 'true' if button should be visible.
*/
this.visible = false;
/**
* Set to 'true' if button should enter 'selected' state.
*/
this.selected = false;
/**
* Passed image from parent component.
*/
this.imageSrcDefault = '';
/**
* Passed image from parent component.
*/
this.imageSrcActive = '';
/**
* Passed description text for image element from parent component.
*/
this.imageAlt = '';
/**
* Set to string which should be displayed below the icon.
*
* If omitted, nothing will show.
*/
this.label = '';
this.imageSrc = this.imageSrcDefault;
}
handleClick(ev) {
if (this.preventDefault) {
ev.preventDefault();
}
if (this.disabled) {
ev.stopPropagation();
return;
}
this.buttonClick.emit(ev);
}
handleMouseOver() {
if (!this.disabled) {
this.imageSrc = this.imageSrcActive;
}
}
handleMouseOut() {
if (!this.disabled) {
this.imageSrc = this.imageSrcDefault;
}
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: classNames({ visible: this.visible, disabled: this.disabled, icon: this.icon, selected: this.selected }), onClick: (ev) => this.handleClick(ev) }, h("a", { onMouseOver: this.handleMouseOver.bind(this), onMouseOut: this.handleMouseOut.bind(this), href: "javascript:void(0)" }, this.imageSrcDefault && this.imageAlt === 'action-alt-camera' &&
h("img", { src: this.imageSrc, alt: this.translationService.i(this.imageAlt).toString() }), this.imageSrcDefault && this.imageAlt === 'action-alt-gallery' &&
h("label", { htmlFor: "scan-from-image-input" }, h("img", { src: this.imageSrc, alt: this.translationService.i(this.imageAlt).toString() }))), this.label !== '' &&
h("span", null, this.label)));
}
get hostEl() { return getElement(this); }
};
MbButton.style = mbButtonCss;
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function getStateClass(state) {
let stateClass = 'is-default';
switch (state) {
case CameraExperienceState.Classification:
stateClass = 'is-classification';
break;
case CameraExperienceState.Default:
stateClass = 'is-default';
break;
case CameraExperienceState.Detection:
stateClass = 'is-detection';
break;
case CameraExperienceState.MoveFarther:
stateClass = 'is-error-move-farther';
break;
case CameraExperienceState.MoveCloser:
stateClass = 'is-error-move-closer';
break;
case CameraExperienceState.AdjustAngle:
stateClass = 'is-error-adjust-angle';
break;
case CameraExperienceState.Flip:
stateClass = 'is-flip';
break;
case CameraExperienceState.Done:
stateClass = 'is-done';
break;
case CameraExperienceState.DoneAll:
stateClass = 'is-done-all';
break;
// Reset class
}
return stateClass;
}
const mbCameraExperienceCss = "@charset \"UTF-8\";@-webkit-keyframes reticle-rotation{100%{transform:rotate(360deg)}}@keyframes reticle-rotation{100%{transform:rotate(360deg)}}@-webkit-keyframes reticle-horizontal-shrink{0%{height:50%;top:25%}50%{height:30%;top:35%}80%{height:30%;top:35%}100%{height:50%;top:25%}}@keyframes reticle-horizontal-shrink{0%{height:50%;top:25%}50%{height:30%;top:35%}80%{height:30%;top:35%}100%{height:50%;top:25%}}@-webkit-keyframes reticle-cursor-horizontal-flip{0%{opacity:0}100%{opacity:0}}@keyframes reticle-cursor-horizontal-flip{0%{opacity:0}100%{opacity:0}}@-webkit-keyframes reticle-horizontal-flip{0%{border-radius:0;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05));background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0;transform:rotate3d()}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;opacity:0}}@keyframes reticle-horizontal-flip{0%{border-radius:0;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05));background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0;transform:rotate3d()}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05Mi4yODk3IDAuNTc3NDg0SDMuNzEwMzFDMS42NzEzMSAwLjU3NzQ4NCAwIDIuMjQ4NzkgMCA0LjI4Nzc5VjU3LjA2NzdDMCA1OS4xMDY3IDEuNjcxMzEgNjAuNzc4MSAzLjcxMDMxIDYwLjc3ODFIOTIuMjg5N0M5NC4zMjg3IDYwLjc3ODEgOTYgNTkuMTA2NyA5NiA1Ny4wNjc3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRaTTM4LjMzOTggMzYuNTQ0MUMzOC4zMzk4IDM4LjAxNDggMzcuMTM2NSAzOS4yMTgyIDM1LjY2NTcgMzkuMjE4MkgzMy4xNTg4QzMyLjU5MDUgMzYuNzQ0NiAzMS4yNTM1IDM1LjAwNjUgMjguMDExMSAzNC4yMDQyTDI1LjMzNyAzMy41MzU3TDI3LjIwODkgMzEuNTMwMUMyOC42NDYyIDI5Ljk5MjUgMjkuNDgxOSAyNy43NTMgMjkuNDgxOSAyNS40MTMxQzI5LjQ4MTkgMjIuNzM5IDI4Ljg0NjggMTYuNTIxOCAyMy4wOTc1IDE2LjUyMThDMTguMTUwNCAxNi41MjE4IDE2LjM3ODggMjEuMTAxMiAxNi4zNzg4IDI1LjQxMzFDMTYuMzc4OCAyNy43NTMgMTcuMjE0NSAyOS45OTI1IDE4LjY1MTggMzEuNTMwMUwyMC41MjM3IDMzLjUzNTdMMTcuODQ5NiAzNC4yMDQyQzE0LjkwODEgMzQuOTM5NiAxMy40MDM5IDM2LjM3NjkgMTIuNzM1NCAzOS4yMTgySDEwLjIyODRDOC43NTc2NiAzOS4yMTgyIDcuNTU0MzIgMzguMDE0OCA3LjU1NDMyIDM2LjU0NDFWMTEuMDczM0M3LjU1NDMyIDkuNjAyNTUgOC43NTc2NiA4LjM5OTIxIDEwLjIyODQgOC4zOTkyMUgzNS42OTkyQzM3LjE2OTkgOC4zOTkyMSAzOC4zNzMzIDkuNjAyNTUgMzguMzczMyAxMS4wNzMzVjM2LjU0NDFIMzguMzM5OFpNNzMuMTAzMSAzNC4yNzExSDQ3LjE2NDNWMzAuOTI4NUg3My4xMDMxVjM0LjI3MTFaTTg4LjMxMiA1My44OTIzSDc2LjU3OTRWNTAuNTQ5Nkg4OC4zMTJWNTMuODkyM1pNODguMzEyIDI1LjQ4SDQ3LjE2NDNWMjIuMTM3NEg4OC4zMTJWMjUuNDhaTTg4LjMxMiAxNi42ODg5SDQ3LjE2NDNWMTMuMzQ2M0g4OC4zMTJWMTYuNjg4OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA5NiA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik05NiAxMC4wMDM3VjQuMjg3NzlDOTYgMi4yNDg3OSA5NC4zMjg3IDAuNTc3NDg0IDkyLjI4OTcgMC41Nzc0ODRIMy43MTAzMUMxLjY3MTMxIDAuNTc3NDg0IDAgMi4yNDg3OSAwIDQuMjg3NzlWMTAuMDAzN0g5NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wIDIwLjAzMTVWNTcuMDY3OEMwIDU5LjEwNjcgMS42NzEzMSA2MC43NzgxIDMuNzEwMzEgNjAuNzc4MUg5Mi4yODk3Qzk0LjMyODcgNjAuNzc4MSA5NiA1OS4xMDY3IDk2IDU3LjA2NzhWMjAuMDMxNUgwWk04OC4yNzg2IDUzLjgyNTRINy43MjE0NVY1MC40ODI4SDg4LjI3ODZWNTMuODI1NFpNODguMjc4NiA0NS4xMzQ2SDcuNzIxNDVWNDEuNzkySDg4LjI3ODZWNDUuMTM0NloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iNjAuMjAwNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41Nzc0ODQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;opacity:0}}:host .reticle{box-sizing:border-box;position:relative;width:100%;height:100%;border-radius:50%;background-color:rgba(60, 60, 67, 0.3);background-position:center;background-size:contain;background-repeat:no-repeat;-webkit-backdrop-filter:blur(var(--mb-blur-filter));backdrop-filter:blur(var(--mb-blur-filter));transition:all 0.4s ease}:host .reticle__cursor{box-sizing:border-box;display:block;position:absolute;width:50%;height:50%;left:25%;top:25%;border-radius:50%;border-color:transparent;border-style:solid;border-width:4px;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);background-position:center;background-size:contain;background-repeat:no-repeat}:host .reticle__cursor::before{content:\"\";position:absolute;width:4px;height:4px;top:50%;left:50%;transition:all 0.2s ease;transform-origin:center;transform:translate(-50%, -50%);background-color:#ffffff;border-radius:50%}:host .reticle__cursor::after{content:\"\";position:absolute;top:-4px;left:-4px;width:calc(50% + 4px);height:calc(50% + 4px);display:block;border-left-width:4px;border-left-style:solid;border-left-color:#ffffff;border-top-width:4px;border-top-style:solid;border-top-color:#ffffff;border-top-left-radius:100%;transition:all 0.2s ease;opacity:0;filter:drop-shadow(0 0 4px rgba(0, 0, 0, 0.1))}:host .reticle__el{box-sizing:border-box}:host .reticle__done{display:block;position:absolute;width:50%;height:50%;left:25%;top:25%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);transform-origin:center;transform:rotate(15deg) translateY(-5%);opacity:0}:host .reticle.is-default~.label[data-message=is-default],:host .reticle.is-detection~.label[data-message=is-detection],:host .reticle.is-classification~.label[data-message=is-classification],:host .reticle.is-done~.label[data-message=is-done],:host .reticle.is-done-all~.label[data-message=is-done-all],:host .reticle.is-flip~.label[data-message=is-flip],:host .reticle.is-error-move-farther~.label[data-message=is-error-move-farther],:host .reticle.is-error-move-closer~.label[data-message=is-error-move-closer],:host .reticle.is-error-adjust-angle~.label[data-message=is-error-adjust-angle]{opacity:1;visibility:visible;margin:8px 0 0 0}:host .reticle.is-default .reticle__cursor{-webkit-animation:reticle-rotation 1000ms ease-in-out infinite;animation:reticle-rotation 1000ms ease-in-out infinite;border-style:none}:host .reticle.is-default .reticle__el{position:absolute;display:block;width:50%;height:50%;overflow:hidden}:host .reticle.is-default .reticle__el::after,:host .reticle.is-default .reticle__el::before{content:\"\";position:absolute;display:block;width:100%;height:100%}:host .reticle.is-default .reticle__el:nth-child(1){top:0;left:0}:host .reticle.is-default .reticle__el:nth-child(1)::after,:host .reticle.is-default .reticle__el:nth-child(1)::before{top:0;left:0;border-top:4px solid rgba(255, 255, 255, 0.5);border-left:4px solid rgba(255, 255, 255, 0.5);border-top-left-radius:100%;transform-origin:bottom right}:host .reticle.is-default .reticle__el:nth-child(1)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(1)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(2){top:0;right:0}:host .reticle.is-default .reticle__el:nth-child(2)::after,:host .reticle.is-default .reticle__el:nth-child(2)::before{top:0;right:0;border-top:4px solid rgba(255, 255, 255, 0.5);border-right:4px solid rgba(255, 255, 255, 0.5);border-top-right-radius:100%;transform-origin:bottom left}:host .reticle.is-default .reticle__el:nth-child(2)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(2)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(3){bottom:0;right:0}:host .reticle.is-default .reticle__el:nth-child(3)::after,:host .reticle.is-default .reticle__el:nth-child(3)::before{bottom:0;right:0;transform-origin:top left;border-bottom:4px solid rgba(255, 255, 255, 0.5);border-right:4px solid rgba(255, 255, 255, 0.5);border-bottom-right-radius:100%}:host .reticle.is-default .reticle__el:nth-child(3)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(3)::before{transform:rotate(-67.5deg)}:host .reticle.is-default .reticle__el:nth-child(4){bottom:0;left:0}:host .reticle.is-default .reticle__el:nth-child(4)::after,:host .reticle.is-default .reticle__el:nth-child(4)::before{bottom:0;left:0;border-bottom:4px solid rgba(255, 255, 255, 0.5);border-left:4px solid rgba(255, 255, 255, 0.5);border-bottom-left-radius:100%;transform-origin:top right}:host .reticle.is-default .reticle__el:nth-child(4)::after{transform:rotate(67.5deg)}:host .reticle.is-default .reticle__el:nth-child(4)::before{transform:rotate(-67.5deg)}:host .reticle.is-detection .reticle__cursor{border-color:rgba(255, 255, 255, 0.75)}:host .reticle.is-classification .reticle__cursor{-webkit-animation:reticle-rotation 250ms cubic-bezier(0.4, 0.02, 1, 1) infinite;animation:reticle-rotation 250ms cubic-bezier(0.4, 0.02, 1, 1) infinite;border-style:solid;border-color:rgba(255, 255, 255, 0.25)}:host .reticle.is-classification .reticle__cursor::after{opacity:1}:host .reticle.is-flip{-webkit-animation:reticle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;animation:reticle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both}:host .reticle.is-flip .reticle__cursor{transform-style:preserve-3d;-webkit-animation:reticle-cursor-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;animation:reticle-cursor-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both}:host .reticle.is-done{display:none}:host .reticle.is-done-all{background-color:#ffffff;box-shadow:0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05);transition:all 125ms cubic-bezier(0.4, 0.02, 1, 1)}:host .reticle.is-done-all .reticle__done{transform:rotate(0) translateY(0);opacity:1}:host .reticle.is-done-all .reticle__cursor::before{width:150vw;height:150vh;opacity:0;transition:all 200ms ease}:host .reticle.is-error-move-farther{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-move-farther .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);width:40%;height:40%;left:30%;top:30%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}:host .reticle.is-error-move-closer{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-move-closer .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);width:60%;height:60%;left:20%;top:20%;transition:all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}:host .reticle.is-error-adjust-angle{background-color:rgba(255, 45, 85, 0.75)}:host .reticle.is-error-adjust-angle .reticle__cursor{border-color:rgba(255, 255, 255, 0.75);-webkit-animation:reticle-horizontal-shrink 600ms cubic-bezier(0.42, 0.01, 0.35, 1.74);animation:reticle-horizontal-shrink 600ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}@-webkit-keyframes rectangle-shrink-animation{0%{transform:scale(1)}50%{transform:scale(0.95)}100%{transform:scale(1)}}@keyframes rectangle-shrink-animation{0%{transform:scale(1)}50%{transform:scale(0.95)}100%{transform:scale(1)}}@-webkit-keyframes error-animation{0%{width:32px;height:32px}16%{width:100%;height:100%}84%{width:100%;height:100%}100%{width:32px;height:32px}}@keyframes error-animation{0%{width:32px;height:32px}16%{width:100%;height:100%}84%{width:100%;height:100%}100%{width:32px;height:32px}}@-webkit-keyframes error-animation-extended{0%{width:32px;height:32px}20%{width:100%;height:100%}80%{width:100%;height:100%}100%{width:32px;height:32px}}@keyframes error-animation-extended{0%{width:32px;height:32px}20%{width:100%;height:100%}80%{width:100%;height:100%}100%{width:32px;height:32px}}@-webkit-keyframes scanning-line-animation{0%{top:-60%}45%{transform:matrix(1, 0, 0, 1, 0, 0)}50%{top:120%;transform:matrix(1, 0, 0, -1, 0, 0)}95%{transform:matrix(1, 0, 0, -1, 0, 0)}100%{top:-60%;transform:matrix(1, 0, 0, 1, 0, 0)}}@keyframes scanning-line-animation{0%{top:-60%}45%{transform:matrix(1, 0, 0, 1, 0, 0)}50%{top:120%;transform:matrix(1, 0, 0, -1, 0, 0)}95%{transform:matrix(1, 0, 0, -1, 0, 0)}100%{top:-60%;transform:matrix(1, 0, 0, 1, 0, 0)}}@-webkit-keyframes rectangle-horizontal-flip{0%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC40ODc5IDIyLjE5NTNDMjYuOTA0NyAyMi4xOTUzIDI0IDI1LjEwMDEgMjQgMjguNjgzM1YxMTMuMDI3QzI0IDExNi42MSAyNi45MDQ3IDExOS41MTUgMzAuNDg3OSAxMTkuNTE1SDE3My4yMjJDMTc2LjgwNSAxMTkuNTE1IDE3OS43MSAxMTYuNjEgMTc5LjcxIDExMy4wMjdWMjguNjgzM0MxNzkuNzEgMjUuMTAwMSAxNzYuODA1IDIyLjE5NTMgMTczLjIyMiAyMi4xOTUzSDMwLjQ4NzlaTTQ1LjQ5MTIgNDQuMDkyMkM0My42OTk2IDQ0LjA5MjIgNDIuMjQ3MyA0NS41NDQ1IDQyLjI0NzMgNDcuMzM2MVY1OS4wOTU2QzQyLjI0NzMgNjAuODg3MiA0My42OTk2IDYyLjMzOTUgNDUuNDkxMiA2Mi4zMzk1SDY4LjE5ODlDNjkuOTkwNSA2Mi4zMzk1IDcxLjQ0MjkgNjAuODg3MiA3MS40NDI5IDU5LjA5NTZWNDcuMzM2MUM3MS40NDI5IDQ1LjU0NDUgNjkuOTkwNSA0NC4wOTIyIDY4LjE5ODkgNDQuMDkyMkg0NS40OTEyWk00Mi4yNDczIDc3Ljc0ODRDNDIuMjQ3MyA3NS45NTY4IDQzLjY5OTYgNzQuNTA0NSA0NS40OTEyIDc0LjUwNDVIMTU4LjIxOUMxNjAuMDEgNzQuNTA0NSAxNjEuNDYzIDc1Ljk1NjggMTYxLjQ2MyA3Ny43NDg0Vjc4LjU1OTRDMTYxLjQ2MyA4MC4zNTEgMTYwLjAxIDgxLjgwMzQgMTU4LjIxOSA4MS44MDM0SDQ1LjQ5MTJDNDMuNjk5NiA4MS44MDM0IDQyLjI0NzMgODAuMzUxIDQyLjI0NzMgNzguNTU5NFY3Ny43NDg0Wk00NS40OTEyIDkwLjMxODlDNDMuNjk5NiA5MC4zMTg5IDQyLjI0NzMgOTEuNzcxMiA0Mi4yNDczIDkzLjU2MjhWOTQuMzczOEM0Mi4yNDczIDk2LjE2NTQgNDMuNjk5NiA5Ny42MTc4IDQ1LjQ5MTIgOTcuNjE3OEgxMDMuNDc3QzEwNS4yNjkgOTcuNjE3OCAxMDYuNzIxIDk2LjE2NTQgMTA2LjcyMSA5NC4zNzM4VjkzLjU2MjhDMTA2LjcyMSA5MS43NzEyIDEwNS4yNjkgOTAuMzE4OSAxMDMuNDc3IDkwLjMxODlINDUuNDkxMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZCIgeD0iMCIgeT0iMC4xOTUzMTIiIHdpZHRoPSIyMDMuNzEiIGhlaWdodD0iMTQ1LjMxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);opacity:0}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC40ODc5IDIyLjE5NTNDMjYuOTA0NyAyMi4xOTUzIDI0IDI1LjEwMDEgMjQgMjguNjgzM1YxMTMuMDI3QzI0IDExNi42MSAyNi45MDQ3IDExOS41MTUgMzAuNDg3OSAxMTkuNTE1SDE3My4yMjJDMTc2LjgwNSAxMTkuNTE1IDE3OS43MSAxMTYuNjEgMTc5LjcxIDExMy4wMjdWMjguNjgzM0MxNzkuNzEgMjUuMTAwMSAxNzYuODA1IDIyLjE5NTMgMTczLjIyMiAyMi4xOTUzSDMwLjQ4NzlaTTQ1LjQ5MTIgNDQuMDkyMkM0My42OTk2IDQ0LjA5MjIgNDIuMjQ3MyA0NS41NDQ1IDQyLjI0NzMgNDcuMzM2MVY1OS4wOTU2QzQyLjI0NzMgNjAuODg3MiA0My42OTk2IDYyLjMzOTUgNDUuNDkxMiA2Mi4zMzk1SDY4LjE5ODlDNjkuOTkwNSA2Mi4zMzk1IDcxLjQ0MjkgNjAuODg3MiA3MS40NDI5IDU5LjA5NTZWNDcuMzM2MUM3MS40NDI5IDQ1LjU0NDUgNjkuOTkwNSA0NC4wOTIyIDY4LjE5ODkgNDQuMDkyMkg0NS40OTEyWk00Mi4yNDczIDc3Ljc0ODRDNDIuMjQ3MyA3NS45NTY4IDQzLjY5OTYgNzQuNTA0NSA0NS40OTEyIDc0LjUwNDVIMTU4LjIxOUMxNjAuMDEgNzQuNTA0NSAxNjEuNDYzIDc1Ljk1NjggMTYxLjQ2MyA3Ny43NDg0Vjc4LjU1OTRDMTYxLjQ2MyA4MC4zNTEgMTYwLjAxIDgxLjgwMzQgMTU4LjIxOSA4MS44MDM0SDQ1LjQ5MTJDNDMuNjk5NiA4MS44MDM0IDQyLjI0NzMgODAuMzUxIDQyLjI0NzMgNzguNTU5NFY3Ny43NDg0Wk00NS40OTEyIDkwLjMxODlDNDMuNjk5NiA5MC4zMTg5IDQyLjI0NzMgOTEuNzcxMiA0Mi4yNDczIDkzLjU2MjhWOTQuMzczOEM0Mi4yNDczIDk2LjE2NTQgNDMuNjk5NiA5Ny42MTc4IDQ1LjQ5MTIgOTcuNjE3OEgxMDMuNDc3QzEwNS4yNjkgOTcuNjE3OCAxMDYuNzIxIDk2LjE2NTQgMTA2LjcyMSA5NC4zNzM4VjkzLjU2MjhDMTA2LjcyMSA5MS43NzEyIDEwNS4yNjkgOTAuMzE4OSAxMDMuNDc3IDkwLjMxODlINDUuNDkxMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZCIgeD0iMCIgeT0iMC4xOTUzMTIiIHdpZHRoPSIyMDMuNzEiIGhlaWdodD0iMTQ1LjMxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0}}@keyframes rectangle-horizontal-flip{0%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC40ODc5IDIyLjE5NTNDMjYuOTA0NyAyMi4xOTUzIDI0IDI1LjEwMDEgMjQgMjguNjgzM1YxMTMuMDI3QzI0IDExNi42MSAyNi45MDQ3IDExOS41MTUgMzAuNDg3OSAxMTkuNTE1SDE3My4yMjJDMTc2LjgwNSAxMTkuNTE1IDE3OS43MSAxMTYuNjEgMTc5LjcxIDExMy4wMjdWMjguNjgzM0MxNzkuNzEgMjUuMTAwMSAxNzYuODA1IDIyLjE5NTMgMTczLjIyMiAyMi4xOTUzSDMwLjQ4NzlaTTQ1LjQ5MTIgNDQuMDkyMkM0My42OTk2IDQ0LjA5MjIgNDIuMjQ3MyA0NS41NDQ1IDQyLjI0NzMgNDcuMzM2MVY1OS4wOTU2QzQyLjI0NzMgNjAuODg3MiA0My42OTk2IDYyLjMzOTUgNDUuNDkxMiA2Mi4zMzk1SDY4LjE5ODlDNjkuOTkwNSA2Mi4zMzk1IDcxLjQ0MjkgNjAuODg3MiA3MS40NDI5IDU5LjA5NTZWNDcuMzM2MUM3MS40NDI5IDQ1LjU0NDUgNjkuOTkwNSA0NC4wOTIyIDY4LjE5ODkgNDQuMDkyMkg0NS40OTEyWk00Mi4yNDczIDc3Ljc0ODRDNDIuMjQ3MyA3NS45NTY4IDQzLjY5OTYgNzQuNTA0NSA0NS40OTEyIDc0LjUwNDVIMTU4LjIxOUMxNjAuMDEgNzQuNTA0NSAxNjEuNDYzIDc1Ljk1NjggMTYxLjQ2MyA3Ny43NDg0Vjc4LjU1OTRDMTYxLjQ2MyA4MC4zNTEgMTYwLjAxIDgxLjgwMzQgMTU4LjIxOSA4MS44MDM0SDQ1LjQ5MTJDNDMuNjk5NiA4MS44MDM0IDQyLjI0NzMgODAuMzUxIDQyLjI0NzMgNzguNTU5NFY3Ny43NDg0Wk00NS40OTEyIDkwLjMxODlDNDMuNjk5NiA5MC4zMTg5IDQyLjI0NzMgOTEuNzcxMiA0Mi4yNDczIDkzLjU2MjhWOTQuMzczOEM0Mi4yNDczIDk2LjE2NTQgNDMuNjk5NiA5Ny42MTc4IDQ1LjQ5MTIgOTcuNjE3OEgxMDMuNDc3QzEwNS4yNjkgOTcuNjE3OCAxMDYuNzIxIDk2LjE2NTQgMTA2LjcyMSA5NC4zNzM4VjkzLjU2MjhDMTA2LjcyMSA5MS43NzEyIDEwNS4yNjkgOTAuMzE4OSAxMDMuNDc3IDkwLjMxODlINDUuNDkxMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZCIgeD0iMCIgeT0iMC4xOTUzMTIiIHdpZHRoPSIyMDMuNzEiIGhlaWdodD0iMTQ1LjMxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=);opacity:0}5%{opacity:1}15%{transform:rotateY(0deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC40ODc5IDIyLjE5NTNDMjYuOTA0NyAyMi4xOTUzIDI0IDI1LjEwMDEgMjQgMjguNjgzM1YxMTMuMDI3QzI0IDExNi42MSAyNi45MDQ3IDExOS41MTUgMzAuNDg3OSAxMTkuNTE1SDE3My4yMjJDMTc2LjgwNSAxMTkuNTE1IDE3OS43MSAxMTYuNjEgMTc5LjcxIDExMy4wMjdWMjguNjgzM0MxNzkuNzEgMjUuMTAwMSAxNzYuODA1IDIyLjE5NTMgMTczLjIyMiAyMi4xOTUzSDMwLjQ4NzlaTTQ1LjQ5MTIgNDQuMDkyMkM0My42OTk2IDQ0LjA5MjIgNDIuMjQ3MyA0NS41NDQ1IDQyLjI0NzMgNDcuMzM2MVY1OS4wOTU2QzQyLjI0NzMgNjAuODg3MiA0My42OTk2IDYyLjMzOTUgNDUuNDkxMiA2Mi4zMzk1SDY4LjE5ODlDNjkuOTkwNSA2Mi4zMzk1IDcxLjQ0MjkgNjAuODg3MiA3MS40NDI5IDU5LjA5NTZWNDcuMzM2MUM3MS40NDI5IDQ1LjU0NDUgNjkuOTkwNSA0NC4wOTIyIDY4LjE5ODkgNDQuMDkyMkg0NS40OTEyWk00Mi4yNDczIDc3Ljc0ODRDNDIuMjQ3MyA3NS45NTY4IDQzLjY5OTYgNzQuNTA0NSA0NS40OTEyIDc0LjUwNDVIMTU4LjIxOUMxNjAuMDEgNzQuNTA0NSAxNjEuNDYzIDc1Ljk1NjggMTYxLjQ2MyA3Ny43NDg0Vjc4LjU1OTRDMTYxLjQ2MyA4MC4zNTEgMTYwLjAxIDgxLjgwMzQgMTU4LjIxOSA4MS44MDM0SDQ1LjQ5MTJDNDMuNjk5NiA4MS44MDM0IDQyLjI0NzMgODAuMzUxIDQyLjI0NzMgNzguNTU5NFY3Ny43NDg0Wk00NS40OTEyIDkwLjMxODlDNDMuNjk5NiA5MC4zMTg5IDQyLjI0NzMgOTEuNzcxMiA0Mi4yNDczIDkzLjU2MjhWOTQuMzczOEM0Mi4yNDczIDk2LjE2NTQgNDMuNjk5NiA5Ny42MTc4IDQ1LjQ5MTIgOTcuNjE3OEgxMDMuNDc3QzEwNS4yNjkgOTcuNjE3OCAxMDYuNzIxIDk2LjE2NTQgMTA2LjcyMSA5NC4zNzM4VjkzLjU2MjhDMTA2LjcyMSA5MS43NzEyIDEwNS4yNjkgOTAuMzE4OSAxMDMuNDc3IDkwLjMxODlINDUuNDkxMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZCIgeD0iMCIgeT0iMC4xOTUzMTIiIHdpZHRoPSIyMDMuNzEiIGhlaWdodD0iMTQ1LjMxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTIiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=)}20%{transform:rotateY(90deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==)}25%{transform:rotateY(-15deg);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==)}30%{transform:rotateY(0deg)}95%{opacity:1}100%{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA0IiBoZWlnaHQ9IjE0NiIgdmlld0JveD0iMCAwIDIwNCAxNDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2QpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNzMuMjIyIDIyLjE5NTNDMTc2LjgwNSAyMi4xOTUzIDE3OS43MSAyNS4xMDAxIDE3OS43MSAyOC42ODMzVjExMy4wMjdDMTc5LjcxIDExNi42MSAxNzYuODA1IDExOS41MTUgMTczLjIyMiAxMTkuNTE1SDMwLjQ4NzlDMjYuOTA0NyAxMTkuNTE1IDIzLjk5OTkgMTE2LjYxIDIzLjk5OTkgMTEzLjAyN1YyOC42ODMzQzIzLjk5OTkgMjUuMTAwMSAyNi45MDQ3IDIyLjE5NTMgMzAuNDg3OSAyMi4xOTUzSDE3My4yMjJaTTE1OC4yMTkgNDQuMDkyMkMxNjAuMDEgNDQuMDkyMiAxNjEuNDYzIDQ1LjU0NDUgMTYxLjQ2MyA0Ny4zMzYxVjU5LjA5NTZDMTYxLjQ2MyA2MC44ODcyIDE2MC4wMSA2Mi4zMzk1IDE1OC4yMTkgNjIuMzM5NUgxMzUuNTExQzEzMy43MTkgNjIuMzM5NSAxMzIuMjY3IDYwLjg4NzIgMTMyLjI2NyA1OS4wOTU2VjQ3LjMzNjFDMTMyLjI2NyA0NS41NDQ1IDEzMy43MTkgNDQuMDkyMiAxMzUuNTExIDQ0LjA5MjJIMTU4LjIxOVpNMTYxLjQ2MyA3Ny43NDg0QzE2MS40NjMgNzUuOTU2OCAxNjAuMDEgNzQuNTA0NSAxNTguMjE5IDc0LjUwNDVINDUuNDkxMkM0My42OTk2IDc0LjUwNDUgNDIuMjQ3MiA3NS45NTY4IDQyLjI0NzIgNzcuNzQ4NFY3OC41NTk0QzQyLjI0NzIgODAuMzUxIDQzLjY5OTYgODEuODAzNCA0NS40OTEyIDgxLjgwMzRIMTU4LjIxOUMxNjAuMDEgODEuODAzNCAxNjEuNDYzIDgwLjM1MSAxNjEuNDYzIDc4LjU1OTRWNzcuNzQ4NFpNMTU4LjIxOSA5MC4zMTg5QzE2MC4wMSA5MC4zMTg5IDE2MS40NjMgOTEuNzcxMiAxNjEuNDYzIDkzLjU2MjhWOTQuMzczOEMxNjEuNDYzIDk2LjE2NTQgMTYwLjAxIDk3LjYxNzggMTU4LjIxOSA5Ny42MTc4SDEwMC4yMzNDOTguNDQxNCA5Ny42MTc4IDk2Ljk4OSA5Ni4xNjU0IDk2Ljk4OSA5NC4zNzM4VjkzLjU2MjhDOTYuOTg5IDkxLjc3MTIgOTguNDQxNCA5MC4zMTg5IDEwMC4yMzMgOTAuMzE4OUgxNTguMjE5WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kIiB4PSIwIiB5PSIwLjE5NTMxMiIgd2lkdGg9IjIwMy43MSIgaGVpZ2h0PSIxNDUuMzE5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CjxmZU9mZnNldCBkeT0iMiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==);opacity:0}}:host #card-payment .rectangle{box-sizing:border-box;position:relative;background-color:transparent;background-position:center;background-repeat:no-repeat;transition:all 0.3s ease-in;order:1;flex:0 1 327px}:host #card-payment .rectangle__cursor{width:calc(100% + 4px);height:calc(100% + 4px);border-radius:8px;position:relative;top:-2px;left:-2px;overflow:hidden}:host #card-payment .rectangle__el{box-sizing:border-box;position:absolute;display:block;width:50%;height:50%;overflow:hidden}:host #card-payment .rectangle__el::after,:host #card-payment .rectangle__el::before{content:\"\";position:absolute;display:block;width:32px;height:32px}:host #card-payment .rectangle__el:nth-child(1){top:0;left:0}:host #card-payment .rectangle__el:nth-child(1)::after,:host #card-payment .rectangle__el:nth-child(1)::before{top:0;left:0;border-top:4px solid white;border-left:4px solid white;border-top-left-radius:8px;box-shadow:inset 3px 3px 8px -6px rgba(0, 0, 0, 0.2), -3px -3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #card-payment .rectangle__el:nth-child(2){top:0;right:0}:host #card-payment .rectangle__el:nth-child(2)::after,:host #card-payment .rectangle__el:nth-child(2)::before{top:0;right:0;border-top:4px solid white;border-right:4px solid white;border-top-right-radius:8px;box-shadow:inset -3px 3px 8px -6px rgba(0, 0, 0, 0.2), 3px -3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #card-payment .rectangle__el:nth-child(3){bottom:0;right:0}:host #card-payment .rectangle__el:nth-child(3)::after,:host #card-payment .rectangle__el:nth-child(3)::before{bottom:0;right:0;border-bottom:4px solid white;border-right:4px solid white;border-bottom-right-radius:8px;box-shadow:inset -3px -3px 8px -6px rgba(0, 0, 0, 0.2), 3px 3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #card-payment .rectangle__el:nth-child(4){bottom:0;left:0}:host #card-payment .rectangle__el:nth-child(4)::after,:host #card-payment .rectangle__el:nth-child(4)::before{bottom:0;left:0;border-bottom:4px solid white;border-left:4px solid white;border-bottom-left-radius:8px;box-shadow:inset 3px -3px 8px -6px rgba(0, 0, 0, 0.2), -3px 3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #card-payment .rectangle.is-default~.label[data-message=is-default],:host #card-payment .rectangle.is-detection~.label[data-message=is-detection],:host #card-payment .rectangle.is-classification~.label[data-message=is-classification],:host #card-payment .rectangle.is-done~.label[data-message=is-done],:host #card-payment .rectangle.is-done-all~.label[data-message=is-done-all],:host #card-payment .rectangle.is-flip~.label[data-message=is-flip],:host #card-payment .rectangle.is-error-move-farther~.label[data-message=is-error-move-farther],:host #card-payment .rectangle.is-error-move-closer~.label[data-message=is-error-move-closer],:host #card-payment .rectangle.is-error-adjust-angle~.label[data-message=is-error-adjust-angle]{opacity:1;visibility:visible;margin:8px 0 0 0}:host #card-payment .rectangle.is-flip{background:rgba(0, 0, 0, 0.2)}:host #card-payment .rectangle.is-flip .rectangle__el{display:none}:host #card-payment .rectangle.is-flip .rectangle__cursor{border-radius:0;background-color:transparent;background-size:auto;background-repeat:no-repeat;background-position:center;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05));transform:rotate3d(0);transform-style:preserve-3d;-webkit-animation:rectangle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both 0.5s;animation:rectangle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both 0.5s}:host #card-payment .rectangle.is-done,:host #card-payment .rectangle.is-done-all{-webkit-animation-delay:0;-webkit-animation-duration:250ms;-webkit-animation-name:rectangle-shrink-animation;-moz-animation-delay:0;-moz-animation-duration:250ms;-moz-animation-name:rectangle-shrink-animation;animation-delay:0;animation-duration:250ms;animation-name:rectangle-shrink-animation}:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(1)::after,:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(1)::before,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(1)::after,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(1)::before,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(1)::after,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(1)::before{border-top:4px solid #FF2D55;border-left:4px solid #FF2D55;-webkit-animation:1800ms 0s error-animation ease-in;animation:1800ms 0s error-animation ease-in}:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(2)::after,:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(2)::before,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(2)::after,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(2)::before,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(2)::after,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(2)::before{border-top:4px solid #FF2D55;border-right:4px solid #FF2D55;-webkit-animation:1800ms 0s error-animation ease-in;animation:1800ms 0s error-animation ease-in}:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(3)::after,:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(3)::before,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(3)::after,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(3)::before,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(3)::after,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(3)::before{border-bottom:4px solid #FF2D55;border-right:4px solid #FF2D55;-webkit-animation:1800ms 0s error-animation ease-in;animation:1800ms 0s error-animation ease-in}:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(4)::after,:host #card-payment .rectangle.is-error-move-farther .rectangle__el:nth-child(4)::before,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(4)::after,:host #card-payment .rectangle.is-error-move-closer .rectangle__el:nth-child(4)::before,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(4)::after,:host #card-payment .rectangle.is-error-adjust-angle .rectangle__el:nth-child(4)::before{border-bottom:4px solid #FF2D55;border-left:4px solid #FF2D55;-webkit-animation:1800ms 0s error-animation ease-in;animation:1800ms 0s error-animation ease-in}:host .scanning-line{opacity:0;visibility:hidden;position:absolute;width:100%;height:115px;left:0px;top:-125px;background:radial-gradient(100% 100% at 49.85% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);filter:blur(var(--mb-blur-scanning-line))}:host .scanning-line.is-active{opacity:1;visibility:visible;-webkit-animation:scanning-line-animation 2400ms cubic-bezier(0.13, 0.71, 1, 0.82) infinite;animation:scanning-line-animation 2400ms cubic-bezier(0.13, 0.71, 1, 0.82) infinite}@media only screen and (min-width: 1440px){:host .rectangle.is-error-move-farther .rectangle__el:nth-child(1)::after,:host .rectangle.is-error-move-farther .rectangle__el:nth-child(1)::before,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(1)::after,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(1)::before,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(1)::after,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(1)::before{border-top:4px solid #FF2D55;border-left:4px solid #FF2D55;-webkit-animation:2400ms 0s error-animation-extended ease-in !important;animation:2400ms 0s error-animation-extended ease-in !important}:host .rectangle.is-error-move-farther .rectangle__el:nth-child(2)::after,:host .rectangle.is-error-move-farther .rectangle__el:nth-child(2)::before,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(2)::after,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(2)::before,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(2)::after,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(2)::before{border-top:4px solid #FF2D55;border-right:4px solid #FF2D55;-webkit-animation:2400ms 0s error-animation-extended ease-in !important;animation:2400ms 0s error-animation-extended ease-in !important}:host .rectangle.is-error-move-farther .rectangle__el:nth-child(3)::after,:host .rectangle.is-error-move-farther .rectangle__el:nth-child(3)::before,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(3)::after,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(3)::before,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(3)::after,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(3)::before{border-bottom:4px solid #FF2D55;border-right:4px solid #FF2D55;-webkit-animation:2400ms 0s error-animation-extended ease-in !important;animation:2400ms 0s error-animation-extended ease-in !important}:host .rectangle.is-error-move-farther .rectangle__el:nth-child(4)::after,:host .rectangle.is-error-move-farther .rectangle__el:nth-child(4)::before,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(4)::after,:host .rectangle.is-error-move-closer .rectangle__el:nth-child(4)::before,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(4)::after,:host .rectangle.is-error-adjust-angle .rectangle__el:nth-child(4)::before{border-bottom:4px solid #FF2D55;border-left:4px solid #FF2D55;-webkit-animation:2400ms 0s error-animation-extended ease-in !important;animation:2400ms 0s error-animation-extended ease-in !important}}@keyframes rectangle-shrink-animation{0%{transform:scale(1)}50%{transform:scale(0.95)}100%{transform:scale(1)}}@keyframes scanning-line-animation{0%{top:-60%}45%{transform:matrix(1, 0, 0, 1, 0, 0)}50%{top:120%;transform:matrix(1, 0, 0, -1, 0, 0)}95%{transform:matrix(1, 0, 0, -1, 0, 0)}100%{top:-60%;transform:matrix(1, 0, 0, 1, 0, 0)}}:host #barcode .rectangle{width:100%;height:100%;box-sizing:border-box;position:relative;background-color:transparent;background-position:center;background-repeat:no-repeat;transition:all 0.3s ease-in}:host #barcode .rectangle__cursor{width:100%;height:100%;border-radius:8px;position:relative}:host #barcode .rectangle__el{box-sizing:border-box;position:absolute;display:block;width:50%;height:50%;overflow:hidden}:host #barcode .rectangle__el::after,:host #barcode .rectangle__el::before{content:\"\";position:absolute;display:block;width:32px;height:32px}:host #barcode .rectangle__el:nth-child(1){top:0;left:0}:host #barcode .rectangle__el:nth-child(1)::after,:host #barcode .rectangle__el:nth-child(1)::before{top:0;left:0;border-top:4px solid white;border-left:4px solid white;border-top-left-radius:8px;box-shadow:inset 3px 3px 8px -6px rgba(0, 0, 0, 0.2), -3px -3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #barcode .rectangle__el:nth-child(2){top:0;right:0}:host #barcode .rectangle__el:nth-child(2)::after,:host #barcode .rectangle__el:nth-child(2)::before{top:0;right:0;border-top:4px solid white;border-right:4px solid white;border-top-right-radius:8px;box-shadow:inset -3px 3px 8px -6px rgba(0, 0, 0, 0.2), 3px -3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #barcode .rectangle__el:nth-child(3){bottom:0;right:0}:host #barcode .rectangle__el:nth-child(3)::after,:host #barcode .rectangle__el:nth-child(3)::before{bottom:0;right:0;border-bottom:4px solid white;border-right:4px solid white;border-bottom-right-radius:8px;box-shadow:inset -3px -3px 8px -6px rgba(0, 0, 0, 0.2), 3px 3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #barcode .rectangle__el:nth-child(4){bottom:0;left:0}:host #barcode .rectangle__el:nth-child(4)::after,:host #barcode .rectangle__el:nth-child(4)::before{bottom:0;left:0;border-bottom:4px solid white;border-left:4px solid white;border-bottom-left-radius:8px;box-shadow:inset 3px -3px 8px -6px rgba(0, 0, 0, 0.2), -3px 3px 8px -6px rgba(0, 0, 0, 0.2);transition:border-color 0.15s linear}:host #barcode .rectangle.is-default~.label[data-message=is-default],:host #barcode .rectangle.is-detection~.label[data-message=is-detection],:host #barcode .rectangle.is-classification~.label[data-message=is-classification],:host #barcode .rectangle.is-done~.label[data-message=is-done],:host #barcode .rectangle.is-done-all~.label[data-message=is-done-all],:host #barcode .rectangle.is-flip~.label[data-message=is-flip],:host #barcode .rectangle.is-error-move-farther~.label[data-message=is-error-move-farther],:host #barcode .rectangle.is-error-move-closer~.label[data-message=is-error-move-closer],:host #barcode .rectangle.is-error-adjust-angle~.label[data-message=is-error-adjust-angle]{opacity:1;visibility:visible;margin:8px 0 0 0}:host #barcode .rectangle.is-done,:host #barcode .rectangle.is-done-all{-webkit-animation-delay:0;-webkit-animation-duration:250ms;-webkit-animation-name:rectangle-shrink-animation;-moz-animation-delay:0;-moz-animation-duration:250ms;-moz-animation-name:rectangle-shrink-animation;animation-delay:0;animation-duration:250ms;animation-name:rectangle-shrink-animation}:host .scanning-line{opacity:0;visibility:hidden;position:absolute;width:100%;height:115px;left:0px;top:-125px;background:radial-gradient(100% 100% at 49.85% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);filter:blur(var(--mb-blur-scanning-line))}:host .scanning-line.is-active{opacity:1;visibility:visible;-webkit-animation:scanning-line-animation 2400ms cubic-bezier(0.13, 0.71, 1, 0.82) infinite;animation:scanning-line-animation 2400ms cubic-bezier(0.13, 0.71, 1, 0.82) infinite}*::after,*::before{box-sizing:border-box}:host{display:block}:host .gradient-overlay{position:absolute;width:100%;height:112px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.35625) 0%, rgba(0, 0, 0, 0.25) 20.83%, rgba(0, 0, 0, 0) 100%)}:host .gradient-overlay.bottom{bottom:0;transform:matrix(1, 0, 0, -1, 0, 0)}:host mb-camera-toolbar{position:absolute;top:0;left:0;right:0;z-index:0}:host(.is-error) mb-camera-toolbar{display:none}:host::after{width:124px;height:58px;position:absolute;bottom:10px;left:calc(50% - 62px);background:no-repeat center url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCA4NSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjA4NzcgNi41NzIwNEMyMS40MDE3IDYuNTcyMDQgMjIuMjY1NyA1LjY4MTA0IDIyLjI2NTcgNC40MTIwNEMyMi4yNjU3IDMuMTI1MDQgMjEuNDEwNyAyLjI2MTA0IDIwLjA4NzcgMi4yNjEwNEgxNy40ODY3VjguODQwMDRIMTguNjM4N1Y2LjU3MjA0SDIwLjA4NzdaTTE5Ljg2MjcgMy4yODcwNEMyMC42Mjc3IDMuMjg3MDQgMjEuMDU5NyAzLjY4MzA0IDIxLjA1OTcgNC40MDMwNEMyMS4wNTk3IDUuMTIzMDQgMjAuNjM2NyA1LjU0NjA0IDE5Ljg0NDcgNS41NDYwNEgxOC42Mzg3VjMuMjg3MDRIMTkuODYyN1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMi43NzIgNi42MDgwNEMyMi43NzIgNy45OTQwNCAyMy43NzEgOC45NDgwNCAyNS4xNDggOC45NDgwNEMyNi41MjUgOC45NDgwNCAyNy41MjQgNy45OTQwNCAyNy41MjQgNi42MDgwNEMyNy41MjQgNS4yMjIwNCAyNi41MjUgNC4yNjgwNCAyNS4xNDggNC4yNjgwNEMyMy43NzEgNC4yNjgwNCAyMi43NzIgNS4yMjIwNCAyMi43NzIgNi42MDgwNFpNMjMuODcgNi42MDgwNEMyMy44NyA1Ljc5ODA0IDI0LjM5MiA1LjI0OTA0IDI1LjE0OCA1LjI0OTA0QzI1LjkwNCA1LjI0OTA0IDI2LjQyNiA1Ljc5ODA0IDI2LjQyNiA2LjYwODA0QzI2LjQyNiA3LjQxODA0IDI1LjkwNCA3Ljk2NzA0IDI1LjE0OCA3Ljk2NzA0QzI0LjM5MiA3Ljk2NzA0IDIzLjg3IDcuNDE4MDQgMjMuODcgNi42MDgwNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yOS4zMzU2IDguODQwMDRIMzAuNDA2NkwzMS4wMTg2IDYuOTMyMDRDMzEuMjQzNiA2LjIwMzA0IDMxLjMyNDYgNS44ODgwNCAzMS4zNjk2IDUuNjgxMDRDMzEuNDA1NiA1LjkwNjA0IDMxLjUwNDYgNi4zMjkwNCAzMS42ODQ2IDYuOTE0MDRMMzIuMjk2NiA4Ljg0MDA0SDMzLjMyMjZMMzQuODYxNiA0LjM5NDA0SDMzLjcwMDZMMzMuMTA2NiA2LjMwMjA0QzMzLjAyNTYgNi41ODEwNCAzMi44ODE2IDcuMTEyMDQgMzIuODA5NiA3LjQ0NTA0QzMyLjc1NTYgNy4xNDgwNCAzMi41NzU2IDYuNDgyMDQgMzIuNTIxNiA2LjMwMjA0TDMxLjkyNzYgNC4zOTQwNEgzMC44MTE2TDMwLjE5OTYgNi4zMDIwNEMzMC4wNTU2IDYuNzQzMDQgMjkuOTc0NiA3LjAyMjA0IDI5Ljg5MzYgNy40NTQwNEMyOS44MTI2IDcuMDQwMDQgMjkuNzIyNiA2LjY1MzA0IDI5LjYyMzYgNi4zMDIwNEwyOS4wMzg2IDQuMzk0MDRIMjcuODk1NkwyOS4zMzU2IDguODQwMDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzcuNDc1OCA4Ljk1NzA0QzM4LjYzNjggOC45NTcwNCAzOS40NDY4IDguMzcyMDQgMzkuNjM1OCA3LjQwMDA0SDM4LjYxODhDMzguNDkyOCA3LjgyMzA0IDM4LjA5NjggOC4wNTcwNCAzNy40OTM4IDguMDU3MDRDMzYuNzY0OCA4LjA1NzA0IDM2LjM1MDggNy42NjEwNCAzNi4yNjk4IDYuODc4MDRMMzkuNjE3OCA2Ljg2OTA0VjYuNTM2MDRDMzkuNjE3OCA1LjE1MDA0IDM4Ljc3MTggNC4yNTkwNCAzNy40Mzk4IDQuMjU5MDRDMzYuMTM0OCA0LjI1OTA0IDM1LjIyNTggNS4yMjIwNCAzNS4yMjU4IDYuNjE3MDRDMzUuMjI1OCA3Ljk5NDA0IDM2LjE1MjggOC45NTcwNCAzNy40NzU4IDguOTU3MDRaTTM3LjQ0ODggNS4xNTkwNEMzOC4xMDU4IDUuMTU5MDQgMzguNTI4OCA1LjU2NDA0IDM4LjUyODggNi4xNzYwNEgzNi4yOTY4QzM2LjQwNDggNS41MTAwNCAzNi44MDA4IDUuMTU5MDQgMzcuNDQ4OCA1LjE1OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQzLjQ2NjUgNC4zNzYwNEM0My4yODY1IDQuMzMxMDQgNDMuMTMzNSA0LjMxMzA0IDQyLjk4MDUgNC4zMTMwNEM0Mi4zODY1IDQuMzEzMDQgNDEuOTYzNSA0LjYxMDA0IDQxLjc3NDUgNS4wNTEwNEw0MS43MTE1IDQuNDAzMDRINDAuNjc2NVY4Ljg0MDA0SDQxLjc3NDVWNi42ODAwNEM0MS43NzQ1IDUuODE2MDQgNDIuMjY5NSA1LjM5MzA0IDQzLjA2MTUgNS4zOTMwNEg0My40NjY1VjQuMzc2MDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNDYuMjI5MyA4Ljk1NzA0QzQ3LjM5MDMgOC45NTcwNCA0OC4yMDAzIDguMzcyMDQgNDguMzg5MyA3LjQwMDA0SDQ3LjM3MjNDNDcuMjQ2MyA3LjgyMzA0IDQ2Ljg1MDMgOC4wNTcwNCA0Ni4yNDczIDguMDU3MDRDNDUuNTE4MyA4LjA1NzA0IDQ1LjEwNDMgNy42NjEwNCA0NS4wMjMzIDYuODc4MDRMNDguMzcxMyA2Ljg2OTA0VjYuNTM2MDRDNDguMzcxMyA1LjE1MDA0IDQ3LjUyNTMgNC4yNTkwNCA0Ni4xOTMzIDQuMjU5MDRDNDQuODg4MyA0LjI1OTA0IDQzLjk3OTMgNS4yMjIwNCA0My45NzkzIDYuNjE3MDRDNDMuOTc5MyA3Ljk5NDA0IDQ0LjkwNjMgOC45NTcwNCA0Ni4yMjkzIDguOTU3MDRaTTQ2LjIwMjMgNS4xNTkwNEM0Ni44NTkzIDUuMTU5MDQgNDcuMjgyMyA1LjU2NDA0IDQ3LjI4MjMgNi4xNzYwNEg0NS4wNTAzQzQ1LjE1ODMgNS41MTAwNCA0NS41NTQzIDUuMTU5MDQgNDYuMjAyMyA1LjE1OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjI1NzEgOC45NTcwNEM1MS45MzIxIDguOTU3MDQgNTIuNTA4MSA4LjY2MDA0IDUyLjc3ODEgOC4xNDcwNEw1Mi44NTAxIDguODQwMDRINTMuODU4MVYyLjE0NDA0SDUyLjc2OTFWNC45NjEwNEM1Mi40OTAxIDQuNTIwMDQgNTEuOTQxMSA0LjI1OTA0IDUxLjMyMDEgNC4yNTkwNEM0OS45NzkxIDQuMjU5MDQgNDkuMTY5MSA1LjI0OTA0IDQ5LjE2OTEgNi42MzUwNEM0OS4xNjkxIDguMDEyMDQgNDkuOTcwMSA4Ljk1NzA0IDUxLjI1NzEgOC45NTcwNFpNNTEuNTAwMSA3Ljk0OTA0QzUwLjczNTEgNy45NDkwNCA1MC4yNjcxIDcuMzkxMDQgNTAuMjY3MSA2LjU5OTA0QzUwLjI2NzEgNS44MDcwNCA1MC43MzUxIDUuMjQwMDQgNTEuNTAwMSA1LjI0MDA0QzUyLjI2NTEgNS4yNDAwNCA1Mi43NjAxIDUuNzk4MDQgNTIuNzYwMSA2LjU5OTA0QzUyLjc2MDEgNy40MDAwNCA1Mi4yNjUxIDcuOTQ5MDQgNTEuNTAwMSA3Ljk0OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTU4LjgwNTEgOC44NDAwNEw1OC44NzcxIDguMTQ3MDRDNTkuMTM4MSA4LjY2MDA0IDU5LjcwNTEgOC45NTcwNCA2MC4zNzExIDguOTU3MDRDNjEuNjQ5MSA4Ljk1NzA0IDYyLjQ4NjEgOC4wMTIwNCA2Mi40ODYxIDYuNjQ0MDRDNjIuNDg2MSA1LjI0MDA0IDYxLjcxMjEgNC4yNTAwNCA2MC40NDMxIDQuMjUwMDRDNTkuNzY4MSA0LjI1MDA0IDU5LjE3NDEgNC41NDcwNCA1OC44ODYxIDUuMDQyMDRWMi4xNDQwNEg1Ny43ODgxVjguODQwMDRINTguODA1MVpNNTguODk1MSA2LjU5OTA0QzU4Ljg5NTEgNS43OTgwNCA1OS4zOTAxIDUuMjQwMDQgNjAuMTQ2MSA1LjI0MDA0QzYwLjkyMDEgNS4yNDAwNCA2MS4zNzkxIDUuODA3MDQgNjEuMzc5MSA2LjU5OTA0QzYxLjM3OTEgNy4zOTEwNCA2MC45MjAxIDcuOTQ5MDQgNjAuMTQ2MSA3Ljk0OTA0QzU5LjM5MDEgNy45NDkwNCA1OC44OTUxIDcuNDAwMDQgNTguODk1MSA2LjU5OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYyLjk4NjQgMTAuOTAxQzYzLjIyOTQgMTAuOTY0IDYzLjQ5OTQgMTEgNjMuODA1NCAxMUM2NC41MzQ0IDExIDY1LjAwMjQgMTAuNjU4IDY1LjMzNTQgOS44MzAwNEw2Ny41MTM0IDQuMzk0MDRINjYuMzc5NEw2NS4xNzM0IDcuNjM0MDRMNjQuMDMwNCA0LjM5NDA0SDYyLjg2OTRMNjQuNjYwNCA5LjAyOTA0TDY0LjUzNDQgOS4zNjIwNEM2NC4zNDU0IDkuODg0MDQgNjQuMDc1NCA5Ljk4MzA0IDYzLjY0MzQgOS45ODMwNEg2Mi45ODY0VjEwLjkwMVoiIGZpbGw9IndoaXRlIi8+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81NjZfMTU1NDMpIj4KPHBhdGggZD0iTTQuODE2MzMgMjIuNTk1OUwxLjkyNTE5IDE1LjE2MzZIMFYyNC44MzY2SDEuMzEzNzdWMTcuMjI4OUw0LjMwOTkzIDI0Ljg3NzRINS4yNjg0N0w4LjI5MTQxIDE3LjE2MDhWMjQuODM2Nkg5LjY0NTcxVjE1LjE2MzZINy43MDc0N0w0LjgxNjMzIDIyLjU5NTlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMuNjUyOSAxNS4xNjM2SDEyLjIzMTNWMjQuODM2NkgxMy42NTI5VjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzIuNjYyOCAxOS45OTEzQzMzLjA1MDIgMTkuNDQ3OSAzMy4yNTY5IDE4Ljc5MjcgMzMuMjUyNyAxOC4xMjE0QzMzLjI1MjcgMTcuMzI5NyAzMi45MTI2IDE2LjU5MTQgMzIuMjk0OCAxNi4wNDE3QzMxLjY1NzcgMTUuNDc1NiAzMC43NzIxIDE1LjE2NSAyOS43OTggMTUuMTY1SDI1Ljg3MzdWMjQuODM4SDI3LjI5NTNWMjEuMzc4NkgyOS41OTc5TDMxLjYwNjYgMjQuODM2NkgzMy4yOTM5TDMxLjE0NDIgMjEuMTQwOUMzMS43NTA3IDIwLjkxODMgMzIuMjc4OSAyMC41MTgzIDMyLjY2MjggMTkuOTkxM1pNMzEuODAzOSAxOC4xMzVDMzEuODA3MSAxOC4zODg5IDMxLjc2MDIgMTguNjQwOSAzMS42NjYgMTguODc1OUMzMS41NzE3IDE5LjExMSAzMS40MzIgMTkuMzI0NSAzMS4yNTUyIDE5LjUwMzdDMzAuODkzMyAxOS44NjU4IDMwLjM4NTUgMjAuMDY1MiAyOS44MjUyIDIwLjA2NTJIMjcuMjkzNVYxNi40OTE3SDI5LjgyNTJDMzAuOTUzMiAxNi40OTE3IDMxLjgwMzkgMTcuMTk3NyAzMS44MDM5IDE4LjEzNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zOS4yODAzIDE1QzM3Ljk0NjEgMTUgMzYuNzQzIDE1LjUyNDYgMzUuODg4IDE2LjQ3NjZDMzUuMDY1NSAxNy4zOTQ1IDM0LjYxMjMgMTguNjQ1OSAzNC42MTIzIDE5Ljk5OThDMzQuNjEyMyAyMS4zNTM4IDM1LjA2NTUgMjIuNjEyIDM1Ljg4OCAyMy41Mjg1QzM2Ljc0MDEgMjQuNDc3MiAzNy45NDQ3IDI0Ljk5ODYgMzkuMjgwMyAyNC45OTg2QzQwLjYyMTUgMjQuOTk4NiA0MS44MzA2IDI0LjQ3NTggNDIuNjg0MiAyMy41Mjg1QzQzLjUwODEgMjIuNjEzIDQzLjk2MTYgMjEuMzU5OSA0My45NjE2IDE5Ljk5OThDNDMuOTYxNiAxOC42Mzk4IDQzLjUwODEgMTcuMzkzOCA0Mi42ODQ1IDE2LjQ3NjZDNDEuODI5MiAxNS41MjM1IDQwLjYyMDEgMTUgMzkuMjgwMyAxNVpNMzkuMjgwMyAyMy42NDQ2QzM4Ljg0MjQgMjMuNjQ2MyAzOC40MDkzIDIzLjU1MTcgMzguMDEwNyAyMy4zNjc0QzM3LjYxMjEgMjMuMTgzIDM3LjI1NzMgMjIuOTEzMiAzNi45NzA2IDIyLjU3NjVDMzYuMzg0MiAyMS44OTkxIDM2LjA2MSAyMC45ODM3IDM2LjA2MSAxOS45OTk4QzM2LjA2MSAxOS4wMTU5IDM2LjM4NDIgMTguMTA3NyAzNi45NzA2IDE3LjQyODJDMzcuNTY3OSAxNi43MzYyIDM4LjM4OCAxNi4zNTUgMzkuMjgwMyAxNi4zNTVDNDAuMTcyNiAxNi4zNTUgNDAuOTk2MSAxNi43MzYyIDQxLjU5NyAxNy40Mjg2QzQyLjE4NzYgMTguMTA5OCA0Mi41MTMyIDE5LjAyMiA0Mi41MTMyIDE5Ljk5OThDNDIuNTEzMiAyMC45Nzc2IDQyLjE4OCAyMS44OTc3IDQxLjU5NyAyMi41NzY1QzQxLjMwODcgMjIuOTEzMiA0MC45NTI3IDIzLjE4MjkgNDAuNTUyOSAyMy4zNjcyQzQwLjE1MzIgMjMuNTUxNSAzOS43MTkxIDIzLjY0NjEgMzkuMjgwMyAyMy42NDQ2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjc1NCAxOS43NjI1QzUyLjU4MzIgMTkuMjk2NCA1My4wNzU5IDE4LjQ3ODkgNTMuMDc1OSAxNy41NjMxQzUzLjA3NTkgMTYuMTUwMyA1MS44NDI1IDE1LjE2MzYgNTAuMDgwNSAxNS4xNjM2SDQ1LjkxMTVWMjQuODM2Nkg1MC4yODEzQzUyLjAxNzMgMjQuODM2NiA1My4yNzY4IDIzLjY2MTIgNTMuMjc2OCAyMi4wNDE5QzUzLjI3ODIgMjEuMDcwNiA1Mi42OTYgMjAuMjAzMiA1MS43NTQgMTkuNzYyNVpNNTAuMzIyNiAyMy41MDg4SDQ3LjMzMjRWMjAuNTA3Nkg1MC4xMTkyQzUxLjE0MTIgMjAuNTA3NiA1MS44Mjg0IDIxLjA2NDUgNTEuODI4NCAyMS44OTI4QzUxLjgyOTUgMjIuODc0MSA1MS4yMzc4IDIzLjUwODggNTAuMzIyNiAyMy41MDg4Wk00OS45NTg1IDE5LjIwNkg0Ny4zMzI0VjE2LjQ5MTdINTAuMTE5MkM1MS4wMzU1IDE2LjQ5MTcgNTEuNjI2MSAxNi45NzY1IDUxLjYyNjEgMTcuNzI3QzUxLjYyNzIgMTguNDYzOCA1MS4xMTEyIDE5LjIwNjcgNDkuOTU4NSAxOS4yMDY3VjE5LjIwNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik01Ni43NDYyIDE1LjE2MzZINTUuMzI0MlYyNC44MzY2SDYxLjU0NTZWMjMuNDgxNkg1Ni43NDYyVjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNjQuNTUzOCAxNS4xNjM2SDYzLjEzMThWMjQuODM2Nkg2NC41NTM4VjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzMuNDg0NCAyMi4zMjAyTDY4LjUyOTkgMTUuMTkzN0w2OC41MDg4IDE1LjE2MzZINjcuMTM0NFYyNC44MzY2SDY4LjQ3NTNWMTcuMzI1N0w3My42OTM3IDI0LjgzNjZINzQuODI1M1YxNS4xNjM2SDczLjQ4NDRWMjIuMzIwMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04MS4xNzc4IDE5LjQxOTRMODQuODk4NSAxNS4xNjM2SDgzLjE1OTRMNzguODI1OSAyMC4xMTE0VjE1LjE2MzZINzcuNDAzOVYyNC44MzY2SDc4LjgyNTlWMjIuMDI4Nkw4MC4yMDUyIDIwLjQ2ODJMODMuMjc2MSAyNC44MzY2SDg1TDgxLjE3NzggMTkuNDE5NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMi45MTM0IDIxLjU2MzlDMjIuMjc5MSAyMy4wMzE4IDIxLjQ2NTQgMjMuNjU4MyAyMC4xODY5IDIzLjY1ODNDMTkuMzEzMyAyMy42NTgzIDE4LjUxMjkgMjMuMjc4NSAxNy45MzM2IDIyLjU4OTRDMTcuMzYzIDIxLjkxMDYgMTcuMDQ4NyAyMC45OTA5IDE3LjA0ODcgMTkuOTk5OEMxNy4wNDg3IDE5LjAxNjMgMTcuMzU2IDE4LjEwMjcgMTcuOTEzNSAxNy40MjcxQzE4LjQ4NDQgMTYuNzM1OCAxOS4yNzczIDE2LjM1NSAyMC4xNDY3IDE2LjM1NUMyMS4zMjQ0IDE2LjM1NSAyMi4xODU3IDE2Ljk1MiAyMi43Nzk5IDE4LjE4MDFMMjIuODA1MyAxOC4yMzIxSDI0LjI5MjhMMjQuMjg1NyAxOC4xOTAxQzI0LjI1MDUgMTcuOTg2NSAyNC4xNzcyIDE3Ljc5NTcgMjQuMTA2MyAxNy42MDg2TDI0LjA4MzQgMTcuNTQ4M0MyMy43NzkzIDE2Ljc3ODcgMjMuMjQ3MiAxNi4xMjQ1IDIyLjU2MSAxNS42NzY2QzIxLjg3NTYgMTUuMjI3NyAyMS4wNDk2IDE1IDIwLjEwNjIgMTVDMTguODE2NCAxNSAxNy42NTI3IDE1LjUyNDYgMTYuODI4OCAxNi40Nzc2QzE2LjAzNjIgMTcuMzk0OCAxNS41OTk2IDE4LjY0NTkgMTUuNTk5NiAxOS45OTk4QzE1LjU5OTYgMjEuMzcyIDE2LjAzODcgMjIuNjI4NSAxNi44MzU5IDIzLjUzNzhDMTcuNjc0NiAyNC40OTQ0IDE4LjgyMzggMjUgMjAuMTU5NyAyNUMyMS4wOTU3IDI1IDIxLjkxODIgMjQuNzUzMyAyMi42MDQ3IDI0LjI2NzFDMjIuNzIwMSAyNC4xODU0IDIyLjgzMTEgMjQuMDk3NSAyMi45MzcxIDI0LjAwMzVDMjMuNjMzMSAyMy4zODc1IDI0LjE2MDMgMjIuNTExNiAyNC4zNDY3IDIxLjY2TDI0LjM1MTMgMjEuNjM3N0MyNC4zNTc2IDIxLjYwODMgMjQuMzYzMiAyMS41Nzg5IDI0LjM2ODIgMjEuNTQ5NUwyNC4zNzUyIDIxLjUwNzZIMjIuOTM2TDIyLjkxMzQgMjEuNTYzOVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTY2XzE1NTQzIj4KPHJlY3Qgd2lkdGg9Ijg1IiBoZWlnaHQ9IjEwIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K\");background-size:100%;content:\" \"}:host(.no-overlay)::after{display:none}:host #card-identity,:host #barcode,:host #card-payment{position:absolute;top:0;bottom:0;left:0;right:0;display:none}:host #card-identity.visible,:host #barcode.visible,:host #card-payment.visible{display:block}:host .message{display:block;opacity:0;visibility:hidden;position:absolute;transform-origin:center;transform:translate(-50%, 0);margin:0;padding:8px 12px;font-size:1em;font-weight:600;text-align:center;text-shadow:0px 1px 4px rgba(0, 0, 0, 0.1);white-space:nowrap;color:#fff;background-color:rgba(60, 60, 67, 0.7);-webkit-backdrop-filter:blur(var(--mb-blur-filter));backdrop-filter:blur(var(--mb-blur-filter));border-radius:8px;transition:all 200ms cubic-bezier(0.42, 0.01, 0.35, 1.74)}:host .message.is-active{opacity:1;visibility:visible;margin:8px 0 0 0}:host #card-identity .reticle-container{position:absolute;top:50%;left:50%;width:var(--mb-reticle-size);height:var(--mb-reticle-size);transform-origin:center;transform:translate(-50%, -50%);perspective:600px}:host #card-identity .reticle-container .message{top:100%;left:50%}:host #barcode .rectangle-container{position:absolute;top:112px;left:20px;width:calc(100% - 40px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-content:center;align-items:center;transform-origin:center;perspective:600px;-webkit-transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden}:host #card-payment .rectangle-container .box{align-self:stretch;flex:1 1 auto}:host #card-payment .rectangle-container .box.wrapper,:host #card-payment .rectangle-container .box .wrapper{background:rgba(0, 0, 0, 0.2)}:host #card-payment .rectangle-container .box.body{flex:0 1 230px;display:flex;position:relative}:host #card-payment .rectangle-container .box.body .middle-left{order:0;flex:1 1 auto}:host #card-payment .rectangle-container .box.body .middle-right{order:2;flex:1 1 auto}:host #card-payment .rectangle-container .message{top:-70px;left:50%}@media only screen and (min-width: 568px) and (orientation: landscape){:host::after{bottom:40px;left:unset;right:5%}:host .gradient-overlay{height:88px}:host #barcode .rectangle-container{top:88px;left:186px;width:calc(100% - 372px);height:calc(100% - 128px)}:host #barcode .rectangle-container .message{top:-50px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 263px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 374px !important}}@media only screen and (min-width: 768px) and (orientation: portrait){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:112px}:host #barcode .rectangle-container{top:112px;left:50px;width:calc(100% - 100px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 472px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 672px !important}}@media only screen and (min-width: 1024px) and (orientation: landscape){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:112px}:host #barcode .rectangle-container{top:112px;left:50px;width:calc(100% - 100px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 548px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 780px !important}}@media only screen and (min-width: 1280px){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:112px}:host #barcode .rectangle-container{top:112px;left:188px;width:calc(100% - 374px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 500px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 712px !important}}@media only screen and (min-width: 1440px){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:112px}:host #barcode .rectangle-container{top:112px;left:188px;width:calc(100% - 374px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 680px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 968px !important}}@media only screen and (min-width: 1920px){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:112px}:host #barcode .rectangle-container{top:112px;left:188px;width:calc(100% - 374px);height:calc(100% - 224px);perspective:600px}:host #barcode .rectangle-container .message{top:-70px;left:50%}:host #card-payment .rectangle-container .box.body{flex:0 1 860px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 1224px !important}}@media only screen and (max-height: 299px) and (orientation: landscape){:host::after{bottom:10px;left:unset;right:20px}:host .gradient-overlay{height:88px}:host #card-payment .rectangle-container .box.body{flex:0 1 180px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 260px !important}}@media only screen and (min-height: 300px) and (max-height: 499px) and (orientation: landscape){:host::after{bottom:30px;left:unset;right:20px}:host .gradient-overlay{height:88px}:host #card-payment .rectangle-container .box.body{flex:0 1 240px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 340px !important}}@media only screen and (max-width: 360px) and (orientation: portrait){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:88px}:host #card-payment .rectangle-container .box.body{flex:0 1 300px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 500px !important}}@media only screen and (min-height: 500px) and (max-height: 699px) and (orientation: landscape){:host::after{bottom:10px;left:calc(50% - 61px)}:host .gradient-overlay{height:88px}:host #card-payment .rectangle-container .box.body{flex:0 1 300px !important}:host #card-payment .rectangle-container .box.body .rectangle{flex:0 1 500px !important}}";
let MbCameraExperience = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.close = createEvent(this, "close", 7);
this.changeCameraDevice = createEvent(this, "changeCameraDevice", 7);
this.flipCameraAction = createEvent(this, "flipCameraAction", 7);
this.cameraCursorBarcodeClassName = 'rectangle';
this.cameraCursorIdentityCardClassName = 'reticle';
this.cameraCursorPaymentCardClassName = 'rectangle';
this.cameraMessageIdentityCardClassName = 'message';
this.cameraStateChangeId = 0;
this.cameraStateInProgress = false;
this.flipCameraStateInProgress = false;
/**
* Unless specifically granted by your license key, you are not allowed to
* modify or remove the Microblink logo displayed on the bottom of the camera
* overlay.
*/
this.showOverlay = true;
/**
* Camera horizontal state passed from root component.
*
* Horizontal camera image can be mirrored
*/
this.cameraFlipped = false;
/**
* Show scanning line on camera
*/
this.showScanningLine = false;
/**
* Show camera feedback message on camera for Barcode scanning
*/
this.showCameraFeedbackBarcodeMessage = false;
}
apiStateHandler(apiState, _oldValue) {
if (apiState === '' && (this.type === CameraExperience.CardSingleSide || this.type === CameraExperience.CardCombined))
this.cardIdentityElement.classList.add('visible');
else
this.cardIdentityElement.classList.remove('visible');
}
/**
* Change active camera.
*/
async setActiveCamera(cameraId) {
this.cameraToolbar.setActiveCamera(cameraId);
}
/**
* Populate list of camera devices.
*/
async populateCameraDevices() {
await this.cameraToolbar.populateCameraDevices();
}
/**
* Method is exposed outside which allow us to control Camera Flip state from parent component.
*/
async setCameraFlipState(isFlipped) {
this.cameraFlipped = isFlipped;
}
setState(state, isBackSide = false, force = false) {
return new Promise((resolve) => {
if (!force && (!state || this.cameraStateInProgress || this.flipCameraStateInProgress)) {
resolve();
return;
}
this.cameraStateInProgress = true;
let cameraStateChangeId = this.cameraStateChangeId + 1;
this.cameraStateChangeId = cameraStateChangeId;
if (state === CameraExperienceState.Flip) {
this.flipCameraStateInProgress = true;
}
const stateClass = getStateClass(state);
switch (this.type) {
case CameraExperience.CardSingleSide:
case CameraExperience.CardCombined:
this.cameraCursorIdentityCardClassName = `reticle ${stateClass}`;
break;
case CameraExperience.Barcode:
stateClass === 'is-detection' && this.showScanningLine ? this.scanningLineBarcodeClassName = 'is-active' : this.scanningLineBarcodeClassName = '';
this.cameraCursorBarcodeClassName = `rectangle ${stateClass}`;
break;
case CameraExperience.PaymentCard:
stateClass === 'is-default' && this.showScanningLine ? this.scanningLinePaymentCardClassName = 'is-active' : this.scanningLinePaymentCardClassName = '';
this.cameraCursorPaymentCardClassName = `rectangle ${stateClass}`;
break;
}
this.setMessage(state, isBackSide, this.type);
window.setTimeout(() => {
if (this.flipCameraStateInProgress && state === CameraExperienceState.Flip) {
this.flipCameraStateInProgress = false;
}
if (this.cameraStateChangeId === cameraStateChangeId) {
this.cameraStateInProgress = false;
}
resolve();
}, CameraExperienceStateDuration.get(state));
});
}
resetState() {
return new Promise((resolve) => {
// Reset flags
this.cameraStateChangeId = 0;
this.cameraStateInProgress = false;
this.flipCameraStateInProgress = false;
// Reset DOM
while (this.cameraMessageIdentityCard.firstChild) {
this.cameraMessageIdentityCard.removeChild(this.cameraMessageIdentityCard.firstChild);
}
while (this.cameraMessagePaymentCard.firstChild) {
this.cameraMessagePaymentCard.removeChild(this.cameraMessagePaymentCard.firstChild);
}
while (this.cameraMessageBarcode.firstChild) {
this.cameraMessageBarcode.removeChild(this.cameraMessageBarcode.firstChild);
}
resolve();
});
}
flipCamera() {
this.flipCameraAction.emit();
}
handleStop() {
this.close.emit();
}
setMessage(state, isBackSide, type) {
const message = this.getStateMessage(state, isBackSide, type);
switch (type) {
case CameraExperience.CardSingleSide:
case CameraExperience.CardCombined:
while (this.cameraMessageIdentityCard.firstChild) {
this.cameraMessageIdentityCard.removeChild(this.cameraMessageIdentityCard.firstChild);
}
if (message) {
this.cameraMessageIdentityCard.appendChild(message);
}
this.cameraMessageIdentityCardClassName = message && message !== null ? 'message is-active' : 'message';
break;
case CameraExperience.PaymentCard:
while (this.cameraMessagePaymentCard.firstChild) {
this.cameraMessagePaymentCard.removeChild(this.cameraMessagePaymentCard.firstChild);
}
if (message) {
this.cameraMessagePaymentCard.appendChild(message);
}
this.cameraMessagePaymentCard.setAttribute('class', message && message !== null ? 'message is-active' : 'message');
break;
case CameraExperience.Barcode:
while (this.cameraMessageBarcode.firstChild) {
this.cameraMessageBarcode.removeChild(this.cameraMessageBarcode.firstChild);
}
if (this.showCameraFeedbackBarcodeMessage) {
if (message) {
this.cameraMessageBarcode.appendChild(message);
}
this.cameraMessageBarcode.setAttribute('class', message && message !== null ? 'message is-active' : 'message');
}
break;
// Do nothing
}
}
getStateMessage(state, isBackSide = false, type) {
const getStateMessageAsHTML = (message) => {
if (message) {
const messageArray = typeof message === 'string' ? [message] : message;
const children = [];
while (messageArray.length) {
const sentence = messageArray.shift();
children.push(document.createTextNode(sentence));
if (messageArray.length) {
children.push(document.createElement('br'));
}
}
const spanElement = document.createElement('span');
while (children.length) {
spanElement.appendChild(children.shift());
}
return spanElement;
}
};
switch (state) {
case CameraExperienceState.Default:
if (type === CameraExperience.Barcode && this.showCameraFeedbackBarcodeMessage) {
return getStateMessageAsHTML(this.translationService.i('camera-feedback-barcode-message'));
}
const key = isBackSide ? 'camera-feedback-scan-back' : 'camera-feedback-scan-front';
return getStateMessageAsHTML(this.translationService.i(key));
case CameraExperienceState.MoveFarther:
return getStateMessageAsHTML(this.translationService.i('camera-feedback-move-farther'));
case CameraExperienceState.MoveCloser:
return getStateMessageAsHTML(this.translationService.i('camera-feedback-move-closer'));
case CameraExperienceState.AdjustAngle:
return getStateMessageAsHTML(this.translationService.i('camera-feedback-adjust-angle'));
case CameraExperienceState.Flip:
return getStateMessageAsHTML(this.translationService.i('camera-feedback-flip'));
case CameraExperienceState.Classification:
case CameraExperienceState.Detection:
return type === CameraExperience.Barcode ? getStateMessageAsHTML(this.translationService.i('camera-feedback-barcode-message')) : null;
case CameraExperienceState.Done:
case CameraExperienceState.DoneAll:
default:
return null;
}
}
handleChangeCameraDevice(camera) {
this.changeCameraDevice.emit(camera);
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { class: classNames({ 'no-overlay': !this.showOverlay }) }, h("div", { id: "barcode", class: classNames({ visible: this.type === CameraExperience.Barcode }) }, h("div", { class: "rectangle-container" }, h("div", { class: this.cameraCursorBarcodeClassName }, h("div", { class: "rectangle__cursor" }, h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: `scanning-line ${this.scanningLineBarcodeClassName}` }))), h("p", { class: "message", ref: el => this.cameraMessageBarcode = el }))), h("div", { id: "card-identity", ref: (el) => this.cardIdentityElement = el, class: classNames({ visible: this.type === CameraExperience.CardSingleSide || this.type === CameraExperience.CardCombined }) }, h("div", { class: "reticle-container" }, h("div", { class: this.cameraCursorIdentityCardClassName }, h("div", { class: "reticle__cursor" }, h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" }), h("div", { class: "reticle__el" })), h("img", { class: "reticle__done", src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjk3MiAzMy40NkMyMC43MDk1IDMzLjQ2MDUgMjAuNDQ5NCAzMy40MDkyIDIwLjIwNjggMzMuMzA5QzE5Ljk2NDEgMzMuMjA4OCAxOS43NDM2IDMzLjA2MTYgMTkuNTU4IDMyLjg3NkwxMS4wNzQgMjQuMzlDMTAuODgyOSAyNC4yMDU2IDEwLjczMDMgMjMuOTg1MSAxMC42MjU0IDIzLjc0MTFDMTAuNTIwNCAyMy40OTcyIDEwLjQ2NSAyMy4yMzQ4IDEwLjQ2MjUgMjIuOTY5MkMxMC40NiAyMi43MDM3IDEwLjUxMDQgMjIuNDQwMyAxMC42MTA4IDIyLjE5NDRDMTAuNzExMiAyMS45NDg2IDEwLjg1OTYgMjEuNzI1MiAxMS4wNDcyIDIxLjUzNzNDMTEuMjM0OSAyMS4zNDkzIDExLjQ1ODEgMjEuMjAwNyAxMS43MDM4IDIxLjA5OTlDMTEuOTQ5NSAyMC45OTkyIDEyLjIxMjggMjAuOTQ4NCAxMi40Nzg0IDIwLjk1MDVDMTIuNzQzOSAyMC45NTI2IDEzLjAwNjQgMjEuMDA3NiAxMy4yNTA1IDIxLjExMjNDMTMuNDk0NiAyMS4yMTY5IDEzLjcxNTQgMjEuMzY5MSAxMy45IDIxLjU2TDIwLjk3IDI4LjYzTDMzLjcgMTUuOTA0QzM0LjA3NSAxNS41Mjg3IDM0LjU4MzggMTUuMzE3OCAzNS4xMTQzIDE1LjMxNzZDMzUuNjQ0OCAxNS4zMTc0IDM2LjE1MzcgMTUuNTI4IDM2LjUyOSAxNS45MDNDMzYuOTA0MyAxNi4yNzggMzcuMTE1MiAxNi43ODY4IDM3LjExNTQgMTcuMzE3M0MzNy4xMTU2IDE3Ljg0NzggMzYuOTA1IDE4LjM1NjcgMzYuNTMgMTguNzMyTDIyLjM4NiAzMi44NzZDMjIuMjAwNCAzMy4wNjE2IDIxLjk3OTkgMzMuMjA4OCAyMS43MzcyIDMzLjMwOUMyMS40OTQ2IDMzLjQwOTIgMjEuMjM0NSAzMy40NjA1IDIwLjk3MiAzMy40NloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=" })), h("p", { class: this.cameraMessageIdentityCardClassName, ref: el => this.cameraMessageIdentityCard = el }))), h("div", { id: "card-payment", class: classNames({ visible: this.type === CameraExperience.PaymentCard }) }, h("div", { class: "rectangle-container" }, h("div", { class: "box wrapper" }), h("div", { class: "box body" }, h("div", { class: "middle-left wrapper" }), h("div", { class: this.cameraCursorPaymentCardClassName }, h("div", { class: "rectangle__cursor" }, h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: "rectangle__el" }), h("div", { class: `scanning-line ${this.scanningLinePaymentCardClassName}` }))), h("p", { class: "message", ref: el => this.cameraMessagePaymentCard = el }), h("div", { class: "middle-right wrapper" })), h("div", { class: "box wrapper" }))), h("div", { class: "gradient-overlay bottom" }), h("mb-camera-toolbar", { "show-close": this.apiState !== "error", "camera-flipped": this.cameraFlipped, onCloseEvent: () => this.handleStop(), onFlipEvent: () => this.flipCamera(), onChangeCameraDevice: (ev) => this.handleChangeCameraDevice(ev.detail), ref: el => this.cameraToolbar = el })));
}
get hostEl() { return getElement(this); }
static get watchers() { return {
"apiState": ["apiStateHandler"]
}; }
};
MbCameraExperience.style = mbCameraExperienceCss;
const mbCameraSelectionCss = ":host{box-sizing:border-box;display:block;position:relative;padding:4px 0;font-family:inherit;font-size:var(--mb-font-size)}:host .active-camera{box-sizing:border-box;display:block;width:var(--mb-toolbar-selection-width);height:calc(var(--mb-line-height) + 8px + 2px);margin:0 auto;color:var(--mb-toolbar-color);line-height:var(--mb-line-height);text-align:center;text-decoration:none;border:1px solid transparent;border-radius:var(--mb-toolbar-border-radius)}:host .active-camera .icon,:host .active-camera .name{display:inline-block;vertical-align:middle}:host .active-camera .icon{width:20px;height:20px}:host .active-camera .icon svg{width:20px;height:20px}:host .active-camera .name{max-width:calc(100% - 16px - 40px);padding:0 8px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .active-camera{padding:4px 16px;background-color:transparent}:host .active-camera:hover,:host .active-camera:active,:host .active-camera:focus{background-color:rgba(60, 60, 67, 0.3)}:host .active-camera.active,:host .active-camera:active,:host .active-camera:focus{padding:4px 16px;border-color:var(--mb-toolbar-border-color)}:host #list-background{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh}:host #list-background.visible{display:block}:host .list{display:none;position:absolute;top:calc(var(--mb-font-size) * 1.5 + 16px);left:calc(50% - var(--mb-toolbar-selection-width) / 2);width:var(--mb-toolbar-selection-width);padding:0;background-color:var(--mb-toolbar-list-background);border-radius:var(--mb-toolbar-border-radius);box-shadow:var(--mb-toolbar-list-shadow)}:host .list.visible{display:block}:host .list svg,:host .list .name,:host .list .spacer{display:inline-block;vertical-align:middle}:host .list .spacer,:host .list svg{width:24px;height:20px}:host .list .name{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}:host .list ul{margin:0;padding:8px 0;list-style:none}:host .list ul a{display:block;text-align:left;color:inherit;text-decoration:none}:host .list ul li{display:block;padding:4px 16px;line-height:var(--mb-line-height)}:host .list ul li.active{color:#48B2E8}:host .list ul li:last-child{padding-bottom:0}:host .list ul li:hover,:host .list ul li:focus{background-color:rgba(116, 116, 128, 0.08)}";
let MbCameraSelection = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.changeCameraDevice = createEvent(this, "changeCameraDevice", 7);
this.activeCamera = {
prettyName: '-',
details: null
};
this.cameraList = [];
this.isListVisible = false;
}
/**
* Change active camera.
*/
async setActiveCamera(cameraId) {
const camera = this.cameraList.find((el) => el.details.deviceId === cameraId);
if (!camera) {
return;
}
this.activeCamera = camera;
}
/**
* Populate list of camera devices.
*/
async populateCameraDevices() {
try {
const devices = await getCameraDevices();
this.cameraList = devices;
}
catch (error) {
// Camera access error is handled by the video recognizer.
this.cameraList = [];
}
}
handleListOpen(ev) {
ev.preventDefault();
ev.stopPropagation();
this.setListVisibility(!this.isListVisible);
}
handleCameraSelection(ev, camera) {
ev.preventDefault();
ev.stopPropagation();
this.changeCameraDevice.emit(camera);
this.activeCamera = camera;
this.setListVisibility(false);
}
setListVisibility(visible) {
this.isListVisible = visible;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
const cameraListElements = this.cameraList.map((camera) => {
var _a, _b;
const isActive = ((_b = (_a = this.activeCamera) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.deviceId) === camera.details.deviceId;
let content = (h("span", { class: "spacer" }));
if (isActive) {
content = (h("svg", { width: "24", height: "20", viewBox: "0 0 24 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.256 5.24408C17.5814 5.56951 17.5814 6.09715 17.256 6.42259L8.92263 14.7559C8.59719 15.0814 8.06955 15.0814 7.74412 14.7559L3.57745 10.5893C3.25201 10.2638 3.25201 9.73618 3.57745 9.41074C3.90289 9.08531 4.43053 9.08531 4.75596 9.41074L8.33337 12.9882L16.0775 5.24408C16.4029 4.91864 16.9305 4.91864 17.256 5.24408Z", fill: "#48B2E8" })));
}
return (h("li", { class: classNames({ active: isActive }) }, h("a", { href: "javascript:void(0)", onClick: (ev) => this.handleCameraSelection(ev, camera) }, content, h("span", { class: "name" }, camera.prettyName))));
});
return (h(Host, null, h("a", { href: "javascript:void(0)", class: this.isListVisible ? 'active-camera active' : 'active-camera', onClick: (ev) => this.handleListOpen(ev) }, h("span", { class: "icon" }, h("svg", { width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.82145 2.98816C7.13401 2.6756 7.55793 2.5 7.99996 2.5H13C13.442 2.5 13.8659 2.6756 14.1785 2.98816C14.491 3.30072 14.6666 3.72464 14.6666 4.16667C14.6666 4.38768 14.7544 4.59964 14.9107 4.75592C15.067 4.9122 15.2789 5 15.5 5H16.3333C16.9963 5 17.6322 5.26339 18.1011 5.73223C18.5699 6.20107 18.8333 6.83696 18.8333 7.5V15C18.8333 15.663 18.5699 16.2989 18.1011 16.7678C17.6322 17.2366 16.9963 17.5 16.3333 17.5H4.66663C4.00358 17.5 3.3677 17.2366 2.89886 16.7678C2.43002 16.2989 2.16663 15.663 2.16663 15V7.5C2.16663 6.83696 2.43002 6.20107 2.89886 5.73223C3.3677 5.26339 4.00358 5 4.66663 5H5.49996C5.72097 5 5.93293 4.9122 6.08922 4.75592C6.2455 4.59964 6.33329 4.38768 6.33329 4.16667C6.33329 3.72464 6.50889 3.30072 6.82145 2.98816ZM4.66663 6.66667C4.44561 6.66667 4.23365 6.75446 4.07737 6.91074C3.92109 7.06702 3.83329 7.27899 3.83329 7.5V15C3.83329 15.221 3.92109 15.433 4.07737 15.5893C4.23365 15.7455 4.44561 15.8333 4.66663 15.8333H16.3333C16.5543 15.8333 16.7663 15.7455 16.9225 15.5893C17.0788 15.433 17.1666 15.221 17.1666 15V7.5C17.1666 7.27899 17.0788 7.06702 16.9225 6.91074C16.7663 6.75446 16.5543 6.66667 16.3333 6.66667H15.5C14.8369 6.66667 14.201 6.40327 13.7322 5.93443C13.2634 5.46559 13 4.82971 13 4.16667L7.99996 4.16667C7.99996 4.82971 7.73657 5.46559 7.26773 5.93443C6.79889 6.40327 6.163 6.66667 5.49996 6.66667H4.66663Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.5 9.16667C9.57948 9.16667 8.83329 9.91286 8.83329 10.8333C8.83329 11.7538 9.57948 12.5 10.5 12.5C11.4204 12.5 12.1666 11.7538 12.1666 10.8333C12.1666 9.91286 11.4204 9.16667 10.5 9.16667ZM7.16663 10.8333C7.16663 8.99238 8.65901 7.5 10.5 7.5C12.3409 7.5 13.8333 8.99238 13.8333 10.8333C13.8333 12.6743 12.3409 14.1667 10.5 14.1667C8.65901 14.1667 7.16663 12.6743 7.16663 10.8333Z", fill: "white" }))), h("span", { class: "name" }, this.activeCamera.prettyName), h("span", { class: "icon" }, h("svg", { width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.9107 6.91076C5.23614 6.58533 5.76378 6.58533 6.08922 6.91076L10.5 11.3215L14.9107 6.91076C15.2361 6.58533 15.7638 6.58533 16.0892 6.91076C16.4147 7.2362 16.4147 7.76384 16.0892 8.08928L11.0892 13.0893C10.7638 13.4147 10.2361 13.4147 9.9107 13.0893L4.9107 8.08928C4.58527 7.76384 4.58527 7.2362 4.9107 6.91076Z", fill: "white" })))), h("div", { id: "list-background", class: classNames({ visible: this.isListVisible }), onClick: () => this.setListVisibility(false) }), h("div", { class: this.isListVisible ? 'list visible' : 'list' }, h("ul", null, cameraListElements))));
}
get hostEl() { return getElement(this); }
};
MbCameraSelection.style = mbCameraSelectionCss;
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function hasVideoDevices() {
return new Promise((resolve) => {
if (!window.navigator ||
!window.navigator.mediaDevices ||
typeof window.navigator.mediaDevices.enumerateDevices !== 'function') {
resolve(false);
return;
}
window.navigator.mediaDevices.enumerateDevices().then((devices) => {
devices = devices || [];
for (const device of devices) {
if (device && device.kind === 'videoinput') {
resolve(true);
return;
}
}
resolve(false);
});
});
}
function isWasmSupported() {
return new Promise((resolve) => {
const wasmSupport = isBrowserSupported();
resolve(wasmSupport);
});
}
async function checkMandatoryCapabilites() {
const wasmSupport = await isWasmSupported();
return wasmSupport;
}
/**
* Determine whether this is a desktop device based on the screen resolution.
*/
function isDesktop() {
const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
return viewportWidth >= 1024;
}
const mbCameraToolbarCss = ":host{width:100%;padding-top:16px;background-color:rgba(60, 60, 67, 0.7);-webkit-backdrop-filter:blur(var(--mb-blur-filter));backdrop-filter:blur(var(--mb-blur-filter))}:host header{display:flex;flex-wrap:wrap;padding:0 16px}:host header>*{display:block;flex-grow:1}:host .camera-selection-wrapper{width:calc(100% - 3em)}:host mb-camera-selection{display:none}:host mb-camera-selection.visible{display:block}@media only screen and (min-width: 768px){:host{padding-top:0}:host header{padding-left:32px;padding-right:32px}}@media only screen and (min-width: 1280px){:host header{max-width:1024px;margin:0 auto;padding-left:0;padding-right:0}}:host .toolbar-button{width:calc(var(--mb-font-size) * 1.5);height:calc(var(--mb-font-size) * 1.5);padding:8px 0;cursor:pointer}:host .toolbar-button svg{width:calc(var(--mb-font-size) * 1.5);height:calc(var(--mb-font-size) * 1.5);border:1px solid transparent;border-radius:var(--mb-toolbar-border-radius);filter:drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4))}:host .toolbar-button:hover svg{background-color:rgba(60, 60, 67, 0.3);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1)}:host .toolbar-button:focus svg,:host .toolbar-button:active svg{border-color:var(--mb-toolbar-border-color)}:host .flip-button{transform-style:preserve-3d;-ms-perspective:600px;-o-perspective:600px;perspective:600px;transition:800ms}:host .flip-button.flipped{transform:rotateY(180deg)}";
let MbCameraToolbar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.closeEvent = createEvent(this, "closeEvent", 7);
this.flipEvent = createEvent(this, "flipEvent", 7);
this.changeCameraDevice = createEvent(this, "changeCameraDevice", 7);
this.isDesktop = isDesktop();
/**
* Set to `true` if close button should be displayed.
*/
this.showClose = false;
/**
* Whether to show 'Camera flip' button.
*/
this.enableCameraFlip = false;
/**
* Whether the camera is flipped, this property will be flip the relevant icon.
*/
this.cameraFlipped = false;
}
connectedCallback() {
window.addEventListener('resize', this.handleResize.bind(this), false);
setWebComponentParts(this.hostEl);
}
componentDidRender() {
this.handleResize();
}
disconnectedCallback() {
window.removeEventListener('resize', this.handleResize.bind(this), false);
}
/**
* Change active camera.
*/
async setActiveCamera(cameraId) {
this.cameraSelection.setActiveCamera(cameraId);
}
/**
* Populate list of camera devices.
*/
async populateCameraDevices() {
await this.cameraSelection.populateCameraDevices();
}
handleClose(ev) {
ev.preventDefault();
ev.stopPropagation();
this.closeEvent.emit();
}
handleFlip(ev) {
ev.preventDefault();
ev.stopPropagation();
this.flipEvent.emit();
}
handleResize() {
this.isDesktop = isDesktop();
}
handleChangeCameraDevice(camera) {
this.changeCameraDevice.emit(camera);
}
render() {
let flipButton = '';
if (this.enableCameraFlip) {
flipButton = (h("a", { href: "javascript:void(0)", class: this.cameraFlipped ? 'toolbar-button flip-button flipped' : 'toolbar-button flip-button', onClick: (ev) => this.handleFlip(ev) }, h("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 5C16.5523 5 17 5.44772 17 6V24C17 24.5523 16.5523 25 16 25C15.4477 25 15 24.5523 15 24V6C15 5.44772 15.4477 5 16 5Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.7702 9.02676C20.2216 8.9202 20.687 9.13798 20.8944 9.55279L25.8944 19.5528C26.0494 19.8628 26.0329 20.2309 25.8507 20.5257C25.6684 20.8206 25.3466 21 25 21H20C19.4477 21 19 20.5523 19 20V10C19 9.53623 19.3189 9.13331 19.7702 9.02676ZM21 14.2361V19H23.382L21 14.2361Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.2298 9.02676C12.6811 9.13331 13 9.53623 13 10V20C13 20.5523 12.5523 21 12 21H7C6.65342 21 6.33156 20.8206 6.14935 20.5257C5.96714 20.2309 5.95058 19.8628 6.10557 19.5528L11.1056 9.55279C11.313 9.13798 11.7784 8.9202 12.2298 9.02676ZM8.61803 19H11V14.2361L8.61803 19Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.7702 9.02676C20.2216 8.9202 20.687 9.13798 20.8944 9.55279L25.8944 19.5528C26.0494 19.8628 26.0329 20.2309 25.8507 20.5257C25.6684 20.8206 25.3466 21 25 21H20C19.4477 21 19 20.5523 19 20V10C19 9.53623 19.3189 9.13331 19.7702 9.02676Z", fill: "white" }))));
}
let closeButton = '';
if (this.showClose) {
closeButton = (h("a", { href: "javascript:void(0)", class: "toolbar-button close-button", onClick: (ev) => this.handleClose(ev) }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z", fill: "white" }))));
}
return (h(Host, null, h("header", null, flipButton, h("section", { class: "camera-selection-wrapper" }, h("mb-camera-selection", { onChangeCameraDevice: (ev) => this.handleChangeCameraDevice(ev.detail), class: classNames({ visible: this.isDesktop }), ref: el => this.cameraSelection = el })), closeButton)));
}
get hostEl() { return getElement(this); }
};
MbCameraToolbar.style = mbCameraToolbarCss;
const mbCompletedCss = ":host{display:block;padding:0}:host img{display:block;width:24px;height:24px}";
let MbCompleted = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Value of `src` attribute for <img> element.
*/
this.icon = 'data:image/svg+xml;utf8,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.2071 6.29289C21.5976 6.68342 21.5976 7.31658 21.2071 7.70711L11.2071 17.7071C10.8166 18.0976 10.1834 18.0976 9.79289 17.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929C5.18342 10.9024 5.81658 10.9024 6.20711 11.2929L10.5 15.5858L19.7929 6.29289C20.1834 5.90237 20.8166 5.90237 21.2071 6.29289Z" fill="%2348B2E8"/></svg>';
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, null, h("img", { src: this.icon })));
}
get hostEl() { return getElement(this); }
};
MbCompleted.style = mbCompletedCss;
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function getSDKWasmType(wasmType) {
switch (wasmType) {
case 'BASIC':
return WasmType.Basic;
case 'ADVANCED':
return WasmType.Advanced;
case 'ADVANCED_WITH_THREADS':
return WasmType.AdvancedWithThreads;
default:
return null;
}
}
const mbComponentCss = ":host{box-sizing:border-box;position:relative;display:block;width:var(--mb-component-width);background:var(--mb-component-background);color:var(--mb-component-font-color);font-size:var(--mb-font-size);font-style:var(--mb-font-style);font-weight:var(--mb-font-weight);letter-spacing:var(--mb-letter-spacing);line-height:var(--mb-line-height);text-transform:var(--mb-component-text-transform);border-color:var(--mb-component-border-color);border-radius:var(--mb-component-border-radius);border-style:var(--mb-component-border-style);border-width:var(--mb-component-border-width);box-shadow:var(--mb-component-box-shadow);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media only screen and (min-width: 1440px){:host{font-size:var(--mb-font-size-desktop)}}.flex-break{flex-basis:100%;width:0}:host #mb-screen-loading.visible{display:flex;align-items:center;justify-content:center;padding:16px}:host #mb-screen-error.visible{display:flex;flex-direction:row;align-items:center;justify-content:center}:host #mb-screen-error.visible .icon-alert{display:flex;margin-right:10px}:host :host #mb-screen-error:not(.visible),:host :host #mb-screen-action:not(.visible),:host :host #mb-screen-loading:not(.visible),:host :host #mb-screen-processing:not(.visible){border:none}:host #mb-screen-action.visible{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}:host #mb-screen-action.visible .action-label{display:var(--mb-component-action-label);margin:0 16px 0 0;cursor:default;font-size:var(--mb-component-action-label-font-size)}:host #mb-screen-action.visible .action-label:dir(rtl){background-color:black}:host #mb-screen-action.visible .action-buttons{display:flex;width:var(--mb-component-action-buttons-width);justify-content:var(--mb-component-action-buttons-justify-content)}:host #mb-screen-action.visible .action-buttons mb-button:last-child{margin:var(--mb-component-action-buttons-last-margin)}:host #mb-screen-action.visible .combined-image-upload{display:none;width:100%;padding:0}:host #mb-screen-action.visible .combined-image-upload.visible{display:block;padding:8px 0}:host #mb-screen-action.visible .combined-image-upload mb-image-box,:host #mb-screen-action.visible .combined-image-upload mb-button-classic{display:block;box-sizing:border-box;float:left}:host #mb-screen-action.visible .combined-image-upload mb-image-box{width:calc(50% - 4px)}:host #mb-screen-action.visible .combined-image-upload mb-image-box:nth-of-type(1){margin-right:4px}:host #mb-screen-action.visible .combined-image-upload mb-image-box:nth-of-type(2){margin-left:4px}:host #mb-screen-action.visible .combined-image-upload mb-button-classic{width:100%;margin-top:8px}:host([dir=rtl]) #mb-screen-action.visible .action-label{margin:0 0 0 16px}:host([dir=rtl]) #mb-screen-action.visible .action-buttons mb-button:last-child{margin:0 8px 0 0}:host #mb-screen-processing p{display:none;margin:8px 0}:host #mb-screen-processing p.visible{display:flex;flex-direction:row;align-items:center;justify-content:center}:host #mb-screen-processing p.in-progress{color:var(--mb-component-font-color-secondary)}:host #mb-screen-processing p.done{color:var(--mb-component-font-color)}:host #mb-screen-processing[data-type=single] p span{margin-left:8px}:host #mb-screen-processing[data-type=combined] p span{margin-left:8px}:host #mb-overlay-drag-and-drop{display:flex;align-items:center;justify-content:center;flex-direction:column}:host #mb-overlay-drag-and-drop .drag-and-drop-icon{display:block;width:24px;height:24px}:host #mb-overlay-drag-and-drop .drag-and-drop-message{max-width:360px;margin:12px 0 0 0;text-align:center;color:var(--mb-component-font-color);font-size:var(--mb-font-size);font-style:var(--mb-font-style);font-weight:var(--mb-font-weight);letter-spacing:var(--mb-letter-spacing);line-height:var(--mb-line-height);text-transform:var(--mb-component-text-transform)}:host #mb-overlay-drag-and-drop.visible{background-color:var(--mb-overlay-draganddrop-background)}:host #mb-overlay-drag-and-drop.visible.error{background-color:var(--mb-overlay-draganddrop-background-error)}:host #mb-overlay-drag-and-drop.inline{position:absolute;flex-direction:row;border-style:var(--mb-overlay-draganddrop-border-style);border-radius:var(--mb-component-border-radius);border-width:var(--mb-component-border-width)}:host #mb-overlay-drag-and-drop.inline .drag-and-drop-message{margin:0 0 0 8px}:host #mb-overlay-drag-and-drop.inline.visible{border-color:var(--mb-overlay-draganddrop-border-color)}:host #mb-overlay-drag-and-drop.inline.visible.error{border-color:var(--mb-overlay-draganddrop-border-color-error)}:host #mb-overlay-drag-and-drop.inline.visible.error .drag-and-drop-icon{margin-left:16px}:host #mb-overlay-drag-and-drop.inline.visible.error .drag-and-drop-message{text-align:left}:host #drag-and-drop-zone{position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent}:host #mb-overlay-gallery-experience.visible{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--mb-overlay-gallery-experience-background);color:var(--mb-overlay-gallery-experience-font-color)}:host #mb-overlay-gallery-experience.visible p{margin:8px 0 0 0;font-size:var(--mb-overlay-gallery-experience-font-size);font-weight:var(--mb-overlay-gallery-experience-font-weight);line-height:var(--mb-overlay-gallery-experience-line-height)}:host #mb-overlay-camera-experience{width:100%;height:100%;min-height:100%;min-height:-webkit-fill-available;overflow:hidden;justify-content:center;align-items:center;background-color:#000;overflow-y:hidden}:host #mb-overlay-camera-experience .holder{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host #mb-overlay-camera-experience video{display:block;width:100%;height:auto}:host #mb-overlay-camera-experience mb-camera-experience{position:absolute;top:0;bottom:0;left:0;right:0}:host #mb-overlay-camera-experience mb-camera-experience.is-muted{background-color:rgba(0, 0, 0, 0.6)}:host #mb-overlay-camera-experience mb-camera-experience.is-error{background-color:black}:host #mb-overlay-camera-experience.visible{display:flex;z-index:1000}:host input[type=file]{width:0;height:0;opacity:0;clip:rect(1px, 1px, 1px, 1px)}:host button.modal-action-button{width:126px;height:32px;border-radius:0;border:0;background:#48B2E8;color:#ffffff;cursor:pointer}";
let MbComponent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.block = createEvent(this, "block", 7);
this.fatalError = createEvent(this, "fatalError", 7);
this.ready = createEvent(this, "ready", 7);
this.scanError = createEvent(this, "scanError", 7);
this.scanSuccess = createEvent(this, "scanSuccess", 7);
this.feedback = createEvent(this, "feedback", 7);
this.cameraScanStarted = createEvent(this, "cameraScanStarted", 7);
this.imageScanStarted = createEvent(this, "imageScanStarted", 7);
this.scanAborted = createEvent(this, "scanAborted", 7);
this.screens = {
action: null,
error: null,
loading: null,
processing: null
};
this.overlays = {
camera: null,
draganddrop: null,
processing: null,
modal: null
};
this.scanReset = false;
this.detectionSuccessLock = false;
this.isBackSide = false;
this.cameraChangeInProgress = false;
this.blocked = false;
this.combinedGalleryOpened = false;
this.galleryExperienceModalErrorWindowVisible = false;
this.apiProcessStatusVisible = false;
this.apiProcessStatusState = 'NONE';
/**
* See description in public component.
*/
this.allowHelloMessage = true;
/**
* See description in public component.
*/
this.engineLocation = '';
/**
* See description in public component.
*/
this.includeSuccessFrame = false;
/**
* See description in public component.
*/
this.enableDrag = true;
/**
* See description in public component.
*/
this.hideLoadingAndErrorUi = false;
/**
* See description in public component.
*/
this.rtl = false;
/**
* See description in public component.
*/
this.scanFromCamera = true;
/**
* See description in public component.
*/
this.scanFromImage = true;
/**
* See description in public component.
*/
this.galleryOverlayType = 'INLINE';
/**
* See description in public component.
*/
this.galleryDropType = 'INLINE';
/**
* See description in public component.
*/
this.showActionLabels = false;
/**
* See description in public component.
*/
this.showModalWindows = false;
/**
* See description in public component.
*/
this.showCameraFeedbackBarcodeMessage = false;
/**
* See description in public component.
*/
this.showScanningLine = false;
/**
* See description in public component.
*/
this.iconCameraDefault = 'data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.32151 2.98816C6.63407 2.6756 7.05799 2.5 7.50002 2.5H12.5C12.942 2.5 13.366 2.6756 13.6785 2.98816C13.9911 3.30072 14.1667 3.72464 14.1667 4.16667C14.1667 4.38768 14.2545 4.59964 14.4108 4.75592C14.567 4.9122 14.779 5 15 5H15.8334C16.4964 5 17.1323 5.26339 17.6011 5.73223C18.07 6.20107 18.3334 6.83696 18.3334 7.5V15C18.3334 15.663 18.07 16.2989 17.6011 16.7678C17.1323 17.2366 16.4964 17.5 15.8334 17.5H4.16669C3.50365 17.5 2.86776 17.2366 2.39892 16.7678C1.93008 16.2989 1.66669 15.663 1.66669 15V7.5C1.66669 6.83696 1.93008 6.20107 2.39892 5.73223C2.86776 5.26339 3.50365 5 4.16669 5H5.00002C5.22103 5 5.433 4.9122 5.58928 4.75592C5.74556 4.59964 5.83335 4.38768 5.83335 4.16667C5.83335 3.72464 6.00895 3.30072 6.32151 2.98816ZM4.16669 6.66667C3.94567 6.66667 3.73371 6.75446 3.57743 6.91074C3.42115 7.06702 3.33335 7.27899 3.33335 7.5V15C3.33335 15.221 3.42115 15.433 3.57743 15.5893C3.73371 15.7455 3.94567 15.8333 4.16669 15.8333H15.8334C16.0544 15.8333 16.2663 15.7455 16.4226 15.5893C16.5789 15.433 16.6667 15.221 16.6667 15V7.5C16.6667 7.27899 16.5789 7.06702 16.4226 6.91074C16.2663 6.75446 16.0544 6.66667 15.8334 6.66667H15C14.337 6.66667 13.7011 6.40327 13.2323 5.93443C12.7634 5.46559 12.5 4.82971 12.5 4.16667L7.50002 4.16667C7.50002 4.82971 7.23663 5.46559 6.76779 5.93443C6.29895 6.40327 5.66306 6.66667 5.00002 6.66667H4.16669Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 9.16667C9.07955 9.16667 8.33335 9.91286 8.33335 10.8333C8.33335 11.7538 9.07955 12.5 10 12.5C10.9205 12.5 11.6667 11.7538 11.6667 10.8333C11.6667 9.91286 10.9205 9.16667 10 9.16667ZM6.66669 10.8333C6.66669 8.99238 8.15907 7.5 10 7.5C11.841 7.5 13.3334 8.99238 13.3334 10.8333C13.3334 12.6743 11.841 14.1667 10 14.1667C8.15907 14.1667 6.66669 12.6743 6.66669 10.8333Z" fill="black"/></svg>';
/**
* See description in public component.
*/
this.iconCameraActive = 'data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.32151 2.98816C6.63407 2.6756 7.05799 2.5 7.50002 2.5H12.5C12.942 2.5 13.366 2.6756 13.6785 2.98816C13.9911 3.30072 14.1667 3.72464 14.1667 4.16667C14.1667 4.38768 14.2545 4.59964 14.4108 4.75592C14.567 4.9122 14.779 5 15 5H15.8334C16.4964 5 17.1323 5.26339 17.6011 5.73223C18.07 6.20107 18.3334 6.83696 18.3334 7.5V15C18.3334 15.663 18.07 16.2989 17.6011 16.7678C17.1323 17.2366 16.4964 17.5 15.8334 17.5H4.16669C3.50365 17.5 2.86776 17.2366 2.39892 16.7678C1.93008 16.2989 1.66669 15.663 1.66669 15V7.5C1.66669 6.83696 1.93008 6.20107 2.39892 5.73223C2.86776 5.26339 3.50365 5 4.16669 5H5.00002C5.22103 5 5.433 4.9122 5.58928 4.75592C5.74556 4.59964 5.83335 4.38768 5.83335 4.16667C5.83335 3.72464 6.00895 3.30072 6.32151 2.98816ZM4.16669 6.66667C3.94567 6.66667 3.73371 6.75446 3.57743 6.91074C3.42115 7.06702 3.33335 7.27899 3.33335 7.5V15C3.33335 15.221 3.42115 15.433 3.57743 15.5893C3.73371 15.7455 3.94567 15.8333 4.16669 15.8333H15.8334C16.0544 15.8333 16.2663 15.7455 16.4226 15.5893C16.5789 15.433 16.6667 15.221 16.6667 15V7.5C16.6667 7.27899 16.5789 7.06702 16.4226 6.91074C16.2663 6.75446 16.0544 6.66667 15.8334 6.66667H15C14.337 6.66667 13.7011 6.40327 13.2323 5.93443C12.7634 5.46559 12.5 4.82971 12.5 4.16667L7.50002 4.16667C7.50002 4.82971 7.23663 5.46559 6.76779 5.93443C6.29895 6.40327 5.66306 6.66667 5.00002 6.66667H4.16669Z" fill="%2348B2E8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 9.16667C9.07955 9.16667 8.33335 9.91286 8.33335 10.8333C8.33335 11.7538 9.07955 12.5 10 12.5C10.9205 12.5 11.6667 11.7538 11.6667 10.8333C11.6667 9.91286 10.9205 9.16667 10 9.16667ZM6.66669 10.8333C6.66669 8.99238 8.15907 7.5 10 7.5C11.841 7.5 13.3334 8.99238 13.3334 10.8333C13.3334 12.6743 11.841 14.1667 10 14.1667C8.15907 14.1667 6.66669 12.6743 6.66669 10.8333Z" fill="%2348B2E8"/></svg>';
/**
* See description in public component.
*/
this.iconGalleryDefault = 'data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6667 6.66666C11.6667 6.20642 12.0398 5.83333 12.5 5.83333H12.5084C12.9686 5.83333 13.3417 6.20642 13.3417 6.66666C13.3417 7.1269 12.9686 7.5 12.5084 7.5H12.5C12.0398 7.5 11.6667 7.1269 11.6667 6.66666Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.83333 4.16667C4.91286 4.16667 4.16667 4.91286 4.16667 5.83333V14.1667C4.16667 15.0871 4.91286 15.8333 5.83333 15.8333H14.1667C15.0871 15.8333 15.8333 15.0871 15.8333 14.1667V5.83333C15.8333 4.91286 15.0871 4.16667 14.1667 4.16667H5.83333ZM2.5 5.83333C2.5 3.99238 3.99238 2.5 5.83333 2.5H14.1667C16.0076 2.5 17.5 3.99238 17.5 5.83333V14.1667C17.5 16.0076 16.0076 17.5 14.1667 17.5H5.83333C3.99238 17.5 2.5 16.0076 2.5 14.1667V5.83333Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.24972 9.76212L3.92259 13.0892C3.59715 13.4147 3.06951 13.4147 2.74408 13.0892C2.41864 12.7638 2.41864 12.2362 2.74408 11.9107L6.07741 8.57741L6.08885 8.56618C6.59083 8.08315 7.22016 7.7751 7.91667 7.7751C8.61317 7.7751 9.2425 8.08315 9.74448 8.56618L9.75592 8.57741L13.9226 12.7441C14.248 13.0695 14.248 13.5971 13.9226 13.9226C13.5972 14.248 13.0695 14.248 12.7441 13.9226L8.58361 9.76212C8.32758 9.51773 8.09662 9.44177 7.91667 9.44177C7.73672 9.44177 7.50575 9.51773 7.24972 9.76212Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.083 11.4288L12.2559 12.2559C11.9305 12.5814 11.4028 12.5814 11.0774 12.2559C10.752 11.9305 10.752 11.4028 11.0774 11.0774L11.9107 10.2441L11.9222 10.2329C12.4241 9.74982 13.0535 9.44177 13.75 9.44177C14.4465 9.44177 15.0758 9.74982 15.5778 10.2329L15.5892 10.2441L17.2559 11.9107C17.5813 12.2362 17.5813 12.7638 17.2559 13.0893C16.9305 13.4147 16.4028 13.4147 16.0774 13.0893L14.4169 11.4288C14.1609 11.1844 13.9299 11.1084 13.75 11.1084C13.57 11.1084 13.3391 11.1844 13.083 11.4288Z" fill="black"/></svg>';
/**
* See description in public component.
*/
this.iconGalleryActive = 'data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6667 6.66667C11.6667 6.20643 12.0398 5.83334 12.5 5.83334H12.5084C12.9686 5.83334 13.3417 6.20643 13.3417 6.66667C13.3417 7.12691 12.9686 7.5 12.5084 7.5H12.5C12.0398 7.5 11.6667 7.12691 11.6667 6.66667Z" fill="%2348B2E8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.83333 4.16667C4.91286 4.16667 4.16667 4.91286 4.16667 5.83333V14.1667C4.16667 15.0871 4.91286 15.8333 5.83333 15.8333H14.1667C15.0871 15.8333 15.8333 15.0871 15.8333 14.1667V5.83333C15.8333 4.91286 15.0871 4.16667 14.1667 4.16667H5.83333ZM2.5 5.83333C2.5 3.99238 3.99238 2.5 5.83333 2.5H14.1667C16.0076 2.5 17.5 3.99238 17.5 5.83333V14.1667C17.5 16.0076 16.0076 17.5 14.1667 17.5H5.83333C3.99238 17.5 2.5 16.0076 2.5 14.1667V5.83333Z" fill="%2348B2E8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.24972 9.76213L3.92259 13.0893C3.59715 13.4147 3.06951 13.4147 2.74408 13.0893C2.41864 12.7638 2.41864 12.2362 2.74408 11.9107L6.07741 8.57741L6.08885 8.56619C6.59083 8.08316 7.22016 7.77511 7.91667 7.77511C8.61317 7.77511 9.2425 8.08316 9.74448 8.56619L9.75592 8.57741L13.9226 12.7441C14.248 13.0695 14.248 13.5972 13.9226 13.9226C13.5972 14.248 13.0695 14.248 12.7441 13.9226L8.58361 9.76213C8.32758 9.51774 8.09662 9.44177 7.91667 9.44177C7.73672 9.44177 7.50575 9.51774 7.24972 9.76213Z" fill="%2348B2E8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.083 11.4288L12.2559 12.2559C11.9305 12.5814 11.4028 12.5814 11.0774 12.2559C10.752 11.9305 10.752 11.4028 11.0774 11.0774L11.9107 10.2441L11.9222 10.2329C12.4241 9.74982 13.0535 9.44177 13.75 9.44177C14.4465 9.44177 15.0758 9.74982 15.5778 10.2329L15.5892 10.2441L17.2559 11.9107C17.5813 12.2362 17.5813 12.7638 17.2559 13.0893C16.9305 13.4147 16.4028 13.4147 16.0774 13.0893L14.4169 11.4288C14.1609 11.1844 13.9299 11.1084 13.75 11.1084C13.57 11.1084 13.3391 11.1844 13.083 11.4288Z" fill="%2348B2E8"/></svg>';
/**
* See description in public component.
*/
this.iconInvalidFormat = 'data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 9.29289C9.68342 8.90237 10.3166 8.90237 10.7071 9.29289L12 10.5858L13.2929 9.29289C13.6834 8.90237 14.3166 8.90237 14.7071 9.29289C15.0976 9.68342 15.0976 10.3166 14.7071 10.7071L13.4142 12L14.7071 13.2929C15.0976 13.6834 15.0976 14.3166 14.7071 14.7071C14.3166 15.0976 13.6834 15.0976 13.2929 14.7071L12 13.4142L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L10.5858 12L9.29289 10.7071C8.90237 10.3166 8.90237 9.68342 9.29289 9.29289Z" fill="black"/></svg>';
/**
* Camera device ID passed from root component.
*/
this.cameraId = null;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
this.hostEl.addEventListener('keyup', (ev) => {
if (ev.key === 'Escape' || ev.code === 'Escape') {
this.abortScan();
}
});
}
componentDidRender() {
this.init();
const parts = getWebComponentParts(this.hostEl.shadowRoot);
this.hostEl.setAttribute('exportparts', parts.join(', '));
}
disconnectedCallback() {
var _a;
(_a = this.sdkService) === null || _a === void 0 ? void 0 : _a.stopRecognition();
}
/**
* Starts camera scan using camera overlay with usage instructions.
*/
async startCameraScan() {
this.startScanFromCamera();
}
/**
* Starts image scan, emits results from provided file.
*
* @param file File to scan
*/
async startImageScan(file) {
this.startScanFromImage(file);
}
/**
* Method is exposed outside which allow us to control UI state from parent component.
*
* In case of state `ERROR` and if `showModalWindows` is set to `true`, modal window
* with error message will be displayed.
*/
async setUiState(state) {
window.setTimeout(() => {
if (this.overlays.camera.visible) {
if (state === 'ERROR' && !this.showModalWindows) {
this.apiProcessStatusState = 'NONE';
this.apiProcessStatusVisible = false;
this.stopRecognition();
return;
}
this.apiProcessStatusState = state;
this.apiProcessStatusVisible = true;
if (state !== 'ERROR') {
this.cameraExperience.classList.add('is-muted');
}
else {
this.cameraExperience.classList.add('is-error');
}
this.cameraExperience.apiState = state;
}
else if (this.overlays.processing.visible) {
if (state === 'ERROR') {
if (this.showModalWindows) {
this.galleryExperienceModalErrorWindowVisible = true;
}
else {
this.galleryExperienceModalErrorWindowVisible = false;
this.stopRecognition();
}
}
}
if (state === 'SUCCESS') {
window.setTimeout(() => this.stopRecognition(), 400);
}
}, 400);
}
async closeApiProcessStatus(restart = false) {
window.setTimeout(() => {
this.apiProcessStatusVisible = false;
this.apiProcessStatusState = 'NONE';
this.cameraExperience.classList.remove('is-muted');
this.cameraExperience.classList.remove('is-error');
}, 600);
if (restart) {
await this.checkInputProperties()
.then(() => this.sdkService.resumeRecognition())
.then(() => {
window.setTimeout(() => this.cameraExperience.apiState = '', 400);
this.isBackSide = false;
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide, true);
});
}
}
async init() {
if (!this.hideLoadingAndErrorUi) {
this.showScreen('loading');
this.showOverlay('');
}
if (this.blocked) {
return;
}
const internetIsAvailable = navigator.onLine;
if (!internetIsAvailable) {
this.setFatalError(new SDKError({
code: ErrorCodes.InternetNotAvailable,
message: this.translationService.i('check-internet-connection').toString()
}));
return;
}
const hasMandatoryProperties = await this.checkInputProperties();
if (!hasMandatoryProperties) {
return;
}
const hasMandatoryCapabilities = await checkMandatoryCapabilites();
if (!hasMandatoryCapabilities) {
this.setFatalError(new SDKError(componentErrors.browserNotSupported));
return;
}
this.blocked = true;
this.block.emit(true);
const initEvent = await this.sdkService.initialize(this.licenseKey, {
allowHelloMessage: this.allowHelloMessage,
engineLocation: this.engineLocation,
wasmType: getSDKWasmType(this.wasmType)
});
this.cameraExperience.showOverlay = this.sdkService.showOverlay;
if (initEvent instanceof SDKError) {
this.setFatalError(initEvent);
return;
}
if (this.showActionLabels) {
this.scanFromCameraButton.label = this.translationService.i('action-message-camera').toString();
this.scanFromImageButton.label = this.translationService.i('action-message-image').toString();
}
if (this.scanFromCamera) {
this.scanFromCameraButton.visible = true;
const hasVideoDevices$1 = await hasVideoDevices();
this.scanFromCameraButton.disabled = !hasVideoDevices$1;
if (!hasVideoDevices$1) {
this.feedback.emit({
code: FeedbackCode.CameraDisabled,
state: 'FEEDBACK_INFO',
message: this.translationService.i('camera-disabled').toString()
});
if (this.showActionLabels) {
this.scanFromCameraButton.label = this.translationService.i('action-message-camera-disabled').toString();
}
}
}
if (this.scanFromImage) {
this.scanFromImageButton.visible = true;
const imageScanIsAvailable = this.sdkService.isScanFromImageAvailable(this.recognizers, this.recognizerOptions);
this.scanFromImageButton.disabled = !imageScanIsAvailable;
if (imageScanIsAvailable) {
this.imageRecognitionType = this.sdkService.getScanFromImageType(this.recognizers, this.recognizerOptions);
if (this.imageRecognitionType === ImageRecognitionType.Single) {
this.screens.processing.setAttribute('data-type', 'single');
}
if (this.imageRecognitionType === ImageRecognitionType.Combined) {
this.screens.processing.setAttribute('data-type', 'combined');
}
}
else {
if (this.showActionLabels) {
this.scanFromImageButton.label = this.translationService.i('action-message-image-not-supported').toString();
}
}
}
this.ready.emit(initEvent);
this.blocked = false;
this.block.emit(false);
this.showScreen('action');
if (this.enableDrag) {
this.setDragAndDrop();
}
}
async flipCameraAction() {
await this.sdkService.flipCamera();
const cameraFlipped = await this.sdkService.isCameraFlipped();
this.cameraExperience.setCameraFlipState(cameraFlipped);
}
async changeCameraDevice(camera) {
if (this.cameraChangeInProgress) {
return;
}
this.cameraChangeInProgress = true;
await this.sdkService.changeCameraDevice(camera.details);
this.cameraChangeInProgress = false;
}
async checkInputProperties() {
if (!this.licenseKey) {
this.setFatalError(new SDKError(sdkErrors.licenseKeyMissing));
return false;
}
// Recognizers
const conclusion = this.sdkService.checkRecognizers(this.recognizers);
if (!conclusion.status) {
const fatalError = new SDKError({
code: ErrorCodes.InvalidRecognizers,
message: conclusion.message
});
this.setFatalError(fatalError);
return false;
}
this.cameraExperience.type = this.sdkService.getDesiredCameraExperience(this.recognizers, this.recognizerOptions);
return true;
}
async startScanFromCamera() {
const configuration = {
recognizers: this.recognizers,
successFrame: this.includeSuccessFrame,
cameraFeed: this.videoElement,
cameraId: this.cameraId
};
if (this.recognizerOptions && Object.keys(this.recognizerOptions).length > 0) {
configuration.recognizerOptions = this.recognizerOptions;
}
if (this.recognitionTimeout && typeof this.recognitionTimeout === 'number') {
configuration.recognitionTimeout = this.recognitionTimeout;
}
this.isBackSide = false;
const eventHandler = (recognitionEvent) => {
var _a;
switch (recognitionEvent.status) {
case RecognitionStatus.Preparing:
this.feedback.emit({
code: FeedbackCode.ScanStarted,
state: 'FEEDBACK_OK',
message: ''
});
this.showOverlay('camera');
this.cameraExperience.setState(CameraExperienceState.Default);
break;
case RecognitionStatus.Ready:
this.cameraExperience.setActiveCamera(this.sdkService.videoRecognizer.deviceId);
break;
case RecognitionStatus.Processing:
// Just keep working
break;
case RecognitionStatus.EmptyResultState:
if (!recognitionEvent.data.initiatedByUser) {
this.scanError.emit({
code: Code.EmptyResult,
fatal: false,
message: 'Could not extract information from video feed!',
recognizerName: recognitionEvent.data.recognizerName
});
this.feedback.emit({
code: FeedbackCode.ScanUnsuccessful,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('feedback-scan-unsuccessful').toString()
});
}
this.showOverlay('');
break;
case RecognitionStatus.UnknownError:
// Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome
break;
case RecognitionStatus.DetectionFailed:
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
this.detectionSuccessLock = false;
break;
case RecognitionStatus.DetectionStatusChange:
// Use this event if information about card location is required
break;
case RecognitionStatus.DetectionStatusFail:
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
break;
case RecognitionStatus.DetectionStatusSuccess:
this.detectionSuccessLock = true;
window.setTimeout(() => {
if (this.detectionSuccessLock) {
this.cameraExperience.setState(CameraExperienceState.Detection);
this.scanReset = false;
}
}, 100);
break;
case RecognitionStatus.DetectionStatusCameraTooHigh:
this.cameraExperience.setState(CameraExperienceState.MoveCloser)
.then(() => {
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
});
break;
case RecognitionStatus.DetectionStatusCameraAtAngle:
this.cameraExperience.setState(CameraExperienceState.AdjustAngle)
.then(() => {
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
});
break;
case RecognitionStatus.DetectionStatusCameraTooNear:
case RecognitionStatus.DetectionStatusDocumentTooCloseToEdge:
case RecognitionStatus.DetectionStatusPartial:
this.cameraExperience.setState(CameraExperienceState.MoveFarther)
.then(() => {
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
});
break;
case RecognitionStatus.DocumentClassified:
this.cameraExperience.setState(CameraExperienceState.Classification);
break;
case RecognitionStatus.OnFirstSideResult:
this.cameraExperience.setState(CameraExperienceState.Done, false, true)
.then(() => {
this.cameraExperience.setState(CameraExperienceState.Flip, this.isBackSide, true)
.then(() => {
if (!this.scanReset) {
this.isBackSide = true;
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
}
});
});
break;
case RecognitionStatus.ScanSuccessful:
/* Which recognizer is it? ImageCapture or some other?
*
* ImageCapture has the 'imageCapture' flag set to true, we do not want to close camera overlay after image
* acquisition process is finished. Cause maybe backend service will failed and we can press retry to resume
* with the same video recognizer and try again
*/
if (!recognitionEvent.data.imageCapture) {
this.cameraExperience.setState(CameraExperienceState.DoneAll, false, true)
.then(() => {
var _a;
this.cameraExperience.resetState();
this.cameraExperience.classList.add('hide');
this.showOverlay('');
this.scanSuccess.emit((_a = recognitionEvent.data) === null || _a === void 0 ? void 0 : _a.result);
this.feedback.emit({
code: FeedbackCode.ScanSuccessful,
state: 'FEEDBACK_OK',
message: ''
});
});
}
else {
const resultIsValid = recognitionEvent.data.result.recognizer.processingStatus === 0 && recognitionEvent.data.result.recognizer.state === 2;
if (resultIsValid) {
this.scanSuccess.emit((_a = recognitionEvent.data) === null || _a === void 0 ? void 0 : _a.result);
this.feedback.emit({
code: FeedbackCode.ScanSuccessful,
state: 'FEEDBACK_OK',
message: ''
});
}
else if (!recognitionEvent.data.initiatedByUser) {
this.scanError.emit({
code: Code.EmptyResult,
fatal: true,
message: 'Could not extract information from video feed!',
recognizerName: recognitionEvent.data.recognizerName
});
}
}
break;
case RecognitionStatus.CameraNotAllowed:
this.scanError.emit({
code: Code.CameraNotAllowed,
fatal: true,
message: 'Cannot access camera!',
recognizerName: ''
});
this.feedback.emit({
code: FeedbackCode.CameraNotAllowed,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('camera-not-allowed').toString()
});
window.setTimeout(() => {
this.scanFromCameraButton.disabled = true;
if (this.showActionLabels) {
this.scanFromCameraButton.label = this.translationService.i('action-message-camera-not-allowed').toString();
}
}, 10);
this.showOverlay('');
break;
case RecognitionStatus.CameraInUse:
this.scanError.emit({
code: Code.CameraInUse,
fatal: true,
message: 'Camera already in use!',
recognizerName: ''
});
this.feedback.emit({
code: FeedbackCode.CameraInUse,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('camera-in-use').toString()
});
window.setTimeout(() => {
this.scanFromCameraButton.disabled = true;
if (this.showActionLabels) {
this.scanFromCameraButton.label = this.translationService.i('action-message-camera-in-use').toString();
}
}, 10);
this.showOverlay('');
break;
case RecognitionStatus.NoSupportForMediaDevices:
case RecognitionStatus.CameraNotFound:
case RecognitionStatus.UnableToAccessCamera:
this.scanError.emit({
code: Code.CameraGenericError,
fatal: true,
message: `There was a problem while accessing camera ${recognitionEvent.status}`,
recognizerName: ''
});
this.feedback.emit({
code: FeedbackCode.CameraGenericError,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('camera-generic-error').toString()
});
window.setTimeout(() => {
this.scanFromCameraButton.disabled = true;
if (this.showActionLabels) {
this.scanFromCameraButton.label = this.translationService.i('action-message-camera-disabled').toString();
}
}, 10);
this.showOverlay('');
break;
// console.warn('Unhandled video recognition status:', recognitionEvent.status);
}
};
try {
this.cameraExperience.classList.remove('hide');
this.cameraScanStarted.emit();
void this.cameraExperience.populateCameraDevices();
await this.sdkService.scanFromCamera(configuration, eventHandler);
const cameraFlipped = this.sdkService.isCameraFlipped();
this.cameraExperience.setCameraFlipState(cameraFlipped);
}
catch (error) {
this.handleScanError(error);
this.showOverlay('');
}
}
async startScanFromImage(file) {
const configuration = {
recognizers: this.recognizers,
file: file || this.scanFromImageInput.files[0]
};
if (this.recognizerOptions && Object.keys(this.recognizerOptions).length > 0) {
configuration.recognizerOptions = this.recognizerOptions;
}
const eventHandler = (recognitionEvent) => {
switch (recognitionEvent.status) {
case RecognitionStatus.Preparing:
this.feedback.emit({
code: FeedbackCode.ScanStarted,
state: 'FEEDBACK_OK',
message: ''
});
this.showScanFromImageUi();
break;
case RecognitionStatus.Processing:
// Just keep working
break;
case RecognitionStatus.NoImageFileFound:
this.scanError.emit({
code: Code.NoImageFileFound,
fatal: true,
message: 'No image file was provided to SDK service!',
recognizerName: ''
});
this.feedback.emit({
code: FeedbackCode.ScanUnsuccessful,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('feedback-scan-unsuccessful').toString()
});
this.hideScanFromImageUi(false);
this.clearInputImages();
break;
case RecognitionStatus.DetectionFailed:
// Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome
this.clearInputImages();
break;
case RecognitionStatus.EmptyResultState:
this.scanError.emit({
code: Code.EmptyResult,
fatal: false,
message: 'Could not extract information from image!',
recognizerName: recognitionEvent.data.recognizerName
});
this.feedback.emit({
code: FeedbackCode.ScanUnsuccessful,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('feedback-scan-unsuccessful').toString()
});
this.hideScanFromImageUi(false);
this.clearInputImages();
break;
case RecognitionStatus.UnknownError:
// Do nothing, RecognitionStatus.EmptyResultState will handle negative outcome
this.clearInputImages();
break;
case RecognitionStatus.ScanSuccessful:
this.scanSuccess.emit(recognitionEvent.data);
this.feedback.emit({
code: FeedbackCode.ScanSuccessful,
state: 'FEEDBACK_OK',
message: ''
});
this.clearInputImages();
if (!recognitionEvent.data.imageCapture) {
this.hideScanFromImageUi(true);
}
break;
//console.warn('Unhandled image recognition status:', recognitionEvent.status);
}
};
try {
this.imageScanStarted.emit();
await this.sdkService.scanFromImage(configuration, eventHandler);
}
catch (error) {
this.handleScanError(error);
this.hideScanFromImageUi(false);
}
}
handleScanError(error) {
const isAvailable = navigator.onLine;
if (!isAvailable) {
const fatalError = new SDKError({
code: ErrorCodes.InternetNotAvailable,
message: this.translationService.i('check-internet-connection').toString()
});
this.setFatalError(fatalError);
this.showLicenseInfoModal(this.translationService.i('check-internet-connection').toString());
return;
}
if ((error === null || error === void 0 ? void 0 : error.code) === ErrorCodes$1.LICENSE_UNLOCK_ERROR) {
this.setFatalError(new SDKError(componentErrors.licenseError, error));
this.showLicenseInfoModal(error);
}
else {
this.scanError.emit({
code: Code.GenericScanError,
fatal: true,
message: 'There was a problem during scan action.',
recognizerName: '',
details: error
});
this.feedback.emit({
code: FeedbackCode.GenericScanError,
state: 'FEEDBACK_ERROR',
message: this.translationService.i('feedback-error-generic').toString()
});
this.showOverlay('');
}
}
showLicenseInfoModal(error) {
if (typeof error === 'string') {
this.licenseExperienceModal.content = error;
}
else {
if (error.type === 'NETWORK_ERROR') {
this.licenseExperienceModal.content = this.translationService.i('network-error').toString();
}
else {
this.licenseExperienceModal.content = this.translationService.i('scanning-not-available').toString();
}
}
this.showOverlay('modal');
}
showScreen(screenName) {
for (const screenKey in this.screens) {
if (this.screens[screenKey]) {
this.screens[screenKey].visible = screenName === screenKey;
}
}
}
showOverlay(overlayName) {
if (overlayName === 'camera') {
this.initialBodyOverflowValue = document.body.style.overflow;
document.body.style.overflow = 'hidden';
}
else {
document.body.style.overflow = this.initialBodyOverflowValue;
}
for (const overlayKey in this.overlays) {
if (this.overlays[overlayKey]) {
this.overlays[overlayKey].visible = overlayName === overlayKey;
}
}
}
setDragAndDrop() {
const dropTarget = this.galleryDropType === 'FULLSCREEN' ? window : this.hostEl;
const lockTimeout = 3000;
let lockDragAndDrop = false;
if (this.galleryDropType === 'INLINE') {
this.overlays.draganddrop.classList.add('inline');
}
const closeOverlay = () => {
if (lockDragAndDrop) {
window.setTimeout(() => {
this.showOverlay('');
window.setTimeout(() => {
this.showScreen('action');
this.hostEl.style.borderStyle = 'solid';
}, 500);
}, lockTimeout);
}
else {
this.showOverlay('');
window.setTimeout(() => {
this.showScreen('action');
this.hostEl.style.borderStyle = 'solid';
}, 500);
}
};
dropTarget.addEventListener('dragenter', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (!this.scanFromImageButton.visible) {
return;
}
this.hostEl.style.borderStyle = 'none';
});
dropTarget.addEventListener('dragover', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (!this.scanFromImageButton.visible) {
return;
}
this.hostEl.style.borderStyle = 'none';
this.overlays.draganddrop.classList.remove('error');
this.overlays.draganddrop.querySelector('p').innerText = this.translationService.i('drop-info').toString();
this.showOverlay('draganddrop');
});
this.dragAndDropZone.addEventListener('dragleave', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (!this.scanFromImageButton.visible) {
return;
}
closeOverlay();
});
this.dragAndDropZone.addEventListener('drop', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (!this.scanFromImageButton.visible) {
return;
}
if (hasSupportedImageFiles(ev.dataTransfer.files)) {
this.startScanFromImage(ev.dataTransfer.files[0]);
}
else {
this.overlays.draganddrop.classList.add('error');
this.overlays.draganddrop.querySelector('p').innerText = this.translationService.i('drop-error').toString();
lockDragAndDrop = true;
window.setTimeout(() => lockDragAndDrop = false, lockTimeout);
}
closeOverlay();
});
}
setFatalError(error) {
var _a, _b;
this.fatalError.emit(error);
if (this.hideLoadingAndErrorUi) {
return;
}
if (error.details) {
switch ((_a = error.details) === null || _a === void 0 ? void 0 : _a.code) {
case ErrorCodes$1.LICENSE_UNLOCK_ERROR:
const licenseErrorType = (_b = error.details) === null || _b === void 0 ? void 0 : _b.type;
switch (licenseErrorType) {
case LicenseErrorType.NetworkError:
this.errorMessage.innerText = this.translationService.i('network-error').toString();
break;
default:
this.errorMessage.innerText = this.translationService.i('scanning-not-available').toString();
}
break;
// Do nothing
}
}
else {
this.errorMessage.innerText = error.message;
}
this.showScreen('error');
this.showOverlay('');
}
abortScan() {
this.scanAborted.emit();
this.stopRecognition();
}
stopRecognition() {
this.cameraExperience.classList.add('hide');
this.sdkService.stopRecognition();
this.scanReset = true;
window.setTimeout(() => {
this.cameraExperience.setState(CameraExperienceState.Default, false, true);
this.cameraExperience.apiState = '';
}, 500);
this.showOverlay('');
this.closeApiProcessStatus();
}
closeGalleryExperienceModal() {
this.galleryExperienceModalErrorWindowVisible = false;
this.stopRecognition();
}
onFromImageClicked() {
if (this.imageRecognitionType === ImageRecognitionType.Single) {
this.scanFromImageInput.click();
}
if (this.imageRecognitionType === ImageRecognitionType.Combined) {
if (this.combinedGalleryOpened) {
this.closeCombinedGalleryUpload();
}
else {
this.openCombinedGalleryUpload();
}
}
}
clearInputImages() {
if (this.imageRecognitionType === ImageRecognitionType.Single) {
this.scanFromImageInput.value = '';
}
if (this.imageRecognitionType === ImageRecognitionType.Combined) {
this.imageBoxFirst.clear();
this.imageBoxSecond.clear();
}
}
openCombinedGalleryUpload() {
const dialog = this.screens.action.querySelector('.combined-image-upload');
dialog.classList.add('visible');
this.scanFromImageButton.selected = true;
this.combinedGalleryOpened = true;
}
closeCombinedGalleryUpload() {
const dialog = this.screens.action.querySelector('.combined-image-upload');
dialog.classList.remove('visible');
this.scanFromImageButton.selected = false;
this.combinedGalleryOpened = false;
}
showScanFromImageUi() {
if (this.galleryOverlayType === 'INLINE') {
const inProgress = this.screens.processing.querySelector('p.in-progress');
const done = this.screens.processing.querySelector('p.done');
inProgress.classList.add('visible');
done.classList.remove('visible');
this.showScreen('processing');
}
if (this.galleryOverlayType === 'FULLSCREEN') {
this.showOverlay('processing');
}
}
hideScanFromImageUi(success) {
if (this.galleryOverlayType === 'INLINE') {
let timeout = 0;
const inProgress = this.screens.processing.querySelector('p.in-progress');
const done = this.screens.processing.querySelector('p.done');
inProgress.classList.remove('visible');
if (success) {
done.classList.add('visible');
timeout = 1000;
}
window.setTimeout(() => this.showScreen('action'), timeout);
}
if (this.galleryOverlayType === 'FULLSCREEN') {
this.showOverlay('');
}
}
render() {
return (h(Host, null, h("mb-screen", { id: "mb-screen-loading", visible: !this.hideLoadingAndErrorUi, ref: el => this.screens.loading = el }, h("mb-spinner", { icon: this.iconSpinnerScreenLoading })), h("mb-screen", { id: "mb-screen-error", visible: false, ref: el => this.screens.error = el }, h("div", { class: "icon-alert" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z", fill: "black" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z", fill: "black" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 16C11 15.4477 11.4477 15 12 15H12.01C12.5623 15 13.01 15.4477 13.01 16C13.01 16.5523 12.5623 17 12.01 17H12C11.4477 17 11 16.5523 11 16Z", fill: "black" }))), h("p", { ref: el => this.errorMessage = el })), h("mb-screen", { id: "mb-screen-action", visible: false, ref: el => this.screens.action = el }, h("p", { class: "action-label" }, this.translationService.i('action-message').toString()), h("div", { class: "action-buttons" }, h("mb-button", { ref: el => this.scanFromCameraButton = el, preventDefault: true, visible: true, disabled: false, icon: true, onButtonClick: () => this.startScanFromCamera(), imageSrcDefault: this.iconCameraDefault, imageSrcActive: this.iconCameraActive, imageAlt: "action-alt-camera", translationService: this.translationService }), h("input", { id: "scan-from-image-input", ref: el => this.scanFromImageInput = el, type: "file", accept: "image/*", onChange: () => this.scanFromImageInput.value && this.startScanFromImage() }), h("mb-button", { ref: el => this.scanFromImageButton = el, disabled: false, preventDefault: false, visible: false, selected: false, icon: true, onButtonClick: () => this.onFromImageClicked(), imageSrcDefault: this.iconGalleryDefault, imageSrcActive: this.iconGalleryActive, imageAlt: "action-alt-gallery", translationService: this.translationService })), h("div", { class: "flex-break" })), h("mb-screen", { id: "mb-screen-processing", visible: false, ref: el => this.screens.processing = el }, h("p", { class: "in-progress" }, h("mb-spinner", { icon: this.iconSpinnerScreenLoading }), h("span", null, this.translationService.i('process-image-message-inline').toString())), h("p", { class: "done" }, h("mb-completed", { icon: this.iconGalleryScanningCompleted }), h("span", null, this.translationService.i('process-image-message-inline-done').toString()))), h("mb-overlay", { id: "mb-overlay-drag-and-drop", visible: false, ref: el => this.overlays.draganddrop = el }, h("img", { class: "drag-and-drop-icon", src: this.iconGalleryDefault }), h("p", { class: "drag-and-drop-message" }, "Whoops, we don't support that image format. Please upload a JPEG or PNG file."), h("div", { id: "drag-and-drop-zone", ref: el => this.dragAndDropZone = el })), h("mb-overlay", { id: "mb-overlay-gallery-experience", ref: el => this.overlays.processing = el }, h("mb-spinner", { icon: this.iconSpinnerFromGalleryExperience, size: "large" }), h("p", null, this.translationService.i('process-image-message').toString()), h("mb-modal", { visible: this.galleryExperienceModalErrorWindowVisible, modalTitle: this.translationService.i('feedback-scan-unsuccessful-title').toString(), content: this.translationService.i('feedback-scan-unsuccessful').toString(), onClose: () => this.closeGalleryExperienceModal() }, h("div", { slot: "actionButtons" }, h("button", { class: "primary modal-action-button", onClick: () => this.closeGalleryExperienceModal() }, this.translationService.i('modal-window-close').toString())))), h("mb-overlay", { id: "mb-overlay-camera-experience", visible: false, ref: el => this.overlays.camera = el }, h("div", { class: "holder" }, h("video", { ref: el => this.videoElement = el, playsinline: true }), h("mb-camera-experience", { ref: el => this.cameraExperience = el, translationService: this.translationService, showScanningLine: this.showScanningLine, showCameraFeedbackBarcodeMessage: this.showCameraFeedbackBarcodeMessage, onClose: () => this.abortScan(), onFlipCameraAction: () => this.flipCameraAction(), onChangeCameraDevice: (ev) => this.changeCameraDevice(ev.detail), class: "overlay-camera-element" }), h("mb-api-process-status", { visible: this.apiProcessStatusVisible, state: this.apiProcessStatusState, translationService: this.translationService, onCloseTryAgain: () => this.closeApiProcessStatus(true), onCloseFromStart: () => this.stopRecognition() }))), h("mb-overlay", { id: "mb-overlay-modal", visible: false, ref: el => this.overlays.modal = el }, h("mb-modal", { ref: el => this.licenseExperienceModal = el, modalTitle: "Error" }, h("div", { slot: "actionButtons" }, h("button", { class: "primary modal-action-button", onClick: () => this.showOverlay('') }, this.translationService.i('modal-window-close').toString()))))));
}
get hostEl() { return getElement(this); }
};
MbComponent.style = mbComponentCss;
const mbContainerCss = ":host{display:block;min-width:280px;width:100%;height:100%;font-family:var(--mb-font-family)}";
let MbContainer = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, null, h("slot", null)));
}
get hostEl() { return getElement(this); }
};
MbContainer.style = mbContainerCss;
/**
* Copyright (c) Microblink Ltd. All rights reserved.
*/
function getFeedbackClassName(state) {
switch (state) {
case 'FEEDBACK_ERROR':
return 'error';
case 'FEEDBACK_INFO':
return 'info';
default:
return '';
}
}
const mbFeedbackCss = ":host{display:none}:host p{margin:4px 16px;font-family:var(--mb-font-family);font-size:var(--mb-feedback-font-size);font-style:var(--mb-feedback-font-style);font-weight:var(--mb-feedback-font-weight);letter-spacing:var(--mb-feedback-letter-spacing);line-height:var(--mb-feedback-line-height);text-align:right;text-transform:var(--mb-feedback-text-transform)}:host p.info{color:var(--mb-feedback-font-color-info)}:host p.error{color:var(--mb-feedback-font-color-error)}:host(.visible){display:block}:host([dir=rtl]) p{text-align:left}";
let MbFeedback = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Set to 'true' if component should be visible.
*/
this.visible = false;
}
/**
* Call when FeedbackMessage which should be displayed.
*/
async show(feedback) {
this.paragraphValue = feedback.message;
this.paragraphClassName = getFeedbackClassName(feedback.state);
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: classNames({ visible: this.visible }) }, h("p", { class: this.paragraphClassName }, this.paragraphValue)));
}
get hostEl() { return getElement(this); }
};
MbFeedback.style = mbFeedbackCss;
const mbModalCss = ":host{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;visibility:hidden;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;overflow-y:auto;padding:24px}:host .mb-modal{width:100%;max-width:552px;position:relative;background-color:var(--mb-component-background);color:var(--mb-component-font-color);padding:24px}:host .mb-modal .close-wrapper{position:absolute;right:24px;top:24px;cursor:pointer}:host .mb-modal .close-wrapper svg{width:24px;height:24px}:host .mb-modal .title{text-align:center;font-weight:500;font-size:var(--mb-modal-title-font-size);line-height:var(--mb-modal-title-line-height)}:host .mb-modal .content{margin:24px 0;font-weight:400;font-size:var(--mb-modal-content-font-size);line-height:var(--mb-modal-content-line-height)}:host .mb-modal .content.centered{text-align:center}:host .mb-modal .actions{display:flex;justify-content:center}:host .mb-modal .actions button{width:126px;height:32px;border-radius:0;border:0;background:#48B2E8;color:#ffffff;cursor:pointer}:host(.visible){visibility:visible;opacity:1}";
let MbModal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.close = createEvent(this, "close", 7);
/**
* Show modal content
*/
this.visible = false;
/**
* Passed title content from parent component
*/
this.modalTitle = "";
/**
* Passed body content from parent component
*/
this.content = "";
/**
* Center content inside modal
*/
this.contentCentered = true;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: classNames({ visible: this.visible }) }, h("div", { class: "mb-modal" }, h("div", { class: "close-wrapper" }, h("div", { class: "close-icon", onClick: () => this.close.emit() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.5896 4.4107C15.915 4.73614 15.915 5.26378 15.5896 5.58922L5.58958 15.5892C5.26414 15.9147 4.73651 15.9147 4.41107 15.5892C4.08563 15.2638 4.08563 14.7361 4.41107 14.4107L14.4111 4.4107C14.7365 4.08527 15.2641 4.08527 15.5896 4.4107Z", fill: "#3C3C43", "fill-opacity": "0.5" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.41107 4.4107C4.73651 4.08527 5.26414 4.08527 5.58958 4.4107L15.5896 14.4107C15.915 14.7361 15.915 15.2638 15.5896 15.5892C15.2641 15.9147 14.7365 15.9147 14.4111 15.5892L4.41107 5.58922C4.08563 5.26378 4.08563 4.73614 4.41107 4.4107Z", fill: "#3C3C43", "fill-opacity": "0.5" })))), h("div", { class: "title" }, this.modalTitle), h("div", { class: this.contentCentered ? 'centered' : '' }, this.content), h("div", { class: "actions" }, h("slot", { name: "actionButtons" })))));
}
get hostEl() { return getElement(this); }
};
MbModal.style = mbModalCss;
const mbOverlayCss = ":host{display:block;width:100%;height:100%;position:fixed;top:0;left:0;z-index:-1;opacity:0;border-radius:0px;visibility:hidden;overflow:hidden;background-color:transparent;border-style:none;border-color:transparent;transform:translate(0, 0);transform-origin:center;transition:background-color 0.2s ease 0.4s, border-style 0.2s ease 0.4s, border-color 0.2s ease 0.4s, opacity 0.2s ease 0.4s, visibility 0.1s ease 0.5s, z-index 0.7s}:host(.visible){z-index:200;visibility:visible;opacity:1;background-color:transparent;transform:translate(0, 0);transition:opacity 0.2s ease, visibility 0.1s ease}:host(.non-fullscreen){width:auto;height:auto;position:absolute;top:calc(0px - var(--mb-component-border-width));bottom:calc(0px - var(--mb-component-border-width));left:calc(0px - var(--mb-component-border-width));right:calc(0px - var(--mb-component-border-width))}";
let MbOverlay = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Set to 'false' if overlay should not cover whole screen.
*/
this.fullscreen = true;
/**
* Set to 'true' if overlay should be visible.
*/
this.visible = false;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
getHostClassNames() {
const classNames = [];
this.hostEl.classList.forEach((value) => {
if (value !== 'visible' && value !== 'non-fullscreen') {
classNames.push(value);
}
});
return classNames.join(' ');
}
render() {
return (h(Host, { className: `${classNames({ visible: this.visible, 'non-fullscreen': !this.fullscreen })} ${this.getHostClassNames()}` }, h("slot", null)));
}
get hostEl() { return getElement(this); }
};
MbOverlay.style = mbOverlayCss;
const mbScreenCss = ":host{box-sizing:border-box;display:none;width:100%;height:100%;padding:8px 16px}:host(.visible){display:block}";
let MbScreen = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Set to 'true' if screen should be visible.
*/
this.visible = false;
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: classNames({ visible: this.visible }) }, h("slot", null)));
}
get hostEl() { return getElement(this); }
};
MbScreen.style = mbScreenCss;
const mbSpinnerCss = ":host{display:block;padding:0}:host img{display:block;width:24px;height:24px;-webkit-animation:rotation 700ms linear infinite;animation:rotation 700ms linear infinite}:host(.large) img{width:40px;height:40px}@-webkit-keyframes rotation{100%{transform-origin:center;transform:rotate(360deg)}}@keyframes rotation{100%{transform-origin:center;transform:rotate(360deg)}}";
let MbSpinner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Value of `src` attribute for <img> element.
*/
this.icon = 'data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.33" cx="12" cy="12" r="10" stroke="%2348B2E8" stroke-width="4"/><path d="M2 12C2 6.47715 6.47715 2 12 2" stroke="%2348B2E8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
/**
* Spinner size, can be 'default' or 'large'.
*/
this.size = 'default';
}
connectedCallback() {
setWebComponentParts(this.hostEl);
}
render() {
return (h(Host, { className: this.size }, h("img", { src: this.icon })));
}
get hostEl() { return getElement(this); }
};
MbSpinner.style = mbSpinnerCss;
export { BlinkinputInBrowser as blinkinput_in_browser, MbApiProcessStatus as mb_api_process_status, MbButton as mb_button, MbCameraExperience as mb_camera_experience, MbCameraSelection as mb_camera_selection, MbCameraToolbar as mb_camera_toolbar, MbCompleted as mb_completed, MbComponent as mb_component, MbContainer as mb_container, MbFeedback as mb_feedback, MbModal as mb_modal, MbOverlay as mb_overlay, MbScreen as mb_screen, MbSpinner as mb_spinner };