ngx-scandoc 1.3.7 → 1.3.9

package/fesm2020/ngx-scandoc.mjs

@@ -358,7 +358,7 @@ class WebcamComponent extends BaseComponent {
         };
         this.video.onplay = () => {
             this.videoReady.next(true);
-            console.log(this.video.videoWidth, this.video.videoHeight);
+            // console.log(this.video.videoWidth, this.video.videoHeight);
             this.drawRectangle();
         };
     }
@@ -379,7 +379,7 @@ class WebcamComponent extends BaseComponent {
             smallSize.h = canvasSmalSize;
             smallSize.h = canvasSmalSize * aspect;
         }
-        console.log('SZ', smallSize);
+        //console.log('SZ', smallSize);
         _canvas.width = videoWidth;
         _canvas.height = videoHeight;
         const ctx = _canvas.getContext('2d', {
@@ -448,7 +448,7 @@ class WebcamComponent extends BaseComponent {
             this.takeSelfie();
             return;
         }
-        console.warn('SNAP', time);
+        // console.warn('SNAP', time);
         if (!this.showVideo) {
             return;
         }
@@ -484,23 +484,22 @@ class WebcamComponent extends BaseComponent {
                 ctx.clearRect(0, 0, videoWidth, videoHeight);
                 ctxO.clearRect(0, 0, size.w, size.h);
                 ctx.drawImage(this.video, 0, 0);
-                console.time('drawVideo');
+                //console.time('drawVideo');
                 ctxO.drawImage(_canvas, 0, 0, size.w, size.h);
-                console.timeEnd('drawVideo');
-                console.time('DRAW');
+                //console.timeEnd('drawVideo');
+                //console.time('DRAW');
                 const imData = ctx.getImageData(0, 0, videoWidth, videoHeight);
-                console.timeEnd('DRAW');
-                console.time('CTX');
+                //console.timeEnd('DRAW');
+                //console.time('CTX');
                 const resize = canvas.toDataURL(mimeType, 1);
-                console.timeEnd('CTX');
+                //console.timeEnd('CTX');
                 const currentTime = new Date().getTime();
                 const diff = currentTime - time;
                 // total time for pack one image
                 const drawTime = Date.now() - drawStart;
-                console.warn('DRAW TIME', drawTime);
+                //console.warn('DRAW TIME', drawTime);
                 const delayMax = drawTime < 60 ? 100 : 200;
                 const delay = diff > delayMax ? 0 : delayMax - diff;
-                console.warn(this.chunks);
                 const timeout = setTimeout(() => {
                     this.imageCapture.emit(new WebcamImage('', mimeType, imData, resize));
                     clearTimeout(timeout);
@@ -529,10 +528,8 @@ class WebcamComponent extends BaseComponent {
                 padding = 40;
             }
             const ctx = _canvas.getContext('2d');
-            console.log(ctx);
             ctx.clearRect(0, 0, _canvas.width, _canvas.height);
             const { width, height } = _canvas;
-            console.log(width, height);
             const { videoWidth, videoHeight } = this.video;
             const docSize = this.type === 'selfie' ? 1 : 86 / 55;
             const aspect = videoWidth / videoHeight;
@@ -565,18 +562,19 @@ class WebcamComponent extends BaseComponent {
             }
             h = Math.floor(h);
             w = Math.floor(w);
-            console.log(_width, _height);
             const left = Math.floor((width - w) / 2);
             const top = Math.floor((height - h) / 2);
-            ctx.strokeStyle = 'red';
+            ctx.strokeStyle = 'white';
             // ctx.strokeRect(left, top, _width, _height);
-            ctx.shadowColor = 'red';
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+            // ctx.shadowColor = 'white';
             ctx.shadowBlur = 15;
             ctx.beginPath();
             // Draw using 5px for border radius on all sides
             // stroke it but no fill
             ctx.roundRect(left, top, w, h, 5);
             ctx.stroke();
+            ctx.fill();
             this.cameraProvider.rectPosition = {
                 l: left,
                 t: top,
@@ -675,6 +673,18 @@ class ScanProvider {
     get enableVerification() {
         return this.config.enableVerification;
     }
+    addGuest(guestData) {
+        const data = {
+            AcceptTermsAndConditions: true,
+            DataFields: {
+                GuestImageType: 'base64',
+                ...guestData,
+            },
+            Settings: {},
+        };
+        const $request = this.http.put(this.config.guestAddPath, data);
+        return $request;
+    }
     stateless(DocumentFaceImage, LiveFaceImage) {
         const data = {
             AcceptTermsAndConditions: true,
@@ -1437,7 +1447,6 @@ class AuthProvider {
     }
     setConfig() { }
     get tokenExpired() {
-        console.log(this.tokenTimestamps, this.token);
         if (this.token == '' || this.tokenTimestamps.Time === 0) {
             console.log('EXPIRED');
             return true;
@@ -1445,14 +1454,12 @@ class AuthProvider {
         const { Time } = this.tokenTimestamps;
         const tokenDate = moment(Time);
         const isValid = moment(tokenDate).isBefore(moment().add(5, 'minutes'));
-        console.log('VALID', isValid);
         return !isValid;
     }
     resetToken() {
         // this.token = '';
     }
     get accesToken() {
-        console.log('AT');
         return this.tokenExpired ? this.fetchToken() : of(this.token);
     }
     fetchToken() {
@@ -1488,12 +1495,10 @@ class AuthProvider {
     }
     updateToken() {
         const decoded = jwt_decode(this.token);
-        console.log(decoded);
         const { Time, Client, SubClient } = decoded;
         this.tokenTimestamps = { Time, Client, SubClient };
     }
     getToken() {
-        console.log('GET');
         const { path, login, version, clientId, tokenName } = this.config;
         if (version == 'v1') {
             return this.http
@@ -1514,9 +1519,7 @@ class AuthProvider {
             sub_client: this.sub_client,
         })
             .pipe(tap((token) => {
-            console.log(this.token);
             this.token = token.access_token;
-            console.log('TOKEN', this.token);
             this.refresh_token = token.refresh_token;
             this.updateToken();
         }), map((data) => data.access_token));
@@ -2578,7 +2581,6 @@ class ScanComponent extends BaseComponent {
         let MANUAL_INTERVAL = this.scanProvider.config.manualScanDelay;
         const diff = (Date.now() - this.startTime) / 1000;
         const showDialog = diff > MANUAL_INTERVAL;
-        console.log('Mdiff', diff, showDialog, this.verificationErrorSent);
         if (showDialog && !this.verificationErrorSent) {
             this.verificationErrorSent = true;
             console.warn('[HANDLE ERROR]');
@@ -2982,10 +2984,10 @@ class ScanComponent extends BaseComponent {
     }
 }
 ScanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScanComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: NgxScandocCameraProvider }, { token: i0.Injector }, { token: LayoutProvider }, { token: i2.Platform }, { token: i4$1.DeviceDetectorService }, { 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" } }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"cameraProvider.rectPosition.t > 0 && displayInfo && !result && !manual\"\n>\n  <div class=\"hint\" [ngStyle]=\"{ top: cameraProvider.hintPosition + 'px' }\">\n    <span class=\"text\">\n      {{ displayInfo | translate }}\n    </span>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"showDialog\">\n  <div class=\"pageTurn\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>360</mat-icon>\n        <div class=\"text\">\n          <ng-container *ngIf=\"idScan === 'BACK'\">\n            {{ \"scandoc.turnAndCapture.back\" | translate }}\n          </ng-container>\n          <ng-container *ngIf=\"idScan === 'FRONT'\">\n            {{ \"scandoc.turnAndCapture.front\" | translate }}\n          </ng-container>\n        </div>\n      </div>\n      <footer>\n        <button (click)=\"closeDialog()\" mat-raised-button>Ok</button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"promptManual\">\n  <div class=\"manualMode\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>screenshot_keyboard</mat-icon>\n        <div class=\"text\">\n          {{ \"scandoc.manual\" | translate }}\n        </div>\n      </div>\n      <footer>\n        <button\n          style=\"margin-right: 8px\"\n          (click)=\"manualSet(true)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.yes\" | translate }}\n        </button>\n        <button\n          style=\"margin-left: 8px\"\n          (click)=\"manualSet(false)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.no\" | translate }}\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"result\">\n  <section>\n    <ngx-scan-results\n      (action)=\"selfie()\"\n      [form]=\"form\"\n      [data]=\"scanResults\"\n    ></ngx-scan-results>\n\n    <footer>\n      <div class=\"actions\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n          {{ \"scandoc.reTake\" | translate }}\n        </button>\n        <button\n          [disabled]=\"error || form.invalid\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"use()\"\n        >\n          {{ \"scandoc.useData\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n\n<ng-container *ngIf=\"manual\">\n  <section>\n    <ngx-manual-scan (action)=\"manualScanData($event)\"></ngx-manual-scan>\n  </section>\n</ng-container>\n<ng-container *ngIf=\"!result && documentTypeSelected && !manual\">\n  <section>\n    <div #wraper class=\"wraper\">\n      <div class=\"loading\" *ngIf=\"(!cameraReady && !preview) || scaning\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n\n      <ng-container *ngIf=\"!error\">\n        <ngx-scandoc-webcam\n          *ngIf=\"!preview && !scaning\"\n          class=\"main\"\n          #webcam\n          type=\"document\"\n          [trigger]=\"trigger\"\n          [imageHandler]=\"imageHandler\"\n          (imageCapture)=\"handleImage($event)\"\n          (initError)=\"handleInitError($event)\"\n          (destroyed)=\"cameraOff($event)\"\n          (videoReady)=\"videoReady($event)\"\n        >\n        </ngx-scandoc-webcam>\n      </ng-container>\n      <div\n        class=\"previewData\"\n        *ngIf=\"preview\"\n        style=\"\n          z-index: 20;\n          display: flex;\n          position: absolute;\n          width: 100%;\n          height: 100%;\n        \"\n      >\n        <div class=\"p-16 error\" *ngIf=\"error\">\n          <div>\n            <div class=\"title\">\n              <mat-icon>error_outline</mat-icon\n              ><span class=\"ml-8\">{{\n                \"scandoc.unableToDetectId\" | translate\n              }}</span>\n            </div>\n\n            <ng-container *ngIf=\"errorCode === '1001'\">\n              <div>\n                {{ \"scandoc.extraction.c1001\" | translate }}\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"errorCode === '1002'\">\n              <div>\n                {{ \"scandoc.extraction.c1002\" | translate }}\n              </div>\n            </ng-container>\n\n            <ul *ngIf=\"errorCode === '1000'\">\n              <li>\n                {{ \"scandoc.placeIdCloseToDevice\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.ensureSufficientLight\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.holdDocumentSteady\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.makeSureAllEdgesOfTheIdAreVisible\" | translate }}\n              </li>\n              <li>\n                {{\n                  \"scandoc.makeSureThereAreNoGlareAndShadowsOnTheId\" | translate\n                }}\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"scanPreview\" *ngIf=\"!error && !scaning\">\n          <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"scandoc.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n          <div\n            class=\"image\"\n            [style.background-image]=\"'url(' + preview + ')'\"\n          ></div>\n        </div>\n      </div>\n    </div>\n\n    <footer *ngIf=\"preview\">\n      <!-- <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      <ng-container *ngIf=\"displayInfo\">\n        {{ displayInfo | translate }}\n      </ng-container>\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          {{ \"scandoc.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"scandoc.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n      <div class=\"actions\" *ngIf=\"preview\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n          {{ \"scandoc.retry\" | translate }}\n        </button>\n\n        <button\n          [disabled]=\"error\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"continue()\"\n        >\n          {{ \"scandoc.continueWithSelectedImage\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden;position:relative}:host.mobile .hint{font-size:11px}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;display:flex;flex-direction:row;align-items:center;justify-content:center;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}.manualMode{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.manualMode .content{margin-top:20px;background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.manualMode .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px}.manualMode .inner mat-icon{width:60px;height:60px;font-size:60px}.manualMode .inner .text{margin:20px 0}.manualMode footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.manualMode footer button{min-width:140px;box-shadow:none;border:1px solid #ccc}.pageTurn{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .content{background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.pageTurn .inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .inner mat-icon{width:60px;height:60px;font-size:60px}.pageTurn .inner .text{margin:20px 0;font-size:14px}.pageTurn footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.pageTurn footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}.hint{position:absolute;z-index:5;font-size:16px;line-height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.hint .text{border-radius:3px;padding:4px 8px;background-color:#000;color:#fff;text-align:center;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WebcamComponent, selector: "ngx-scandoc-webcam", inputs: ["imageHandler", "type", "trigger"], outputs: ["cameraSwitched", "videoReady", "imageCapture", "initError"] }, { kind: "component", type: i6$1.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: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ScanResultsComponent, selector: "ngx-scan-results", inputs: ["data", "images", "form"], outputs: ["action"] }, { kind: "component", type: ManualScanComponent, selector: "ngx-manual-scan", outputs: ["action"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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" } }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"cameraProvider.rectPosition.t > 0 && displayInfo && !result && !manual\"\n>\n  <div class=\"hint\" [ngStyle]=\"{ top: cameraProvider.hintPosition + 'px' }\">\n    <span class=\"text\">\n      {{ displayInfo | translate }}\n    </span>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"showDialog\">\n  <div class=\"pageTurn\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>360</mat-icon>\n        <div class=\"text\">\n          <ng-container *ngIf=\"idScan === 'BACK'\">\n            {{ \"scandoc.turnAndCapture.back\" | translate }}\n          </ng-container>\n          <ng-container *ngIf=\"idScan === 'FRONT'\">\n            {{ \"scandoc.turnAndCapture.front\" | translate }}\n          </ng-container>\n        </div>\n      </div>\n      <footer>\n        <button (click)=\"closeDialog()\" mat-raised-button>Ok</button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"promptManual\">\n  <div class=\"manualMode\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>screenshot_keyboard</mat-icon>\n        <div class=\"text\">\n          {{ \"scandoc.manual\" | translate }}\n        </div>\n      </div>\n      <footer>\n        <button\n          style=\"margin-right: 8px\"\n          (click)=\"manualSet(true)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.yes\" | translate }}\n        </button>\n        <button\n          style=\"margin-left: 8px\"\n          (click)=\"manualSet(false)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.no\" | translate }}\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"result\">\n  <section>\n    <ngx-scan-results\n      (action)=\"selfie()\"\n      [form]=\"form\"\n      [data]=\"scanResults\"\n    ></ngx-scan-results>\n\n    <footer>\n      <div class=\"actions\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n          {{ \"scandoc.reTake\" | translate }}\n        </button>\n        <button\n          [disabled]=\"error || form.invalid\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"use()\"\n        >\n          {{ \"scandoc.useData\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n\n<ng-container *ngIf=\"manual\">\n  <section>\n    <ngx-manual-scan (action)=\"manualScanData($event)\"></ngx-manual-scan>\n  </section>\n</ng-container>\n<ng-container *ngIf=\"!result && documentTypeSelected && !manual\">\n  <section>\n    <div #wraper class=\"wraper\">\n      <div class=\"loading\" *ngIf=\"(!cameraReady && !preview) || scaning\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n\n      <ng-container *ngIf=\"!error\">\n        <ngx-scandoc-webcam\n          *ngIf=\"!preview && !scaning\"\n          class=\"main\"\n          #webcam\n          type=\"document\"\n          [trigger]=\"trigger\"\n          [imageHandler]=\"imageHandler\"\n          (imageCapture)=\"handleImage($event)\"\n          (initError)=\"handleInitError($event)\"\n          (destroyed)=\"cameraOff($event)\"\n          (videoReady)=\"videoReady($event)\"\n        >\n        </ngx-scandoc-webcam>\n      </ng-container>\n      <div\n        class=\"previewData\"\n        *ngIf=\"preview\"\n        style=\"\n          z-index: 20;\n          display: flex;\n          position: absolute;\n          width: 100%;\n          height: 100%;\n        \"\n      >\n        <div class=\"p-16 error\" *ngIf=\"error\">\n          <div>\n            <div class=\"title\">\n              <mat-icon>error_outline</mat-icon\n              ><span class=\"ml-8\">{{\n                \"scandoc.unableToDetectId\" | translate\n              }}</span>\n            </div>\n\n            <ng-container *ngIf=\"errorCode === '1001'\">\n              <div>\n                {{ \"scandoc.extraction.c1001\" | translate }}\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"errorCode === '1002'\">\n              <div>\n                {{ \"scandoc.extraction.c1002\" | translate }}\n              </div>\n            </ng-container>\n\n            <ul *ngIf=\"errorCode === '1000'\">\n              <li>\n                {{ \"scandoc.placeIdCloseToDevice\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.ensureSufficientLight\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.holdDocumentSteady\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.makeSureAllEdgesOfTheIdAreVisible\" | translate }}\n              </li>\n              <li>\n                {{\n                  \"scandoc.makeSureThereAreNoGlareAndShadowsOnTheId\" | translate\n                }}\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"scanPreview\" *ngIf=\"!error && !scaning\">\n          <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"scandoc.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n          <div\n            class=\"image\"\n            [style.background-image]=\"'url(' + preview + ')'\"\n          ></div>\n        </div>\n      </div>\n    </div>\n\n    <footer *ngIf=\"preview\">\n      <!-- <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      <ng-container *ngIf=\"displayInfo\">\n        {{ displayInfo | translate }}\n      </ng-container>\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          {{ \"scandoc.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"scandoc.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n      <div class=\"actions\" *ngIf=\"preview\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n          {{ \"scandoc.retry\" | translate }}\n        </button>\n\n        <button\n          [disabled]=\"error\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"continue()\"\n        >\n          {{ \"scandoc.continueWithSelectedImage\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden;position:relative}:host.mobile .hint{font-size:13px}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;display:flex;flex-direction:row;align-items:center;justify-content:center;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}.manualMode{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.manualMode .content{margin-top:20px;background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.manualMode .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px}.manualMode .inner mat-icon{width:60px;height:60px;font-size:60px}.manualMode .inner .text{margin:20px 0}.manualMode footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.manualMode footer button{min-width:140px;box-shadow:none;border:1px solid #ccc}.pageTurn{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .content{background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.pageTurn .inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .inner mat-icon{width:60px;height:60px;font-size:60px}.pageTurn .inner .text{margin:20px 0;font-size:14px}.pageTurn footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.pageTurn footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}.hint{position:absolute;z-index:5;font-size:18px;line-height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.hint .text{border-radius:3px;padding:4px 8px;background-color:#000;color:#fff;text-align:center;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WebcamComponent, selector: "ngx-scandoc-webcam", inputs: ["imageHandler", "type", "trigger"], outputs: ["cameraSwitched", "videoReady", "imageCapture", "initError"] }, { kind: "component", type: i6$1.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: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ScanResultsComponent, selector: "ngx-scan-results", inputs: ["data", "images", "form"], outputs: ["action"] }, { kind: "component", type: ManualScanComponent, selector: "ngx-manual-scan", outputs: ["action"] }, { kind: "pipe", type: i4.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: "<ng-container\n  *ngIf=\"cameraProvider.rectPosition.t > 0 && displayInfo && !result && !manual\"\n>\n  <div class=\"hint\" [ngStyle]=\"{ top: cameraProvider.hintPosition + 'px' }\">\n    <span class=\"text\">\n      {{ displayInfo | translate }}\n    </span>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"showDialog\">\n  <div class=\"pageTurn\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>360</mat-icon>\n        <div class=\"text\">\n          <ng-container *ngIf=\"idScan === 'BACK'\">\n            {{ \"scandoc.turnAndCapture.back\" | translate }}\n          </ng-container>\n          <ng-container *ngIf=\"idScan === 'FRONT'\">\n            {{ \"scandoc.turnAndCapture.front\" | translate }}\n          </ng-container>\n        </div>\n      </div>\n      <footer>\n        <button (click)=\"closeDialog()\" mat-raised-button>Ok</button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"promptManual\">\n  <div class=\"manualMode\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>screenshot_keyboard</mat-icon>\n        <div class=\"text\">\n          {{ \"scandoc.manual\" | translate }}\n        </div>\n      </div>\n      <footer>\n        <button\n          style=\"margin-right: 8px\"\n          (click)=\"manualSet(true)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.yes\" | translate }}\n        </button>\n        <button\n          style=\"margin-left: 8px\"\n          (click)=\"manualSet(false)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.no\" | translate }}\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"result\">\n  <section>\n    <ngx-scan-results\n      (action)=\"selfie()\"\n      [form]=\"form\"\n      [data]=\"scanResults\"\n    ></ngx-scan-results>\n\n    <footer>\n      <div class=\"actions\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n          {{ \"scandoc.reTake\" | translate }}\n        </button>\n        <button\n          [disabled]=\"error || form.invalid\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"use()\"\n        >\n          {{ \"scandoc.useData\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n\n<ng-container *ngIf=\"manual\">\n  <section>\n    <ngx-manual-scan (action)=\"manualScanData($event)\"></ngx-manual-scan>\n  </section>\n</ng-container>\n<ng-container *ngIf=\"!result && documentTypeSelected && !manual\">\n  <section>\n    <div #wraper class=\"wraper\">\n      <div class=\"loading\" *ngIf=\"(!cameraReady && !preview) || scaning\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n\n      <ng-container *ngIf=\"!error\">\n        <ngx-scandoc-webcam\n          *ngIf=\"!preview && !scaning\"\n          class=\"main\"\n          #webcam\n          type=\"document\"\n          [trigger]=\"trigger\"\n          [imageHandler]=\"imageHandler\"\n          (imageCapture)=\"handleImage($event)\"\n          (initError)=\"handleInitError($event)\"\n          (destroyed)=\"cameraOff($event)\"\n          (videoReady)=\"videoReady($event)\"\n        >\n        </ngx-scandoc-webcam>\n      </ng-container>\n      <div\n        class=\"previewData\"\n        *ngIf=\"preview\"\n        style=\"\n          z-index: 20;\n          display: flex;\n          position: absolute;\n          width: 100%;\n          height: 100%;\n        \"\n      >\n        <div class=\"p-16 error\" *ngIf=\"error\">\n          <div>\n            <div class=\"title\">\n              <mat-icon>error_outline</mat-icon\n              ><span class=\"ml-8\">{{\n                \"scandoc.unableToDetectId\" | translate\n              }}</span>\n            </div>\n\n            <ng-container *ngIf=\"errorCode === '1001'\">\n              <div>\n                {{ \"scandoc.extraction.c1001\" | translate }}\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"errorCode === '1002'\">\n              <div>\n                {{ \"scandoc.extraction.c1002\" | translate }}\n              </div>\n            </ng-container>\n\n            <ul *ngIf=\"errorCode === '1000'\">\n              <li>\n                {{ \"scandoc.placeIdCloseToDevice\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.ensureSufficientLight\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.holdDocumentSteady\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.makeSureAllEdgesOfTheIdAreVisible\" | translate }}\n              </li>\n              <li>\n                {{\n                  \"scandoc.makeSureThereAreNoGlareAndShadowsOnTheId\" | translate\n                }}\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"scanPreview\" *ngIf=\"!error && !scaning\">\n          <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"scandoc.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n          <div\n            class=\"image\"\n            [style.background-image]=\"'url(' + preview + ')'\"\n          ></div>\n        </div>\n      </div>\n    </div>\n\n    <footer *ngIf=\"preview\">\n      <!-- <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      <ng-container *ngIf=\"displayInfo\">\n        {{ displayInfo | translate }}\n      </ng-container>\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          {{ \"scandoc.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"scandoc.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n      <div class=\"actions\" *ngIf=\"preview\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n          {{ \"scandoc.retry\" | translate }}\n        </button>\n\n        <button\n          [disabled]=\"error\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"continue()\"\n        >\n          {{ \"scandoc.continueWithSelectedImage\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden;position:relative}:host.mobile .hint{font-size:11px}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;display:flex;flex-direction:row;align-items:center;justify-content:center;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}.manualMode{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.manualMode .content{margin-top:20px;background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.manualMode .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px}.manualMode .inner mat-icon{width:60px;height:60px;font-size:60px}.manualMode .inner .text{margin:20px 0}.manualMode footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.manualMode footer button{min-width:140px;box-shadow:none;border:1px solid #ccc}.pageTurn{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .content{background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.pageTurn .inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .inner mat-icon{width:60px;height:60px;font-size:60px}.pageTurn .inner .text{margin:20px 0;font-size:14px}.pageTurn footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.pageTurn footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}.hint{position:absolute;z-index:5;font-size:16px;line-height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.hint .text{border-radius:3px;padding:4px 8px;background-color:#000;color:#fff;text-align:center;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}\n"] }]
+            args: [{ selector: 'ngx-scan', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"cameraProvider.rectPosition.t > 0 && displayInfo && !result && !manual\"\n>\n  <div class=\"hint\" [ngStyle]=\"{ top: cameraProvider.hintPosition + 'px' }\">\n    <span class=\"text\">\n      {{ displayInfo | translate }}\n    </span>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"showDialog\">\n  <div class=\"pageTurn\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>360</mat-icon>\n        <div class=\"text\">\n          <ng-container *ngIf=\"idScan === 'BACK'\">\n            {{ \"scandoc.turnAndCapture.back\" | translate }}\n          </ng-container>\n          <ng-container *ngIf=\"idScan === 'FRONT'\">\n            {{ \"scandoc.turnAndCapture.front\" | translate }}\n          </ng-container>\n        </div>\n      </div>\n      <footer>\n        <button (click)=\"closeDialog()\" mat-raised-button>Ok</button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"promptManual\">\n  <div class=\"manualMode\">\n    <div class=\"content\">\n      <div class=\"inner\">\n        <mat-icon>screenshot_keyboard</mat-icon>\n        <div class=\"text\">\n          {{ \"scandoc.manual\" | translate }}\n        </div>\n      </div>\n      <footer>\n        <button\n          style=\"margin-right: 8px\"\n          (click)=\"manualSet(true)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.yes\" | translate }}\n        </button>\n        <button\n          style=\"margin-left: 8px\"\n          (click)=\"manualSet(false)\"\n          mat-raised-button\n        >\n          {{ \"scandoc.no\" | translate }}\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"result\">\n  <section>\n    <ngx-scan-results\n      (action)=\"selfie()\"\n      [form]=\"form\"\n      [data]=\"scanResults\"\n    ></ngx-scan-results>\n\n    <footer>\n      <div class=\"actions\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retake()\">\n          {{ \"scandoc.reTake\" | translate }}\n        </button>\n        <button\n          [disabled]=\"error || form.invalid\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"use()\"\n        >\n          {{ \"scandoc.useData\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n\n<ng-container *ngIf=\"manual\">\n  <section>\n    <ngx-manual-scan (action)=\"manualScanData($event)\"></ngx-manual-scan>\n  </section>\n</ng-container>\n<ng-container *ngIf=\"!result && documentTypeSelected && !manual\">\n  <section>\n    <div #wraper class=\"wraper\">\n      <div class=\"loading\" *ngIf=\"(!cameraReady && !preview) || scaning\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n\n      <ng-container *ngIf=\"!error\">\n        <ngx-scandoc-webcam\n          *ngIf=\"!preview && !scaning\"\n          class=\"main\"\n          #webcam\n          type=\"document\"\n          [trigger]=\"trigger\"\n          [imageHandler]=\"imageHandler\"\n          (imageCapture)=\"handleImage($event)\"\n          (initError)=\"handleInitError($event)\"\n          (destroyed)=\"cameraOff($event)\"\n          (videoReady)=\"videoReady($event)\"\n        >\n        </ngx-scandoc-webcam>\n      </ng-container>\n      <div\n        class=\"previewData\"\n        *ngIf=\"preview\"\n        style=\"\n          z-index: 20;\n          display: flex;\n          position: absolute;\n          width: 100%;\n          height: 100%;\n        \"\n      >\n        <div class=\"p-16 error\" *ngIf=\"error\">\n          <div>\n            <div class=\"title\">\n              <mat-icon>error_outline</mat-icon\n              ><span class=\"ml-8\">{{\n                \"scandoc.unableToDetectId\" | translate\n              }}</span>\n            </div>\n\n            <ng-container *ngIf=\"errorCode === '1001'\">\n              <div>\n                {{ \"scandoc.extraction.c1001\" | translate }}\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"errorCode === '1002'\">\n              <div>\n                {{ \"scandoc.extraction.c1002\" | translate }}\n              </div>\n            </ng-container>\n\n            <ul *ngIf=\"errorCode === '1000'\">\n              <li>\n                {{ \"scandoc.placeIdCloseToDevice\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.ensureSufficientLight\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.holdDocumentSteady\" | translate }}\n              </li>\n              <li>\n                {{ \"scandoc.makeSureAllEdgesOfTheIdAreVisible\" | translate }}\n              </li>\n              <li>\n                {{\n                  \"scandoc.makeSureThereAreNoGlareAndShadowsOnTheId\" | translate\n                }}\n              </li>\n            </ul>\n          </div>\n        </div>\n\n        <div class=\"scanPreview\" *ngIf=\"!error && !scaning\">\n          <!-- <div class=\"py-16\" style=\"font-size: 16px\">\n          {{\n            \"scandoc.ensureAllTextsAreVisible\"\n              | translate\n          }}\n        </div> -->\n          <div\n            class=\"image\"\n            [style.background-image]=\"'url(' + preview + ')'\"\n          ></div>\n        </div>\n      </div>\n    </div>\n\n    <footer *ngIf=\"preview\">\n      <!-- <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      <ng-container *ngIf=\"displayInfo\">\n        {{ displayInfo | translate }}\n      </ng-container>\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          {{ \"scandoc.captureBack\" | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"idScan === 'FRONT'\">\n          Turn document and:\n          {{ \"scandoc.captureFront\" | translate }}\n        </ng-container>\n      </div>\n    </div> -->\n\n      <div class=\"actions\" *ngIf=\"preview\">\n        <button class=\"mr-4\" mat-raised-button (click)=\"retry()\">\n          {{ \"scandoc.retry\" | translate }}\n        </button>\n\n        <button\n          [disabled]=\"error\"\n          class=\"ml-4\"\n          mat-raised-button\n          (click)=\"continue()\"\n        >\n          {{ \"scandoc.continueWithSelectedImage\" | translate }}\n        </button>\n      </div>\n    </footer>\n  </section>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column!important;flex:1;background-color:#f5f5f5;overflow:hidden;position:relative}:host.mobile .hint{font-size:13px}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;display:flex;flex-direction:row;align-items:center;justify-content:center;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}.manualMode{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.manualMode .content{margin-top:20px;background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.manualMode .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px}.manualMode .inner mat-icon{width:60px;height:60px;font-size:60px}.manualMode .inner .text{margin:20px 0}.manualMode footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.manualMode footer button{min-width:140px;box-shadow:none;border:1px solid #ccc}.pageTurn{position:absolute;width:100%;height:100%;z-index:200;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .content{background-color:#fff;border-radius:6px;max-width:300px;width:100%;display:flex;flex-direction:column;padding:30px 20px 0}.pageTurn .inner{display:flex;flex-direction:column;align-items:center;justify-content:center}.pageTurn .inner mat-icon{width:60px;height:60px;font-size:60px}.pageTurn .inner .text{margin:20px 0;font-size:14px}.pageTurn footer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-bottom:20px}.pageTurn footer button{min-width:200px;box-shadow:none;border:1px solid #ccc}.hint{position:absolute;z-index:5;font-size:18px;line-height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.hint .text{border-radius:3px;padding:4px 8px;background-color:#000;color:#fff;text-align:center;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: NgxScandocCameraProvider }, { type: i0.Injector }, { type: LayoutProvider }, { type: i2.Platform }, { type: i4$1.DeviceDetectorService }, { type: AuthProvider }]; }, propDecorators: { type: [{
                 type: Input
             }], dialogs: [{