vc-error-handlers 0.1.2 → 0.1.4

package/fesm2020/vc-error-handlers.mjs

@@ -1,6 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Optional, InjectionToken, ErrorHandler, NgModule } from '@angular/core';
+import { Injectable, Component, Directive, ViewChild, NgModule, Optional, InjectionToken, ErrorHandler } from '@angular/core';
+import { Subject, throwError } from 'rxjs';
+import * as i1 from '@vcomply/authorizer';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/router';
+import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as Sentry from '@sentry/angular-ivy';
+import { timeout, retry, catchError } from 'rxjs/operators';
 
 class VcErrorHandlersService {
     constructor() { }
@@ -14,30 +22,662 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-class VcErrorHandlersComponent {
-    constructor() { }
+var ErrorStatusCode;
+(function (ErrorStatusCode) {
+    ErrorStatusCode[ErrorStatusCode["URLNotFound"] = 404] = "URLNotFound";
+    ErrorStatusCode[ErrorStatusCode["UnauthorizedAccess"] = 403] = "UnauthorizedAccess";
+    ErrorStatusCode[ErrorStatusCode["RequestTimeout"] = 408] = "RequestTimeout";
+    ErrorStatusCode[ErrorStatusCode["Unauthenticated"] = 401] = "Unauthenticated";
+    // Server-side errors
+    ErrorStatusCode[ErrorStatusCode["InternalServerError"] = 500] = "InternalServerError";
+    ErrorStatusCode[ErrorStatusCode["ServiceUnavailable"] = 503] = "ServiceUnavailable";
+    ErrorStatusCode[ErrorStatusCode["NetworkError"] = 502] = "NetworkError";
+    // Network unavailability/offline case
+    ErrorStatusCode[ErrorStatusCode["NetworkUnavailable"] = 0] = "NetworkUnavailable";
+    // Application-specific errors
+    ErrorStatusCode[ErrorStatusCode["JSChunkUnavailable"] = 600] = "JSChunkUnavailable";
+    ErrorStatusCode[ErrorStatusCode["SoftError"] = 601] = "SoftError";
+    ErrorStatusCode[ErrorStatusCode["NotFoundError"] = 602] = "NotFoundError";
+    ErrorStatusCode[ErrorStatusCode["includes"] = 603] = "includes";
+})(ErrorStatusCode || (ErrorStatusCode = {}));
+
+class GlobalErrorService {
+    constructor() {
+        this.errorCodes = ErrorStatusCode;
+        this.globalError$ = new Subject();
+        this.localError$ = new Subject();
+    }
+    handleError(error, request) {
+        if (this.errorCodes.Unauthenticated ||
+            this.errorCodes.UnauthorizedAccess ||
+            this.errorCodes.NetworkUnavailable) {
+            this.globalError$.next(error);
+        }
+    }
+}
+GlobalErrorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GlobalErrorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GlobalErrorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AuthService {
+    constructor(authorizer) {
+        this.authorizer = authorizer;
+    }
+    logoutUser() {
+        this.authorizer.logout();
+    }
+}
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, deps: [{ token: i1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return [{ type: i1.AuthorizerService }]; } });
+
+class RouterService {
+    redirectToLogin() {
+        window.location.href =
+            `https://${window.location.host}/` +
+                'signin?redirectURL=' +
+                encodeURIComponent(window.location.href);
+    }
+}
+RouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RouterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const VCOMPLY_IMAGE_URL = 'https://cdn.v-comply.com/logo/prod/v-logo.svg';
+const API_TIMEOUT_TIME = 1000 * 15;
+const API_RETRY_COUNT = 2;
+const ERROR_CONFIG = {
+    PAGE_NOT_FOUND: {
+        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
+        title: 'Oops!',
+        description: "The page you're looking for doesn't exist.",
+        details: 'Please check the URL or return to the homepage.',
+        buttonText: 'GO TO DASHBOARD',
+    },
+    UNAUTHORIZED: {
+        imageUrl: 'https://cdn.v-comply.com/application/images/Error-page-illustration.svg',
+        title: 'Oops!',
+        description: "You don't have permission to access this page.",
+        details: 'If you believe this is an error, please contact',
+        email: 'help@v-comply.com',
+        support: 'for support',
+        buttonText: 'CONTACT SUPPORT',
+    },
+    SESSION_EXPIRED: {
+        heading: 'Session Expired!',
+        description: 'Your session has expired. Please log in again to continue using the app.',
+        buttonText: 'LOGIN',
+    },
+};
+
+class DialogConfig {
+}
+
+class SessionExpiredModalComponent {
+    constructor(dialogConfig, authService, routerService) {
+        this.dialogConfig = dialogConfig;
+        this.authService = authService;
+        this.routerService = routerService;
+        this.errorConfig = ERROR_CONFIG.SESSION_EXPIRED;
+        this.animation = false;
+        this.data = {
+            header: 'Message',
+            description: 'Description',
+            buttonText: 'Click Action',
+        };
+        this.data = this.dialogConfig.data;
+    }
+    ngOnInit() {
+        this.animation = true;
+        setTimeout(() => {
+            this.animation = false;
+        }, 300);
+    }
+    onContinueAction() {
+        this.authService.logoutUser();
+        this.routerService.redirectToLogin();
+    }
+}
+SessionExpiredModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredModalComponent, deps: [{ token: DialogConfig }, { token: AuthService }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Component });
+SessionExpiredModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SessionExpiredModalComponent, selector: "lib-session-expired-modal", ngImport: i0, template: ` <div class="error-dialog-box">
+    <div class="error-dialog-box-top">{{ errorConfig.heading }}</div>
+    <div class="error-dialog-box-mid">
+      {{ errorConfig.description }}
+    </div>
+    <div class="error-dialog-box-bottom">
+      <button class="logIn-btn">{{ errorConfig.buttonText }}</button>
+    </div>
+  </div>`, isInline: true, styles: [".error-dialog-box{background:#fff;border-radius:.75rem;box-shadow:0 1px 10px #0003;width:27rem}.error-dialog-box-top{color:#000;font-size:16px;font-weight:500;border-radius:.75rem .75rem 0 0;display:flex;align-items:center;height:3.375rem;padding:0 1rem;margin-bottom:1rem}.error-dialog-box-mid{color:#565a6f;font-size:13px;min-height:5.5rem;padding:0 1rem}.error-dialog-box-bottom{display:flex;justify-content:end;padding:1rem}.error-dialog-box-bottom button.logIn-btn{background:#1e5dd3;border-radius:.125rem;border:none;color:#fff;cursor:pointer;font-size:11px;height:2rem;padding:.5rem .75rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-session-expired-modal', template: ` <div class="error-dialog-box">
+    <div class="error-dialog-box-top">{{ errorConfig.heading }}</div>
+    <div class="error-dialog-box-mid">
+      {{ errorConfig.description }}
+    </div>
+    <div class="error-dialog-box-bottom">
+      <button class="logIn-btn">{{ errorConfig.buttonText }}</button>
+    </div>
+  </div>`, styles: [".error-dialog-box{background:#fff;border-radius:.75rem;box-shadow:0 1px 10px #0003;width:27rem}.error-dialog-box-top{color:#000;font-size:16px;font-weight:500;border-radius:.75rem .75rem 0 0;display:flex;align-items:center;height:3.375rem;padding:0 1rem;margin-bottom:1rem}.error-dialog-box-mid{color:#565a6f;font-size:13px;min-height:5.5rem;padding:0 1rem}.error-dialog-box-bottom{display:flex;justify-content:end;padding:1rem}.error-dialog-box-bottom button.logIn-btn{background:#1e5dd3;border-radius:.125rem;border:none;color:#fff;cursor:pointer;font-size:11px;height:2rem;padding:.5rem .75rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: DialogConfig }, { type: AuthService }, { type: RouterService }]; } });
+
+class InsertionDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+InsertionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: InsertionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+InsertionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: InsertionDirective, selector: "[appInsertion]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: InsertionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appInsertion]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+class DialogRef {
+    constructor() {
+        this.afterDialogClosed = new Subject();
+        this.afterClosed = this.afterDialogClosed.asObservable();
+    }
+    close(result) {
+        // debugger
+        this.afterDialogClosed.next(result);
+        document.body.style.overflow = 'auto';
+    }
+}
+
+class DialogComponent {
+    constructor(componentFactoryResolver, cd, dialogRef, config, router) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.cd = cd;
+        this.dialogRef = dialogRef;
+        this.config = config;
+        this.router = router;
+        this.animation = true;
+        this.onDialogClose = new Subject();
+        this.onClose = this.onDialogClose.asObservable();
+        // this.componentRef = this.componentRef;
+        // this.animate =   this.animate;
+        // this.insertionPoint =  this.insertionPoint;
+        // this.childComponentType =  this.childComponentType;
+    }
     ngOnInit() {
+        this.position = this.config.position;
+        this.background = this.config.background;
+        document.body.style.overflow = 'hidden';
+        setTimeout(() => {
+            this.animation = false;
+        }, 200);
+        this.routeAction();
+    }
+    routeAction() {
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                // Show loading indicator
+            }
+            if (event instanceof NavigationEnd) {
+                // Hide loading indicator
+                this.dialogRef.close();
+            }
+            if (event instanceof NavigationError) {
+                // Hide loading indicator
+                // Present error to user
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.loadChildComponent(this.childComponentType);
+        this.cd.detectChanges();
+    }
+    onOverlayClicked(evt) {
+        // this.dialogRef.close();
+    }
+    onDialogClicked(evt) {
+        evt.stopPropagation();
+    }
+    loadChildComponent(componentType) {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+        const viewContainerRef = this.insertionPoint.viewContainerRef;
+        viewContainerRef.clear();
+        this.componentRef = viewContainerRef.createComponent(componentFactory);
+    }
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+    close(data) {
+        this.onDialogClose.next(data);
+        document.body.style.overflow = 'auto';
     }
 }
-VcErrorHandlersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black',\r\n    whiteBlur: background === 'whiteBlur'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483009!important}.overlay.low{z-index:1}.overlay.black{background:#161b2fcc}.overlay.whiteBlur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: InsertionDirective, selector: "[appInsertion]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dialog', template: "<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black',\r\n    whiteBlur: background === 'whiteBlur'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;align-items:center;justify-content:center;z-index:2147483009!important}.overlay.low{z-index:1}.overlay.black{background:#161b2fcc}.overlay.whiteBlur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i3.Router }]; }, propDecorators: { insertionPoint: [{
+                type: ViewChild,
+                args: [InsertionDirective, { static: true }]
+            }] } });
+
+class DialogModule {
+}
+DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogModule, declarations: [DialogComponent, InsertionDirective], imports: [CommonModule], exports: [DialogComponent] });
+DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogModule, providers: [DialogRef], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [DialogComponent, InsertionDirective],
+                    providers: [DialogRef],
+                    exports: [DialogComponent]
+                }]
+        }] });
+
+class DialogInjector {
+    constructor(parentDialogInjector, dialogAdditionalTokens) {
+        this.parentDialogInjector = parentDialogInjector;
+        this.dialogAdditionalTokens = dialogAdditionalTokens;
+    }
+    // get(token: any, notFoundValue?: any){return; }
+    get(token, notFoundValue, flags) {
+        const value = this.dialogAdditionalTokens.get(token);
+        if (value) {
+            return value;
+        }
+        return this.parentDialogInjector.get(token, notFoundValue);
+    }
+}
+
+class DialogService {
+    constructor(componentFactoryResolver, appRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    open(componentType, config) {
+        const dialogRef = this.appendDialogComponentToBody(config);
+        this.dialogComponentRef.instance.childComponentType = componentType;
+        return dialogRef;
+    }
+    appendDialogComponentToBody(config) {
+        const map = new WeakMap();
+        map.set(DialogConfig, config);
+        const dialogRef = new DialogRef();
+        map.set(DialogRef, dialogRef);
+        const sub = dialogRef.afterClosed.subscribe(() => {
+            this.removeDialogComponentFromBody();
+            sub.unsubscribe();
+        });
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
+        const componentRef = componentFactory.create(new DialogInjector(this.injector, map));
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        this.dialogComponentRef = componentRef;
+        this.dialogComponentRef.instance.onClose.subscribe(() => {
+            this.removeDialogComponentFromBody();
+        });
+        return dialogRef;
+    }
+    removeDialogComponentFromBody() {
+        this.appRef.detachView(this.dialogComponentRef.hostView);
+        this.dialogComponentRef.destroy();
+    }
+}
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogService, providedIn: DialogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: DialogModule,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
+
+class SessionExpiredComponent {
+    constructor(dialogService) {
+        this.dialogService = dialogService;
+        this.errorConfig = ERROR_CONFIG.SESSION_EXPIRED;
+    }
+    ngOnInit() {
+        this.dialogService.open(SessionExpiredModalComponent, {
+            data: this.errorConfig,
+            position: 'center',
+            background: 'whiteBlur',
+        });
+    }
+}
+SessionExpiredComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SessionExpiredComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SessionExpiredComponent, selector: "lib-session-expired", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SessionExpiredComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-session-expired', template: ``, styles: [] }]
+        }], ctorParameters: function () { return [{ type: DialogService }]; } });
+
+class UnauthorizedComponent {
+    constructor() {
+        this.errorConfig = ERROR_CONFIG.UNAUTHORIZED;
+        this.VcomplyImage = VCOMPLY_IMAGE_URL;
+    }
+    redirectToSupport() { }
+}
+UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: UnauthorizedComponent, selector: "lib-unauthorized", ngImport: i0, template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img src="VcomplyImage" alt="VComply" width="24" height="24" />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="256"
+              height="256"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">
+              {{ errorConfig.details }}
+              <a href="mailto:{help@v-comply.com}">{{ errorConfig.email }}</a>
+              {{ errorConfig.support }}.
+            </div>
+            <button class="errorPage-btn" (click)="redirectToSupport()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe96a;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: UnauthorizedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-unauthorized', template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img src="VcomplyImage" alt="VComply" width="24" height="24" />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="256"
+              height="256"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">
+              {{ errorConfig.details }}
+              <a href="mailto:{help@v-comply.com}">{{ errorConfig.email }}</a>
+              {{ errorConfig.support }}.
+            </div>
+            <button class="errorPage-btn" (click)="redirectToSupport()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe96a;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}\n"] }]
+        }] });
+
+class VcErrorHandlersComponent {
+    constructor(globalErrorService) {
+        this.globalErrorService = globalErrorService;
+        this.errorCodes = ErrorStatusCode;
+        this.unauthorized = false;
+        this.sessionExpired = false;
+        this.networkUnavailable = false;
+        this.globalErrorService.globalError$.subscribe((error) => {
+            this.handleError(error);
+        });
+    }
+    handleError(error) {
+        if (error.status === this.errorCodes.Unauthenticated) {
+            this.sessionExpired = true;
+        }
+        else if (error.status === this.errorCodes.UnauthorizedAccess) {
+            this.unauthorized = true;
+        }
+        else if (error.status === this.errorCodes.NetworkUnavailable) {
+            this.networkUnavailable = true;
+        }
+    }
+}
+VcErrorHandlersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, deps: [{ token: GlobalErrorService }], target: i0.ɵɵFactoryTarget.Component });
 VcErrorHandlersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: VcErrorHandlersComponent, selector: "lib-vc-error-handlers", ngImport: i0, template: `
-    <p>
-      vc-error-handlers works!
-    </p>
-  `, isInline: true });
+    <lib-session-expired *ngIf="sessionExpired"></lib-session-expired>
+    <lib-unauthorized *ngIf="unauthorized"></lib-unauthorized>
+  `, isInline: true, components: [{ type: SessionExpiredComponent, selector: "lib-session-expired" }, { type: UnauthorizedComponent, selector: "lib-unauthorized" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-vc-error-handlers',
                     template: `
-    <p>
-      vc-error-handlers works!
-    </p>
+    <lib-session-expired *ngIf="sessionExpired"></lib-session-expired>
+    <lib-unauthorized *ngIf="unauthorized"></lib-unauthorized>
   `,
-                    styles: []
+                    styles: [],
                 }]
+        }], ctorParameters: function () { return [{ type: GlobalErrorService }]; } });
+
+class PageNotFoundComponent {
+    constructor() {
+        this.errorConfig = ERROR_CONFIG.PAGE_NOT_FOUND;
+        this.VcomplyImage = VCOMPLY_IMAGE_URL;
+    }
+    redirectToHome() {
+        // Redirect to home page
+    }
+}
+PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PageNotFoundComponent, selector: "lib-not-found", ngImport: i0, template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img
+          src="VcomplyImage"
+          alt="VComply"
+          width="24"
+          height="24"
+        />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="256"
+              height="256"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">{{ errorConfig.details }}</div>
+            <button class="errorPage-btn" (click)="redirectToHome()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe96a;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-not-found', template: `
+    <div class="errorPage">
+      <div class="errorPage-top">
+        <img
+          src="VcomplyImage"
+          alt="VComply"
+          width="24"
+          height="24"
+        />
+      </div>
+      <div class="errorPage-container">
+        <div class="errorPage-inner">
+          <div class="errorPage-inner-image">
+            <img
+              [src]="errorConfig.imageUrl"
+              alt="Error Image"
+              width="256"
+              height="256"
+            />
+          </div>
+          <div class="errorPage-inner-right">
+            <div class="errorPage-heading">{{ errorConfig.title }}</div>
+            <div class="errorPage-text">{{ errorConfig.description }}</div>
+            <div class="errorPage-details">{{ errorConfig.details }}</div>
+            <button class="errorPage-btn" (click)="redirectToHome()">
+              {{ errorConfig.buttonText }} <i class="icons">&#xe96a;</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.errorPage{background:#161b2f;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}.errorPage-top{width:100%;height:3rem;display:flex;align-items:center;padding-left:.75rem}.errorPage-container{background:#f2f2f5;border-radius:.75rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1d5dd31a;height:calc(100vh - 3.75rem);display:flex;align-items:center;justify-content:center;padding:0 4rem;margin:0 .75rem}.errorPage-inner{display:flex;align-items:center}.errorPage-inner-image{width:16rem}.errorPage-inner-right{margin-left:2rem;width:calc(100% - 18rem)}.errorPage-inner-right .errorPage-heading{-webkit-text-fill-color:#e3e3e9;-webkit-text-stroke-color:#a9aab6;-webkit-text-stroke-width:1px;color:#e3e3e9;font-size:78px;font-weight:bold;line-height:110px;margin-bottom:1.5rem}.errorPage-inner-right .errorPage-text{color:#141724;font-size:19px;font-weight:500;line-height:1.75rem;margin-bottom:.5rem}.errorPage-inner-right .errorPage-details{color:#565a6f;font-size:13px;line-height:20px;margin-bottom:1.75rem}.errorPage-inner-right .errorPage-btn{background:#1e5dd3;border-radius:.25rem;border:none;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:2rem;padding:0 1rem}.errorPage-inner-right .errorPage-btn i{font-size:14px;margin-left:.25rem}\n"] }]
+        }] });
+
+class ChunkUnavailableComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ChunkUnavailableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChunkUnavailableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChunkUnavailableComponent, selector: "lib-chunk-unavailable", ngImport: i0, template: "<p>chunk-unavailable works!</p>\r\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChunkUnavailableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chunk-unavailable', template: "<p>chunk-unavailable works!</p>\r\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });
 
+class ServerErrorComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+ServerErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ServerErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ServerErrorComponent, selector: "lib-server-error", ngImport: i0, template: "<p>server-error works!</p>\r\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ServerErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-server-error', template: "<p>server-error works!</p>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class SnackBarService {
+    constructor() {
+        this.snackbarSubject = new Subject();
+        this.snackbarState = this.snackbarSubject.asObservable();
+    }
+    show(message, type) {
+        this.snackbarSubject.next({
+            show: true,
+            message,
+            icon: type,
+        });
+    }
+    hide() {
+        this.snackbarSubject.next({
+            show: false,
+            message: '',
+            icon: '',
+        });
+    }
+}
+SnackBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SnackBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SnackBarComponent {
+    constructor(snackbarService) {
+        this.snackbarService = snackbarService;
+        this.show = false;
+        this.message = '--';
+        this.icon = '&#xe914;';
+        this.type = 'alert';
+        this.icons = {
+            success: '&#xe93d;',
+            warning: '&#xe914;',
+            info: '&#xe932;',
+            alert: '&#xe914;',
+            error: '&#xeaae;',
+        };
+    }
+    ngOnInit() {
+        this.snackbarSubscription = this.snackbarService.snackbarState.subscribe((state) => {
+            if (state.icon && Object.keys(this.icons).includes(state?.icon)) {
+                this.icon = this.icons[state.icon];
+                this.type = state?.icon;
+            }
+            this.message = state.message;
+            this.show = state.show;
+            this.setAutoClose();
+        });
+    }
+    setAutoClose() {
+        setTimeout(() => {
+            this.show = false;
+            this.close();
+        }, 3000);
+    }
+    close() {
+        this.show = false;
+        this.snackbarService.hide();
+    }
+    ngOnDestroy() {
+        this.snackbarSubscription.unsubscribe();
+    }
+}
+SnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, deps: [{ token: SnackBarService }], target: i0.ɵɵFactoryTarget.Component });
+SnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SnackBarComponent, selector: "app-snack-bar", ngImport: i0, template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-snack-bar', template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n    <div class=\"workflow-snackbar-inner\">\r\n      <div class=\"workflow-snackbarText\">\r\n        <!-- &#xe914; -->\r\n        <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n      </div>\r\n      <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n    </div>\r\n  </div>", styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#ffffff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert,::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: SnackBarService }]; } });
+
+class SnackBarModule {
+}
+SnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SnackBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarModule, declarations: [SnackBarComponent], imports: [CommonModule], exports: [SnackBarComponent] });
+SnackBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SnackBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SnackBarComponent],
+                    imports: [CommonModule],
+                    exports: [SnackBarComponent],
+                }]
+        }] });
+
 class Configurations {
     constructor() {
         this.sentryConfig = {};
@@ -45,7 +685,8 @@ class Configurations {
 }
 
 class SentryErrorHandler {
-    constructor(config) {
+    constructor(authorizerService, config) {
+        this.authorizerService = authorizerService;
         if (config?.sentryConfig) {
             const SENTRY_CONFIG = config.sentryConfig;
             Sentry.init({
@@ -60,6 +701,7 @@ class SentryErrorHandler {
                 replaysSessionSampleRate: SENTRY_CONFIG.REPLAY_SESSION_SAMPLE_RATE,
                 replaysOnErrorSampleRate: SENTRY_CONFIG.REPLAY_ON_ERROR_SAMPLE_RATE,
             });
+            Sentry.setUser({ userDetails: this.authorizerService.getUser() });
         }
     }
     handleError(error) {
@@ -74,14 +716,38 @@ class SentryErrorHandler {
         }
     }
 }
-SentryErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SentryErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, deps: [{ token: i1.AuthorizerService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SentryErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SentryErrorHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.AuthorizerService }, { type: Configurations, decorators: [{
                     type: Optional
                 }] }]; } });
 
+class HttpReqInterceptor {
+    constructor(errorService) {
+        this.errorService = errorService;
+        this.errorCodes = ErrorStatusCode;
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(timeout(API_TIMEOUT_TIME), retry(API_RETRY_COUNT), catchError((error) => {
+            if (this.canNotifyErrorService(error.status)) {
+                this.errorService.handleError(error, req);
+            }
+            return throwError(error);
+        }));
+    }
+    canNotifyErrorService(statusCode) {
+        const manageableCodes = Object.values(ErrorStatusCode).filter((value) => typeof value === 'number');
+        return manageableCodes.includes(statusCode);
+    }
+}
+HttpReqInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor, deps: [{ token: GlobalErrorService }], target: i0.ɵɵFactoryTarget.Injectable });
+HttpReqInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HttpReqInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: GlobalErrorService }]; } });
+
 const FOR_ROOT_SENTRY_OPTIONS_TOKEN = new InjectionToken('forRoot() SentryErrorHandler options');
 class VcErrorHandlersModule {
     static forRoot(environmentConfig) {
@@ -92,15 +758,50 @@ class VcErrorHandlersModule {
     }
 }
 VcErrorHandlersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VcErrorHandlersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, declarations: [VcErrorHandlersComponent], exports: [VcErrorHandlersComponent] });
-VcErrorHandlersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, providers: [{ provide: ErrorHandler, useClass: SentryErrorHandler }], imports: [[]] });
+VcErrorHandlersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, bootstrap: [VcErrorHandlersComponent], declarations: [VcErrorHandlersComponent,
+        PageNotFoundComponent,
+        UnauthorizedComponent,
+        SessionExpiredComponent,
+        ChunkUnavailableComponent,
+        ServerErrorComponent,
+        SessionExpiredModalComponent], imports: [DialogModule, SnackBarModule], exports: [VcErrorHandlersComponent,
+        PageNotFoundComponent,
+        UnauthorizedComponent,
+        SessionExpiredComponent,
+        ChunkUnavailableComponent,
+        ServerErrorComponent,
+        SessionExpiredModalComponent] });
+VcErrorHandlersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, providers: [
+        { provide: ErrorHandler, useClass: SentryErrorHandler },
+        { provide: HTTP_INTERCEPTORS, useClass: HttpReqInterceptor, multi: true },
+    ], imports: [[DialogModule, SnackBarModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: VcErrorHandlersModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [VcErrorHandlersComponent],
-                    imports: [],
-                    exports: [VcErrorHandlersComponent],
-                    providers: [{ provide: ErrorHandler, useClass: SentryErrorHandler }],
+                    declarations: [
+                        VcErrorHandlersComponent,
+                        PageNotFoundComponent,
+                        UnauthorizedComponent,
+                        SessionExpiredComponent,
+                        ChunkUnavailableComponent,
+                        ServerErrorComponent,
+                        SessionExpiredModalComponent,
+                    ],
+                    imports: [DialogModule, SnackBarModule],
+                    exports: [
+                        VcErrorHandlersComponent,
+                        PageNotFoundComponent,
+                        UnauthorizedComponent,
+                        SessionExpiredComponent,
+                        ChunkUnavailableComponent,
+                        ServerErrorComponent,
+                        SessionExpiredModalComponent,
+                    ],
+                    providers: [
+                        { provide: ErrorHandler, useClass: SentryErrorHandler },
+                        { provide: HTTP_INTERCEPTORS, useClass: HttpReqInterceptor, multi: true },
+                    ],
+                    bootstrap: [VcErrorHandlersComponent],
                 }]
         }] });
 
@@ -112,4 +813,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOR_ROOT_SENTRY_OPTIONS_TOKEN, VcErrorHandlersComponent, VcErrorHandlersModule, VcErrorHandlersService };
+export { AuthService, ChunkUnavailableComponent, FOR_ROOT_SENTRY_OPTIONS_TOKEN, GlobalErrorService, HttpReqInterceptor, PageNotFoundComponent, RouterService, ServerErrorComponent, SessionExpiredComponent, SessionExpiredModalComponent, UnauthorizedComponent, VcErrorHandlersComponent, VcErrorHandlersModule, VcErrorHandlersService };
+//# sourceMappingURL=vc-error-handlers.mjs.map