@veloceapps/sdk 8.0.0-20 → 8.0.0-201

package/fesm2020/veloceapps-sdk.mjs

@@ -1,51 +1,33 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, InjectionToken, Optional, Inject, Injectable, ViewChild, Input } from '@angular/core';
-import * as i2 from '@veloceapps/api';
+import { Component, ChangeDetectionStrategy, NgModule, Optional, Inject, Injectable, inject } from '@angular/core';
+import * as i1$1 from '@veloceapps/api';
 import { ApiModule } from '@veloceapps/api';
-import * as i3$1 from '@veloceapps/components';
-import { ToastType, LetDirectiveModule, QuantityControlModule, ErrorTooltipModule, HiddenTextTooltipModule, LoaderModule, EmptyStateModule } from '@veloceapps/components';
+import * as i2$1 from '@veloceapps/components';
+import { ToastType, LoaderModule, LetDirectiveModule } from '@veloceapps/components';
 import * as i5 from '@veloceapps/sdk/cms';
-import { extractElementMetadata, extendElementMetadata, PreviewModule, FlowAction, LauncherModule } from '@veloceapps/sdk/cms';
-import * as i1$1 from '@veloceapps/sdk/core';
-import { isLineItemModified, getOriginParent, SdkPipesModule, RuntimeOperation, generateModifiedAssetsMap, SdkCoreModule } from '@veloceapps/sdk/core';
+import { extractElementMetadata, extendElementMetadata, btoaSafe, PreviewModule, FlowAction, LauncherModule } from '@veloceapps/sdk/cms';
+import * as i2 from '@veloceapps/sdk/core';
+import { FLOW_CUSTOMIZATION, ContextService, FlowStateService, FlowInfoService, QuoteDraftService, ConfigurationService, IntegrationState, SdkCoreModule } from '@veloceapps/sdk/core';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from 'primeng/dynamicdialog';
-import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, EntityUtil, isLegacyUIDefinition, getUIDefinitionProperties, UUID } from '@veloceapps/core';
-import { BehaviorSubject, Subject, first, tap, takeUntil, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, finalize, noop, forkJoin, from, throwError } from 'rxjs';
-import * as i7 from 'primeng/overlaypanel';
-import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
-import * as i13 from 'primeng/splitbutton';
-import { SplitButtonModule } from 'primeng/splitbutton';
-import * as i10$1 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i5$1 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
-import { InputNumberModule } from 'primeng/inputnumber';
-import * as i9 from 'primeng/virtualscroller';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
+import { BehaviorSubject, Subject, filter, first, tap, takeUntil, catchError, of, map, switchMap, shareReplay, startWith, distinctUntilChanged, from, take, combineLatest, forkJoin, throwError } from 'rxjs';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, RouterModule } from '@angular/router';
-import * as i8 from 'primeng/api';
-import * as i5$2 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { requiredValidator, invalidCharactersValidator, standardCharSetWithSpaceRegExp, reservedIdentifierValidator } from '@veloceapps/core/forms';
-import { cloneDeep, uniq } from 'lodash';
-import { withLatestFrom, tap as tap$1, takeUntil as takeUntil$1, first as first$1, take, map as map$1, switchMap as switchMap$1 } from 'rxjs/operators';
-import * as i9$1 from 'primeng/sidebar';
-import { SidebarModule } from 'primeng/sidebar';
-import * as i10 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import * as i11 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import { HttpErrorResponse } from '@angular/common/http';
+import { mapShoppingCartSettings, getMaxRenewalTermsValue, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, isVeloceError, extractErrorDetails, UUID } from '@veloceapps/core';
+import { HttpErrorResponse, HttpParams } from '@angular/common/http';
+import * as i5$1 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
+import * as i8 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i4$1 from '@veloceapps/sdk/runtime';
-import { RuntimeModule } from '@veloceapps/sdk/runtime';
+import * as i2$2 from 'primeng/api';
+import { catchError as catchError$1 } from 'rxjs/operators';
+import { DomHandler } from 'primeng/dom';
 
 const VELOCE_FLOW_ROOT_ROUTE = 'VELOCE_FLOW_ROOT_ROUTE';
 
@@ -93,21 +75,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-const FLOW_CUSTOMIZATION = new InjectionToken('FLOW_CUSTOMIZATION');
-
 class DocGenComponent {
-    constructor(quoteDraftService, contextService, templatesApi, toastService, customizationService) {
-        this.quoteDraftService = quoteDraftService;
-        this.contextService = contextService;
+    constructor(templatesApi, contextService, flowStateService, flowInfo, toastService, customizationService) {
         this.templatesApi = templatesApi;
+        this.contextService = contextService;
+        this.flowStateService = flowStateService;
+        this.flowInfo = flowInfo;
         this.toastService = toastService;
         this.customizationService = customizationService;
         this.uiDefinition$ = new BehaviorSubject(null);
         this.templateApiName = '';
         this.destroy$ = new Subject();
-        // initialize when quote draft requested
-        this.quoteDraftService.quoteDraft$
-            .pipe(first(), tap(() => this.initialize()), takeUntil(this.destroy$))
+        // wait until flow is initialized
+        this.flowStateService
+            .isInitialized$()
+            .pipe(filter(Boolean), first(), tap(() => this.initialize()), takeUntil(this.destroy$))
             .subscribe();
     }
     ngOnDestroy() {
@@ -115,7 +97,7 @@ class DocGenComponent {
         this.destroy$.complete();
     }
     initialize() {
-        this.templateApiName = this.contextService.resolve().properties.docGenTemplateApiName ?? '';
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.docGen ?? '';
         this.generateUIDefinition$()
             .pipe(tap(uiDef => {
             if (!uiDef) {
@@ -129,78 +111,78 @@ class DocGenComponent {
         }), takeUntil(this.destroy$))
             .subscribe();
     }
-    getTemplateRootComponent$(template) {
-        return this.templatesApi
-            .fetchComponents$(template.id)
-            .pipe(map(components => components.find(c => c.type === UITemplateComponentType.ROOT) ?? undefined));
-    }
-    getLocalTemplateComponentMeta$() {
-        if (!this.customizationService?.getTemplateComponent) {
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
             return of(undefined);
         }
-        return this.customizationService?.getTemplateComponent(this.templateApiName).pipe(map(component => {
-            if (!component) {
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
                 return;
             }
-            return {
+            return components.map(component => ({
                 html: component.html,
                 css: component.css,
                 js: component.js,
                 json: component.json,
-            };
+            }));
         }));
     }
-    getDocGenComponentMeta$() {
-        return this.templatesApi.fetchTemplates$().pipe(map(templates => {
-            const template = templates.find(template => template.type === UITemplateType.DOCGEN && template.name === this.templateApiName);
-            return template ?? templates[0];
-        }), switchMap(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.DOCGEN;
+        if (!template) {
+            return of(undefined);
+        }
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
             if (!this.templateApiName) {
-                throw new Error("Flow Query parameter 'docGenTemplateApiName' is missing.");
+                throw new Error("Flow 'docGen' template is not defined.");
             }
-        }), switchMap(() => this.getLocalTemplateComponentMeta$()), switchMap(meta => (meta ? of(meta) : this.getDocGenComponentMeta$())), map(meta => {
-            if (!meta) {
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
                 return;
             }
             const headerId = this.contextService.resolve().properties.Id ?? null;
-            let script = meta.js;
-            if (script) {
-                const metadata = extractElementMetadata(script);
-                script = extendElementMetadata(script, {
+            const patchedMetaList = metaList.map(component => {
+                if (!component.js) {
+                    return component;
+                }
+                const metadata = extractElementMetadata(component.js);
+                const script = extendElementMetadata(component.js, {
                     inputs: {
                         ...metadata.inputs,
                         Id: headerId ? `"${headerId}"` : null,
                     },
                 });
-            }
+                return {
+                    ...component,
+                    js: script,
+                };
+            });
             const uiDef = {
                 name: '',
                 createdTimestamp: 0,
                 primary: true,
                 type: 'DEFAULT',
                 version: 2,
-                children: [
-                    {
-                        children: [],
-                        template: meta.html && btoa(meta.html),
-                        script: script && btoa(script),
-                        styles: meta.css && btoa(meta.css),
-                    },
-                ],
+                children: patchedMetaList.map(child => ({
+                    children: [],
+                    template: child.html && btoaSafe(child.html),
+                    script: child.js && btoaSafe(child.js),
+                    styles: child.css && btoaSafe(child.css),
+                })),
             };
             return uiDef;
         }));
     }
 }
-DocGenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DocGenComponent, deps: [{ token: i1$1.QuoteDraftService }, { token: i1$1.ContextService }, { token: i2.UITemplatesApiService }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DocGenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DocGenComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i2.ContextService }, { token: i2.FlowStateService }, { token: i2.FlowInfoService }, { token: i2$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DocGenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DocGenComponent, selector: "vl-flow-doc-gen", ngImport: i0, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DocGenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-doc-gen', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.QuoteDraftService }, { type: i1$1.ContextService }, { type: i2.UITemplatesApiService }, { type: i3$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i2.ContextService }, { type: i2.FlowStateService }, { type: i2.FlowInfoService }, { type: i2$1.ToastService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -222,18 +204,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class GuidedSellingComponent {
-    constructor(quoteDraftService, contextService, templatesApi, toastService, customizationService) {
-        this.quoteDraftService = quoteDraftService;
-        this.contextService = contextService;
+    constructor(templatesApi, flowStateService, flowInfo, toastService, customizationService) {
         this.templatesApi = templatesApi;
+        this.flowStateService = flowStateService;
+        this.flowInfo = flowInfo;
         this.toastService = toastService;
         this.customizationService = customizationService;
         this.uiDefinition$ = new BehaviorSubject(null);
         this.templateApiName = '';
         this.destroy$ = new Subject();
-        // initialize when quote draft requested
-        this.quoteDraftService.quoteDraft$
-            .pipe(first(), tap(() => this.initialize()), takeUntil(this.destroy$))
+        // wait until flow is initialized
+        this.flowStateService
+            .isInitialized$()
+            .pipe(filter(Boolean), first(), tap(() => this.initialize()), takeUntil(this.destroy$))
             .subscribe();
     }
     ngOnDestroy() {
@@ -241,7 +224,7 @@ class GuidedSellingComponent {
         this.destroy$.complete();
     }
     initialize() {
-        this.templateApiName = this.contextService.resolve().properties.guidedSellingTemplateApiName ?? '';
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.guidedSelling ?? '';
         this.generateUIDefinition$()
             .pipe(tap(uiDef => {
             if (!uiDef) {
@@ -255,40 +238,36 @@ class GuidedSellingComponent {
         }), takeUntil(this.destroy$))
             .subscribe();
     }
-    getTemplateRootComponent$(template) {
-        return this.templatesApi
-            .fetchComponents$(template.id)
-            .pipe(map(components => components.find(c => c.type === UITemplateComponentType.ROOT) ?? undefined));
-    }
-    getLocalTemplateComponentMeta$() {
-        if (!this.customizationService?.getTemplateComponent) {
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
             return of(undefined);
         }
-        return this.customizationService?.getTemplateComponent(this.templateApiName).pipe(map(component => {
-            if (!component) {
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
                 return;
             }
-            return {
+            return components.map(component => ({
                 html: component.html,
                 css: component.css,
                 js: component.js,
                 json: component.json,
-            };
+            }));
         }));
     }
-    getGuidedSellingComponentMeta$() {
-        return this.templatesApi.fetchTemplates$().pipe(map(templates => {
-            const template = templates.find(template => template.type === UITemplateType.GUIDED_SELLING && template.name === this.templateApiName);
-            return template ?? templates[0];
-        }), switchMap(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.GUIDED_SELLING;
+        if (!template) {
+            return of(undefined);
+        }
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
             if (!this.templateApiName) {
-                throw new Error("Flow Query parameter 'guidedSellingTemplateApiName' is missing.");
+                throw new Error("Flow 'guidedSelling' template is not defined.");
             }
-        }), switchMap(() => this.getLocalTemplateComponentMeta$()), switchMap(meta => (meta ? of(meta) : this.getGuidedSellingComponentMeta$())), map(meta => {
-            if (!meta) {
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
                 return;
             }
             const uiDef = {
@@ -297,25 +276,23 @@ class GuidedSellingComponent {
                 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),
-                    },
-                ],
+                children: metaList.map(meta => ({
+                    children: [],
+                    template: meta.html && btoaSafe(meta.html),
+                    script: meta.js && btoaSafe(meta.js),
+                    styles: meta.css && btoaSafe(meta.css),
+                })),
             };
             return uiDef;
         }));
     }
 }
-GuidedSellingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuidedSellingComponent, deps: [{ token: i1$1.QuoteDraftService }, { token: i1$1.ContextService }, { token: i2.UITemplatesApiService }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GuidedSellingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuidedSellingComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i2.FlowStateService }, { token: i2.FlowInfoService }, { token: i2$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 GuidedSellingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GuidedSellingComponent, selector: "vl-flow-guided-selling", ngImport: i0, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GuidedSellingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-guided-selling', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.QuoteDraftService }, { type: i1$1.ContextService }, { type: i2.UITemplatesApiService }, { type: i3$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i2.FlowStateService }, { type: i2.FlowInfoService }, { type: i2$1.ToastService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -336,288 +313,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class FlowRouterService {
-    constructor(router, route, contextService, integrationState) {
-        this.router = router;
-        this.route = route;
-        this.contextService = contextService;
-        this.integrationState = integrationState;
-        this.urlHistory = [];
-        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.getFlowSubpath$ = () => {
-            return this.route$.pipe(map(route => {
-                const url = route.url.join('/');
-                const flowRootUrl = this.getFlowRootPath(route);
-                return url.replace(flowRootUrl, '');
-            }));
-        };
-        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 ||
-            e instanceof NavigationError), map(e => e instanceof NavigationStart), startWith(false), distinctUntilChanged());
-        this.routeChange$.subscribe(() => {
-            this.urlHistory.push(this.router.url);
-            // Close Guided Selling when user navigates to another flow page
-            this.integrationState.dispatch(FlowAction.CloseGuidedSelling({ keepState: true }));
-        });
-    }
-    getFlowRootRoute(route) {
-        const path = [...route.pathFromRoot];
-        while (path.length) {
-            const parent = path.pop();
-            if (!parent) {
-                break;
-            }
-            if (parent.routeConfig?.id === VELOCE_FLOW_ROOT_ROUTE) {
-                return parent;
-            }
-        }
-        return;
-    }
-    getFlowRootPath(route) {
-        const rootRoute = this.getFlowRootRoute(route);
-        if (!rootRoute) {
-            return '';
-        }
-        const path = rootRoute.pathFromRoot
-            .map(r => r.routeConfig?.path)
-            .filter(Boolean)
-            .join('/');
-        return '/' + path;
-    }
-    get route$() {
-        return this.lastChildRoute$;
-    }
-    get params$() {
-        return this.lastChildParams$;
-    }
-    isConfigurationRoute$() {
-        return this.getFlowSubpath$().pipe(map(url => url.startsWith('product')));
-    }
-    isCartRoute$() {
-        return this.getFlowSubpath$().pipe(map(url => url.startsWith('cart')));
+class FlowHeaderComponent {
+    constructor(templatesApi, flowStateService, flowInfo, toastService, customizationService) {
+        this.templatesApi = templatesApi;
+        this.flowStateService = flowStateService;
+        this.flowInfo = flowInfo;
+        this.toastService = toastService;
+        this.customizationService = customizationService;
+        this.uiDefinition$ = new BehaviorSubject(null);
+        this.templateApiName = '';
+        this.destroy$ = new Subject();
+        // wait until flow is initialized
+        this.flowStateService
+            .isInitialized$()
+            .pipe(filter(Boolean), first(), tap(() => this.initialize()), takeUntil(this.destroy$))
+            .subscribe();
     }
-    isCatalogRoute$() {
-        return this.getFlowSubpath$().pipe(map(url => url.startsWith('catalog')));
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    isAssetsRoute$() {
-        return this.getFlowSubpath$().pipe(map(url => url.startsWith('assets')));
+    initialize() {
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.flowHeader ?? '';
+        this.generateUIDefinition$()
+            .pipe(tap(uiDef => {
+            if (!uiDef) {
+                throw new Error(`Component with name '${this.templateApiName}' not found.`);
+            }
+            this.uiDefinition$.next(uiDef);
+        }), catchError(err => {
+            const message = 'Failed to resolve Flow Header component. ' + (err.message ?? '');
+            this.toastService.add({ severity: ToastType.error, summary: message, sticky: true });
+            return of();
+        }), takeUntil(this.destroy$))
+            .subscribe();
     }
-    navigateBack() {
-        const prevUrl = this.urlHistory[this.urlHistory.length - 2];
-        if (prevUrl) {
-            this.router.navigateByUrl(prevUrl);
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
+            return of(undefined);
         }
-    }
-    navigateToProductConfiguration(productId, lineItemId) {
-        this.contextService.update({ properties: { productId, lineItemId } });
-        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
-        this.router.navigate([flowRouteUrl, 'product'], {
-            queryParams: { ...routeSnapshot.queryParams, productId },
-        });
-    }
-    navigateToShoppingCart() {
-        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
-        this.router.navigate([flowRouteUrl, 'cart'], { queryParams: routeSnapshot.queryParams });
-    }
-    navigateToCatalog() {
-        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
-        this.router.navigate([flowRouteUrl, 'catalog'], { queryParams: routeSnapshot.queryParams });
-    }
-    navigateToAssets() {
-        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
-        this.router.navigate([flowRouteUrl, 'assets'], { queryParams: routeSnapshot.queryParams });
-    }
-    switchObject(id) {
-        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
-        const route = this.getLastChildRoute(this.route);
-        const objName = SalesforceIdUtils.getSfObjectNameById(id);
-        const queryParams = {
-            quoteId: objName === 'Quote' ? id : undefined,
-            accountId: objName === 'Account' ? id : undefined,
-            orderId: objName === 'Order' ? id : undefined,
-        };
-        this.router.navigate([], { relativeTo: route, queryParams: { ...routeSnapshot.queryParams, ...queryParams } });
-    }
-}
-FlowRouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i1$1.ContextService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
-FlowRouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i1$1.ContextService }, { type: i5.IntegrationState }]; } });
-
-class CartPreviewComponent {
-    constructor(flowConfiguration, routerService, productImagesService, quoteDraftService) {
-        this.flowConfiguration = flowConfiguration;
-        this.routerService = routerService;
-        this.productImagesService = productImagesService;
-        this.quoteDraftService = quoteDraftService;
-        this.productRowHeight = 65;
-        this.form = new FormGroup({});
-        this.hasTermInProducts = false;
-        this.scrollHeight = 0;
-        this.shouldUpdate$ = new BehaviorSubject(true);
-        this.destroyed$ = new Subject();
-        this.lockedProductId$ = combineLatest([this.routerService.route$, this.routerService.isConfigurationRoute$()]).pipe(map(([route, isConfigurationRoute]) => {
-            if (!isConfigurationRoute) {
-                return null;
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
+                return;
             }
-            return route.queryParams['productId'];
+            return components.map(component => ({
+                html: component.html,
+                css: component.css,
+                js: component.js,
+                json: component.json,
+            }));
         }));
-        this.isEditMode$ = this.quoteDraftService.isEditMode$();
-    }
-    ngOnChanges(changes) {
-        const { products } = changes;
-        if (products) {
-            this.shouldUpdate$.next(true);
-            this.scrollHeight = Math.min(this.products.length * this.productRowHeight, 460);
-        }
-    }
-    ngAfterViewInit() {
-        combineLatest([this.lockedProductId$, this.isEditMode$, this.shouldUpdate$, this.overlayPanel.onShow])
-            .pipe(filter(() => this.overlayPanel.overlayVisible), takeUntil(this.destroyed$))
-            .subscribe(([lockedProductId, isEditMode]) => this.updateControls(this.products, isEditMode, lockedProductId));
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
     }
-    getImageUrl(productId) {
-        return this.productImagesService.getImageUrl$(productId);
-    }
-    navigateToProductConfiguration(productId, lineItemId) {
-        this.overlayPanel.hide();
-        this.routerService.navigateToProductConfiguration(productId, lineItemId);
-    }
-    controlBlurHandler(product) {
-        const control = this.form.get(product.id);
-        if (!control || control.invalid) {
-            return;
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.FLOW_HEADER;
+        if (!template) {
+            return of(undefined);
         }
-        this.flowConfiguration.update([
-            {
-                dataType: 'LINEITEM',
-                attributeType: 'QTY',
-                id: product.id,
-                newValue: control.value,
-            },
-        ]);
-    }
-    deleteHandler(product) {
-        this.flowConfiguration.delete([product.id]);
-    }
-    deleteAllHandler() {
-        const productIds = this.products.map(product => product.id);
-        this.flowConfiguration.delete(productIds);
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
-    updateControls(products, isEditMode, lockedProductId) {
-        const ids = [];
-        products.forEach(item => {
-            if (!item.id) {
-                return;
-            }
-            ids.push(item.id);
-            let control = this.form.get(item.id);
-            if (!control) {
-                control = new FormControl(item.qty, []);
-                this.form.addControl(item.id, control);
-            }
-            else {
-                control.setValue(item.qty);
-            }
-            if (!isEditMode || item.deleted || item.productId === lockedProductId) {
-                control.disable();
+    generateUIDefinition$() {
+        return of(undefined).pipe(tap(() => {
+            if (!this.templateApiName) {
+                throw new Error("Flow 'flowHeader' template is not defined.");
             }
-            else {
-                control.enable();
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
+                return;
             }
-        });
-        const removedIds = Object.keys(this.form.controls).filter(id => !ids.includes(id));
-        removedIds.forEach(id => this.form.removeControl(id));
-        this.hasTermInProducts = products.some((item) => item.hasTerm);
+            const uiDef = {
+                name: '',
+                createdTimestamp: 0,
+                primary: true,
+                type: 'DEFAULT',
+                version: 2,
+                children: metaList.map(meta => ({
+                    children: [],
+                    template: meta.html && btoaSafe(meta.html),
+                    script: meta.js && btoaSafe(meta.js),
+                    styles: meta.css && btoaSafe(meta.css),
+                })),
+            };
+            return uiDef;
+        }));
     }
 }
-CartPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewComponent, deps: [{ token: i1$1.FlowConfigurationService }, { token: FlowRouterService }, { token: i1$1.ProductImagesService }, { token: i1$1.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
-CartPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-overlayPanel\n  styleClass=\"catalog-overlay flow-header-overlay center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"lockedProductId$ | async as lockedProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-cross close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"item\" let-product>\n              <div\n                class=\"product item\"\n                *vlLet=\"!isEditMode || product.deleted as isReadonlyProduct\"\n                [class.readonly]=\"isReadonlyProduct\"\n                [class.deleted]=\"product.deleted\"\n              >\n                <ng-container *vlLet=\"lockedProductId === product.productId as isLockedProduct\">\n                  <div class=\"product__info\">\n                    <div class=\"product__image-wrapper\">\n                      <div\n                        *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n                        class=\"product__image\"\n                        [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n                      ></div>\n                    </div>\n                    <div class=\"flex flex-column justify-content-center\">\n                      <div class=\"word-break product-name\" [class.line-through]=\"product.deleted\">\n                        {{ product.name }}\n                      </div>\n                      <div class=\"actions\" *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm\"\n                          (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                        ></p-button>\n                        <p-button\n                          label=\"Delete\"\n                          [disabled]=\"isLockedProduct || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-button-secondary\"\n                          (onClick)=\"deleteHandler(product)\"\n                        ></p-button>\n                      </div>\n                    </div>\n                  </div>\n\n                  <ng-container *ngIf=\"form.get(product.id) as control\">\n                    <div class=\"qty\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <vl-quantity-control\n                        [formControl]=\"$any(control)\"\n                        (valueChange)=\"controlBlurHandler(product)\"\n                      ></vl-quantity-control>\n                    </div>\n                    <ng-template #readonlyQty\n                      ><span class=\"text-right\">{{ control.value }}</span></ng-template\n                    >\n                  </ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-virtualScroller>\n\n          <ng-template #noImage>\n            <i class=\"vl-icon vl-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex footer\">\n            <p-button\n              label=\"Clear Cart\"\n              styleClass=\"p-button-link p-button-sm pl-0 pr-0\"\n              [disabled]=\"!isEditMode || !!lockedProductId || hasTermInProducts\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-cross close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">\n          <i class=\"vl-icon vl-bag\"></i>\n          There are no products added to the Shopping Cart yet.\n        </span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: ["p-virtualscroller ::ng-deep .p-virtualscroller-header{background:none;padding:0;border:none;font-weight:unset}.flow-header-overlay *{font-family:var(--cg-font-family)}.flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.empty-state{background:var(--cg-bg-color);padding:16px;display:flex;gap:8px;justify-content:center;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.product{display:grid;grid-template-columns:auto 100px;padding:8px 0;border-bottom:1px solid var(--cg-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.item{height:65px;overflow:hidden}.product__info{display:flex;gap:16px}.product__image-wrapper{flex-shrink:0;height:48px;width:48px;display:flex;justify-content:center;align-items:center;background:var(--cg-bg-color-hover);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .product-name{margin-bottom:4px;font-size:14px;font-weight:500;line-height:20px}.product .actions{display:flex;gap:16px}.footer{padding-top:8px}.word-break{word-break:break-word}.no-image-icon{height:24px;width:24px}.qty{display:flex;align-items:center}.flow-header-overlay__wrapper ::ng-deep .p-button-link{padding:0;font-size:12px;font-weight:400;line-height:18px;letter-spacing:.3px;color:var(--cg-primary-color)}.flow-header-overlay__wrapper ::ng-deep .p-button-link:hover:enabled{color:var(--cg-text-color-secondary)}.flow-header-overlay__wrapper ::ng-deep .p-button-link:hover:enabled .p-button-label{text-decoration:none}.flow-header-overlay__wrapper ::ng-deep .p-button-link.p-button-secondary{color:var(--cg-text-color-secondary)}.flow-header-overlay__wrapper ::ng-deep .p-button-link.p-button-secondary:hover:enabled{color:var(--cg-primary-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$1.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "component", type: i9.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "rows", "minBufferPx", "maxBufferPx", "delay", "trackBy", "totalRecords", "first", "cache"], outputs: ["onLazyLoad"] }, { kind: "component", type: i3$1.QuantityControlComponent, selector: "vl-quantity-control", outputs: ["valueChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewComponent, decorators: [{
+FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i2.FlowStateService }, { token: i2.FlowInfoService }, { token: i2$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowHeaderComponent, selector: "vl-flow-new-header", ngImport: i0, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-cart-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-overlayPanel\n  styleClass=\"catalog-overlay flow-header-overlay center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"lockedProductId$ | async as lockedProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-cross close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"item\" let-product>\n              <div\n                class=\"product item\"\n                *vlLet=\"!isEditMode || product.deleted as isReadonlyProduct\"\n                [class.readonly]=\"isReadonlyProduct\"\n                [class.deleted]=\"product.deleted\"\n              >\n                <ng-container *vlLet=\"lockedProductId === product.productId as isLockedProduct\">\n                  <div class=\"product__info\">\n                    <div class=\"product__image-wrapper\">\n                      <div\n                        *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n                        class=\"product__image\"\n                        [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n                      ></div>\n                    </div>\n                    <div class=\"flex flex-column justify-content-center\">\n                      <div class=\"word-break product-name\" [class.line-through]=\"product.deleted\">\n                        {{ product.name }}\n                      </div>\n                      <div class=\"actions\" *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm\"\n                          (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                        ></p-button>\n                        <p-button\n                          label=\"Delete\"\n                          [disabled]=\"isLockedProduct || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-button-secondary\"\n                          (onClick)=\"deleteHandler(product)\"\n                        ></p-button>\n                      </div>\n                    </div>\n                  </div>\n\n                  <ng-container *ngIf=\"form.get(product.id) as control\">\n                    <div class=\"qty\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <vl-quantity-control\n                        [formControl]=\"$any(control)\"\n                        (valueChange)=\"controlBlurHandler(product)\"\n                      ></vl-quantity-control>\n                    </div>\n                    <ng-template #readonlyQty\n                      ><span class=\"text-right\">{{ control.value }}</span></ng-template\n                    >\n                  </ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-virtualScroller>\n\n          <ng-template #noImage>\n            <i class=\"vl-icon vl-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex footer\">\n            <p-button\n              label=\"Clear Cart\"\n              styleClass=\"p-button-link p-button-sm pl-0 pr-0\"\n              [disabled]=\"!isEditMode || !!lockedProductId || hasTermInProducts\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-cross close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">\n          <i class=\"vl-icon vl-bag\"></i>\n          There are no products added to the Shopping Cart yet.\n        </span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: ["p-virtualscroller ::ng-deep .p-virtualscroller-header{background:none;padding:0;border:none;font-weight:unset}.flow-header-overlay *{font-family:var(--cg-font-family)}.flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.empty-state{background:var(--cg-bg-color);padding:16px;display:flex;gap:8px;justify-content:center;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.product{display:grid;grid-template-columns:auto 100px;padding:8px 0;border-bottom:1px solid var(--cg-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.item{height:65px;overflow:hidden}.product__info{display:flex;gap:16px}.product__image-wrapper{flex-shrink:0;height:48px;width:48px;display:flex;justify-content:center;align-items:center;background:var(--cg-bg-color-hover);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .product-name{margin-bottom:4px;font-size:14px;font-weight:500;line-height:20px}.product .actions{display:flex;gap:16px}.footer{padding-top:8px}.word-break{word-break:break-word}.no-image-icon{height:24px;width:24px}.qty{display:flex;align-items:center}.flow-header-overlay__wrapper ::ng-deep .p-button-link{padding:0;font-size:12px;font-weight:400;line-height:18px;letter-spacing:.3px;color:var(--cg-primary-color)}.flow-header-overlay__wrapper ::ng-deep .p-button-link:hover:enabled{color:var(--cg-text-color-secondary)}.flow-header-overlay__wrapper ::ng-deep .p-button-link:hover:enabled .p-button-label{text-decoration:none}.flow-header-overlay__wrapper ::ng-deep .p-button-link.p-button-secondary{color:var(--cg-text-color-secondary)}.flow-header-overlay__wrapper ::ng-deep .p-button-link.p-button-secondary:hover:enabled{color:var(--cg-primary-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FlowConfigurationService }, { type: FlowRouterService }, { type: i1$1.ProductImagesService }, { type: i1$1.QuoteDraftService }]; }, propDecorators: { overlayPanel: [{
-                type: ViewChild,
-                args: [OverlayPanel]
-            }], products: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'vl-flow-new-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n  <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i2.FlowStateService }, { type: i2.FlowInfoService }, { type: i2$1.ToastService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FLOW_CUSTOMIZATION]
+                }] }]; } });
 
-class CartPreviewModule {
+class FlowNewHeaderModule {
 }
-CartPreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CartPreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewModule, declarations: [CartPreviewComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        ButtonModule,
-        OverlayPanelModule,
-        LetDirectiveModule,
-        InputNumberModule,
-        VirtualScrollerModule,
-        QuantityControlModule], exports: [CartPreviewComponent] });
-CartPreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        ButtonModule,
-        OverlayPanelModule,
-        LetDirectiveModule,
-        InputNumberModule,
-        VirtualScrollerModule,
-        QuantityControlModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CartPreviewModule, decorators: [{
+FlowNewHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowNewHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FlowNewHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FlowNewHeaderModule, declarations: [FlowHeaderComponent], imports: [CommonModule, PreviewModule], exports: [FlowHeaderComponent] });
+FlowNewHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowNewHeaderModule, imports: [CommonModule, PreviewModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowNewHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CartPreviewComponent],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        ButtonModule,
-                        OverlayPanelModule,
-                        LetDirectiveModule,
-                        InputNumberModule,
-                        VirtualScrollerModule,
-                        QuantityControlModule,
-                    ],
-                    exports: [CartPreviewComponent],
+                    declarations: [FlowHeaderComponent],
+                    imports: [CommonModule, PreviewModule],
+                    exports: [FlowHeaderComponent],
                 }]
         }] });
 
 class FlowDialogService {
-    constructor(dialogService, contextService) {
+    constructor(dialogService, contextService, runtimeSettings) {
         this.dialogService = dialogService;
         this.contextService = contextService;
+        this.runtimeSettings = runtimeSettings;
     }
     show(config) {
         return this.dialogService.open(FlowDialogComponent, {
@@ -639,7 +449,7 @@ class FlowDialogService {
     }
     showReadonlyModeDialog() {
         const ctx = this.contextService.resolve();
-        const objectName = ctx.mode ? ctx.mode[0].toUpperCase() + ctx.mode.substring(1).toLowerCase() : 'Object';
+        const objectName = ctx.mode ? ctx.mode[0]?.toUpperCase() + ctx.mode.substring(1).toLowerCase() : 'Object';
         return this.show({
             title: 'Error',
             description: `${objectName} Cannot be Saved`,
@@ -726,690 +536,235 @@ class FlowDialogService {
             secondaryButton: 'Cancel',
         });
     }
+    showTermsLimitReachedDialog() {
+        const shoppingCartSettings = mapShoppingCartSettings(this.runtimeSettings.getShoppingCartSettings() || []);
+        const maxRenewalTerms = getMaxRenewalTermsValue(shoppingCartSettings);
+        return this.show({
+            title: 'Terms Limit Reached',
+            description: `You have reached the term quantity limit: ${maxRenewalTerms}. You can increase the limit in the Shopping Cart Settings.`,
+            primaryButton: 'Ok',
+        });
+    }
+    showDialog(dialog) {
+        const dialogFunction = this[dialog].bind(this);
+        return dialogFunction(dialog);
+    }
 }
-FlowDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, deps: [{ token: i1.DialogService }, { token: i1$1.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, deps: [{ token: i1.DialogService }, { token: i2.ContextService }, { token: i2.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i1$1.ContextService }]; } });
-
-const METRICS_STORAGE_KEY = 'vl-metrics';
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.ContextService }, { type: i2.RuntimeSettingsService }]; } });
 
-class MetricsComponent {
-    constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService, runtimeSettings) {
+class FlowRouterService {
+    constructor(router, route, contextService, integrationState, flowInfoService, flowStateService) {
+        this.router = router;
+        this.route = route;
         this.contextService = contextService;
-        this.quoteDraftService = quoteDraftService;
-        this.cdr = cdr;
-        this.metricsCalculationService = metricsCalculationService;
-        this.flowConfiguration = flowConfiguration;
-        this.shoppingCartSettingsApiService = shoppingCartSettingsApiService;
-        this.runtimeSettings = runtimeSettings;
-        this.emptyStateMetrics = [
-            { name: 'MRR', value: 0 },
-            { name: 'E.MRR', value: 0 },
-            { name: 'NRR', value: 0 },
-            { name: 'E.NRR', value: 0 },
-        ];
-        this.visibleSelectedMetrics = [];
-        this.restSelectedMetrics = [];
-        this.metrics = [];
-        this.filteredMetrics = [];
-        this.sidebarVisible = false;
-        this.searchControl = new FormControl('');
-        this.isFocused = false;
-        this.nameControl = new FormControl('', [
-            requiredValidator,
-            invalidCharactersValidator(standardCharSetWithSpaceRegExp),
-            reservedIdentifierValidator,
-            Validators.maxLength(80),
-        ]);
-        this.activeMetricRules = [];
-        this.activeMetricRuleNames = [];
-        this.defaultMetricRuleNames = [];
-        this.metricKeys = [];
-        this.lastSavedMetrics = [];
-        this.destroyed$ = new Subject();
-        this.currencySymbol = this.runtimeSettings.getCurrencySettings().symbol;
-    }
-    ngOnInit() {
-        this.activeMetricRules = this.flowConfiguration.activeMetricsSnapshot.filter(metricRule => metricRule.metrics.some(metric => !!metric.totalName));
-        const activeMetricRuleNames = this.activeMetricRules.map(metricRule => metricRule.title);
-        this.shoppingCartSettingsApiService
-            .getSettingsMap()
-            .pipe(withLatestFrom(this.quoteDraftService.currentState$), tap$1(([settings, lineItems]) => {
-            this.defaultMetricRuleNames = (settings?.DEFAULT_HEADER_METRICS || []).filter(ruleName => activeMetricRuleNames.includes(ruleName));
-            this.metricKeys = this.collectMetricKeys(lineItems);
-            this.activeMetricRuleNames = this.getActiveMetricRuleNames();
-        }), takeUntil$1(this.destroyed$))
-            .subscribe(() => {
-            this.collectAvailableMetrics();
-        });
-        this.searchControl.valueChanges.pipe(takeUntil$1(this.destroyed$), startWith('')).subscribe(query => {
-            this.filteredMetrics = this.metrics.filter(({ name }) => {
-                return (name || '').toLowerCase().includes(query?.toLowerCase());
-            });
+        this.integrationState = integrationState;
+        this.flowInfoService = flowInfoService;
+        this.flowStateService = flowStateService;
+        this.urlHistory = [];
+        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.getFlowSubpath$ = () => {
+            return this.route$.pipe(map(route => {
+                const url = route.url.join('/');
+                const flowRootUrl = this.getFlowRootPath(route);
+                return url.replace(flowRootUrl, '');
+            }));
+        };
+        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 ||
+            e instanceof NavigationError), map(e => e instanceof NavigationStart), startWith(false), distinctUntilChanged());
+        this.routeChange$.subscribe(() => {
+            this.urlHistory.push(this.router.url);
+            // Close Guided Selling when user navigates to another flow page
+            this.integrationState.dispatch(FlowAction.CloseGuidedSelling({ keepState: true }));
         });
-        this.metricsCalculationService.onMetricsUpdate$
-            .pipe(takeUntil$1(this.destroyed$))
-            .subscribe(() => this.cdr.detectChanges());
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    toggleOverlay(event, overlay, target) {
-        event.stopPropagation();
-        if (this.restSelectedMetrics.length) {
-            if (!overlay.overlayVisible) {
-                document.dispatchEvent(new Event('click'));
+    getFlowRootRoute(route) {
+        const path = [...route.pathFromRoot];
+        while (path.length) {
+            const parent = path.pop();
+            if (!parent) {
+                break;
+            }
+            if (parent.routeConfig?.id === VELOCE_FLOW_ROOT_ROUTE) {
+                return parent;
             }
-            overlay.toggle(event, target);
-        }
-        else {
-            this.openSidebar();
-        }
-    }
-    openSidebar() {
-        this.overlayPanel.hide();
-        this.sidebarVisible = true;
-    }
-    closeSidebar() {
-        this.sidebarVisible = false;
-        this.metrics = cloneDeep(this.lastSavedMetrics);
-        this.editingMetric = undefined;
-        this.searchControl.setValue('');
-    }
-    getMetricValue(key) {
-        const context = this.contextService.resolve();
-        if (key.startsWith('Effective_')) {
-            const correctKey = key.replace('Effective_', '');
-            return this.toNumber(context.properties[correctKey]) - this.toNumber(context.properties[`Previous${correctKey}`]);
-        }
-        else {
-            return this.metricsCalculationService.getMetricValue(key);
-        }
-    }
-    save() {
-        localStorage.setItem(METRICS_STORAGE_KEY, JSON.stringify(this.metrics));
-        this.setMetrics();
-        this.lastSavedMetrics = cloneDeep(this.metrics);
-        this.closeSidebar();
-    }
-    changeMetricOrder(event) {
-        moveItemInArray(this.metrics, event.previousIndex, event.currentIndex);
-        this.filteredMetrics = this.metrics;
-    }
-    editMetric(metric) {
-        if (this.editingMetric && this.nameControl.invalid) {
-            return;
         }
-        this.editingMetric = metric;
-        this.nameControl.setValue(metric.name);
+        return;
     }
-    saveMetric() {
-        if (this.nameControl.invalid) {
-            return;
-        }
-        if (this.editingMetric) {
-            this.editingMetric.name = this.nameControl.value?.trim();
+    getFlowRootPath(route) {
+        const rootRoute = this.getFlowRootRoute(route);
+        if (!rootRoute) {
+            return '';
         }
-        this.editingMetric = undefined;
-    }
-    cancelMetric() {
-        this.editingMetric = undefined;
-    }
-    resetToDefault() {
-        this.collectAvailableMetrics(true);
-    }
-    onFocus() {
-        this.isFocused = true;
-    }
-    onBlur() {
-        this.isFocused = false;
-    }
-    clearSearch(event) {
-        event.stopPropagation();
-        this.searchControl.setValue('');
-    }
-    collectMetricKeys(lineItems) {
-        const keys = [];
-        lineItems.forEach(lineItem => {
-            keys.push(...Object.keys(lineItem.totalMetrics || {}));
-            keys.push(...this.collectMetricKeys(lineItem.lineItems));
-        });
-        return uniq(keys);
-    }
-    setMetrics() {
-        const metrics = cloneDeep(this.metrics.filter(({ visible }) => visible));
-        this.visibleSelectedMetrics = metrics.slice(0, 4);
-        this.restSelectedMetrics = metrics.slice(4);
-    }
-    collectAvailableMetrics(resetToDefault = false) {
-        const storedMetrics = JSON.parse(localStorage.getItem(METRICS_STORAGE_KEY) || '[]');
-        const metricKeys = this.metricKeys.slice();
-        const isDefaultConfiguration = !storedMetrics.length || resetToDefault;
-        this.metrics = (isDefaultConfiguration ? this.activeMetricRuleNames : storedMetrics).reduce((result, metric) => {
-            const metricKeyIndex = metricKeys.findIndex(key => key === metric.key);
-            if (metricKeyIndex >= 0) {
-                metricKeys.splice(metricKeyIndex, 1);
-            }
-            if (isDefaultConfiguration && this.defaultMetricRuleNames.includes(metric.name)) {
-                metric.visible = true;
-            }
-            return [...result, metric];
-        }, []);
-        this.metrics = [
-            ...this.metrics,
-            ...metricKeys.map(metricKey => {
-                return { key: metricKey, name: this.getMetricName(metricKey), visible: false };
-            }),
-        ];
-        // sort the metrics by the order of default metric rule names from the shopping cart settings
-        this.metrics = this.sortMetrics();
-        this.metrics = cloneDeep(this.metrics);
-        this.searchControl.setValue('');
-        if (!resetToDefault) {
-            this.lastSavedMetrics = cloneDeep(this.metrics);
-            this.setMetrics();
-        }
-        this.cdr.markForCheck();
-    }
-    getMetricName(key) {
-        return (this.activeMetricRules.find(metricRule => metricRule.metrics.find(metric => metric.totalName === key))?.title ||
-            key);
-    }
-    toNumber(value) {
-        return +(value || 0);
-    }
-    getActiveMetricRuleNames() {
-        return this.activeMetricRules.reduce((result, metricRule) => {
-            const name = metricRule.title;
-            const visible = this.defaultMetricRuleNames.includes(name);
-            metricRule.metrics.forEach(metric => {
-                result.push({
-                    key: metric.totalName || metric.name,
-                    name,
-                    visible,
-                });
-            });
-            return result;
-        }, []);
-    }
-    /**
-     * Sorts the Metrics array by the order of the default metric rule names from the shopping cart settings.
-     * If a metric is included in the list of default metrics, it raises the metric to the top of the metrics array.
-     */
-    sortMetrics() {
-        return this.metrics.slice().sort((a, b) => {
-            const indexA = this.defaultMetricRuleNames.indexOf(a.name);
-            const indexB = this.defaultMetricRuleNames.indexOf(b.name);
-            if (indexA === -1 && indexB === -1) {
-                return 0;
-            }
-            if (indexA === -1) {
-                return 1;
-            }
-            if (indexB === -1) {
-                return -1;
-            }
-            return indexA - indexB;
-        });
-    }
-}
-MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1$1.MetricsCalculationService }, { token: i1$1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n  <div class=\"metrics\">\n    <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n      <span\n        class=\"name\"\n        [vlHiddenTextTooltip]=\"metric.name\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ metric.name }}\n      </span>\n      <span class=\"filler\"></span>\n      <span\n        class=\"value\"\n        vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ getMetricValue(metric.key) | vlPrice }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n      <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.value | vlPrice }}\n        </span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n    <i class=\"vl-icon vl-arrow-down\"></i>\n  </div>\n</div>\n\n<p-overlayPanel\n  styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"overlay-metrics\">\n      <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ getMetricValue(metric.key) | vlPrice }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-arrow-right\"></i>\n    </button>\n  </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n  [visible]=\"sidebarVisible\"\n  (visibleChange)=\"closeSidebar()\"\n  position=\"right\"\n  [baseZIndex]=\"1000\"\n  [style]=\"{ width: '300px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n      <i class=\"vl-icon vl-search\"></i>\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full search-input\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n      <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n    </label>\n\n    <div class=\"content\">\n      <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n        <div\n          *ngFor=\"let metric of filteredMetrics\"\n          class=\"sidebar-metric\"\n          [class.edit]=\"metric.key === editingMetric?.key\"\n          cdkDrag\n          [cdkDragDisabled]=\"!!searchControl.value\"\n        >\n          <div class=\"drag-icon\">\n            <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"metricTemplate\"\n            [ngTemplateOutletContext]=\"{ metric: metric }\"\n          ></ng-container>\n        </div>\n      </div>\n\n      <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n    </div>\n    <div class=\"footer\">\n      <p-button\n        label=\"Reset to Default\"\n        styleClass=\"p-button-outlined p-button-sm\"\n        (onClick)=\"resetToDefault()\"\n      ></p-button>\n      <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n    </div>\n  </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n  <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n    <p-checkbox\n      [ngModel]=\"metric.visible\"\n      (ngModelChange)=\"metric.visible = !metric.visible\"\n      [binary]=\"true\"\n      checkboxIcon=\"vl-icon vl-check\"\n    ></p-checkbox>\n    <div class=\"title\">{{ metric.name }}</div>\n  </div>\n\n  <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n    <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n    <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n  </div>\n  <div class=\"actions\">\n    <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n      <i class=\"vl-icon vl-edit\"></i>\n    </div>\n    <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n      <i class=\"vl-icon vl-cross\"></i>\n    </div>\n    <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n      <i class=\"vl-icon vl-check\"></i>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{max-width:300px;min-width:152px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--vl-text-color-accent)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$1.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$1.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$1.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n  <div class=\"metrics\">\n    <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n      <span\n        class=\"name\"\n        [vlHiddenTextTooltip]=\"metric.name\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ metric.name }}\n      </span>\n      <span class=\"filler\"></span>\n      <span\n        class=\"value\"\n        vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ getMetricValue(metric.key) | vlPrice }}\n      </span>\n    </div>\n\n    <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n      <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.value | vlPrice }}\n        </span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n    <i class=\"vl-icon vl-arrow-down\"></i>\n  </div>\n</div>\n\n<p-overlayPanel\n  styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"overlay-metrics\">\n      <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ getMetricValue(metric.key) | vlPrice }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-arrow-right\"></i>\n    </button>\n  </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n  [visible]=\"sidebarVisible\"\n  (visibleChange)=\"closeSidebar()\"\n  position=\"right\"\n  [baseZIndex]=\"1000\"\n  [style]=\"{ width: '300px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n      <i class=\"vl-icon vl-search\"></i>\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full search-input\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n      <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n    </label>\n\n    <div class=\"content\">\n      <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n        <div\n          *ngFor=\"let metric of filteredMetrics\"\n          class=\"sidebar-metric\"\n          [class.edit]=\"metric.key === editingMetric?.key\"\n          cdkDrag\n          [cdkDragDisabled]=\"!!searchControl.value\"\n        >\n          <div class=\"drag-icon\">\n            <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"metricTemplate\"\n            [ngTemplateOutletContext]=\"{ metric: metric }\"\n          ></ng-container>\n        </div>\n      </div>\n\n      <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n    </div>\n    <div class=\"footer\">\n      <p-button\n        label=\"Reset to Default\"\n        styleClass=\"p-button-outlined p-button-sm\"\n        (onClick)=\"resetToDefault()\"\n      ></p-button>\n      <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n    </div>\n  </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n  <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n    <p-checkbox\n      [ngModel]=\"metric.visible\"\n      (ngModelChange)=\"metric.visible = !metric.visible\"\n      [binary]=\"true\"\n      checkboxIcon=\"vl-icon vl-check\"\n    ></p-checkbox>\n    <div class=\"title\">{{ metric.name }}</div>\n  </div>\n\n  <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n    <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n    <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n  </div>\n  <div class=\"actions\">\n    <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n      <i class=\"vl-icon vl-edit\"></i>\n    </div>\n    <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n      <i class=\"vl-icon vl-cross\"></i>\n    </div>\n    <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n      <i class=\"vl-icon vl-check\"></i>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{max-width:300px;min-width:152px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--vl-text-color-accent)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i0.ChangeDetectorRef }, { type: i1$1.MetricsCalculationService }, { type: i1$1.FlowConfigurationService }, { type: i2.ShoppingCartSettingsApiService }, { type: i1$1.RuntimeSettingsService }]; }, propDecorators: { overlayPanel: [{
-                type: ViewChild,
-                args: [OverlayPanel]
-            }] } });
-
-class FlowHeaderComponent {
-    constructor(contextService, quoteDraftService, quoteApiService, sfApiService, flowConfiguration, routerService, dialogService, integrationState) {
-        this.contextService = contextService;
-        this.quoteDraftService = quoteDraftService;
-        this.quoteApiService = quoteApiService;
-        this.sfApiService = sfApiService;
-        this.flowConfiguration = flowConfiguration;
-        this.routerService = routerService;
-        this.dialogService = dialogService;
-        this.integrationState = integrationState;
-        this.isSaveInProgress$ = new BehaviorSubject(false);
-        this.isSubmitInProgress$ = new BehaviorSubject(false);
-        this.dateFormat = 'MM.dd.yyyy';
-        this.assetPriceLists$ = new BehaviorSubject([]);
-        this.mode$ = new BehaviorSubject(ConfigurationContextMode.TEST);
-        this.destroyed$ = new Subject();
-        this.contextProperties$ = this.contextService.resolve$().pipe(map(ctx => ctx.properties));
-        this.objectName$ = this.mode$.pipe(map(mode => mode?.toLocaleLowerCase() ?? ''));
-        this.activePriceList$ = this.quoteDraftService.activePriceList$;
-        this.isReadonlyMode$ = this.quoteDraftService.hasProducts$.pipe(map(() => this.isReadonlyMode()));
-        this.status$ = this.contextService.resolve$().pipe(map(context => context.properties.Status ?? ''));
-        this.isEditMode$ = this.quoteDraftService.isEditMode$();
-        this.assetsCount$ = this.getAssets$().pipe(map(lineItems => lineItems.length));
-        this.products$ = this.getDraftItems$().pipe(map(lineItems => this.generateProducts(lineItems)));
-        this.isConfigurationRoute$ = this.routerService.isConfigurationRoute$();
-        this.isCartRoute$ = this.routerService.isCartRoute$();
-        this.isCatalogRoute$ = this.routerService.isCatalogRoute$();
-        this.isAssetsRoute$ = this.routerService.isAssetsRoute$();
-        this.objectDetails$ = this.getObjectDetails$();
+        const path = rootRoute.pathFromRoot
+            .map(r => r.url[0])
+            .filter(Boolean)
+            .join('/');
+        return '/' + path;
     }
-    ngOnInit() {
-        this.contextService
-            .resolve$()
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe(ctx => this.mode$.next(ctx.mode));
-        // update assetPriceLists on quoteDraft change in ACCOUNT mode
-        this.quoteDraftService.quoteDraft$
-            .pipe(takeUntil(this.destroyed$), filter(() => this.isAccountMode))
-            .subscribe(() => this.assetPriceLists$.next(this.quoteDraftService.assetPriceLists));
+    get route$() {
+        return this.lastChildRoute$;
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
+    get params$() {
+        return this.lastChildParams$;
     }
-    get isAccountMode() {
-        return this.mode$.value === ConfigurationContextMode.ACCOUNT;
+    get params() {
+        return this.getLastChildParams(this.route.snapshot);
     }
-    get isQuoteMode() {
-        return this.mode$.value === ConfigurationContextMode.QUOTE;
+    isConfigurationRoute$() {
+        return this.getFlowSubpath$().pipe(map(url => url.startsWith('product')));
     }
-    get isAccountMode$() {
-        return this.mode$.pipe(map(mode => mode === ConfigurationContextMode.ACCOUNT));
+    isCartRoute$() {
+        return this.getFlowSubpath$().pipe(map(url => url.startsWith('cart')));
     }
-    get isQuoteMode$() {
-        return this.mode$.pipe(map(mode => mode === ConfigurationContextMode.QUOTE));
+    isCatalogRoute$() {
+        return this.getFlowSubpath$().pipe(map(url => url.startsWith('catalog')));
     }
-    getSplitButtonActions(isCartRoute) {
-        return [
-            {
-                label: 'Save to Quote',
-                command: () => {
-                    this.saveButtonClickHandler(isCartRoute);
-                },
-            },
-            {
-                label: 'Quick Save',
-                command: () => {
-                    this.saveButtonClickHandler(isCartRoute, true);
-                },
-            },
-            {
-                label: 'Generate Document',
-                command: () => {
-                    this.docGenButtonClickHandler(isCartRoute);
-                },
-            },
-            {
-                label: 'Submit For Approval',
-                command: () => {
-                    this.submitButtonClickHandler(isCartRoute);
-                },
-            },
-        ];
+    isAssetsRoute$() {
+        return this.getFlowSubpath$().pipe(map(url => url.startsWith('assets')));
     }
-    back(objectId) {
-        const targetId = objectId ?? this.contextService.resolve().properties.Id;
-        if (targetId) {
-            window.VELO_BACK_FN.apply(null, [targetId]);
+    navigateBack() {
+        const prevUrl = this.urlHistory[this.urlHistory.length - 2];
+        if (prevUrl) {
+            this.router.navigateByUrl(prevUrl);
         }
     }
-    getSalesforceObjectLink(objectId) {
-        if (!objectId) {
-            return '';
+    navigateTo(path, productId, lineItemId) {
+        if (path === 'shopping-cart') {
+            this.navigateToShoppingCart();
         }
-        return `${window.location.origin}/${objectId}`;
-    }
-    navigateToShoppingCart() {
-        if (!this.isReadonlyMode()) {
-            this.routerService.navigateToShoppingCart();
+        else if (path === 'catalog') {
+            this.navigateToCatalog();
         }
-    }
-    navigateToCatalog() {
-        if (!this.isReadonlyMode()) {
-            this.routerService.navigateToCatalog();
+        else if (path === 'assets') {
+            this.navigateToAssets();
         }
-    }
-    navigateToAssets() {
-        if (!this.isReadonlyMode()) {
-            this.routerService.navigateToAssets();
+        else if (path === 'product' && productId) {
+            this.navigateToProductConfiguration(productId, lineItemId);
         }
     }
-    docGenButtonClickHandler(isCartRoute) {
-        if (this.isAccountMode) {
-            if (!this.quoteDraftService.hasUnsavedChanges) {
-                this.dialogService.showAccountNoChangesDialog().subscribe();
-            }
-            else {
-                this.dialogService.showDocgenAccountUnsavedChangesDialog().subscribe();
-            }
-            return;
-        }
-        if (!this.quoteDraftService.isEditMode()) {
-            this.dialogService.showDocgenReadonlyDialog().subscribe();
-            return;
-        }
-        if (!isCartRoute) {
-            this.dialogService.showDocgenOutsideShoppingCartDialog().subscribe();
-            return;
-        }
-        let shouldOpen$ = of(true);
-        if (this.quoteDraftService.hasUnsavedChanges) {
-            shouldOpen$ = this.dialogService.showDocgenUnsavedChangesDialog().pipe(switchMap(confirmed => {
-                if (!confirmed) {
-                    return of(false);
-                }
-                return this.saveQuote$(true).pipe(map(() => true));
+    navigateToProductConfiguration(productId, lineItemId) {
+        let updateContext$;
+        if (this.flowInfoService.isLegacy) {
+            updateContext$ = of(undefined).pipe(tap(() => {
+                this.contextService.update({ properties: { productId, lineItemId: lineItemId ?? '' } });
             }));
         }
-        shouldOpen$
-            .pipe(first(), tap(shouldOpen => shouldOpen && this.integrationState.dispatch(FlowAction.OpenDocGenAction())))
-            .subscribe();
-    }
-    saveButtonClickHandler(isCartRoute, stayOnPage = false) {
-        if (!this.quoteDraftService.isEditMode()) {
-            if (this.isQuoteMode) {
-                this.dialogService.showQuoteReadonlyModeDialog().subscribe();
-            }
-            else {
-                this.dialogService.showReadonlyModeDialog().subscribe();
-            }
-            return;
-        }
-        if (this.isUpsellQuoteWithoutChanges()) {
-            this.dialogService.showAccountNoChangesDialog().subscribe();
-            return;
-        }
-        if (this.isAccountMode && !this.quoteDraftService.hasUnsavedChanges) {
-            this.dialogService.showAccountNoChangesDialog().subscribe();
-            return;
-        }
-        if (!isCartRoute) {
-            this.dialogService.showQuoteOutsideShoppingCartDialog().subscribe();
-            return;
-        }
-        const lineItems = this.flowConfiguration.getSnapshot();
-        if (!lineItems.length) {
-            this.dialogService.showEmptyCartDialog().subscribe();
-            return;
-        }
-        this.saveQuote$(stayOnPage).subscribe();
-    }
-    submitButtonClickHandler(isCartRoute) {
-        if (this.isQuoteMode && !this.quoteDraftService.isEditMode()) {
-            this.dialogService.showReadonlyQuoteSubmitFailureDialog();
-            return;
-        }
-        if (this.isUpsellQuoteWithoutChanges()) {
-            this.dialogService.showAccountNoChangesDialog().subscribe();
-            return;
-        }
-        if (this.isAccountMode) {
-            this.dialogService.showAccountSubmitFailureDialog();
-            return;
-        }
-        if (!isCartRoute) {
-            this.dialogService.showOutsideShoppingCartQuoteSubmitFailureDialog().subscribe();
-            return;
-        }
-        const quoteDraft = this.quoteDraftService.quoteDraft;
-        if (!quoteDraft) {
-            return;
+        else {
+            updateContext$ = this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'UPDATE_CONTEXT_PROPERTIES', {
+                productId,
+                lineItemId: lineItemId ?? '',
+            });
         }
-        this.isSubmitInProgress$.next(true);
-        this.quoteApiService
-            .submitQuote(quoteDraft)
-            .pipe(tap(({ quoteId }) => {
-            this.quoteDraftService.hasUnsavedChanges = false;
-            this.back(quoteId);
-        }), finalize(() => this.isSubmitInProgress$.next(false)), takeUntil(this.destroyed$))
+        updateContext$
+            .pipe(tap(() => {
+            const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+            const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+            this.router.navigate([flowRouteUrl, 'product'], {
+                queryParams: { ...routeSnapshot.queryParams, productId },
+            });
+        }))
             .subscribe();
     }
-    selectPriceList(priceListId) {
-        this.quoteDraftService.updateActivePriceList(priceListId);
-    }
-    toggleCartOverlay(cart, event) {
-        event.stopPropagation();
-        if (!this.isReadonlyMode()) {
-            if (!cart.overlayPanel.overlayVisible) {
-                document.dispatchEvent(new Event('click'));
-            }
-            cart?.overlayPanel.toggle(event);
-        }
-    }
-    saveQuote$(stayOnPage = false) {
-        const quoteDraft = this.quoteDraftService.quoteDraftForActivePriceList;
-        if (!quoteDraft) {
-            return of(undefined);
-        }
-        this.isSaveInProgress$.next(true);
-        return this.quoteApiService.upsertQuote(quoteDraft).pipe(tap(({ quoteId }) => {
-            this.quoteDraftService.hasUnsavedChanges = false;
-            if (!stayOnPage) {
-                this.back(quoteId);
-            }
-        }), finalize(() => this.isSaveInProgress$.next(false)), map(noop), takeUntil(this.destroyed$));
+    navigateToShoppingCart() {
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+        this.router.navigate([flowRouteUrl, 'cart'], { queryParams: routeSnapshot.queryParams });
     }
-    queryName$(objectName, id) {
-        if (!id) {
-            return of('');
-        }
-        const searchRequest = {
-            count: 1,
-            rawCondition: `Id = '${id}'`,
-            fields: ['Name'],
-        };
-        return this.sfApiService.query(searchRequest, objectName).pipe(map(result => result[0]?.Name ?? ''), takeUntil(this.destroyed$));
-    }
-    getObjectDetails$() {
-        return this.contextService.resolve$().pipe(distinctUntilChanged((prevCtx, currCtx) => prevCtx.properties.Id === currCtx.properties.Id), map(ctx => {
-            const isAccountMode = ctx.mode === ConfigurationContextMode.ACCOUNT;
-            const isQuoteMode = ctx.mode === ConfigurationContextMode.QUOTE;
-            return {
-                accountId: isAccountMode ? ctx.properties.Id : ctx.properties.AccountId,
-                opportunityId: ctx.properties.OpportunityId,
-                quoteId: isQuoteMode ? ctx.properties.Id : undefined,
-                quoteName: isQuoteMode ? ctx.properties.Name : undefined,
-                quoteNumber: isQuoteMode ? ctx.properties.QuoteNumber : undefined,
-            };
-        }), switchMap(details => combineLatest([
-            of(details),
-            this.queryName$('Account', details.accountId),
-            this.queryName$('Opportunity', details.opportunityId),
-        ])), map(([details, accountName, opportunityName]) => ({ ...details, accountName, opportunityName })));
-    }
-    formatMetric(value) {
-        return (value ? Number(value) : 0).toFixed(2);
-    }
-    getDraftItems$() {
-        return combineLatest([
-            this.flowConfiguration.get(),
-            this.integrationState.state$.pipe(map(state => state.modifiedAssets), distinctUntilChanged()),
-        ]).pipe(map(([lineItems, modifiedAssets]) => {
-            const currentTerms = lineItems.reduce((acc, li) => {
-                const assetId = li.assetId || li.openOrderLineItemId;
-                const isModified = isLineItemModified(li);
-                const currentTerm = getOriginParent(lineItems, li) ?? li;
-                if (isModified || (assetId && modifiedAssets?.[assetId])) {
-                    acc.push(currentTerm);
-                }
-                return acc;
-            }, []);
-            const uniqCurrentTerms = currentTerms.filter((value, index, array) => array.indexOf(value) === index);
-            return uniqCurrentTerms;
-        }));
+    navigateToCatalog() {
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+        this.router.navigate([flowRouteUrl, 'catalog'], { queryParams: routeSnapshot.queryParams });
     }
-    getAssets$() {
-        return this.flowConfiguration
-            .get()
-            .pipe(map(lineItems => lineItems.filter(li => (!!li.assetId || !!li.openOrderLineItemId) && !li.rampInstanceId)));
-    }
-    generateProducts(lineItems) {
-        const date = new Date();
-        date.setHours(0, 0, 0, 0);
-        const now = date.getTime();
-        const termParentIds = lineItems.map(li => li.rampInstanceId).filter(Boolean);
-        const lineItemsRampInstanceIdMap = lineItems.reduce((acc, li) => {
-            acc[li.rampInstanceId ?? ''] = li;
-            return acc;
-        }, {});
-        return lineItems.reduce((result, li) => {
-            // find main term line item
-            if (li.rampInstanceId) {
-                return result;
-            }
-            // find current term line item
-            let target = li;
-            while (target && target.endDate && new Date(target.endDate).getTime() <= now) {
-                target = lineItemsRampInstanceIdMap[li.id];
-            }
-            if (target && target.productId) {
-                result.push({
-                    id: target.id,
-                    productId: target.productId,
-                    name: target.name,
-                    configurable: target.properties['#configurable'] === 'true',
-                    deleted: target.actionCode === 'DELETE',
-                    hasTerm: termParentIds.includes(target.id),
-                    qty: target.qty,
-                    mrr: this.formatMetric(target.properties.VDM_Total_MRR),
-                    nrr: this.formatMetric(target.properties.VDM_Total_NRR),
-                });
-            }
-            return result;
-        }, []);
+    navigateToAssets() {
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+        this.router.navigate([flowRouteUrl, 'assets'], { queryParams: routeSnapshot.queryParams });
     }
-    isReadonlyMode() {
-        return (this.quoteDraftService.quoteDraft?.context.properties.mode === ConfigurationContextMode.ACCOUNT &&
-            !this.quoteDraftService.hasProducts);
+    showErrorPage$(message, details) {
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const flowRouteUrl = this.getFlowRootPath(routeSnapshot);
+        return from(this.router.navigate([flowRouteUrl, '404'], {
+            state: { message, type: 'error', ...(details && { details }) },
+            replaceUrl: true,
+        })).pipe(map(() => false));
     }
-    isUpsellQuoteWithoutChanges() {
-        const noUpdates = this.quoteDraftService.activeCurrentState.every(lineItem => lineItem.actionCode === 'EXIST');
-        const sameNumberOfProducts = this.quoteDraftService.getInitialCurrentState().length === this.quoteDraftService.activeCurrentState.length;
-        return noUpdates && sameNumberOfProducts;
+    switchObject(id) {
+        const routeSnapshot = this.getLastChildRouteSnapshot(this.route.snapshot);
+        const route = this.getLastChildRoute(this.route);
+        const objName = SalesforceIdUtils.getSfObjectNameById(id);
+        const queryParams = {
+            quoteId: objName === 'Quote' ? id : undefined,
+            accountId: objName === 'Account' ? id : undefined,
+            orderId: objName === 'Order' ? id : undefined,
+        };
+        this.router.navigate([], { relativeTo: route, queryParams: { ...routeSnapshot.queryParams, ...queryParams } });
     }
 }
-FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i2.QuoteApiService }, { token: i2.SalesforceApiService }, { token: i1$1.FlowConfigurationService }, { token: FlowRouterService }, { token: FlowDialogService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
-FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "<ng-container *ngIf=\"contextProperties$ | async as contextProperties\">\n  <ng-container *ngIf=\"objectDetails$ | async as details\">\n    <div class=\"flow-info\">\n      <nav class=\"nav-item nav-back\" (click)=\"back()\">\n        <i class=\"nav-icon vl-icon vl-icon-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\n          <a target=\"_blank\" [href]=\"getSalesforceObjectLink(contextProperties.Id)\">{{ contextProperties.Name }}</a>\n        </nav>\n      </ng-container>\n\n      <ng-container *ngIf=\"isQuoteMode$ | async\">\n        <span class=\"nav-item\">Quote #{{ details.quoteNumber }}</span>\n\n        <span class=\"dot-separator\"></span>\n\n        <nav class=\"nav-item\" (click)=\"quoteDetails.toggle($event)\">\n          <span>{{ status$ | async }}</span>\n\n          <i *ngIf=\"!quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </p-overlayPanel>\n      </ng-container>\n    </div>\n\n    <div class=\"flow-navigation\">\n      <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n        <nav\n          class=\"nav-item\"\n          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\n        </nav>\n        <nav\n          class=\"nav-item\"\n          [ngClass]=\"{ active: (isCatalogRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToCatalog()\"\n        >\n          Catalog\n        </nav>\n        <nav\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </nav>\n        <ng-container *vlLet=\"products$ | async as products\">\n          <nav\n            class=\"nav-item\"\n            [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n            (click)=\"navigateToShoppingCart()\"\n          >\n            Shopping Cart\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\n\n            <nav\n              class=\"nav-popover-toggle\"\n              [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n              (click)=\"toggleCartOverlay(cart, $event)\"\n            >\n              <i *ngIf=\"!cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\n          </nav>\n\n          <vl-cart-preview #cart [products]=\"products ?? []\"></vl-cart-preview>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"flow-controls\">\n      <ng-container *ngIf=\"(isReadonlyMode$ | async) === false\">\n        <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n          <div class=\"price-plan\">\n            <ng-container *vlLet=\"assetPriceLists$ | async as assetPriceLists\">\n              <ng-container\n                *ngIf=\"(isAccountMode$ | async) && assetPriceLists && assetPriceLists.length > 1; else singlePriceList\"\n              >\n                <nav class=\"nav-item\" (click)=\"priceListsOverlay?.toggle($event)\">\n                  <span>{{ priceList?.name }}</span>\n                  <i *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n                </nav>\n\n                <p-overlayPanel styleClass=\"price-list-overlay\" #priceListsOverlay>\n                  <ng-template pTemplate>\n                    <span\n                      *ngFor=\"let option of assetPriceLists\"\n                      class=\"price-list-option\"\n                      [class.active]=\"priceList?.id === option.id\"\n                      (click)=\"selectPriceList(option.id); priceListsOverlay.hide()\"\n                    >\n                      {{ option.name }}\n                    </span>\n                  </ng-template>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-template #singlePriceList>\n              <div>{{ priceList?.name }}</div>\n            </ng-template>\n\n            <div *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date : dateFormat }}</div>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <vl-metrics></vl-metrics>\n\n      <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n        <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\n              >\n              </p-splitButton>\n\n              <p-button\n                *ngIf=\"isSaveInProgress\"\n                class=\"save-button\"\n                styleClass=\"p-button\"\n                label=\"Saving\"\n                [loading]=\"true\"\n              ></p-button>\n\n              <p-button\n                *ngIf=\"isSubmitInProgress\"\n                class=\"submit-button\"\n                styleClass=\"p-button\"\n                label=\"Submitting\"\n                [loading]=\"true\"\n              ></p-button>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;width:100%;height:100%;background:rgba(255,255,255,.3);opacity:1;border:none}:host ::ng-deep .save-button .p-button .p-button-label,:host ::ng-deep .submit-button .p-button .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.vl-icon{display:inline-block}.flow-info{flex-shrink:0;display:flex;gap:8px;align-items:center}.flow-info .nav-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.flow-info .nav-item:not(.disabled):hover,.flow-info .nav-popover-toggle:not(.disabled):hover{opacity:.6}nav{display:flex;align-items:center;cursor:pointer;height:32px}nav.disabled{opacity:.6;cursor:default}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:16px;display:flex;justify-content:center}nav.nav-popover-toggle i{pointer-events:none;margin:0}nav i{pointer-events:none}.metrics__row{display:flex;justify-content:space-between;gap:2px}.dot-separator:after{content:\"\";display:block;width:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.price-list-option{padding:8px;color:var(--vl-primary-color);cursor:pointer}.price-list-option.active,.price-list-option:hover{background:var(--vl-secondary-nav-bg)}.flow-controls{flex-shrink:0;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$1.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "directive", type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: ["products"] }, { kind: "component", type: i13.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }, { kind: "component", type: MetricsComponent, selector: "vl-metrics" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vl-flow-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"contextProperties$ | async as contextProperties\">\n  <ng-container *ngIf=\"objectDetails$ | async as details\">\n    <div class=\"flow-info\">\n      <nav class=\"nav-item nav-back\" (click)=\"back()\">\n        <i class=\"nav-icon vl-icon vl-icon-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\n          <a target=\"_blank\" [href]=\"getSalesforceObjectLink(contextProperties.Id)\">{{ contextProperties.Name }}</a>\n        </nav>\n      </ng-container>\n\n      <ng-container *ngIf=\"isQuoteMode$ | async\">\n        <span class=\"nav-item\">Quote #{{ details.quoteNumber }}</span>\n\n        <span class=\"dot-separator\"></span>\n\n        <nav class=\"nav-item\" (click)=\"quoteDetails.toggle($event)\">\n          <span>{{ status$ | async }}</span>\n\n          <i *ngIf=\"!quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </p-overlayPanel>\n      </ng-container>\n    </div>\n\n    <div class=\"flow-navigation\">\n      <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n        <nav\n          class=\"nav-item\"\n          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\n        </nav>\n        <nav\n          class=\"nav-item\"\n          [ngClass]=\"{ active: (isCatalogRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToCatalog()\"\n        >\n          Catalog\n        </nav>\n        <nav\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </nav>\n        <ng-container *vlLet=\"products$ | async as products\">\n          <nav\n            class=\"nav-item\"\n            [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n            (click)=\"navigateToShoppingCart()\"\n          >\n            Shopping Cart\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\n\n            <nav\n              class=\"nav-popover-toggle\"\n              [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n              (click)=\"toggleCartOverlay(cart, $event)\"\n            >\n              <i *ngIf=\"!cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\n          </nav>\n\n          <vl-cart-preview #cart [products]=\"products ?? []\"></vl-cart-preview>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"flow-controls\">\n      <ng-container *ngIf=\"(isReadonlyMode$ | async) === false\">\n        <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n          <div class=\"price-plan\">\n            <ng-container *vlLet=\"assetPriceLists$ | async as assetPriceLists\">\n              <ng-container\n                *ngIf=\"(isAccountMode$ | async) && assetPriceLists && assetPriceLists.length > 1; else singlePriceList\"\n              >\n                <nav class=\"nav-item\" (click)=\"priceListsOverlay?.toggle($event)\">\n                  <span>{{ priceList?.name }}</span>\n                  <i *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n                </nav>\n\n                <p-overlayPanel styleClass=\"price-list-overlay\" #priceListsOverlay>\n                  <ng-template pTemplate>\n                    <span\n                      *ngFor=\"let option of assetPriceLists\"\n                      class=\"price-list-option\"\n                      [class.active]=\"priceList?.id === option.id\"\n                      (click)=\"selectPriceList(option.id); priceListsOverlay.hide()\"\n                    >\n                      {{ option.name }}\n                    </span>\n                  </ng-template>\n                </p-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-template #singlePriceList>\n              <div>{{ priceList?.name }}</div>\n            </ng-template>\n\n            <div *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date : dateFormat }}</div>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <vl-metrics></vl-metrics>\n\n      <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n        <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\n              >\n              </p-splitButton>\n\n              <p-button\n                *ngIf=\"isSaveInProgress\"\n                class=\"save-button\"\n                styleClass=\"p-button\"\n                label=\"Saving\"\n                [loading]=\"true\"\n              ></p-button>\n\n              <p-button\n                *ngIf=\"isSubmitInProgress\"\n                class=\"submit-button\"\n                styleClass=\"p-button\"\n                label=\"Submitting\"\n                [loading]=\"true\"\n              ></p-button>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;width:100%;height:100%;background:rgba(255,255,255,.3);opacity:1;border:none}:host ::ng-deep .save-button .p-button .p-button-label,:host ::ng-deep .submit-button .p-button .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.vl-icon{display:inline-block}.flow-info{flex-shrink:0;display:flex;gap:8px;align-items:center}.flow-info .nav-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.flow-info .nav-item:not(.disabled):hover,.flow-info .nav-popover-toggle:not(.disabled):hover{opacity:.6}nav{display:flex;align-items:center;cursor:pointer;height:32px}nav.disabled{opacity:.6;cursor:default}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:16px;display:flex;justify-content:center}nav.nav-popover-toggle i{pointer-events:none;margin:0}nav i{pointer-events:none}.metrics__row{display:flex;justify-content:space-between;gap:2px}.dot-separator:after{content:\"\";display:block;width:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.price-list-option{padding:8px;color:var(--vl-primary-color);cursor:pointer}.price-list-option.active,.price-list-option:hover{background:var(--vl-secondary-nav-bg)}.flow-controls{flex-shrink:0;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i2.QuoteApiService }, { type: i2.SalesforceApiService }, { type: i1$1.FlowConfigurationService }, { type: FlowRouterService }, { type: FlowDialogService }, { type: i5.IntegrationState }]; } });
-
-class MetricsModule {
-}
-MetricsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MetricsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MetricsModule, declarations: [MetricsComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        DragDropModule,
-        ButtonModule,
-        OverlayPanelModule,
-        SidebarModule,
-        InputTextModule,
-        CheckboxModule,
-        LetDirectiveModule,
-        VirtualScrollerModule,
-        ErrorTooltipModule,
-        HiddenTextTooltipModule,
-        SdkPipesModule], exports: [MetricsComponent] });
-MetricsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        DragDropModule,
-        ButtonModule,
-        OverlayPanelModule,
-        SidebarModule,
-        InputTextModule,
-        CheckboxModule,
-        LetDirectiveModule,
-        VirtualScrollerModule,
-        ErrorTooltipModule,
-        HiddenTextTooltipModule,
-        SdkPipesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MetricsComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DragDropModule,
-                        ButtonModule,
-                        OverlayPanelModule,
-                        SidebarModule,
-                        InputTextModule,
-                        CheckboxModule,
-                        LetDirectiveModule,
-                        VirtualScrollerModule,
-                        ErrorTooltipModule,
-                        HiddenTextTooltipModule,
-                        SdkPipesModule,
-                    ],
-                    exports: [MetricsComponent],
-                }]
-        }] });
-
-class FlowHeaderModule {
-}
-FlowHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FlowHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderModule, declarations: [FlowHeaderComponent], imports: [CommonModule,
-        OverlayPanelModule,
-        LetDirectiveModule,
-        TooltipModule,
-        ButtonModule,
-        CartPreviewModule,
-        SplitButtonModule,
-        MetricsModule,
-        SdkPipesModule], exports: [FlowHeaderComponent] });
-FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderModule, imports: [CommonModule,
-        OverlayPanelModule,
-        LetDirectiveModule,
-        TooltipModule,
-        ButtonModule,
-        CartPreviewModule,
-        SplitButtonModule,
-        MetricsModule,
-        SdkPipesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FlowHeaderComponent],
-                    imports: [
-                        CommonModule,
-                        OverlayPanelModule,
-                        LetDirectiveModule,
-                        TooltipModule,
-                        ButtonModule,
-                        CartPreviewModule,
-                        SplitButtonModule,
-                        MetricsModule,
-                        SdkPipesModule,
-                    ],
-                    exports: [FlowHeaderComponent],
-                }]
-        }] });
+FlowRouterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.ContextService }, { token: i2.IntegrationState }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowRouterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRouterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2.ContextService }, { type: i2.IntegrationState }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
 
 class FlowService {
-    constructor(integrationState, flowRouterService, quoteDraftService, configurationService, flowConfigurationService) {
+    constructor(integrationState, flowRouterService, quoteDraftService, configurationService, configurationStateService, flowDialogService, flowConfigurationService, flowInfoService, flowStateService) {
         this.integrationState = integrationState;
         this.flowRouterService = flowRouterService;
         this.quoteDraftService = quoteDraftService;
         this.configurationService = configurationService;
+        this.configurationStateService = configurationStateService;
+        this.flowDialogService = flowDialogService;
         this.flowConfigurationService = flowConfigurationService;
+        this.flowInfoService = flowInfoService;
+        this.flowStateService = flowStateService;
         this.cleanup$ = new Subject();
     }
+    cleanup() {
+        this.cleanup$.next();
+    }
     initSubscriptions() {
         this.integrationState
             .listen$(FlowAction.FLOW_CONFIGURE_PRODUCT)
-            .pipe(tap(payload => {
-            const productId = payload.productId ??
-                this.quoteDraftService.currentState.find(li => li.id === payload.lineItemId)?.productId;
-            if (productId) {
-                this.flowRouterService.navigateToProductConfiguration(productId, payload.lineItemId);
+            .pipe(switchMap(payload => {
+            if (this.flowInfoService.isLegacy) {
+                const productId = payload.productId ??
+                    this.quoteDraftService.currentState.find(li => li.id === payload.lineItemId)?.productId;
+                return of({ ...payload, productId });
+            }
+            return this.prepareConfiguration$(payload.lineItemId).pipe(map(() => payload));
+        }), tap(payload => {
+            if (payload.productId) {
+                this.flowRouterService.navigateToProductConfiguration(payload.productId, payload.lineItemId);
             }
             else {
                 console.warn("Parameter 'productId' is needed to start configuration");
@@ -1424,53 +779,93 @@ class FlowService {
             .subscribe();
         this.integrationState
             .listen$(FlowAction.FLOW_NAVIGATE_BACK)
-            .pipe(tap(() => this.flowRouterService.navigateBack()), takeUntil(this.cleanup$))
+            .pipe(switchMap(() => this.configurationStateService.cancelConfiguration()), tap(() => this.flowRouterService.navigateBack()), takeUntil(this.cleanup$))
             .subscribe();
+        this.integrationState
+            .listen$(FlowAction.FLOW_NAVIGATE_TO)
+            .pipe(switchMap(payload => this.configurationStateService.cancelConfiguration().pipe(map(() => payload))), tap(payload => {
+            if (payload.path === 'product') {
+                this.integrationState.dispatch(FlowAction.ConfigureProductAction(payload));
+            }
+            else {
+                this.flowRouterService.navigateTo(payload.path, payload.productId, payload.lineItemId);
+            }
+        }), takeUntil(this.cleanup$))
+            .subscribe();
+        this.integrationState
+            .listen$(FlowAction.OPEN_DIALOG)
+            .pipe(switchMap(payload => this.flowDialogService.showDialog(payload.dialog).pipe(take(1))), takeUntil(this.cleanup$))
+            .subscribe(dialogResult => {
+            this.integrationState.patchState({ dialogResult });
+        });
         this.integrationState
             .listen$(FlowAction.FLOW_NAVIGATE_TO_CATALOG)
             .pipe(tap(() => this.flowRouterService.navigateToCatalog()), takeUntil(this.cleanup$))
             .subscribe();
+        this.integrationState
+            .listen$(FlowAction.FLOW_NAVIGATE_TO_SHOPPING_CART)
+            .pipe(tap(() => this.flowRouterService.navigateToShoppingCart()), takeUntil(this.cleanup$))
+            .subscribe();
         this.integrationState
             .listen$(FlowAction.FLOW_APPLY_PRODUCT_CONFIGURATION)
             .pipe(switchMap(() => {
-            const quoteDraft = this.quoteDraftService.quoteDraft;
-            const lineItem = this.configurationService.getSnapshot();
-            if (!quoteDraft || !lineItem) {
-                return of(undefined);
-            }
-            const isNewLineItem = quoteDraft.currentState.every(li => li.id !== lineItem.id);
-            let updatedState;
-            if (isNewLineItem) {
-                updatedState = [...quoteDraft.currentState, lineItem];
+            if (this.flowInfoService.isLegacy) {
+                return this.legacyApplyConfiguration();
             }
             else {
-                updatedState = quoteDraft.currentState.map(li => (li.id === lineItem.id ? lineItem : li));
+                return this.configurationStateService.saveConfiguration('', true).pipe(switchMap(() => this.configurationStateService.cancelConfiguration()), switchMap(() => this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'MODIFY_ASSETS', {
+                    addConfiguringAssetId: true,
+                    enable: true,
+                })));
             }
-            return this.flowConfigurationService.calculate$({ ...quoteDraft, currentState: updatedState });
         }), tap(() => {
             this.configurationService.hasUnsavedChanges = false;
             this.flowRouterService.navigateToShoppingCart();
         }), takeUntil(this.cleanup$))
             .subscribe();
-        this.updateFlowPath();
-    }
-    cleanup() {
-        this.cleanup$.next();
+        this.updateFlowParams();
     }
-    updateFlowPath() {
+    updateFlowParams() {
         this.flowRouterService
             .getFlowSubpath$()
             .pipe(map(path => path.split('/')?.[0]), takeUntil(this.cleanup$))
             .subscribe(flowPath => this.integrationState.patchState({ flowPath }));
+        this.flowRouterService.route$
+            .pipe(map(path => path.queryParams['productId']), takeUntil(this.cleanup$))
+            .subscribe(productId => this.integrationState.patchState({ productId }));
+    }
+    prepareConfiguration$(lineItemId) {
+        if (!lineItemId) {
+            return of(undefined);
+        }
+        return this.flowStateService.dispatch$(UITemplateType.FLOW_ENGINE, 'UPDATE_PRICE_LIST', {
+            lineItemId,
+        });
+    }
+    legacyApplyConfiguration() {
+        const quoteDraft = this.quoteDraftService.quoteDraft;
+        const lineItem = this.configurationService.getSnapshot();
+        if (!quoteDraft || !lineItem) {
+            return of(undefined);
+        }
+        const isNewLineItem = quoteDraft.currentState.every(li => li.id !== lineItem.id);
+        let updatedState;
+        if (isNewLineItem) {
+            updatedState = [...quoteDraft.currentState, lineItem];
+        }
+        else {
+            updatedState = quoteDraft.currentState.map(li => (li.id === lineItem.id ? lineItem : li));
+        }
+        return this.flowConfigurationService.calculate$({ ...quoteDraft, currentState: updatedState });
     }
 }
-FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, deps: [{ token: i5.IntegrationState }, { token: FlowRouterService }, { token: i1$1.QuoteDraftService }, { token: i1$1.ConfigurationService }, { token: i1$1.FlowConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, deps: [{ token: i5.IntegrationState }, { token: FlowRouterService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: FlowDialogService }, { token: i2.FlowConfigurationService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i5.IntegrationState }, { type: FlowRouterService }, { type: i1$1.QuoteDraftService }, { type: i1$1.ConfigurationService }, { type: i1$1.FlowConfigurationService }]; } });
+        }], ctorParameters: function () { return [{ type: i5.IntegrationState }, { type: FlowRouterService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: FlowDialogService }, { type: i2.FlowConfigurationService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
 
-class FlowDocGenService {
+class FlowGuidedSellingService {
     constructor(integrationState) {
         this.integrationState = integrationState;
         this.cleanup$ = new Subject();
@@ -1483,47 +878,40 @@ class FlowDocGenService {
     }
     initSubscriptions() {
         this.integrationState
-            .listen$(FlowAction.FLOW_OPEN_DOC_GEN)
+            .listen$(FlowAction.OPEN_GUIDED_SELLING)
             .pipe(tap(() => this.isVisibleSubj$.next(true)), takeUntil(this.cleanup$))
             .subscribe();
         this.integrationState
-            .listen$(FlowAction.FLOW_CLOSE_DOC_GEN)
+            .listen$(FlowAction.CLOSE_GUIDED_SELLING)
             .pipe(tap(() => this.isVisibleSubj$.next(false)), takeUntil(this.cleanup$))
             .subscribe();
     }
 }
-FlowDocGenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService, deps: [{ token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
-FlowDocGenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService, decorators: [{
+FlowGuidedSellingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, deps: [{ token: i2.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowGuidedSellingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i5.IntegrationState }]; } });
+        }], ctorParameters: function () { return [{ type: i2.IntegrationState }]; } });
 
 class FlowComponent {
-    constructor(routerService, quoteDraftService, flowService, docGenService, integrationState) {
+    constructor(routerService, flowService, flowInfo, guidedSellingService) {
         this.routerService = routerService;
-        this.quoteDraftService = quoteDraftService;
         this.flowService = flowService;
-        this.docGenService = docGenService;
-        this.integrationState = integrationState;
+        this.flowInfo = flowInfo;
+        this.guidedSellingService = guidedSellingService;
         this.isLoading$ = this.routerService.loading$;
-        this.showHeader$ = this.routerService.route$.pipe(map(route => route.data['showHeader'] && !this.quoteDraftService.isStandalone));
-        this.isStandalone$ = this.quoteDraftService.isStandalone$;
+        this.showHeader$ = combineLatest([this.routerService.route$, this.flowInfo.flow$]).pipe(map(([route, flow]) => route.data['showHeader'] && !flow?.properties.standalone));
+        this.isStandalone$ = this.flowInfo.flow$.pipe(map(flow => Boolean(flow?.properties.standalone)));
+        this.guidedSellingVisible$ = this.guidedSellingService.isVisible$;
         this.flowService.initSubscriptions();
     }
-    ngOnInit() {
-        this.integrationState.clear();
-    }
-    ngOnDestroy() {
-        this.flowService.cleanup();
-        this.docGenService.cleanup();
-    }
 }
-FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: i1$1.QuoteDraftService }, { token: FlowService }, { token: FlowDocGenService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
-FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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\n  <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n</div>\n\n<ng-container *ngIf=\"(isStandalone$ | async) !== true\">\n  <vl-flow-doc-gen></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#ffffff80;z-index:4}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: FlowHeaderComponent, selector: "vl-flow-header" }, { kind: "component", type: DocGenComponent, selector: "vl-flow-doc-gen" }, { kind: "component", type: GuidedSellingComponent, selector: "vl-flow-guided-selling" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: FlowService }, { token: i2.FlowInfoService }, { token: FlowGuidedSellingService }], target: i0.ɵɵFactoryTarget.Component });
+FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-new-header *ngIf=\"showHeader$ | async\"></vl-flow-new-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\n  <div class=\"guided-selling\" [ngClass]=\"{ hidden: (guidedSellingVisible$ | async) === false }\">\n    <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n  </div>\n</div>\n\n<ng-container *ngIf=\"(isStandalone$ | async) !== true\">\n  <vl-flow-doc-gen></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#fff;z-index:999}.guided-selling{position:absolute;top:0;width:100%;height:100%;z-index:100}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: FlowHeaderComponent, selector: "vl-flow-new-header" }, { kind: "component", type: DocGenComponent, selector: "vl-flow-doc-gen" }, { kind: "component", type: GuidedSellingComponent, selector: "vl-flow-guided-selling" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow', changeDetection: ChangeDetectionStrategy.OnPush, 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\n  <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n</div>\n\n<ng-container *ngIf=\"(isStandalone$ | async) !== true\">\n  <vl-flow-doc-gen></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#ffffff80;z-index:4}\n"] }]
-        }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: i1$1.QuoteDraftService }, { type: FlowService }, { type: FlowDocGenService }, { type: i5.IntegrationState }]; } });
+            args: [{ selector: 'vl-flow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-flow-new-header *ngIf=\"showHeader$ | async\"></vl-flow-new-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\n  <div class=\"guided-selling\" [ngClass]=\"{ hidden: (guidedSellingVisible$ | async) === false }\">\n    <vl-flow-guided-selling *ngIf=\"(isStandalone$ | async) !== true\"></vl-flow-guided-selling>\n  </div>\n</div>\n\n<ng-container *ngIf=\"(isStandalone$ | async) !== true\">\n  <vl-flow-doc-gen></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;inset:0;background-color:#fff;z-index:999}.guided-selling{position:absolute;top:0;width:100%;height:100%;z-index:100}.hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: FlowService }, { type: i2.FlowInfoService }, { type: FlowGuidedSellingService }]; } });
 
 const getFlowObjectIdPropertyName = (id) => {
     const objectName = SalesforceIdUtils.getSfObjectNameById(id);
@@ -1539,8 +927,12 @@ const getFlowObjectIdPropertyName = (id) => {
 };
 const getDefaultProperties = (params) => {
     const properties = {};
+    let standalone = params.flowParams?.standalone;
     if (params.flowParams?.entryPath.includes('/product') || params.mode === ConfigurationContextMode.REMOTE) {
-        properties.standalone = params.flowParams?.queryParams?.['standalone'] ?? 'true';
+        standalone = standalone ?? true;
+    }
+    if (standalone != null) {
+        properties.standalone = standalone ? 'true' : 'false';
     }
     return properties;
 };
@@ -1559,7 +951,7 @@ class ContextGuard {
         const mode = this.getConfigurationContextMode(accountId, quoteId, orderId, rpcMessage);
         // Restrict if mode is not defined
         if (mode == null) {
-            return this.handleError(route, 'Mode is undefined');
+            return this.routerService.showErrorPage$('Mode is undefined');
         }
         const headerId = accountId || quoteId || orderId || this.rpcMessageId || 'empty-for-test-mode';
         // Allow if context is already initialized with the same headerId
@@ -1571,7 +963,6 @@ class ContextGuard {
         }
         // Initialize context and runtime settings
         return forkJoin([this.contextService.create(headerId, mode), this.runtimeSettingsService.create()]).pipe(tap(([context]) => {
-            // Update context with queryParams
             this.contextService.update({
                 ...context,
                 properties: {
@@ -1584,7 +975,8 @@ class ContextGuard {
             this.runtimeSettingsService.initCurrency(context.properties['CurrencyIsoCode']);
         }), map(() => true), catchError(e => {
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
-            return this.handleError(route, message);
+            const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
+            return this.routerService.showErrorPage$(message, errorDetails);
         }));
     }
     canActivate(route) {
@@ -1617,17 +1009,43 @@ class ContextGuard {
         }
         return;
     }
-    handleError(route, message) {
-        this.contextService.delete();
-        const parentUrl = this.routerService.getFlowRootPath(route);
-        return from(this.router.navigate([parentUrl, '404'], { state: { message } })).pipe(map(() => false));
-    }
 }
-ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i1$1.ContextService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContextGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }, { type: i1$1.RuntimeSettingsService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.RuntimeSettingsService }]; } });
+
+const keepFlowInitialized = (route) => {
+    const contextService = inject(ContextService);
+    const flowState = inject(FlowStateService);
+    const flowInfoService = inject(FlowInfoService);
+    const routerService = inject(FlowRouterService);
+    const quoteDraft = inject(QuoteDraftService);
+    const configurationService = inject(ConfigurationService);
+    const integrationState = inject(IntegrationState);
+    const { flowId } = route.queryParams;
+    const flow = flowInfoService.flow;
+    if (flow && flow?.id === flowId) {
+        return true;
+    }
+    // Cleanup
+    flowState.cleanup();
+    quoteDraft.reset();
+    configurationService.reset();
+    integrationState.clear();
+    flowInfoService.cleanup();
+    contextService.delete();
+    if (!flowId) {
+        return true;
+    }
+    const params = { ...route.queryParams, ...flow?.properties.queryParams };
+    return flowInfoService.init$(flowId, params).pipe(map(() => true), catchError(e => {
+        const message = e instanceof HttpErrorResponse ? e.error.message : e;
+        const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
+        return routerService.showErrorPage$(message, errorDetails);
+    }));
+};
 
 class ProductUnloadGuard {
     constructor(router, contextService, quoteDraftService, configurationService, flowDialogService) {
@@ -1651,6 +1069,9 @@ class ProductUnloadGuard {
                 }
                 // clear obsolete queryParams
                 const urlTree = this.router.parseUrl(nextState.url);
+                if (!urlTree.queryParams['productId']) {
+                    return true;
+                }
                 delete urlTree.queryParams['productId'];
                 // replace url after deactivation has finished
                 setTimeout(() => this.router.navigateByUrl(urlTree.toString(), { replaceUrl: true }));
@@ -1660,32 +1081,36 @@ class ProductUnloadGuard {
         }));
     }
 }
-ProductUnloadGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, deps: [{ token: i1$2.Router }, { token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i1$1.ConfigurationService }, { token: FlowDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductUnloadGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, deps: [{ token: i1$2.Router }, { token: i2.ContextService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationService }, { token: FlowDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
 ProductUnloadGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductUnloadGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i1$1.ConfigurationService }, { type: FlowDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2.ContextService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationService }, { type: FlowDialogService }]; } });
 
 class RootGuard {
     constructor(router, routerService) {
         this.router = router;
         this.routerService = routerService;
         this.initialized = false;
-        this.navToRestore = null;
     }
     canActivate(route) {
         // We always need to initialize root component first, and only then start checking guards/resolvers
         if (!this.initialized) {
             this.initialized = true;
-            this.navToRestore = this.router.getCurrentNavigation();
+            const navToRestore = this.router.getCurrentNavigation();
             const rootUrl = this.routerService.getFlowRootPath(route);
-            this.router.navigate([rootUrl], { replaceUrl: !this.navToRestore?.previousNavigation });
-        }
-        else if (this.navToRestore) {
-            const nav = this.navToRestore;
-            setTimeout(() => {
-                this.router.navigateByUrl(nav.extractedUrl, nav.extras);
-                this.navToRestore = null;
+            this.router
+                .navigate([rootUrl], {
+                replaceUrl: !navToRestore?.previousNavigation,
+                skipLocationChange: true,
+            })
+                .then(success => {
+                if (!success || !navToRestore) {
+                    return;
+                }
+                setTimeout(() => {
+                    this.router.navigateByUrl(navToRestore.extractedUrl, navToRestore.extras);
+                });
             });
         }
         return true;
@@ -1703,17 +1128,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }]; } });
 
 class AssetsComponent {
-    constructor(templatesApi, contextService, cdr, toastService, customizationService) {
+    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
         this.templatesApi = templatesApi;
-        this.contextService = contextService;
         this.cdr = cdr;
         this.toastService = toastService;
+        this.flowInfo = flowInfo;
         this.customizationService = customizationService;
         this.uiDefinition = undefined;
         this.state$ = new BehaviorSubject({ loading: true, failure: false });
         this.templateApiName = '';
         this.destroyed$ = new Subject();
-        this.templateApiName = this.contextService.resolve().properties['assetsTemplateApiName'] ?? '';
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.assets ?? '';
     }
     ngOnInit() {
         this.generateUIDefinition$()
@@ -1736,37 +1161,36 @@ class AssetsComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
-    getTemplateRootComponent$(template) {
-        return this.templatesApi
-            .fetchComponents$(template.id)
-            .pipe(map(components => components.find(c => c.type === UITemplateComponentType.ROOT) ?? undefined));
-    }
-    getLocalAssetsComponentMeta$() {
-        if (!this.customizationService?.getAssetsComponent) {
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
             return of(undefined);
         }
-        return this.customizationService?.getAssetsComponent(this.templateApiName).pipe(map(component => {
-            if (!component) {
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
                 return;
             }
-            return {
+            return components.map(component => ({
                 html: component.html,
                 css: component.css,
                 js: component.js,
                 json: component.json,
-            };
+            }));
         }));
     }
-    getAssetsComponentMeta$() {
-        return this.templatesApi.fetchTemplates$().pipe(map(templates => templates.find(template => template.name === this.templateApiName)), switchMap(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.SHOPPING_CART;
+        if (!template) {
+            return of(undefined);
+        }
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
             if (!this.templateApiName) {
-                throw new Error("Flow Query parameter 'assetsTemplateApiName' is missing.");
+                throw new Error("Flow 'assets' template is not defined.");
             }
-        }), switchMap(() => this.getLocalAssetsComponentMeta$()), switchMap(meta => (meta ? of(meta) : this.getAssetsComponentMeta$())), map(meta => {
-            if (!meta) {
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
                 return;
             }
             const uiDef = {
@@ -1775,25 +1199,23 @@ class AssetsComponent {
                 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),
-                    },
-                ],
+                children: metaList.map(meta => ({
+                    children: [],
+                    template: meta.html && btoaSafe(meta.html),
+                    script: meta.js && btoaSafe(meta.js),
+                    styles: meta.css && btoaSafe(meta.css),
+                })),
             };
             return uiDef;
         }));
     }
 }
-AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AssetsComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AssetsComponent, selector: "vl-flow-assets", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AssetsComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AssetsComponent, selector: "vl-flow-assets", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AssetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-assets', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: function () { return [{ type: i2.UITemplatesApiService }, { type: i1$1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1815,17 +1237,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class CatalogComponent {
-    constructor(templatesApi, contextService, cdr, toastService, customizationService) {
+    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
         this.templatesApi = templatesApi;
-        this.contextService = contextService;
         this.cdr = cdr;
         this.toastService = toastService;
+        this.flowInfo = flowInfo;
         this.customizationService = customizationService;
         this.uiDefinition = undefined;
         this.state$ = new BehaviorSubject({ loading: true, failure: false });
         this.templateApiName = '';
         this.destroyed$ = new Subject();
-        this.templateApiName = this.contextService.resolve().properties.catalogTemplateApiName ?? '';
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.catalog ?? '';
     }
     ngOnInit() {
         this.generateUIDefinition$()
@@ -1848,37 +1270,36 @@ class CatalogComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
-    getTemplateRootComponent$(template) {
-        return this.templatesApi
-            .fetchComponents$(template.id)
-            .pipe(map(components => components.find(c => c.type === UITemplateComponentType.ROOT) ?? undefined));
-    }
-    getLocalCatalogComponentMeta$() {
-        if (!this.customizationService?.getCatalogComponent) {
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
             return of(undefined);
         }
-        return this.customizationService?.getCatalogComponent(this.templateApiName).pipe(map(component => {
-            if (!component) {
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
                 return;
             }
-            return {
+            return components.map(component => ({
                 html: component.html,
                 css: component.css,
                 js: component.js,
                 json: component.json,
-            };
+            }));
         }));
     }
-    getCatalogComponentMeta$() {
-        return this.templatesApi.fetchTemplates$().pipe(map(templates => templates.find(template => template.name === this.templateApiName)), switchMap(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.CATALOG;
+        if (!template) {
+            return of(undefined);
+        }
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
             if (!this.templateApiName) {
-                throw new Error("Flow Query parameter 'catalogTemplateApiName' is missing.");
+                throw new Error("Flow 'catalog' template is not defined.");
             }
-        }), switchMap(() => this.getLocalCatalogComponentMeta$()), switchMap(meta => (meta ? of(meta) : this.getCatalogComponentMeta$())), map(meta => {
-            if (!meta) {
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
                 return;
             }
             const uiDef = {
@@ -1887,25 +1308,23 @@ class CatalogComponent {
                 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),
-                    },
-                ],
+                children: metaList.map(meta => ({
+                    children: [],
+                    template: meta.html && btoaSafe(meta.html),
+                    script: meta.js && btoaSafe(meta.js),
+                    styles: meta.css && btoaSafe(meta.css),
+                })),
             };
             return uiDef;
         }));
     }
 }
-CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CatalogComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CatalogComponent, selector: "vl-flow-catalog", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CatalogComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CatalogComponent, selector: "vl-flow-catalog", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-catalog', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: function () { return [{ type: i2.UITemplatesApiService }, { type: i1$1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1936,15 +1355,7 @@ class DebugComponent {
         this.form = new FormGroup({
             id: new FormControl(''),
         });
-        this.flows$ = this.flowsApiService.fetchFlows().pipe(map(flows => flows.map(flow => {
-            const queryParams = flow?.properties?.queryParams ?? {};
-            return {
-                id: flow.id,
-                entryPath: flow?.properties?.entryPath,
-                queryParams,
-                queryParamsStr: JSON.stringify(queryParams),
-            };
-        })), shareReplay());
+        this.flows$ = this.flowsApiService.fetchFlows().pipe(shareReplay());
     }
     runFlow() {
         const { id } = this.form.value;
@@ -1959,18 +1370,21 @@ class DebugComponent {
             queryParams: {
                 flowId: this.selectedFlow.id,
                 [objectPropertyName]: id,
-                ...this.selectedFlow.queryParams,
+                ...this.selectedFlow.properties.queryParams,
             },
             relativeTo: this.activatedRoute,
         });
     }
+    getQueryParamsString(params) {
+        return new HttpParams({ fromObject: params }).toString();
+    }
 }
-DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, deps: [{ token: i2.FlowsApiService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
-DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\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: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, deps: [{ token: i1$1.FlowsApiService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2.ContextService }, { token: i2.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
+DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\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      <th [width]=\"100\">Standalone</th>\n      <th [width]=\"100\">Stateful</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.properties.entryPath }}</td>\n      <td class=\"cell-query-params\">{{ getQueryParamsString(flow.properties.queryParams) }}</td>\n      <td>{{ flow.properties.standalone }}</td>\n      <td>{{ flow.properties.stateful }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse;table-layout:fixed}tbody>tr{cursor:pointer}tbody>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;line-height:18px}.cell-query-params{word-break:break-all}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DebugComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-debug', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\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: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}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"] }]
-        }], ctorParameters: function () { return [{ type: i2.FlowsApiService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }]; } });
+            args: [{ selector: 'vl-flow-debug', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n  <div class=\"fields-container\">\n    <div class=\"field\">\n      <label>SF Object ID</label>\n      <input formControlName=\"id\" pInputText type=\"text\" />\n    </div>\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      <th [width]=\"100\">Standalone</th>\n      <th [width]=\"100\">Stateful</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.properties.entryPath }}</td>\n      <td class=\"cell-query-params\">{{ getQueryParamsString(flow.properties.queryParams) }}</td>\n      <td>{{ flow.properties.standalone }}</td>\n      <td>{{ flow.properties.stateful }}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse;table-layout:fixed}tbody>tr{cursor:pointer}tbody>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;line-height:18px}.cell-query-params{word-break:break-all}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FlowsApiService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2.ContextService }, { type: i2.QuoteDraftService }]; } });
 
 const routes$1 = [{ path: '', component: DebugComponent }];
 class DebugModule {
@@ -2007,173 +1421,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class EmptyAccountComponent {
-}
-EmptyAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmptyAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: EmptyAccountComponent, selector: "vl-empty-account", ngImport: i0, template: "<vl-empty-state\n  primaryText=\"No Orders in your Account\"\n  secondaryText=\"To proceed, go to the Shopping Cart from a Quote.\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"281\" viewBox=\"0 0 400 281\" fill=\"none\">\n    <path d=\"M264.214 26.9277H70.8805V128.186H264.214V26.9277Z\" fill=\"#0466C8\" />\n    <path\n      d=\"M143 56.5H136.217C128.166 64.4791 120.051 72.5209 112 80.5H118.783C126.834 72.5209 134.949 64.5419 143 56.5Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M242.932 57.5681V79.4319H128.575L133.724 74.2801L150.429 57.5681H242.932ZM244 56.5H149.989C142.014 64.4791 133.976 72.5209 126 80.5H244V56.5Z\"\n      fill=\"white\"\n    />\n    <path d=\"M129 56.5H81V80.5H104.969C112.958 72.5209 120.948 64.5419 129 56.5Z\" fill=\"white\" />\n    <path\n      d=\"M82.3 23.2016C82.2366 23.2016 82.1732 23.2644 82.1098 23.2644C81.3494 23.5785 80.5889 23.5785 79.8918 23.2644C79.765 23.2016 79.6383 23.1387 79.4482 23.0759C78.9412 22.7618 78.561 22.322 78.3075 21.7565C77.6104 20.2487 78.1173 18.6151 79.6383 17.8612C81.1592 17.1073 82.9971 17.547 83.6942 19.0549C84.3913 20.6256 83.8843 22.3848 82.3 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M92.2716 23.2016C92.2086 23.2016 92.1457 23.2644 92.0827 23.2644C91.3273 23.5785 90.5718 23.5785 89.8793 23.2644C89.7534 23.2016 89.6275 23.1387 89.4386 23.0759C88.935 22.7618 88.5573 22.322 88.3054 21.7565C87.6129 20.2487 88.1166 18.6151 89.6275 17.8612C91.1384 17.1073 92.9641 17.547 93.6566 19.0549C94.412 20.6256 93.9084 22.3848 92.2716 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M102.3 23.2016C102.237 23.2016 102.173 23.2644 102.11 23.2644C101.349 23.5785 100.589 23.5785 99.8918 23.2644C99.765 23.2016 99.6383 23.1387 99.4482 23.0759C98.9412 22.7618 98.561 22.322 98.3075 21.7565C97.6104 20.2487 98.1174 18.6151 99.6383 17.8612C101.159 17.1073 102.997 17.547 103.694 19.0549C104.391 20.6256 103.884 22.3848 102.3 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M210.126 91.0156H130.44C129.748 91.0156 129.748 92.0848 130.44 92.0848H210.126C210.818 92.0848 210.818 91.0156 210.126 91.0156Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M197.484 97.5566H142.013C141.321 97.5566 141.321 98.6258 142.013 98.6258H197.484C198.176 98.6258 198.176 97.5566 197.484 97.5566Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M229.436 35.5H61.5553C60.8149 35.5 60.8149 36.5 61.5553 36.5H229.503C230.176 36.5 230.176 35.5 229.436 35.5Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M270.44 35.3555H256.226C256.163 35.3555 256.163 36.4246 256.226 36.4246H270.44C270.503 36.4246 270.503 35.3555 270.44 35.3555Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M332.704 212.022C332.642 212.022 332.579 212.022 332.516 211.959L280.566 191.582C280.377 191.519 280.252 191.33 280.252 191.141C280.252 190.953 280.314 190.764 280.44 190.638C292.83 181.33 333.333 150.953 335.346 150.953C335.472 150.953 335.66 151.016 335.723 151.141C335.849 151.267 335.849 151.393 335.849 151.519L333.208 211.456C333.208 211.644 333.082 211.77 332.956 211.896C332.893 211.959 332.767 212.022 332.704 212.022ZM281.824 190.953L332.138 210.701L334.717 152.336C329.811 155.166 301.321 176.299 281.824 190.953Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M366.289 231.015C366.226 231.015 366.226 231.015 366.164 231.015L349.371 227.053C349.182 226.99 349.057 226.927 348.994 226.739C348.931 226.613 348.931 226.424 348.994 226.236L357.736 211.141C357.862 210.953 358.05 210.89 358.239 210.89C358.428 210.89 358.616 211.015 358.679 211.204C366.918 229.758 366.792 230.324 366.792 230.512C366.792 230.638 366.667 230.764 366.541 230.89C366.478 230.953 366.415 231.015 366.289 231.015ZM350.314 226.173L365.472 229.758C364.465 227.116 360.755 218.626 358.113 212.651L350.314 226.173Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M199.686 248.751C192.516 229.38 177.799 213.909 159.497 205.67V205.607C159.748 193.343 154.528 181.141 144.654 173.657C133.396 165.104 118.365 162.902 104.591 164.034C78.1132 166.236 53.0189 181.456 38.805 203.846C36.9811 206.739 35.3459 209.758 33.8365 212.839C33.522 213.468 34.4654 214.034 34.7799 213.405C45.4088 191.015 66.1635 174.16 90 167.682C113.711 161.267 146.981 164.726 156.226 191.519C157.736 195.921 158.491 200.575 158.428 205.229C150.943 201.959 142.893 199.946 134.465 199.254C121.447 198.248 103.522 199.506 95.283 211.204C91.761 216.236 90.8805 222.525 93.5849 228.122C96.2893 233.72 101.761 237.745 107.421 239.946C118.868 244.475 132.39 242.462 142.642 235.858C152.642 229.38 158.679 218.688 159.371 206.865C177.17 215.041 191.572 230.072 198.616 249.066C198.931 249.695 199.937 249.443 199.686 248.751ZM152.075 225.481C145.094 235.355 133.019 241.141 121.006 241.267C109.434 241.393 92.7044 234.6 93.0189 220.701C93.2076 213.217 98.9937 207.305 105.346 204.286C112.013 201.141 119.748 200.198 127.044 200.072C137.987 199.883 148.616 202.148 158.302 206.361C158.113 213.154 156.038 219.883 152.075 225.481Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M341.447 271.204H322.767C322.075 271.204 322.075 272.273 322.767 272.273H341.447C342.138 272.336 342.138 271.204 341.447 271.204Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M233.522 75.4814C230.881 89.3179 229.245 103.154 224.025 110.576C213.962 124.915 185.975 137.117 178.428 143.972C170.881 150.764 171.95 151.142 173.019 152.588C173.648 153.469 177.862 151.771 181.132 150.261C177.421 152.211 172.579 155.23 173.711 157.242C174.654 159.003 178.679 157.808 182.201 156.362C178.994 158.123 175.786 160.387 176.981 161.959C178.365 163.783 183.585 161.897 187.107 160.387C184.088 162.022 180.314 164.475 181.635 166.299C183.774 169.192 235.849 149.758 245.157 120.702C248.805 109.318 250.881 94.6009 252.013 80.8274C245.786 79.3808 239.623 77.494 233.522 75.4814Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M182.327 148.437C179.497 150.576 176.226 151.645 172.704 151.582C172.013 151.582 172.013 152.651 172.704 152.651C176.415 152.714 179.937 151.582 182.893 149.318C183.396 148.941 182.893 147.997 182.327 148.437Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M184.906 154.852C183.27 155.607 181.635 156.173 179.937 156.676C178.302 157.117 175.723 158.06 174.151 157.117C173.522 156.802 173.019 157.683 173.585 158.06C175.157 158.94 176.918 158.5 178.553 158.123C180.943 157.62 183.145 156.802 185.346 155.796C186.101 155.481 185.535 154.538 184.906 154.852Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M186.163 158.185C184.277 159.946 180.189 163.217 177.421 161.833C176.792 161.519 176.226 162.462 176.855 162.777C180.252 164.412 184.528 161.141 186.855 158.94C187.421 158.437 186.667 157.682 186.163 158.185Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M253.522 46.0474C253.522 47.1166 253.522 48.3115 253.522 49.6323C253.459 57.3052 253.145 69.1291 252.013 81.6449C251.95 82.148 251.95 82.6512 251.887 83.1543C245.472 82.148 236.981 79.2549 230.629 78.1857C232.893 65.7958 237.736 54.2864 244.151 45.4185C245.157 44.0348 246.226 42.7769 247.421 41.6449L253.522 40.5757C253.522 40.5757 253.522 41.3933 253.585 42.8398C253.522 43.6574 253.522 44.7266 253.522 46.0474Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M184.687 136.932C179.875 137.121 175.253 138.637 170.631 139.837C165.565 141.101 160.5 142.174 155.371 143.122C134.602 146.975 113.264 148.238 92.1786 146.849C74.7659 145.712 55.3904 142.238 43.2332 128.531C32.469 116.403 28.9865 98.1477 34.9384 82.9879C40.7638 68.0807 55.3271 57.6583 70.9668 55.5738V54.5C58.6197 56.0792 46.969 62.7748 39.4341 72.755C29.9996 85.325 28.6066 102.317 34.6218 116.719C41.0804 132.257 55.2004 141.227 71.1568 145.017C80.2747 147.165 89.6458 147.923 98.9537 148.302C109.718 148.744 120.545 148.428 131.246 147.544C143.087 146.533 154.801 144.638 166.388 142.048C172.403 140.658 178.545 138.321 184.687 138.132C190.576 137.942 197.604 140.974 197.921 147.607C197.984 148.302 199.061 148.302 198.997 147.607C198.617 140.216 191.209 136.679 184.687 136.932Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M190 164.091V172.909C190 173.697 191 173.697 191 172.909V164.091C191 163.303 190 163.303 190 164.091Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M199 164.037V172.963C199 173.679 200 173.679 200 172.963V164.037C200 163.321 199 163.321 199 164.037Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M182 166.5V155.275C182 148.205 187.792 142.5 194.969 142.5C202.145 142.5 207.937 148.205 207.937 155.275L208 166.5H182Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M209.483 165.5H180.517C179.828 165.5 179.828 166.5 180.517 166.5H209.483C210.172 166.5 210.172 165.5 209.483 165.5Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M203.711 151.519V161.582C203.711 162.274 204.78 162.274 204.78 161.582V151.519C204.843 150.827 203.711 150.827 203.711 151.519Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M196.73 134.601C187.421 142.148 183.648 152.274 187.233 153.343C190.818 154.412 203.208 135.67 203.208 135.67L196.73 134.601Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M199.748 139.632C196.855 144.098 193.396 148.374 189.182 151.708L188.239 152.399C187.358 152.84 186.352 152.148 186.478 150.953C186.541 150.45 187.233 149.066 187.421 148.689C187.925 147.557 188.491 146.425 189.057 145.292C190.377 142.777 191.824 140.387 193.459 138.06C193.836 137.494 192.893 136.928 192.516 137.494C191.195 139.443 181.824 152.399 186.855 153.594C189.245 154.16 191.824 150.827 193.27 149.381C196.038 146.55 198.491 143.469 200.692 140.135C201.069 139.569 200.126 139.066 199.748 139.632Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M211.132 135.984C207.736 139.003 203.648 140.89 199.057 141.33C198.365 141.393 198.365 142.462 199.057 142.399C203.899 141.896 208.239 139.947 211.887 136.739C212.39 136.299 211.635 135.544 211.132 135.984Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M238.176 254.224C250.692 253.783 263.208 255.607 275.723 255.796C275.157 254.475 274.654 253.217 274.088 251.897C273.774 251.205 273.459 250.513 273.145 249.821C270.377 243.658 267.484 237.809 264.717 232.274C254.906 235.859 245.031 239.129 234.843 241.331C237.547 246.928 239.12 251.393 238.176 254.224Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M273.899 253.595C276.101 253.783 278.365 253.783 280.566 253.72C284.717 253.658 288.805 253.72 292.956 253.72C299.12 253.783 305.283 253.532 311.384 253.091C307.17 244.161 302.767 235.796 298.553 228.06C289.057 230.639 279.56 232.966 269.937 235.104C273.145 242.525 275.031 249.003 273.899 253.595Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M274.214 250.828C273.836 255.104 271.069 257.997 267.107 259.57C256.352 263.909 259.937 272.84 259.937 272.84H319.874C316.918 265.167 313.648 257.809 310.314 250.765H274.214V250.828Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M307.296 229.758C293.459 203.783 276.289 186.299 281.447 173.72C297.233 135.419 300.818 107.997 291.887 84.3494L267.484 80.0098C267.484 80.0098 269.623 91.5192 268.553 112.337C267.484 133.154 252.201 152.022 250.252 182.337C249.182 199.129 259.937 225.985 266.415 241.582C275.912 238.437 297.547 232.085 307.296 229.758Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M265.786 234.475C252.516 207.934 240.063 187.683 246.415 172.714C263.145 133.406 281.069 109.884 272.075 86.1733C272.075 86.1733 254.843 72.5255 253.774 93.3431C252.704 114.161 218.05 153.846 214.088 183.972C211.321 204.915 223.962 230.513 230.252 245.356C240.252 242.337 256.352 238.815 265.786 234.475Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M282.201 272.84H222.264C222.264 272.84 222.264 260.45 234.654 257.243C237.17 256.614 238.302 255.104 238.491 252.966H274.591C277.296 259.255 279.874 265.922 282.201 272.84Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M274.088 251.896C274.025 252.274 273.962 252.588 273.836 252.966C273.082 255.67 271.195 258.123 268.428 259.444C264.151 261.519 259.119 261.456 256.289 265.922C254.969 268.06 254.402 270.45 254.34 272.84H253.333C253.522 268.311 254.906 264.098 259.182 261.708C262.704 259.758 267.233 259.821 270.252 256.991C271.447 255.922 272.264 254.475 272.704 252.966C273.019 251.959 273.145 250.89 273.082 249.884C273.459 250.513 273.774 251.205 274.088 251.896Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M281.195 256.739C279.497 255.67 277.799 254.601 276.101 253.532C275.535 253.154 274.969 254.098 275.535 254.475C277.233 255.544 278.931 256.614 280.629 257.683C281.258 258.06 281.761 257.117 281.195 256.739Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M244.717 257.809C242.893 257.242 241.132 256.739 239.308 256.173C238.616 255.985 238.365 256.991 238.994 257.243C240.818 257.809 242.579 258.312 244.403 258.878C245.094 259.066 245.346 258.06 244.717 257.809Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M262.516 231.267C261.069 227.682 259.623 224.098 258.239 220.513C257.987 219.884 256.918 220.135 257.17 220.827C258.616 224.412 260.063 227.997 261.447 231.582C261.698 232.211 262.767 231.959 262.516 231.267Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M268.616 110.073C268.491 110.513 268.365 110.953 268.302 111.394C265.786 121.645 263.208 131.897 260.692 142.148C260.503 142.84 259.497 142.526 259.623 141.834C262.264 131.331 264.843 120.765 267.484 110.262C267.61 109.821 267.736 109.381 267.799 108.878C268.05 109.318 268.365 109.696 268.616 110.073Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M268.616 110.073C268.491 110.513 268.365 110.953 268.302 111.393C268.05 111.016 267.736 110.639 267.484 110.261C266.478 108.878 265.409 107.494 264.402 106.11C263.962 105.544 264.906 105.041 265.346 105.544C266.163 106.676 266.981 107.808 267.862 108.878C268.05 109.318 268.365 109.695 268.616 110.073Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M251.698 43.0913C238.994 45.7328 251.509 69.5693 253.836 93.3429L291.887 84.3492C291.887 84.3492 276.415 37.997 251.698 43.0913Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M251.384 79.8839C249.308 73.6574 247.296 67.4939 245.22 61.2675C245.031 60.6386 243.962 60.8901 244.151 61.582C246.226 67.8084 248.239 73.9719 250.314 80.1983C250.566 80.8273 251.572 80.5128 251.384 79.8839Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M332.075 57.431C322.39 48.3744 311.447 43.5945 299.811 41.2046C297.673 46.9908 295.723 52.9027 293.962 58.8147C295.66 59.3807 297.359 60.0096 298.994 60.6386C323.396 69.6323 326.667 87.1794 330.566 97.6197C334.528 108.06 322.642 122.777 326.604 124.538C330.566 126.362 336.289 113.028 336.289 113.028C336.289 113.028 334.843 135.481 337.736 136.173C340.377 136.865 341.698 131.016 342.264 126.488C342.076 130.764 342.327 136.047 344.906 135.859C347.17 135.67 347.862 131.456 347.987 127.494C348.365 130.764 349.245 133.909 351.384 134.098C354.088 134.349 353.962 128.626 353.522 124.349C354.277 128.123 355.66 132.777 358.05 131.896C362.075 130.513 353.962 77.8713 332.075 57.431Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M302.453 41.7707C300.314 47.7455 296.667 58.8147 295.157 64.9782C287.61 60.6386 279.245 57.1795 273.082 53.6575C265.723 49.5065 258.742 47.5569 254.717 46.3619C254.277 46.2361 253.836 46.1103 253.459 46.0474C251.572 45.5443 250.566 45.2298 250.566 45.2298L251.95 43.0286L253.459 40.5757C254.717 40.4499 255.912 40.3871 257.17 40.2613C272.704 38.9405 288.176 38.3745 302.453 41.7707Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M341.761 123.846C341.384 127.117 341.887 134.853 337.673 135.67C336.981 135.796 337.296 136.865 337.987 136.739C339.874 136.362 341.069 134.915 341.572 133.154C342.453 130.261 342.453 126.928 342.83 123.909C342.956 123.154 341.824 123.154 341.761 123.846Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M346.981 122.966C346.918 124.852 346.855 126.739 346.73 128.626C346.667 129.884 347.107 135.544 344.78 135.041C344.088 134.915 343.837 135.922 344.466 136.11C346.352 136.488 347.296 135.104 347.61 133.406C348.176 130.073 347.925 126.362 348.05 122.966C348.113 122.274 347.044 122.274 346.981 122.966Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M353.648 122.022C353.648 121.33 352.579 121.33 352.579 122.022C352.642 124.035 353.774 132.337 351.132 133.029C350.44 133.217 350.755 134.224 351.447 134.098C353.019 133.657 353.648 132.525 353.774 130.953C354.088 128.06 353.711 124.978 353.648 122.022Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M358.868 119.129C358.805 118.437 357.736 118.5 357.799 119.192C357.987 120.953 360.126 130.639 357.547 131.142C356.855 131.267 357.17 132.274 357.862 132.148C359.56 131.834 360 130.387 360 128.815C359.937 125.67 359.245 122.337 358.868 119.129Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M275.346 54.3493C274.088 53.8462 272.83 53.4059 271.635 52.9028C271.006 52.6512 270.692 53.7204 271.321 53.972C272.579 54.4751 273.836 54.9154 275.031 55.4185C275.723 55.6701 276.038 54.6009 275.346 54.3493Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M256.164 41.9592C254.277 37.4938 251.509 31.2045 251.132 31.1416L241.006 33.28C241.006 33.28 245.849 42.9655 248.113 47.5567C250.629 45.4812 253.333 43.6573 256.164 41.9592Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M252.704 28.4372C252.704 28.7517 252.642 29.0661 252.579 29.3806C252.516 29.6951 252.453 30.0095 252.39 30.2611C252.39 30.324 252.327 30.3869 252.327 30.4498C252.264 30.7013 252.201 30.9529 252.138 31.2045C250.943 35.041 247.862 38.0598 243.082 38.1856C233.899 38.3743 230.252 30.7013 231.384 24.412C232.138 20.1982 235.094 16.5504 239.937 16.173C240.126 16.173 240.377 16.1102 240.566 16.1102C245.031 16.0473 248.176 17.6825 250.189 20.0724C250.503 20.5127 250.818 20.9529 251.132 21.3932C251.321 21.7076 251.447 22.0221 251.635 22.3366C251.887 22.8397 252.075 23.3429 252.201 23.846C252.641 25.3554 252.83 26.9278 252.704 28.4372Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path d=\"M236.478 29.3179L238.679 34.9782L234.528 35.2298L236.478 29.3179Z\" fill=\"#002957\" />\n    <path\n      d=\"M239.182 28.0601L239.434 28.8148C239.686 29.4438 238.616 29.6953 238.365 29.0664L238.113 28.3117C237.924 27.6827 238.994 27.4312 239.182 28.0601Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M233.27 28.9406L233.522 29.6954C233.774 30.3243 232.704 30.5759 232.453 29.9469L232.201 29.1922C232.013 28.5004 233.082 28.2488 233.27 28.9406Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M247.044 27.1166C246.918 27.6827 246.855 28.3116 246.73 28.8776C246.604 29.5695 247.673 29.8839 247.736 29.1921C247.862 28.6261 247.924 27.9971 248.05 27.4311C248.176 26.7393 247.17 26.4877 247.044 27.1166Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M252.201 23.8461C252.013 23.343 251.824 22.8399 251.635 22.3367C251.509 22.0222 251.321 21.7078 251.132 21.3933C250.88 20.9531 250.566 20.5128 250.189 20.0726C248.176 17.6197 245.031 15.9845 240.566 16.1103C240.377 16.1103 240.126 16.1103 239.937 16.1732C238.491 16.299 234.465 16.9279 232.956 18.8147C228.616 20.1355 225.157 23.909 229.308 25.4814C232.453 26.8021 238.176 25.7958 240.88 24.4751C241.132 25.6072 242.83 28.7518 244.151 28.626C245.723 28.4373 245.472 26.6763 244.969 25.6072C244.906 25.4814 244.843 25.3556 244.78 25.2298C245.094 25.0411 245.409 24.8524 245.786 24.7267C247.925 23.7204 250.818 24.6638 251.509 27.1166C251.824 28.3744 251.698 29.7581 250.943 30.7015C250.88 30.8273 251.824 31.2046 252.138 31.2675C252.201 31.016 252.264 30.7644 252.327 30.5128C252.327 30.4499 252.327 30.387 252.39 30.3241C252.453 30.0097 252.516 29.7581 252.579 29.4436C252.642 29.1292 252.641 28.8147 252.704 28.5002C252.767 26.9279 252.641 25.3556 252.201 23.8461Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M257.17 40.2612L256.226 42.7141L254.78 46.3619L253.522 49.5694L251.635 54.4122L246.478 48.1858L244.151 45.4185C245.157 44.0348 246.226 42.777 247.421 41.6449L253.522 40.5757C254.717 40.4499 255.912 40.3241 257.17 40.2612Z\"\n      fill=\"#D4E8F7\"\n    />\n  </svg>\n</vl-empty-state>\n", styles: [":host{display:flex;height:100%}\n"], dependencies: [{ kind: "component", type: i3$1.EmptyStateComponent, selector: "vl-empty-state", inputs: ["primaryText", "secondaryText", "buttonLabel", "icon", "disabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vl-empty-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-empty-state\n  primaryText=\"No Orders in your Account\"\n  secondaryText=\"To proceed, go to the Shopping Cart from a Quote.\"\n>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"281\" viewBox=\"0 0 400 281\" fill=\"none\">\n    <path d=\"M264.214 26.9277H70.8805V128.186H264.214V26.9277Z\" fill=\"#0466C8\" />\n    <path\n      d=\"M143 56.5H136.217C128.166 64.4791 120.051 72.5209 112 80.5H118.783C126.834 72.5209 134.949 64.5419 143 56.5Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M242.932 57.5681V79.4319H128.575L133.724 74.2801L150.429 57.5681H242.932ZM244 56.5H149.989C142.014 64.4791 133.976 72.5209 126 80.5H244V56.5Z\"\n      fill=\"white\"\n    />\n    <path d=\"M129 56.5H81V80.5H104.969C112.958 72.5209 120.948 64.5419 129 56.5Z\" fill=\"white\" />\n    <path\n      d=\"M82.3 23.2016C82.2366 23.2016 82.1732 23.2644 82.1098 23.2644C81.3494 23.5785 80.5889 23.5785 79.8918 23.2644C79.765 23.2016 79.6383 23.1387 79.4482 23.0759C78.9412 22.7618 78.561 22.322 78.3075 21.7565C77.6104 20.2487 78.1173 18.6151 79.6383 17.8612C81.1592 17.1073 82.9971 17.547 83.6942 19.0549C84.3913 20.6256 83.8843 22.3848 82.3 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M92.2716 23.2016C92.2086 23.2016 92.1457 23.2644 92.0827 23.2644C91.3273 23.5785 90.5718 23.5785 89.8793 23.2644C89.7534 23.2016 89.6275 23.1387 89.4386 23.0759C88.935 22.7618 88.5573 22.322 88.3054 21.7565C87.6129 20.2487 88.1166 18.6151 89.6275 17.8612C91.1384 17.1073 92.9641 17.547 93.6566 19.0549C94.412 20.6256 93.9084 22.3848 92.2716 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M102.3 23.2016C102.237 23.2016 102.173 23.2644 102.11 23.2644C101.349 23.5785 100.589 23.5785 99.8918 23.2644C99.765 23.2016 99.6383 23.1387 99.4482 23.0759C98.9412 22.7618 98.561 22.322 98.3075 21.7565C97.6104 20.2487 98.1174 18.6151 99.6383 17.8612C101.159 17.1073 102.997 17.547 103.694 19.0549C104.391 20.6256 103.884 22.3848 102.3 23.2016Z\"\n      fill=\"#B4D1EF\"\n    />\n    <path\n      d=\"M210.126 91.0156H130.44C129.748 91.0156 129.748 92.0848 130.44 92.0848H210.126C210.818 92.0848 210.818 91.0156 210.126 91.0156Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M197.484 97.5566H142.013C141.321 97.5566 141.321 98.6258 142.013 98.6258H197.484C198.176 98.6258 198.176 97.5566 197.484 97.5566Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M229.436 35.5H61.5553C60.8149 35.5 60.8149 36.5 61.5553 36.5H229.503C230.176 36.5 230.176 35.5 229.436 35.5Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M270.44 35.3555H256.226C256.163 35.3555 256.163 36.4246 256.226 36.4246H270.44C270.503 36.4246 270.503 35.3555 270.44 35.3555Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M332.704 212.022C332.642 212.022 332.579 212.022 332.516 211.959L280.566 191.582C280.377 191.519 280.252 191.33 280.252 191.141C280.252 190.953 280.314 190.764 280.44 190.638C292.83 181.33 333.333 150.953 335.346 150.953C335.472 150.953 335.66 151.016 335.723 151.141C335.849 151.267 335.849 151.393 335.849 151.519L333.208 211.456C333.208 211.644 333.082 211.77 332.956 211.896C332.893 211.959 332.767 212.022 332.704 212.022ZM281.824 190.953L332.138 210.701L334.717 152.336C329.811 155.166 301.321 176.299 281.824 190.953Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M366.289 231.015C366.226 231.015 366.226 231.015 366.164 231.015L349.371 227.053C349.182 226.99 349.057 226.927 348.994 226.739C348.931 226.613 348.931 226.424 348.994 226.236L357.736 211.141C357.862 210.953 358.05 210.89 358.239 210.89C358.428 210.89 358.616 211.015 358.679 211.204C366.918 229.758 366.792 230.324 366.792 230.512C366.792 230.638 366.667 230.764 366.541 230.89C366.478 230.953 366.415 231.015 366.289 231.015ZM350.314 226.173L365.472 229.758C364.465 227.116 360.755 218.626 358.113 212.651L350.314 226.173Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M199.686 248.751C192.516 229.38 177.799 213.909 159.497 205.67V205.607C159.748 193.343 154.528 181.141 144.654 173.657C133.396 165.104 118.365 162.902 104.591 164.034C78.1132 166.236 53.0189 181.456 38.805 203.846C36.9811 206.739 35.3459 209.758 33.8365 212.839C33.522 213.468 34.4654 214.034 34.7799 213.405C45.4088 191.015 66.1635 174.16 90 167.682C113.711 161.267 146.981 164.726 156.226 191.519C157.736 195.921 158.491 200.575 158.428 205.229C150.943 201.959 142.893 199.946 134.465 199.254C121.447 198.248 103.522 199.506 95.283 211.204C91.761 216.236 90.8805 222.525 93.5849 228.122C96.2893 233.72 101.761 237.745 107.421 239.946C118.868 244.475 132.39 242.462 142.642 235.858C152.642 229.38 158.679 218.688 159.371 206.865C177.17 215.041 191.572 230.072 198.616 249.066C198.931 249.695 199.937 249.443 199.686 248.751ZM152.075 225.481C145.094 235.355 133.019 241.141 121.006 241.267C109.434 241.393 92.7044 234.6 93.0189 220.701C93.2076 213.217 98.9937 207.305 105.346 204.286C112.013 201.141 119.748 200.198 127.044 200.072C137.987 199.883 148.616 202.148 158.302 206.361C158.113 213.154 156.038 219.883 152.075 225.481Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M341.447 271.204H322.767C322.075 271.204 322.075 272.273 322.767 272.273H341.447C342.138 272.336 342.138 271.204 341.447 271.204Z\"\n      fill=\"#E5ECF4\"\n    />\n    <path\n      d=\"M233.522 75.4814C230.881 89.3179 229.245 103.154 224.025 110.576C213.962 124.915 185.975 137.117 178.428 143.972C170.881 150.764 171.95 151.142 173.019 152.588C173.648 153.469 177.862 151.771 181.132 150.261C177.421 152.211 172.579 155.23 173.711 157.242C174.654 159.003 178.679 157.808 182.201 156.362C178.994 158.123 175.786 160.387 176.981 161.959C178.365 163.783 183.585 161.897 187.107 160.387C184.088 162.022 180.314 164.475 181.635 166.299C183.774 169.192 235.849 149.758 245.157 120.702C248.805 109.318 250.881 94.6009 252.013 80.8274C245.786 79.3808 239.623 77.494 233.522 75.4814Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M182.327 148.437C179.497 150.576 176.226 151.645 172.704 151.582C172.013 151.582 172.013 152.651 172.704 152.651C176.415 152.714 179.937 151.582 182.893 149.318C183.396 148.941 182.893 147.997 182.327 148.437Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M184.906 154.852C183.27 155.607 181.635 156.173 179.937 156.676C178.302 157.117 175.723 158.06 174.151 157.117C173.522 156.802 173.019 157.683 173.585 158.06C175.157 158.94 176.918 158.5 178.553 158.123C180.943 157.62 183.145 156.802 185.346 155.796C186.101 155.481 185.535 154.538 184.906 154.852Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M186.163 158.185C184.277 159.946 180.189 163.217 177.421 161.833C176.792 161.519 176.226 162.462 176.855 162.777C180.252 164.412 184.528 161.141 186.855 158.94C187.421 158.437 186.667 157.682 186.163 158.185Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M253.522 46.0474C253.522 47.1166 253.522 48.3115 253.522 49.6323C253.459 57.3052 253.145 69.1291 252.013 81.6449C251.95 82.148 251.95 82.6512 251.887 83.1543C245.472 82.148 236.981 79.2549 230.629 78.1857C232.893 65.7958 237.736 54.2864 244.151 45.4185C245.157 44.0348 246.226 42.7769 247.421 41.6449L253.522 40.5757C253.522 40.5757 253.522 41.3933 253.585 42.8398C253.522 43.6574 253.522 44.7266 253.522 46.0474Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M184.687 136.932C179.875 137.121 175.253 138.637 170.631 139.837C165.565 141.101 160.5 142.174 155.371 143.122C134.602 146.975 113.264 148.238 92.1786 146.849C74.7659 145.712 55.3904 142.238 43.2332 128.531C32.469 116.403 28.9865 98.1477 34.9384 82.9879C40.7638 68.0807 55.3271 57.6583 70.9668 55.5738V54.5C58.6197 56.0792 46.969 62.7748 39.4341 72.755C29.9996 85.325 28.6066 102.317 34.6218 116.719C41.0804 132.257 55.2004 141.227 71.1568 145.017C80.2747 147.165 89.6458 147.923 98.9537 148.302C109.718 148.744 120.545 148.428 131.246 147.544C143.087 146.533 154.801 144.638 166.388 142.048C172.403 140.658 178.545 138.321 184.687 138.132C190.576 137.942 197.604 140.974 197.921 147.607C197.984 148.302 199.061 148.302 198.997 147.607C198.617 140.216 191.209 136.679 184.687 136.932Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M190 164.091V172.909C190 173.697 191 173.697 191 172.909V164.091C191 163.303 190 163.303 190 164.091Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M199 164.037V172.963C199 173.679 200 173.679 200 172.963V164.037C200 163.321 199 163.321 199 164.037Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M182 166.5V155.275C182 148.205 187.792 142.5 194.969 142.5C202.145 142.5 207.937 148.205 207.937 155.275L208 166.5H182Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M209.483 165.5H180.517C179.828 165.5 179.828 166.5 180.517 166.5H209.483C210.172 166.5 210.172 165.5 209.483 165.5Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M203.711 151.519V161.582C203.711 162.274 204.78 162.274 204.78 161.582V151.519C204.843 150.827 203.711 150.827 203.711 151.519Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M196.73 134.601C187.421 142.148 183.648 152.274 187.233 153.343C190.818 154.412 203.208 135.67 203.208 135.67L196.73 134.601Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M199.748 139.632C196.855 144.098 193.396 148.374 189.182 151.708L188.239 152.399C187.358 152.84 186.352 152.148 186.478 150.953C186.541 150.45 187.233 149.066 187.421 148.689C187.925 147.557 188.491 146.425 189.057 145.292C190.377 142.777 191.824 140.387 193.459 138.06C193.836 137.494 192.893 136.928 192.516 137.494C191.195 139.443 181.824 152.399 186.855 153.594C189.245 154.16 191.824 150.827 193.27 149.381C196.038 146.55 198.491 143.469 200.692 140.135C201.069 139.569 200.126 139.066 199.748 139.632Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M211.132 135.984C207.736 139.003 203.648 140.89 199.057 141.33C198.365 141.393 198.365 142.462 199.057 142.399C203.899 141.896 208.239 139.947 211.887 136.739C212.39 136.299 211.635 135.544 211.132 135.984Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M238.176 254.224C250.692 253.783 263.208 255.607 275.723 255.796C275.157 254.475 274.654 253.217 274.088 251.897C273.774 251.205 273.459 250.513 273.145 249.821C270.377 243.658 267.484 237.809 264.717 232.274C254.906 235.859 245.031 239.129 234.843 241.331C237.547 246.928 239.12 251.393 238.176 254.224Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M273.899 253.595C276.101 253.783 278.365 253.783 280.566 253.72C284.717 253.658 288.805 253.72 292.956 253.72C299.12 253.783 305.283 253.532 311.384 253.091C307.17 244.161 302.767 235.796 298.553 228.06C289.057 230.639 279.56 232.966 269.937 235.104C273.145 242.525 275.031 249.003 273.899 253.595Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M274.214 250.828C273.836 255.104 271.069 257.997 267.107 259.57C256.352 263.909 259.937 272.84 259.937 272.84H319.874C316.918 265.167 313.648 257.809 310.314 250.765H274.214V250.828Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M307.296 229.758C293.459 203.783 276.289 186.299 281.447 173.72C297.233 135.419 300.818 107.997 291.887 84.3494L267.484 80.0098C267.484 80.0098 269.623 91.5192 268.553 112.337C267.484 133.154 252.201 152.022 250.252 182.337C249.182 199.129 259.937 225.985 266.415 241.582C275.912 238.437 297.547 232.085 307.296 229.758Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M265.786 234.475C252.516 207.934 240.063 187.683 246.415 172.714C263.145 133.406 281.069 109.884 272.075 86.1733C272.075 86.1733 254.843 72.5255 253.774 93.3431C252.704 114.161 218.05 153.846 214.088 183.972C211.321 204.915 223.962 230.513 230.252 245.356C240.252 242.337 256.352 238.815 265.786 234.475Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M282.201 272.84H222.264C222.264 272.84 222.264 260.45 234.654 257.243C237.17 256.614 238.302 255.104 238.491 252.966H274.591C277.296 259.255 279.874 265.922 282.201 272.84Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M274.088 251.896C274.025 252.274 273.962 252.588 273.836 252.966C273.082 255.67 271.195 258.123 268.428 259.444C264.151 261.519 259.119 261.456 256.289 265.922C254.969 268.06 254.402 270.45 254.34 272.84H253.333C253.522 268.311 254.906 264.098 259.182 261.708C262.704 259.758 267.233 259.821 270.252 256.991C271.447 255.922 272.264 254.475 272.704 252.966C273.019 251.959 273.145 250.89 273.082 249.884C273.459 250.513 273.774 251.205 274.088 251.896Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M281.195 256.739C279.497 255.67 277.799 254.601 276.101 253.532C275.535 253.154 274.969 254.098 275.535 254.475C277.233 255.544 278.931 256.614 280.629 257.683C281.258 258.06 281.761 257.117 281.195 256.739Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M244.717 257.809C242.893 257.242 241.132 256.739 239.308 256.173C238.616 255.985 238.365 256.991 238.994 257.243C240.818 257.809 242.579 258.312 244.403 258.878C245.094 259.066 245.346 258.06 244.717 257.809Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M262.516 231.267C261.069 227.682 259.623 224.098 258.239 220.513C257.987 219.884 256.918 220.135 257.17 220.827C258.616 224.412 260.063 227.997 261.447 231.582C261.698 232.211 262.767 231.959 262.516 231.267Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M268.616 110.073C268.491 110.513 268.365 110.953 268.302 111.394C265.786 121.645 263.208 131.897 260.692 142.148C260.503 142.84 259.497 142.526 259.623 141.834C262.264 131.331 264.843 120.765 267.484 110.262C267.61 109.821 267.736 109.381 267.799 108.878C268.05 109.318 268.365 109.696 268.616 110.073Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M268.616 110.073C268.491 110.513 268.365 110.953 268.302 111.393C268.05 111.016 267.736 110.639 267.484 110.261C266.478 108.878 265.409 107.494 264.402 106.11C263.962 105.544 264.906 105.041 265.346 105.544C266.163 106.676 266.981 107.808 267.862 108.878C268.05 109.318 268.365 109.695 268.616 110.073Z\"\n      fill=\"white\"\n    />\n    <path\n      d=\"M251.698 43.0913C238.994 45.7328 251.509 69.5693 253.836 93.3429L291.887 84.3492C291.887 84.3492 276.415 37.997 251.698 43.0913Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M251.384 79.8839C249.308 73.6574 247.296 67.4939 245.22 61.2675C245.031 60.6386 243.962 60.8901 244.151 61.582C246.226 67.8084 248.239 73.9719 250.314 80.1983C250.566 80.8273 251.572 80.5128 251.384 79.8839Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M332.075 57.431C322.39 48.3744 311.447 43.5945 299.811 41.2046C297.673 46.9908 295.723 52.9027 293.962 58.8147C295.66 59.3807 297.359 60.0096 298.994 60.6386C323.396 69.6323 326.667 87.1794 330.566 97.6197C334.528 108.06 322.642 122.777 326.604 124.538C330.566 126.362 336.289 113.028 336.289 113.028C336.289 113.028 334.843 135.481 337.736 136.173C340.377 136.865 341.698 131.016 342.264 126.488C342.076 130.764 342.327 136.047 344.906 135.859C347.17 135.67 347.862 131.456 347.987 127.494C348.365 130.764 349.245 133.909 351.384 134.098C354.088 134.349 353.962 128.626 353.522 124.349C354.277 128.123 355.66 132.777 358.05 131.896C362.075 130.513 353.962 77.8713 332.075 57.431Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M302.453 41.7707C300.314 47.7455 296.667 58.8147 295.157 64.9782C287.61 60.6386 279.245 57.1795 273.082 53.6575C265.723 49.5065 258.742 47.5569 254.717 46.3619C254.277 46.2361 253.836 46.1103 253.459 46.0474C251.572 45.5443 250.566 45.2298 250.566 45.2298L251.95 43.0286L253.459 40.5757C254.717 40.4499 255.912 40.3871 257.17 40.2613C272.704 38.9405 288.176 38.3745 302.453 41.7707Z\"\n      fill=\"#F2F7FC\"\n    />\n    <path\n      d=\"M341.761 123.846C341.384 127.117 341.887 134.853 337.673 135.67C336.981 135.796 337.296 136.865 337.987 136.739C339.874 136.362 341.069 134.915 341.572 133.154C342.453 130.261 342.453 126.928 342.83 123.909C342.956 123.154 341.824 123.154 341.761 123.846Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M346.981 122.966C346.918 124.852 346.855 126.739 346.73 128.626C346.667 129.884 347.107 135.544 344.78 135.041C344.088 134.915 343.837 135.922 344.466 136.11C346.352 136.488 347.296 135.104 347.61 133.406C348.176 130.073 347.925 126.362 348.05 122.966C348.113 122.274 347.044 122.274 346.981 122.966Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M353.648 122.022C353.648 121.33 352.579 121.33 352.579 122.022C352.642 124.035 353.774 132.337 351.132 133.029C350.44 133.217 350.755 134.224 351.447 134.098C353.019 133.657 353.648 132.525 353.774 130.953C354.088 128.06 353.711 124.978 353.648 122.022Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M358.868 119.129C358.805 118.437 357.736 118.5 357.799 119.192C357.987 120.953 360.126 130.639 357.547 131.142C356.855 131.267 357.17 132.274 357.862 132.148C359.56 131.834 360 130.387 360 128.815C359.937 125.67 359.245 122.337 358.868 119.129Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M275.346 54.3493C274.088 53.8462 272.83 53.4059 271.635 52.9028C271.006 52.6512 270.692 53.7204 271.321 53.972C272.579 54.4751 273.836 54.9154 275.031 55.4185C275.723 55.6701 276.038 54.6009 275.346 54.3493Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M256.164 41.9592C254.277 37.4938 251.509 31.2045 251.132 31.1416L241.006 33.28C241.006 33.28 245.849 42.9655 248.113 47.5567C250.629 45.4812 253.333 43.6573 256.164 41.9592Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path\n      d=\"M252.704 28.4372C252.704 28.7517 252.642 29.0661 252.579 29.3806C252.516 29.6951 252.453 30.0095 252.39 30.2611C252.39 30.324 252.327 30.3869 252.327 30.4498C252.264 30.7013 252.201 30.9529 252.138 31.2045C250.943 35.041 247.862 38.0598 243.082 38.1856C233.899 38.3743 230.252 30.7013 231.384 24.412C232.138 20.1982 235.094 16.5504 239.937 16.173C240.126 16.173 240.377 16.1102 240.566 16.1102C245.031 16.0473 248.176 17.6825 250.189 20.0724C250.503 20.5127 250.818 20.9529 251.132 21.3932C251.321 21.7076 251.447 22.0221 251.635 22.3366C251.887 22.8397 252.075 23.3429 252.201 23.846C252.641 25.3554 252.83 26.9278 252.704 28.4372Z\"\n      fill=\"#D4E8F7\"\n    />\n    <path d=\"M236.478 29.3179L238.679 34.9782L234.528 35.2298L236.478 29.3179Z\" fill=\"#002957\" />\n    <path\n      d=\"M239.182 28.0601L239.434 28.8148C239.686 29.4438 238.616 29.6953 238.365 29.0664L238.113 28.3117C237.924 27.6827 238.994 27.4312 239.182 28.0601Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M233.27 28.9406L233.522 29.6954C233.774 30.3243 232.704 30.5759 232.453 29.9469L232.201 29.1922C232.013 28.5004 233.082 28.2488 233.27 28.9406Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M247.044 27.1166C246.918 27.6827 246.855 28.3116 246.73 28.8776C246.604 29.5695 247.673 29.8839 247.736 29.1921C247.862 28.6261 247.924 27.9971 248.05 27.4311C248.176 26.7393 247.17 26.4877 247.044 27.1166Z\"\n      fill=\"#0466C8\"\n    />\n    <path\n      d=\"M252.201 23.8461C252.013 23.343 251.824 22.8399 251.635 22.3367C251.509 22.0222 251.321 21.7078 251.132 21.3933C250.88 20.9531 250.566 20.5128 250.189 20.0726C248.176 17.6197 245.031 15.9845 240.566 16.1103C240.377 16.1103 240.126 16.1103 239.937 16.1732C238.491 16.299 234.465 16.9279 232.956 18.8147C228.616 20.1355 225.157 23.909 229.308 25.4814C232.453 26.8021 238.176 25.7958 240.88 24.4751C241.132 25.6072 242.83 28.7518 244.151 28.626C245.723 28.4373 245.472 26.6763 244.969 25.6072C244.906 25.4814 244.843 25.3556 244.78 25.2298C245.094 25.0411 245.409 24.8524 245.786 24.7267C247.925 23.7204 250.818 24.6638 251.509 27.1166C251.824 28.3744 251.698 29.7581 250.943 30.7015C250.88 30.8273 251.824 31.2046 252.138 31.2675C252.201 31.016 252.264 30.7644 252.327 30.5128C252.327 30.4499 252.327 30.387 252.39 30.3241C252.453 30.0097 252.516 29.7581 252.579 29.4436C252.642 29.1292 252.641 28.8147 252.704 28.5002C252.767 26.9279 252.641 25.3556 252.201 23.8461Z\"\n      fill=\"#002957\"\n    />\n    <path\n      d=\"M257.17 40.2612L256.226 42.7141L254.78 46.3619L253.522 49.5694L251.635 54.4122L246.478 48.1858L244.151 45.4185C245.157 44.0348 246.226 42.777 247.421 41.6449L253.522 40.5757C254.717 40.4499 255.912 40.3241 257.17 40.2612Z\"\n      fill=\"#D4E8F7\"\n    />\n  </svg>\n</vl-empty-state>\n", styles: [":host{display:flex;height:100%}\n"] }]
-        }] });
-
-class EmptyAccountModule {
-}
-EmptyAccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EmptyAccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountModule, declarations: [EmptyAccountComponent], imports: [CommonModule, PreviewModule, LoaderModule, EmptyStateModule], exports: [EmptyAccountComponent] });
-EmptyAccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountModule, imports: [CommonModule, PreviewModule, LoaderModule, EmptyStateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EmptyAccountModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [EmptyAccountComponent],
-                    imports: [CommonModule, PreviewModule, LoaderModule, EmptyStateModule],
-                    exports: [EmptyAccountComponent],
-                }]
-        }] });
-
-class LegacyProductComponent {
-    constructor(route, quoteDraftService, quoteApiService, contextService, runtimeContextService, runtimeService, currentStateService, customizationService) {
-        this.route = route;
-        this.quoteDraftService = quoteDraftService;
-        this.quoteApiService = quoteApiService;
-        this.contextService = contextService;
-        this.runtimeContextService = runtimeContextService;
-        this.runtimeService = runtimeService;
-        this.currentStateService = currentStateService;
-        this.customizationService = customizationService;
-        this.destroyed$ = new Subject();
-    }
-    ngOnInit() {
-        this.quoteDraftService.quoteDraft$
-            .pipe(first$1(), takeUntil$1(this.destroyed$))
-            .subscribe(quote => this.init(quote, this.route.snapshot.queryParams));
-        this.runtimeService.onSolutionStopEvent.pipe(take(1)).subscribe(lineItem => this.onSolutionStop(lineItem));
-        this.runtimeService.onSolutionReadyEvent.pipe(take(1)).subscribe(event => this.onSolutionReady(event));
-        this.runtimeService.onSolutionCancelEvent.pipe(take(1)).subscribe(() => this.onSolutionCancel());
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    onSolutionReady(lineItem) {
-        lineItem.actionCode = lineItem.actionCode ?? 'ADD';
-    }
-    onSolutionCancel() {
-        this.quoteDraftService.quoteDraft$.pipe(first$1(), takeUntil$1(this.destroyed$)).subscribe(quote => {
-            window['VELO_BACK_FN'].apply(null, [quote.quoteId]);
-        });
-    }
-    onSolutionUpdated(lineItem) {
-        const states = {
-            configurableRamp: lineItem,
-            currentState: this.currentStateService.currentState,
-            asset: this.getAsset(lineItem),
-        };
-        this.runtimeService.updateRuntime(states);
-    }
-    onSolutionStop(lineItem) {
-        this.quoteDraftService.quoteDraft$.pipe(first$1(), takeUntil$1(this.destroyed$)).subscribe(quote => {
-            const quoteToUpsert = {
-                ...quote,
-                context: this.contextService.resolve(),
-                currentState: [...(this.currentStateService.currentState || []).filter(li => li.id !== lineItem.id), lineItem],
-            };
-            this.quoteApiService
-                .upsertQuote(quoteToUpsert)
-                .pipe(take(1))
-                .subscribe(quote => {
-                window['VELO_BACK_FN'].apply(null, [quote.quoteId]);
-            });
-        });
-    }
-    init(quote, queryParams) {
-        const productId = queryParams['productId'];
-        const lineItemId = this.getLineItemId(quote, queryParams);
-        this.assets = quote.initialState;
-        lineItemId && quote.currentState ? this.reConfigure(lineItemId, quote.currentState) : this.configure(productId);
-    }
-    getLineItemId(quote, queryParams) {
-        if (EntityUtil.isPresent(queryParams['lineItemId'])) {
-            return queryParams['lineItemId'];
-        }
-        return quote.currentState
-            .filter(lineItem => lineItem.productId === queryParams['productId'])
-            .map(lineItem => lineItem.id)
-            .find(id => id);
-    }
-    configure(productId) {
-        const runtimeContext = this.getRuntimeContext(productId, '', RuntimeOperation.INIT);
-        this.startRuntime({}, runtimeContext);
-    }
-    reConfigure(lineItemId, currentState) {
-        const currentStateItem = EntityUtil.findById(lineItemId, currentState);
-        const runtimeContext = this.getRuntimeContext(currentStateItem.productId, currentStateItem.offeringId, RuntimeOperation.UPDATE);
-        const states = {
-            configurableRamp: currentStateItem,
-            currentState,
-            asset: this.getAsset(currentStateItem),
-        };
-        this.currentStateService.update(currentState);
-        this.startRuntime(states, runtimeContext);
-    }
-    getAsset(lineItem) {
-        return this.assets && this.assets.find(a => a.id === lineItem.openOrderLineItemId || a.id === lineItem.assetId);
-    }
-    startRuntime(states, runtimeContext$) {
-        runtimeContext$
-            .pipe(take(1), map$1(runtimeContext => {
-            this.runtimeService.startRuntime(runtimeContext, states);
-        }))
-            .subscribe();
-    }
-    customizeContext(productId, context) {
-        if (!this.customizationService?.getLegacyUiDefinition) {
-            return of(context);
-        }
-        return this.customizationService.getLegacyUiDefinition(productId).pipe(map$1(uiDefinitionContainer => ({
-            ...context,
-            uiDefinitionContainer: uiDefinitionContainer ?? undefined,
-        })));
-    }
-    getRuntimeContext(productId, offeringId, runtimeOperation) {
-        return this.runtimeContextService.getRuntimeContext(productId, offeringId).pipe(map$1(runtimeContext => {
-            runtimeContext.invocationContext = { runtimeOperation: RuntimeOperation[runtimeOperation] };
-            return runtimeContext;
-        }), switchMap$1(runtimeContext => this.customizeContext(productId, runtimeContext)));
-    }
-}
-LegacyProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$1.QuoteDraftService }, { token: i2.QuoteApiService }, { token: i1$1.ContextService }, { token: i4$1.RuntimeContextService }, { token: i4$1.RuntimeService }, { token: i4$1.CurrentStateService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LegacyProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LegacyProductComponent, selector: "ng-component", ngImport: i0, template: "<vl-runtime #runtimeView (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: i4$1.RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<vl-runtime #runtimeView (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{display:block;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1$1.QuoteDraftService }, { type: i2.QuoteApiService }, { type: i1$1.ContextService }, { type: i4$1.RuntimeContextService }, { type: i4$1.RuntimeService }, { type: i4$1.CurrentStateService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FLOW_CUSTOMIZATION]
-                }] }]; } });
-
-class LegacyProductModule {
-}
-LegacyProductModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LegacyProductModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductModule, declarations: [LegacyProductComponent], imports: [CommonModule, RuntimeModule], exports: [LegacyProductComponent] });
-LegacyProductModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductModule, imports: [CommonModule, RuntimeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LegacyProductModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [LegacyProductComponent],
-                    imports: [CommonModule, RuntimeModule],
-                    exports: [LegacyProductComponent],
-                }]
-        }] });
-
 class ProductComponent {
-    constructor(contextService, configurationRuntimeService, configurationService, configurationState, quoteDraftService, integrationState, customizationService) {
+    constructor(contextService, configurationRuntimeService, configurationService, configurationStateService, quoteDraftService, flowInfoService, flowStateService, integrationState, customizationService) {
         this.contextService = contextService;
         this.configurationRuntimeService = configurationRuntimeService;
         this.configurationService = configurationService;
-        this.configurationState = configurationState;
+        this.configurationStateService = configurationStateService;
         this.quoteDraftService = quoteDraftService;
+        this.flowInfoService = flowInfoService;
+        this.flowStateService = flowStateService;
         this.integrationState = integrationState;
         this.customizationService = customizationService;
         this.uiDefinition$ = new BehaviorSubject(undefined);
@@ -2193,22 +1449,32 @@ class ProductComponent {
         }));
     }
     init$() {
-        return this.quoteDraftService.quoteDraft$.pipe(first(), switchMap(quote => {
+        let quoteDraft$;
+        if (this.flowInfoService.isLegacy || !this.flowInfoService.isStateful) {
+            quoteDraft$ = this.quoteDraftService.quoteDraft$;
+        }
+        else {
+            quoteDraft$ = of(undefined);
+        }
+        return quoteDraft$.pipe(first(), switchMap(quote => {
             const contextProperties = this.contextService.resolve().properties;
             const productId = contextProperties.productId;
             if (!productId) {
                 throw new Error(`Unable to start configuration for 'productId == null'`);
             }
-            const lineItemId = this.getLineItemId(quote, productId, contextProperties.lineItemId);
-            const currentStateItem = quote.currentState.find(({ id }) => id === lineItemId);
-            if (currentStateItem) {
-                this.configurationService.setConfigurableRamp(currentStateItem);
+            if (!quote) {
+                const offeringId = contextProperties.offeringId;
+                return this.configurationRuntimeService.init({ productId, offeringId });
+            }
+            const lineItem = this.getLineItem(quote, productId, contextProperties.lineItemId);
+            if (lineItem) {
+                this.configurationService.setConfigurableRamp(lineItem);
             }
-            const { offeringId } = currentStateItem ?? {};
+            const { offeringId } = lineItem ?? {};
             return this.configurationRuntimeService.init({ productId, offeringId });
         }), switchMap(() => this.customizeUI$()), tap(() => {
             const uiDefinition = this.configurationRuntimeService.runtimeContext?.uiDefinitionContainer?.source;
-            if (uiDefinition && !isLegacyUIDefinition(uiDefinition)) {
+            if (uiDefinition) {
                 this.uiDefinition$.next(uiDefinition);
             }
             else {
@@ -2219,23 +1485,27 @@ class ProductComponent {
                 this.configurationRuntimeService.initializationProps.attributesMap =
                     this.integrationState.state.guidedSelling;
             }
-        }), switchMap(() => this.configurationState.init$()));
+        }), switchMap(() => this.configurationStateService.init$()));
     }
-    getLineItemId(quote, productId, lineItemId) {
+    getLineItem(quote, productId, lineItemId) {
         // search by lineItemId first
-        let id = quote.currentState.find(li => li.id === lineItemId)?.id;
-        if (!id && this.quoteDraftService.isStandalone) {
-            id = quote.currentState.find(li => li.productId === productId)?.id;
+        let li = quote.currentState.find(li => li.id === lineItemId);
+        if (!li && this.quoteDraftService.isStandalone) {
+            li = quote.currentState.find(li => li.productId === productId);
         }
-        return id;
+        // If still not found, is could be an asset
+        if (!li) {
+            li = this.quoteDraftService.assetsState?.currentState.find(li => li.id === lineItemId);
+        }
+        return li;
     }
 }
-ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i1$1.ConfigurationState }, { token: i1$1.QuoteDraftService }, { token: i5.IntegrationState }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i2.ContextService }, { token: i2.ConfigurationRuntimeService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: i2.QuoteDraftService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }, { token: i2.IntegrationState }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<vl-cms-preview [uiDefinition]=\"$any(uiDefinition$ | async)\" [config]=\"config\"></vl-cms-preview>\n", styles: [""], dependencies: [{ kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-cms-preview [uiDefinition]=\"$any(uiDefinition$ | async)\" [config]=\"config\"></vl-cms-preview>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i1$1.ConfigurationState }, { type: i1$1.QuoteDraftService }, { type: i5.IntegrationState }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.ContextService }, { type: i2.ConfigurationRuntimeService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: i2.QuoteDraftService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }, { type: i2.IntegrationState }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -2261,19 +1531,22 @@ class RecordNotFoundComponent {
         this.router = router;
         this.route = route;
         this.subMessage = '';
+        this.type = '';
         const navigation = this.router.getCurrentNavigation();
         const { state } = navigation?.extras || {};
         this.message = state?.['message'];
+        this.type = state?.['type'] || '';
+        this.details = state?.['details'];
         if (typeof this.message === 'string') {
             this.subMessage = this.message.includes('/describe') ? 'A potential problem with permissions' : '';
         }
     }
 }
 RecordNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RecordNotFoundComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", styles: [":host{display:block;padding:24px 54px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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 *ngIf=\"message; else defaultMessage\">\n        <p class=\"text message-text\" [class]=\"type\">{{ message }}</p>\n\n        <p *ngIf=\"subMessage\" class=\"text\">{{ subMessage }}</p>\n\n        <div *ngIf=\"details && details.length > 0\">\n          <div *ngFor=\"let detail of details\" class=\"text\">{{ detail }}</div>\n        </div>\n      </div>\n\n      <ng-template #defaultMessage>Record not found</ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}:host .text{white-space:pre-line;word-break:break-word}:host .message-text.error{color:var(--vl-error-text-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RecordNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-record-not-found', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [":host{display:block;padding:24px 54px}\n"] }]
+            args: [{ selector: 'vl-flow-record-not-found', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row\">\n  <div class=\"col-md-12\">\n    <div class=\"message-wrapper\">\n      <div *ngIf=\"message; else defaultMessage\">\n        <p class=\"text message-text\" [class]=\"type\">{{ message }}</p>\n\n        <p *ngIf=\"subMessage\" class=\"text\">{{ subMessage }}</p>\n\n        <div *ngIf=\"details && details.length > 0\">\n          <div *ngFor=\"let detail of details\" class=\"text\">{{ detail }}</div>\n        </div>\n      </div>\n\n      <ng-template #defaultMessage>Record not found</ng-template>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}:host .text{white-space:pre-line;word-break:break-word}:host .message-text.error{color:var(--vl-error-text-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }]; } });
 
 const routes = [{ path: '', component: RecordNotFoundComponent }];
@@ -2335,9 +1608,8 @@ class RemoteComponent {
         this.runtimeService
             .init({ productId })
             .pipe(first(), tap(context => {
-            const uiDefinitionProperties = getUIDefinitionProperties(context.uiDefinitionContainer);
-            const uiDefinition = context.uiDefinitionContainer?.source;
-            this.uiDefinition = uiDefinition && !isLegacyUIDefinition(uiDefinition) ? uiDefinition : undefined;
+            const uiDefinitionProperties = context.uiDefinitionContainer?.source.properties ?? {};
+            this.uiDefinition = context.uiDefinitionContainer?.source;
             const pricingEnabled = uiDefinitionProperties.pricingEnabled ? 'true' : 'false';
             const priceListId = uiDefinitionProperties.priceList;
             const runtimeContextProperties = this.runtimeService.runtimeContext?.properties;
@@ -2395,7 +1667,7 @@ class RemoteComponent {
             let items = [lineItem];
             for (let i = 0; i < items.length; i++) {
                 const item = items[i];
-                const children = options.get(item.id);
+                const children = item && options.get(item.id);
                 if (children) {
                     item.lineItems = children;
                     items = items.concat(children);
@@ -2468,7 +1740,7 @@ class RemoteComponent {
                 if (rootOption) {
                     const featureOptions = optionConfigurations[rootOption.featureName] ?? (optionConfigurations[rootOption.featureName] = []);
                     const originOption = !rootOption.hasChildren
-                        ? optionConfigurations[rootOption.featureName].find(({ optionId }) => optionId === rootOption.optionId)
+                        ? optionConfigurations[rootOption.featureName]?.find(({ optionId }) => optionId === rootOption.optionId)
                         : undefined;
                     const option = originOption ?? {};
                     option.optionId = option.optionId ?? rootOption.optionId;
@@ -2521,8 +1793,9 @@ class RemoteComponent {
             }
         }
         for (const option of notBundleOptions) {
-            if (bundleOptionsByOptionId[option.configuredProductId]) {
-                bundleOptionsByOptionId[option.configuredProductId].hasChildren = true;
+            const bundleOption = bundleOptionsByOptionId[option.configuredProductId];
+            if (bundleOption) {
+                bundleOption.hasChildren = true;
             }
         }
     }
@@ -2530,7 +1803,7 @@ class RemoteComponent {
         let items = lineItem.lineItems ?? [];
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
-            if (item.lineItems) {
+            if (item?.lineItems) {
                 items = items.concat(item.lineItems.map(li => ({ ...li, parentLineItem: item })));
             }
         }
@@ -2596,7 +1869,7 @@ class RemoteComponent {
             .forEach(mapping => {
             const attribute = lineItem.attributes.find(a => a.name === mapping.name);
             if (attribute) {
-                new Set(mapping.properties[propertyName].split(',')).forEach(k => (result[k] = attribute.value));
+                new Set(mapping.properties[propertyName]?.split(',')).forEach(k => (result[k] = attribute.value));
             }
         });
         return result;
@@ -2612,12 +1885,12 @@ class RemoteComponent {
         return optionConfigurations;
     }
 }
-RemoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i1$1.ConfigurationRuntimeService }, { token: i1$1.ConfigurationService }, { token: i1$1.ConfigurationState }, { token: i8.MessageService }, { token: i5.IntegrationState }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-RemoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RemoteComponent, selector: "vl-flow-remote", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RemoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteComponent, deps: [{ token: i2.ContextService }, { token: i2.QuoteDraftService }, { token: i2.ConfigurationRuntimeService }, { token: i2.ConfigurationService }, { token: i2.ConfigurationStateService }, { token: i2$2.MessageService }, { token: i2.IntegrationState }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
+RemoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RemoteComponent, selector: "vl-flow-remote", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RemoteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-remote', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i1$1.ConfigurationRuntimeService }, { type: i1$1.ConfigurationService }, { type: i1$1.ConfigurationState }, { type: i8.MessageService }, { type: i5.IntegrationState }, { type: i4.Location }]; } });
+        }], ctorParameters: function () { return [{ type: i2.ContextService }, { type: i2.QuoteDraftService }, { type: i2.ConfigurationRuntimeService }, { type: i2.ConfigurationService }, { type: i2.ConfigurationStateService }, { type: i2$2.MessageService }, { type: i2.IntegrationState }, { type: i4.Location }]; } });
 
 class RemoteModule {
 }
@@ -2634,17 +1907,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class ShoppingCartComponent {
-    constructor(templatesApi, contextService, cdr, toastService, customizationService) {
+    constructor(templatesApi, cdr, toastService, flowInfo, customizationService) {
         this.templatesApi = templatesApi;
-        this.contextService = contextService;
         this.cdr = cdr;
         this.toastService = toastService;
+        this.flowInfo = flowInfo;
         this.customizationService = customizationService;
         this.uiDefinition = undefined;
         this.state$ = new BehaviorSubject({ loading: true, failure: false });
         this.templateApiName = '';
         this.destroyed$ = new Subject();
-        this.templateApiName = this.contextService.resolve().properties.cartTemplateApiName ?? '';
+        this.templateApiName = this.flowInfo.flow?.properties.templates?.shoppingCart ?? '';
     }
     ngOnInit() {
         this.generateUIDefinition$()
@@ -2655,7 +1928,7 @@ class ShoppingCartComponent {
             this.uiDefinition = uiDef;
             this.state$.next({ loading: false, failure: false });
         }), catchError(err => {
-            const message = 'Failed to resolve Shopping cart component. ' + (err.message ?? '');
+            const message = 'Failed to resolve Shopping Cart component. ' + (err.message ?? '');
             this.toastService.add({ severity: ToastType.error, summary: message, sticky: true });
             this.uiDefinition = undefined;
             this.state$.next({ loading: false, failure: true });
@@ -2667,37 +1940,36 @@ class ShoppingCartComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
-    getTemplateRootComponent$(template) {
-        return this.templatesApi
-            .fetchComponents$(template.id)
-            .pipe(map(components => components.find(c => c.type === UITemplateComponentType.ROOT) ?? undefined));
-    }
-    getLocalShoppingCartComponentMeta$() {
-        if (!this.customizationService?.getShoppingCartComponent) {
+    getLocalMeta$() {
+        if (!this.customizationService?.getTemplateComponents) {
             return of(undefined);
         }
-        return this.customizationService?.getShoppingCartComponent(this.templateApiName).pipe(map(component => {
-            if (!component) {
+        return this.customizationService?.getTemplateComponents(this.templateApiName).pipe(map(components => {
+            if (!components) {
                 return;
             }
-            return {
+            return components.map(component => ({
                 html: component.html,
                 css: component.css,
                 js: component.js,
                 json: component.json,
-            };
+            }));
         }));
     }
-    getShoppingCartComponentMeta$() {
-        return this.templatesApi.fetchTemplates$().pipe(map(templates => templates.find(template => template.name === this.templateApiName)), switchMap(template => (template ? this.getTemplateRootComponent$(template) : of(undefined))), switchMap(component => component ? this.templatesApi.fetchComponentAttachments$(component.uiTemplateId, component) : of(undefined)));
+    getOrgMeta$() {
+        const template = this.flowInfo.templates.SHOPPING_CART;
+        if (!template) {
+            return of(undefined);
+        }
+        return this.templatesApi.fetchComponentsAttachments$(template.id);
     }
     generateUIDefinition$() {
         return of(undefined).pipe(tap(() => {
             if (!this.templateApiName) {
-                throw new Error("Flow Query parameter 'cartTemplateApiName' is missing.");
+                throw new Error("Flow 'shoppingCart' template is not defined.");
             }
-        }), switchMap(() => this.getLocalShoppingCartComponentMeta$()), switchMap(meta => (meta ? of(meta) : this.getShoppingCartComponentMeta$())), map(meta => {
-            if (!meta) {
+        }), switchMap(() => this.getLocalMeta$()), switchMap(metaList => (metaList ? of(metaList) : this.getOrgMeta$())), map(metaList => {
+            if (!metaList) {
                 return;
             }
             const uiDef = {
@@ -2706,25 +1978,23 @@ class ShoppingCartComponent {
                 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),
-                    },
-                ],
+                children: metaList.map(meta => ({
+                    children: [],
+                    template: meta.html && btoaSafe(meta.html),
+                    script: meta.js && btoaSafe(meta.js),
+                    styles: meta.css && btoaSafe(meta.css),
+                })),
             };
             return uiDef;
         }));
     }
 }
-ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i2.UITemplatesApiService }, { token: i1$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i3$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i1$1.UITemplatesApiService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastService }, { token: i2.FlowInfoService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "component", type: i2$1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ShoppingCartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vl-flow-shopping-cart', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: function () { return [{ type: i2.UITemplatesApiService }, { type: i1$1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ToastService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.UITemplatesApiService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ToastService }, { type: i2.FlowInfoService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -2746,138 +2016,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class FlowResolver {
-    constructor(router, flowsApiService, routerService, contextService) {
+    constructor(router, routerService, contextService, flowInfo) {
         this.router = router;
-        this.flowsApiService = flowsApiService;
         this.routerService = routerService;
         this.contextService = contextService;
-    }
-    handleError(route, message, queryParams) {
-        const parentUrl = this.routerService.getFlowRootPath(route);
-        return this.router.navigate([parentUrl, '404'], {
-            queryParams,
-            state: {
-                message: message,
-            },
-        });
+        this.flowInfo = flowInfo;
     }
     resolve(route) {
         const { queryParams } = route;
-        const { flowId } = queryParams;
-        if (!flowId) {
-            return this.handleError(route);
-        }
-        return this.flowsApiService.getFlow(flowId).pipe(map$1(flow => {
-            if (!flow) {
-                return this.handleError(route, `Flow with flowId=${flowId} is not defined`);
-            }
-            const { properties } = flow;
-            const { queryParams: flowQueryParams, entryPath } = properties;
-            const mergedParams = {
-                ...queryParams,
-                ...flowQueryParams,
-                ...getDefaultProperties({ flowParams: properties }),
-            };
-            const contextProperties = Object.entries(mergedParams).reduce((trunk, [key, value]) => ({ ...trunk, [key]: String(value) }), {});
-            this.contextService.update({ properties: contextProperties });
-            const parentUrl = this.routerService.getFlowRootPath(route);
-            const entryUrl = String(entryPath ?? '')
-                .split('/')
-                .filter(Boolean);
-            return this.router
-                .navigate([parentUrl, ...entryUrl], {
-                queryParams: mergedParams,
-                replaceUrl: true,
-            })
-                .catch(e => {
-                const message = e instanceof HttpErrorResponse ? e.error.message : e;
-                return this.handleError(route, message, mergedParams);
-            });
+        const flow = this.flowInfo.flow;
+        if (!flow) {
+            return of(false);
+        }
+        const { properties } = flow;
+        const { queryParams: flowQueryParams, entryPath } = properties;
+        const mergedQueryParams = {
+            ...queryParams,
+            ...flowQueryParams,
+        };
+        const contextProperties = Object.entries({
+            ...mergedQueryParams,
+            ...getDefaultProperties({ flowParams: properties }),
+        }).reduce((trunk, [key, value]) => ({ ...trunk, [key]: String(value) }), {});
+        this.contextService.update({ properties: contextProperties });
+        this.flowInfo.flow = flow;
+        const parentUrl = this.routerService.getFlowRootPath(route);
+        const entryUrl = String(entryPath ?? '')
+            .split('/')
+            .filter(Boolean);
+        return from(this.router.navigate([parentUrl, ...entryUrl], {
+            queryParams: mergedQueryParams,
+            replaceUrl: true,
+        })).pipe(catchError$1(e => {
+            const message = e instanceof HttpErrorResponse ? e.error.message : e;
+            const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
+            return this.routerService.showErrorPage$(message, errorDetails);
         }));
     }
 }
-FlowResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, deps: [{ token: i1$2.Router }, { token: i2.FlowsApiService }, { token: FlowRouterService }, { token: i1$1.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.FlowInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
 FlowResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2.FlowsApiService }, { type: FlowRouterService }, { type: i1$1.ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.FlowInfoService }]; } });
 
 class QuoteResolver {
-    constructor(router, quoteDraftService, routerService, contextService, flowConfiguration, integrationState) {
+    constructor(router, quoteDraftService, routerService, contextService, flowInfo, flowStateService) {
         this.router = router;
         this.quoteDraftService = quoteDraftService;
         this.routerService = routerService;
         this.contextService = contextService;
-        this.flowConfiguration = flowConfiguration;
-        this.integrationState = integrationState;
-    }
-    handleError(route, message) {
-        const parentUrl = this.routerService.getFlowRootPath(route);
-        return from(this.router.navigate([parentUrl, '404'], { state: { message } }));
-    }
-    calculate$() {
-        const quoteDraft = this.quoteDraftService.quoteDraft;
-        if (!this.quoteDraftService.isStandalone && quoteDraft && !this.accountHasNotAssets()) {
-            return this.flowConfiguration.calculate$(quoteDraft);
-        }
-        return of(undefined);
+        this.flowInfo = flowInfo;
+        this.flowStateService = flowStateService;
     }
     resolve(route) {
-        const { headerId } = this.contextService.resolve();
-        const quote = this.quoteDraftService.quoteDraft;
-        if (quote && quote.quoteId === headerId) {
+        const flow = this.flowInfo.flow;
+        if (!flow) {
+            return of(false);
+        }
+        if (this.flowStateService.isInitialized()) {
             return of(true);
         }
-        const queryParams = route.queryParams;
-        return this.quoteDraftService.init(headerId, queryParams).pipe(switchMap(() => this.calculate$()), tap(() => {
-            if (!this.quoteDraftService.isStandalone && queryParams.suppressInitialNavigation !== 'true') {
-                if (this.shouldNavigateToAssets()) {
-                    this.changeNavigation('/assets', route);
-                }
-                else if (!this.quoteDraftService.isInitialized && this.quoteDraftService.hasProducts) {
-                    this.changeNavigation('/cart', route);
-                }
-            }
-            this.initializeModifiedAssetsMap();
-            this.quoteDraftService.isInitialized = true;
-            this.quoteDraftService.hasUnsavedChanges = false;
-        }), catchError(e => {
+        return this.flowStateService.init$().pipe(switchMap(() => this.checkDynamicNavigation$(route)), catchError(e => {
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
-            return this.handleError(route, message);
+            const errorDetails = isVeloceError(e.error) ? extractErrorDetails(e.error) : [];
+            return this.routerService.showErrorPage$(message, errorDetails);
         }));
     }
-    changeNavigation(path, route) {
-        const parentUrl = this.routerService.getFlowRootPath(route);
-        this.router
-            .navigate([parentUrl + path], {
-            queryParams: route.queryParams,
-            replaceUrl: true,
-        })
-            .catch(e => {
-            const message = e instanceof HttpErrorResponse ? e.error.message : e;
-            return this.handleError(route, message);
-        });
-    }
-    shouldNavigateToAssets() {
-        if (this.contextService.mode === ConfigurationContextMode.ACCOUNT) {
-            return true;
+    checkDynamicNavigation$(route) {
+        const flow = this.flowInfo.flow;
+        if (!flow) {
+            return of(true);
         }
-        return this.quoteDraftService.quoteDraft?.currentState.some(li => !!li.assetId) ?? false;
-    }
-    accountHasNotAssets() {
-        return this.contextService.mode === ConfigurationContextMode.ACCOUNT && !this.quoteDraftService.hasProducts;
+        if (flow.properties.suppressInitialNavigation || flow.properties.standalone) {
+            return of(true);
+        }
+        return this.getNavigateTo().pipe(switchMap(navigateTo => {
+            if (!navigateTo) {
+                return of(true);
+            }
+            const parentUrl = this.routerService.getFlowRootPath(route);
+            return from(this.router.navigate([parentUrl + navigateTo], {
+                queryParams: route.queryParams,
+                replaceUrl: true,
+            }));
+        }));
     }
-    initializeModifiedAssetsMap() {
-        this.integrationState.patchState({
-            modifiedAssets: generateModifiedAssetsMap(this.quoteDraftService.currentState),
-        });
+    getNavigateTo() {
+        const flow = this.flowInfo.flow;
+        let navigateTo;
+        if (flow?.properties.stateful) {
+            return this.flowStateService.select$(UITemplateType.FLOW_ENGINE, 'NAVIGATE_TO').pipe(map(r => {
+                if (r.success) {
+                    return r.result;
+                }
+                return '';
+            }));
+        }
+        else {
+            const isAccountMode = this.contextService.mode === ConfigurationContextMode.ACCOUNT;
+            if (isAccountMode || this.quoteDraftService.hasAssets) {
+                navigateTo = '/assets';
+            }
+            else if (this.quoteDraftService.hasProducts) {
+                navigateTo = '/cart';
+            }
+        }
+        return of(navigateTo);
     }
 }
-QuoteResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver, deps: [{ token: i1$2.Router }, { token: i1$1.QuoteDraftService }, { token: FlowRouterService }, { token: i1$1.ContextService }, { token: i1$1.FlowConfigurationService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
+QuoteResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver, deps: [{ token: i1$2.Router }, { token: i2.QuoteDraftService }, { token: FlowRouterService }, { token: i2.ContextService }, { token: i2.FlowInfoService }, { token: i2.FlowStateService }], target: i0.ɵɵFactoryTarget.Injectable });
 QuoteResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: QuoteResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$1.QuoteDraftService }, { type: FlowRouterService }, { type: i1$1.ContextService }, { type: i1$1.FlowConfigurationService }, { type: i5.IntegrationState }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i2.QuoteDraftService }, { type: FlowRouterService }, { type: i2.ContextService }, { type: i2.FlowInfoService }, { type: i2.FlowStateService }]; } });
 
 const rootRoute = {
     id: VELOCE_FLOW_ROOT_ROUTE,
@@ -2887,123 +2139,104 @@ const rootRoute = {
     canDeactivate: [RootGuard],
     children: [
         {
-            path: 'flows',
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: FlowResolver },
-            canActivate: [ContextGuard],
-            children: [],
-        },
-        {
-            path: 'legacy',
+            path: '',
+            canActivate: [keepFlowInitialized],
+            runGuardsAndResolvers: 'always',
             children: [
+                {
+                    path: 'flows',
+                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+                    resolve: { flow: FlowResolver },
+                    canActivate: [ContextGuard],
+                    children: [],
+                },
                 {
                     path: 'product',
-                    component: LegacyProductComponent,
+                    component: ProductComponent,
+                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+                    resolve: { quote: QuoteResolver },
+                    canActivate: [ContextGuard],
+                    canDeactivate: [ProductUnloadGuard],
+                    data: { showHeader: true },
+                },
+                {
+                    path: 'cart',
+                    component: ShoppingCartComponent,
+                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+                    resolve: { quote: QuoteResolver },
+                    canActivate: [ContextGuard],
+                    data: { showHeader: true },
+                },
+                {
+                    path: 'catalog',
+                    component: CatalogComponent,
+                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+                    resolve: { quote: QuoteResolver },
+                    canActivate: [ContextGuard],
+                    data: { showHeader: true },
+                },
+                {
+                    path: 'assets',
+                    component: AssetsComponent,
+                    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
+                    resolve: { quote: QuoteResolver },
+                    canActivate: [ContextGuard],
+                    data: { showHeader: true },
+                },
+                {
+                    path: 'remote',
+                    component: RemoteComponent,
                     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
                     resolve: { quote: QuoteResolver },
                     canActivate: [ContextGuard],
                 },
+                {
+                    path: 'debug',
+                    loadChildren: () => DebugModule,
+                },
+                {
+                    path: '404',
+                    loadChildren: () => RecordNotFoundModule,
+                },
             ],
         },
-        {
-            path: 'product',
-            component: ProductComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-            canDeactivate: [ProductUnloadGuard],
-            data: { showHeader: true },
-        },
-        {
-            path: 'cart',
-            component: ShoppingCartComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-            data: { showHeader: true },
-        },
-        {
-            path: 'catalog',
-            component: CatalogComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-            data: { showHeader: true },
-        },
-        {
-            path: 'assets',
-            component: AssetsComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-            data: { showHeader: true },
-        },
-        {
-            path: 'empty',
-            component: EmptyAccountComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-            data: { showHeader: true },
-        },
-        {
-            path: 'remote',
-            component: RemoteComponent,
-            runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-            resolve: { quote: QuoteResolver },
-            canActivate: [ContextGuard],
-        },
-        {
-            path: 'debug',
-            loadChildren: () => DebugModule,
-        },
-        {
-            path: '404',
-            loadChildren: () => RecordNotFoundModule,
-        },
     ],
 };
 class FlowRoutingModule {
 }
 FlowRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 FlowRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, imports: [i1$2.RouterModule, ProductModule,
-        LegacyProductModule,
         ShoppingCartModule,
         CatalogModule,
         AssetsModule,
-        RemoteModule,
-        EmptyAccountModule], exports: [RouterModule] });
+        RemoteModule], exports: [RouterModule] });
 FlowRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, providers: [FlowRouterService, RootGuard, ContextGuard, ProductUnloadGuard, FlowResolver, QuoteResolver], imports: [RouterModule.forChild([rootRoute]),
         ProductModule,
-        LegacyProductModule,
         ShoppingCartModule,
         CatalogModule,
         AssetsModule,
-        RemoteModule,
-        EmptyAccountModule, RouterModule] });
+        RemoteModule, RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         RouterModule.forChild([rootRoute]),
                         ProductModule,
-                        LegacyProductModule,
                         ShoppingCartModule,
                         CatalogModule,
                         AssetsModule,
                         RemoteModule,
-                        EmptyAccountModule,
                     ],
                     exports: [RouterModule],
                     providers: [FlowRouterService, RootGuard, ContextGuard, ProductUnloadGuard, FlowResolver, QuoteResolver],
                 }]
         }] });
 
-class FlowGuidedSellingService {
+class FlowDocGenService {
     constructor(integrationState) {
         this.integrationState = integrationState;
         this.cleanup$ = new Subject();
-        this.isVisibleSubj$ = new BehaviorSubject(true);
+        this.isVisibleSubj$ = new BehaviorSubject(false);
         this.isVisible$ = this.isVisibleSubj$.asObservable();
         this.initSubscriptions();
     }
@@ -3012,21 +2245,54 @@ class FlowGuidedSellingService {
     }
     initSubscriptions() {
         this.integrationState
-            .listen$(FlowAction.OPEN_GUIDED_SELLING)
+            .listen$(FlowAction.FLOW_OPEN_DOC_GEN)
             .pipe(tap(() => this.isVisibleSubj$.next(true)), takeUntil(this.cleanup$))
             .subscribe();
         this.integrationState
-            .listen$(FlowAction.CLOSE_GUIDED_SELLING)
+            .listen$(FlowAction.FLOW_CLOSE_DOC_GEN)
             .pipe(tap(() => this.isVisibleSubj$.next(false)), takeUntil(this.cleanup$))
             .subscribe();
     }
 }
-FlowGuidedSellingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, deps: [{ token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
-FlowGuidedSellingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowGuidedSellingService, decorators: [{
+FlowDocGenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService, deps: [{ token: i2.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
+FlowDocGenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowDocGenService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i5.IntegrationState }]; } });
+        }], ctorParameters: function () { return [{ type: i2.IntegrationState }]; } });
+
+const configurePrimengShadowDOM = () => {
+    DomHandler.getScrollableParents = (element) => {
+        const scrollableParents = [];
+        if (element) {
+            const parents = DomHandler.getParents(element).filter((item) => !(item instanceof ShadowRoot));
+            const overflowRegex = /(auto|scroll)/;
+            const overflowCheck = (node) => {
+                const styleDeclaration = window['getComputedStyle'](node, null);
+                return (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) ||
+                    overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) ||
+                    overflowRegex.test(styleDeclaration.getPropertyValue('overflowY')));
+            };
+            for (const parent of parents) {
+                const scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+                if (scrollSelectors) {
+                    const selectors = scrollSelectors.split(',');
+                    for (const selector of selectors) {
+                        const el = DomHandler.findSingle(parent, selector);
+                        if (el && overflowCheck(el)) {
+                            scrollableParents.push(el);
+                        }
+                    }
+                }
+                if (parent.nodeType !== 9 && overflowCheck(parent)) {
+                    scrollableParents.push(parent);
+                }
+            }
+        }
+        return scrollableParents;
+    };
+};
 
+configurePrimengShadowDOM();
 class FlowModule {
 }
 FlowModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3036,7 +2302,7 @@ FlowModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         ApiModule,
         LauncherModule,
         LoaderModule,
-        FlowHeaderModule,
+        FlowNewHeaderModule,
         FlowDialogModule,
         SdkCoreModule,
         DocGenModule,
@@ -3047,7 +2313,7 @@ FlowModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         ApiModule,
         LauncherModule,
         LoaderModule,
-        FlowHeaderModule,
+        FlowNewHeaderModule,
         FlowDialogModule,
         SdkCoreModule,
         DocGenModule,
@@ -3063,7 +2329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         ApiModule,
                         LauncherModule,
                         LoaderModule,
-                        FlowHeaderModule,
+                        FlowNewHeaderModule,
                         FlowDialogModule,
                         SdkCoreModule,
                         DocGenModule,
@@ -3077,5 +2343,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContextGuard, FLOW_CUSTOMIZATION, FlowModule, FlowService, VELOCE_FLOW_ROOT_ROUTE, getDefaultProperties, getFlowObjectIdPropertyName };
+export { ContextGuard, FlowDialogService, FlowModule, FlowRouterService, FlowService, VELOCE_FLOW_ROOT_ROUTE, getDefaultProperties, getFlowObjectIdPropertyName };
 //# sourceMappingURL=veloceapps-sdk.mjs.map