@veloceapps/sdk 7.0.2-6 → 7.0.2-60

package/fesm2020/veloceapps-sdk.mjs

@@ -5,39 +5,38 @@ import { Component, ChangeDetectionStrategy, NgModule, Injectable, ViewChild, In
 import * as i2 from '@veloceapps/api';
 import { ApiModule } from '@veloceapps/api';
 import * as i3$2 from '@veloceapps/components';
-import { ToastType, LetDirectiveModule, ErrorTooltipModule, HiddenTextTooltipModule, LoaderModule, EmptyStateModule } from '@veloceapps/components';
+import { ToastType, LetDirectiveModule, QuantityControlModule, ErrorTooltipModule, HiddenTextTooltipModule, LoaderModule, EmptyStateModule } from '@veloceapps/components';
 import * as i5 from '@veloceapps/sdk/cms';
 import { FlowAction, extractElementMetadata, extendElementMetadata, PreviewModule, OpenDocGenAction, LauncherModule } from '@veloceapps/sdk/cms';
 import * as i1$1 from '@veloceapps/sdk/core';
-import { isLineItemModified, getOriginParent, RuntimeOperation, generateModifiedAssetsMap, SdkCoreModule } from '@veloceapps/sdk/core';
+import { isLineItemModified, getOriginParent, SdkPipesModule, RuntimeOperation, generateModifiedAssetsMap, SdkCoreModule } from '@veloceapps/sdk/core';
 import * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from 'primeng/dynamicdialog';
-import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, getSupportedDateFormats, EntityUtil, UUID } from '@veloceapps/core';
-import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, take, finalize, noop, from, throwError } from 'rxjs';
+import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, EntityUtil, UUID } from '@veloceapps/core';
+import { Subject, BehaviorSubject, tap, takeUntil, first, 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$2 from 'primeng/tooltip';
+import * as i10$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i4 from '@angular/forms';
+import * as i5$1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
-import * as i9 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i10 from 'primeng/virtualscroller';
+import * as i9 from 'primeng/virtualscroller';
 import { VirtualScrollerModule } from 'primeng/virtualscroller';
 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$1 from '@angular/cdk/drag-drop';
+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 as take$1, map as map$1, switchMap as switchMap$1 } from 'rxjs/operators';
+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$1 from 'primeng/inputtext';
+import * as i10 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i11 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
@@ -45,7 +44,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i6 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i4$1 from '@veloceapps/sdk/runtime';
+import * as i4 from '@veloceapps/sdk/runtime';
 import { RuntimeModule } from '@veloceapps/sdk/runtime';
 
 const VELOCE_FLOW_ROOT_ROUTE = 'VELOCE_FLOW_ROOT_ROUTE';
@@ -74,10 +73,10 @@ class FlowDialogComponent {
     }
 }
 FlowDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowDialogComponent, deps: [{ token: i1.DynamicDialogConfig }, { token: i1.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-FlowDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FlowDialogComponent, selector: "vl-flow-dialog", ngImport: i0, template: "<div *ngIf=\"config.description\" class=\"description\">\n  {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n  <p-button\n    *ngIf=\"config.secondaryButton\"\n    styleClass=\"p-button-outlined button-text-bold\"\n    [label]=\"config.secondaryButton!\"\n    (onClick)=\"cancelHandler()\"\n  ></p-button>\n  <p-button\n    styleClass=\"p-button p-button-filled\"\n    [label]=\"config.primaryButton\"\n    (onClick)=\"confirmHandler()\"\n  ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .description{flex:1;padding:0 24px 24px;font-weight:400;font-size:12px;line-height:16px;color:var(--vl-text-color-deep-accent)}:host .form-actions{border-top:1px solid var(--vl-border-color);padding:1.5rem 2.2rem;display:flex;justify-content:flex-end;width:100%;grid-gap:10px;gap:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FlowDialogComponent, selector: "vl-flow-dialog", ngImport: i0, template: "<div class=\"header\">\n  <div class=\"title\">\n    {{ config.title }}\n  </div>\n\n  <i class=\"vl-icon vl-cross\" (click)=\"cancelHandler()\"></i>\n</div>\n\n<div *ngIf=\"config.description\" class=\"description\">\n  {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n  <p-button\n    *ngIf=\"config.secondaryButton\"\n    styleClass=\"p-button-outlined button-text-bold\"\n    [label]=\"config.secondaryButton!\"\n    (onClick)=\"cancelHandler()\"\n  ></p-button>\n  <p-button\n    styleClass=\"p-button p-button-filled\"\n    [label]=\"config.primaryButton\"\n    (onClick)=\"confirmHandler()\"\n  ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host *{font-family:var(--cg-font-family)}:host .header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}:host .header .title{color:var(--cg-black);font-size:16px;font-style:normal;font-weight:500;line-height:20px}:host .header .vl-icon{cursor:pointer}:host .description{flex:1;padding:0 16px 16px;color:var(--cg-black);font-size:12px;font-style:normal;font-weight:300;line-height:16px;letter-spacing:.3px}:host .form-actions{background:var(--cg-bg-color);padding:12px 16px;display:flex;justify-content:flex-end;width:100%;gap:16px}:host 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}:host p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}:host p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}:host p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}:host p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}::ng-deep .p-dialog.flow-dialog{border-radius:8px;box-shadow:0 8px 32px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"config.description\" class=\"description\">\n  {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n  <p-button\n    *ngIf=\"config.secondaryButton\"\n    styleClass=\"p-button-outlined button-text-bold\"\n    [label]=\"config.secondaryButton!\"\n    (onClick)=\"cancelHandler()\"\n  ></p-button>\n  <p-button\n    styleClass=\"p-button p-button-filled\"\n    [label]=\"config.primaryButton\"\n    (onClick)=\"confirmHandler()\"\n  ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .description{flex:1;padding:0 24px 24px;font-weight:400;font-size:12px;line-height:16px;color:var(--vl-text-color-deep-accent)}:host .form-actions{border-top:1px solid var(--vl-border-color);padding:1.5rem 2.2rem;display:flex;justify-content:flex-end;width:100%;grid-gap:10px;gap:10px}\n"] }]
+            args: [{ selector: 'vl-flow-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <div class=\"title\">\n    {{ config.title }}\n  </div>\n\n  <i class=\"vl-icon vl-cross\" (click)=\"cancelHandler()\"></i>\n</div>\n\n<div *ngIf=\"config.description\" class=\"description\">\n  {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n  <p-button\n    *ngIf=\"config.secondaryButton\"\n    styleClass=\"p-button-outlined button-text-bold\"\n    [label]=\"config.secondaryButton!\"\n    (onClick)=\"cancelHandler()\"\n  ></p-button>\n  <p-button\n    styleClass=\"p-button p-button-filled\"\n    [label]=\"config.primaryButton\"\n    (onClick)=\"confirmHandler()\"\n  ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host *{font-family:var(--cg-font-family)}:host .header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}:host .header .title{color:var(--cg-black);font-size:16px;font-style:normal;font-weight:500;line-height:20px}:host .header .vl-icon{cursor:pointer}:host .description{flex:1;padding:0 16px 16px;color:var(--cg-black);font-size:12px;font-style:normal;font-weight:300;line-height:16px;letter-spacing:.3px}:host .form-actions{background:var(--cg-bg-color);padding:12px 16px;display:flex;justify-content:flex-end;width:100%;gap:16px}:host 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}:host p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}:host p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}:host p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}:host p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}::ng-deep .p-dialog.flow-dialog{border-radius:8px;box-shadow:0 8px 32px #0000001a}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DynamicDialogConfig }, { type: i1.DynamicDialogRef }]; } });
 
 class FlowDialogModule {
@@ -369,7 +368,7 @@ class CartPreviewComponent {
         this.routerService = routerService;
         this.productImagesService = productImagesService;
         this.quoteDraftService = quoteDraftService;
-        this.productRowHeight = 97;
+        this.productRowHeight = 65;
         this.form = new FormGroup({});
         this.hasTermInProducts = false;
         this.scrollHeight = 0;
@@ -455,10 +454,10 @@ class CartPreviewComponent {
     }
 }
 CartPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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.8", 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=\"navigation-settings-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-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"product header\">\n                <span>Product</span>\n                <span class=\"text-right\">Qty</span>\n              </div>\n            </ng-template>\n\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\" [class.line-through]=\"product.deleted\">{{ product.name }}</div>\n                      <div *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-2 pl-0\"\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-danger p-2 pr-0\"\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                    <span class=\"pt-2\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <p-inputNumber\n                        class=\"qty-control\"\n                        [formControl]=\"$any(control)\"\n                        [min]=\"1\"\n                        [required]=\"true\"\n                        (onBlur)=\"controlBlurHandler(product)\"\n                      ></p-inputNumber>\n                    </span>\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-icon-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex justify-content-end footer\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger 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-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</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}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.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;padding:16px}.empty-state{color:var(--vl-text-color-deep-accent);padding:0 16px 16px}.product{display:grid;grid-template-columns:auto 60px;padding:16px;border-bottom:1px solid var(--vl-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.header{position:sticky;top:0;background-color:var(--surface-card);z-index:1;color:var(--vl-text-color-deep-accent);padding-bottom:0;border-bottom:none;overflow-y:scroll}.product .item{height:97px;overflow:hidden}.product__info{display:flex;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;height:24px;width:100%}.footer{padding:12px 16px}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}:host ::ng-deep .p-overlaypanel.navigation-settings-overlay{margin-top:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.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$2.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "component", type: i9.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { kind: "component", type: i10.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "rows", "minBufferPx", "maxBufferPx", "delay", "trackBy", "totalRecords", "first", "cache"], outputs: ["onLazyLoad"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CartPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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$1.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$2.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$2.QuantityControlComponent, selector: "vl-quantity-control", outputs: ["valueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CartPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-cart-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-overlayPanel\n  styleClass=\"navigation-settings-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-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"product header\">\n                <span>Product</span>\n                <span class=\"text-right\">Qty</span>\n              </div>\n            </ng-template>\n\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\" [class.line-through]=\"product.deleted\">{{ product.name }}</div>\n                      <div *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-2 pl-0\"\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-danger p-2 pr-0\"\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                    <span class=\"pt-2\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <p-inputNumber\n                        class=\"qty-control\"\n                        [formControl]=\"$any(control)\"\n                        [min]=\"1\"\n                        [required]=\"true\"\n                        (onBlur)=\"controlBlurHandler(product)\"\n                      ></p-inputNumber>\n                    </span>\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-icon-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex justify-content-end footer\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger 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-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</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}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.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;padding:16px}.empty-state{color:var(--vl-text-color-deep-accent);padding:0 16px 16px}.product{display:grid;grid-template-columns:auto 60px;padding:16px;border-bottom:1px solid var(--vl-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.header{position:sticky;top:0;background-color:var(--surface-card);z-index:1;color:var(--vl-text-color-deep-accent);padding-bottom:0;border-bottom:none;overflow-y:scroll}.product .item{height:97px;overflow:hidden}.product__info{display:flex;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;height:24px;width:100%}.footer{padding:12px 16px}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}:host ::ng-deep .p-overlaypanel.navigation-settings-overlay{margin-top:20px}\n"] }]
+            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}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.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]
@@ -475,14 +474,16 @@ CartPreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         OverlayPanelModule,
         LetDirectiveModule,
         InputNumberModule,
-        VirtualScrollerModule], exports: [CartPreviewComponent] });
+        VirtualScrollerModule,
+        QuantityControlModule], exports: [CartPreviewComponent] });
 CartPreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CartPreviewModule, imports: [CommonModule,
         ReactiveFormsModule,
         ButtonModule,
         OverlayPanelModule,
         LetDirectiveModule,
         InputNumberModule,
-        VirtualScrollerModule] });
+        VirtualScrollerModule,
+        QuantityControlModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CartPreviewModule, decorators: [{
             type: NgModule,
             args: [{
@@ -495,6 +496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         LetDirectiveModule,
                         InputNumberModule,
                         VirtualScrollerModule,
+                        QuantityControlModule,
                     ],
                     exports: [CartPreviewComponent],
                 }]
@@ -510,17 +512,17 @@ class FlowDialogService {
             dismissableMask: true,
             closeOnEscape: true,
             closable: true,
-            showHeader: true,
-            header: config.title,
-            width: '440px',
+            showHeader: false,
+            width: '320px',
             data: { config },
+            styleClass: 'flow-dialog',
         }).onClose;
     }
     showEmptyCartDialog() {
         return this.show({
             title: 'No Products in Quote',
             description: 'There are no products in your Quote. To save a Quote, add at least one product.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showReadonlyModeDialog() {
@@ -529,28 +531,28 @@ class FlowDialogService {
         return this.show({
             title: 'Error',
             description: `${objectName} Cannot be Saved`,
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showQuoteReadonlyModeDialog() {
         return this.show({
             title: 'Quote Cannot be Saved',
             description: 'It is only possible to save quotes with the “Draft” status. Please create a new quote to make and save changes.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showQuoteOutsideShoppingCartDialog() {
         return this.show({
             title: 'Quote Cannot be Saved',
             description: 'It is only possible to save quotes from the Shopping Cart. To proceed, go to the Shopping Cart.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showAccountNoChangesDialog() {
         return this.show({
             title: 'No Changes to Save',
             description: 'There are no changes since the last update. Please make changes to proceed.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showUnsavedChangesDialog() {
@@ -566,42 +568,42 @@ class FlowDialogService {
         return this.show({
             title: 'Cannot Submit for Approval',
             description: 'It is only possible to submit for approval quotes with the “Draft“ status. Please create a new quote to proceed.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showOutsideShoppingCartQuoteSubmitFailureDialog() {
         return this.show({
             title: 'Cannot Submit for Approval',
             description: 'It is only possible to submit quotes for approval from the Shopping Cart. To proceed, go to the Shopping Cart.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showAccountSubmitFailureDialog() {
         return this.show({
             title: 'Save Changes',
             description: 'To submit for approval, save the quote first, and then submit it for approval from the Shopping Cart.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showDocgenAccountUnsavedChangesDialog() {
         return this.show({
             title: 'Save Quote',
             description: 'To generate a document, save the quote first, and then generate the document from the Shopping Cart.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showDocgenReadonlyDialog() {
         return this.show({
             title: 'Document Generation is not Available',
             description: 'It is only possible to generate documents for quotes with the “Draft” status. Please create a new quote to generate a document.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showDocgenOutsideShoppingCartDialog() {
         return this.show({
             title: 'Document Generation is not Available',
             description: 'It is only possible to generate documents for quotes from the Shopping Cart. To proceed, go to the Shopping Cart.',
-            primaryButton: 'OK',
+            primaryButton: 'Ok',
         });
     }
     showDocgenUnsavedChangesDialog() {
@@ -622,13 +624,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 const METRICS_STORAGE_KEY = 'vl-metrics';
 
 class MetricsComponent {
-    constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService) {
+    constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService, runtimeSettings) {
         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 },
@@ -641,6 +644,7 @@ class MetricsComponent {
         this.filteredMetrics = [];
         this.sidebarVisible = false;
         this.searchControl = new FormControl('');
+        this.isFocused = false;
         this.nameControl = new FormControl('', [
             requiredValidator,
             invalidCharactersValidator(standardCharSetWithSpaceRegExp),
@@ -653,6 +657,7 @@ class MetricsComponent {
         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));
@@ -680,6 +685,18 @@ class MetricsComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
+    toggleOverlay(event, overlay, target) {
+        event.stopPropagation();
+        if (this.restSelectedMetrics.length) {
+            if (!overlay.overlayVisible) {
+                document.dispatchEvent(new Event('click'));
+            }
+            overlay.toggle(event, target);
+        }
+        else {
+            this.openSidebar();
+        }
+    }
     openSidebar() {
         this.overlayPanel.hide();
         this.sidebarVisible = true;
@@ -726,9 +743,22 @@ class MetricsComponent {
         }
         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 => {
@@ -814,18 +844,18 @@ class MetricsComponent {
         });
     }
 }
-MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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 }], target: i0.ɵɵFactoryTarget.Component });
-MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"overlayPanel.toggle($event)\">\n  <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n    <span class=\"name\" [vlHiddenTextTooltip]=\"metric.name\" tooltipStyleClass=\"metric-tooltip\" tooltipPosition=\"bottom\">\n      {{ metric.name }}\n    </span>\n    <span class=\"filler\"></span>\n    <span\n      class=\"value\"\n      vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      ${{ getMetricValue(metric.key) | number: '1.2-2' }}\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 | number: '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        ${{ metric.value | number: '1.2-2' }}\n      </span>\n    </div>\n  </ng-container>\n</div>\n\n<p-overlayPanel\n  styleClass=\"metrics-overlay-container center 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) | number: '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-icon-chevron-down\"></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: '360px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-icon-close\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <div class=\"search-container\">\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full\"\n      />\n    </div>\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-icon-reorder\" 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-icon-checkmark\"\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 *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n    <i class=\"vl-icon vl-icon-edit-sm\"></i>\n  </div>\n  <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n    <i class=\"vl-icon vl-icon-checkmark\"></i>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{cursor:pointer;min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 16px;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{max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0 24px;height:100%}::ng-deep .metrics-overlay-container{max-width:300px}::ng-deep .metrics-overlay-container .p-overlaypanel-content{padding:0}::ng-deep .metrics-overlay-container .overlay-metrics{max-height:110px;overflow:auto}::ng-deep .metrics-overlay-container .metric{display:flex;padding:0 12px;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .metrics-overlay-container .metric .name{max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric:not(:last-of-type){margin-bottom:4px}::ng-deep .metrics-overlay-container .metric:first-of-type{margin-top:12px}::ng-deep .metrics-overlay-container .metric:last-of-type{margin-bottom:12px}::ng-deep .metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;background:var(--vl-color-light-blue);outline:none;border:none;width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .metrics-overlay-container .config .vl-icon-chevron-down{color:var(--vl-text-color-accent-light);transform:rotate(-90deg)}.filler{flex:1;margin:0 4px 3px;min-width:5px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,var(--vl-text-color-accent-light) 1px,transparent 0);background-size:3px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{margin:15px 0 23px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer;font-size:15px}.container .search-container{margin-bottom:12px}.container .search-container input{width:100%}.container .content{display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;margin:0 -16px;border-top:1px solid var(--vl-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{width:100%}.container .footer p-button:not(:last-child){margin-right:16px}.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;flex:1;align-items:center;justify-content:center;color:var(--vl-text-color-deep-accent);font-size:12px;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;padding-left:8px;border-radius:2px}.sidebar-metric:hover:not(.edit){background:var(--vl-color-light-blue)}.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:#c5d1e2}.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(--vl-text-color-secondary)}.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{width:100%}.sidebar-metric .action{cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .edit i{color:var(--vl-text-color-deep-accent);width:12px;height:12px}.sidebar-metric .save{background:var(--vl-primary-color);border-radius:2px}.sidebar-metric .save i{color:#fff}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.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$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.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$1.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$2.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$2.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3$2.ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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.8", 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:110px;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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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$1.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$2.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$2.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$2.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"overlayPanel.toggle($event)\">\n  <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n    <span class=\"name\" [vlHiddenTextTooltip]=\"metric.name\" tooltipStyleClass=\"metric-tooltip\" tooltipPosition=\"bottom\">\n      {{ metric.name }}\n    </span>\n    <span class=\"filler\"></span>\n    <span\n      class=\"value\"\n      vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      ${{ getMetricValue(metric.key) | number: '1.2-2' }}\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 | number: '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        ${{ metric.value | number: '1.2-2' }}\n      </span>\n    </div>\n  </ng-container>\n</div>\n\n<p-overlayPanel\n  styleClass=\"metrics-overlay-container center 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) | number: '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-icon-chevron-down\"></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: '360px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-icon-close\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <div class=\"search-container\">\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full\"\n      />\n    </div>\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-icon-reorder\" 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-icon-checkmark\"\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 *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n    <i class=\"vl-icon vl-icon-edit-sm\"></i>\n  </div>\n  <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n    <i class=\"vl-icon vl-icon-checkmark\"></i>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{cursor:pointer;min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 16px;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{max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0 24px;height:100%}::ng-deep .metrics-overlay-container{max-width:300px}::ng-deep .metrics-overlay-container .p-overlaypanel-content{padding:0}::ng-deep .metrics-overlay-container .overlay-metrics{max-height:110px;overflow:auto}::ng-deep .metrics-overlay-container .metric{display:flex;padding:0 12px;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .metrics-overlay-container .metric .name{max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric:not(:last-of-type){margin-bottom:4px}::ng-deep .metrics-overlay-container .metric:first-of-type{margin-top:12px}::ng-deep .metrics-overlay-container .metric:last-of-type{margin-bottom:12px}::ng-deep .metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;background:var(--vl-color-light-blue);outline:none;border:none;width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .metrics-overlay-container .config .vl-icon-chevron-down{color:var(--vl-text-color-accent-light);transform:rotate(-90deg)}.filler{flex:1;margin:0 4px 3px;min-width:5px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,var(--vl-text-color-accent-light) 1px,transparent 0);background-size:3px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{margin:15px 0 23px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer;font-size:15px}.container .search-container{margin-bottom:12px}.container .search-container input{width:100%}.container .content{display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;margin:0 -16px;border-top:1px solid var(--vl-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{width:100%}.container .footer p-button:not(:last-child){margin-right:16px}.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;flex:1;align-items:center;justify-content:center;color:var(--vl-text-color-deep-accent);font-size:12px;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;padding-left:8px;border-radius:2px}.sidebar-metric:hover:not(.edit){background:var(--vl-color-light-blue)}.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:#c5d1e2}.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(--vl-text-color-secondary)}.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{width:100%}.sidebar-metric .action{cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .edit i{color:var(--vl-text-color-deep-accent);width:12px;height:12px}.sidebar-metric .save{background:var(--vl-primary-color);border-radius:2px}.sidebar-metric .save i{color:#fff}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px}.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 }]; }, propDecorators: { overlayPanel: [{
+            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:110px;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, shoppingCartSettingsApiService) {
+    constructor(contextService, quoteDraftService, quoteApiService, sfApiService, flowConfiguration, routerService, dialogService, integrationState) {
         this.contextService = contextService;
         this.quoteDraftService = quoteDraftService;
         this.quoteApiService = quoteApiService;
@@ -834,7 +864,6 @@ class FlowHeaderComponent {
         this.routerService = routerService;
         this.dialogService = dialogService;
         this.integrationState = integrationState;
-        this.shoppingCartSettingsApiService = shoppingCartSettingsApiService;
         this.isSaveInProgress$ = new BehaviorSubject(false);
         this.isSubmitInProgress$ = new BehaviorSubject(false);
         this.dateFormat = 'MM.dd.yyyy';
@@ -854,12 +883,6 @@ class FlowHeaderComponent {
         this.isCatalogRoute$ = this.routerService.isCatalogRoute$();
         this.isAssetsRoute$ = this.routerService.isAssetsRoute$();
         this.objectDetails$ = this.getObjectDetails$();
-        this.shoppingCartSettingsApiService
-            .getSettingsMap()
-            .pipe(take(1))
-            .subscribe(settings => {
-            this.dateFormat = getSupportedDateFormats(settings.DATE_FORMAT ?? this.dateFormat).datePipeFormat;
-        });
     }
     ngOnInit() {
         this.contextService
@@ -901,6 +924,12 @@ class FlowHeaderComponent {
                     this.submitButtonClickHandler(isCartRoute);
                 },
             },
+            {
+                label: 'Generate Document',
+                command: () => {
+                    this.docGenButtonClickHandler(isCartRoute);
+                },
+            },
         ];
     }
     back(objectId) {
@@ -1024,7 +1053,11 @@ class FlowHeaderComponent {
         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);
         }
     }
@@ -1076,15 +1109,19 @@ class FlowHeaderComponent {
         return combineLatest([
             this.flowConfiguration.get(),
             this.integrationState.state$.pipe(map(state => state.modifiedAssets), distinctUntilChanged()),
-        ]).pipe(map(([lineItems, modifiedAssets]) => 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;
-        }, [])));
+        ]).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;
+        }));
     }
     getAssets$() {
         return this.flowConfiguration
@@ -1096,6 +1133,10 @@ class FlowHeaderComponent {
         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) {
@@ -1104,23 +1145,20 @@ class FlowHeaderComponent {
             // find current term line item
             let target = li;
             while (target && target.endDate && new Date(target.endDate).getTime() <= now) {
-                target = lineItems.find(sub => sub.rampInstanceId === li.id);
+                target = lineItemsRampInstanceIdMap[li.id];
             }
             if (target && target.productId) {
-                return [
-                    ...result,
-                    {
-                        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),
-                    },
-                ];
+                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;
         }, []);
@@ -1135,12 +1173,12 @@ class FlowHeaderComponent {
         return noUpdates && sameNumberOfProducts;
     }
 }
-FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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 }, { token: i2.ShoppingCartSettingsApiService }], target: i0.ɵɵFactoryTarget.Component });
-FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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-arrow-left\"></i>\n\n        <span> Back to {{ objectName$ | async | titlecase }}</span>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <span class=\"dot-separator\"></span>\n\n        <nav class=\"account-name\" [pTooltip]=\"contextProperties.Name ?? ''\" tooltipPosition=\"bottom\" [showDelay]=\"1000\">\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=\"dot-separator\"></span>\n\n        <span>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-icon-chevron-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"navigation-settings-overlay flow-header-overlay center\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"flow-header-overlay__wrapper\">\n              <h2 class=\"flow-header-overlay__title\">\n                <span>Quote Information</span>\n                <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"quoteDetails.hide()\"></i>\n              </h2>\n\n              <ul class=\"info-list\">\n                <li class=\"info-list__row\">\n                  <span>Account Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                    <span>{{ details.accountName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Opportunity Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                    <span>{{ details.opportunityName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Quote Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                    <span>{{ details.quoteName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Quote Number:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                    <span>{{ details.quoteNumber }}</span>\n                  </a>\n                </li>\n              </ul>\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          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets ({{ assetsCount$ | async }})\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 class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</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 ({{ products?.length ?? 0 }})\n          </nav>\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-icon-chevron-down icon-with-margin\"></i>\n            <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\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>\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\n                    *ngIf=\"!priceListsOverlay?.overlayVisible\"\n                    class=\"vl-icon vl-icon-chevron-down icon-with-margin\"\n                  ></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-icon-chevron-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          <p-button\n            class=\"doc-gen-button\"\n            icon=\"vl-icon vl-icon-doc-gen\"\n            [disabled]=\"isReadonlyMode === true\"\n            (onClick)=\"docGenButtonClickHandler(isCartRoute === true)\"\n            pTooltip=\"Generate Document\"\n            tooltipPosition=\"bottom\"\n            tooltipStyleClass=\"vl-info-tooltip\"\n          ></p-button>\n\n          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"p-button-outlined\"\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{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;flex-shrink:0}::ng-deep .p-overlaypanel.flow-header-overlay .p-overlaypanel-content{background-color:#fff;padding:16px}::ng-deep .p-overlaypanel.flow-header-overlay.no-padding .p-overlaypanel-content{padding:0}::ng-deep .p-overlaypanel.flow-header-overlay.left:before{left:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.right:before{right:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.left .p-overlaypanel-content{margin-left:-16px}::ng-deep .p-overlaypanel.flow-header-overlay.right .p-overlaypanel-content{margin-right:-16px}::ng-deep .p-overlaypanel.flow-header-overlay:before{background-color:#fff}::ng-deep .p-overlaypanel.price-list-overlay .p-overlaypanel-content{border-radius:5px;border-color:var(--vl-border-color);padding:0;display:flex;flex-direction:column;max-height:140px;overflow:auto}:host ::ng-deep p-splitButton{height:32px;width:146px;display:flex}:host ::ng-deep p-splitButton .p-splitbutton{display:flex;font-size:12px;border-radius:2px;height:100%;width:100%;-webkit-backface-visibility:hidden}:host ::ng-deep p-splitButton .p-splitbutton .p-button:focus{box-shadow:none}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton{padding:7px 12px 7px 10px}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton:disabled{opacity:.2}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-menubutton:disabled{opacity:.3}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button{background-color:#fff;color:var(--vl-primary-color);border:1px solid #fff}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button:enabled:hover{background-color:var(--vl-secondary-nav-bg);color:var(--vl-primary-color);border:1px solid var(--vl-secondary-nav-bg);outline:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton{background-color:var(--vl-secondary-nav-bg);border-radius:0 2px 2px 0;border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton:hover{background-color:var(--vl-secondary-nav-bg);border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton{border-radius:2px 0 0 2px}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep p-splitButton .p-splitbutton .p-menu{display:flex;width:auto;margin-top:2px;border-radius:4px;border:1px solid var(--vl-border-color);box-shadow:0 4px 20px #2767c11a}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list{display:flex;flex-direction:column}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem{display:flex;width:100%;height:32px}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link{padding:8px;width:100%;height:100%}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover{background-color:var(--vl-secondary-nav-bg)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text{color:var(--vl-primary-color)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link .p-menuitem-text{line-height:16px;font-size:12px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep .doc-gen-button{height:32px;width:32px;display:inline-flex}:host ::ng-deep .doc-gen-button .p-button{border:1px solid #fff;border-radius:2px;width:100%;height:100%}:host ::ng-deep .doc-gen-button .p-button.p-component:disabled{opacity:.3}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;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-popover-toggle{margin-left:-8px}.flow-info .nav-back{font-weight:700}.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:14px}nav.disabled{opacity:.6;cursor:default}nav .nav-icon{margin-right:10px}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:24px;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:4px;height:4px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-header-overlay__wrapper{width:360px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__wrapper .info-list{list-style:none;padding:0;font-size:12px}.flow-header-overlay__wrapper .info-list__row{padding:8px 0;display:flex;justify-content:space-between}.flow-header-overlay__wrapper .info-list__row a{text-align:right}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.flow-navigation{flex-grow:1;display:flex;gap:16px;justify-content:center;font-weight:600}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:-14px}.flow-navigation .nav-item,.flow-navigation .nav-popover-toggle{opacity:.6}.flow-navigation .nav-item.active,.flow-navigation .nav-item:not(.disabled):hover,.flow-navigation .nav-popover-toggle.active,.flow-navigation .nav-popover-toggle:not(.disabled):hover{opacity:1}.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:16px;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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$2.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "directive", type: i10$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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.8", 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.opportunityName)\">\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.quoteName)\">\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.quoteNumber)\">\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 class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</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              >\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: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:12px;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:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;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{flex-grow:1;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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$2.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$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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-arrow-left\"></i>\n\n        <span> Back to {{ objectName$ | async | titlecase }}</span>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <span class=\"dot-separator\"></span>\n\n        <nav class=\"account-name\" [pTooltip]=\"contextProperties.Name ?? ''\" tooltipPosition=\"bottom\" [showDelay]=\"1000\">\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=\"dot-separator\"></span>\n\n        <span>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-icon-chevron-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"navigation-settings-overlay flow-header-overlay center\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"flow-header-overlay__wrapper\">\n              <h2 class=\"flow-header-overlay__title\">\n                <span>Quote Information</span>\n                <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"quoteDetails.hide()\"></i>\n              </h2>\n\n              <ul class=\"info-list\">\n                <li class=\"info-list__row\">\n                  <span>Account Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                    <span>{{ details.accountName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Opportunity Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                    <span>{{ details.opportunityName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Quote Name:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                    <span>{{ details.quoteName }}</span>\n                  </a>\n                </li>\n                <li class=\"info-list__row\">\n                  <span>Quote Number:</span>\n                  <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                    <span>{{ details.quoteNumber }}</span>\n                  </a>\n                </li>\n              </ul>\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          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets ({{ assetsCount$ | async }})\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 class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</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 ({{ products?.length ?? 0 }})\n          </nav>\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-icon-chevron-down icon-with-margin\"></i>\n            <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\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>\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\n                    *ngIf=\"!priceListsOverlay?.overlayVisible\"\n                    class=\"vl-icon vl-icon-chevron-down icon-with-margin\"\n                  ></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-icon-chevron-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          <p-button\n            class=\"doc-gen-button\"\n            icon=\"vl-icon vl-icon-doc-gen\"\n            [disabled]=\"isReadonlyMode === true\"\n            (onClick)=\"docGenButtonClickHandler(isCartRoute === true)\"\n            pTooltip=\"Generate Document\"\n            tooltipPosition=\"bottom\"\n            tooltipStyleClass=\"vl-info-tooltip\"\n          ></p-button>\n\n          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"p-button-outlined\"\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{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;flex-shrink:0}::ng-deep .p-overlaypanel.flow-header-overlay .p-overlaypanel-content{background-color:#fff;padding:16px}::ng-deep .p-overlaypanel.flow-header-overlay.no-padding .p-overlaypanel-content{padding:0}::ng-deep .p-overlaypanel.flow-header-overlay.left:before{left:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.right:before{right:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.left .p-overlaypanel-content{margin-left:-16px}::ng-deep .p-overlaypanel.flow-header-overlay.right .p-overlaypanel-content{margin-right:-16px}::ng-deep .p-overlaypanel.flow-header-overlay:before{background-color:#fff}::ng-deep .p-overlaypanel.price-list-overlay .p-overlaypanel-content{border-radius:5px;border-color:var(--vl-border-color);padding:0;display:flex;flex-direction:column;max-height:140px;overflow:auto}:host ::ng-deep p-splitButton{height:32px;width:146px;display:flex}:host ::ng-deep p-splitButton .p-splitbutton{display:flex;font-size:12px;border-radius:2px;height:100%;width:100%;-webkit-backface-visibility:hidden}:host ::ng-deep p-splitButton .p-splitbutton .p-button:focus{box-shadow:none}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton{padding:7px 12px 7px 10px}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton:disabled{opacity:.2}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-menubutton:disabled{opacity:.3}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button{background-color:#fff;color:var(--vl-primary-color);border:1px solid #fff}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button:enabled:hover{background-color:var(--vl-secondary-nav-bg);color:var(--vl-primary-color);border:1px solid var(--vl-secondary-nav-bg);outline:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton{background-color:var(--vl-secondary-nav-bg);border-radius:0 2px 2px 0;border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton:hover{background-color:var(--vl-secondary-nav-bg);border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton{border-radius:2px 0 0 2px}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep p-splitButton .p-splitbutton .p-menu{display:flex;width:auto;margin-top:2px;border-radius:4px;border:1px solid var(--vl-border-color);box-shadow:0 4px 20px #2767c11a}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list{display:flex;flex-direction:column}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem{display:flex;width:100%;height:32px}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link{padding:8px;width:100%;height:100%}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover{background-color:var(--vl-secondary-nav-bg)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text{color:var(--vl-primary-color)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link .p-menuitem-text{line-height:16px;font-size:12px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep .doc-gen-button{height:32px;width:32px;display:inline-flex}:host ::ng-deep .doc-gen-button .p-button{border:1px solid #fff;border-radius:2px;width:100%;height:100%}:host ::ng-deep .doc-gen-button .p-button.p-component:disabled{opacity:.3}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;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-popover-toggle{margin-left:-8px}.flow-info .nav-back{font-weight:700}.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:14px}nav.disabled{opacity:.6;cursor:default}nav .nav-icon{margin-right:10px}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:24px;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:4px;height:4px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-header-overlay__wrapper{width:360px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__wrapper .info-list{list-style:none;padding:0;font-size:12px}.flow-header-overlay__wrapper .info-list__row{padding:8px 0;display:flex;justify-content:space-between}.flow-header-overlay__wrapper .info-list__row a{text-align:right}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.flow-navigation{flex-grow:1;display:flex;gap:16px;justify-content:center;font-weight:600}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:-14px}.flow-navigation .nav-item,.flow-navigation .nav-popover-toggle{opacity:.6}.flow-navigation .nav-item.active,.flow-navigation .nav-item:not(.disabled):hover,.flow-navigation .nav-popover-toggle.active,.flow-navigation .nav-popover-toggle:not(.disabled):hover{opacity:1}.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:16px;font-size:12px;line-height:16px}\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 }, { type: i2.ShoppingCartSettingsApiService }]; } });
+            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.opportunityName)\">\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.quoteName)\">\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.quoteNumber)\">\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 class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</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              >\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: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:12px;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:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;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{flex-grow:1;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 {
 }
@@ -1157,7 +1195,8 @@ MetricsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         LetDirectiveModule,
         VirtualScrollerModule,
         ErrorTooltipModule,
-        HiddenTextTooltipModule], exports: [MetricsComponent] });
+        HiddenTextTooltipModule,
+        SdkPipesModule], exports: [MetricsComponent] });
 MetricsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -1170,7 +1209,8 @@ MetricsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         LetDirectiveModule,
         VirtualScrollerModule,
         ErrorTooltipModule,
-        HiddenTextTooltipModule] });
+        HiddenTextTooltipModule,
+        SdkPipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1189,6 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         VirtualScrollerModule,
                         ErrorTooltipModule,
                         HiddenTextTooltipModule,
+                        SdkPipesModule,
                     ],
                     exports: [MetricsComponent],
                 }]
@@ -1204,7 +1245,8 @@ FlowHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ButtonModule,
         CartPreviewModule,
         SplitButtonModule,
-        MetricsModule], exports: [FlowHeaderComponent] });
+        MetricsModule,
+        SdkPipesModule], exports: [FlowHeaderComponent] });
 FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowHeaderModule, imports: [CommonModule,
         OverlayPanelModule,
         LetDirectiveModule,
@@ -1212,7 +1254,8 @@ FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
         ButtonModule,
         CartPreviewModule,
         SplitButtonModule,
-        MetricsModule] });
+        MetricsModule,
+        SdkPipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowHeaderModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1226,6 +1269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         CartPreviewModule,
                         SplitButtonModule,
                         MetricsModule,
+                        SdkPipesModule,
                     ],
                     exports: [FlowHeaderComponent],
                 }]
@@ -1356,10 +1400,11 @@ const getDefaultProperties = (params) => {
 };
 
 class ContextGuard {
-    constructor(router, routerService, contextService) {
+    constructor(router, routerService, contextService, runtimeSettingsService) {
         this.router = router;
         this.routerService = routerService;
         this.contextService = contextService;
+        this.runtimeSettingsService = runtimeSettingsService;
     }
     checkActivation(route) {
         const { queryParams } = route;
@@ -1378,8 +1423,8 @@ class ContextGuard {
                 return of(true);
             }
         }
-        // Initialize context
-        return this.contextService.create(headerId, mode).pipe(tap((context) => {
+        // 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,
@@ -1389,6 +1434,8 @@ class ContextGuard {
                     ...getDefaultProperties({ mode }),
                 },
             });
+            // Init currency settings
+            this.runtimeSettingsService.initCurrency(context.properties['CurrencyIsoCode']);
         }), map(() => true), catchError(e => {
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
             return this.handleError(route, message);
@@ -1430,11 +1477,11 @@ class ContextGuard {
         return from(this.router.navigate([parentUrl, '404'], { state: { message } })).pipe(map(() => false));
     }
 }
-ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i1$1.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i1$1.ContextService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }, { type: i1$1.RuntimeSettingsService }]; } });
 
 class ProductUnloadGuard {
     constructor(router, contextService, quoteDraftService, configurationService, flowDialogService) {
@@ -1775,7 +1822,7 @@ class DebugComponent {
     }
 }
 DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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.8", 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.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$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i10$1.InputText, selector: "[pInputText]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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: i3.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$1.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: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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"] }]
@@ -1855,9 +1902,9 @@ class LegacyProductComponent {
         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(1)).subscribe(lineItem => this.onSolutionStop(lineItem));
-        this.runtimeService.onSolutionReadyEvent.pipe(take$1(1)).subscribe(event => this.onSolutionReady(event));
-        this.runtimeService.onSolutionCancelEvent.pipe(take$1(1)).subscribe(() => this.onSolutionCancel());
+        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();
@@ -1888,7 +1935,7 @@ class LegacyProductComponent {
             };
             this.quoteApiService
                 .upsertQuote(quoteToUpsert)
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .subscribe(quote => {
                 window['VELO_BACK_FN'].apply(null, [quote.quoteId]);
             });
@@ -1929,7 +1976,7 @@ class LegacyProductComponent {
     }
     startRuntime(states, runtimeContext$) {
         runtimeContext$
-            .pipe(take$1(1), map$1(runtimeContext => {
+            .pipe(take(1), map$1(runtimeContext => {
             this.runtimeService.startRuntime(runtimeContext, states);
         }))
             .subscribe();
@@ -1950,12 +1997,12 @@ class LegacyProductComponent {
         }), switchMap$1(runtimeContext => this.customizeContext(productId, runtimeContext)));
     }
 }
-LegacyProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", 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.8", 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"] }] });
+LegacyProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LegacyProductComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$1.QuoteDraftService }, { token: i2.QuoteApiService }, { token: i1$1.ContextService }, { token: i4.RuntimeContextService }, { token: i4.RuntimeService }, { token: i4.CurrentStateService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LegacyProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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.RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1$1.QuoteDraftService }, { type: i2.QuoteApiService }, { type: i1$1.ContextService }, { type: i4.RuntimeContextService }, { type: i4.RuntimeService }, { type: i4.CurrentStateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,