@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.
- package/cms/cms.actions.d.ts +30 -1
- package/cms/cms.default.d.ts +2 -2
- package/cms/components/element-children/element-children.component.d.ts +3 -1
- package/cms/components/element-tools-panel/element-tools-panel.component.d.ts +14 -0
- package/cms/components/preview/preview.component.d.ts +6 -5
- package/cms/components/preview/preview.module.d.ts +2 -1
- package/cms/components/preview/preview.types.d.ts +4 -0
- package/cms/definitions/index.d.ts +1 -0
- package/cms/definitions/ui-builder.definitions.d.ts +6 -0
- package/cms/index.d.ts +2 -0
- package/cms/injection-tokens.d.ts +2 -4
- package/cms/modules/migrations/services/migrations.service.d.ts +1 -1
- package/cms/modules/migrations/types/migrations.types.d.ts +1 -1
- package/cms/modules/runtime/index.d.ts +1 -0
- package/cms/modules/runtime/services/compilation.service.d.ts +3 -2
- package/cms/modules/runtime/services/runtime-editor.service.d.ts +6 -4
- package/cms/modules/runtime/services/runtime.service.d.ts +6 -2
- package/cms/modules/runtime/types/runtime.actions.d.ts +5 -2
- package/cms/plugins/element-hover.plugin.d.ts +33 -0
- package/cms/plugins/page.plugin.d.ts +15 -0
- package/cms/plugins/script.plugin.d.ts +0 -3
- package/cms/types/common.types.d.ts +11 -1
- package/cms/types/index.d.ts +2 -0
- package/cms/types/layouts.types.d.ts +30 -2
- package/cms/types/pages.types.d.ts +1 -0
- package/cms/utils/element.utils.d.ts +1 -1
- package/cms/utils/elements-resolver.d.ts +6 -2
- package/cms/utils/index.d.ts +1 -0
- package/cms/utils/script.utils.d.ts +2 -0
- package/cms/utils/ui-builder-layout.utils.d.ts +4 -0
- package/cms/vendor-map.d.ts +13 -7
- package/core/core.module.d.ts +2 -0
- package/core/directives/directives.module.d.ts +7 -0
- package/core/directives/index.d.ts +2 -0
- package/core/directives/primeng-calendar.directive.d.ts +14 -0
- package/core/index.d.ts +2 -0
- package/core/modules/configuration/helpers.d.ts +2 -2
- package/core/modules/configuration/services/configuration-runtime.service.d.ts +2 -2
- package/core/modules/configuration/services/configuration.service.d.ts +3 -3
- package/core/pipes/date.pipe.d.ts +12 -0
- package/core/pipes/index.d.ts +4 -0
- package/core/pipes/number.pipe.d.ts +10 -0
- package/core/pipes/pipes.module.d.ts +9 -0
- package/core/pipes/price.pipe.d.ts +10 -0
- package/core/services/index.d.ts +1 -0
- package/core/services/runtime-settings.service.d.ts +21 -0
- package/core/types/formatting-settings.types.d.ts +11 -0
- package/core/types/index.d.ts +1 -0
- package/core/types/runtime.types.d.ts +1 -2
- package/core/types/ui-definition.types.d.ts +0 -40
- package/core/utils/line-item.utils.d.ts +7 -2
- package/core/utils/line-item.worker.d.ts +2 -2
- package/core/utils/ui-definition.utils.d.ts +1 -1
- package/esm2020/cms/cms.actions.mjs +42 -2
- package/esm2020/cms/cms.default.mjs +1 -1
- package/esm2020/cms/cms.elements.mjs +16 -4
- package/esm2020/cms/cms.layouts.mjs +73 -13
- package/esm2020/cms/components/element-children/element-children.component.mjs +11 -6
- package/esm2020/cms/components/element-drop-handle/element-drop-handle.component.mjs +2 -2
- package/esm2020/cms/components/element-tools-panel/element-tools-panel.component.mjs +35 -0
- package/esm2020/cms/components/preview/preview.component.mjs +18 -16
- package/esm2020/cms/components/preview/preview.module.mjs +22 -4
- package/esm2020/cms/components/preview/preview.types.mjs +1 -1
- package/esm2020/cms/definitions/index.mjs +2 -0
- package/esm2020/cms/definitions/ui-builder.definitions.mjs +18 -0
- package/esm2020/cms/index.mjs +3 -1
- package/esm2020/cms/injection-tokens.mjs +1 -2
- package/esm2020/cms/modules/migrations/migrations.mjs +10 -3
- package/esm2020/cms/modules/migrations/services/migrations.service.mjs +1 -1
- package/esm2020/cms/modules/migrations/types/migrations.types.mjs +1 -1
- package/esm2020/cms/modules/runtime/index.mjs +2 -1
- package/esm2020/cms/modules/runtime/services/compilation.service.mjs +5 -3
- package/esm2020/cms/modules/runtime/services/runtime-editor.service.mjs +5 -3
- package/esm2020/cms/modules/runtime/services/runtime.service.mjs +41 -6
- package/esm2020/cms/modules/runtime/types/runtime.actions.mjs +1 -1
- package/esm2020/cms/plugins/element-hover.plugin.mjs +121 -0
- package/esm2020/cms/plugins/page.plugin.mjs +37 -0
- package/esm2020/cms/plugins/region.plugin.mjs +3 -2
- package/esm2020/cms/plugins/script.plugin.mjs +6 -40
- package/esm2020/cms/services/integration.state.mjs +3 -6
- package/esm2020/cms/services/io-provider.service.mjs +7 -5
- package/esm2020/cms/types/common.types.mjs +1 -1
- package/esm2020/cms/types/index.mjs +3 -1
- package/esm2020/cms/types/layouts.types.mjs +70 -1
- package/esm2020/cms/types/pages.types.mjs +2 -0
- package/esm2020/cms/utils/element.utils.mjs +1 -1
- package/esm2020/cms/utils/elements-resolver.mjs +22 -8
- package/esm2020/cms/utils/index.mjs +2 -1
- package/esm2020/cms/utils/script.utils.mjs +42 -0
- package/esm2020/cms/utils/ui-builder-layout.utils.mjs +46 -0
- package/esm2020/cms/vendor-map.mjs +5 -3
- package/esm2020/core/core.module.mjs +33 -4
- package/esm2020/core/directives/directives.module.mjs +16 -0
- package/esm2020/core/directives/index.mjs +3 -0
- package/esm2020/core/directives/primeng-calendar.directive.mjs +41 -0
- package/esm2020/core/index.mjs +3 -1
- package/esm2020/core/modules/configuration/configuration.module.mjs +2 -2
- package/esm2020/core/modules/configuration/helpers.mjs +3 -6
- package/esm2020/core/modules/configuration/services/configuration-runtime.service.mjs +3 -2
- package/esm2020/core/modules/configuration/services/configuration.service.mjs +6 -5
- package/esm2020/core/modules/configuration/services/runtime-context.service.mjs +6 -12
- package/esm2020/core/pipes/date.pipe.mjs +38 -0
- package/esm2020/core/pipes/index.mjs +5 -0
- package/esm2020/core/pipes/number.pipe.mjs +27 -0
- package/esm2020/core/pipes/pipes.module.mjs +18 -0
- package/esm2020/core/pipes/price.pipe.mjs +30 -0
- package/esm2020/core/services/index.mjs +2 -1
- package/esm2020/core/services/runtime-settings.service.mjs +88 -0
- package/esm2020/core/types/formatting-settings.types.mjs +3 -0
- package/esm2020/core/types/index.mjs +2 -1
- package/esm2020/core/types/runtime.types.mjs +1 -1
- package/esm2020/core/types/ui-definition.types.mjs +1 -1
- package/esm2020/core/utils/line-item.utils.mjs +38 -16
- package/esm2020/core/utils/line-item.worker.mjs +5 -5
- package/esm2020/core/utils/ui-definition.utils.mjs +1 -1
- package/esm2020/runtime/components/ui-runtime-preview/runtime-preview.component.mjs +2 -2
- package/esm2020/runtime/services/runtime-context.service.mjs +8 -5
- package/esm2020/runtime/services/runtime.service.mjs +1 -1
- package/esm2020/runtime/types/runtime.types.mjs +1 -1
- package/esm2020/src/components/doc-gen/doc-gen.component.mjs +2 -2
- package/esm2020/src/components/header/header.component.mjs +39 -33
- package/esm2020/src/components/header/header.module.mjs +7 -3
- package/esm2020/src/components/header/metrics/metrics.component.mjs +9 -7
- package/esm2020/src/components/header/metrics/metrics.module.mjs +7 -3
- package/esm2020/src/flow-routing.module.mjs +1 -1
- package/esm2020/src/guards/context.guard.mjs +11 -8
- package/esm2020/src/pages/assets/assets.component.mjs +2 -2
- package/esm2020/src/pages/catalog/catalog.component.mjs +3 -3
- package/esm2020/src/pages/product/product.component.mjs +2 -2
- package/esm2020/src/pages/remote/remote.component.mjs +1 -1
- package/esm2020/src/pages/shopping-cart/shopping-cart.component.mjs +3 -3
- package/esm2020/src/types/flow-customization.types.mjs +1 -1
- package/fesm2015/veloceapps-sdk-cms.mjs +774 -356
- package/fesm2015/veloceapps-sdk-cms.mjs.map +1 -1
- package/fesm2015/veloceapps-sdk-core.mjs +321 -43
- package/fesm2015/veloceapps-sdk-core.mjs.map +1 -1
- package/fesm2015/veloceapps-sdk-runtime.mjs +7 -4
- package/fesm2015/veloceapps-sdk-runtime.mjs.map +1 -1
- package/fesm2015/veloceapps-sdk.mjs +70 -52
- package/fesm2015/veloceapps-sdk.mjs.map +1 -1
- package/fesm2020/veloceapps-sdk-cms.mjs +857 -358
- package/fesm2020/veloceapps-sdk-cms.mjs.map +1 -1
- package/fesm2020/veloceapps-sdk-core.mjs +314 -43
- package/fesm2020/veloceapps-sdk-core.mjs.map +1 -1
- package/fesm2020/veloceapps-sdk-runtime.mjs +7 -4
- package/fesm2020/veloceapps-sdk-runtime.mjs.map +1 -1
- package/fesm2020/veloceapps-sdk.mjs +68 -51
- package/fesm2020/veloceapps-sdk.mjs.map +1 -1
- package/package.json +1 -1
- package/runtime/components/ui-runtime-preview/runtime-preview.component.d.ts +3 -3
- package/runtime/services/runtime.service.d.ts +2 -2
- package/runtime/types/runtime.types.d.ts +2 -2
- package/src/components/doc-gen/doc-gen.component.d.ts +2 -1
- package/src/components/header/header.component.d.ts +2 -3
- package/src/components/header/header.module.d.ts +2 -1
- package/src/components/header/metrics/metrics.component.d.ts +4 -2
- package/src/components/header/metrics/metrics.module.d.ts +2 -1
- package/src/guards/context.guard.d.ts +3 -2
- package/src/pages/assets/assets.component.d.ts +2 -1
- package/src/pages/catalog/catalog.component.d.ts +2 -1
- package/src/pages/product/product.component.d.ts +2 -1
- package/src/pages/remote/remote.component.d.ts +2 -1
- package/src/pages/shopping-cart/shopping-cart.component.d.ts +2 -1
- 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,
|
17
|
-
import { Subject, BehaviorSubject, tap, takeUntil, first, catchError, of, map, switchMap, filter, shareReplay, startWith, distinctUntilChanged, combineLatest,
|
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
|
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
|
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]) =>
|
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 =
|
1110
|
+
target = lineItemsRampInstanceIdMap[li.id];
|
1100
1111
|
}
|
1101
1112
|
if (target && target.productId) {
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
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 }
|
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 }
|
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
|
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
|
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
|
1851
|
-
this.runtimeService.onSolutionReadyEvent.pipe(take
|
1852
|
-
this.runtimeService.onSolutionCancelEvent.pipe(take
|
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
|
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
|
1941
|
+
.pipe(take(1), map$1(runtimeContext => {
|
1925
1942
|
this.runtimeService.startRuntime(runtimeContext, states);
|
1926
1943
|
}))
|
1927
1944
|
.subscribe();
|