@veloceapps/sdk 3.0.0 → 3.0.1

package/fesm2015/veloce-sdk.js

@@ -1,26 +1,26 @@
-import * as i3 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, NgModule, InjectionToken, Optional, Inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule, Injectable, InjectionToken, Optional, Inject } from '@angular/core';
 import * as i1$1 from '@veloce/api';
 import { ApiModule } from '@veloce/api';
-import * as i2 from '@veloce/components';
-import { LoaderModule } from '@veloce/components';
+import * as i2$1 from '@veloce/components';
+import { LoaderModule, ToastType } from '@veloce/components';
 import * as i1$3 from '@veloce/sdk/cms';
 import { PreviewModule, LauncherModule } from '@veloce/sdk/cms';
-import * as i2$1 from '@veloce/sdk/runtime';
+import * as i2 from '@veloce/sdk/runtime';
 import { RuntimeOperation, RuntimeModule, ContextService } from '@veloce/sdk/runtime';
 import * as i1 from '@angular/router';
-import { NavigationStart, NavigationCancel, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
-import { filter, map, startWith, distinctUntilChanged, shareReplay, Subject, of, BehaviorSubject, first as first$1, takeUntil as takeUntil$1, tap, switchMap as switchMap$1, catchError, from } from 'rxjs';
-import { ConfigurationContextMode, EntityUtil } from '@veloce/core';
-import * as i5 from '@angular/forms';
+import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, RouterModule } from '@angular/router';
+import { map, filter, shareReplay, startWith, distinctUntilChanged, Subject, of, BehaviorSubject, first as first$1, takeUntil as takeUntil$1, tap, switchMap as switchMap$1, catchError, from } from 'rxjs';
+import { ConfigurationContextMode, EntityUtil, UITemplateComponentType, UITemplateType } from '@veloce/core';
+import * as i6 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$1 from 'primeng/button';
+import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i6 from 'primeng/inputtext';
+import * as i7 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i4 from 'primeng/radiobutton';
+import * as i5$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { map as map$1, first, takeUntil, take, switchMap, tap as tap$1, catchError as catchError$1 } from 'rxjs/operators';
 import * as i1$2 from 'ngx-bootstrap/tooltip';
@@ -30,9 +30,62 @@ import { HttpErrorResponse } from '@angular/common/http';
 
 const VELOCE_FLOW_ROOT_ROUTE = 'VELOCE_FLOW_ROOT_ROUTE';
 
+class FlowHeaderComponent {
+}
+FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "Flow Header\n", styles: [":host{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;font-weight:bold;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vl-flow-header',
+                    templateUrl: './header.component.html',
+                    styleUrls: ['./header.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FlowHeaderModule {
+}
+FlowHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FlowHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderModule, declarations: [FlowHeaderComponent], imports: [CommonModule], exports: [FlowHeaderComponent] });
+FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FlowHeaderComponent],
+                    imports: [CommonModule],
+                    exports: [FlowHeaderComponent],
+                }]
+        }] });
+
 class RouterService {
-    constructor(router) {
+    constructor(router, route) {
         this.router = router;
+        this.route = route;
+        this.getLastChildRoute = (route) => {
+            return route.firstChild ? this.getLastChildRoute(route.firstChild) : route;
+        };
+        this.getNthChildRoute = (route, index) => {
+            if (index <= 0) {
+                return route;
+            }
+            return route.firstChild ? this.getNthChildRoute(route.firstChild, index - 1) : route;
+        };
+        this.getLastChildRouteSnapshot = (route) => {
+            return route.firstChild ? this.getLastChildRouteSnapshot(route.firstChild) : route;
+        };
+        this.watchLastChildRoute$ = (route) => {
+            return this.routeChange$.pipe(map(() => this.getLastChildRouteSnapshot(route.snapshot)));
+        };
+        this.getLastChildParams = (route) => {
+            return route.firstChild ? this.getLastChildParams(route.firstChild) : route.params;
+        };
+        this.watchLastChildParams$ = (route) => {
+            return this.routeChange$.pipe(map(() => this.getLastChildParams(route.snapshot)));
+        };
+        this.routeChange$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd), shareReplay());
+        this.lastChildParams$ = this.watchLastChildParams$(this.route).pipe(startWith(this.getLastChildParams(this.route.snapshot)), shareReplay());
+        this.lastChildRoute$ = this.watchLastChildRoute$(this.route).pipe(startWith(this.getLastChildRouteSnapshot(this.route.snapshot)), shareReplay());
         this.loading$ = this.router.events.pipe(filter(e => e instanceof NavigationStart ||
             e instanceof NavigationCancel ||
             e instanceof NavigationEnd ||
@@ -63,21 +116,34 @@ class RouterService {
             .join('/');
         return '/' + path;
     }
+    get route$() {
+        return this.lastChildRoute$;
+    }
+    get params$() {
+        return this.lastChildParams$;
+    }
 }
-RouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RouterService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+RouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RouterService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
 RouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RouterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RouterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }]; } });
 
 class FlowComponent {
-    constructor(routerService) {
+    constructor(routerService, context) {
         this.routerService = routerService;
+        this.context = context;
+        this.isLoading$ = this.routerService.loading$;
+        this.showHeader$ = this.routerService.route$.pipe(map(route => {
+            var _a;
+            const showHeader = ((_a = this.context.resolve()) === null || _a === void 0 ? void 0 : _a.properties.standalone) !== 'true';
+            return route.data.showHeader && showHeader;
+        }));
     }
 }
-FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, deps: [{ token: RouterService }], target: i0.ɵɵFactoryTarget.Component });
-FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"routerService.loading$ | async\">\n  <vl-loader label=\"LOADING\"></vl-loader>\n</div>\n\n<router-outlet></router-outlet>\n", styles: [".loading-overlay{position:absolute;height:100%;width:100%;left:0;right:0;top:0;bottom:0;background-color:#ffffff80;z-index:4}\n"], components: [{ type: i2.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, deps: [{ token: RouterService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-header *ngIf=\"showHeader$ | async\"></vl-flow-header>\n\n<div class=\"flow-content\">\n  <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n    <vl-loader label=\"LOADING\"></vl-loader>\n  </div>\n\n  <router-outlet></router-outlet>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.flow-content{flex-grow:1;position:relative}.loading-overlay{position:absolute;height:100%;width:100%;left:0;right:0;top:0;bottom:0;background-color:#ffffff80;z-index:4}\n"], components: [{ type: FlowHeaderComponent, selector: "vl-flow-header" }, { type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, decorators: [{
             type: Component,
             args: [{
@@ -86,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     styleUrls: ['./flow.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: RouterService }]; } });
+        }], ctorParameters: function () { return [{ type: RouterService }, { type: i2.ContextService }]; } });
 
 class ContextGuard {
     constructor(router, routerService) {
@@ -204,10 +270,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.ConfigurationSettingsApiService }]; } });
 
 class DebugComponent {
-    constructor(flowService, router, activatedRoute) {
+    constructor(flowService, router, activatedRoute, context) {
         this.flowService = flowService;
         this.router = router;
         this.activatedRoute = activatedRoute;
+        this.context = context;
         this.form = new FormGroup({
             id: new FormControl(''),
         });
@@ -227,15 +294,16 @@ class DebugComponent {
         if (!id || !this.selectedFlow) {
             return;
         }
-        const paths = this.selectedFlow.entryPath.split('/').filter(Boolean);
-        this.router.navigate(['..', ...paths], {
+        // Delete context before starting a new flow
+        this.context.delete();
+        this.router.navigate(['..', 'flows'], {
             queryParams: Object.assign({ flowId: this.selectedFlow.id, quoteId: id }, this.selectedFlow.queryParams),
             relativeTo: this.activatedRoute,
         });
     }
 }
-DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DebugComponent, deps: [{ token: FlowService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"field\">\n    <label>SF Object ID</label>\n    <input formControlName=\"id\" pInputText type=\"text\" />\n  </div>\n\n  <p-button\n    styleClass=\"p-button-primary\"\n    label=\"Run Flow\"\n    [disabled]=\"!form.value.id || !selectedFlow\"\n    (onClick)=\"runFlow()\"\n  ></p-button>\n</form>\n\n<table>\n  <thead>\n    <tr>\n      <th [width]=\"30\"></th>\n      <th [width]=\"160\">ID</th>\n      <th [width]=\"160\">Entry Path</th>\n      <th>QueryParams</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n      <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n      <td>{{ flow.id }}</td>\n      <td>{{ flow.entryPath }}</td>\n      <td>{{ flow.queryParamsStr }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["form{display:flex;align-items:center;justify-content:space-between}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}table{width:100%;border-collapse:collapse}tr{cursor:pointer}tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px}\n"], components: [{ type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.InputText, selector: "[pInputText]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DebugComponent, deps: [{ token: FlowService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"field\">\n    <label>SF Object ID</label>\n    <input formControlName=\"id\" pInputText type=\"text\" />\n  </div>\n\n  <p-button\n    styleClass=\"p-button-primary\"\n    label=\"Run Flow\"\n    [disabled]=\"!form.value.id || !selectedFlow\"\n    (onClick)=\"runFlow()\"\n  ></p-button>\n</form>\n\n<table>\n  <thead>\n    <tr>\n      <th [width]=\"30\"></th>\n      <th [width]=\"160\">ID</th>\n      <th [width]=\"160\">Entry Path</th>\n      <th>QueryParams</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n      <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n      <td>{{ flow.id }}</td>\n      <td>{{ flow.entryPath }}</td>\n      <td>{{ flow.queryParamsStr }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["form{display:flex;align-items:center;justify-content:space-between}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}table{width:100%;border-collapse:collapse}tr{cursor:pointer}tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px}\n"], components: [{ type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.InputText, selector: "[pInputText]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DebugComponent, decorators: [{
             type: Component,
             args: [{
@@ -244,7 +312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     styleUrls: ['./debug.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: FlowService }, { type: i1.Router }, { type: i1.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: FlowService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.ContextService }]; } });
 
 const routes$1 = [{ path: '', component: DebugComponent }];
 class DebugModule {
@@ -388,15 +456,15 @@ class LegacyProductComponent {
         }), switchMap(runtimeContext => this.customizeContext(productId, runtimeContext)));
     }
 }
-LegacyProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LegacyProductComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.QuoteService }, { token: i1$1.QuoteApiService }, { token: i2$1.ContextService }, { token: i2$1.RuntimeContextService }, { token: i2$1.RuntimeService }, { token: i2$1.CurrentStateService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LegacyProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: LegacyProductComponent, selector: "ng-component", ngImport: i0, template: "<vl-runtime #runtimeView (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{display:block;height:100%}\n"], components: [{ type: i2$1.RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }] });
+LegacyProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LegacyProductComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.QuoteService }, { token: i1$1.QuoteApiService }, { token: i2.ContextService }, { token: i2.RuntimeContextService }, { token: i2.RuntimeService }, { token: i2.CurrentStateService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LegacyProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: LegacyProductComponent, selector: "ng-component", ngImport: i0, template: "<vl-runtime #runtimeView (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{display:block;height:100%}\n"], components: [{ type: i2.RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: LegacyProductComponent, decorators: [{
             type: Component,
             args: [{
                     templateUrl: './legacy-product.component.html',
                     styleUrls: ['./legacy-product.component.scss'],
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2$1.QuoteService }, { type: i1$1.QuoteApiService }, { type: i2$1.ContextService }, { type: i2$1.RuntimeContextService }, { type: i2$1.RuntimeService }, { type: i2$1.CurrentStateService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.QuoteService }, { type: i1$1.QuoteApiService }, { type: i2.ContextService }, { type: i2.RuntimeContextService }, { type: i2.RuntimeService }, { type: i2.CurrentStateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -484,8 +552,8 @@ class ProductComponent {
             .find(id => id);
     }
 }
-ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ProductComponent, deps: [{ token: i1$3.ConfigurationRuntimeService }, { token: i1$3.ConfigurationService }, { token: i2$1.QuoteService }, { token: i1.ActivatedRoute }, { token: i4$1.MessageService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i2.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i1$3.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ProductComponent, deps: [{ token: i1$3.ConfigurationRuntimeService }, { token: i1$3.ConfigurationService }, { token: i2.QuoteService }, { token: i1.ActivatedRoute }, { token: i4$1.MessageService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i1$3.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ProductComponent, decorators: [{
             type: Component,
             args: [{
@@ -494,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     styleUrls: ['./product.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.ConfigurationRuntimeService }, { type: i1$3.ConfigurationService }, { type: i2$1.QuoteService }, { type: i1.ActivatedRoute }, { type: i4$1.MessageService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$3.ConfigurationRuntimeService }, { type: i1$3.ConfigurationService }, { type: i2.QuoteService }, { type: i1.ActivatedRoute }, { type: i4$1.MessageService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -529,7 +597,7 @@ class RecordNotFoundComponent {
     }
 }
 RecordNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RecordNotFoundComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RecordNotFoundComponent, selector: "vl-flow-record-not-found", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-12\">\n    <div class=\"message-wrapper\">\n      <div class=\"msg\">\n        <div *ngIf=\"message; else defaultMessage\" class=\"message-title\">\n          <p>{{ message }}</p>\n\n          <p *ngIf=\"subMessage\" class=\"message-title\">{{ subMessage }}</p>\n        </div>\n\n        <ng-template #defaultMessage>Record not found</ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RecordNotFoundComponent, selector: "vl-flow-record-not-found", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-12\">\n    <div class=\"message-wrapper\">\n      <div class=\"msg\">\n        <div *ngIf=\"message; else defaultMessage\" class=\"message-title\">\n          <p>{{ message }}</p>\n\n          <p *ngIf=\"subMessage\" class=\"message-title\">{{ subMessage }}</p>\n        </div>\n\n        <ng-template #defaultMessage>Record not found</ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RecordNotFoundComponent, decorators: [{
             type: Component,
             args: [{
@@ -553,6 +621,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 }]
         }] });
 
+class ShoppingCartComponent {
+    constructor(templatesApi, cdr, toastService) {
+        this.templatesApi = templatesApi;
+        this.cdr = cdr;
+        this.toastService = toastService;
+        this.uiDefinition = undefined;
+        this.state$ = new BehaviorSubject({ loading: true, failure: false });
+        this.destroyed$ = new Subject();
+    }
+    ngOnInit() {
+        this.generateUIDefinition$()
+            .pipe(tap(uiDef => {
+            if (!uiDef) {
+                throw 'Not found';
+            }
+            this.uiDefinition = uiDef;
+            this.state$.next({ loading: false, failure: false });
+        }), catchError(err => {
+            this.uiDefinition = undefined;
+            this.toastService.add({ severity: ToastType.error, summary: 'Failed to resolve Shopping Cart component' });
+            this.state$.next({ loading: false, failure: true });
+            throw err;
+        }), takeUntil$1(this.destroyed$))
+            .subscribe(() => this.cdr.detectChanges());
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    getTemplateRootComponent$(template) {
+        return this.templatesApi
+            .fetchComponents$(template.id)
+            .pipe(map(components => { var _a; return (_a = components.find(c => c.type === UITemplateComponentType.ROOT)) !== null && _a !== void 0 ? _a : undefined; }));
+    }
+    getShoppingCartComponentMeta$() {
+        return this.templatesApi.fetchTemplates$().pipe(map(templates => templates.filter(template => template.type === UITemplateType.SHOPPING_CART).reverse()[0]), switchMap$1(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap$1(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    }
+    generateUIDefinition$() {
+        return this.getShoppingCartComponentMeta$().pipe(map(meta => {
+            if (!meta) {
+                return;
+            }
+            const uiDef = {
+                name: '',
+                createdTimestamp: 0,
+                primary: true,
+                type: 'DEFAULT',
+                version: 2,
+                children: [
+                    {
+                        children: [],
+                        template: meta.html && btoa(meta.html),
+                        script: meta.js && btoa(meta.js),
+                        styles: meta.css && btoa(meta.css),
+                    },
+                ],
+            };
+            return uiDef;
+        }));
+    }
+}
+ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ShoppingCartComponent, selector: "vl-flow-shopping-cart", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i1$3.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vl-flow-shopping-cart',
+                    templateUrl: './shopping-cart.component.html',
+                    styleUrls: ['./shopping-cart.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }]; } });
+
+class ShoppingCartModule {
+}
+ShoppingCartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ShoppingCartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartModule, declarations: [ShoppingCartComponent], imports: [CommonModule, PreviewModule, LoaderModule], exports: [ShoppingCartComponent] });
+ShoppingCartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartModule, imports: [[CommonModule, PreviewModule, LoaderModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ShoppingCartComponent],
+                    imports: [CommonModule, PreviewModule, LoaderModule],
+                    exports: [ShoppingCartComponent],
+                }]
+        }] });
+
 class ContextResolver {
     constructor(contextService, router, routerService) {
         this.contextService = contextService;
@@ -581,11 +736,11 @@ class ContextResolver {
         }));
     }
 }
-ContextResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ContextResolver, deps: [{ token: i2$1.ContextService }, { token: i1.Router }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ContextResolver, deps: [{ token: i2.ContextService }, { token: i1.Router }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ContextResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ContextResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$1.ContextService }, { type: i1.Router }, { type: RouterService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.ContextService }, { type: i1.Router }, { type: RouterService }]; } });
 
 class FlowResolver {
     constructor(router, flowService, routerService) {
@@ -661,11 +816,11 @@ class QuoteResolver {
         }));
     }
 }
-QuoteResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: QuoteResolver, deps: [{ token: i1.Router }, { token: i2$1.QuoteService }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Injectable });
+QuoteResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: QuoteResolver, deps: [{ token: i1.Router }, { token: i2.QuoteService }, { token: RouterService }], target: i0.ɵɵFactoryTarget.Injectable });
 QuoteResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: QuoteResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: QuoteResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.QuoteService }, { type: RouterService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.QuoteService }, { type: RouterService }]; } });
 
 const rootRoute = {
     id: VELOCE_FLOW_ROOT_ROUTE,
@@ -699,6 +854,15 @@ const rootRoute = {
             runGuardsAndResolvers: 'paramsOrQueryParamsChange',
             resolve: { context: ContextResolver, quote: QuoteResolver },
             canActivate: [ContextGuard],
+            data: { showHeader: true },
+        },
+        {
+            path: 'cart',
+            component: ShoppingCartComponent,
+            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+            resolve: { context: ContextResolver, quote: QuoteResolver },
+            canActivate: [ContextGuard],
+            data: { showHeader: true },
         },
         {
             path: 'debug',
@@ -713,12 +877,12 @@ const rootRoute = {
 class FlowRoutingModule {
 }
 FlowRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FlowRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, imports: [i1.RouterModule, ProductModule, LegacyProductModule], exports: [RouterModule] });
-FlowRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, providers: [RouterService, RootGuard, ContextGuard, ContextResolver, FlowResolver, QuoteResolver], imports: [[RouterModule.forChild([rootRoute]), ProductModule, LegacyProductModule], RouterModule] });
+FlowRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, imports: [i1.RouterModule, ProductModule, LegacyProductModule, ShoppingCartModule], exports: [RouterModule] });
+FlowRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, providers: [RouterService, RootGuard, ContextGuard, ContextResolver, FlowResolver, QuoteResolver], imports: [[RouterModule.forChild([rootRoute]), ProductModule, LegacyProductModule, ShoppingCartModule], RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowRoutingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild([rootRoute]), ProductModule, LegacyProductModule],
+                    imports: [RouterModule.forChild([rootRoute]), ProductModule, LegacyProductModule, ShoppingCartModule],
                     exports: [RouterModule],
                     providers: [RouterService, RootGuard, ContextGuard, ContextResolver, FlowResolver, QuoteResolver],
                 }]
@@ -727,13 +891,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 class FlowModule {
 }
 FlowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, declarations: [FlowComponent], imports: [CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule] });
-FlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, providers: [FlowService, ContextService], imports: [[CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule]] });
+FlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, declarations: [FlowComponent], imports: [CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule, FlowHeaderModule] });
+FlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, providers: [FlowService, ContextService], imports: [[CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule, FlowHeaderModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FlowComponent],
-                    imports: [CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule],
+                    imports: [CommonModule, FlowRoutingModule, ApiModule, LauncherModule, LoaderModule, FlowHeaderModule],
                     providers: [FlowService, ContextService],
                 }]
         }] });