ngx-scandoc 1.0.1 → 1.0.3

package/fesm2020/ngx-scandoc.mjs

@@ -1,66 +1,65 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule, Pipe, Injectable, Inject, ViewContainerRef, ChangeDetectionStrategy } 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, of, Subject, throwError } from 'rxjs';
-import { tap, switchMap, map, share, catchError } from 'rxjs/operators';
+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 * as i1$1 from '@angular/platform-browser';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i3 from '@angular/material/button';
+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 i12 from '@angular/material/card';
+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 i8 from '@angular/material/core';
+import * as i6$1 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$3 from '@angular/material/dialog';
+import * as i1$4 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i9 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 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 * as i1$4 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i7 from '@angular/material/select';
+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 * as i6 from '@angular/forms';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { v4 } from 'uuid';
-import moment from 'moment';
-import * as i1$2 from '@angular/common/http';
-import { HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
-import jwt_decode from 'jwt-decode';
-import * as i4 from '@angular/flex-layout';
-import { FlexModule, FlexLayoutModule } from '@angular/flex-layout';
-import * as i5$1 from '@angular/flex-layout/extended';
-import * as i4$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { webSocket } from 'rxjs/webSocket';
-import * as i3$1 from 'angularx-qrcode';
-import { QRCodeModule } from 'angularx-qrcode';
-import * as i6$1 from '@angular/material/form-field';
-import * as i8$1 from '@ngx-formly/core';
-import { FormlyModule } from '@ngx-formly/core';
 import { FieldType, FormlyMaterialModule } from '@ngx-formly/material';
-import * as i3$2 from 'ngx-avatars';
+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';
 
 /**
  * Container class for a captured webcam image
@@ -402,12 +401,63 @@ addEventListener('message', ({ data }) => {
 });
 `;
 
-class WebcamComponent {
-    constructor(breakpointObserver, platform, cd, zone) {
+class BaseComponent {
+    constructor() {
+        this.$destroy = new Subject();
+    }
+    __subs(observable) {
+        return observable.pipe(takeUntil(this.$destroy));
+    }
+    __destroy() {
+        this.$destroy.next(true);
+        this.$destroy.complete();
+    }
+}
+
+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',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+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 */
@@ -614,6 +664,7 @@ class WebcamComponent {
                 this.video.nativeElement.setAttribute('width', this.canvasSize.width);
             }
         }
+        this.drawRectangle();
         this.cd.detectChanges();
     }
     setupWorker() {
@@ -637,14 +688,14 @@ class WebcamComponent {
     ngAfterViewInit() {
         this.setupWorker();
         if (this.imageHandler) {
-            this.imageHandler.subscribe((resp) => {
+            this.__subs(this.imageHandler).subscribe((resp) => {
                 if (resp.type === 'stop') {
                     this.worker?.postMessage({ type: 'stop' });
                 }
             });
         }
-        this.breakpointObserver
-            .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
+        this.__subs(this.breakpointObserver
+            .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]))
             .subscribe((state) => {
             if (this.platform.IOS || this.platform.ANDROID) {
                 // this.landscape = state.breakpoints[Breakpoints.HandsetLandscape];
@@ -699,6 +750,7 @@ class WebcamComponent {
             });
             this.nativeVideoElement.srcObject = null;
         }
+        this.__destroy();
         // this.nativeVideoElement.src = null;
         // this.nativeVideoElement.srcObject = null;
     }
@@ -925,6 +977,8 @@ class WebcamComponent {
                     frameRate: { min: 20, ideal: 30, max: 31 },
                 };
             }
+            //  desired.height.ideal = 1000;
+            //  desired.width.ideal = 1000;
             if (desired.height.ideal && desired.height.ideal >= 1600) {
                 desired.height.ideal = 1600;
                 desired.width.ideal = 1600;
@@ -1054,17 +1108,19 @@ class WebcamComponent {
     get cardRectangle() {
         const _canvas = this.canvas.nativeElement;
         const docSize = this.type === 'selfie' ? 1 : 86 / 55;
+        console.log(_canvas.width, _canvas.height);
         let padding = 10;
         let rWidth = _canvas.width - 2 * padding;
         let rHeight = rWidth / docSize;
         let top = (_canvas.height - rHeight) / 2;
-        if (!this.isMobile) {
+        if ((!this.isMobile && _canvas.width !== _canvas.height)) {
             padding = 40;
             rHeight = _canvas.height - 2 * padding;
             rWidth = rHeight * docSize;
             top = (_canvas.height - rHeight) / 2;
             padding = (_canvas.width - rWidth) / 2;
         }
+        console.log(padding, top, rWidth, rHeight);
         return { padding, top, rWidth, rHeight };
     }
     get snapRectangle() {
@@ -1084,6 +1140,7 @@ class WebcamComponent {
         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(() => {
@@ -1189,12 +1246,12 @@ WebcamComponent.DEFAULT_VIDEO_OPTIONS = {
 };
 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 }], 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 }], 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      <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"] }] });
+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      <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 }]; }, propDecorators: { imageHandler: [{
+            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
@@ -1269,256 +1326,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-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, imports: [CommonModule, WebcamModule], exports: [WebcamModule] });
-CoreComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, imports: [CommonModule, WebcamModule, WebcamModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CoreComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, WebcamModule],
-                    declarations: [],
-                    exports: [WebcamModule],
-                }]
-        }] });
-
-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$1.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$1.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: [
-                        SafeResourceUrlPipe,
-                    ],
-                }]
-        }] });
-
-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 AuthProvider {
+class ScanProvider {
     constructor(http, config) {
         this.http = http;
         this.config = config;
-        this.token = '';
-        this.tokenTimestamps = {
-            exp: 0,
-            iat: 0,
-        };
-    }
-    setConfig() { }
-    get tokenExpired() {
-        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$2.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$2.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['configAuth']
-                }] }]; } });
-
-class ScanProvider {
-    constructor(http, auth, config) {
-        this.http = http;
-        this.auth = auth;
-        this.config = config;
-        this.enableVerification = true;
-        this.canStoreImages = true;
-    }
-    genderList() {
-        return {
-            M: 'MALE',
-            'M/M': 'MALE',
-            F: 'FEMALE',
-            'F/F': 'FEMALE',
+        this.enableVerification = true;
+        this.canStoreImages = true;
+    }
+    genderList() {
+        return {
+            M: 'MALE',
+            'M/M': 'MALE',
+            F: 'FEMALE',
+            'F/F': 'FEMALE',
         };
     }
     stateless(DocumentFaceImage, LiveFaceImage) {
@@ -1975,1104 +1795,1663 @@ class ScanProvider {
         });
     }
 }
-ScanProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProvider, deps: [{ token: i1$2.HttpClient }, { token: AuthProvider }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Injectable });
+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$2.HttpClient }, { type: AuthProvider }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['config']
                 }] }]; } });
 
-class BlankComponent {
-    constructor(dialogRef, data, componentFactoryResolver, cd) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.cd = cd;
-        this.initSet = false;
-    }
-    setModel(model) {
-        this.data.data.model = model;
-        this.init();
+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.initSet = true;
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);
-        this.body?.clear();
-        const componentRef = this.body?.createComponent(componentFactory);
-        componentRef.instance.data = this.data.data;
-        componentRef.instance.dialogRef = this.dialogRef;
-        if (componentRef.instance.init) {
-            componentRef.instance.init();
-        }
-        this.cd.detectChanges();
-    }
-    ngAfterViewInit() {
-        if (!this.initSet) {
-            this.init();
-        }
+        this.breakpoint$.subscribe((v) => {
+            this.isMobile = !v.matches;
+            document.body.className = this.isMobile ? 'mobile' : 'desktop';
+        });
     }
 }
-BlankComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BlankComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ComponentFactoryResolver }, { 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$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i0.ComponentFactoryResolver }, { 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: i1$4.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" }]
-        }] });
+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 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',
+class AuthProvider {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJDbGllbnQiOiJQcm90ZWwiLCJTdWJDbGllbnQiOiJIMSIsIklzc3VlVGltZSI6IjA5LjAzLjIwMjIsIDA5OjQ3OjAwIn0.u_FP16TGuZ4LtGbsIxBjy8vCJJuTyBbRs2gPPZU2vgaeSvLdfi1iEVcRjRVh873hkluOtotUGmw0v3Jdh-cHgQ';
+        this.tokenTimestamps = {
+            exp: 0,
+            iat: 0,
         };
-        this.options = {};
     }
-    onEnterPress(e) {
-        this.action(true);
+    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;
     }
-    onEscapePress(e) {
-        this.action(false);
+    resetToken() {
+        this.token = '';
     }
-    ngOnInit() {
-        console.log(this.data);
-        this.options = this.data.options || {};
-        this.type = this.options.type || this.data.type || 'prompt';
+    get accesToken() {
+        return this.tokenExpired ? this.getToken() : of(this.token);
     }
-    action(key) {
-        this.dialogRef.close(key);
+    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 };
+        }));
     }
-    close() { }
 }
-ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ConfirmComponent, deps: [{ token: i1$3.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: i3.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.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.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.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$1.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: i4$1.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$3.MatDialogRef }, { type: undefined, decorators: [{
+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: [MAT_DIALOG_DATA]
-                }] }]; }, propDecorators: { onEnterPress: [{
-                type: HostListener,
-                args: ['document:keyup.enter', ['$event']]
-            }], onEscapePress: [{
-                type: HostListener,
-                args: ['document:keyup.escape', ['$event']]
-            }] } });
+                    args: ['configAuth']
+                }] }]; } });
 
-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,
-        //       });
-        //     });
-        // }
+class TranslationProvider {
+    constructor(translate) {
+        this.translate = translate;
     }
-    sendMessage(data) {
-        console.log(data);
-        this.subject.next(JSON.stringify(data));
+    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;
     }
 }
-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: [{
+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 []; } });
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
 
-class ScanMobileComponent {
-    constructor(dialogRef, data, rtcProvider) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.rtcProvider = rtcProvider;
-    }
-    ngOnInit() {
-        this.rtcProvider.setup();
-        this.rtcProvider.subject.subscribe((msg) => {
-            console.log('[MSG]' + msg);
-        }, // Called whenever there is a message from the server.
-        (err) => console.log(err), // Called if at any point WebSocket API signals some kind of error.
-        () => console.log('complete') // Called when connection is closed (for whatever reason).
-        );
-        console.log(this.data);
-        const path = 'https://192.168.1.104:4200/';
-        this.code = path + 'mobile?id=1';
-    }
-    close() {
-        this.dialogRef.close();
-    }
-    action() { }
-}
-ScanMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanMobileComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: webRtcProvider }], target: i0.ɵɵFactoryTarget.Component });
-ScanMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScanMobileComponent, selector: "app-scan-mobile", ngImport: i0, template: "<header class=\"page-header\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">\n    Send to mobile\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<qrcode [qrdata]=\"code\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"></qrcode>\n\n\n</div>\n\n<!--  -->\n\n<footer>\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button (click)=\"close()\" mat-raised-button>\n      {{ \"core.page.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"action()\" color=\"accent\" mat-raised-button>\n      <ng-container>\n        {{ \"core.page.ok\" | 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: "component", type: i3$1.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i3.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.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.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.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$1.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: i4$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanMobileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-scan-mobile', template: "<header class=\"page-header\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"title\" ngClass.lt-sm=\"title-small\">\n    Send to mobile\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<qrcode [qrdata]=\"code\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"></qrcode>\n\n\n</div>\n\n<!--  -->\n\n<footer>\n  <div class=\"actions\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button (click)=\"close()\" mat-raised-button>\n      {{ \"core.page.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"action()\" color=\"accent\" mat-raised-button>\n      <ng-container>\n        {{ \"core.page.ok\" | 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$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: webRtcProvider }]; } });
-
-class ScanSelfieComponent {
-    constructor(cd, scanProvider, dialogs, 
-    //   private formProvider: ScanFieldsProvider,
-    translate) {
-        this.cd = cd;
-        this.scanProvider = scanProvider;
-        this.dialogs = dialogs;
+class ScanFieldsProvider {
+    constructor(translate, provider) {
         this.translate = translate;
-        this.scanBlastData = [
-            {
-                title: 'pms.dialogs.components.scanProfile.front',
-                description: 'pms.dialogs.components.scanProfile.frontDescription',
-                side: 'FRONT',
-            },
+        this.provider = provider;
+    }
+    update() {
+        return [
             {
-                title: 'pms.dialogs.components.scanProfile.back',
-                description: 'pms.dialogs.components.scanProfile.backDescription',
-                disabled: true,
-                side: 'BACK',
+                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)),
             },
         ];
-        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);
-            };
-        });
+    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));
     }
-    getImgBase64(num) {
-        return this.scanBlastData[num].image.dataUrl.split(',')[1];
+}
+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();
     }
-    scanBlastFinish() {
-        if (this.type === 'mobile') {
-            this.actions.emit({ data: this.scanBlastData });
-            this.retake();
-            return;
+    ngOnInit() {
+        this.fields = this.formProvider.document();
+    }
+    ngOnDestroy() { }
+    selfie() {
+        this.action.emit({ selfie: true });
+    }
+}
+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: '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 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();
         }
-        const loading = this.dialogs.loading();
-        this.scaning = true;
-        const payload = {
+    }
+    resetLogData() {
+        this.logData = {
+            Request: null,
+            Response: null,
+            ExpectedOutput: null,
             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;
+    }
+    ngOnDestroy() {
+        if (this.scanTimeout) {
+            clearTimeout(this.scanTimeout);
         }
-        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;
-        });
+        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() {
-        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);
+        this.documentTypeSelected = false;
+        setTimeout(() => {
+            this.selectedSide.image = this.webcamImage;
+            if (this.selectedSide.side === 'FRONT') {
+                this.scanBlastData[1].disabled = false;
+            }
+            this.cd.detectChanges();
+        }, 200);
     }
     scan() {
-        console.log('SCAN');
-        this.triggerSnapshot();
-        this.scanDatas[0] = true;
+        // this.triggerSnapshot();
+        //   this.scanDatas[0] = true;
+        // if (this.scanTimeout) {
+        //   clearTimeout(this.scanTimeout);
+        // }
+        // this.scanTimeout = setTimeout(() => {
+        //   this.scan();
+        // }, 1);
     }
-    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;
+    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());
+            }
         });
-        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: i4$1.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: i6.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: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.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: i1$4.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.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.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.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$1.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: i4$1.TranslateService }]; }, propDecorators: { type: [{
-                type: Input
-            }], actions: [{
-                type: Output
-            }], wraper: [{
-                type: ViewChild,
-                args: ['wraper']
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class DialogsCoreProvider {
-    constructor(matDialog) {
-        this.matDialog = matDialog;
-        this.components = {
-            ScanProfile: { component: ScanProfileComponent },
-            Loading: { component: LoadingComponent },
-            ConfirmComponent: { component: ConfirmComponent },
-            ScanMobileComponent: { component: ScanMobileComponent },
-            ScanSelfie: { component: ScanSelfieComponent },
-        };
-        this.blank = BlankComponent;
+    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.validation = false;
+                                });
+                            });
+                        }
+                        console.log('ID SIDE', this.idScan);
+                        this.displayInfo = 'Please turn the document over!';
+                    }
+                }
+                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;
+            }
+        });
     }
-    getComponent(name) {
-        if (!this.components[name]) {
-            console.warn('Component missing', name, this.components);
-        }
-        return this.components[name].component;
+    handleInitError(error) {
+        console.log(error);
     }
-    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;
+    get scanBlastCanUpload() {
+        return this.scanBlastData[0].image ? true : false;
     }
-    scanProfile(data) {
-        return this.open({
-            name: 'ScanProfile',
-            panelClass: 'ScanProfileComponent',
-            data,
-        });
+    cameraWasSwitched(deviceId) {
+        console.log('[active device]', deviceId);
+        this.deviceId = deviceId;
+        this.cameraReady = true;
+        this.defaultDevice = deviceId;
+        setTimeout(() => {
+            this.onResize();
+            this.scan();
+        }, 300);
     }
-    // Generic loading dialog
-    loading(title = '') {
-        return this.open({
-            name: 'Loading',
-            data: { title },
-        });
+    get nextWebcamObservable() {
+        return this.nextWebcam.asObservable();
     }
-    alert(title, text) {
-        return this.open({
-            name: 'ConfirmComponent',
-            maxWidth: '600px',
-            panelClass: 'DialogNoPadding',
-            minWidth: '440px',
-            data: { title, text, alert: true },
-        });
+    handleLongValidationError(img) {
+        // save current image after 10sec
+        const diff = (Date.now() - this.startTime) / 1000;
+        if (diff > 15 &&
+            !this.verificationErrorSent &&
+            this.scanProvider.config.development) {
+            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();
+        }
     }
-    scanMobile(data) {
-        return this.open({
-            name: 'ScanMobileComponent',
-            maxWidth: '600px',
-            panelClass: 'DialogNoPadding',
-            minWidth: '440px',
-            data,
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+        this.autoScan();
+        this.__subs(this.layoutProvider.breakpoint$).subscribe((v) => {
+            this.isMobile = !v.matches;
+            console.log('MNOBILE', this.isMobile);
         });
-    }
-    scanSelfie(data) {
-        return this.open({
-            name: 'ScanSelfie',
-            panelClass: 'ScanProfileComponent',
-            data,
+        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();
+            });
         });
     }
-}
-DialogsCoreProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsCoreProvider, deps: [{ token: i1$3.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$3.MatDialog }]; } });
-
-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;
-                    });
-            }
+    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 item;
+        return null;
     }
-}
-TranslationProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationProvider, deps: [{ token: i4$1.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: i4$1.TranslateService }]; } });
-
-class ScanFieldsProvider {
-    constructor(translate, provider) {
-        this.translate = translate;
-        this.provider = provider;
+    autoScan() {
+        const side = this.scanBlastData[0];
+        this.idScan = null;
+        this.singleScan(side);
     }
-    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)),
-            },
-        ];
+    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);
     }
-    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);
-                                    },
+    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);
+        }
+    }
+}
+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: [
+                        TitleTypeComponent,
+                        AvatarTypeComponent,
+                        ProfileImageTypeComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FormlyMatDatepickerModule,
+                        FormlySelectModule,
+                        MaterialModule,
+                        AvatarModule,
+                        TranslateModule,
+                        FormlyMaterialModule,
+                        FormlyModule.forRoot({
+                            types: [
+                                {
+                                    name: 'title',
+                                    component: TitleTypeComponent,
+                                    wrappers: [],
                                 },
-                            },
-                            {
-                                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',
+                                {
+                                    name: 'profile-image',
+                                    component: ProfileImageTypeComponent,
+                                    wrappers: [],
                                 },
-                                // expressionProperties: {
-                                //   'templateOptions.disabled': (model: any) => !model.newAddress,
-                                // },
-                            },
-                        ],
-                    },
-                ],
-            },
-        ].map((item) => this.translate.forms(item));
+                            ],
+                        }),
+                    ],
+                    providers: [],
+                    exports: [FormlyModule],
+                }]
+        }] });
+
+class CameraSwitchComponent {
+    constructor(cameraProvider) {
+        this.cameraProvider = cameraProvider;
     }
+    ngAfterViewInit() { }
+    ngOnDestroy() { }
 }
-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,
+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: [{
-                    providedIn: 'root',
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        WebcamModule,
+                        MaterialModule,
+                        AppFormModule,
+                        ReactiveFormsModule,
+                    ],
+                    declarations: [ScanComponent, ScanResultsComponent, CameraSwitchComponent],
+                    exports: [WebcamModule, ScanComponent, CameraSwitchComponent],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return [{ type: TranslationProvider }, { type: ScanProvider }]; } });
+        }] });
+
+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: [
+                        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 ScanProfileComponent {
-    constructor(cd, scanProvider, dialogs, formProvider, zone, translate, auth // private api: ServerProvider
-    ) {
+class ScanSelfieComponent {
+    constructor(cd, scanProvider, dialogs, 
+    //   private formProvider: ScanFieldsProvider,
+    translate) {
         this.cd = cd;
         this.scanProvider = scanProvider;
         this.dialogs = dialogs;
-        this.formProvider = formProvider;
-        this.zone = zone;
         this.translate = translate;
-        this.auth = auth;
         this.scanBlastData = [
             {
                 title: 'pms.dialogs.components.scanProfile.front',
@@ -3094,46 +3473,25 @@ class ScanProfileComponent {
             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.scanImageTimestamps = {
-            time: 0,
-            load: 0,
-        };
     }
     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) {
@@ -3141,214 +3499,27 @@ class ScanProfileComponent {
                     this.videoWidth = video.clientWidth;
                     this.videoHeight = video.clientHeight;
                 }
-                this.cd.detectChanges();
             }, 100);
             this.cd.detectChanges();
         }
     }
-    resetLogData() {
-        this.logData = {
-            Request: null,
-            Response: null,
-            ExpectedOutput: null,
-            AcceptTermsAndConditions: true,
-        };
-    }
-    ngOnDestroy() {
-        if (this.scanTimeout) {
-            clearTimeout(this.scanTimeout);
-        }
-        if (this.imageHandlerSubscription) {
-            this.imageHandlerSubscription.unsubscribe();
-        }
-    }
     init() {
-        this.auth.accesToken.subscribe();
-        this.resetLogData();
+        console.log('HAS MULTI');
         // this.result=true;
         // this.result ={};
-        this.fields = this.formProvider.document();
+        this.fields = []; //this.formProvider.document();
         WebcamUtil.getAvailableVideoInputs().subscribe((mediaDevices) => {
-            console.log('[DEVICES]', mediaDevices.map((d) => d.label));
+            console.log('[DEVICES]', mediaDevices);
             this.mediaDevices = mediaDevices;
             this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
+            this.singleScan(this.scanBlastData[0]);
         });
     }
-    scan() {
-        // this.triggerSnapshot();
-        //   this.scanDatas[0] = true;
-        // if (this.scanTimeout) {
-        //   clearTimeout(this.scanTimeout);
-        // }
-        // this.scanTimeout = setTimeout(() => {
-        //   this.scan();
-        // }, 1);
-    }
-    DataUrlFromImage() { }
     handleImage(webcamImage) {
-        // console.log('[received webcam image]', webcamImage);
-        this.zone.runOutsideAngular(() => {
-            const consoleBackground = "font-size:300px;background-image: url('" +
-                webcamImage.imageResized +
-                "');background-size: contain; background-repeat: no-repeat;";
-            //  console.log('%c    ', consoleBackground);
-            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);
-                // this.scanProvider.burst(imagesArray).subscribe((resp: any) => {
-                //   // console.clear()
-                //   console.log([resp.Info]);
-                //   this.validation = false;
-                //   this.displayInfo = resp.Info;
-                //   if (resp.Validated) {
-                //     if (this.scanTimeout) {
-                //       clearTimeout(this.scanTimeout);
-                //     }
-                //     this.webcamImage = images[resp.Index];
-                //     // this.preview = this.webcamImage.imageAsDataUrl;
-                //     this.cd.detectChanges();
-                //     const { DocType, Series, Side } = resp;
-                //     // For ID ask for other side
-                //     if (DocType === 'ID') {
-                //       if (Side === 'FRONT') {
-                //         this.scanBlastData[0].image = this.webcamImage;
-                //       } else {
-                //         this.scanBlastData[1].image = this.webcamImage;
-                //       }
-                //       if (this.scanBlastData[0].image && this.scanBlastData[1].image) {
-                //         console.warn('UPLOAD');
-                //         this.scanBlastFinish();
-                //       } else {
-                //         const num = Side === 'FRONT' ? 1 : 0;
-                //         this.singleScan(this.scanBlastData[num]);
-                //         this.scan();
-                //         this.idScan = this.scanBlastData[num].side;
-                //         console.log('ID SIDE', this.idScan);
-                //         this.displayInfo = 'Please turn the document over!';
-                //       }
-                //     } else {
-                //       this.scanBlastData[0].image = this.webcamImage;
-                //       console.warn('UPLOAD');
-                //       this.scanBlastFinish();
-                //     }
-                //     console.log(DocType, Series, Side);
-                //     this.scannedImages = [];
-                //   }
-                // });
-            }
-            if (this.cameraReady) {
-                // console.log('delay', this.scanDelay);
-                //console.log('timeD', new Date().getTime());
-                this.trigger.next(new Date().getTime());
-                // if (this.scanDelay < 100) {
-                //   const diff = 100 - this.scanDelay;
-                //   console.log(diff);
-                //   const time2 = new Date().getTime();
-                //   // const sub = of(1)
-                //   //   .pipe(delay(diff))
-                //   //   .subscribe((resp) => {
-                //   //     console.log(new Date().getTime()-time);
-                //   //      this.trigger.next();
-                //   //     sub.unsubscribe();
-                //   //   });
-                //   const timeout = setTimeout(() => {
-                //     console.log('TO', new Date().getTime() - time2);
-                //     this.trigger.next();
-                //     clearTimeout(timeout);
-                //   }, diff);
-                // } else {
-                //   this.trigger.next();
-                // }
-            }
-        });
-        // this.scanImageTimestamps = {
-        //   time: new Date().getTime(),
-        //   load:
-        // };
-        //  this.webcamImage = webcamImage;
-        //  this.preview = webcamImage.imageAsDataUrl;
-        //  this.cd.detectChanges();
-    }
-    handleBurstData(imagesArray, images, type = 'plain') {
-        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;
-                        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;
-            }
-        });
+        console.log('[received webcam image]', webcamImage);
+        this.webcamImage = webcamImage;
+        this.preview = webcamImage.imageAsDataUrl;
+        this.cd.detectChanges();
     }
     handleInitError(error) {
         console.log(error);
@@ -3357,103 +3528,21 @@ class ScanProfileComponent {
         return this.scanBlastData[0].image ? true : false;
     }
     cameraWasSwitched(deviceId) {
-        console.log('[active device]', deviceId);
+        console.log('active device: ' + deviceId);
         this.deviceId = deviceId;
         this.cameraReady = true;
         this.defaultDevice = deviceId;
-        setTimeout(() => {
-            this.onResize();
-            this.scan();
-        }, 300);
+        this.onResize();
     }
     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.scanProvider
-                .sendLog({
-                AcceptTermsAndConditions: true,
-                ExpectedOutput: {},
-                Request: {
-                    verification: dataUrl.split(',')[1],
-                },
-                Response: {
-                    TransactionID: v4(),
-                },
-            })
-                .subscribe();
-        }
-    }
     ngAfterViewInit() {
         this.cd.detectChanges();
-        this.autoScan();
-        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);
     }
     selectCamera(event) {
-        this.cameraReady = false;
+        console.log(event);
         this.nextWebcam.next(event.value);
-        this.scanInProgress = false;
     }
     close() {
         this.dialogRef?.close();
@@ -3534,7 +3623,7 @@ class ScanProfileComponent {
         });
     }
     sendMobile() {
-        this.dialogs.scanMobile({ id: 1 });
+        // this.dialogs.scanMobile({ id: 1 });
     }
     singleScanRotate(side) {
         console.log(side);
@@ -3574,21 +3663,16 @@ class ScanProfileComponent {
         });
     }
     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();
+        const loading = this.dialogs.loading();
         this.scaning = true;
-        this.cd.detectChanges();
-        console.time('payload');
         const payload = {
             AcceptTermsAndConditions: true,
             DataFields: {
@@ -3610,73 +3694,39 @@ class ScanProfileComponent {
         };
         if (!this.scanBlastData[1].image) {
             payload.Settings.IgnoreBackImage = true;
-        }
-        this.logData.Request = JSON.parse(JSON.stringify(payload));
-        console.timeEnd('payload');
-        this.scanProvider
-            .blastPost(payload)
-            .subscribe((data) => {
-            //console.log(data);
+        }
+        this.scanProvider.blastPost(payload).subscribe((data) => {
             const results = data.Data;
-            console.timeEnd('upload');
-            console.time('parse');
-            // data.InfoCode = '1001';
-            this.logData.Response = JSON.parse(JSON.stringify(data));
-            //loading.close();
+            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();
-                });
+            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.cd.detectChanges();
                 // this.documentTypeSelected = false;
                 // this.retry();
             }
             this.cd.detectChanges();
-            console.timeEnd('parse');
         }, (err) => {
-            // loading.close();
+            loading.close();
             // this.scanSide = 0;
             this.error = true;
             this.preview = true;
@@ -3689,19 +3739,32 @@ class ScanProfileComponent {
         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);
+        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.validation = false;
-        this.errorCode = '1000';
         this.result = false;
         if (this.error) {
             this.documentTypeSelected = false;
@@ -3710,79 +3773,38 @@ class ScanProfileComponent {
             });
         }
         this.error = false;
-        this.autoScan();
-        this.cd.detectChanges();
     }
     triggerSnapshot() {
         this.trigger.next(0);
     }
+    scan() {
+        console.log('SCAN');
+        this.triggerSnapshot();
+        this.scanDatas[0] = true;
+    }
     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();
     }
-    cancel() {
-        this.documentTypeSelected = false;
-    }
-    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.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);
-        }
-    }
+    use() { }
+    selfie() { }
 }
-ScanProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProfileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ScanProvider }, { token: DialogsCoreProvider }, { token: ScanFieldsProvider }, { token: i0.NgZone }, { token: i4$1.TranslateService }, { token: AuthProvider }], 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" }, outputs: { actions: "actions" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "wraper", first: true, predicate: ["wraper"], descendants: true }], ngImport: i0, template: "<!-- <div *ngIf=\"isDebug\" class=\"debug\">\n  <ng-container *ngFor=\"let img of scannedImages; let index = index\">\n    <div style=\"display: flex; flex-direction: column\">\n      <img [src]=\"img.imageResized\" />\n      {{ index }}\n    </div>\n  </ng-container>\n</div> -->\n\n<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    *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-100 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 *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 *ngIf=\"result\" fxFlex fxLayout=\"column\"> -->\n  <div\n    fxFlex\n    #wraper\n    class=\"wraper\"\n    fxLayout=\"row\"\n    style=\"overflow: auto\"\n    protelPerfectScrollbar\n    class=\"pt-8 pr-8\"\n    fxLayout.lt-md=\"column\"\n  >\n    <div fxFlex class=\"\">\n      <div fxFlex>\n        <mat-card style=\"margin: 4px; padding: 4px 16px\">\n          <h3>Avatar</h3>\n          <div\n            style=\"display: flex; flex-direction: row; align-items: center\"\n            class=\"selfieContainer\"\n          >\n            <div class=\"selfie\" style=\"width: 200px\">\n              <img\n                *ngIf=\"model?._avatar\"\n                class=\"preview\"\n                style=\"width: 120px; height: 120px; border-radius: 60px\"\n                [src]=\"model._avatar\"\n              />\n            </div>\n            <button\n              [disabled]=\"imageVerified\"\n              (click)=\"selfie()\"\n              mat-raised-button\n            >\n              Take selfie\n            </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>\n    <div fxFlex 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\n  <div></div>\n\n  <footer fxLayout=\"row\" class=\"p-8\">\n    <div class=\"w-100-p\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <button fxFlex class=\"mr-8\" 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-8\"\n        mat-raised-button\n        (click)=\"use()\"\n      >\n        {{ \"pms.dialogs.components.scanProfile.useData\" | translate }}\n      </button>\n    </div>\n  </footer>\n</div>\n\n<div\n  style=\"position: relative\"\n  *ngIf=\"!result && documentTypeSelected\"\n  fxFlex\n  fxLayout=\"column\"\n>\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    <div *ngIf=\"!preview\" style=\"position: absolute; left: 0px\">\n      DELAY:{{ scanDelay }}\n    </div>\n\n    <div\n      *ngIf=\"scaning\"\n      style=\"\n        position: absolute;\n        z-index: 200;\n        width: 100%;\n        height: 100%;\n        top: 0px;\n        left: 0px;\n      \"\n      fxlayout=\"row\"\n      fxLayoutAlign=\"center center\"\n    >\n      <!-- <mat-progress-spinner\n        mode=\"indeterminate\"\n        color=\"accent\"\n        [strokeWidth]=\"10\"\n      ></mat-progress-spinner> -->\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        type=\"document\"\n        [trigger]=\"trigger\"\n        [imageHandler]=\"imageHandler\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"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 style=\"max-width: \">\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 fxLayout=\"row\" style=\"height: 80px\" class=\"p-8\">\n    <div class=\"displayInfo\" ngClass.lt-sm=\"mobile\" *ngIf=\"!preview && cameraReady\">\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    <!-- <button\n      [disabled]=\"!cameraReady\"\n      class=\"w-100-p\"\n      *ngIf=\"!preview\"\n      mat-raised-button\n      (click)=\"scan()\"\n    >\n      <ng-container>\n        <ng-container *ngIf=\"scanType === 'FRONT'\">{{\n          \"pms.dialogs.components.scanProfile.captureFront\" | translate\n        }}</ng-container>\n        <ng-container *ngIf=\"scanType === 'BACK'\">{{\n          \"pms.dialogs.components.scanProfile.captureBack\" | translate\n        }}</ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"scanSide === 1\">{{\n        \"pms.dialogs.components.scanProfile.captureBackOfId\" | translate\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        {{ \"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</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5}.page-header{display:flex;flex-direction:row;align-items:center}.page-header button{height:100%}.debug{position:absolute;left:0;width:100%;height:80px;top:0;border-bottom:1px solid #ccc;background-color:#f8f8f8;display:flex;overflow:hidden;color:#000}.debug img{height:50px;border:1px solid #000}.displayInfo{text-align:center;height:20px;flex:1;position:absolute;width:100%;background-color:#000;height:30px;bottom:55px;left:0;line-height:30px;color:#fff;z-index:200}.displayInfo.mobile{font-size:12px}.element{margin-bottom:8px}.element label{font-size:14px}.element div{font-size:18px}.wraper{position:relative;overflow:hidden}.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;text-transform:uppercase}h4{font-size:16px}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px}.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}.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{flex-direction:row!important}.scanBlastWraper.mobile .description .imgWrap{padding:0!important}.scanBlastWraper.mobile .description .btnActions{position:absolute;right:0}.scanBlastWraper.mobile .description button{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}.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}.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}\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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i12.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.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: i1$4.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.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.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.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$1.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: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanProfileComponent, decorators: [{
+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-profile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div *ngIf=\"isDebug\" class=\"debug\">\n  <ng-container *ngFor=\"let img of scannedImages; let index = index\">\n    <div style=\"display: flex; flex-direction: column\">\n      <img [src]=\"img.imageResized\" />\n      {{ index }}\n    </div>\n  </ng-container>\n</div> -->\n\n<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    *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-100 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 *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 *ngIf=\"result\" fxFlex fxLayout=\"column\"> -->\n  <div\n    fxFlex\n    #wraper\n    class=\"wraper\"\n    fxLayout=\"row\"\n    style=\"overflow: auto\"\n    protelPerfectScrollbar\n    class=\"pt-8 pr-8\"\n    fxLayout.lt-md=\"column\"\n  >\n    <div fxFlex class=\"\">\n      <div fxFlex>\n        <mat-card style=\"margin: 4px; padding: 4px 16px\">\n          <h3>Avatar</h3>\n          <div\n            style=\"display: flex; flex-direction: row; align-items: center\"\n            class=\"selfieContainer\"\n          >\n            <div class=\"selfie\" style=\"width: 200px\">\n              <img\n                *ngIf=\"model?._avatar\"\n                class=\"preview\"\n                style=\"width: 120px; height: 120px; border-radius: 60px\"\n                [src]=\"model._avatar\"\n              />\n            </div>\n            <button\n              [disabled]=\"imageVerified\"\n              (click)=\"selfie()\"\n              mat-raised-button\n            >\n              Take selfie\n            </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>\n    <div fxFlex 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\n  <div></div>\n\n  <footer fxLayout=\"row\" class=\"p-8\">\n    <div class=\"w-100-p\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <button fxFlex class=\"mr-8\" 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-8\"\n        mat-raised-button\n        (click)=\"use()\"\n      >\n        {{ \"pms.dialogs.components.scanProfile.useData\" | translate }}\n      </button>\n    </div>\n  </footer>\n</div>\n\n<div\n  style=\"position: relative\"\n  *ngIf=\"!result && documentTypeSelected\"\n  fxFlex\n  fxLayout=\"column\"\n>\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    <div *ngIf=\"!preview\" style=\"position: absolute; left: 0px\">\n      DELAY:{{ scanDelay }}\n    </div>\n\n    <div\n      *ngIf=\"scaning\"\n      style=\"\n        position: absolute;\n        z-index: 200;\n        width: 100%;\n        height: 100%;\n        top: 0px;\n        left: 0px;\n      \"\n      fxlayout=\"row\"\n      fxLayoutAlign=\"center center\"\n    >\n      <!-- <mat-progress-spinner\n        mode=\"indeterminate\"\n        color=\"accent\"\n        [strokeWidth]=\"10\"\n      ></mat-progress-spinner> -->\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        type=\"document\"\n        [trigger]=\"trigger\"\n        [imageHandler]=\"imageHandler\"\n        (imageCapture)=\"handleImage($event)\"\n        [allowCameraSwitch]=\"allowCameraSwitch\"\n        [videoOptions]=\"videoOptions\"\n        [switchCamera]=\"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 style=\"max-width: \">\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 fxLayout=\"row\" style=\"height: 80px\" class=\"p-8\">\n    <div class=\"displayInfo\" ngClass.lt-sm=\"mobile\" *ngIf=\"!preview && cameraReady\">\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    <!-- <button\n      [disabled]=\"!cameraReady\"\n      class=\"w-100-p\"\n      *ngIf=\"!preview\"\n      mat-raised-button\n      (click)=\"scan()\"\n    >\n      <ng-container>\n        <ng-container *ngIf=\"scanType === 'FRONT'\">{{\n          \"pms.dialogs.components.scanProfile.captureFront\" | translate\n        }}</ng-container>\n        <ng-container *ngIf=\"scanType === 'BACK'\">{{\n          \"pms.dialogs.components.scanProfile.captureBack\" | translate\n        }}</ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"scanSide === 1\">{{\n        \"pms.dialogs.components.scanProfile.captureBackOfId\" | translate\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        {{ \"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</div>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5}.page-header{display:flex;flex-direction:row;align-items:center}.page-header button{height:100%}.debug{position:absolute;left:0;width:100%;height:80px;top:0;border-bottom:1px solid #ccc;background-color:#f8f8f8;display:flex;overflow:hidden;color:#000}.debug img{height:50px;border:1px solid #000}.displayInfo{text-align:center;height:20px;flex:1;position:absolute;width:100%;background-color:#000;height:30px;bottom:55px;left:0;line-height:30px;color:#fff;z-index:200}.displayInfo.mobile{font-size:12px}.element{margin-bottom:8px}.element label{font-size:14px}.element div{font-size:18px}.wraper{position:relative;overflow:hidden}.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;text-transform:uppercase}h4{font-size:16px}.images .title{padding:8px 0;font-weight:600}.images img{margin-bottom:16px}.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}.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{flex-direction:row!important}.scanBlastWraper.mobile .description .imgWrap{padding:0!important}.scanBlastWraper.mobile .description .btnActions{position:absolute;right:0}.scanBlastWraper.mobile .description button{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}.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}.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}\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: ScanFieldsProvider }, { type: i0.NgZone }, { type: i4$1.TranslateService }, { type: AuthProvider }]; }, propDecorators: { type: [{
+            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
@@ -3794,228 +3816,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-class AvatarTypeComponent extends FieldType {
-    constructor(cd) {
-        super();
-        this.cd = cd;
-        this.width = 'w-120';
-        this.padding = 'px-32 pt-8 pb-8';
+class TurnDocumentComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
     }
-    ngOnChange() { }
-    ngAfterViewInit() {
-        if (this.to.width) {
-            this.width = this.to.width;
-        }
-        if (this.to.padding) {
-            this.padding = this.to.padding;
-        }
-        this.cd.detectChanges();
+    ngOnInit() {
+        console.log(this.data);
+    }
+    close() {
+        console.log(this.dialogRef);
+        this.dialogRef.close();
     }
 }
-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: i12.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3$2.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: [{
+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-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 }]; } });
+            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 TitleTypeComponent extends FieldType {
-    constructor(cd) {
-        super();
-        this.cd = cd;
+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,
+        });
     }
-    ngOnInit() {
-        this.opt = {
-            badge: this.to.badge,
-        };
+    // Generic loading dialog
+    loading(title = '') {
+        return this.open({
+            name: 'Loading',
+            data: { title },
+        });
     }
-    ngAfterViewInit() {
-        this.cd.detectChanges();
+    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,
+        });
     }
 }
-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: i4$1.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 }]; } });
+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 ProfileImageTypeComponent extends FieldType {
-    constructor(cd) {
+class ScanProfileComponent extends BaseComponent {
+    constructor(dialogs, dialogRef) {
         super();
-        this.cd = cd;
+        this.dialogs = dialogs;
+        this.dialogRef = dialogRef;
+        this.type = 'desktop';
+        this.showDialog = false;
     }
-    ngOnChange() { }
-    ngAfterViewInit() {
-        if (this.to.width) {
-            this.width = this.to.width;
-        }
-        if (this.to.padding) {
-            this.padding = this.to.padding;
+    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;
         }
-        this.cd.detectChanges();
+    }
+    close() {
+        this.dialogRef?.close();
     }
 }
-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: i12.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3$2.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: [{
+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-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, i8$1.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: [
-                        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],
-                }]
-        }] });
+            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 {
 }
@@ -4024,7 +3982,7 @@ DialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         BlankComponent,
         LoadingComponent,
         ConfirmComponent,
-        ScanMobileComponent,
+        TurnDocumentComponent,
         ScanSelfieComponent], imports: [QRCodeModule,
         ReactiveFormsModule,
         CommonModule,
@@ -4038,7 +3996,7 @@ DialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         FlexLayoutModule], exports: [ScanProfileComponent,
         LoadingComponent,
         BlankComponent,
-        ScanMobileComponent,
+        TurnDocumentComponent,
         MaterialModule,
         ScanSelfieComponent] });
 DialogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogsModule, providers: [DialogsCoreProvider], imports: [QRCodeModule,
@@ -4060,14 +4018,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         BlankComponent,
                         LoadingComponent,
                         ConfirmComponent,
-                        ScanMobileComponent,
+                        TurnDocumentComponent,
                         ScanSelfieComponent,
                     ],
                     exports: [
                         ScanProfileComponent,
                         LoadingComponent,
                         BlankComponent,
-                        ScanMobileComponent,
+                        TurnDocumentComponent,
                         MaterialModule,
                         ScanSelfieComponent,
                     ],
@@ -4084,7 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         FlexModule,
                         FlexLayoutModule,
                     ],
-                    providers: [DialogsCoreProvider]
+                    providers: [DialogsCoreProvider],
                 }]
         }] });
 
@@ -4093,7 +4051,7 @@ class HttpErrorInterceptor {
         this.injector = injector;
     }
     intercept(req, next) {
-        console.log(req.url);
+        //console.log(req.url);
         if (req.url.indexOf('auth') >= 0 || req.url.indexOf('/assets/') >= 0) {
             return next.handle(req);
         }
@@ -4143,6 +4101,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             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 {
@@ -4181,5 +4194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppFormModule, AuthProvider, BlankComponent, CoreComponentsModule, CorePipesModule, DialogsCoreProvider, DialogsModule, HttpErrorInterceptor, LoadingComponent, MaterialModule, NgxScandocModule, SafeResourceUrlPipe, ScanFieldsProvider, ScanMobileComponent, ScanProfileComponent, ScanProvider, ScanSelfieComponent, TranslationProvider, WebcamComponent, WebcamModule, webRtcProvider };
+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