@veloceapps/sdk 7.0.2-37 → 7.0.2-39

package/fesm2015/veloceapps-sdk.mjs

@@ -9,12 +9,12 @@ import { ToastType, LetDirectiveModule, ErrorTooltipModule, HiddenTextTooltipMod
 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, forkJoin, 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';
@@ -34,7 +34,7 @@ import * as i5$1 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';
@@ -820,17 +820,17 @@ 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 }, { 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)=\"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=\"{{ currencySymbol }}{{ getMetricValue(metric.key) | number : '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      {{ currencySymbol }}{{ 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=\"{{ currencySymbol }}{{ metric.value | number : '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ currencySymbol }}{{ 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=\"{{ currencySymbol }}{{ getMetricValue(metric.key) | number : '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ currencySymbol }}{{ 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.ɵ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) | 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<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) | 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-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$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=\"{{ currencySymbol }}{{ getMetricValue(metric.key) | number : '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      {{ currencySymbol }}{{ 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=\"{{ currencySymbol }}{{ metric.value | number : '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ currencySymbol }}{{ 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=\"{{ currencySymbol }}{{ getMetricValue(metric.key) | number : '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ currencySymbol }}{{ 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"] }]
+            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) | 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<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) | 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-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 }, { 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;
@@ -839,7 +839,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';
@@ -859,13 +858,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 => {
-            var _a;
-            this.dateFormat = getSupportedDateFormats((_a = settings.DATE_FORMAT) !== null && _a !== void 0 ? _a : this.dateFormat).datePipeFormat;
-        });
     }
     ngOnInit() {
         this.contextService
@@ -1149,12 +1141,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-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 | vlDate }}</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: i1$1.DatePipe, name: "vlDate" }], 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-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 | vlDate }}</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 }]; } });
 
 class MetricsModule {
 }
@@ -1171,7 +1163,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,
@@ -1184,7 +1177,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: [{
@@ -1203,6 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         VirtualScrollerModule,
                         ErrorTooltipModule,
                         HiddenTextTooltipModule,
+                        SdkPipesModule,
                     ],
                     exports: [MetricsComponent],
                 }]
@@ -1218,7 +1213,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,
@@ -1226,7 +1222,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: [{
@@ -1240,6 +1237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         CartPreviewModule,
                         SplitButtonModule,
                         MetricsModule,
+                        SdkPipesModule,
                     ],
                     exports: [FlowHeaderComponent],
                 }]
@@ -1875,9 +1873,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();
@@ -1905,7 +1903,7 @@ class LegacyProductComponent {
             const quoteToUpsert = Object.assign(Object.assign({}, quote), { context: this.contextService.resolve(), currentState: [...(this.currentStateService.currentState || []).filter(li => li.id !== lineItem.id), lineItem] });
             this.quoteApiService
                 .upsertQuote(quoteToUpsert)
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .subscribe(quote => {
                 window['VELO_BACK_FN'].apply(null, [quote.quoteId]);
             });
@@ -1946,7 +1944,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();