@veloceapps/sdk 7.0.2-27 → 7.0.2-29

package/fesm2020/veloceapps-sdk.mjs

@@ -14,7 +14,7 @@ import * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from 'primeng/dynamicdialog';
 import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, getSupportedDateFormats, EntityUtil, UUID } from '@veloceapps/core';
-import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, take, finalize, noop, from, throwError } from 'rxjs';
+import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, take, 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';
@@ -622,13 +622,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 const METRICS_STORAGE_KEY = 'vl-metrics';
 
 class MetricsComponent {
-    constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService) {
+    constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService, runtimeSettings) {
         this.contextService = contextService;
         this.quoteDraftService = quoteDraftService;
         this.cdr = cdr;
         this.metricsCalculationService = metricsCalculationService;
         this.flowConfiguration = flowConfiguration;
         this.shoppingCartSettingsApiService = shoppingCartSettingsApiService;
+        this.runtimeSettings = runtimeSettings;
         this.emptyStateMetrics = [
             { name: 'MRR', value: 0 },
             { name: 'E.MRR', value: 0 },
@@ -653,6 +654,7 @@ class MetricsComponent {
         this.metricKeys = [];
         this.lastSavedMetrics = [];
         this.destroyed$ = new Subject();
+        this.currencySymbol = this.runtimeSettings.getCurrencySettings().symbol;
     }
     ngOnInit() {
         this.activeMetricRules = this.flowConfiguration.activeMetricsSnapshot.filter(metricRule => metricRule.metrics.some(metric => !!metric.totalName));
@@ -814,12 +816,12 @@ class MetricsComponent {
         });
     }
 }
-MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1$1.MetricsCalculationService }, { token: i1$1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }], target: i0.ɵɵFactoryTarget.Component });
-MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"overlayPanel.toggle($event)\">\n  <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n    <span class=\"name\" [vlHiddenTextTooltip]=\"metric.name\" tooltipStyleClass=\"metric-tooltip\" tooltipPosition=\"bottom\">\n      {{ metric.name }}\n    </span>\n    <span class=\"filler\"></span>\n    <span\n      class=\"value\"\n      vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n    <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n      <span\n        class=\"name\"\n        [vlHiddenTextTooltip]=\"metric.name\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ metric.name }}\n      </span>\n      <span class=\"filler\"></span>\n      <span\n        class=\"value\"\n        vlHiddenTextTooltip=\"${{ metric.value | number: '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        ${{ metric.value | number: '1.2-2' }}\n      </span>\n    </div>\n  </ng-container>\n</div>\n\n<p-overlayPanel\n  styleClass=\"metrics-overlay-container center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"overlay-metrics\">\n      <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-icon-chevron-down\"></i>\n    </button>\n  </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n  [visible]=\"sidebarVisible\"\n  (visibleChange)=\"closeSidebar()\"\n  position=\"right\"\n  [baseZIndex]=\"1000\"\n  [style]=\"{ width: '360px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-icon-close\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <div class=\"search-container\">\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full\"\n      />\n    </div>\n\n    <div class=\"content\">\n      <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n        <div\n          *ngFor=\"let metric of filteredMetrics\"\n          class=\"sidebar-metric\"\n          [class.edit]=\"metric.key === editingMetric?.key\"\n          cdkDrag\n          [cdkDragDisabled]=\"!!searchControl.value\"\n        >\n          <div class=\"drag-icon\">\n            <i class=\"vl-icon vl-icon-reorder\" cdkDragHandle></i>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"metricTemplate\"\n            [ngTemplateOutletContext]=\"{ metric: metric }\"\n          ></ng-container>\n        </div>\n      </div>\n\n      <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n    </div>\n    <div class=\"footer\">\n      <p-button\n        label=\"Reset to default\"\n        styleClass=\"p-button-outlined p-button-sm\"\n        (onClick)=\"resetToDefault()\"\n      ></p-button>\n      <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n    </div>\n  </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n  <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n    <p-checkbox\n      [ngModel]=\"metric.visible\"\n      (ngModelChange)=\"metric.visible = !metric.visible\"\n      [binary]=\"true\"\n      checkboxIcon=\"vl-icon vl-icon-checkmark\"\n    ></p-checkbox>\n    <div class=\"title\">{{ metric.name }}</div>\n  </div>\n\n  <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n    <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n    <vl-error-tooltip [tooltip]=\"nameControl | error: 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n  </div>\n  <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n    <i class=\"vl-icon vl-icon-edit-sm\"></i>\n  </div>\n  <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n    <i class=\"vl-icon vl-icon-checkmark\"></i>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{cursor:pointer;min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 16px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0 24px;height:100%}::ng-deep .metrics-overlay-container{max-width:300px}::ng-deep .metrics-overlay-container .p-overlaypanel-content{padding:0}::ng-deep .metrics-overlay-container .overlay-metrics{max-height:110px;overflow:auto}::ng-deep .metrics-overlay-container .metric{display:flex;padding:0 12px;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .metrics-overlay-container .metric .name{max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric:not(:last-of-type){margin-bottom:4px}::ng-deep .metrics-overlay-container .metric:first-of-type{margin-top:12px}::ng-deep .metrics-overlay-container .metric:last-of-type{margin-bottom:12px}::ng-deep .metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;background:var(--vl-color-light-blue);outline:none;border:none;width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .metrics-overlay-container .config .vl-icon-chevron-down{color:var(--vl-text-color-accent-light);transform:rotate(-90deg)}.filler{flex:1;margin:0 4px 3px;min-width:5px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,var(--vl-text-color-accent-light) 1px,transparent 0);background-size:3px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{margin:15px 0 23px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer;font-size:15px}.container .search-container{margin-bottom:12px}.container .search-container input{width:100%}.container .content{display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;margin:0 -16px;border-top:1px solid var(--vl-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{width:100%}.container .footer p-button:not(:last-child){margin-right:16px}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;flex:1;align-items:center;justify-content:center;color:var(--vl-text-color-deep-accent);font-size:12px;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;padding-left:8px;border-radius:2px}.sidebar-metric:hover:not(.edit){background:var(--vl-color-light-blue)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:#c5d1e2}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--vl-text-color-secondary)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{width:100%}.sidebar-metric .action{cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .edit i{color:var(--vl-text-color-deep-accent);width:12px;height:12px}.sidebar-metric .save{background:var(--vl-primary-color);border-radius:2px}.sidebar-metric .save i{color:#fff}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--vl-text-color-accent)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10$1.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$2.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$2.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3$2.ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1$1.MetricsCalculationService }, { token: i1$1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"overlayPanel.toggle($event)\">\n  <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n    <span class=\"name\" [vlHiddenTextTooltip]=\"metric.name\" tooltipStyleClass=\"metric-tooltip\" tooltipPosition=\"bottom\">\n      {{ metric.name }}\n    </span>\n    <span class=\"filler\"></span>\n    <span\n      class=\"value\"\n      vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n      tooltipStyleClass=\"metric-tooltip\"\n      tooltipPosition=\"bottom\"\n    >\n      ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n    <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n      <span\n        class=\"name\"\n        [vlHiddenTextTooltip]=\"metric.name\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        {{ metric.name }}\n      </span>\n      <span class=\"filler\"></span>\n      <span\n        class=\"value\"\n        vlHiddenTextTooltip=\"${{ metric.value | number: '1.2-2' }}\"\n        tooltipStyleClass=\"metric-tooltip\"\n        tooltipPosition=\"bottom\"\n      >\n        ${{ metric.value | number: '1.2-2' }}\n      </span>\n    </div>\n  </ng-container>\n</div>\n\n<p-overlayPanel\n  styleClass=\"metrics-overlay-container center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"overlay-metrics\">\n      <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n        <span\n          class=\"name\"\n          [vlHiddenTextTooltip]=\"metric.name\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          {{ metric.name }}\n        </span>\n        <span class=\"filler\"></span>\n        <span\n          class=\"value\"\n          vlHiddenTextTooltip=\"${{ getMetricValue(metric.key) | number: '1.2-2' }}\"\n          tooltipStyleClass=\"metric-tooltip\"\n          tooltipPosition=\"bottom\"\n        >\n          ${{ getMetricValue(metric.key) | number: '1.2-2' }}\n        </span>\n      </div>\n    </div>\n    <button class=\"config\" (click)=\"openSidebar()\">\n      Metrics Config\n      <i class=\"vl-icon vl-icon-chevron-down\"></i>\n    </button>\n  </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n  [visible]=\"sidebarVisible\"\n  (visibleChange)=\"closeSidebar()\"\n  position=\"right\"\n  [baseZIndex]=\"1000\"\n  [style]=\"{ width: '360px' }\"\n>\n  <div class=\"container\">\n    <div class=\"header\">\n      Quote Metrics Config\n      <i class=\"vl-icon vl-icon-close\" (click)=\"closeSidebar()\"></i>\n    </div>\n\n    <div class=\"search-container\">\n      <input\n        data-test-id=\"search\"\n        [formControl]=\"searchControl\"\n        pInputText\n        placeholder=\"Search for metric\u2026\"\n        class=\"w-full\"\n      />\n    </div>\n\n    <div class=\"content\">\n      <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n        <div\n          *ngFor=\"let metric of filteredMetrics\"\n          class=\"sidebar-metric\"\n          [class.edit]=\"metric.key === editingMetric?.key\"\n          cdkDrag\n          [cdkDragDisabled]=\"!!searchControl.value\"\n        >\n          <div class=\"drag-icon\">\n            <i class=\"vl-icon vl-icon-reorder\" cdkDragHandle></i>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"metricTemplate\"\n            [ngTemplateOutletContext]=\"{ metric: metric }\"\n          ></ng-container>\n        </div>\n      </div>\n\n      <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n    </div>\n    <div class=\"footer\">\n      <p-button\n        label=\"Reset to default\"\n        styleClass=\"p-button-outlined p-button-sm\"\n        (onClick)=\"resetToDefault()\"\n      ></p-button>\n      <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n    </div>\n  </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n  <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n    <p-checkbox\n      [ngModel]=\"metric.visible\"\n      (ngModelChange)=\"metric.visible = !metric.visible\"\n      [binary]=\"true\"\n      checkboxIcon=\"vl-icon vl-icon-checkmark\"\n    ></p-checkbox>\n    <div class=\"title\">{{ metric.name }}</div>\n  </div>\n\n  <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n    <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n    <vl-error-tooltip [tooltip]=\"nameControl | error: 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n  </div>\n  <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n    <i class=\"vl-icon vl-icon-edit-sm\"></i>\n  </div>\n  <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n    <i class=\"vl-icon vl-icon-checkmark\"></i>\n  </div>\n</ng-template>\n", styles: [":host .header-metrics{cursor:pointer;min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 16px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0 24px;height:100%}::ng-deep .metrics-overlay-container{max-width:300px}::ng-deep .metrics-overlay-container .p-overlaypanel-content{padding:0}::ng-deep .metrics-overlay-container .overlay-metrics{max-height:110px;overflow:auto}::ng-deep .metrics-overlay-container .metric{display:flex;padding:0 12px;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .metrics-overlay-container .metric .name{max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric .value{font-weight:600;overflow:hidden;text-overflow:ellipsis}::ng-deep .metrics-overlay-container .metric:not(:last-of-type){margin-bottom:4px}::ng-deep .metrics-overlay-container .metric:first-of-type{margin-top:12px}::ng-deep .metrics-overlay-container .metric:last-of-type{margin-bottom:12px}::ng-deep .metrics-overlay-container .config{display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;background:var(--vl-color-light-blue);outline:none;border:none;width:100%;height:32px;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .metrics-overlay-container .config .vl-icon-chevron-down{color:var(--vl-text-color-accent-light);transform:rotate(-90deg)}.filler{flex:1;margin:0 4px 3px;min-width:5px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,var(--vl-text-color-accent-light) 1px,transparent 0);background-size:3px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{margin:15px 0 23px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px;line-height:26px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer;font-size:15px}.container .search-container{margin-bottom:12px}.container .search-container input{width:100%}.container .content{display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px;margin:0 -16px;border-top:1px solid var(--vl-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{width:100%}.container .footer p-button:not(:last-child){margin-right:16px}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;flex:1;align-items:center;justify-content:center;color:var(--vl-text-color-deep-accent);font-size:12px;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;padding-left:8px;border-radius:2px}.sidebar-metric:hover:not(.edit){background:var(--vl-color-light-blue)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:#c5d1e2}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--vl-text-color-secondary)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{width:100%}.sidebar-metric .action{cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .edit i{color:var(--vl-text-color-deep-accent);width:12px;height:12px}.sidebar-metric .save{background:var(--vl-primary-color);border-radius:2px}.sidebar-metric .save i{color:#fff}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--vl-text-color-accent)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i0.ChangeDetectorRef }, { type: i1$1.MetricsCalculationService }, { type: i1$1.FlowConfigurationService }, { type: i2.ShoppingCartSettingsApiService }]; }, propDecorators: { overlayPanel: [{
+            args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"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"] }]
+        }], 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]
             }] } });
@@ -1360,10 +1362,11 @@ const getDefaultProperties = (params) => {
 };
 
 class ContextGuard {
-    constructor(router, routerService, contextService) {
+    constructor(router, routerService, contextService, runtimeSettingsService) {
         this.router = router;
         this.routerService = routerService;
         this.contextService = contextService;
+        this.runtimeSettingsService = runtimeSettingsService;
     }
     checkActivation(route) {
         const { queryParams } = route;
@@ -1382,8 +1385,8 @@ class ContextGuard {
                 return of(true);
             }
         }
-        // Initialize context
-        return this.contextService.create(headerId, mode).pipe(tap((context) => {
+        // Initialize context and runtime settings
+        return forkJoin([this.contextService.create(headerId, mode), this.runtimeSettingsService.create()]).pipe(tap(([context]) => {
             // Update context with queryParams
             this.contextService.update({
                 ...context,
@@ -1393,6 +1396,8 @@ class ContextGuard {
                     ...getDefaultProperties({ mode }),
                 },
             });
+            // Init currency settings
+            this.runtimeSettingsService.initCurrency(context.properties['CurrencyIsoCode']);
         }), map(() => true), catchError(e => {
             const message = e instanceof HttpErrorResponse ? e.error.message : e;
             return this.handleError(route, message);
@@ -1434,11 +1439,11 @@ class ContextGuard {
         return from(this.router.navigate([parentUrl, '404'], { state: { message } })).pipe(map(() => false));
     }
 }
-ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i1$1.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+ContextGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, deps: [{ token: i1$2.Router }, { token: FlowRouterService }, { token: i1$1.ContextService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }, { type: i1$1.RuntimeSettingsService }]; } });
 
 class ProductUnloadGuard {
     constructor(router, contextService, quoteDraftService, configurationService, flowDialogService) {