@veloceapps/sdk 7.0.2-5 → 7.0.2-51

Sign up to get free protection for your applications and to get access to all the features.
Files changed (164) hide show
  1. package/cms/cms.actions.d.ts +30 -1
  2. package/cms/cms.default.d.ts +2 -2
  3. package/cms/components/element-children/element-children.component.d.ts +3 -1
  4. package/cms/components/element-tools-panel/element-tools-panel.component.d.ts +14 -0
  5. package/cms/components/preview/preview.component.d.ts +6 -5
  6. package/cms/components/preview/preview.module.d.ts +2 -1
  7. package/cms/components/preview/preview.types.d.ts +4 -0
  8. package/cms/definitions/index.d.ts +1 -0
  9. package/cms/definitions/ui-builder.definitions.d.ts +6 -0
  10. package/cms/index.d.ts +2 -0
  11. package/cms/injection-tokens.d.ts +2 -4
  12. package/cms/modules/migrations/services/migrations.service.d.ts +1 -1
  13. package/cms/modules/migrations/types/migrations.types.d.ts +1 -1
  14. package/cms/modules/runtime/index.d.ts +1 -0
  15. package/cms/modules/runtime/services/compilation.service.d.ts +3 -2
  16. package/cms/modules/runtime/services/runtime-editor.service.d.ts +6 -4
  17. package/cms/modules/runtime/services/runtime.service.d.ts +6 -2
  18. package/cms/modules/runtime/types/runtime.actions.d.ts +5 -2
  19. package/cms/plugins/element-hover.plugin.d.ts +33 -0
  20. package/cms/plugins/page.plugin.d.ts +15 -0
  21. package/cms/plugins/script.plugin.d.ts +0 -3
  22. package/cms/types/common.types.d.ts +11 -1
  23. package/cms/types/index.d.ts +2 -0
  24. package/cms/types/layouts.types.d.ts +30 -2
  25. package/cms/types/pages.types.d.ts +1 -0
  26. package/cms/utils/element.utils.d.ts +1 -1
  27. package/cms/utils/elements-resolver.d.ts +6 -2
  28. package/cms/utils/index.d.ts +1 -0
  29. package/cms/utils/script.utils.d.ts +2 -0
  30. package/cms/utils/ui-builder-layout.utils.d.ts +4 -0
  31. package/cms/vendor-map.d.ts +13 -7
  32. package/core/core.module.d.ts +2 -0
  33. package/core/directives/directives.module.d.ts +7 -0
  34. package/core/directives/index.d.ts +2 -0
  35. package/core/directives/primeng-calendar.directive.d.ts +14 -0
  36. package/core/index.d.ts +2 -0
  37. package/core/modules/configuration/helpers.d.ts +2 -2
  38. package/core/modules/configuration/services/configuration-runtime.service.d.ts +2 -2
  39. package/core/modules/configuration/services/configuration.service.d.ts +3 -3
  40. package/core/pipes/date.pipe.d.ts +12 -0
  41. package/core/pipes/index.d.ts +4 -0
  42. package/core/pipes/number.pipe.d.ts +10 -0
  43. package/core/pipes/pipes.module.d.ts +9 -0
  44. package/core/pipes/price.pipe.d.ts +10 -0
  45. package/core/services/index.d.ts +1 -0
  46. package/core/services/runtime-settings.service.d.ts +21 -0
  47. package/core/types/formatting-settings.types.d.ts +11 -0
  48. package/core/types/index.d.ts +1 -0
  49. package/core/types/runtime.types.d.ts +1 -2
  50. package/core/types/ui-definition.types.d.ts +0 -40
  51. package/core/utils/line-item.utils.d.ts +7 -2
  52. package/core/utils/line-item.worker.d.ts +2 -2
  53. package/core/utils/ui-definition.utils.d.ts +1 -1
  54. package/esm2020/cms/cms.actions.mjs +42 -2
  55. package/esm2020/cms/cms.default.mjs +1 -1
  56. package/esm2020/cms/cms.elements.mjs +16 -4
  57. package/esm2020/cms/cms.layouts.mjs +73 -13
  58. package/esm2020/cms/components/element-children/element-children.component.mjs +11 -6
  59. package/esm2020/cms/components/element-drop-handle/element-drop-handle.component.mjs +2 -2
  60. package/esm2020/cms/components/element-tools-panel/element-tools-panel.component.mjs +35 -0
  61. package/esm2020/cms/components/preview/preview.component.mjs +18 -16
  62. package/esm2020/cms/components/preview/preview.module.mjs +22 -4
  63. package/esm2020/cms/components/preview/preview.types.mjs +1 -1
  64. package/esm2020/cms/definitions/index.mjs +2 -0
  65. package/esm2020/cms/definitions/ui-builder.definitions.mjs +18 -0
  66. package/esm2020/cms/index.mjs +3 -1
  67. package/esm2020/cms/injection-tokens.mjs +1 -2
  68. package/esm2020/cms/modules/migrations/migrations.mjs +10 -3
  69. package/esm2020/cms/modules/migrations/services/migrations.service.mjs +1 -1
  70. package/esm2020/cms/modules/migrations/types/migrations.types.mjs +1 -1
  71. package/esm2020/cms/modules/runtime/index.mjs +2 -1
  72. package/esm2020/cms/modules/runtime/services/compilation.service.mjs +5 -3
  73. package/esm2020/cms/modules/runtime/services/runtime-editor.service.mjs +5 -3
  74. package/esm2020/cms/modules/runtime/services/runtime.service.mjs +41 -6
  75. package/esm2020/cms/modules/runtime/types/runtime.actions.mjs +1 -1
  76. package/esm2020/cms/plugins/element-hover.plugin.mjs +121 -0
  77. package/esm2020/cms/plugins/page.plugin.mjs +37 -0
  78. package/esm2020/cms/plugins/region.plugin.mjs +3 -2
  79. package/esm2020/cms/plugins/script.plugin.mjs +6 -40
  80. package/esm2020/cms/services/integration.state.mjs +3 -6
  81. package/esm2020/cms/services/io-provider.service.mjs +7 -5
  82. package/esm2020/cms/types/common.types.mjs +1 -1
  83. package/esm2020/cms/types/index.mjs +3 -1
  84. package/esm2020/cms/types/layouts.types.mjs +70 -1
  85. package/esm2020/cms/types/pages.types.mjs +2 -0
  86. package/esm2020/cms/utils/element.utils.mjs +1 -1
  87. package/esm2020/cms/utils/elements-resolver.mjs +22 -8
  88. package/esm2020/cms/utils/index.mjs +2 -1
  89. package/esm2020/cms/utils/script.utils.mjs +42 -0
  90. package/esm2020/cms/utils/ui-builder-layout.utils.mjs +46 -0
  91. package/esm2020/cms/vendor-map.mjs +5 -3
  92. package/esm2020/core/core.module.mjs +33 -4
  93. package/esm2020/core/directives/directives.module.mjs +16 -0
  94. package/esm2020/core/directives/index.mjs +3 -0
  95. package/esm2020/core/directives/primeng-calendar.directive.mjs +41 -0
  96. package/esm2020/core/index.mjs +3 -1
  97. package/esm2020/core/modules/configuration/configuration.module.mjs +2 -2
  98. package/esm2020/core/modules/configuration/helpers.mjs +3 -6
  99. package/esm2020/core/modules/configuration/services/configuration-runtime.service.mjs +3 -2
  100. package/esm2020/core/modules/configuration/services/configuration.service.mjs +6 -5
  101. package/esm2020/core/modules/configuration/services/runtime-context.service.mjs +6 -12
  102. package/esm2020/core/pipes/date.pipe.mjs +38 -0
  103. package/esm2020/core/pipes/index.mjs +5 -0
  104. package/esm2020/core/pipes/number.pipe.mjs +27 -0
  105. package/esm2020/core/pipes/pipes.module.mjs +18 -0
  106. package/esm2020/core/pipes/price.pipe.mjs +30 -0
  107. package/esm2020/core/services/index.mjs +2 -1
  108. package/esm2020/core/services/runtime-settings.service.mjs +88 -0
  109. package/esm2020/core/types/formatting-settings.types.mjs +3 -0
  110. package/esm2020/core/types/index.mjs +2 -1
  111. package/esm2020/core/types/runtime.types.mjs +1 -1
  112. package/esm2020/core/types/ui-definition.types.mjs +1 -1
  113. package/esm2020/core/utils/line-item.utils.mjs +38 -16
  114. package/esm2020/core/utils/line-item.worker.mjs +5 -5
  115. package/esm2020/core/utils/ui-definition.utils.mjs +1 -1
  116. package/esm2020/runtime/components/ui-runtime-preview/runtime-preview.component.mjs +2 -2
  117. package/esm2020/runtime/services/runtime-context.service.mjs +8 -5
  118. package/esm2020/runtime/services/runtime.service.mjs +1 -1
  119. package/esm2020/runtime/types/runtime.types.mjs +1 -1
  120. package/esm2020/src/components/doc-gen/doc-gen.component.mjs +2 -2
  121. package/esm2020/src/components/header/header.component.mjs +39 -33
  122. package/esm2020/src/components/header/header.module.mjs +7 -3
  123. package/esm2020/src/components/header/metrics/metrics.component.mjs +9 -7
  124. package/esm2020/src/components/header/metrics/metrics.module.mjs +7 -3
  125. package/esm2020/src/flow-routing.module.mjs +1 -1
  126. package/esm2020/src/guards/context.guard.mjs +11 -8
  127. package/esm2020/src/pages/assets/assets.component.mjs +2 -2
  128. package/esm2020/src/pages/catalog/catalog.component.mjs +3 -3
  129. package/esm2020/src/pages/product/product.component.mjs +2 -2
  130. package/esm2020/src/pages/remote/remote.component.mjs +1 -1
  131. package/esm2020/src/pages/shopping-cart/shopping-cart.component.mjs +3 -3
  132. package/esm2020/src/types/flow-customization.types.mjs +1 -1
  133. package/fesm2015/veloceapps-sdk-cms.mjs +774 -356
  134. package/fesm2015/veloceapps-sdk-cms.mjs.map +1 -1
  135. package/fesm2015/veloceapps-sdk-core.mjs +321 -43
  136. package/fesm2015/veloceapps-sdk-core.mjs.map +1 -1
  137. package/fesm2015/veloceapps-sdk-runtime.mjs +7 -4
  138. package/fesm2015/veloceapps-sdk-runtime.mjs.map +1 -1
  139. package/fesm2015/veloceapps-sdk.mjs +70 -52
  140. package/fesm2015/veloceapps-sdk.mjs.map +1 -1
  141. package/fesm2020/veloceapps-sdk-cms.mjs +857 -358
  142. package/fesm2020/veloceapps-sdk-cms.mjs.map +1 -1
  143. package/fesm2020/veloceapps-sdk-core.mjs +314 -43
  144. package/fesm2020/veloceapps-sdk-core.mjs.map +1 -1
  145. package/fesm2020/veloceapps-sdk-runtime.mjs +7 -4
  146. package/fesm2020/veloceapps-sdk-runtime.mjs.map +1 -1
  147. package/fesm2020/veloceapps-sdk.mjs +68 -51
  148. package/fesm2020/veloceapps-sdk.mjs.map +1 -1
  149. package/package.json +1 -1
  150. package/runtime/components/ui-runtime-preview/runtime-preview.component.d.ts +3 -3
  151. package/runtime/services/runtime.service.d.ts +2 -2
  152. package/runtime/types/runtime.types.d.ts +2 -2
  153. package/src/components/doc-gen/doc-gen.component.d.ts +2 -1
  154. package/src/components/header/header.component.d.ts +2 -3
  155. package/src/components/header/header.module.d.ts +2 -1
  156. package/src/components/header/metrics/metrics.component.d.ts +4 -2
  157. package/src/components/header/metrics/metrics.module.d.ts +2 -1
  158. package/src/guards/context.guard.d.ts +3 -2
  159. package/src/pages/assets/assets.component.d.ts +2 -1
  160. package/src/pages/catalog/catalog.component.d.ts +2 -1
  161. package/src/pages/product/product.component.d.ts +2 -1
  162. package/src/pages/remote/remote.component.d.ts +2 -1
  163. package/src/pages/shopping-cart/shopping-cart.component.d.ts +2 -1
  164. package/src/types/flow-customization.types.d.ts +1 -2
@@ -9,12 +9,12 @@ import { ToastType, LetDirectiveModule, ErrorTooltipModule, HiddenTextTooltipMod
9
9
  import * as i5 from '@veloceapps/sdk/cms';
10
10
  import { FlowAction, extractElementMetadata, extendElementMetadata, PreviewModule, OpenDocGenAction, LauncherModule } from '@veloceapps/sdk/cms';
11
11
  import * as i1$1 from '@veloceapps/sdk/core';
12
- import { RuntimeOperation, generateModifiedAssetsMap, SdkCoreModule } from '@veloceapps/sdk/core';
12
+ import { isLineItemModified, getOriginParent, SdkPipesModule, RuntimeOperation, generateModifiedAssetsMap, SdkCoreModule } from '@veloceapps/sdk/core';
13
13
  import * as i3$1 from 'primeng/button';
14
14
  import { ButtonModule } from 'primeng/button';
15
15
  import * as i1 from 'primeng/dynamicdialog';
16
- import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, getSupportedDateFormats, EntityUtil, UUID } from '@veloceapps/core';
17
- import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, take, finalize, noop, from, throwError } from 'rxjs';
16
+ import { UITemplateComponentType, UITemplateType, SalesforceIdUtils, ConfigurationContextMode, EntityUtil, UUID } from '@veloceapps/core';
17
+ import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest, finalize, noop, forkJoin, from, throwError } from 'rxjs';
18
18
  import * as i7 from 'primeng/overlaypanel';
19
19
  import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
20
20
  import * as i13 from 'primeng/splitbutton';
@@ -34,7 +34,7 @@ import * as i5$1 from '@angular/cdk/drag-drop';
34
34
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
35
35
  import { requiredValidator, invalidCharactersValidator, standardCharSetWithSpaceRegExp, reservedIdentifierValidator } from '@veloceapps/core/forms';
36
36
  import { cloneDeep, uniq } from 'lodash';
37
- 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';
37
+ 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';
38
38
  import * as i9$1 from 'primeng/sidebar';
39
39
  import { SidebarModule } from 'primeng/sidebar';
40
40
  import * as i10$1 from 'primeng/inputtext';
@@ -622,13 +622,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
622
622
  const METRICS_STORAGE_KEY = 'vl-metrics';
623
623
 
624
624
  class MetricsComponent {
625
- constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService) {
625
+ constructor(contextService, quoteDraftService, cdr, metricsCalculationService, flowConfiguration, shoppingCartSettingsApiService, runtimeSettings) {
626
626
  this.contextService = contextService;
627
627
  this.quoteDraftService = quoteDraftService;
628
628
  this.cdr = cdr;
629
629
  this.metricsCalculationService = metricsCalculationService;
630
630
  this.flowConfiguration = flowConfiguration;
631
631
  this.shoppingCartSettingsApiService = shoppingCartSettingsApiService;
632
+ this.runtimeSettings = runtimeSettings;
632
633
  this.emptyStateMetrics = [
633
634
  { name: 'MRR', value: 0 },
634
635
  { name: 'E.MRR', value: 0 },
@@ -653,6 +654,7 @@ class MetricsComponent {
653
654
  this.metricKeys = [];
654
655
  this.lastSavedMetrics = [];
655
656
  this.destroyed$ = new Subject();
657
+ this.currencySymbol = this.runtimeSettings.getCurrencySettings().symbol;
656
658
  }
657
659
  ngOnInit() {
658
660
  this.activeMetricRules = this.flowConfiguration.activeMetricsSnapshot.filter(metricRule => metricRule.metrics.some(metric => !!metric.totalName));
@@ -814,18 +816,18 @@ class MetricsComponent {
814
816
  });
815
817
  }
816
818
  }
817
- 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 });
818
- 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 });
819
+ 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 });
820
+ 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 });
819
821
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsComponent, decorators: [{
820
822
  type: Component,
821
- 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"] }]
822
- }], 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: [{
823
+ 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"] }]
824
+ }], 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: [{
823
825
  type: ViewChild,
824
826
  args: [OverlayPanel]
825
827
  }] } });
826
828
 
827
829
  class FlowHeaderComponent {
828
- constructor(contextService, quoteDraftService, quoteApiService, sfApiService, flowConfiguration, routerService, dialogService, integrationState, shoppingCartSettingsApiService) {
830
+ constructor(contextService, quoteDraftService, quoteApiService, sfApiService, flowConfiguration, routerService, dialogService, integrationState) {
829
831
  this.contextService = contextService;
830
832
  this.quoteDraftService = quoteDraftService;
831
833
  this.quoteApiService = quoteApiService;
@@ -834,7 +836,6 @@ class FlowHeaderComponent {
834
836
  this.routerService = routerService;
835
837
  this.dialogService = dialogService;
836
838
  this.integrationState = integrationState;
837
- this.shoppingCartSettingsApiService = shoppingCartSettingsApiService;
838
839
  this.isSaveInProgress$ = new BehaviorSubject(false);
839
840
  this.isSubmitInProgress$ = new BehaviorSubject(false);
840
841
  this.dateFormat = 'MM.dd.yyyy';
@@ -854,12 +855,6 @@ class FlowHeaderComponent {
854
855
  this.isCatalogRoute$ = this.routerService.isCatalogRoute$();
855
856
  this.isAssetsRoute$ = this.routerService.isAssetsRoute$();
856
857
  this.objectDetails$ = this.getObjectDetails$();
857
- this.shoppingCartSettingsApiService
858
- .getSettingsMap()
859
- .pipe(take(1))
860
- .subscribe(settings => {
861
- this.dateFormat = getSupportedDateFormats(settings.DATE_FORMAT ?? this.dateFormat).datePipeFormat;
862
- });
863
858
  }
864
859
  ngOnInit() {
865
860
  this.contextService
@@ -1076,7 +1071,19 @@ class FlowHeaderComponent {
1076
1071
  return combineLatest([
1077
1072
  this.flowConfiguration.get(),
1078
1073
  this.integrationState.state$.pipe(map(state => state.modifiedAssets), distinctUntilChanged()),
1079
- ]).pipe(map(([lineItems, modifiedAssets]) => lineItems.filter(li => li.status !== 'EXIST' || (li.assetId && modifiedAssets?.[li.assetId]))));
1074
+ ]).pipe(map(([lineItems, modifiedAssets]) => {
1075
+ const currentTerms = lineItems.reduce((acc, li) => {
1076
+ const assetId = li.assetId || li.openOrderLineItemId;
1077
+ const isModified = isLineItemModified(li);
1078
+ const currentTerm = getOriginParent(lineItems, li) ?? li;
1079
+ if (isModified || (assetId && modifiedAssets?.[assetId])) {
1080
+ acc.push(currentTerm);
1081
+ }
1082
+ return acc;
1083
+ }, []);
1084
+ const uniqCurrentTerms = currentTerms.filter((value, index, array) => array.indexOf(value) === index);
1085
+ return uniqCurrentTerms;
1086
+ }));
1080
1087
  }
1081
1088
  getAssets$() {
1082
1089
  return this.flowConfiguration
@@ -1088,6 +1095,10 @@ class FlowHeaderComponent {
1088
1095
  date.setHours(0, 0, 0, 0);
1089
1096
  const now = date.getTime();
1090
1097
  const termParentIds = lineItems.map(li => li.rampInstanceId).filter(Boolean);
1098
+ const lineItemsRampInstanceIdMap = lineItems.reduce((acc, li) => {
1099
+ acc[li.rampInstanceId ?? ''] = li;
1100
+ return acc;
1101
+ }, {});
1091
1102
  return lineItems.reduce((result, li) => {
1092
1103
  // find main term line item
1093
1104
  if (li.rampInstanceId) {
@@ -1096,23 +1107,20 @@ class FlowHeaderComponent {
1096
1107
  // find current term line item
1097
1108
  let target = li;
1098
1109
  while (target && target.endDate && new Date(target.endDate).getTime() <= now) {
1099
- target = lineItems.find(sub => sub.rampInstanceId === li.id);
1110
+ target = lineItemsRampInstanceIdMap[li.id];
1100
1111
  }
1101
1112
  if (target && target.productId) {
1102
- return [
1103
- ...result,
1104
- {
1105
- id: target.id,
1106
- productId: target.productId,
1107
- name: target.name,
1108
- configurable: target.properties['#configurable'] === 'true',
1109
- deleted: target.actionCode === 'DELETE',
1110
- hasTerm: termParentIds.includes(target.id),
1111
- qty: target.qty,
1112
- mrr: this.formatMetric(target.properties.VDM_Total_MRR),
1113
- nrr: this.formatMetric(target.properties.VDM_Total_NRR),
1114
- },
1115
- ];
1113
+ result.push({
1114
+ id: target.id,
1115
+ productId: target.productId,
1116
+ name: target.name,
1117
+ configurable: target.properties['#configurable'] === 'true',
1118
+ deleted: target.actionCode === 'DELETE',
1119
+ hasTerm: termParentIds.includes(target.id),
1120
+ qty: target.qty,
1121
+ mrr: this.formatMetric(target.properties.VDM_Total_MRR),
1122
+ nrr: this.formatMetric(target.properties.VDM_Total_NRR),
1123
+ });
1116
1124
  }
1117
1125
  return result;
1118
1126
  }, []);
@@ -1127,12 +1135,12 @@ class FlowHeaderComponent {
1127
1135
  return noUpdates && sameNumberOfProducts;
1128
1136
  }
1129
1137
  }
1130
- 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 });
1131
- 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 });
1138
+ 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 });
1139
+ 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 });
1132
1140
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowHeaderComponent, decorators: [{
1133
1141
  type: Component,
1134
- 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"] }]
1135
- }], 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 }]; } });
1142
+ 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"] }]
1143
+ }], 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 }]; } });
1136
1144
 
1137
1145
  class MetricsModule {
1138
1146
  }
@@ -1149,7 +1157,8 @@ MetricsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
1149
1157
  LetDirectiveModule,
1150
1158
  VirtualScrollerModule,
1151
1159
  ErrorTooltipModule,
1152
- HiddenTextTooltipModule], exports: [MetricsComponent] });
1160
+ HiddenTextTooltipModule,
1161
+ SdkPipesModule], exports: [MetricsComponent] });
1153
1162
  MetricsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsModule, imports: [CommonModule,
1154
1163
  FormsModule,
1155
1164
  ReactiveFormsModule,
@@ -1162,7 +1171,8 @@ MetricsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
1162
1171
  LetDirectiveModule,
1163
1172
  VirtualScrollerModule,
1164
1173
  ErrorTooltipModule,
1165
- HiddenTextTooltipModule] });
1174
+ HiddenTextTooltipModule,
1175
+ SdkPipesModule] });
1166
1176
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MetricsModule, decorators: [{
1167
1177
  type: NgModule,
1168
1178
  args: [{
@@ -1181,6 +1191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
1181
1191
  VirtualScrollerModule,
1182
1192
  ErrorTooltipModule,
1183
1193
  HiddenTextTooltipModule,
1194
+ SdkPipesModule,
1184
1195
  ],
1185
1196
  exports: [MetricsComponent],
1186
1197
  }]
@@ -1196,7 +1207,8 @@ FlowHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
1196
1207
  ButtonModule,
1197
1208
  CartPreviewModule,
1198
1209
  SplitButtonModule,
1199
- MetricsModule], exports: [FlowHeaderComponent] });
1210
+ MetricsModule,
1211
+ SdkPipesModule], exports: [FlowHeaderComponent] });
1200
1212
  FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowHeaderModule, imports: [CommonModule,
1201
1213
  OverlayPanelModule,
1202
1214
  LetDirectiveModule,
@@ -1204,7 +1216,8 @@ FlowHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
1204
1216
  ButtonModule,
1205
1217
  CartPreviewModule,
1206
1218
  SplitButtonModule,
1207
- MetricsModule] });
1219
+ MetricsModule,
1220
+ SdkPipesModule] });
1208
1221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FlowHeaderModule, decorators: [{
1209
1222
  type: NgModule,
1210
1223
  args: [{
@@ -1218,6 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
1218
1231
  CartPreviewModule,
1219
1232
  SplitButtonModule,
1220
1233
  MetricsModule,
1234
+ SdkPipesModule,
1221
1235
  ],
1222
1236
  exports: [FlowHeaderComponent],
1223
1237
  }]
@@ -1348,10 +1362,11 @@ const getDefaultProperties = (params) => {
1348
1362
  };
1349
1363
 
1350
1364
  class ContextGuard {
1351
- constructor(router, routerService, contextService) {
1365
+ constructor(router, routerService, contextService, runtimeSettingsService) {
1352
1366
  this.router = router;
1353
1367
  this.routerService = routerService;
1354
1368
  this.contextService = contextService;
1369
+ this.runtimeSettingsService = runtimeSettingsService;
1355
1370
  }
1356
1371
  checkActivation(route) {
1357
1372
  const { queryParams } = route;
@@ -1370,8 +1385,8 @@ class ContextGuard {
1370
1385
  return of(true);
1371
1386
  }
1372
1387
  }
1373
- // Initialize context
1374
- return this.contextService.create(headerId, mode).pipe(tap((context) => {
1388
+ // Initialize context and runtime settings
1389
+ return forkJoin([this.contextService.create(headerId, mode), this.runtimeSettingsService.create()]).pipe(tap(([context]) => {
1375
1390
  // Update context with queryParams
1376
1391
  this.contextService.update({
1377
1392
  ...context,
@@ -1381,6 +1396,8 @@ class ContextGuard {
1381
1396
  ...getDefaultProperties({ mode }),
1382
1397
  },
1383
1398
  });
1399
+ // Init currency settings
1400
+ this.runtimeSettingsService.initCurrency(context.properties['CurrencyIsoCode']);
1384
1401
  }), map(() => true), catchError(e => {
1385
1402
  const message = e instanceof HttpErrorResponse ? e.error.message : e;
1386
1403
  return this.handleError(route, message);
@@ -1422,11 +1439,11 @@ class ContextGuard {
1422
1439
  return from(this.router.navigate([parentUrl, '404'], { state: { message } })).pipe(map(() => false));
1423
1440
  }
1424
1441
  }
1425
- 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 });
1442
+ 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 });
1426
1443
  ContextGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard });
1427
1444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextGuard, decorators: [{
1428
1445
  type: Injectable
1429
- }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }]; } });
1446
+ }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: FlowRouterService }, { type: i1$1.ContextService }, { type: i1$1.RuntimeSettingsService }]; } });
1430
1447
 
1431
1448
  class ProductUnloadGuard {
1432
1449
  constructor(router, contextService, quoteDraftService, configurationService, flowDialogService) {
@@ -1847,9 +1864,9 @@ class LegacyProductComponent {
1847
1864
  this.quoteDraftService.quoteDraft$
1848
1865
  .pipe(first$1(), takeUntil$1(this.destroyed$))
1849
1866
  .subscribe(quote => this.init(quote, this.route.snapshot.queryParams));
1850
- this.runtimeService.onSolutionStopEvent.pipe(take$1(1)).subscribe(lineItem => this.onSolutionStop(lineItem));
1851
- this.runtimeService.onSolutionReadyEvent.pipe(take$1(1)).subscribe(event => this.onSolutionReady(event));
1852
- this.runtimeService.onSolutionCancelEvent.pipe(take$1(1)).subscribe(() => this.onSolutionCancel());
1867
+ this.runtimeService.onSolutionStopEvent.pipe(take(1)).subscribe(lineItem => this.onSolutionStop(lineItem));
1868
+ this.runtimeService.onSolutionReadyEvent.pipe(take(1)).subscribe(event => this.onSolutionReady(event));
1869
+ this.runtimeService.onSolutionCancelEvent.pipe(take(1)).subscribe(() => this.onSolutionCancel());
1853
1870
  }
1854
1871
  ngOnDestroy() {
1855
1872
  this.destroyed$.next();
@@ -1880,7 +1897,7 @@ class LegacyProductComponent {
1880
1897
  };
1881
1898
  this.quoteApiService
1882
1899
  .upsertQuote(quoteToUpsert)
1883
- .pipe(take$1(1))
1900
+ .pipe(take(1))
1884
1901
  .subscribe(quote => {
1885
1902
  window['VELO_BACK_FN'].apply(null, [quote.quoteId]);
1886
1903
  });
@@ -1921,7 +1938,7 @@ class LegacyProductComponent {
1921
1938
  }
1922
1939
  startRuntime(states, runtimeContext$) {
1923
1940
  runtimeContext$
1924
- .pipe(take$1(1), map$1(runtimeContext => {
1941
+ .pipe(take(1), map$1(runtimeContext => {
1925
1942
  this.runtimeService.startRuntime(runtimeContext, states);
1926
1943
  }))
1927
1944
  .subscribe();