ngx-scandoc 1.2.2 → 1.2.3

package/fesm2020/ngx-scandoc.mjs

@@ -522,7 +522,7 @@ class WebcamComponent extends BaseComponent {
         });
     }
     onResize() {
-        this.videoReady.next(false);
+        // this.videoReady.next(false);
         this.resizeStage();
     }
     /**
@@ -674,6 +674,7 @@ class WebcamComponent extends BaseComponent {
                     this.worker = new Worker(url);
                     this.worker.onmessage = ({ data }) => {
                         if (data.base64) {
+                            console.log(data);
                             data.type == 'data';
                             this.imageHandler.next(data);
                         }
@@ -1045,6 +1046,7 @@ class WebcamComponent extends BaseComponent {
      * Init webcam live view
      */
     initWebcam(deviceId, userVideoTrackConstraints) {
+        console.log('INIT WEBCAM');
         const _video = this.nativeVideoElement;
         // const videoStreamer = this.videoStreamer.nativeElement;
         // const videoSmall = document.createElement('video');
@@ -1833,38 +1835,88 @@ class AuthProvider {
         this.http = http;
         this.config = config;
         this.token = '';
+        this.refresh_token = '';
         this.tokenTimestamps = {
-            exp: 0,
-            iat: 0,
+            Time: 0,
+            Client: 0,
+            SubClient: 0,
         };
     }
+    setSubClient(name) {
+        this.subClient = name;
+    }
     setConfig() { }
     get tokenExpired() {
-        if (this.token == '' || this.tokenTimestamps.exp === 0) {
+        console.log(this.tokenTimestamps, this.token);
+        if (this.token == '' || this.tokenTimestamps.Time === 0) {
             console.log('EXPIRED');
             return true;
         }
-        const { iat, exp } = this.tokenTimestamps;
-        return iat + 20 > exp;
+        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 = '';
+        // this.token = '';
     }
     get accesToken() {
-        return this.tokenExpired ? this.getToken() : of(this.token);
+        console.log('AT');
+        return this.tokenExpired ? this.fetchToken() : of(this.token);
+    }
+    fetchToken() {
+        if (this.token && this.refresh_token) {
+            return this.refreshToken();
+        }
+        return this.getToken();
+    }
+    refreshToken() {
+        const { path, refresh } = this.config;
+        return this.http
+            .post(`${path}${refresh}`, {
+            refresh_token: this.refresh_token,
+        })
+            .pipe(tap((token) => {
+            // console.log(this.token);
+            this.token = token.access_token;
+            this.updateToken();
+            // this.token = token.access_token;
+            // console.log('TOKEN', this.token);
+            // this.refresh_token = token.refresh_token;
+            // const decoded: any = jwt_decode(this.token);
+            // console.log(decoded);
+            // const { Time, Client, SubClient } = decoded;
+            // this.tokenTimestamps = { Time, Client, SubClient };
+        }), map((data) => data.access_token));
+    }
+    get user_key() {
+        return this.config.clientId;
+    }
+    get sub_client() {
+        return this.config.tokenName ? this.config.tokenName : this.subClient;
+    }
+    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 } = this.config;
         return this.http
-            .post(this.config.path, {
-            clientId: this.config.clientId,
-            token: this.config.tokenName,
+            .post(`${path}${login}`, {
+            user_key: this.user_key,
+            sub_client: this.sub_client,
         })
-            .pipe(map((data) => data.accessToken), tap((token) => {
-            this.token = token;
-            const decoded = jwt_decode(this.token);
-            const { iat, exp } = decoded;
-            this.tokenTimestamps = { iat, exp };
-        }));
+            .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));
     }
 }
 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 });
@@ -2801,6 +2853,8 @@ class ScanComponent extends BaseComponent {
             },
             // CallBackUrl: 'http://demo:5000/report/extracted/',
         };
+        this.frontImage = 'data:image/jpeg;base64,' + payload.DataFields.FrontImage;
+        this.backImage = 'data:image/jpeg;base64,' + payload.DataFields.BackImage;
         if (!this.scanBlastData[1].image) {
             payload.Settings.IgnoreBackImage = true;
         }
@@ -2964,10 +3018,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: 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 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\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      <ngx-scandoc-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\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      </ngx-scandoc-webcam>\n    </ng-container>\n    <div\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\">\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>\n    <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      {{ displayInfo | translate }}\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", 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;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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WebcamComponent, selector: "ngx-scandoc-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 });
+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<!-- <div style=\"display:none\">\n<img [src]=\"frontImage\">\n<img [src]=\"backImage\">\n</div> -->\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\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      <ngx-scandoc-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\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      </ngx-scandoc-webcam>\n    </ng-container>\n    <div\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\">\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>\n    <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      {{ displayInfo | translate }}\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", 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;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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WebcamComponent, selector: "ngx-scandoc-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 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\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      <ngx-scandoc-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\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      </ngx-scandoc-webcam>\n    </ng-container>\n    <div\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\">\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>\n    <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      {{ displayInfo | translate }}\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", 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;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}\n"] }]
+            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<!-- <div style=\"display:none\">\n<img [src]=\"frontImage\">\n<img [src]=\"backImage\">\n</div> -->\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\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      <ngx-scandoc-webcam\n        *ngIf=\"!preview && !scaning\"\n        class=\"main\"\n        [imageQuality]=\"1\"\n        #webcam\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      </ngx-scandoc-webcam>\n    </ng-container>\n    <div\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\">\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>\n    <div class=\"displayInfo\" *ngIf=\"!preview && cameraReady\">\n      {{ displayInfo | translate }}\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", 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;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}\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: [{
@@ -4132,7 +4186,7 @@ class HttpErrorInterceptor {
     }
     intercept(req, next) {
         //console.log(req.url);
-        if (req.url.indexOf('auth') >= 0 || req.url.indexOf('/assets/') >= 0) {
+        if (req.url.indexOf('/ks/') >= 0 || req.url.indexOf('/assets/') >= 0) {
             return next.handle(req);
         }
         const authProvider = this.injector.get(AuthProvider);
@@ -4146,6 +4200,7 @@ class HttpErrorInterceptor {
                 return next.handle(req);
             }
         }
+        console.log('AUTH II');
         this.inflightAuthRequest = authProvider.accesToken;
         return this.inflightAuthRequest.pipe(share(), switchMap((token) => {
             // unset request inflight
@@ -4162,9 +4217,14 @@ class HttpErrorInterceptor {
                 tokenExpired = find ? true : false;
             }
             console.log(err);
-            if (err.status === 401 || tokenExpired) {
-                authProvider.resetToken();
-                return this.intercept(req, next);
+            if (err.status === 401 || err.status === 403 || tokenExpired) {
+                return authProvider.refreshToken().pipe(switchMap((token) => {
+                    const transaction = req.headers.get('TransactionID');
+                    const authReq = req.clone({
+                        headers: this.getHeaders(token, transaction || ''),
+                    });
+                    return next.handle(authReq);
+                }));
             }
             else {
                 return throwError(() => new Error('' + (err && err.status ? ':' + err.status : '')));