ngx-scandoc 0.0.1 → 1.0.2

package/fesm2020/ngx-scandoc.mjs

@@ -1,53 +1,4188 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule, Inject, ChangeDetectionStrategy, HostBinding, Pipe, ViewContainerRef } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Observable, from, Subject, of, tap as tap$1, distinctUntilChanged, throwError } from 'rxjs';
+import { tap, switchMap, takeUntil, map, share, catchError } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import * as i2 from '@angular/cdk/platform';
+import { PlatformModule } from '@angular/cdk/platform';
+import { v4 } from 'uuid';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import moment from 'moment';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import jwt_decode from 'jwt-decode';
+import * as i7$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i9 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i5$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i7 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i6$1 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1$4 from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i5$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { FieldType, FormlyMaterialModule } from '@ngx-formly/material';
+import * as i3 from 'ngx-avatars';
+import { AvatarModule } from 'ngx-avatars';
+import { FormlySelectModule } from '@ngx-formly/core/select';
+import { FormlyMatDatepickerModule } from '@ngx-formly/material/datepicker';
+import * as i4$1 from '@angular/material/form-field';
+import * as i1$3 from '@angular/platform-browser';
+import * as i4$2 from '@angular/flex-layout';
+import { FlexModule, FlexLayoutModule } from '@angular/flex-layout';
+import * as i5$3 from '@angular/flex-layout/extended';
+import { QRCodeModule } from 'angularx-qrcode';
+import { webSocket } from 'rxjs/webSocket';
 
-class NgxScandocService {
-    constructor() { }
+/**
+ * Container class for a captured webcam image
+ * @author basst314, davidshen84
+ */
+class WebcamImage {
+    constructor(imageAsDataUrl, mimeType, imageData, resized) {
+        this._mimeType = mimeType;
+        this._imageAsDataUrl = imageAsDataUrl;
+        this._imageData = imageData;
+        this._imageResized = resized;
+    }
+    /**
+     * Extracts the Base64 data out of the given dataUrl.
+     * @param dataUrl the given dataUrl
+     * @param mimeType the mimeType of the data
+     */
+    static getDataFromDataUrl(dataUrl, mimeType) {
+        return dataUrl.replace(`data:${mimeType};base64,`, '');
+    }
+    /**
+     * Get the base64 encoded image data
+     * @returns base64 data of the image
+     */
+    get imageAsBase64() {
+        return this._imageAsBase64
+            ? this._imageAsBase64
+            : (this._imageAsBase64 = WebcamImage.getDataFromDataUrl(this._imageAsDataUrl, this._mimeType));
+    }
+    /**
+     * Get the encoded image as dataUrl
+     * @returns the dataUrl of the image
+     */
+    get imageAsDataUrl() {
+        return this._imageAsDataUrl;
+    }
+    /**
+     * Get the ImageData object associated with the canvas' 2d context.
+     * @returns the ImageData of the canvas's 2d context.
+     */
+    get imageData() {
+        return this._imageData;
+    }
+    get imageResized() {
+        return this._imageResized;
+    }
+    get dataUrl() {
+        const canvas = document.createElement('canvas');
+        const { width, height } = this._imageData;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.putImageData(this._imageData, 0, 0);
+        }
+        return canvas.toDataURL(this._mimeType, 1);
+    }
+}
+
+class WebcamUtil {
+    /**
+     * Lists available videoInput devices
+     * @returns a list of media device info.
+     */
+    static getAvailableVideoInputs() {
+        return new Observable((observer) => {
+            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+                return observer.error(null);
+            }
+            const _window = window;
+            let streams;
+            from(navigator.mediaDevices.getUserMedia({
+                video: { deviceId: undefined },
+            }))
+                .pipe(tap((s) => { streams = s; }), switchMap((s) => from(navigator.mediaDevices.enumerateDevices())))
+                .subscribe((devices) => {
+                //  console.log(streams);
+                if (streams) {
+                    streams.getTracks().forEach((track) => {
+                        track.stop();
+                    });
+                }
+                observer.next(devices.filter((device) => device.kind === 'videoinput'));
+            });
+        });
+        // return new Promise((resolve, reject) => {
+        //   navigator.mediaDevices.getUserMedia({
+        //     video: undefined,
+        //   });
+        //   navigator.mediaDevices
+        //     .enumerateDevices()
+        //     .then((devices: MediaDeviceInfo[]) => {
+        //       resolve(
+        //         devices.filter(
+        //           (device: MediaDeviceInfo) => device.kind === 'videoinput'
+        //         )
+        //       );
+        //     })
+        //     .catch((err) => {
+        //       reject(err.message || err);
+        //     });
+        // });
+    }
+}
+
+const workertext = `
+
+
+let readStream = true;
+async function blobToBase64(blob) {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+}
+async function delay(ms) {
+  return new Promise((resolve) =>
+    ms > 0 ? setTimeout(resolve, ms) : resolve(0)
+  );
+}
+
+function calculateDelay(startTime) {
+  const endTime = Date.now();
+  // difference in ms
+  const dt = endTime - startTime;
+  const delay = 100 - dt;
+ // console.log('[WORKER TIME]', dt, '[DELAY 100-x]', delay);
+  return delay > 4 ? delay : 0;
+}
+async function parseFrame(frameStream, trackSettings) {
+  const reader = frameStream.getReader();
+
+  while (readStream) {
+    const time = Date.now();
+    const result = await reader.read();
+    if (result.done) break;
+
+    const frameFromCamera = result.value;
+
+    await parseFrameFromCamera(frameFromCamera, trackSettings);
+    // wait
+    await delay(calculateDelay(time));
+  }
+}
+
+async function parseFrameFast(frameStream, trackSettings) {
+  console.warn('FAST', performance.now());
+  const reader = frameStream.getReader();
+  const { width, height } = trackSettings;
+  const offscreenSmall = new OffscreenCanvas(384, 384);
+  const context = offscreenSmall.getContext('2d');
+  let time = 0;
+  while (true) {
+    // const t0 = performance.now();
+    //  console.time('result');
+    const result = reader.read();
+    //  console.timeEnd('result');
+    if (result.done) break;
+
+    const frameFromCamera = result.value;
+    // console.log(frameFromCamera.timestamp);
+
+    // const tt = frameFromCamera.timestamp - time;
+    // console.log(tt / 1000);
+    // time = frameFromCamera.timestamp;
+
+    // console.time('bitmap');
+    const bitmap = await createImageBitmap(frameFromCamera, {
+      premultiplyAlpha: 'default',
+    });
+    console.warn(new Date().getTime());
+    // console.timeEnd('bitmap');
+
+    // context.clearRect(0, 0, 384, 384);
+    // console.time('draw');
+    // context.drawImage(bitmap, 0, 0, width, height, 0, 0, 384, 384);
+    // console.timeEnd('draw');
+    // console.time('transfer');
+    // const bitmapSmall = offscreenSmall.transferToImageBitmap();
+    // console.timeEnd('transfer');
+
+    frameFromCamera.close();
+    // //
+    // const t1 = performance.now();
+
+
+    // await parseFrameFromCamera(frameFromCamera, trackSettings);
+  }
+}
+
+async function parseFrameFromCamera(frameFromCamera, trackSettings) {
+  const { width, height } = trackSettings;
+  const offscreenSmall = new OffscreenCanvas(384, 384);
+  // console.time('bit2');
+  const bitmap = await createImageBitmap(frameFromCamera, {
+    premultiplyAlpha: 'default',
+  });
+  // console.timeEnd('bit2');
+  const context = offscreenSmall.getContext('2d');
+
+  //      console.time('buffer');
+  //      const buffer = new Uint8Array(frameFromCamera.allocationSize());
+  //      let layout = await frameFromCamera.copyTo(buffer);
+
+  //       const base64 = await blobToBase64(new Blob([buffer]));
+  // console.log(base64)
+  //      console.timeEnd('buffer');
+
+  if (context) {
+    context.imageSmoothingEnabled = false;
+
+    // let videoFrame2 = frameFromCamera.clone();
+
+    //   createImageBitmap();
+
+    // console.time('clear');
+    // context.clearRect(0, 0, width, height);
+    //  console.timeEnd('clear');
+    // console.time('draw');
+    context.drawImage(bitmap, 0, 0, width, height, 0, 0, 384, 384);
+    // console.timeEnd('draw');
+    // context.drawImage(bit, 0, 0);
+    //  bit2.close();
+    //  bit.close();
+    //  console.timeEnd('draw');
+    // console.time('capture');
+
+    // const bitmapsmall = offscreenSmall.transferToImageBitmap();
+
+    // const imageData = context.getImageData(0, 0, 384, 384);
+    //  console.timeEnd('capture');
+    // console.time('blob');
+    const resized = await offscreenSmall.convertToBlob({
+      type: 'image/jpeg',
+    });
+    // console.timeEnd('blob');
+    //  console.log(resized);
+    //  console.time('base64');
+    const base64 = await blobToBase64(resized);
+    //console.timeEnd('base64');
+    // console.log(blob);
+
+    // console.time('convert')
+    // await convert(bitmap, trackSettings)
+    // console.timeEnd('convert');
+    // console.log(
+    //   '%c ',
+    //   'font-size:384px; background:url('+blob+') no-repeat;'
+    // );
+
+    //   console.timeEnd('blob');
+    postMessage({ base64, bitmap }, [bitmap]);
+    // videoFrame2.close();
+  }
+  frameFromCamera.close();
+}
+
+async function convert(image, trackSettings) {
+  const { width, height } = trackSettings;
+
+  const offscreenSmall = new OffscreenCanvas(width, height);
+
+  const context = offscreenSmall.getContext('2d');
+
+  // console.time('buffer');
+  // const buffer = new Uint8Array(frameFromCamera.allocationSize());
+  // let layout = await frameFromCamera.copyTo(buffer);
+  // console.timeEnd('buffer');
+
+  if (context) {
+    context.imageSmoothingEnabled = false;
+    // let videoFrame2 = frameFromCamera.clone();
+    console.warn(image);
+    //   createImageBitmap();
+
+    // console.time('clear');
+    // context.clearRect(0, 0, width, height);
+    // console.timeEnd('clear');
+
+    context.drawImage(image, 0, 0);
+    // context.drawImage(bit, 0, 0);
+    // image.close();
+    // console.timeEnd('drawB');
+    console.time('blob2');
+    const resized = await offscreenSmall.convertToBlob({
+      type: 'image/jpeg',
+    });
+    console.timeEnd('blob2');
+
+    // image.close();
+    // console.time('base64');
+    const base64 = await blobToBase64(resized);
+
+    // console.log(blob);
+
+    // console.log(
+    //   '%c ',
+    //   'font-size:384px; background:url(' + base64 + ') no-repeat;'
+    // );
+
+    //  console.timeEnd('base64');
+    //postMessage({ type: 'convert', base64 });
+  }
+}
+addEventListener('message', ({ data }) => {
+  const { type, image, frameStream, trackSettings } = data;
+  // console.log(data);
+  switch (type) {
+    case 'start':
+      readStream = true;
+      parseFrame(frameStream, trackSettings);
+      break;
+
+    case 'fast':
+      readStream = true;
+      parseFrameFast(frameStream, trackSettings);
+      break;
+
+    case 'stop':
+      console.warn('STOP WORKER');
+      readStream = false;
+      break;
+
+    case 'convert':
+      convert(image, trackSettings);
+      break;
+  }
+
+  // const canvas = document.createElement('canvas');
+  // const ctx = canvas.getContext('2d');
+
+  // if (data.canvas) {
+  //   postMessage('ok');
+  // } else {
+
+  //   postMessage(response);
+  // }
+});
+`;
+
+class BaseComponent {
+    constructor() {
+        this.$destroy = new Subject();
+    }
+    __subs(observable) {
+        return observable.pipe(takeUntil(this.$destroy));
+    }
+    __destroy() {
+        this.$destroy.next(true);
+        this.$destroy.complete();
+    }
 }
-NgxScandocService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgxScandocService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocService, decorators: [{
+
+class NgxScandocCameraProvider {
+    constructor() {
+        this.switchCamera = new Subject();
+        this.cameraReady = false;
+        this.cameraSwitched = new Subject();
+        this.multipleWebcamsAvailable = false;
+        this.setup();
+    }
+    setup() {
+        WebcamUtil.getAvailableVideoInputs().subscribe((mediaDevices) => {
+            console.log('[DEVICES]', mediaDevices.map((d) => d.label));
+            this.mediaDevices = mediaDevices;
+            this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
+        });
+    }
+    selectCamera(event) {
+        this.switchCamera.next(event.value);
+    }
+    cameraWasSwitched(deviceId) {
+        console.log('[active device]', deviceId);
+        this.deviceId = deviceId;
+        this.cameraReady = true;
+    }
+    get nextWebcamObservable() {
+        return this.switchCamera.asObservable();
+    }
+}
+NgxScandocCameraProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocCameraProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgxScandocCameraProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocCameraProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocCameraProvider, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return []; } });
 
-class NgxScandocComponent {
-    constructor() { }
+class WebcamComponent extends BaseComponent {
+    constructor(breakpointObserver, platform, cd, zone, cameraProvider) {
+        super();
+        this.breakpointObserver = breakpointObserver;
+        this.platform = platform;
+        this.cd = cd;
+        this.zone = zone;
+        this.cameraProvider = cameraProvider;
+        /** Defines the max width of the webcam area in px */
+        this.width = 640;
+        /** Defines the max height of the webcam area in px */
+        this.height = 480;
+        /** Defines base constraints to apply when requesting video track from UserMedia */
+        this.videoOptions = WebcamComponent.DEFAULT_VIDEO_OPTIONS;
+        /** Flag to enable/disable camera switch. If enabled, a switch icon will be displayed if multiple cameras were found */
+        this.allowCameraSwitch = true;
+        /** Flag to control whether an ImageData object is stored into the WebcamImage object. */
+        this.captureImageData = false;
+        /** The image type to use when capturing snapshots */
+        this.imageType = WebcamComponent.DEFAULT_IMAGE_TYPE;
+        /** The image quality to use when capturing snapshots (number between 0 and 1) */
+        this.imageQuality = WebcamComponent.DEFAULT_IMAGE_QUALITY;
+        /** EventEmitter which fires when an image has been captured */
+        this.imageCapture = new EventEmitter();
+        /** Emits a mediaError if webcam cannot be initialized (e.g. missing user permissions) */
+        this.initError = new EventEmitter();
+        /** Emits when the webcam video was clicked */
+        this.imageClick = new EventEmitter();
+        /** Emits the active deviceId after the active video device was switched */
+        this.cameraSwitched = new EventEmitter();
+        this.videoReady = new EventEmitter();
+        this.showVideo = false;
+        this.destroyed = new EventEmitter();
+        /** available video devices */
+        this.availableVideoInputs = [];
+        /** Indicates whether the video device is ready to be switched */
+        this.videoInitialized = false;
+        this.canvasEl = document.createElement('canvas');
+        /** Index of active video in availableVideoInputs */
+        this.activeVideoInputIndex = -1;
+        /** MediaStream object in use for streaming UserMedia data */
+        this.mediaStream = null;
+        this.shutdown = false;
+        this.canStart = true;
+        this.videoSize = { width: 1920, height: 1080 };
+        this.canvasSize = { width: 1280, height: 720 };
+        this.landscape = true;
+        // if (typeof Worker !== 'undefined') {
+        //   // Create a new
+        //   this.worker = new Worker(
+        //     new URL('./../../../../app/app.worker', import.meta.url)
+        //   );
+        //   this.worker.onmessage = ({ data }) => {
+        //     console.log(`page got message: ${data}`);
+        //   };
+        //   console.log('POST');
+        //   this.worker.postMessage('hello');
+        // } else {
+        //   // Web workers are not supported in this environment.
+        //   // You should add a fallback so that your program still executes correctly.
+        // }
+    }
+    /**
+     * If the given Observable emits, an image will be captured and emitted through 'imageCapture' EventEmitter
+     */
+    set trigger(trigger) {
+        if (this.triggerSubscription) {
+            this.triggerSubscription.unsubscribe();
+        }
+        // Subscribe to events from this Observable to take snapshots
+        this.triggerSubscription = trigger.subscribe((time) => {
+            this.takeSnapshot(time);
+        });
+    }
+    onResize() {
+        this.videoReady.next(false);
+        this.resizeStage();
+    }
+    /**
+     * Get MediaTrackConstraints to request streaming the given device
+     * @param deviceId
+     * @param baseMediaTrackConstraints base constraints to merge deviceId-constraint into
+     * @returns
+     */
+    static getMediaConstraintsForDevice(deviceId, baseMediaTrackConstraints) {
+        const result = baseMediaTrackConstraints
+            ? baseMediaTrackConstraints
+            : this.DEFAULT_VIDEO_OPTIONS;
+        if (deviceId) {
+            result.deviceId = { exact: deviceId };
+        }
+        return result;
+    }
+    /**
+     * Tries to harvest the deviceId from the given mediaStreamTrack object.
+     * Browsers populate this object differently; this method tries some different approaches
+     * to read the id.
+     * @param mediaStreamTrack
+     * @returns deviceId if found in the mediaStreamTrack
+     */
+    static getDeviceIdFromMediaStreamTrack(mediaStreamTrack) {
+        if (mediaStreamTrack.getSettings &&
+            mediaStreamTrack.getSettings() &&
+            mediaStreamTrack.getSettings().deviceId) {
+            return mediaStreamTrack.getSettings().deviceId;
+        }
+        else if (mediaStreamTrack.getConstraints &&
+            mediaStreamTrack.getConstraints() &&
+            mediaStreamTrack.getConstraints().deviceId) {
+            const deviceIdObj = mediaStreamTrack.getConstraints().deviceId;
+            return WebcamComponent.getValueFromConstrainDOMString(deviceIdObj);
+        }
+    }
+    /**
+     * Tries to harvest the facingMode from the given mediaStreamTrack object.
+     * Browsers populate this object differently; this method tries some different approaches
+     * to read the value.
+     * @param mediaStreamTrack
+     * @returns facingMode if found in the mediaStreamTrack
+     */
+    static getFacingModeFromMediaStreamTrack(mediaStreamTrack) {
+        if (mediaStreamTrack) {
+            if (mediaStreamTrack.getSettings &&
+                mediaStreamTrack.getSettings() &&
+                mediaStreamTrack.getSettings().facingMode) {
+                return mediaStreamTrack.getSettings().facingMode;
+            }
+            else if (mediaStreamTrack.getConstraints &&
+                mediaStreamTrack.getConstraints() &&
+                mediaStreamTrack.getConstraints().facingMode) {
+                const facingModeConstraint = mediaStreamTrack.getConstraints().facingMode;
+                return WebcamComponent.getValueFromConstrainDOMString(facingModeConstraint);
+            }
+        }
+    }
+    /**
+     * Determines whether the given mediaStreamTrack claims itself as user facing
+     * @param mediaStreamTrack
+     */
+    static isUserFacing(mediaStreamTrack) {
+        const facingMode = WebcamComponent.getFacingModeFromMediaStreamTrack(mediaStreamTrack);
+        return facingMode ? 'user' === facingMode.toLowerCase() : false;
+    }
+    /**
+     * Extracts the value from the given ConstrainDOMString
+     * @param constrainDOMString
+     */
+    static getValueFromConstrainDOMString(constrainDOMString) {
+        if (constrainDOMString) {
+            if (constrainDOMString instanceof String) {
+                return String(constrainDOMString);
+            }
+            else if (Array.isArray(constrainDOMString) &&
+                Array(constrainDOMString).length > 0) {
+                return String(constrainDOMString[0]);
+            }
+            else if (typeof constrainDOMString === 'object') {
+                if (constrainDOMString['exact']) {
+                    return String(constrainDOMString['exact']);
+                }
+                else if (constrainDOMString['ideal']) {
+                    return String(constrainDOMString['ideal']);
+                }
+            }
+        }
+        return null;
+    }
+    resizeStage() {
+        setTimeout(() => {
+            this.updateSize();
+            this.updatecanvasSize();
+            this.drawRectangle();
+            this.cd.detectChanges();
+            this.videoReady.next(true);
+        }, 10);
+    }
+    get canvasHeight() {
+        const landscape = this.width > this.height;
+        const aspect = this.videoSize.width / this.videoSize.height;
+        if (!landscape) {
+            return this.width * aspect;
+        }
+        return this.height;
+    }
+    updatecanvasSize() {
+        console.log(this.width, this.height);
+        const landscape = this.width > this.height;
+        const aspect = this.videoSize.width / this.videoSize.height;
+        let width = this.width;
+        let height = this.height;
+        if (landscape) {
+            height = width / aspect;
+        }
+        else {
+            height = width / aspect;
+        }
+        if (height > this.height) {
+            height = this.height;
+            width = this.height * aspect;
+        }
+        this.canvasSize = { width: Math.round(width), height: Math.round(height) };
+        console.log(this.canvasSize, this.videoSize);
+        if (this.isMobile) {
+            this.video.nativeElement.setAttribute('height', this.canvasSize.height);
+            this.video.nativeElement.setAttribute('width', this.canvasSize.width);
+        }
+        else {
+            if (this.videoSize.width > this.videoSize.hight) {
+                this.video.nativeElement.setAttribute('height', this.canvasSize.height);
+            }
+            else {
+                this.video.nativeElement.setAttribute('width', this.canvasSize.width);
+            }
+        }
+        this.cd.detectChanges();
+    }
+    setupWorker() {
+        if (typeof Worker !== 'undefined') {
+            // Create a new
+            if (this.type !== 'selfie') {
+                this.zone.runOutsideAngular(() => {
+                    var blob = new Blob([workertext], { type: 'text/javascript' });
+                    var url = URL.createObjectURL(blob);
+                    this.worker = new Worker(url);
+                    this.worker.onmessage = ({ data }) => {
+                        if (data.base64) {
+                            data.type == 'data';
+                            this.imageHandler.next(data);
+                        }
+                    };
+                });
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.setupWorker();
+        if (this.imageHandler) {
+            this.__subs(this.imageHandler).subscribe((resp) => {
+                if (resp.type === 'stop') {
+                    this.worker?.postMessage({ type: 'stop' });
+                }
+            });
+        }
+        this.__subs(this.breakpointObserver
+            .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]))
+            .subscribe((state) => {
+            if (this.platform.IOS || this.platform.ANDROID) {
+                // this.landscape = state.breakpoints[Breakpoints.HandsetLandscape];
+            }
+            const mobile = this.platform.IOS;
+            if (state.matches && mobile) {
+                this.updateSize();
+                this.updatecanvasSize();
+                this.drawRectangle();
+            }
+        });
+        if (this.switchCamera) {
+            if (this.switchCameraSubscription) {
+                this.switchCameraSubscription.unsubscribe();
+            }
+            // Subscribe to events from this Observable to switch video device
+            this.switchCameraSubscription = this.switchCamera.subscribe((value) => {
+                this.switchToVideoInput(value);
+            });
+        }
+        this.detectAvailableDevices()
+            .then(() => {
+            // start video
+            if (this.canStart) {
+                this.switchToVideoInput('');
+            }
+        })
+            .catch((err) => {
+            this.initError.next({ message: err });
+            // fallback: still try to load webcam, even if device enumeration failed
+            if (this.canStart) {
+                this.switchToVideoInput('');
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.canStart = false;
+        this.nativeVideoElement.pause();
+        this.destroyed.emit(true);
+        this.stopMediaTracks();
+        this.unsubscribeFromSubscriptions();
+        this.shutdown = true;
+        // shut down worker
+        if (this.imageHandler) {
+            this.imageHandler.next({ type: 'stop' });
+        }
+        if (this.nativeVideoElement.srcObject) {
+            this.nativeVideoElement.srcObject
+                .getTracks()
+                .forEach((track) => {
+                track.stop();
+            });
+            this.nativeVideoElement.srcObject = null;
+        }
+        this.__destroy();
+        // this.nativeVideoElement.src = null;
+        // this.nativeVideoElement.srcObject = null;
+    }
+    takeSelfie() {
+        const _video = this.nativeVideoElement;
+        const mimeType = this.imageType
+            ? this.imageType
+            : WebcamComponent.DEFAULT_IMAGE_TYPE;
+        let _canvas = document.createElement('canvas'); //this.canvasSnapshot.nativeElement;
+        const { width, height } = this.videoSize;
+        console.log(width, height);
+        const { padding, top, rWidth, rHeight } = this.snapRectangle;
+        _canvas.width = rWidth;
+        _canvas.height = rHeight;
+        const ctx = _canvas.getContext('2d', {
+            alpha: false,
+            powerPreference: 'high-performance',
+            antialias: false,
+            depth: false,
+            desynchronized: true,
+        });
+        if (ctx) {
+            ctx.drawImage(_video, padding, top, rWidth, rHeight, 0, 0, rWidth, rHeight);
+            const imgAsUrl = _canvas.toDataURL(mimeType, 1);
+            this.imageCapture.emit(new WebcamImage(imgAsUrl, mimeType, new ImageData(1, 1), null));
+        }
+    }
+    /**
+     * Takes a snapshot of the current webcam's view and emits the image as an event
+     */
+    takeSnapshot(time) {
+        if (this.type === 'selfie') {
+            this.takeSelfie();
+            return;
+        }
+        if (this.trackProcessor) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            const canvasSmalSize = 384;
+            const _video = this.nativeVideoElement;
+            const mimeType = this.imageType
+                ? this.imageType
+                : WebcamComponent.DEFAULT_IMAGE_TYPE;
+            let _canvas = document.createElement('canvas'); //this.canvasSnapshot.nativeElement;
+            const { width, height } = this.videoSize;
+            _canvas.width = width;
+            _canvas.height = height;
+            const ctx = _canvas.getContext('2d', {
+                alpha: false,
+                powerPreference: 'high-performance',
+                antialias: false,
+                depth: false,
+                desynchronized: true,
+            });
+            const canvas = document.createElement('canvas'); // needs an initial size
+            canvas.height = canvasSmalSize;
+            canvas.width = canvasSmalSize;
+            const ctxO = canvas.getContext('2d', {
+                alpha: false,
+                powerPreference: 'high-performance',
+                antialias: false,
+                depth: false,
+                desynchronized: true,
+            });
+            if (ctx && ctxO) {
+                ctx.imageSmoothingEnabled = false;
+                ctx.drawImage(_video, 0, 0);
+                ctxO.drawImage(_video, 0, 0, canvasSmalSize, canvasSmalSize);
+                const imData = ctx.getImageData(0, 0, this.videoSize.width, this.videoSize.height);
+                const resize = canvas.toDataURL(mimeType, 1);
+                const currentTime = new Date().getTime();
+                const diff = currentTime - time;
+                const delay = diff > 100 ? 0 : 100 - diff;
+                const timeout = setTimeout(() => {
+                    this.imageCapture.emit(new WebcamImage('', mimeType, imData, resize));
+                    clearTimeout(timeout);
+                }, delay);
+            }
+        });
+    }
+    update() { }
+    resizeImage(base64data) {
+        return new Observable((observer) => {
+            let canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const max_size = 384;
+            let image = new Image();
+            image.src = base64data;
+            image.onload = () => {
+                let width = image.width;
+                let height = image.height;
+                if (width < height) {
+                    height *= max_size / width;
+                    width = max_size;
+                }
+                else {
+                    width *= max_size / height;
+                    height = max_size;
+                }
+                canvas.width = width;
+                canvas.height = height;
+                // console.log(width, height);
+                if (ctx) {
+                    // ctx.rotate((90 * Math.PI) / 180);
+                    // ctx.translate(0, -canvas.width);
+                    ctx.drawImage(image, 0, 0, 384, 384);
+                    observer.next(canvas.toDataURL());
+                    ctx.clearRect(0, 0, 1, 1);
+                }
+                else {
+                    observer.error({ type: 'generic error' });
+                }
+                image = null;
+                canvas = null;
+            };
+            image.onerror = (e) => {
+                observer.error(e);
+            };
+        });
+    }
+    /**
+     * Switches to the next/previous video device
+     * @param forward
+     */
+    rotateVideoInput(forward) {
+        if (this.availableVideoInputs && this.availableVideoInputs.length > 1) {
+            const increment = forward
+                ? 1
+                : this.availableVideoInputs.length - 1;
+            const nextInputIndex = (this.activeVideoInputIndex + increment) %
+                this.availableVideoInputs.length;
+            this.switchToVideoInput(this.availableVideoInputs[nextInputIndex].deviceId);
+        }
+    }
+    /**
+     * Switches the camera-view to the specified video device
+     */
+    switchToVideoInput(deviceId) {
+        // if(deviceId){
+        this.videoInitialized = false;
+        this.stopMediaTracks();
+        this.initWebcam(deviceId, this.videoOptions);
+        // }
+    }
+    /**
+     * Event-handler for video resize event.
+     * Triggers Angular change detection so that new video dimensions get applied
+     */
+    videoResize() {
+        // here to trigger Angular change detection
+    }
+    get videoWidth() {
+        const videoRatio = this.getVideoAspectRatio();
+        return Math.min(this.width, this.height * videoRatio);
+    }
+    get videoHeight() {
+        const videoRatio = this.getVideoAspectRatio();
+        return Math.min(this.height, this.width / videoRatio);
+    }
+    get videoStyleClasses() {
+        let classes = '';
+        if (this.isMirrorImage()) {
+            classes += 'mirrored ';
+        }
+        return classes.trim();
+    }
+    get nativeVideoElement() {
+        return this.video.nativeElement;
+    }
+    // public get smallVideoElement() {
+    //   return this.videoSmall;
+    // }
+    /**
+     * Returns the video aspect ratio of the active video stream
+     */
+    getVideoAspectRatio() {
+        // calculate ratio from video element dimensions if present
+        const videoElement = this.nativeVideoElement;
+        if (videoElement.videoWidth &&
+            videoElement.videoWidth > 0 &&
+            videoElement.videoHeight &&
+            videoElement.videoHeight > 0) {
+            return videoElement.videoWidth / videoElement.videoHeight;
+        }
+        // nothing present - calculate ratio based on width/height params
+        return this.width / this.height;
+    }
+    updateSize() {
+        const track = this.mediaStream?.getTracks()[0];
+        if (track) {
+            let desired = {
+                width: {
+                    ideal: 0,
+                },
+                height: {
+                    ideal: 0,
+                },
+                //  facingMode:'user',
+                frameRate: { min: 20, ideal: 24, max: 24 },
+            };
+            if (typeof track.getCapabilities === 'function') {
+                const { width, height } = track.getCapabilities();
+                desired = {
+                    width: {
+                        ideal: this.landscape && this.isMobile ? height?.max : width?.max,
+                    },
+                    height: {
+                        ideal: this.landscape && this.isMobile ? width?.max : height?.max,
+                    },
+                    //  facingMode:'user',
+                    frameRate: { min: 20, ideal: 24, max: 24 },
+                };
+            }
+            else {
+                desired = {
+                    width: {
+                        ideal: 1920,
+                    },
+                    height: {
+                        ideal: 1080,
+                    },
+                    //  facingMode:'user',
+                    frameRate: { min: 20, ideal: 30, max: 31 },
+                };
+            }
+            if (desired.height.ideal && desired.height.ideal >= 1600) {
+                desired.height.ideal = 1600;
+                desired.width.ideal = 1600;
+            }
+            if (this.platform.ANDROID) {
+                //desired.width.ideal = 2160;
+                //desired.height.ideal = 2160;
+                // if (!this.landscape) {
+                // } else {
+                //   desired.width.ideal = width?.max;
+                //   desired.height.ideal = height?.max;
+                // }
+            }
+            track.applyConstraints(desired);
+            //track.getSettings().facingMode!=='user';
+            this.videoSize = {
+                height: this.landscape
+                    ? track.getSettings().height
+                    : track.getSettings().width,
+                width: this.landscape
+                    ? track.getSettings().width
+                    : track.getSettings().height,
+            };
+            this.cd.detectChanges();
+        }
+    }
+    getStreamTrack(stream) {
+        return stream.getVideoTracks()[0];
+    }
+    getTrackSettings() { }
+    accesVideoTrack(videoTrackConstraints) {
+        return from(navigator.mediaDevices.getUserMedia(videoTrackConstraints)).pipe(switchMap((stream) => {
+            // default resolution 1280x720, check max resolution
+            const track = this.getStreamTrack(stream);
+            const capabilities = track.getCapabilities();
+            const { facingMode, height, width } = capabilities;
+            const desired = {
+                width: {
+                    min: this.landscape && this.isMobile ? height?.max : width?.max,
+                },
+                // height: {
+                //   exact: this.landscape && this.isMobile ? width?.max : height?.max,
+                // },
+                // facingMode:'en',
+                // frameRate: { min: 25, ideal: 30, max: 31 },
+            };
+            // get max width
+            const { width: sWidth, height: sHeight } = track.getSettings();
+            if (desired.width.min != sWidth) {
+                return this.accesVideoTrack({ video: desired });
+            }
+            //return this.accesVideoTrack({video:desired});
+            return of(stream);
+        }));
+    }
+    drawRectangle() {
+        const _canvas = this.canvas.nativeElement;
+        const ctx = _canvas.getContext('2d');
+        ctx.clearRect(0, 0, _canvas.width, _canvas.height);
+        // ctx.drawImage(_video, 0, 0, _canvas.width, _canvas.height);
+        const { padding, top, rWidth, rHeight } = this.cardRectangle;
+        ctx.strokeStyle = 'red';
+        ctx.strokeRect(padding, top, rWidth, rHeight);
+    }
+    getMaxAvailableResolution() { }
+    /**
+     * Init webcam live view
+     */
+    initWebcam(deviceId, userVideoTrackConstraints) {
+        const _video = this.nativeVideoElement;
+        // const videoStreamer = this.videoStreamer.nativeElement;
+        // const videoSmall = document.createElement('video');
+        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            // merge deviceId -> userVideoTrackConstraints
+            const videoTrackConstraints = WebcamComponent.getMediaConstraintsForDevice(deviceId, userVideoTrackConstraints);
+            // // if (deviceId) {
+            // this.accesVideoTrack({ video: videoTrackConstraints }).subscribe(
+            //   (stream: MediaStream) => {
+            //     console.log(
+            //       'VALID SETTINGS',
+            //       stream.getVideoTracks()[0].getSettings()
+            //     );
+            //   }
+            // );
+            // }
+            if (this.platform.ANDROID) {
+                videoTrackConstraints.width = 1600;
+                videoTrackConstraints.height = 1600;
+            }
+            const constraints = {
+                exact: deviceId,
+                width: { min: 480, ideal: 1280 },
+                height: { min: 480, ideal: 720 },
+                // aspectRatio: 3 / 2,
+                frameRate: { min: 20 },
+            };
+            navigator.mediaDevices
+                .getUserMedia({ video: videoTrackConstraints })
+                .then((stream) => {
+                this.mediaStream = stream;
+                _video.srcObject = stream;
+                this.updateSize();
+                this.updatecanvasSize();
+                _video.play();
+                _video.onplay = () => {
+                    this.setActiveCamera(stream);
+                    this.drawRectangle();
+                };
+            })
+                .catch((err) => {
+                console.log(err);
+                this.initError.next({
+                    message: err.message,
+                    mediaStreamError: err,
+                });
+            });
+        }
+        else {
+            this.initError.next({
+                message: 'Cannot read UserMedia from MediaDevices.',
+            });
+        }
+    }
+    get isMobile() {
+        return this.platform.ANDROID || this.platform.IOS;
+    }
+    get cardRectangle() {
+        const _canvas = this.canvas.nativeElement;
+        const docSize = this.type === 'selfie' ? 1 : 86 / 55;
+        let padding = 10;
+        let rWidth = _canvas.width - 2 * padding;
+        let rHeight = rWidth / docSize;
+        let top = (_canvas.height - rHeight) / 2;
+        if (!this.isMobile) {
+            padding = 40;
+            rHeight = _canvas.height - 2 * padding;
+            rWidth = rHeight * docSize;
+            top = (_canvas.height - rHeight) / 2;
+            padding = (_canvas.width - rWidth) / 2;
+        }
+        return { padding, top, rWidth, rHeight };
+    }
+    get snapRectangle() {
+        const _canvas = this.canvas.nativeElement;
+        const ar = this.videoSize.width / _canvas.width;
+        let { padding, top, rWidth, rHeight } = this.cardRectangle;
+        padding = padding * ar;
+        top = top * ar;
+        rWidth = rWidth * ar;
+        rHeight = rHeight * ar;
+        return { padding, top, rWidth, rHeight };
+    }
+    setActiveCamera(stream) {
+        this.videoReady.next(false);
+        this.showVideo = false;
+        this.activeVideoSettings = stream.getVideoTracks()[0].getSettings();
+        const activeDeviceId = WebcamComponent.getDeviceIdFromMediaStreamTrack(stream.getVideoTracks()[0]);
+        const videoTrack = stream.getTracks()[0];
+        this.trackSettings = videoTrack.getSettings();
+        this.cameraProvider.cameraWasSwitched(activeDeviceId);
+        this.cameraSwitched.next(activeDeviceId);
+        setTimeout(() => {
+            this.zone.run(() => {
+                this.resizeStage();
+                this.showVideo = true;
+                this.videoReady.next(true);
+                if (MediaStreamTrackProcessor) {
+                    this.trackProcessor = new MediaStreamTrackProcessor(videoTrack);
+                    let frameStream = this.trackProcessor.readable;
+                    if (!this.shutdown) {
+                        this.worker?.postMessage({
+                            type: 'start',
+                            frameStream: frameStream,
+                            trackSettings: this.trackSettings,
+                        }, [frameStream]);
+                    }
+                }
+            });
+        }, 500);
+    }
+    getActiveVideoTrack() {
+        return this.mediaStream ? this.mediaStream.getVideoTracks()[0] : null;
+    }
+    isMirrorImage() {
+        if (!this.getActiveVideoTrack()) {
+            return false;
+        }
+        // check for explicit mirror override parameter
+        {
+            let mirror = 'auto';
+            if (this.mirrorImage) {
+                if (typeof this.mirrorImage === 'string') {
+                    mirror = String(this.mirrorImage).toLowerCase();
+                }
+                else {
+                    // WebcamMirrorProperties
+                    if (this.mirrorImage.x) {
+                        mirror = this.mirrorImage.x.toLowerCase();
+                    }
+                }
+            }
+            switch (mirror) {
+                case 'always':
+                    return true;
+                case 'never':
+                    return false;
+            }
+        }
+        // default: enable mirroring if webcam is user facing
+        return WebcamComponent.isUserFacing(this.getActiveVideoTrack());
+    }
+    /**
+     * Stops all active media tracks.
+     * This prevents the webcam from being indicated as active,
+     * even if it is no longer used by this component.
+     */
+    stopMediaTracks() {
+        // this.video.nativeElement.pause();
+        if (this.video.nativeElement.srcObject) {
+            this.video.nativeElement.srcObject
+                .getTracks()
+                .forEach((track) => {
+                track.stop();
+            });
+            this.video.nativeElement.srcObject = null;
+            this.video.nativeElement.src = '';
+        }
+        if (this.mediaStream && this.mediaStream.getTracks) {
+            // getTracks() returns all media tracks (video+audio)
+            this.mediaStream
+                .getTracks()
+                .forEach((track) => track.stop());
+        }
+    }
+    /**
+     * Unsubscribe from all open subscriptions
+     */
+    unsubscribeFromSubscriptions() {
+        if (this.triggerSubscription) {
+            this.triggerSubscription.unsubscribe();
+        }
+        if (this.switchCameraSubscription) {
+            this.switchCameraSubscription.unsubscribe();
+        }
+    }
+    /**
+     * Reads available input devices
+     */
+    detectAvailableDevices() {
+        return new Promise((resolve, reject) => {
+            WebcamUtil.getAvailableVideoInputs().subscribe((devices) => {
+                this.availableVideoInputs = devices;
+                resolve(devices);
+            }, (err) => {
+                this.availableVideoInputs = [];
+                reject(err);
+            });
+        });
+    }
+}
+WebcamComponent.DEFAULT_VIDEO_OPTIONS = {
+    facingMode: 'environment',
+};
+WebcamComponent.DEFAULT_IMAGE_TYPE = 'image/jpeg';
+WebcamComponent.DEFAULT_IMAGE_QUALITY = 1;
+WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WebcamComponent, deps: [{ token: i1.BreakpointObserver }, { token: i2.Platform }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: NgxScandocCameraProvider }], target: i0.ɵɵFactoryTarget.Component });
+WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WebcamComponent, selector: "app-webcam", inputs: { imageHandler: "imageHandler", id: "id", type: "type", width: "width", height: "height", videoOptions: "videoOptions", allowCameraSwitch: "allowCameraSwitch", mirrorImage: "mirrorImage", captureImageData: "captureImageData", imageType: "imageType", imageQuality: "imageQuality", trigger: "trigger", switchCamera: "switchCamera" }, outputs: { imageCapture: "imageCapture", initError: "initError", imageClick: "imageClick", cameraSwitched: "cameraSwitched", videoReady: "videoReady", destroyed: "destroyed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true, static: true }, { propertyName: "videoStreamer", first: true, predicate: ["videoStreamer"], descendants: true, static: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, static: true }, { propertyName: "canvasSnapshot", first: true, predicate: ["canvasSnapshot"], descendants: true, static: true }, { propertyName: "canvasResize", first: true, predicate: ["canvasResize"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"webcam-wrapper\">\n  <div>\n    <video\n      #video\n      autoplay\n      muted\n      style=\"display: block\"\n      playsinline\n\n    ></video>\n\n    <div class=\"rectangle\">\n\n      <canvas\n        #canvas\n        [ngStyle]=\"{ visibility: showVideo ? 'visible' : 'hidden' }\"\n        [width]=\"canvasSize.width\"\n        [height]=\"canvasSize.height\"\n      ></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex:1;transform:transale3d(0,0,0);background-color:#000}.webcam-wrapper{display:flex;flex-direction:row;align-items:center;flex:1;justify-content:center}.webcam-wrapper canvas{transform:transale3d(0,0,0);display:block;position:relative;z-index:20;left:0;top:0}.webcam-wrapper .rectangle{position:absolute;left:0;top:0;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WebcamComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-webcam', template: "<div class=\"webcam-wrapper\">\n  <div>\n    <video\n      #video\n      autoplay\n      muted\n      style=\"display: block\"\n      playsinline\n\n    ></video>\n\n    <div class=\"rectangle\">\n\n      <canvas\n        #canvas\n        [ngStyle]=\"{ visibility: showVideo ? 'visible' : 'hidden' }\"\n        [width]=\"canvasSize.width\"\n        [height]=\"canvasSize.height\"\n      ></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex:1;transform:transale3d(0,0,0);background-color:#000}.webcam-wrapper{display:flex;flex-direction:row;align-items:center;flex:1;justify-content:center}.webcam-wrapper canvas{transform:transale3d(0,0,0);display:block;position:relative;z-index:20;left:0;top:0}.webcam-wrapper .rectangle{position:absolute;left:0;top:0;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }, { type: i2.Platform }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: NgxScandocCameraProvider }]; }, propDecorators: { imageHandler: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], videoOptions: [{
+                type: Input
+            }], allowCameraSwitch: [{
+                type: Input
+            }], mirrorImage: [{
+                type: Input
+            }], captureImageData: [{
+                type: Input
+            }], imageType: [{
+                type: Input
+            }], imageQuality: [{
+                type: Input
+            }], imageCapture: [{
+                type: Output
+            }], initError: [{
+                type: Output
+            }], imageClick: [{
+                type: Output
+            }], cameraSwitched: [{
+                type: Output
+            }], videoReady: [{
+                type: Output
+            }], destroyed: [{
+                type: Output
+            }], video: [{
+                type: ViewChild,
+                args: ['video', { static: true }]
+            }], videoStreamer: [{
+                type: ViewChild,
+                args: ['videoStreamer', { static: true }]
+            }], canvas: [{
+                type: ViewChild,
+                args: ['canvas', { static: true }]
+            }], canvasSnapshot: [{
+                type: ViewChild,
+                args: ['canvasSnapshot', { static: true }]
+            }], canvasResize: [{
+                type: ViewChild,
+                args: ['canvasResize', { static: true }]
+            }], trigger: [{
+                type: Input
+            }], switchCamera: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+const COMPONENTS = [
+    WebcamComponent
+];
+class WebcamModule {
+}
+WebcamModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WebcamModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WebcamModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: WebcamModule, declarations: [WebcamComponent], imports: [CommonModule, PlatformModule], exports: [WebcamComponent] });
+WebcamModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WebcamModule, imports: [CommonModule, PlatformModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WebcamModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PlatformModule],
+                    declarations: [COMPONENTS],
+                    exports: [COMPONENTS],
+                }]
+        }] });
+
+class ScanProvider {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.enableVerification = true;
+        this.canStoreImages = true;
+    }
+    genderList() {
+        return {
+            M: 'MALE',
+            'M/M': 'MALE',
+            F: 'FEMALE',
+            'F/F': 'FEMALE',
+        };
+    }
+    stateless(DocumentFaceImage, LiveFaceImage) {
+        const data = {
+            AcceptTermsAndConditions: true,
+            DataFields: {
+                DocumentFaceImageType: 'base64',
+                DocumentFaceImage,
+                LiveFaceImageType: 'base64',
+                LiveFaceImage,
+            },
+        };
+        const $request = this.http.post(this.config.stateLessPath, data);
+        return $request;
+    }
+    sendLog(data) {
+        const { TransactionID } = data.Response;
+        const $request = this.http.post(this.config.errorLoggingPath, data, {
+            headers: new HttpHeaders({
+                TransactionID,
+            }),
+        });
+        return $request;
+    }
+    burst(Images) {
+        const data = {
+            AcceptTermsAndConditions: true,
+            DataFields: {
+                Images,
+            },
+        };
+        const $request = this.http.post(this.config.validationPath, data);
+        return $request;
+    }
+    countries() {
+        return this.http.get('/assets/data/countries.json').pipe(map((data) => {
+            return data.data.map((c) => {
+                return { label: c.short.en, value: c.cca2 };
+            });
+        }));
+    }
+    countryList() {
+        return {
+            AFG: 'AF',
+            ALB: 'AL',
+            DZA: 'DZ',
+            ASM: 'AS',
+            AND: 'AD',
+            AGO: 'AO',
+            AIA: 'AI',
+            ATG: 'AG',
+            ARG: 'AR',
+            ARM: 'AM',
+            ABW: 'AW',
+            AUS: 'AU',
+            AUT: 'AT',
+            AZE: 'AZ',
+            BHS: 'BS',
+            BHR: 'BH',
+            BGD: 'BD',
+            BRB: 'BB',
+            BLR: 'BY',
+            BEL: 'BE',
+            BLZ: 'BZ',
+            BEN: 'BJ',
+            BMU: 'BM',
+            BTN: 'BT',
+            BOL: 'BO',
+            BIH: 'BA',
+            BWA: 'BW',
+            BRA: 'BR',
+            VGB: 'VG',
+            BRN: 'BN',
+            BGR: 'BG',
+            BFA: 'BF',
+            BDI: 'BI',
+            KHM: 'KH',
+            CMR: 'CM',
+            CAN: 'CA',
+            CPV: 'CV',
+            CAF: 'CF',
+            TCD: 'TD',
+            CHL: 'CL',
+            CHN: 'CN',
+            HKG: 'HK',
+            MAC: 'MO',
+            COL: 'CO',
+            COM: 'KM',
+            COG: 'CG',
+            CRI: 'CR',
+            CIV: 'CI',
+            HRV: 'HR',
+            CUB: 'CU',
+            CYP: 'CY',
+            CZE: 'CZ',
+            DNK: 'DK',
+            DJI: 'DJ',
+            DMA: 'DM',
+            DOM: 'DO',
+            ECU: 'EC',
+            EGY: 'EG',
+            SLV: 'SV',
+            GNQ: 'GQ',
+            ERI: 'ER',
+            EST: 'EE',
+            ETH: 'ET',
+            FRO: 'FO',
+            FJI: 'FJ',
+            FIN: 'FI',
+            FRA: 'FR',
+            GUF: 'GF',
+            PYF: 'PF',
+            GAB: 'GA',
+            GMB: 'GM',
+            GEO: 'GE',
+            DEU: 'DE',
+            GHA: 'GH',
+            GRC: 'GR',
+            GRL: 'GL',
+            GRD: 'GD',
+            GLP: 'GP',
+            GUM: 'GU',
+            GTM: 'GT',
+            GNB: 'GW',
+            HTI: 'HT',
+            HND: 'HN',
+            ISL: 'IS',
+            IDN: 'ID',
+            IRQ: 'IQ',
+            ITA: 'IT',
+            JPN: 'JP',
+            JOR: 'JO',
+            KAZ: 'KZ',
+            KEN: 'KE',
+            KIR: 'KI',
+            PRK: 'KP',
+            KOR: 'KR',
+            KWT: 'KW',
+            KGZ: 'KG',
+            LAO: 'LA',
+            LVA: 'LV',
+            LBN: 'LB',
+            LSO: 'LS',
+            LBR: 'LR',
+            LBY: 'LY',
+            LIE: 'LI',
+            LTU: 'LT',
+            LUX: 'LU',
+            MDG: 'MG',
+            MWI: 'MW',
+            MYS: 'MY',
+            MDV: 'MV',
+            MLI: 'ML',
+            MLT: 'MT',
+            MHL: 'MH',
+            MTQ: 'MQ',
+            MRT: 'MR',
+            MUS: 'MU',
+            MEX: 'MX',
+            FSM: 'FM',
+            MDA: 'MD',
+            MCO: 'MC',
+            MNG: 'MN',
+            MNE: 'ME',
+            MSR: 'MS',
+            MAR: 'MA',
+            MOZ: 'MZ',
+            MMR: 'MM',
+            NAM: 'NA',
+            NRU: 'NR',
+            NPL: 'NP',
+            NLD: 'NL',
+            ANT: 'AN',
+            NCL: 'NC',
+            NZL: 'NZ',
+            NIC: 'NI',
+            NER: 'NE',
+            NGA: 'NG',
+            MNP: 'MP',
+            NOR: 'NO',
+            OMN: 'OM',
+            PAK: 'PK',
+            PLW: 'PW',
+            PSE: 'PS',
+            PAN: 'PA',
+            PNG: 'PG',
+            PRY: 'PY',
+            PER: 'PE',
+            PHL: 'PH',
+            PCN: 'PN',
+            POL: 'PL',
+            PRT: 'PT',
+            PRI: 'PR',
+            QAT: 'QA',
+            REU: 'RE',
+            ROU: 'RO',
+            RUS: 'RU',
+            RWA: 'RW',
+            KNA: 'KN',
+            LCA: 'LC',
+            VCT: 'VC',
+            WSM: 'WS',
+            SMR: 'SM',
+            STP: 'ST',
+            SAU: 'SA',
+            SEN: 'SN',
+            SRB: 'RS',
+            SYC: 'SC',
+            SLE: 'SL',
+            SGP: 'SG',
+            SVK: 'SK',
+            SVN: 'SI',
+            SLB: 'SB',
+            SOM: 'SO',
+            ZAF: 'ZA',
+            ESP: 'ES',
+            LKA: 'LK',
+            SDN: 'SD',
+            SUR: 'SR',
+            SWZ: 'SZ',
+            SWE: 'SE',
+            CHE: 'CH',
+            SYR: 'SY',
+            TJK: 'TJ',
+            TZA: 'TZ',
+            THA: 'TH',
+            TLS: 'TL',
+            TGO: 'TG',
+            TON: 'TO',
+            TTO: 'TT',
+            TUN: 'TN',
+            TUR: 'TR',
+            TKM: 'TM',
+            TUV: 'TV',
+            UGA: 'UG',
+            UKR: 'UA',
+            ARE: 'AE',
+            GBR: 'GB',
+            USA: 'US',
+            URY: 'UY',
+            UZB: 'UZ',
+            VUT: 'VU',
+            VEN: 'VE',
+            VNM: 'VN',
+            VIR: 'VI',
+            YEM: 'YE',
+            ZMB: 'ZM',
+            ZWE: 'ZW',
+        };
+    }
+    get fields() {
+        return [
+            {
+                key: 'Birth Date',
+                form: 'birthDate',
+                type: 'date',
+                main: false,
+                blastKey: 'BirthDate',
+            },
+            {
+                key: 'Given Name',
+                form: 'firstName',
+                ucFirst: true,
+                type: 'string',
+                main: true,
+                blastKey: 'Name',
+            },
+            {
+                key: 'Surname',
+                form: 'lastName',
+                ucFirst: true,
+                type: 'string',
+                main: true,
+                blastKey: 'Surname',
+            },
+            {
+                key: 'Sex',
+                form: 'gender',
+                type: 'gender',
+                main: false,
+                blastKey: 'Gender',
+            },
+            {
+                key: 'Document Class Name',
+                type: 'string',
+                form: 'documentType',
+                main: false,
+                blastKey: 'docType',
+            },
+            {
+                key: 'Document Number',
+                type: 'string',
+                form: 'documentNumber',
+                main: false,
+                blastKey: 'DocumentNumber',
+            },
+            {
+                key: 'Issuing State Code',
+                type: 'country',
+                form: 'issueStateCode',
+                blastKey: 'CountryOfIssue',
+                main: false,
+            },
+            {
+                key: 'Expiration Date',
+                type: 'date',
+                form: 'expirationDate',
+                blastKey: 'ExpiryDate',
+                main: false,
+            },
+            {
+                key: 'Issue Date',
+                type: 'date',
+                form: 'issueDate',
+                blastKey: 'IssuedDate',
+                main: false,
+            },
+            {
+                key: 'Birth Place',
+                type: 'string',
+                form: 'birthPlace',
+                blastKey: 'PlaceOfBirth',
+                main: false,
+            },
+            {
+                key: 'Issuing Authority',
+                type: 'string',
+                form: 'issuingPlace',
+                blastKey: 'IssuingAuthority',
+                main: false,
+            },
+            {
+                key: 'Nationality Code',
+                type: 'country',
+                form: 'nationality',
+                main: false,
+                blastKey: 'Nationality',
+            },
+            {
+                key: 'street1',
+                type: 'string',
+                form: 'street1',
+                main: false,
+                blastKey: 'AddressStreet',
+            },
+            {
+                key: 'city',
+                type: 'string',
+                form: 'city',
+                main: false,
+                blastKey: 'AddressCity',
+            },
+            {
+                key: 'country',
+                type: 'country',
+                form: 'country',
+                main: false,
+                blastKey: 'Country',
+            },
+            {
+                key: 'zip',
+                type: 'string',
+                form: 'zip',
+                main: false,
+                blastKey: 'AddressZip',
+            },
+        ];
+    }
+    parseBlast(results) {
+        const countries = this.countryList();
+        const genders = this.genderList();
+        const data = this.fields;
+        const validatedAddressFields = [
+            'AddressCity',
+            'AddressZip',
+            'AddressCounty',
+            'AddressStreet',
+        ].filter((key) => results[key].Validated);
+        // if no address is validated
+        if (validatedAddressFields.length === 0) {
+            if (results.Address.Validated) {
+                results.AddressStreet = results.Address;
+            }
+        }
+        const out = data.map((itm) => {
+            const res = results[itm.blastKey];
+            if (res) {
+                const value = res.RecommendedValue || '';
+                switch (itm.type) {
+                    case 'string':
+                        itm.value = value;
+                        if (itm.ucFirst) {
+                            const name = value.toLowerCase();
+                            itm.value = name.charAt(0).toUpperCase() + name.slice(1);
+                        }
+                        break;
+                    case 'date':
+                        itm.value = value ? moment(value, 'DD.MM.YYYY').toDate() : null;
+                        // if (value.indexOf('/Date') >= 0) {
+                        //   console.log(value);
+                        //   const timestamp = value.replace(/\D/gm, '');
+                        //   //itm.value = moment.unix(timestamp / 1000).toDate();
+                        //   itm.value = moment(
+                        //     timestamp - moment(timestamp, 'x').utcOffset() * 60 * 1000,
+                        //     'x',
+                        //   ).toDate();
+                        // }
+                        break;
+                    case 'country':
+                        itm.value = countries[value] || null;
+                        break;
+                    case 'gender':
+                        itm.value = genders[value] || null;
+                }
+            }
+            return itm;
+        });
+        const model = {};
+        out.forEach((element) => {
+            console.log(element);
+            model[element.form] = element.value;
+        });
+        model.documentType = results.Metadata.DocumentType;
+        console.log(model);
+        return {
+            fields: out,
+            model,
+        };
+    }
+    blastPost(data) {
+        // const $request = this.api.http.get('/assets/json/blastscan.json');
+        const $request = this.http.post(this.config.extractionPath, data);
+        return $request.pipe(map((m) => {
+            if (m.Metadata && m.Metadata.length > 0) {
+                const metadata = m.Metadata[0];
+                m.Data.Country = {
+                    RecommendedValue: metadata.Country,
+                };
+                m.Data.Metadata = metadata;
+            }
+            return m;
+        }));
+    }
+    blobToDataUrl(file) {
+        return Observable.create((obs) => {
+            const reader = new FileReader();
+            reader.onerror = (err) => obs.error(err);
+            reader.onabort = (err) => obs.error(err);
+            reader.onload = () => {
+                obs.next(reader.result);
+            };
+            reader.onloadend = () => obs.complete();
+            return reader.readAsDataURL(file);
+        });
+    }
+}
+ScanProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProvider, deps: [{ token: i1$1.HttpClient }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Injectable });
+ScanProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }]; } });
+
+class LayoutProvider {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.isMobile = false;
+        this.breakpoint$ = this.breakpointObserver
+            .observe(['(min-width: 768px)'])
+            .pipe(tap$1((value) => console.log(value)), distinctUntilChanged());
+    }
+    init() {
+        this.breakpoint$.subscribe((v) => {
+            this.isMobile = !v.matches;
+            document.body.className = this.isMobile ? 'mobile' : 'desktop';
+        });
+    }
+}
+LayoutProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutProvider, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+LayoutProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
+
+class AuthProvider {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJDbGllbnQiOiJQcm90ZWwiLCJTdWJDbGllbnQiOiJIMSIsIklzc3VlVGltZSI6IjA5LjAzLjIwMjIsIDA5OjQ3OjAwIn0.u_FP16TGuZ4LtGbsIxBjy8vCJJuTyBbRs2gPPZU2vgaeSvLdfi1iEVcRjRVh873hkluOtotUGmw0v3Jdh-cHgQ';
+        this.tokenTimestamps = {
+            exp: 0,
+            iat: 0,
+        };
+    }
+    setConfig() { }
+    get tokenExpired() {
+        return false;
+        if (this.token == '' || this.tokenTimestamps.exp === 0) {
+            console.log('EXPIRED');
+            return true;
+        }
+        const { iat, exp } = this.tokenTimestamps;
+        return iat + 20 > exp;
+    }
+    resetToken() {
+        this.token = '';
+    }
+    get accesToken() {
+        return this.tokenExpired ? this.getToken() : of(this.token);
+    }
+    getToken() {
+        return this.http
+            .post(this.config.path, {
+            clientId: this.config.clientId,
+            token: this.config.tokenName,
+        })
+            .pipe(map((data) => data.accessToken), tap((token) => {
+            this.token = token;
+            const decoded = jwt_decode(this.token);
+            const { iat, exp } = decoded;
+            this.tokenTimestamps = { iat, exp };
+        }));
+    }
+}
+AuthProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthProvider, deps: [{ token: i1$1.HttpClient }, { token: 'configAuth' }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AuthProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['configAuth']
+                }] }]; } });
+
+class TranslationProvider {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    forms(item, namespace = null) {
+        if (item.fieldGroup) {
+            item.fieldGroup = item.fieldGroup.map((field) => this.forms(field));
+        }
+        const prefix = namespace ? namespace + '.' : '';
+        if (item.templateOptions &&
+            (item.templateOptions.label ||
+                item.templateOptions.placeholder ||
+                item.templateOptions.options)) {
+            if (!item.expressionProperties) {
+                item.expressionProperties = {};
+            }
+            if (item.templateOptions.label) {
+                item.expressionProperties['templateOptions.label'] =
+                    this.translate.stream(prefix + item.templateOptions.label);
+            }
+            if (item.templateOptions.placeholder) {
+                item.expressionProperties['templateOptions.placeholder'] =
+                    this.translate.stream(prefix + item.templateOptions.placeholder);
+            }
+            if (Array.isArray(item.templateOptions.options)) {
+                item.expressionProperties['templateOptions.options'] =
+                    item.templateOptions.options.map((m) => {
+                        // console.log(m);
+                        if (m.label) {
+                            m.label = this.translate.instant(prefix + m.label);
+                        }
+                        return m;
+                    });
+            }
+        }
+        return item;
+    }
+}
+TranslationProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationProvider, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+TranslationProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
+
+class ScanFieldsProvider {
+    constructor(translate, provider) {
+        this.translate = translate;
+        this.provider = provider;
+    }
+    update() {
+        return [
+            {
+                fieldGroupClassName: 'px-16',
+                fieldGroup: [
+                    {
+                        wrappers: [],
+                        type: 'checkbox',
+                        key: 'profile',
+                        class: 'checkbox ',
+                        defaultValue: true,
+                        templateOptions: {
+                            label: 'form.scan.document.update.profile',
+                        },
+                    },
+                    {
+                        wrappers: [],
+                        type: 'checkbox',
+                        class: 'checkbox ',
+                        key: 'document',
+                        defaultValue: true,
+                        templateOptions: {
+                            label: 'form.scan.document.update.document',
+                        },
+                    },
+                    {
+                        wrappers: [],
+                        type: 'checkbox',
+                        class: 'checkbox ',
+                        key: 'attachment',
+                        defaultValue: true,
+                        templateOptions: {
+                            label: 'form.scan.document.update.attachment',
+                        },
+                    },
+                ].map((item) => this.translate.forms(item)),
+            },
+        ];
+    }
+    document() {
+        return [
+            {
+                className: 'w-200-p',
+                fieldGroupClassName: 'form-flex-row border-card profile-details',
+                fieldGroup: [
+                    {
+                        className: 'card-group',
+                        fieldGroupClassName: 'wraper',
+                        fieldGroup: [
+                            {
+                                type: 'title',
+                                templateOptions: {
+                                    label: 'form.scan.document.guestDetailsTitle',
+                                },
+                            },
+                            // {
+                            //   type: 'profile-image',
+                            //   key: '_avatar',
+                            //   templateOptions: {
+                            //     label: 'form.scan.document.firstName',
+                            //   },
+                            // },
+                            {
+                                type: 'input',
+                                key: 'firstName',
+                                className: 'small',
+                                templateOptions: {
+                                    label: 'form.scan.document.firstName',
+                                    required: true,
+                                },
+                            },
+                            {
+                                type: 'input',
+                                key: 'lastName',
+                                className: 'small',
+                                templateOptions: {
+                                    label: 'form.scan.document.lastName',
+                                    required: true,
+                                },
+                            },
+                            {
+                                className: 'small',
+                                key: 'secondName',
+                                type: 'input',
+                                templateOptions: {
+                                    color: 'accent',
+                                    label: 'form.scan.document.secondLastName',
+                                },
+                                hideExpression: 'model.hideSecondLastName',
+                            },
+                            {
+                                type: 'input',
+                                key: 'middleName',
+                                className: 'small',
+                                templateOptions: {
+                                    label: 'form.scan.document.middleName',
+                                },
+                            },
+                            {
+                                className: '',
+                                fieldGroupClassName: 'form-flex-row space-between',
+                                fieldGroup: [
+                                    {
+                                        type: 'datepicker',
+                                        key: 'birthDate',
+                                        className: 'w-100-p small mr-8',
+                                        templateOptions: {
+                                            label: 'form.scan.document.birthDate',
+                                        },
+                                    },
+                                    {
+                                        type: 'select',
+                                        key: 'gender',
+                                        className: 'w-100-p small ml-8',
+                                        templateOptions: {
+                                            label: 'form.scan.document.gender',
+                                            options: [
+                                                { value: 'MALE', label: 'MALE' },
+                                                { value: 'FEMALE', label: 'FEMALE' },
+                                                { value: 'NA', label: 'N/A' },
+                                            ],
+                                        },
+                                    },
+                                ],
+                            },
+                            {
+                                type: 'input',
+                                key: 'birthPlace',
+                                className: 'small',
+                                templateOptions: {
+                                    label: 'form.scan.document.birthPlace',
+                                },
+                            },
+                            {
+                                type: 'select',
+                                key: 'birthCountry',
+                                className: 'small',
+                                templateOptions: {
+                                    label: 'form.scan.document.birthCountry',
+                                    options: this.provider.countries(),
+                                },
+                            },
+                            {
+                                className: 'small',
+                                key: 'nationality',
+                                type: 'select',
+                                templateOptions: {
+                                    label: 'form.scan.document.nationality',
+                                    //   appearance: 'outline',
+                                    //  options: this.profileProvider.nationalities(),
+                                    options: this.provider.countries(),
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        className: 'card-group',
+                        fieldGroupClassName: 'wraper',
+                        fieldGroup: [
+                            {
+                                type: 'title',
+                                templateOptions: {
+                                    label: 'form.scan.document.documentTitle',
+                                },
+                            },
+                            {
+                                type: 'select',
+                                key: 'documentType',
+                                templateOptions: {
+                                    label: 'form.scan.document.documentType',
+                                    options: [
+                                        { value: 'ID', label: 'Identity Document' },
+                                        { value: 'PASS', label: 'Passport' },
+                                        { value: 'DL', label: 'Driver Licence' },
+                                    ],
+                                    //  valueProp: 'id',
+                                    //  labelProp: 'value',
+                                    required: true,
+                                },
+                            },
+                            {
+                                type: 'input',
+                                key: 'documentNumber',
+                                templateOptions: {
+                                    label: 'form.scan.document.documentNumber',
+                                    required: true,
+                                },
+                            },
+                            {
+                                className: '',
+                                fieldGroupClassName: 'form-flex-row space-between',
+                                fieldGroup: [
+                                    {
+                                        type: 'datepicker',
+                                        key: 'issueDate',
+                                        className: 'small mr-8',
+                                        templateOptions: {
+                                            label: 'form.scan.document.issueDate',
+                                        },
+                                    },
+                                    {
+                                        type: 'datepicker',
+                                        key: 'expirationDate',
+                                        className: 'small ml-8',
+                                        templateOptions: {
+                                            label: 'form.scan.document.expirationDate',
+                                        },
+                                    },
+                                ],
+                            },
+                            {
+                                type: 'select',
+                                key: 'issueStateCode',
+                                templateOptions: {
+                                    label: 'form.scan.document.issuingStateCode',
+                                    options: this.provider.countries(),
+                                },
+                            },
+                            {
+                                type: 'input',
+                                key: 'issuingPlace',
+                                templateOptions: {
+                                    label: 'form.scan.document.issuingPlace',
+                                    required: false,
+                                },
+                            },
+                            {
+                                className: '',
+                                fieldGroupClassName: 'form-flex-row space-between',
+                                fieldGroup: [
+                                    {
+                                        type: 'title',
+                                        templateOptions: {
+                                            label: 'form.scan.document.addressTitle',
+                                            badge: 'communications',
+                                        },
+                                    },
+                                ].map((item) => this.translate.forms(item)),
+                            },
+                            // {
+                            //   className: 'small',
+                            //   key: 'typeID',
+                            //   type: 'select',
+                            //   templateOptions: {
+                            //     label: 'form.profile.address.type',
+                            //     required: true,
+                            //     //  options: this.profileProvider.addressTypes(),
+                            //     expressionProperties: {
+                            //       'templateOptions.disabled': (model: any) =>
+                            //         model.newAddress,
+                            //     },
+                            //     onClearValue: (field: FormlyFieldConfig) => {
+                            //       field.formControl?.setValue('');
+                            //       field.model.typeID = 0;
+                            //     },
+                            //     onSetNewValue: (field: FormlyFieldConfig, optObj: any) => {
+                            //       field.formControl?.setValue(optObj.value);
+                            //       field.model.typeID = optObj.value;
+                            //     },
+                            //   },
+                            //   expressionProperties: {
+                            //     'templateOptions.disabled': (model: any) => !model.newAddress,
+                            //   },
+                            // },
+                            {
+                                className: 'small',
+                                key: 'country',
+                                type: 'select',
+                                templateOptions: {
+                                    required: true,
+                                    label: 'form.profile.address.country',
+                                    options: this.provider.countries(),
+                                },
+                                // expressionProperties: {
+                                //   'templateOptions.disabled': (model: any) => !model.newAddress,
+                                // },
+                                hooks: {
+                                    onInit: (model) => {
+                                        console.log(model);
+                                    },
+                                },
+                            },
+                            {
+                                className: '',
+                                fieldGroupClassName: 'form-flex-row space-between',
+                                fieldGroup: [
+                                    {
+                                        className: 'mr-8 w-100-p',
+                                        key: 'zip',
+                                        type: 'input',
+                                        templateOptions: {
+                                            label: 'form.profile.address.zip',
+                                            labelProp: (item) => {
+                                                return `${item.zip} (${item.city})`;
+                                            },
+                                            set: (field, option) => {
+                                                // console.log(option, field);
+                                                field.formControl.setValue(option.value.zip);
+                                                // set CITY
+                                                field.form.get('city').setValue(option.value.city);
+                                            },
+                                            filter: (key, field) => {
+                                                // return this.profileProvider.zipCodes({
+                                                //   countryCode: field.form.get('country').value,
+                                                //   zip: key,
+                                                // });
+                                            },
+                                        },
+                                        // expressionProperties: {
+                                        //   'templateOptions.disabled': (model: any) =>
+                                        //     !model.newAddress,
+                                        // },
+                                    },
+                                    {
+                                        className: 'small ml-8',
+                                        key: 'city',
+                                        type: 'input',
+                                        templateOptions: {
+                                            label: 'form.profile.address.city',
+                                        },
+                                        // expressionProperties: {
+                                        //   'templateOptions.disabled': (model: any) =>
+                                        //     !model.newAddress,
+                                        // },
+                                    },
+                                ].map((item) => this.translate.forms(item)),
+                            },
+                            // {
+                            //   className: 'small',
+                            //   key: 'state',
+                            //   type: 'input',
+                            //   templateOptions: {
+                            //     label: 'form.profile.address.state',
+                            //   },
+                            //   // expressionProperties: {
+                            //   //   'templateOptions.disabled': (model: any) => !model.newAddress,
+                            //   // },
+                            // },
+                            // {
+                            //   className: 'small',
+                            //   key: 'countryStateID',
+                            //   type: 'select',
+                            //   templateOptions: {
+                            //     label: 'form.profile.address.regionalStatistics',
+                            //     options: this.provider.countries(),
+                            //   },
+                            //   // expressionProperties: {
+                            //   //   'templateOptions.disabled': (model: any) => !model.newAddress,
+                            //   // },
+                            // },
+                            {
+                                className: 'small w-100-p',
+                                key: 'street1',
+                                type: 'input',
+                                templateOptions: {
+                                    label: 'form.profile.address.street',
+                                },
+                                // expressionProperties: {
+                                //   'templateOptions.disabled': (model: any) => !model.newAddress,
+                                // },
+                            },
+                        ],
+                    },
+                ],
+            },
+        ].map((item) => this.translate.forms(item));
+    }
+}
+ScanFieldsProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanFieldsProvider, deps: [{ token: TranslationProvider }, { token: ScanProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+ScanFieldsProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanFieldsProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanFieldsProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: TranslationProvider }, { type: ScanProvider }]; } });
+
+class ScanResultsComponent {
+    constructor(cameraProvider, formProvider) {
+        this.cameraProvider = cameraProvider;
+        this.formProvider = formProvider;
+        this.action = new EventEmitter();
+    }
     ngOnInit() {
+        this.fields = this.formProvider.document();
+    }
+    ngOnDestroy() { }
+    selfie() {
+        this.action.emit({ selfie: true });
     }
 }
-NgxScandocComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxScandocComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxScandocComponent, selector: "lib-ngx-scandoc", ngImport: i0, template: `
-    <p>
-      ngx-scandoc works!
-    </p>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocComponent, decorators: [{
+ScanResultsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanResultsComponent, deps: [{ token: NgxScandocCameraProvider }, { token: ScanFieldsProvider }], target: i0.ɵɵFactoryTarget.Component });
+ScanResultsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScanResultsComponent, selector: "ngx-scan-results", inputs: { model: "model", images: "images", form: "form" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"wraper\">\n  <div style=\"flex: 1\">\n    <mat-card style=\"margin: 4px; padding: 4px 16px\">\n      <h3>Avatar</h3>\n      <div class=\"selfieContainer\">\n        <div class=\"selfie\">\n          <img *ngIf=\"model?._avatar\" class=\"preview\" [src]=\"model._avatar\" />\n        </div>\n        <button (click)=\"selfie()\" mat-raised-button>Take selfie</button>\n      </div>\n    </mat-card>\n\n    <form\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      class=\"px-16 py-0 w-100-p\"\n      [formGroup]=\"form\"\n    >\n      <formly-form\n        ngClass.lt-md=\"mobile\"\n        fxFlex\n        [form]=\"form\"\n        [fields]=\"fields\"\n        [model]=\"model\"\n      >\n      </formly-form>\n    </form>\n  </div>\n  <div style=\"flex: 1\" class=\"pr-16 m-4\">\n    <mat-card style=\"margin: 4px; padding-top: 2px\" class=\"images\">\n      <h3>Images</h3>\n      <ng-container *ngFor=\"let img of images\">\n        <div fxLayout=\"column\">\n          <ng-container *ngIf=\"img.side === 0\">\n            <div class=\"title\">Front Side</div>\n          </ng-container>\n          <ng-container *ngIf=\"img.side === 1\">\n            <div class=\"title\">Back Side</div>\n          </ng-container>\n          <img\n            class=\"preview\"\n            style=\"max-width: 460px; border-radius: 1rem\"\n            [src]=\"img.data\"\n          />\n        </div>\n      </ng-container>\n    </mat-card>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;overflow:hidden}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px;width:100%}.wraper{padding:8px 8px 0 0;overflow:auto;flex:1;display:flex;flex-direction:row}mat-card{box-shadow:none!important}.selfieContainer{display:flex;flex-direction:row;align-items:center}.selfieContainer .selfie{width:150px}.selfieContainer .selfie .preview{width:120px;height:120px;border-radius:80px}.selfieContainer .button{box-shadow:none;border:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanResultsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ngx-scandoc', template: `
-    <p>
-      ngx-scandoc works!
-    </p>
-  ` }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'ngx-scan-results', template: "<div class=\"wraper\">\n  <div style=\"flex: 1\">\n    <mat-card style=\"margin: 4px; padding: 4px 16px\">\n      <h3>Avatar</h3>\n      <div class=\"selfieContainer\">\n        <div class=\"selfie\">\n          <img *ngIf=\"model?._avatar\" class=\"preview\" [src]=\"model._avatar\" />\n        </div>\n        <button (click)=\"selfie()\" mat-raised-button>Take selfie</button>\n      </div>\n    </mat-card>\n\n    <form\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      class=\"px-16 py-0 w-100-p\"\n      [formGroup]=\"form\"\n    >\n      <formly-form\n        ngClass.lt-md=\"mobile\"\n        fxFlex\n        [form]=\"form\"\n        [fields]=\"fields\"\n        [model]=\"model\"\n      >\n      </formly-form>\n    </form>\n  </div>\n  <div style=\"flex: 1\" class=\"pr-16 m-4\">\n    <mat-card style=\"margin: 4px; padding-top: 2px\" class=\"images\">\n      <h3>Images</h3>\n      <ng-container *ngFor=\"let img of images\">\n        <div fxLayout=\"column\">\n          <ng-container *ngIf=\"img.side === 0\">\n            <div class=\"title\">Front Side</div>\n          </ng-container>\n          <ng-container *ngIf=\"img.side === 1\">\n            <div class=\"title\">Back Side</div>\n          </ng-container>\n          <img\n            class=\"preview\"\n            style=\"max-width: 460px; border-radius: 1rem\"\n            [src]=\"img.data\"\n          />\n        </div>\n      </ng-container>\n    </mat-card>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;overflow:hidden}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px;width:100%}.wraper{padding:8px 8px 0 0;overflow:auto;flex:1;display:flex;flex-direction:row}mat-card{box-shadow:none!important}.selfieContainer{display:flex;flex-direction:row;align-items:center}.selfieContainer .selfie{width:150px}.selfieContainer .selfie .preview{width:120px;height:120px;border-radius:80px}.selfieContainer .button{box-shadow:none;border:1px solid rgba(0,0,0,.1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: NgxScandocCameraProvider }, { type: ScanFieldsProvider }]; }, propDecorators: { model: [{
+                type: Input
+            }], images: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }] } });
 
-class NgxScandocModule {
+class ScanComponent extends BaseComponent {
+    constructor(cd, zone, translate, cameraProvider, injector, layoutProvider, auth // private api: ServerProvider
+    ) {
+        super();
+        this.cd = cd;
+        this.zone = zone;
+        this.translate = translate;
+        this.cameraProvider = cameraProvider;
+        this.injector = injector;
+        this.layoutProvider = layoutProvider;
+        this.auth = auth;
+        this.scanBlastData = [
+            {
+                title: 'pms.dialogs.components.scanProfile.front',
+                description: 'pms.dialogs.components.scanProfile.frontDescription',
+                side: 'FRONT',
+            },
+            {
+                title: 'pms.dialogs.components.scanProfile.back',
+                description: 'pms.dialogs.components.scanProfile.backDescription',
+                disabled: true,
+                side: 'BACK',
+            },
+        ];
+        this.type = 'desktop';
+        this.actions = new EventEmitter();
+        this.mediaDevices = [];
+        this.videoOptions = {
+            width: 1920,
+            height: 1080,
+            facingMode: 'environment',
+        };
+        this.startTime = 0;
+        this.isDebug = false;
+        this.multipleWebcamsAvailable = false;
+        this.scanInProgress = false;
+        // webcam snapshot trigger
+        this.documentTypeSelected = false;
+        this.preview = null;
+        this.errorCode = '1000';
+        this.displayInfo = 'Position document inside rectange and hold steady.';
+        this.allowCameraSwitch = true;
+        this.verificationErrorSent = false;
+        this.error = false;
+        this.cameraReady = false;
+        this.scaning = false;
+        this.imageHandler = new Subject();
+        this.logData = {
+            AcceptTermsAndConditions: true,
+            Request: null,
+            Response: null,
+            ExpectedOutput: null,
+        };
+        this.scanDatas = [];
+        this.idScan = null;
+        this.validation = false;
+        this.scannedImages = [];
+        this.scanDelay = 0;
+        this.trigger = new Subject();
+        // switch to next / previous / specific webcam; true/false: forward/backwards, string: deviceId
+        this.nextWebcam = new Subject();
+        this.imageVerified = false;
+        this.form = new FormGroup({});
+        this.isMobile = false;
+        this.showDialog = false;
+        this.scanImageTimestamps = {
+            time: 0,
+            load: 0,
+        };
+        this.scanProvider = this.injector.get(ScanProvider);
+    }
+    get class() {
+        return this.isMobile;
+    }
+    onResize() {
+        if (this.wraper) {
+            this.width = this.wraper.nativeElement.clientWidth;
+            this.height = this.wraper.nativeElement.clientHeight;
+            setTimeout(() => {
+                const video = this.wraper?.nativeElement.querySelector('video');
+                if (video) {
+                    //   console.log(video.clientWidth, video.clientHeight);
+                    this.videoWidth = video.clientWidth;
+                    this.videoHeight = video.clientHeight;
+                }
+                this.cd.detectChanges();
+            }, 100);
+            this.cd.detectChanges();
+        }
+    }
+    test() {
+        this.dialogs.turnDocument('BACK');
+    }
+    resetLogData() {
+        this.logData = {
+            Request: null,
+            Response: null,
+            ExpectedOutput: null,
+            AcceptTermsAndConditions: true,
+        };
+    }
+    ngOnDestroy() {
+        if (this.scanTimeout) {
+            clearTimeout(this.scanTimeout);
+        }
+        if (this.imageHandlerSubscription) {
+            this.imageHandlerSubscription.unsubscribe();
+        }
+        console.log('DESTROXY');
+        this.__destroy();
+    }
+    init() {
+        this.auth.accesToken.subscribe();
+        this.resetLogData();
+        // this.result=true;
+        // this.result ={};
+        console.log('INIT SCAN');
+    }
+    cameraOff(ev) {
+        this.cameraReady = false;
+        this.cd.detectChanges();
+    }
+    continue() {
+        this.documentTypeSelected = false;
+        setTimeout(() => {
+            this.selectedSide.image = this.webcamImage;
+            if (this.selectedSide.side === 'FRONT') {
+                this.scanBlastData[1].disabled = false;
+            }
+            this.cd.detectChanges();
+        }, 200);
+    }
+    scan() {
+        // this.triggerSnapshot();
+        //   this.scanDatas[0] = true;
+        // if (this.scanTimeout) {
+        //   clearTimeout(this.scanTimeout);
+        // }
+        // this.scanTimeout = setTimeout(() => {
+        //   this.scan();
+        // }, 1);
+    }
+    handleImage(webcamImage) {
+        // console.log('[received webcam image]', webcamImage);
+        this.zone.runOutsideAngular(() => {
+            const time = new Date().getTime();
+            if (this.scanImageTimestamps.load > 0) {
+                const { load } = this.scanImageTimestamps;
+                const diff = time - load;
+                //   console.log('time:', diff);
+                this.scanDelay = diff;
+            }
+            this.scanImageTimestamps.load = time;
+            if (webcamImage.imageData) {
+                this.scannedImages.push(webcamImage);
+            }
+            this.cd.detectChanges();
+            if (this.scannedImages.length > 4 && !this.validation) {
+                console.timeEnd('scan');
+                console.time('scan');
+                // get last 10
+                console.log('CAPTURED:', this.scannedImages.length);
+                const images = this.scannedImages.slice(-5);
+                // set images to 0
+                this.scannedImages = [];
+                const imagesArray = images.map((m) => m.imageResized.split(',')[1]);
+                this.validation = true;
+                this.handleBurstData(imagesArray, images);
+            }
+            if (this.cameraReady) {
+                this.trigger.next(new Date().getTime());
+            }
+        });
+    }
+    handleBurstData(imagesArray, images, type = 'plain') {
+        this.__subs(this.scanProvider.burst(imagesArray)).subscribe((resp) => {
+            this.displayInfo = resp.Info;
+            console.timeEnd('validationPOST');
+            console.log('AnalysisTime', resp.AnalysisTime);
+            const { DocType, Series, Side, InfoCode } = resp;
+            // if (InfoCode === '1006' && this.idScan) {
+            //   this.handleLongValidationError(image);
+            // }
+            if (resp.Validated) {
+                console.log('[SCANNED INDEX]', resp.Index);
+                const selectedImage = images[resp.Index];
+                // this.preview = this.webcamImage.imageAsDataUrl;
+                this.cd.detectChanges();
+                let image = selectedImage;
+                if (type == 'worker') {
+                    const dataUrl = this.handleBitmapImage(selectedImage.bitmap);
+                    image = { dataUrl };
+                }
+                if (InfoCode === '1007') {
+                    // For ID ask for other side
+                    if (Side === 'FRONT') {
+                        this.scanBlastData[0].image = image;
+                    }
+                    else {
+                        this.scanBlastData[1].image = image;
+                    }
+                    if (this.scanBlastData[0].image && this.scanBlastData[1].image) {
+                        console.warn('UPLOAD');
+                        if (type == 'worker') {
+                            this.imageHandler.next({ type: 'stop' });
+                        }
+                        this.scanBlastFinish();
+                    }
+                    else {
+                        const num = Side === 'FRONT' ? 1 : 0;
+                        this.singleScan(this.scanBlastData[num]);
+                        this.scan();
+                        this.idScan = this.scanBlastData[num].side;
+                        if (!this.showDialog) {
+                            this.showDialog = true;
+                            this.zone.run(() => {
+                                this.dialogs.turnDocument(this.idScan).subscribe(() => {
+                                    this.showDialog = false;
+                                });
+                            });
+                            // this.actions.emit({
+                            //   type: 'turnDocumentOver',
+                            //   side: this.idScan,
+                            // });
+                        }
+                        console.log('ID SIDE', this.idScan);
+                        this.displayInfo = 'Please turn the document over!';
+                        this.validation = false;
+                    }
+                }
+                else {
+                    this.scanBlastData[0].image = image;
+                    console.warn('UPLOAD');
+                    if (type == 'worker') {
+                        this.imageHandler.next({ type: 'stop' });
+                    }
+                    this.scanBlastFinish();
+                }
+                this.scannedImages = [];
+                // this.scanBlastData[0].image = selectedImage;
+                //this.scanBlastFinish();
+            }
+            else {
+                this.validation = false;
+            }
+        });
+    }
+    handleInitError(error) {
+        console.log(error);
+    }
+    get scanBlastCanUpload() {
+        return this.scanBlastData[0].image ? true : false;
+    }
+    cameraWasSwitched(deviceId) {
+        console.log('[active device]', deviceId);
+        this.deviceId = deviceId;
+        this.cameraReady = true;
+        this.defaultDevice = deviceId;
+        setTimeout(() => {
+            this.onResize();
+            this.scan();
+        }, 300);
+    }
+    get nextWebcamObservable() {
+        return this.nextWebcam.asObservable();
+    }
+    handleLongValidationError(img) {
+        // save current image after 10sec
+        const diff = (Date.now() - this.startTime) / 1000;
+        if (diff > 15 && !this.verificationErrorSent) {
+            this.verificationErrorSent = true;
+            const dataUrl = this.handleBitmapImage(img.bitmap);
+            console.warn('SENT');
+            this.displayInfo = 'Cant detect document!';
+            this.logData.Request = this.__subs(this.scanProvider.sendLog({
+                AcceptTermsAndConditions: true,
+                ExpectedOutput: {},
+                Request: {
+                    verification: dataUrl.split(',')[1],
+                },
+                Response: {
+                    TransactionID: v4(),
+                },
+            })).subscribe();
+        }
+    }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+        this.autoScan();
+        this.__subs(this.layoutProvider.breakpoint$).subscribe((v) => {
+            this.isMobile = !v.matches;
+            console.log('MNOBILE', this.isMobile);
+        });
+        this.imageHandlerSubscription = this.imageHandler.subscribe((webcamImage) => {
+            // return;
+            if (this.startTime === 0) {
+                this.startTime = Date.now();
+            }
+            this.zone.runOutsideAngular(() => {
+                if (webcamImage.base64) {
+                    const time = new Date().getTime();
+                    if (this.scanImageTimestamps.load > 0) {
+                        const { load } = this.scanImageTimestamps;
+                        const diff = time - load;
+                        // console.warn('TIME', diff);
+                        this.scanDelay = diff;
+                    }
+                    this.scanImageTimestamps.load = time;
+                    this.scannedImages.push(webcamImage);
+                    this.handleLongValidationError(webcamImage);
+                }
+                // this.cd.detectChanges();
+                if (this.scannedImages.length > 4 && !this.validation) {
+                    // get last 10
+                    console.timeEnd('validationTOTAL_UI');
+                    console.time('validationTOTAL_UI');
+                    const images = this.scannedImages.slice(-5);
+                    // set images to 0
+                    this.scannedImages = [];
+                    console.log(images);
+                    const imagesArray = images.map((m) => m.base64.split(',')[1]);
+                    this.validation = true;
+                    this.handleBurstData(imagesArray, images, 'worker');
+                    console.time('validationPOST');
+                }
+                this.cd.detectChanges();
+            });
+        });
+    }
+    handleBitmapImage(bitmap) {
+        const { width, height } = bitmap;
+        const offscreenSmall = document.createElement('canvas');
+        offscreenSmall.width = width;
+        offscreenSmall.height = height;
+        const ctx = offscreenSmall.getContext('bitmaprenderer');
+        if (ctx) {
+            ctx.imageSmoothingEnabled = false;
+            ctx.transferFromImageBitmap(bitmap);
+            bitmap.close();
+            const data = ctx.canvas.toDataURL('image/jpeg');
+            return data;
+        }
+        return null;
+    }
+    autoScan() {
+        const side = this.scanBlastData[0];
+        this.idScan = null;
+        this.singleScan(side);
+    }
+    singleScan(side) {
+        this.scanType = side.side;
+        this.preview = null;
+        this.selectedSide = side;
+        this.selectedSide.image = null;
+        this.documentTypeSelected = true;
+        this.scanBlastData[1].disabled = false;
+        this.cd.detectChanges();
+        setTimeout(() => {
+            this.onResize();
+        }, 10);
+    }
+    getImgBase64(num) {
+        console.log('GET 64');
+        return this.scanBlastData[num].image.dataUrl.split(',')[1];
+    }
+    scanBlastFinish() {
+        console.time('upload');
+        if (this.type === 'mobile') {
+            this.actions.emit({ data: this.scanBlastData });
+            this.retake();
+            return;
+        }
+        this.idScan = null;
+        // const loading = this.dialogs.loading();
+        this.scaning = true;
+        this.cd.detectChanges();
+        console.time('payload');
+        const payload = {
+            AcceptTermsAndConditions: true,
+            DataFields: {
+                FrontImageType: 'base64',
+                FrontImageCropped: false,
+                BackImageType: 'base64',
+                BackImageCropped: false,
+                FrontImage: this.getImgBase64(0),
+                BackImage: this.scanBlastData[1].image ? this.getImgBase64(1) : null,
+            },
+            Settings: {
+                ShouldValidate: true,
+                ShouldReturnDocumentImage: true,
+                ShouldReturnFaceIfDetected: true,
+                SkipImageSizeCheck: true,
+                CanStoreImages: this.scanProvider.canStoreImages,
+            },
+            // CallBackUrl: 'http://demo:5000/report/extracted/',
+        };
+        if (!this.scanBlastData[1].image) {
+            payload.Settings.IgnoreBackImage = true;
+        }
+        this.logData.Request = JSON.parse(JSON.stringify(payload));
+        console.timeEnd('payload');
+        this.__subs(this.scanProvider.blastPost(payload)).subscribe((data) => {
+            //console.log(data);
+            const results = data.Data;
+            console.timeEnd('upload');
+            console.time('parse');
+            // data.InfoCode = '1001';
+            this.logData.Response = JSON.parse(JSON.stringify(data));
+            //loading.close();
+            this.documentTypeSelected = true;
+            this.scaning = false;
+            if (data.InfoCode === '1001') {
+                this.error = true;
+                console.log('[ERROR] 1001');
+                this.errorCode = '1001';
+                // this.scanSide = 0;
+                this.preview = true;
+                this.cd.detectChanges();
+                return;
+            }
+            if (data.InfoCode === '1002') {
+                this.error = true;
+                console.log('[ERROR] 1002');
+                this.errorCode = '1002';
+                // this.scanSide = 0;
+                this.preview = true;
+                this.cd.detectChanges();
+                return;
+            }
+            if (results && data.Metadata.length > 0 && data.InfoCode === '1000') {
+                console.log('Extraction time', data.AnalysisTime);
+                this.zone.run(() => {
+                    if (data.ImageData?.Documents) {
+                        const { Documents } = data.ImageData;
+                        this.images = Documents.map((image, i) => {
+                            return { data: 'data:image/jpeg;base64,' + Documents[i] };
+                        });
+                    }
+                    this.result = this.scanProvider.parseBlast(results);
+                    console.log('RES', this.result);
+                    this.cd.detectChanges();
+                    this.model = this.result.model;
+                    if (data.ImageData?.FaceImage) {
+                        this.model._avatar =
+                            'data:image/jpeg;base64,' + data.ImageData?.FaceImage;
+                    }
+                    console.log('MODEL', this.model);
+                    this.cd.detectChanges();
+                });
+            }
+            else {
+                console.log('ERROR');
+                // this.scanSide = 0;
+                this.error = true;
+                this.preview = true;
+                this.cd.detectChanges();
+                // this.documentTypeSelected = false;
+                // this.retry();
+            }
+            this.cd.detectChanges();
+            console.timeEnd('parse');
+        }, (err) => {
+            // loading.close();
+            // this.scanSide = 0;
+            this.error = true;
+            this.preview = true;
+            this.documentTypeSelected = true;
+            this.scaning = false;
+        });
+    }
+    retry() {
+        this.preview = false;
+        this.validation = false;
+        this.errorCode = '1000';
+        this.result = false;
+        if (this.error) {
+            this.documentTypeSelected = false;
+            this.scanBlastData.forEach((element) => {
+                element.image = null;
+            });
+        }
+        this.error = false;
+        this.autoScan();
+        this.cd.detectChanges();
+    }
+    triggerSnapshot() {
+        this.trigger.next(0);
+    }
+    retake() {
+        this.validation = false;
+        this.preview = false;
+        this.error = false;
+        this.result = false;
+        this.scanSide = 0;
+        this.imageVerified = false;
+        this.scanDatas = [];
+        this.scaning = false;
+        this.images = [];
+        this.scanInProgress = false;
+        this.documentTypeSelected = false;
+        this.scanBlastData.forEach((m) => {
+            m.image = null;
+        });
+        this.autoScan();
+        this.cd.detectChanges();
+    }
+    use() {
+        // save images??
+        if (this.scanProvider.canStoreImages) {
+            this.logData.ExpectedOutput = JSON.parse(JSON.stringify(this.model));
+            if (this.logData.ExpectedOutput?._avatar) {
+                delete this.logData.ExpectedOutput._avatar;
+            }
+            this.__subs(this.scanProvider.sendLog(this.logData)).subscribe();
+            console.log(this.logData);
+        }
+        this.dialogRef?.close({
+            model: this.model,
+            images: this.images,
+        });
+    }
+    selfie() {
+        this.dialogs
+            .scanSelfie({ avatar: this.model._avatar })
+            .afterClosed()
+            .subscribe((resp) => {
+            if (resp) {
+                console.log(resp);
+                if (this.scanProvider.enableVerification) {
+                    this.imageVerified = true;
+                }
+                this.model._avatar = resp.imageAsDataUrl;
+                this.cd.detectChanges();
+            }
+        });
+    }
+    videoReady(event) {
+        this.cameraReady = event;
+        if (this.cameraReady && !this.scanInProgress) {
+            this.scanInProgress = true;
+            setTimeout(() => {
+                this.trigger.next(new Date().getTime());
+            }, 1000);
+        }
+    }
 }
-NgxScandocModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxScandocModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, declarations: [NgxScandocComponent], exports: [NgxScandocComponent] });
-NgxScandocModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, decorators: [{
+ScanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.TranslateService }, { token: NgxScandocCameraProvider }, { token: i0.Injector }, { token: LayoutProvider }, { token: AuthProvider }], target: i0.ɵɵFactoryTarget.Component });
+ScanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScanComponent, selector: "ngx-scan", inputs: { type: "type", dialogs: "dialogs", showDialog: "showDialog" }, outputs: { actions: "actions" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.mobile": "this.class" } }, viewQueries: [{ propertyName: "wraper", first: true, predicate: ["wraper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section *ngIf=\"result\">\n  <ngx-scan-results\n    (action)=\"selfie()\"\n    [form]=\"form\"\n    [model]=\"model\"\n    [images]=\"images\"\n  ></ngx-scan-results>\n\n  <footer>\n    <div class=\"actions\">\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n        {{ \"pms.dialogs.components.scanProfile.reTake\" | translate }}\n      </button>\n      <button\n        [disabled]=\"error || form.invalid\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"use()\"\n      >\n        {{ \"pms.dialogs.components.scanProfile.useData\" | translate }}\n      </button>\n    </div>\n  </footer>\n</section>\n\n<section *ngIf=\"!result && documentTypeSelected\">\n  <div #wraper class=\"wraper\">\n    <div class=\"loading\" *ngIf=\"!cameraReady && !preview\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <ng-container *ngIf=\"!error\">\n      <app-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\n        fxFlex\n        type=\"document\"\n        [trigger]=\"trigger\"\n        [imageHandler]=\"imageHandler\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"cameraProvider.nextWebcamObservable\"\n        (cameraSwitched)=\"cameraWasSwitched($event)\"\n        (initError)=\"handleInitError($event)\"\n        [width]=\"width\"\n        [height]=\"height\"\n        (destroyed)=\"cameraOff($event)\"\n        (videoReady)=\"videoReady($event)\"\n      >\n      </app-webcam>\n    </ng-container>\n    <div\n      fxLayout=\"row\"\n      fxFlex\n      class=\"previewData\"\n      *ngIf=\"preview\"\n      style=\"z-index: 20; position: absolute; width: 100%; height: 100%\"\n    >\n      <div class=\"p-16 error\" *ngIf=\"error\">\n        <div>\n          <div class=\"title\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <mat-icon>error_outline</mat-icon\n            ><span class=\"ml-8\">{{\n              \"pms.dialogs.components.scanProfile.unableToDetectId\" | translate\n            }}</span>\n          </div>\n\n          <ng-container *ngIf=\"errorCode === '1001'\">\n            <div>\n              Could not classify the given object as a supported document.\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"errorCode === '1002'\">\n            <div>\n              Something is wrong with extraction data. Please try again.\n            </div>\n          </ng-container>\n\n          <ul *ngIf=\"errorCode === '1000'\">\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.placeIdCloseToDevice\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.ensureSufficientLight\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.holdDocumentSteady\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.makeSureAllEdgesOfTheIdAreVisible\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.makeSureThereAreNoGlareAndShadowsOnTheId\"\n                  | translate\n              }}\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div\n        class=\"scanPreview\"\n        fxFlex\n        fxLayout=\"column\"\n        *ngIf=\"!error && !scaning\"\n      >\n        <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"pms.dialogs.components.scanProfile.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n        <div\n          fxFlex\n          class=\"image\"\n          [style.background-image]=\"'url(' + preview + ')'\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <footer>\n    <div\n      class=\"displayInfo\"\n      ngClass.lt-sm=\"mobile\"\n      *ngIf=\"!preview && cameraReady\"\n    >\n      {{ displayInfo }}\n    </div>\n    <!-- <div style=\"height: 26px\">\n      <div\n        style=\"text-align: center; font-size: 18px\"\n        *ngIf=\"idScan && !preview && cameraReady\"\n      >\n        <ng-container *ngIf=\"idScan === 'BACK'\">\n          Turn document and:\n          {{ \"pms.dialogs.components.scanProfile.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"pms.dialogs.components.scanProfile.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n    <div class=\"actions\" *ngIf=\"preview\">\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n        {{ \"pms.dialogs.components.scanProfile.retry\" | translate }}\n      </button>\n\n      <button\n        [disabled]=\"error\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"continue()\"\n      >\n        {{\n          \"pms.dialogs.components.scanProfile.continueWithSelectedImage\"\n            | translate\n        }}\n      </button>\n    </div>\n  </footer>\n</section>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden}section{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.wraper{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1}.wraper .loading{position:absolute;inset:0;z-index:20;background-color:#f5f5f5}.documentTurnOver{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.documentTurnOver mat-icon{width:200px;color:#fff;height:200px;font-size:100px}.displayInfo{text-align:center;flex:1;width:100%;background-color:#000;height:50px;line-height:50px;color:#fff;z-index:200}.displayInfo.mobile{font-size:12px}.preview{width:100%;border-radius:1%}footer button{box-shadow:none!important;height:45px;min-height:45px;text-transform:uppercase}footer .actions{display:flex;flex-direction:row;align-items:center;padding:8px}footer .actions button{flex:1}.error{display:flex;align-items:center;justify-content:center;flex:1}.error .title{font-size:20px;margin-bottom:8px}.error .title mat-icon{margin-right:8px}.error ul{font-size:18px;list-style-type:none}mat-card{box-shadow:none!important}.mr-4{margin-right:4px}.ml-4{margin-left:4px}.p-16{padding:16px}.p-8{padding:8px}.py-16{padding:16px 0}.w-100-p{width:100%}.scanPreview{padding:16px}.scanPreview .image{background-position:center;background-repeat:no-repeat;background-size:contain}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WebcamComponent, selector: "app-webcam", inputs: ["imageHandler", "id", "type", "width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched", "videoReady", "destroyed"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ScanResultsComponent, selector: "ngx-scan-results", inputs: ["model", "images", "form"], outputs: ["action"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-scan', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section *ngIf=\"result\">\n  <ngx-scan-results\n    (action)=\"selfie()\"\n    [form]=\"form\"\n    [model]=\"model\"\n    [images]=\"images\"\n  ></ngx-scan-results>\n\n  <footer>\n    <div class=\"actions\">\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n        {{ \"pms.dialogs.components.scanProfile.reTake\" | translate }}\n      </button>\n      <button\n        [disabled]=\"error || form.invalid\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"use()\"\n      >\n        {{ \"pms.dialogs.components.scanProfile.useData\" | translate }}\n      </button>\n    </div>\n  </footer>\n</section>\n\n<section *ngIf=\"!result && documentTypeSelected\">\n  <div #wraper class=\"wraper\">\n    <div class=\"loading\" *ngIf=\"!cameraReady && !preview\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <ng-container *ngIf=\"!error\">\n      <app-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\n        fxFlex\n        type=\"document\"\n        [trigger]=\"trigger\"\n        [imageHandler]=\"imageHandler\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"cameraProvider.nextWebcamObservable\"\n        (cameraSwitched)=\"cameraWasSwitched($event)\"\n        (initError)=\"handleInitError($event)\"\n        [width]=\"width\"\n        [height]=\"height\"\n        (destroyed)=\"cameraOff($event)\"\n        (videoReady)=\"videoReady($event)\"\n      >\n      </app-webcam>\n    </ng-container>\n    <div\n      fxLayout=\"row\"\n      fxFlex\n      class=\"previewData\"\n      *ngIf=\"preview\"\n      style=\"z-index: 20; position: absolute; width: 100%; height: 100%\"\n    >\n      <div class=\"p-16 error\" *ngIf=\"error\">\n        <div>\n          <div class=\"title\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n            <mat-icon>error_outline</mat-icon\n            ><span class=\"ml-8\">{{\n              \"pms.dialogs.components.scanProfile.unableToDetectId\" | translate\n            }}</span>\n          </div>\n\n          <ng-container *ngIf=\"errorCode === '1001'\">\n            <div>\n              Could not classify the given object as a supported document.\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"errorCode === '1002'\">\n            <div>\n              Something is wrong with extraction data. Please try again.\n            </div>\n          </ng-container>\n\n          <ul *ngIf=\"errorCode === '1000'\">\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.placeIdCloseToDevice\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.ensureSufficientLight\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.holdDocumentSteady\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.makeSureAllEdgesOfTheIdAreVisible\"\n                  | translate\n              }}\n            </li>\n            <li>\n              {{\n                \"pms.dialogs.components.scanProfile.makeSureThereAreNoGlareAndShadowsOnTheId\"\n                  | translate\n              }}\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div\n        class=\"scanPreview\"\n        fxFlex\n        fxLayout=\"column\"\n        *ngIf=\"!error && !scaning\"\n      >\n        <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"pms.dialogs.components.scanProfile.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n        <div\n          fxFlex\n          class=\"image\"\n          [style.background-image]=\"'url(' + preview + ')'\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <footer>\n    <div\n      class=\"displayInfo\"\n      ngClass.lt-sm=\"mobile\"\n      *ngIf=\"!preview && cameraReady\"\n    >\n      {{ displayInfo }}\n    </div>\n    <!-- <div style=\"height: 26px\">\n      <div\n        style=\"text-align: center; font-size: 18px\"\n        *ngIf=\"idScan && !preview && cameraReady\"\n      >\n        <ng-container *ngIf=\"idScan === 'BACK'\">\n          Turn document and:\n          {{ \"pms.dialogs.components.scanProfile.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"pms.dialogs.components.scanProfile.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n    <div class=\"actions\" *ngIf=\"preview\">\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n        {{ \"pms.dialogs.components.scanProfile.retry\" | translate }}\n      </button>\n\n      <button\n        [disabled]=\"error\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"continue()\"\n      >\n        {{\n          \"pms.dialogs.components.scanProfile.continueWithSelectedImage\"\n            | translate\n        }}\n      </button>\n    </div>\n  </footer>\n</section>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden}section{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.wraper{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1}.wraper .loading{position:absolute;inset:0;z-index:20;background-color:#f5f5f5}.documentTurnOver{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.documentTurnOver mat-icon{width:200px;color:#fff;height:200px;font-size:100px}.displayInfo{text-align:center;flex:1;width:100%;background-color:#000;height:50px;line-height:50px;color:#fff;z-index:200}.displayInfo.mobile{font-size:12px}.preview{width:100%;border-radius:1%}footer button{box-shadow:none!important;height:45px;min-height:45px;text-transform:uppercase}footer .actions{display:flex;flex-direction:row;align-items:center;padding:8px}footer .actions button{flex:1}.error{display:flex;align-items:center;justify-content:center;flex:1}.error .title{font-size:20px;margin-bottom:8px}.error .title mat-icon{margin-right:8px}.error ul{font-size:18px;list-style-type:none}mat-card{box-shadow:none!important}.mr-4{margin-right:4px}.ml-4{margin-left:4px}.p-16{padding:16px}.p-8{padding:8px}.py-16{padding:16px 0}.w-100-p{width:100%}.scanPreview{padding:16px}.scanPreview .image{background-position:center;background-repeat:no-repeat;background-size:contain}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.TranslateService }, { type: NgxScandocCameraProvider }, { type: i0.Injector }, { type: LayoutProvider }, { type: AuthProvider }]; }, propDecorators: { type: [{
+                type: Input
+            }], dialogs: [{
+                type: Input
+            }], actions: [{
+                type: Output
+            }], showDialog: [{
+                type: Input
+            }], wraper: [{
+                type: ViewChild,
+                args: ['wraper']
+            }], class: [{
+                type: HostBinding,
+                args: ['class.mobile']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, imports: [MatNativeDateModule,
+        MatDatepickerModule,
+        MatCardModule,
+        MatMenuModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSnackBarModule,
+        MatProgressBarModule,
+        MatTableModule,
+        MatProgressSpinnerModule,
+        MatPaginatorModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatBadgeModule,
+        MatListModule,
+        MatTabsModule,
+        MatSliderModule,
+        MatSlideToggleModule], exports: [MatNativeDateModule,
+        MatDatepickerModule,
+        MatSelectModule,
+        MatCardModule,
+        MatMenuModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSnackBarModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatChipsModule,
+        MatBadgeModule,
+        MatCheckboxModule,
+        MatListModule,
+        MatTabsModule,
+        MatSlideToggleModule,
+        MatAutocompleteModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, imports: [MatNativeDateModule,
+        MatDatepickerModule,
+        MatCardModule,
+        MatMenuModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSnackBarModule,
+        MatProgressBarModule,
+        MatTableModule,
+        MatProgressSpinnerModule,
+        MatPaginatorModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatBadgeModule,
+        MatListModule,
+        MatTabsModule,
+        MatSliderModule,
+        MatSlideToggleModule, MatNativeDateModule,
+        MatDatepickerModule,
+        MatSelectModule,
+        MatCardModule,
+        MatMenuModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSnackBarModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatChipsModule,
+        MatBadgeModule,
+        MatCheckboxModule,
+        MatListModule,
+        MatTabsModule,
+        MatSlideToggleModule,
+        MatAutocompleteModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatCardModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatInputModule,
+                        MatSnackBarModule,
+                        MatProgressBarModule,
+                        MatTableModule,
+                        MatProgressSpinnerModule,
+                        MatPaginatorModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatBadgeModule,
+                        MatListModule,
+                        MatTabsModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                    ],
+                    exports: [
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatSelectModule,
+                        MatCardModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        MatInputModule,
+                        MatSnackBarModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatChipsModule,
+                        MatBadgeModule,
+                        MatCheckboxModule,
+                        MatListModule,
+                        MatTabsModule,
+                        MatSlideToggleModule,
+                        MatAutocompleteModule,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+class AvatarTypeComponent extends FieldType {
+    constructor(cd) {
+        super();
+        this.cd = cd;
+        this.width = 'w-120';
+        this.padding = 'px-32 pt-8 pb-8';
+    }
+    ngOnChange() { }
+    ngAfterViewInit() {
+        if (this.to.width) {
+            this.width = this.to.width;
+        }
+        if (this.to.padding) {
+            this.padding = this.to.padding;
+        }
+        this.cd.detectChanges();
+    }
+}
+AvatarTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AvatarTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AvatarTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AvatarTypeComponent, selector: "app-formly-avatar-type", usesInheritance: true, ngImport: i0, template: `
+    <mat-card
+      [ngClass]="padding"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+    >
+      <ngx-avatars
+        [name]="model[key.toString()]"
+        [ngClass]="width"
+      ></ngx-avatars>
+    </mat-card>
+  `, isInline: true, styles: ["mat-card{border-radius:0;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.AvatarComponent, selector: "ngx-avatars", inputs: ["round", "size", "textSizeRatio", "bgColor", "fgColor", "borderColor", "style", "cornerRadius", "facebookId", "twitterId", "googleId", "instagramId", "vkontakteId", "skypeId", "gravatarId", "githubId", "src", "name", "value", "referrerpolicy", "placeholder", "initialsSize"], outputs: ["clickOnAvatar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AvatarTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-formly-avatar-type', template: `
+    <mat-card
+      [ngClass]="padding"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+    >
+      <ngx-avatars
+        [name]="model[key.toString()]"
+        [ngClass]="width"
+      ></ngx-avatars>
+    </mat-card>
+  `, styles: ["mat-card{border-radius:0;box-shadow:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class TitleTypeComponent extends FieldType {
+    constructor(cd) {
+        super();
+        this.cd = cd;
+    }
+    ngOnInit() {
+        this.opt = {
+            badge: this.to.badge,
+        };
+    }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+}
+TitleTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TitleTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TitleTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TitleTypeComponent, selector: "app-formly-title-type", usesInheritance: true, ngImport: i0, template: `
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <h3>
+        <span>{{ to.label }}</span>
+
+        <span
+          *ngIf="opt.badge && model[opt.badge] && model[opt.badge].length > 1"
+          matBadgeSize="small"
+          matBadgeColor="primary"
+          matBadgeOverlap="false"
+        ></span>
+      </h3>
+      <span fxFlex></span>
+      <div *ngIf="to.chip" class="chip">
+        {{ to.chip | translate }}
+      </div>
+    </div>
+  `, isInline: true, styles: [".chip{background:whitesmoke;border-radius:6px;padding:4px 8px;font-size:12px;color:#888;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TitleTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-formly-title-type', template: `
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <h3>
+        <span>{{ to.label }}</span>
+
+        <span
+          *ngIf="opt.badge && model[opt.badge] && model[opt.badge].length > 1"
+          matBadgeSize="small"
+          matBadgeColor="primary"
+          matBadgeOverlap="false"
+        ></span>
+      </h3>
+      <span fxFlex></span>
+      <div *ngIf="to.chip" class="chip">
+        {{ to.chip | translate }}
+      </div>
+    </div>
+  `, styles: [".chip{background:whitesmoke;border-radius:6px;padding:4px 8px;font-size:12px;color:#888;font-weight:600}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class ProfileImageTypeComponent extends FieldType {
+    constructor(cd) {
+        super();
+        this.cd = cd;
+    }
+    ngOnChange() { }
+    ngAfterViewInit() {
+        if (this.to.width) {
+            this.width = this.to.width;
+        }
+        if (this.to.padding) {
+            this.padding = this.to.padding;
+        }
+        this.cd.detectChanges();
+    }
+}
+ProfileImageTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileImageTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProfileImageTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProfileImageTypeComponent, selector: "app-formly-profile-image-type", usesInheritance: true, ngImport: i0, template: `
+    <mat-card
+
+      fxLayout="column"
+      fxLayoutAlign="center center"
+    >
+      <ngx-avatars
+        class="profile-image"
+        [src]="model[key.toString()]"
+        [size]="150"
+
+      ></ngx-avatars>
+    </mat-card>
+  `, isInline: true, styles: ["mat-card{border-radius:0;box-shadow:none!important}.profile-image{width:150px;height:150px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: i5$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.AvatarComponent, selector: "ngx-avatars", inputs: ["round", "size", "textSizeRatio", "bgColor", "fgColor", "borderColor", "style", "cornerRadius", "facebookId", "twitterId", "googleId", "instagramId", "vkontakteId", "skypeId", "gravatarId", "githubId", "src", "name", "value", "referrerpolicy", "placeholder", "initialsSize"], outputs: ["clickOnAvatar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProfileImageTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-formly-profile-image-type', template: `
+    <mat-card
+
+      fxLayout="column"
+      fxLayoutAlign="center center"
+    >
+      <ngx-avatars
+        class="profile-image"
+        [src]="model[key.toString()]"
+        [size]="150"
+
+      ></ngx-avatars>
+    </mat-card>
+  `, styles: ["mat-card{border-radius:0;box-shadow:none!important}.profile-image{width:150px;height:150px;border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class AppFormModule {
+}
+AppFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AppFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AppFormModule, declarations: [TitleTypeComponent,
+        AvatarTypeComponent,
+        ProfileImageTypeComponent], imports: [CommonModule,
+        FormsModule,
+        FormlyMatDatepickerModule,
+        FormlySelectModule,
+        MaterialModule,
+        AvatarModule,
+        TranslateModule,
+        FormlyMaterialModule, i7.FormlyModule], exports: [FormlyModule] });
+AppFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppFormModule, imports: [CommonModule,
+        FormsModule,
+        FormlyMatDatepickerModule,
+        FormlySelectModule,
+        MaterialModule,
+        AvatarModule,
+        TranslateModule,
+        FormlyMaterialModule,
+        FormlyModule.forRoot({
+            types: [
+                {
+                    name: 'title',
+                    component: TitleTypeComponent,
+                    wrappers: [],
+                },
+                {
+                    name: 'profile-image',
+                    component: ProfileImageTypeComponent,
+                    wrappers: [],
+                },
+            ],
+        }), FormlyModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        NgxScandocComponent
+                        TitleTypeComponent,
+                        AvatarTypeComponent,
+                        ProfileImageTypeComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FormlyMatDatepickerModule,
+                        FormlySelectModule,
+                        MaterialModule,
+                        AvatarModule,
+                        TranslateModule,
+                        FormlyMaterialModule,
+                        FormlyModule.forRoot({
+                            types: [
+                                {
+                                    name: 'title',
+                                    component: TitleTypeComponent,
+                                    wrappers: [],
+                                },
+                                {
+                                    name: 'profile-image',
+                                    component: ProfileImageTypeComponent,
+                                    wrappers: [],
+                                },
+                            ],
+                        }),
+                    ],
+                    providers: [],
+                    exports: [FormlyModule],
+                }]
+        }] });
+
+class CameraSwitchComponent {
+    constructor(cameraProvider) {
+        this.cameraProvider = cameraProvider;
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() { }
+}
+CameraSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CameraSwitchComponent, deps: [{ token: NgxScandocCameraProvider }], target: i0.ɵɵFactoryTarget.Component });
+CameraSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CameraSwitchComponent, selector: "ngx-scan-camera-switch", ngImport: i0, template: "<mat-form-field\n  style=\"font-size: 14px; width: 200px; margin-top: 8px\"\n  class=\"w-100 mr-16 mt-8\"\n>\n  <mat-label> Camera </mat-label>\n  <mat-select (selectionChange)=\"cameraProvider.selectCamera($event)\" [(ngModel)]=\"cameraProvider.deviceId\">\n    <mat-option *ngFor=\"let device of cameraProvider.mediaDevices\" [value]=\"device.deviceId\">\n      {{ device.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CameraSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-scan-camera-switch', template: "<mat-form-field\n  style=\"font-size: 14px; width: 200px; margin-top: 8px\"\n  class=\"w-100 mr-16 mt-8\"\n>\n  <mat-label> Camera </mat-label>\n  <mat-select (selectionChange)=\"cameraProvider.selectCamera($event)\" [(ngModel)]=\"cameraProvider.deviceId\">\n    <mat-option *ngFor=\"let device of cameraProvider.mediaDevices\" [value]=\"device.deviceId\">\n      {{ device.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: NgxScandocCameraProvider }]; } });
+
+class CoreComponentsModule {
+}
+CoreComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CoreComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, declarations: [ScanComponent, ScanResultsComponent, CameraSwitchComponent], imports: [CommonModule,
+        FormsModule,
+        TranslateModule,
+        WebcamModule,
+        MaterialModule,
+        AppFormModule,
+        ReactiveFormsModule], exports: [WebcamModule, ScanComponent, CameraSwitchComponent] });
+CoreComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, imports: [CommonModule,
+        FormsModule,
+        TranslateModule,
+        WebcamModule,
+        MaterialModule,
+        AppFormModule,
+        ReactiveFormsModule, WebcamModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        WebcamModule,
+                        MaterialModule,
+                        AppFormModule,
+                        ReactiveFormsModule,
                     ],
+                    declarations: [ScanComponent, ScanResultsComponent, CameraSwitchComponent],
+                    exports: [WebcamModule, ScanComponent, CameraSwitchComponent],
+                    providers: [],
+                }]
+        }] });
+
+class SafeResourceUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(style) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(style);
+        // return this.sanitizer.bypassSecurityTrustStyle(style);
+        // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
+    }
+}
+SafeResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SafeResourceUrlPipe, name: "safeResourceUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'safeResourceUrl' }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
+
+class CorePipesModule {
+}
+CorePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CorePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CorePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CorePipesModule, declarations: [SafeResourceUrlPipe], exports: [SafeResourceUrlPipe] });
+CorePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CorePipesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CorePipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SafeResourceUrlPipe],
                     imports: [],
                     exports: [
-                        NgxScandocComponent
-                    ]
+                        SafeResourceUrlPipe,
+                    ],
+                }]
+        }] });
+
+class BlankComponent {
+    constructor(dialogRef, data, cd) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.cd = cd;
+        this.initSet = false;
+    }
+    setModel(model) {
+        this.data.data.model = model;
+        this.init();
+    }
+    init() {
+        this.initSet = true;
+        this.body?.clear();
+        const componentRef = this.body?.createComponent(this.data.component);
+        componentRef.instance.data = this.data.data;
+        // componentRef.instance.dialogs = this.dialogs;
+        componentRef.instance.dialogRef = this.dialogRef;
+        if (componentRef.instance.init) {
+            componentRef.instance.init();
+        }
+        this.cd.detectChanges();
+    }
+    ngAfterViewInit() {
+        if (!this.initSet) {
+            this.init();
+        }
+    }
+}
+BlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BlankComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BlankComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BlankComponent, selector: "app-dialog-blank", viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #body></ng-template>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;height:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BlankComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dialog-blank', template: "<ng-template #body></ng-template>\n", styles: [":host{display:flex;flex:1;flex-direction:column;overflow:hidden;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { body: [{
+                type: ViewChild,
+                args: ['body', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class LoadingComponent {
+}
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "app-loading", ngImport: i0, template: "<div style=\"width:240px;\">\n\n  <div class=\"pb-16\" style=\"font-size: 18px;padding-bottom:16px;\">\n    Loading...\n  </div>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-loading', template: "<div style=\"width:240px;\">\n\n  <div class=\"pb-16\" style=\"font-size: 18px;padding-bottom:16px;\">\n    Loading...\n  </div>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</div>\n" }]
+        }] });
+
+class ConfirmComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.showDetails = false;
+        this.images = {
+            alert: 'page-lost.svg',
+            prompt: 'bedroom.svg',
+            dirty: 'opps.svg',
+        };
+        this.options = {};
+    }
+    onEnterPress(e) {
+        this.action(true);
+    }
+    onEscapePress(e) {
+        this.action(false);
+    }
+    ngOnInit() {
+        console.log(this.data);
+        this.options = this.data.options || {};
+        this.type = this.options.type || this.data.type || 'prompt';
+    }
+    action(key) {
+        this.dialogRef.close(key);
+    }
+    close() { }
+}
+ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfirmComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ConfirmComponent, selector: "app-confirm", host: { listeners: { "document:keyup.enter": "onEnterPress($event)", "document:keyup.escape": "onEscapePress($event)" } }, ngImport: i0, template: "<header class=\"page-header\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">\n    {{ data.title | translate }}\n\n    <!-- {{ data.text.statusText }} {{ data.text.status }} -->\n  </div>\n\n  <span fxFlex></span>\n\n  <!-- <div class=\"separator\"></div>\n\n  <button mat-button (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button> -->\n  <!-- <mat-icon class=\"mr-16\" style=\"color:#888;\">info_outline</mat-icon> -->\n</header>\n\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <!-- <img\n    style=\"height: 240px; margin: 34px 0px;display: none;\"\n    [src]=\"'/assets/images/illustrations/' + images[type]\"\n  /> -->\n  <!-- <img style=\"width:60px;\" src=\"/assets/images/illustrations/door-lock.png\"> -->\n\n  <div class=\"text\" *ngIf=\"data.text\">\n    <span [innerHtml]=\"data.text\"></span>\n  </div>\n</div>\n\n<!--  -->\n\n<footer>\n\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button\n      *ngIf=\"!data.alert && !options?.hideCancelButton\"\n      (click)=\"action(false)\"\n      mat-raised-button\n    >\n      {{ data.cancel || 'core.page.cancel' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"data.no && !options?.hideNoButton\"\n      (click)=\"action('no')\"\n\n      mat-raised-button\n    >\n      {{ data.no }}\n    </button>\n    <button\n      *ngIf=\"!data.hideOkButton && !options?.hideOkButton\"\n      (click)=\"action(true)\"\n      color=\"accent\"\n      mat-raised-button\n    >\n      <ng-container *ngIf=\"!data.alert\">\n        {{ data.ok || 'core.page.confirm' | translate }}\n      </ng-container>\n\n      <ng-container *ngIf=\"data.alert\">\n        {{ data.ok || 'core.page.close' | translate }}\n      </ng-container>\n    </button>\n  </div>\n</footer>\n", styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;width:100%}.title{font-size:18px}.text{padding:0 30px;text-align:center;font-size:16px;margin:40px 0}.actions{min-height:60px}.actions button{min-width:120px;margin-right:16px;box-shadow:none;text-transform:uppercase}footer{background-color:#fff}footer button{box-shadow:none!important;border:1px solid rgba(0,0,0,.12);font-size:13px}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm', template: "<header class=\"page-header\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">\n    {{ data.title | translate }}\n\n    <!-- {{ data.text.statusText }} {{ data.text.status }} -->\n  </div>\n\n  <span fxFlex></span>\n\n  <!-- <div class=\"separator\"></div>\n\n  <button mat-button (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button> -->\n  <!-- <mat-icon class=\"mr-16\" style=\"color:#888;\">info_outline</mat-icon> -->\n</header>\n\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <!-- <img\n    style=\"height: 240px; margin: 34px 0px;display: none;\"\n    [src]=\"'/assets/images/illustrations/' + images[type]\"\n  /> -->\n  <!-- <img style=\"width:60px;\" src=\"/assets/images/illustrations/door-lock.png\"> -->\n\n  <div class=\"text\" *ngIf=\"data.text\">\n    <span [innerHtml]=\"data.text\"></span>\n  </div>\n</div>\n\n<!--  -->\n\n<footer>\n\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button\n      *ngIf=\"!data.alert && !options?.hideCancelButton\"\n      (click)=\"action(false)\"\n      mat-raised-button\n    >\n      {{ data.cancel || 'core.page.cancel' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"data.no && !options?.hideNoButton\"\n      (click)=\"action('no')\"\n\n      mat-raised-button\n    >\n      {{ data.no }}\n    </button>\n    <button\n      *ngIf=\"!data.hideOkButton && !options?.hideOkButton\"\n      (click)=\"action(true)\"\n      color=\"accent\"\n      mat-raised-button\n    >\n      <ng-container *ngIf=\"!data.alert\">\n        {{ data.ok || 'core.page.confirm' | translate }}\n      </ng-container>\n\n      <ng-container *ngIf=\"data.alert\">\n        {{ data.ok || 'core.page.close' | translate }}\n      </ng-container>\n    </button>\n  </div>\n</footer>\n", styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;width:100%}.title{font-size:18px}.text{padding:0 30px;text-align:center;font-size:16px;margin:40px 0}.actions{min-height:60px}.actions button{min-width:120px;margin-right:16px;box-shadow:none;text-transform:uppercase}footer{background-color:#fff}footer button{box-shadow:none!important;border:1px solid rgba(0,0,0,.12);font-size:13px}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { onEnterPress: [{
+                type: HostListener,
+                args: ['document:keyup.enter', ['$event']]
+            }], onEscapePress: [{
+                type: HostListener,
+                args: ['document:keyup.escape', ['$event']]
+            }] } });
+
+class ScanSelfieComponent {
+    constructor(cd, scanProvider, dialogs, 
+    //   private formProvider: ScanFieldsProvider,
+    translate) {
+        this.cd = cd;
+        this.scanProvider = scanProvider;
+        this.dialogs = dialogs;
+        this.translate = translate;
+        this.scanBlastData = [
+            {
+                title: 'pms.dialogs.components.scanProfile.front',
+                description: 'pms.dialogs.components.scanProfile.frontDescription',
+                side: 'FRONT',
+            },
+            {
+                title: 'pms.dialogs.components.scanProfile.back',
+                description: 'pms.dialogs.components.scanProfile.backDescription',
+                disabled: true,
+                side: 'BACK',
+            },
+        ];
+        this.type = 'desktop';
+        this.actions = new EventEmitter();
+        this.mediaDevices = [];
+        this.videoOptions = {
+            width: 1920,
+            height: 1080,
+            facingMode: 'environment',
+        };
+        this.multipleWebcamsAvailable = false;
+        // webcam snapshot trigger
+        this.documentTypeSelected = false;
+        this.preview = null;
+        this.allowCameraSwitch = true;
+        this.error = false;
+        this.cameraReady = false;
+        this.scaning = false;
+        this.scanDatas = [];
+        this.trigger = new Subject();
+        // switch to next / previous / specific webcam; true/false: forward/backwards, string: deviceId
+        this.nextWebcam = new Subject();
+        this.form = new FormGroup({});
+    }
+    onResize() {
+        if (this.wraper) {
+            this.width = this.wraper.nativeElement.clientWidth;
+            this.height = this.wraper.nativeElement.clientHeight;
+            console.log(this.width, this.height);
+            setTimeout(() => {
+                const video = this.wraper?.nativeElement.querySelector('video');
+                if (video) {
+                    //   console.log(video.clientWidth, video.clientHeight);
+                    this.videoWidth = video.clientWidth;
+                    this.videoHeight = video.clientHeight;
+                }
+            }, 100);
+            this.cd.detectChanges();
+        }
+    }
+    init() {
+        console.log('HAS MULTI');
+        // this.result=true;
+        // this.result ={};
+        this.fields = []; //this.formProvider.document();
+        WebcamUtil.getAvailableVideoInputs().subscribe((mediaDevices) => {
+            console.log('[DEVICES]', mediaDevices);
+            this.mediaDevices = mediaDevices;
+            this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
+            this.singleScan(this.scanBlastData[0]);
+        });
+    }
+    handleImage(webcamImage) {
+        console.log('[received webcam image]', webcamImage);
+        this.webcamImage = webcamImage;
+        this.preview = webcamImage.imageAsDataUrl;
+        this.cd.detectChanges();
+    }
+    handleInitError(error) {
+        console.log(error);
+    }
+    get scanBlastCanUpload() {
+        return this.scanBlastData[0].image ? true : false;
+    }
+    cameraWasSwitched(deviceId) {
+        console.log('active device: ' + deviceId);
+        this.deviceId = deviceId;
+        this.cameraReady = true;
+        this.defaultDevice = deviceId;
+        this.onResize();
+    }
+    get nextWebcamObservable() {
+        return this.nextWebcam.asObservable();
+    }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+    selectCamera(event) {
+        console.log(event);
+        this.nextWebcam.next(event.value);
+    }
+    close() {
+        this.dialogRef?.close();
+    }
+    singleScan(side) {
+        this.scanType = side.side;
+        this.preview = null;
+        this.selectedSide = side;
+        this.selectedSide.image = null;
+        this.documentTypeSelected = true;
+        this.scanBlastData[1].disabled = false;
+        this.cd.detectChanges();
+        setTimeout(() => {
+            this.onResize();
+        }, 10);
+    }
+    getBase64(file) {
+        return new Observable((observer) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                observer.next(reader.result);
+            };
+            reader.onerror = (error) => {
+                observer.error(error);
+            };
+        });
+    }
+    handleFileInput(target, event, side) {
+        const files = target.files;
+        this.selectedSide = side;
+        console.log(files);
+        const file = files.item(0);
+        this.resolutionLimit(file)
+            .pipe(switchMap((valid) => {
+            return valid ? this.getBase64(file) : of(false);
+        }))
+            .subscribe((imageAsDataUrl) => {
+            // console.log(imageAsDataUrl);
+            event.target.value = null;
+            if (!imageAsDataUrl) {
+                this.dialogs.alert('core.page.error', this.translate.instant('pms.dialogs.components.scanProfile.minResolution'));
+            }
+            else {
+                side.image = {
+                    imageAsDataUrl,
+                };
+                if (this.selectedSide.side === 'FRONT') {
+                    this.scanBlastData[1].disabled = false;
+                }
+            }
+            this.cd.detectChanges();
+        });
+    }
+    rotateBase64Image(base64data) {
+        return new Observable((observer) => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            var image = new Image();
+            image.src = base64data;
+            image.onload = () => {
+                console.log(canvas);
+                canvas.width = image.height;
+                canvas.height = image.width;
+                if (ctx) {
+                    ctx.rotate((90 * Math.PI) / 180);
+                    ctx.translate(0, -canvas.width);
+                    ctx.drawImage(image, 0, 0);
+                    observer.next(canvas.toDataURL());
+                }
+                else {
+                    observer.error({ type: 'generic error' });
+                }
+            };
+            image.onerror = (e) => {
+                observer.error(e);
+            };
+        });
+    }
+    sendMobile() {
+        // this.dialogs.scanMobile({ id: 1 });
+    }
+    singleScanRotate(side) {
+        console.log(side);
+        this.rotateBase64Image(side.image.imageAsDataUrl).subscribe((data) => {
+            side.image = { imageAsDataUrl: data };
+            this.cd.detectChanges();
+        });
+    }
+    singleScanRemove(side) {
+        side.image = null;
+        if (side.side === 'FRONT') {
+            this.scanBlastData[1].disabled = true;
+        }
+        this.cd.detectChanges();
+    }
+    resolutionLimit(file) {
+        const minWidth = 1280;
+        const minHeight = 720;
+        return new Observable((observer) => {
+            const img = new Image();
+            img.src = window.URL.createObjectURL(file);
+            img.onload = () => {
+                const width = img.naturalWidth;
+                const height = img.naturalHeight;
+                let valid = false;
+                if (width > height) {
+                    valid = width >= minWidth && height >= minHeight;
+                }
+                else {
+                    valid = width >= minHeight && height >= minWidth;
+                }
+                observer.next(valid);
+            };
+            img.onerror = (error) => {
+                observer.error(error);
+            };
+        });
+    }
+    getImgBase64(num) {
+        return this.scanBlastData[num].image.dataUrl.split(',')[1];
+    }
+    scanBlastFinish() {
+        if (this.type === 'mobile') {
+            this.actions.emit({ data: this.scanBlastData });
+            this.retake();
+            return;
+        }
+        const loading = this.dialogs.loading();
+        this.scaning = true;
+        const payload = {
+            AcceptTermsAndConditions: true,
+            DataFields: {
+                FrontImageType: 'base64',
+                FrontImageCropped: false,
+                BackImageType: 'base64',
+                BackImageCropped: false,
+                FrontImage: this.getImgBase64(0),
+                BackImage: this.scanBlastData[1].image ? this.getImgBase64(1) : null,
+            },
+            Settings: {
+                ShouldValidate: true,
+                ShouldReturnDocumentImage: true,
+                ShouldReturnFaceIfDetected: true,
+                SkipImageSizeCheck: true,
+                CanStoreImages: this.scanProvider.canStoreImages,
+            },
+            // CallBackUrl: 'http://demo:5000/report/extracted/',
+        };
+        if (!this.scanBlastData[1].image) {
+            payload.Settings.IgnoreBackImage = true;
+        }
+        this.scanProvider.blastPost(payload).subscribe((data) => {
+            const results = data.Data;
+            loading.close();
+            this.documentTypeSelected = true;
+            this.scaning = false;
+            if (results && data.Metadata.length > 0) {
+                if (data.ImageData?.Documents) {
+                    const { Documents } = data.ImageData;
+                    this.images = Documents.map((image, i) => {
+                        return { data: 'data:image/jpeg;base64,' + Documents[i] };
+                    });
+                }
+                this.result = this.scanProvider.parseBlast(results);
+                console.log('RES', this.result);
+                this.model = this.result.model;
+                if (data.ImageData?.FaceImage) {
+                    this.model._avatar =
+                        'data:image/jpeg;base64,' + data.ImageData?.FaceImage;
+                }
+                console.log('MODEL', this.model);
+            }
+            else {
+                console.log('ERROR');
+                // this.scanSide = 0;
+                this.error = true;
+                this.preview = true;
+                // this.documentTypeSelected = false;
+                // this.retry();
+            }
+            this.cd.detectChanges();
+        }, (err) => {
+            loading.close();
+            // this.scanSide = 0;
+            this.error = true;
+            this.preview = true;
+            this.documentTypeSelected = true;
+            this.scaning = false;
+        });
+    }
+    cameraOff(ev) {
+        this.cameraReady = false;
+        this.cd.detectChanges();
+    }
+    continue() {
+        if (this.scanProvider.enableVerification) {
+            const loading = this.dialogs.loading();
+            console.log(this.data.avatar);
+            this.scanProvider
+                .stateless(this.data.avatar.split(',')[1], this.webcamImage?.imageAsDataUrl.split(',')[1])
+                .subscribe((resp) => {
+                loading.close();
+                if (resp.Data?.Verified) {
+                    this.dialogRef?.close(this.webcamImage);
+                }
+                else {
+                    this.dialogs.alert('Verification failed!', "We can't verify that your selfie is same as image on document.");
+                }
+                console.log(resp);
+            }, (err) => {
+                loading.close();
+                this.dialogRef?.close(this.webcamImage);
+            });
+        }
+        else {
+            this.dialogRef?.close(this.webcamImage);
+        }
+        // this.dialogRef.close(this.webcamImage)
+    }
+    retry() {
+        this.preview = false;
+        this.result = false;
+        if (this.error) {
+            this.documentTypeSelected = false;
+            this.scanBlastData.forEach((element) => {
+                element.image = null;
+            });
+        }
+        this.error = false;
+    }
+    triggerSnapshot() {
+        this.trigger.next(0);
+    }
+    scan() {
+        console.log('SCAN');
+        this.triggerSnapshot();
+        this.scanDatas[0] = true;
+    }
+    retake() {
+        this.preview = false;
+        this.error = false;
+        this.result = false;
+        this.scanSide = 0;
+        this.scanDatas = [];
+        this.scaning = false;
+        this.images = [];
+        this.documentTypeSelected = false;
+        this.scanBlastData.forEach((m) => {
+            m.image = null;
+        });
+        this.cd.detectChanges();
+    }
+    use() { }
+    selfie() { }
+}
+ScanSelfieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanSelfieComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ScanProvider }, { token: DialogsCoreProvider }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ScanSelfieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScanSelfieComponent, selector: "app-scan-selfie", inputs: { type: "type" }, outputs: { actions: "actions" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "wraper", first: true, predicate: ["wraper"], descendants: true }], ngImport: i0, template: "<header class=\"page-header\" fxLayout=\"row\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">Selfie</div>\n\n  <span fxFlex></span>\n  <ng-container\n    *ngIf=\"\n      documentTypeSelected &&\n      !result &&\n      !error &&\n      multipleWebcamsAvailable &&\n      !preview\n    \"\n  >\n    <div class=\"separator\"></div>\n    <div style=\"padding: 0px 16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <mat-form-field\n          style=\"font-size: 14px; width: 200px; margin-top: 8px\"\n          class=\"w-200 mr-16 mt-8\"\n        >\n          <mat-label> Camera </mat-label>\n          <mat-select\n            (selectionChange)=\"selectCamera($event)\"\n            [(ngModel)]=\"deviceId\"\n          >\n            <mat-option\n              *ngFor=\"let device of mediaDevices\"\n              [value]=\"device.deviceId\"\n            >\n              {{ device.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n  <!-- <ng-container *ngIf=\"type === 'desktop'\">\n    <div class=\"separator\"></div>\n    <button mat-button (click)=\"sendMobile()\">\n      <mat-icon>tablet_mac</mat-icon>\n    </button>\n\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container> -->\n</header>\n\n<div *ngIf=\"!result\" fxFlex fxLayout=\"column\">\n  <div fxFlex #wraper class=\"wraper\" fxLayout=\"row\">\n    <div\n      style=\"\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        right: 0px;\n        bottom: 0px;\n        z-index: 20;\n        background-color: whitesmoke;\n      \"\n      *ngIf=\"!cameraReady && !preview\"\n    >\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <ng-container *ngIf=\"!error\">\n      <!-- <div\n      class=\"rectangle\"\n      [ngStyle]=\"{\n        'width.px': videoHeight * 0.75 * 1.588,\n        'height.px': videoHeight * 0.75\n      }\"\n    ></div>\n    <svg\n      *ngIf=\"videoWidth\"\n      style=\"position: absolute; left: 0px; top: 0px\"\n      width=\"0\"\n      height=\"0\"\n    >\n      <defs>\n        <clipPath id=\"myClip\">\n          <rect\n            stroke-width=\"6\"\n            stroke-color=\"red\"\n            [attr.x]=\"(videoWidth - videoHeight * 0.75 * 1.588) / 2\"\n            [attr.y]=\"(videoHeight * 0.25) / 2\"\n            [attr.width]=\"videoHeight * 0.75 * 1.588\"\n            [attr.height]=\"videoHeight * 0.75\"\n            rx=\"25\"\n          />\n        </clipPath>\n      </defs>\n    </svg> -->\n\n      <app-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\n        fxFlex\n        [trigger]=\"trigger\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"nextWebcamObservable\"\n        (cameraSwitched)=\"cameraWasSwitched($event)\"\n        (initError)=\"handleInitError($event)\"\n        type=\"selfie\"\n        [width]=\"width\"\n        [height]=\"height\"\n        (destroyed)=\"cameraOff($event)\"\n      >\n      </app-webcam>\n    </ng-container>\n    <div\n      fxLayout=\"row\"\n      fxFlex\n      class=\"previewData\"\n      *ngIf=\"preview\"\n      style=\"z-index: 20; position: absolute; width: 100%; height: 100%\"\n    >\n      <div\n        class=\"scanPreview\"\n        fxFlex\n        fxLayout=\"column\"\n        *ngIf=\"!error && !scaning\"\n      >\n        <div\n          fxFlex\n          class=\"image\"\n          [style.background-image]=\"'url(' + preview + ')'\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <footer fxLayout=\"row\" class=\"p-8\">\n    <button\n      [disabled]=\"!cameraReady\"\n      class=\"w-100-p\"\n      *ngIf=\"!preview\"\n      mat-raised-button\n      (click)=\"scan()\"\n    >\n      <ng-container>\n        TAKE SELFIE\n      </ng-container>\n    </button>\n\n    <div\n      class=\"w-100-p\"\n      *ngIf=\"preview\"\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      fxFlex\n    >\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n        RETRY\n      </button>\n\n      <button\n        [disabled]=\"error\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"continue()\"\n      >\n      CONTINUE\n\n      </button>\n    </div>\n  </footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5}.element{margin-bottom:8px}.element label{font-size:14px}.element div{font-size:18px}.wraper{position:relative;overflow:hidden}h3{color:#459ae5;font-size:16px}.preview{width:100%;border-radius:1%}.documentTypeWraper{width:400px}.documentTypeWraper .label{font-size:14px;margin-bottom:20px}.documentTypeWraper button{box-shadow:none}.overPane{position:absolute;width:100%;height:100%;top:0;left:0}.overPane app-webcam{clip-path:url(#myClip)}.subhead{height:55px;padding-top:8px}.rectangle{z-index:2;position:absolute;top:50%;left:50%;width:85.6mm;height:53.98mm;transform:translate(-50%,-50%);box-sizing:border-box;border:2px dashed #459be5;border-radius:3mm}.mask{z-index:1;position:absolute;width:100%;height:100%;background-position:center center;background-size:380mm;background-repeat:no-repeat}.label{font-size:11px;margin-top:4px}footer button{box-shadow:none!important;height:45px;min-height:45px;border:1px solid rgba(0,0,0,.12);text-transform:uppercase}h4{font-size:16px}.images label{font-size:11px;color:#888;line-height:20px}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px}.error .title{font-size:22px}.error ul{font-size:18px}.photo{width:120px;height:120px;overflow:hidden}.signature{width:200px}mat-card{box-shadow:none!important}.scanBlastWraper button{text-transform:uppercase}.scanBlastWraper.mobile mat-card{margin:4px!important}.scanBlastWraper.mobile .description{font-size:12px;flex-direction:row!important}.scanBlastWraper.mobile .description .imgWrap{padding:0!important}.scanBlastWraper.mobile .description .btnActions{position:absolute;right:0}.scanBlastWraper.mobile .description button{font-size:11px!important;margin:0!important;position:absolute;right:16px}.scanBlastWraper.mobile .description button.rotateButton{top:58px}.scanBlastWraper.mobile .description button.remButton{top:8px}.scanBlastWraper.mobile .description button mat-icon{margin:0!important}.scanBlastWraper.mobile .description button div.label{display:none}.mobile .scanBlast button{font-size:11px!important}.scanBlast{display:flex;flex-direction:row;flex:1;padding:0 4px}.scanBlast mat-card{padding:0;box-shadow:none;margin:8px 4px;flex:1}.scanBlast mat-card .head{display:flex;flex-direction:row;align-items:center;justify-items:center;border-bottom:1px solid rgba(0,0,0,.12);height:60px;padding:8px}.scanBlast mat-card .head.small{height:30px!important;padding:4px 8px!important}.scanBlast mat-card .head.small .title{font-size:12px!important;margin-left:4px!important}.scanBlast mat-card .head button{max-width:120px;height:40px;box-shadow:none;border:1px solid rgba(0,0,0,.12)}.scanBlast mat-card .head .title{margin-left:16px;color:#459ae5;font-size:16px}.scanBlast mat-card .content{margin:8px;flex:1}.scanBlast mat-card .description{text-align:center;color:#888;font-size:14px}.scanBlast mat-card .actions{background-color:#e9e9e9;display:flex;flex-direction:row}.scanBlast mat-card .actions .mat-button-disabled{background-color:#fff!important}.scanBlast mat-card .actions button{box-shadow:none;width:50%;margin:8px;height:40px;font-size:12px}.scanBlast mat-card .actions button mat-icon{margin-right:8px}.scanBlast mat-card .previewPlaceholder{flex:1;border-radius:6px;display:flex;flex-direction:column}.scanBlast mat-card .previewPlaceholder .description{display:flex;flex:1;flex-direction:column;justify-content:center}.scanBlast mat-card .previewPlaceholder button{box-shadow:none;margin-top:8px;height:40px;font-size:12px}.scanBlast mat-card .previewPlaceholder button mat-icon{margin-right:8px}.scanBlast mat-card .previewPlaceholder .imgWrap{flex-direction:column;flex:1;padding:8px;background-color:#f5f5f5;border-radius:4px}.scanBlast mat-card .previewPlaceholder .imgWrap img{width:100%;border-radius:4px}.scanBlast mat-card .previewPlaceholder .imgWrap .image{background-position:center;background-repeat:no-repeat;background-size:contain}.mr-4{margin-right:4px}.ml-4{margin-left:4px}.p-16{padding:16px}.p-8{padding:8px}.py-16{padding:16px 0}.w-100-p{width:100%}.scanPreview{padding:16px}.scanPreview .image{background-position:center;background-repeat:no-repeat;background-size:contain}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.summary label{font-size:12px;color:#888;margin-top:2px}.summary .name{font-size:14px}.selfieContainer{display:flex;flex-direction:column;margin-bottom:20px}.selfieContainer button{box-shadow:none;border:1px solid rgba(0,0,0,.12)}.selfieContainer .selfie{margin:8px auto;width:120px;height:120px;border-radius:60px;border:1px solid rgba(0,0,0,.12)}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: WebcamComponent, selector: "app-webcam", inputs: ["imageHandler", "id", "type", "width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched", "videoReady", "destroyed"] }, { kind: "directive", type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanSelfieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-scan-selfie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"page-header\" fxLayout=\"row\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">Selfie</div>\n\n  <span fxFlex></span>\n  <ng-container\n    *ngIf=\"\n      documentTypeSelected &&\n      !result &&\n      !error &&\n      multipleWebcamsAvailable &&\n      !preview\n    \"\n  >\n    <div class=\"separator\"></div>\n    <div style=\"padding: 0px 16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <mat-form-field\n          style=\"font-size: 14px; width: 200px; margin-top: 8px\"\n          class=\"w-200 mr-16 mt-8\"\n        >\n          <mat-label> Camera </mat-label>\n          <mat-select\n            (selectionChange)=\"selectCamera($event)\"\n            [(ngModel)]=\"deviceId\"\n          >\n            <mat-option\n              *ngFor=\"let device of mediaDevices\"\n              [value]=\"device.deviceId\"\n            >\n              {{ device.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n  <!-- <ng-container *ngIf=\"type === 'desktop'\">\n    <div class=\"separator\"></div>\n    <button mat-button (click)=\"sendMobile()\">\n      <mat-icon>tablet_mac</mat-icon>\n    </button>\n\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container> -->\n</header>\n\n<div *ngIf=\"!result\" fxFlex fxLayout=\"column\">\n  <div fxFlex #wraper class=\"wraper\" fxLayout=\"row\">\n    <div\n      style=\"\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        right: 0px;\n        bottom: 0px;\n        z-index: 20;\n        background-color: whitesmoke;\n      \"\n      *ngIf=\"!cameraReady && !preview\"\n    >\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <ng-container *ngIf=\"!error\">\n      <!-- <div\n      class=\"rectangle\"\n      [ngStyle]=\"{\n        'width.px': videoHeight * 0.75 * 1.588,\n        'height.px': videoHeight * 0.75\n      }\"\n    ></div>\n    <svg\n      *ngIf=\"videoWidth\"\n      style=\"position: absolute; left: 0px; top: 0px\"\n      width=\"0\"\n      height=\"0\"\n    >\n      <defs>\n        <clipPath id=\"myClip\">\n          <rect\n            stroke-width=\"6\"\n            stroke-color=\"red\"\n            [attr.x]=\"(videoWidth - videoHeight * 0.75 * 1.588) / 2\"\n            [attr.y]=\"(videoHeight * 0.25) / 2\"\n            [attr.width]=\"videoHeight * 0.75 * 1.588\"\n            [attr.height]=\"videoHeight * 0.75\"\n            rx=\"25\"\n          />\n        </clipPath>\n      </defs>\n    </svg> -->\n\n      <app-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\n        fxFlex\n        [trigger]=\"trigger\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"nextWebcamObservable\"\n        (cameraSwitched)=\"cameraWasSwitched($event)\"\n        (initError)=\"handleInitError($event)\"\n        type=\"selfie\"\n        [width]=\"width\"\n        [height]=\"height\"\n        (destroyed)=\"cameraOff($event)\"\n      >\n      </app-webcam>\n    </ng-container>\n    <div\n      fxLayout=\"row\"\n      fxFlex\n      class=\"previewData\"\n      *ngIf=\"preview\"\n      style=\"z-index: 20; position: absolute; width: 100%; height: 100%\"\n    >\n      <div\n        class=\"scanPreview\"\n        fxFlex\n        fxLayout=\"column\"\n        *ngIf=\"!error && !scaning\"\n      >\n        <div\n          fxFlex\n          class=\"image\"\n          [style.background-image]=\"'url(' + preview + ')'\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <footer fxLayout=\"row\" class=\"p-8\">\n    <button\n      [disabled]=\"!cameraReady\"\n      class=\"w-100-p\"\n      *ngIf=\"!preview\"\n      mat-raised-button\n      (click)=\"scan()\"\n    >\n      <ng-container>\n        TAKE SELFIE\n      </ng-container>\n    </button>\n\n    <div\n      class=\"w-100-p\"\n      *ngIf=\"preview\"\n      fxLayout=\"row\"\n      fxLayoutAlign=\"start center\"\n      fxFlex\n    >\n      <button fxFlex class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n        RETRY\n      </button>\n\n      <button\n        [disabled]=\"error\"\n        fxFlex\n        class=\"ml-4\"\n        mat-raised-button\n        (click)=\"continue()\"\n      >\n      CONTINUE\n\n      </button>\n    </div>\n  </footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5}.element{margin-bottom:8px}.element label{font-size:14px}.element div{font-size:18px}.wraper{position:relative;overflow:hidden}h3{color:#459ae5;font-size:16px}.preview{width:100%;border-radius:1%}.documentTypeWraper{width:400px}.documentTypeWraper .label{font-size:14px;margin-bottom:20px}.documentTypeWraper button{box-shadow:none}.overPane{position:absolute;width:100%;height:100%;top:0;left:0}.overPane app-webcam{clip-path:url(#myClip)}.subhead{height:55px;padding-top:8px}.rectangle{z-index:2;position:absolute;top:50%;left:50%;width:85.6mm;height:53.98mm;transform:translate(-50%,-50%);box-sizing:border-box;border:2px dashed #459be5;border-radius:3mm}.mask{z-index:1;position:absolute;width:100%;height:100%;background-position:center center;background-size:380mm;background-repeat:no-repeat}.label{font-size:11px;margin-top:4px}footer button{box-shadow:none!important;height:45px;min-height:45px;border:1px solid rgba(0,0,0,.12);text-transform:uppercase}h4{font-size:16px}.images label{font-size:11px;color:#888;line-height:20px}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px}.error .title{font-size:22px}.error ul{font-size:18px}.photo{width:120px;height:120px;overflow:hidden}.signature{width:200px}mat-card{box-shadow:none!important}.scanBlastWraper button{text-transform:uppercase}.scanBlastWraper.mobile mat-card{margin:4px!important}.scanBlastWraper.mobile .description{font-size:12px;flex-direction:row!important}.scanBlastWraper.mobile .description .imgWrap{padding:0!important}.scanBlastWraper.mobile .description .btnActions{position:absolute;right:0}.scanBlastWraper.mobile .description button{font-size:11px!important;margin:0!important;position:absolute;right:16px}.scanBlastWraper.mobile .description button.rotateButton{top:58px}.scanBlastWraper.mobile .description button.remButton{top:8px}.scanBlastWraper.mobile .description button mat-icon{margin:0!important}.scanBlastWraper.mobile .description button div.label{display:none}.mobile .scanBlast button{font-size:11px!important}.scanBlast{display:flex;flex-direction:row;flex:1;padding:0 4px}.scanBlast mat-card{padding:0;box-shadow:none;margin:8px 4px;flex:1}.scanBlast mat-card .head{display:flex;flex-direction:row;align-items:center;justify-items:center;border-bottom:1px solid rgba(0,0,0,.12);height:60px;padding:8px}.scanBlast mat-card .head.small{height:30px!important;padding:4px 8px!important}.scanBlast mat-card .head.small .title{font-size:12px!important;margin-left:4px!important}.scanBlast mat-card .head button{max-width:120px;height:40px;box-shadow:none;border:1px solid rgba(0,0,0,.12)}.scanBlast mat-card .head .title{margin-left:16px;color:#459ae5;font-size:16px}.scanBlast mat-card .content{margin:8px;flex:1}.scanBlast mat-card .description{text-align:center;color:#888;font-size:14px}.scanBlast mat-card .actions{background-color:#e9e9e9;display:flex;flex-direction:row}.scanBlast mat-card .actions .mat-button-disabled{background-color:#fff!important}.scanBlast mat-card .actions button{box-shadow:none;width:50%;margin:8px;height:40px;font-size:12px}.scanBlast mat-card .actions button mat-icon{margin-right:8px}.scanBlast mat-card .previewPlaceholder{flex:1;border-radius:6px;display:flex;flex-direction:column}.scanBlast mat-card .previewPlaceholder .description{display:flex;flex:1;flex-direction:column;justify-content:center}.scanBlast mat-card .previewPlaceholder button{box-shadow:none;margin-top:8px;height:40px;font-size:12px}.scanBlast mat-card .previewPlaceholder button mat-icon{margin-right:8px}.scanBlast mat-card .previewPlaceholder .imgWrap{flex-direction:column;flex:1;padding:8px;background-color:#f5f5f5;border-radius:4px}.scanBlast mat-card .previewPlaceholder .imgWrap img{width:100%;border-radius:4px}.scanBlast mat-card .previewPlaceholder .imgWrap .image{background-position:center;background-repeat:no-repeat;background-size:contain}.mr-4{margin-right:4px}.ml-4{margin-left:4px}.p-16{padding:16px}.p-8{padding:8px}.py-16{padding:16px 0}.w-100-p{width:100%}.scanPreview{padding:16px}.scanPreview .image{background-position:center;background-repeat:no-repeat;background-size:contain}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.summary label{font-size:12px;color:#888;margin-top:2px}.summary .name{font-size:14px}.selfieContainer{display:flex;flex-direction:column;margin-bottom:20px}.selfieContainer button{box-shadow:none;border:1px solid rgba(0,0,0,.12)}.selfieContainer .selfie{margin:8px auto;width:120px;height:120px;border-radius:60px;border:1px solid rgba(0,0,0,.12)}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ScanProvider }, { type: DialogsCoreProvider }, { type: i1$2.TranslateService }]; }, propDecorators: { type: [{
+                type: Input
+            }], actions: [{
+                type: Output
+            }], wraper: [{
+                type: ViewChild,
+                args: ['wraper']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class TurnDocumentComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        console.log(this.data);
+    }
+    close() {
+        console.log(this.dialogRef);
+        this.dialogRef.close();
+    }
+}
+TurnDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TurnDocumentComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+TurnDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TurnDocumentComponent, selector: "app-turndocuments", ngImport: i0, template: "<div class=\"inner\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <!-- <img\n    style=\"height: 240px; margin: 34px 0px;display: none;\"\n    [src]=\"'/assets/images/illustrations/' + images[type]\"\n  /> -->\n  <!-- <img style=\"width:60px;\" src=\"/assets/images/illustrations/door-lock.png\"> -->\n\n  <mat-icon>360</mat-icon>\n  <div class=\"text\">\n    <ng-container *ngIf=\"data.idScan === 'BACK'\">\n      Turn document and:\n      {{ \"pms.dialogs.components.scanProfile.captureBack\" | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"data.idScan === 'FRONT'\">\n      Turn document and:\n      {{ \"pms.dialogs.components.scanProfile.captureFront\" | translate }}\n    </ng-container>\n  </div>\n</div>\n\n<!--  -->\n\n<footer>\n  <button (click)=\"close()\" mat-raised-button>Ok</button>\n</footer>\n", styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;width:100%}.inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px 0}.inner mat-icon{width:60px;height:60px;font-size:60px}.inner .text{margin:20px 0}footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TurnDocumentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-turndocuments', template: "<div class=\"inner\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n  <!-- <img\n    style=\"height: 240px; margin: 34px 0px;display: none;\"\n    [src]=\"'/assets/images/illustrations/' + images[type]\"\n  /> -->\n  <!-- <img style=\"width:60px;\" src=\"/assets/images/illustrations/door-lock.png\"> -->\n\n  <mat-icon>360</mat-icon>\n  <div class=\"text\">\n    <ng-container *ngIf=\"data.idScan === 'BACK'\">\n      Turn document and:\n      {{ \"pms.dialogs.components.scanProfile.captureBack\" | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"data.idScan === 'FRONT'\">\n      Turn document and:\n      {{ \"pms.dialogs.components.scanProfile.captureFront\" | translate }}\n    </ng-container>\n  </div>\n</div>\n\n<!--  -->\n\n<footer>\n  <button (click)=\"close()\" mat-raised-button>Ok</button>\n</footer>\n", styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;width:100%}.inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px 0}.inner mat-icon{width:60px;height:60px;font-size:60px}.inner .text{margin:20px 0}footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class DialogsCoreProvider {
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+        this.components = {
+            ScanProfile: { component: ScanProfileComponent },
+            Loading: { component: LoadingComponent },
+            ConfirmComponent: { component: ConfirmComponent },
+            TurnDocumentComponent: { component: TurnDocumentComponent },
+            ScanSelfie: { component: ScanSelfieComponent },
+        };
+        this.blank = BlankComponent;
+    }
+    getComponent(name) {
+        if (!this.components[name]) {
+            console.warn('Component missing', name, this.components);
+        }
+        return this.components[name].component;
+    }
+    open(config, withComponent = true) {
+        // console.log(config);
+        const panelClass = config.panelClass ? config.panelClass : config.name;
+        const component = this.getComponent(config.name);
+        const dialogRef = this.matDialog.open(this.blank, {
+            panelClass,
+            data: {
+                data: config.data,
+                withComponent,
+                component,
+            },
+            autoFocus: false,
+            width: config.width || '',
+            height: config.height || '',
+            maxWidth: config.maxWidth || '',
+            minWidth: config.minWidth || '',
+            maxHeight: config.maxHeight || '',
+            minHeight: config.minHeight || '',
+            position: config.position || {},
+            hasBackdrop: config.hasBackdrop === undefined ? true : config.hasBackdrop,
+            disableClose: config.disableClose === undefined ? true : config.disableClose,
+        });
+        return dialogRef;
+    }
+    scanProfile(data) {
+        return this.open({
+            name: 'ScanProfile',
+            panelClass: 'ScanProfileComponent',
+            data,
+        });
+    }
+    // Generic loading dialog
+    loading(title = '') {
+        return this.open({
+            name: 'Loading',
+            data: { title },
+        });
+    }
+    alert(title, text) {
+        return this.open({
+            name: 'ConfirmComponent',
+            maxWidth: '600px',
+            panelClass: 'DialogNoPadding',
+            minWidth: '440px',
+            data: { title, text, alert: true },
+        });
+    }
+    turnDocument(idScan) {
+        return this.open({
+            name: 'TurnDocumentComponent',
+            maxWidth: '400px',
+            panelClass: 'DialogNoPadding',
+            minWidth: '300px',
+            data: { idScan },
+        }).afterClosed();
+    }
+    // public scanMobile(data: any) {
+    //   return this.open({
+    //     name: 'ScanMobileComponent',
+    //     maxWidth: '600px',
+    //     panelClass: 'DialogNoPadding',
+    //     minWidth: '440px',
+    //     data,
+    //   });
+    // }
+    scanSelfie(data) {
+        return this.open({
+            name: 'ScanSelfie',
+            panelClass: 'ScanProfileComponent',
+            data,
+        });
+    }
+}
+DialogsCoreProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsCoreProvider, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogsCoreProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsCoreProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsCoreProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
+
+class ScanProfileComponent extends BaseComponent {
+    constructor(dialogs, dialogRef) {
+        super();
+        this.dialogs = dialogs;
+        this.dialogRef = dialogRef;
+        this.type = 'desktop';
+        this.showDialog = false;
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() {
+        this.__destroy();
+        console.log('DES');
+    }
+    actions(event) {
+        console.log(event);
+        switch (event.type) {
+            case 'turnDocumentOver':
+                this.dialogs.turnDocument(event.side).subscribe(() => {
+                    this.showDialog = false;
+                });
+                break;
+        }
+    }
+    close() {
+        this.dialogRef?.close();
+    }
+}
+ScanProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProfileComponent, deps: [{ token: DialogsCoreProvider }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ScanProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScanProfileComponent, selector: "app-scan-profile", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<header class=\"page-header\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">Scan</div>\n\n  <span fxFlex></span>\n\n  <!-- <mat-slide-toggle style=\"margin:0px 20px\" [(ngModel)]=\"isDebug\"\n    >Debug</mat-slide-toggle\n  > -->\n\n  <ng-container\n\n  >\n    <div class=\"separator\"></div>\n    <div style=\"padding: 0px 16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n       <ngx-scan-camera-switch></ngx-scan-camera-switch>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type === 'desktop'\">\n    <!-- <div  class=\"separator\"></div>\n  <button mat-button (click)=\"sendMobile()\">\n    <mat-icon>tablet_mac</mat-icon>\n  </button> -->\n\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</header>\n\n<ngx-scan (actions)=\"actions($event)\" [showDialog]=\"showDialog\" [dialogs]=\"dialogs\"></ngx-scan>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden}.page-header{display:flex;flex-direction:row;align-items:center}.page-header button{height:100%}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ScanComponent, selector: "ngx-scan", inputs: ["type", "dialogs", "showDialog"], outputs: ["actions"] }, { kind: "component", type: CameraSwitchComponent, selector: "ngx-scan-camera-switch" }, { kind: "directive", type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-scan-profile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"page-header\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">Scan</div>\n\n  <span fxFlex></span>\n\n  <!-- <mat-slide-toggle style=\"margin:0px 20px\" [(ngModel)]=\"isDebug\"\n    >Debug</mat-slide-toggle\n  > -->\n\n  <ng-container\n\n  >\n    <div class=\"separator\"></div>\n    <div style=\"padding: 0px 16px\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n       <ngx-scan-camera-switch></ngx-scan-camera-switch>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type === 'desktop'\">\n    <!-- <div  class=\"separator\"></div>\n  <button mat-button (click)=\"sendMobile()\">\n    <mat-icon>tablet_mac</mat-icon>\n  </button> -->\n\n    <div class=\"separator\"></div>\n\n    <button mat-button (click)=\"close()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</header>\n\n<ngx-scan (actions)=\"actions($event)\" [showDialog]=\"showDialog\" [dialogs]=\"dialogs\"></ngx-scan>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden}.page-header{display:flex;flex-direction:row;align-items:center}.page-header button{height:100%}\n", ".page-header{z-index:2000;height:64px;padding:0;background-color:#fff;border-bottom:1px solid rgba(0,0,0,.12)}.page-header .title{padding-left:24px;line-height:64px;font-size:18px}.page-header .separator{width:1px;background-color:#0000001f;height:100%}.page-header .total{line-height:64px}.page-header .total span{font-weight:700}.page-footer{height:64px}.page-footer button{margin-left:24px;box-shadow:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DialogsCoreProvider }, { type: i1$4.MatDialogRef }]; }, propDecorators: { type: [{
+                type: Input
+            }] } });
+
+class DialogsModule {
+}
+DialogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DialogsModule, declarations: [ScanProfileComponent,
+        BlankComponent,
+        LoadingComponent,
+        ConfirmComponent,
+        TurnDocumentComponent,
+        ScanSelfieComponent], imports: [QRCodeModule,
+        ReactiveFormsModule,
+        CommonModule,
+        FormsModule,
+        AppFormModule,
+        TranslateModule,
+        MaterialModule,
+        CoreComponentsModule,
+        CorePipesModule,
+        FlexModule,
+        FlexLayoutModule], exports: [ScanProfileComponent,
+        LoadingComponent,
+        BlankComponent,
+        TurnDocumentComponent,
+        MaterialModule,
+        ScanSelfieComponent] });
+DialogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsModule, providers: [DialogsCoreProvider], imports: [QRCodeModule,
+        ReactiveFormsModule,
+        CommonModule,
+        FormsModule,
+        AppFormModule,
+        TranslateModule,
+        MaterialModule,
+        CoreComponentsModule,
+        CorePipesModule,
+        FlexModule,
+        FlexLayoutModule, MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ScanProfileComponent,
+                        BlankComponent,
+                        LoadingComponent,
+                        ConfirmComponent,
+                        TurnDocumentComponent,
+                        ScanSelfieComponent,
+                    ],
+                    exports: [
+                        ScanProfileComponent,
+                        LoadingComponent,
+                        BlankComponent,
+                        TurnDocumentComponent,
+                        MaterialModule,
+                        ScanSelfieComponent,
+                    ],
+                    imports: [
+                        QRCodeModule,
+                        ReactiveFormsModule,
+                        CommonModule,
+                        FormsModule,
+                        AppFormModule,
+                        TranslateModule,
+                        MaterialModule,
+                        CoreComponentsModule,
+                        CorePipesModule,
+                        FlexModule,
+                        FlexLayoutModule,
+                    ],
+                    providers: [DialogsCoreProvider],
+                }]
+        }] });
+
+class HttpErrorInterceptor {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    intercept(req, next) {
+        //console.log(req.url);
+        if (req.url.indexOf('auth') >= 0 || req.url.indexOf('/assets/') >= 0) {
+            return next.handle(req);
+        }
+        const authProvider = this.injector.get(AuthProvider);
+        this.inflightAuthRequest = authProvider.accesToken;
+        return this.inflightAuthRequest.pipe(share(), switchMap((token) => {
+            // unset request inflight
+            this.inflightAuthRequest = null;
+            const transaction = req.headers.get('TransactionID');
+            const authReq = req.clone({
+                headers: this.getHeaders(token, transaction || ''),
+            });
+            return next.handle(authReq);
+        }), catchError((err) => {
+            let tokenExpired = false;
+            if (err.errors) {
+                const find = err.erros.find((es) => es.indexOf('Invalid token') > -1);
+                tokenExpired = find ? true : false;
+            }
+            console.log(err);
+            if (err.status === 401 || tokenExpired) {
+                authProvider.resetToken();
+                return this.intercept(req, next);
+            }
+            else {
+                return throwError(() => new Error('' + (err && err.status ? ':' + err.status : '')));
+            }
+        }));
+    }
+    getHeaders(token, TransactionID) {
+        if (TransactionID) {
+            return new HttpHeaders({
+                'Content-Type': 'application/json',
+                Authorization: token,
+                TransactionID,
+            });
+        }
+        return new HttpHeaders({
+            'Content-Type': 'application/json',
+            Authorization: token,
+        });
+    }
+}
+HttpErrorInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpErrorInterceptor, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+HttpErrorInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpErrorInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HttpErrorInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class webRtcProvider {
+    constructor() {
+        this.pc = new RTCPeerConnection();
+    }
+    connect(id = 1) {
+        this.subject = webSocket('wss://localhost:3000?id=' + id);
+    }
+    setup() {
+        this.connect(1);
+        // try {
+        //   this.pc = new RTCPeerConnection({
+        //     iceServers: [
+        //       { urls: 'stun:stun.services.mozilla.com' },
+        //       { urls: 'stun:stun.l.google.com:19302' },
+        //     ],
+        //   });
+        // } catch (error) {
+        //   console.log(error);
+        //   this.pc = new RTCPeerConnection({
+        //     iceServers: [
+        //       { urls: 'stun:stun.services.mozilla.com' },
+        //       { urls: 'stun:stun.l.google.com:19302' },
+        //     ],
+        //   });
+        // }
+        // this.pc.onicecandidate = (event) => {
+        //   event.candidate
+        //     ? this.sendMessage({ ice: event.candidate })
+        //     : console.log('Sent All Ice');
+        // };
+        // if (this.pc) {
+        //   from(this.pc.createOffer())
+        //     .pipe(switchMap((offer) => from(this.pc.setLocalDescription(offer))))
+        //     .subscribe((data: any) => {
+        //       this.sendMessage({
+        //         type: 'offer',
+        //         sdp: this.pc.localDescription,
+        //       });
+        //     });
+        // }
+    }
+    sendMessage(data) {
+        console.log(data);
+        this.subject.next(JSON.stringify(data));
+    }
+}
+webRtcProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: webRtcProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+webRtcProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: webRtcProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: webRtcProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class NgxScandocModule {
+    static forRoot(config) {
+        return {
+            ngModule: NgxScandocModule,
+            providers: [
+                AuthProvider,
+                { provide: 'configAuth', useValue: config.auth },
+                ScanProvider,
+                { provide: 'config', useValue: config.scan },
+                {
+                    provide: HTTP_INTERCEPTORS,
+                    useClass: HttpErrorInterceptor,
+                    multi: true,
+                },
+            ],
+        };
+    }
+}
+NgxScandocModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxScandocModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, imports: [CoreComponentsModule, DialogsModule], exports: [CoreComponentsModule, DialogsModule] });
+NgxScandocModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, imports: [CoreComponentsModule, DialogsModule, CoreComponentsModule, DialogsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxScandocModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CoreComponentsModule, DialogsModule],
+                    exports: [CoreComponentsModule, DialogsModule],
                 }]
         }] });
 
@@ -59,5 +4194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgxScandocComponent, NgxScandocModule, NgxScandocService };
+export { AppFormModule, AuthProvider, BlankComponent, CameraSwitchComponent, CoreComponentsModule, CorePipesModule, DialogsCoreProvider, DialogsModule, HttpErrorInterceptor, LoadingComponent, MaterialModule, NgxScandocModule, SafeResourceUrlPipe, ScanComponent, ScanFieldsProvider, ScanProfileComponent, ScanProvider, ScanSelfieComponent, TranslationProvider, TurnDocumentComponent, WebcamComponent, WebcamModule, webRtcProvider };
 //# sourceMappingURL=ngx-scandoc.mjs.map