@veloceapps/sdk 4.0.2 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import * as i5 from '@angular/common';
1
+ import * as i11 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
4
  import { Component, ChangeDetectionStrategy, NgModule, Injectable, ViewChild, Input, InjectionToken, Optional, Inject } from '@angular/core';
@@ -6,7 +6,7 @@ import * as i2$2 from '@veloce/api';
6
6
  import { ApiModule } from '@veloce/api';
7
7
  import * as i3 from '@veloce/components';
8
8
  import { ToastType, LetDirectiveModule, LoaderModule } from '@veloce/components';
9
- import * as i5$1 from '@veloce/sdk/cms';
9
+ import * as i5 from '@veloce/sdk/cms';
10
10
  import { FlowAction, extractElementMetadata, extendElementMetadata, PreviewModule, OpenDocGenAction, LauncherModule } from '@veloce/sdk/cms';
11
11
  import * as i2$1 from '@veloce/sdk/core';
12
12
  import { RuntimeOperation, SdkCoreModule } from '@veloce/sdk/core';
@@ -23,7 +23,7 @@ import * as i12 from 'primeng/tooltip';
23
23
  import { TooltipModule } from 'primeng/tooltip';
24
24
  import * as i7 from '@angular/forms';
25
25
  import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
26
- import * as i5$2 from 'primeng/inputnumber';
26
+ import * as i5$1 from 'primeng/inputnumber';
27
27
  import { InputNumberModule } from 'primeng/inputnumber';
28
28
  import * as i1$1 from '@angular/router';
29
29
  import { NavigationEnd, NavigationStart, NavigationCancel, NavigationError, RouterModule } from '@angular/router';
@@ -57,7 +57,7 @@ class FlowDialogComponent {
57
57
  }
58
58
  }
59
59
  FlowDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDialogComponent, deps: [{ token: i1.DynamicDialogConfig }, { token: i1.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component });
60
- FlowDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowDialogComponent, selector: "vl-flow-dialog", ngImport: i0, template: "<div *ngIf=\"config.description\" class=\"description\">\n {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n <p-button\n *ngIf=\"config.secondaryButton\"\n styleClass=\"p-button-outlined button-text-bold\"\n [label]=\"config.secondaryButton!\"\n (onClick)=\"cancelHandler()\"\n ></p-button>\n <p-button\n styleClass=\"p-button p-button-filled\"\n [label]=\"config.primaryButton\"\n (onClick)=\"confirmHandler()\"\n ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .description{flex:1;padding:0 24px 24px;font-weight:400;font-size:12px;line-height:16px;color:var(--vl-text-color-deep-accent)}:host .form-actions{border-top:1px solid var(--vl-border-color);padding:1.5rem 2.2rem;display:flex;justify-content:flex-end;width:100%;grid-gap:10px;gap:10px}\n"], components: [{ type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
60
+ FlowDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowDialogComponent, selector: "vl-flow-dialog", ngImport: i0, template: "<div *ngIf=\"config.description\" class=\"description\">\n {{ config.description }}\n</div>\n\n<div class=\"form-actions\">\n <p-button\n *ngIf=\"config.secondaryButton\"\n styleClass=\"p-button-outlined button-text-bold\"\n [label]=\"config.secondaryButton!\"\n (onClick)=\"cancelHandler()\"\n ></p-button>\n <p-button\n styleClass=\"p-button p-button-filled\"\n [label]=\"config.primaryButton\"\n (onClick)=\"confirmHandler()\"\n ></p-button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .description{flex:1;padding:0 24px 24px;font-weight:400;font-size:12px;line-height:16px;color:var(--vl-text-color-deep-accent)}:host .form-actions{border-top:1px solid var(--vl-border-color);padding:1.5rem 2.2rem;display:flex;justify-content:flex-end;width:100%;grid-gap:10px;gap:10px}\n"], components: [{ type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
61
61
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDialogComponent, decorators: [{
62
62
  type: Component,
63
63
  args: [{
@@ -104,11 +104,11 @@ class FlowDocGenService {
104
104
  .subscribe();
105
105
  }
106
106
  }
107
- FlowDocGenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDocGenService, deps: [{ token: i5$1.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
107
+ FlowDocGenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDocGenService, deps: [{ token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
108
108
  FlowDocGenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDocGenService });
109
109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowDocGenService, decorators: [{
110
110
  type: Injectable
111
- }], ctorParameters: function () { return [{ type: i5$1.IntegrationState }]; } });
111
+ }], ctorParameters: function () { return [{ type: i5.IntegrationState }]; } });
112
112
 
113
113
  class DocGenComponent {
114
114
  constructor(quoteDraftService, contextService, templatesApi, docGenService, toastService) {
@@ -196,7 +196,7 @@ class DocGenComponent {
196
196
  }
197
197
  }
198
198
  DocGenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DocGenComponent, deps: [{ token: i2$1.QuoteDraftService }, { token: i2$1.ContextService }, { token: i2$2.UITemplatesApiService }, { token: FlowDocGenService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
199
- DocGenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DocGenComponent, selector: "vl-flow-doc-gen", ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n <ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\" [clearState]=\"true\"></vl-cms-preview>\n </ng-container>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], components: [{ type: i5$1.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
199
+ DocGenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DocGenComponent, selector: "vl-flow-doc-gen", ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n <ng-container *ngIf=\"uiDefinition$ | async as uiDefinition\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\" [clearState]=\"true\"></vl-cms-preview>\n </ng-container>\n</ng-container>\n", styles: [":host,vl-cms-preview{display:contents}\n"], components: [{ type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
200
200
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DocGenComponent, decorators: [{
201
201
  type: Component,
202
202
  args: [{
@@ -347,6 +347,7 @@ class CartPreviewComponent {
347
347
  this.form = new FormGroup({});
348
348
  this.shouldUpdate$ = new BehaviorSubject(true);
349
349
  this.destroyed$ = new Subject();
350
+ this.hasTermInProducts = false;
350
351
  this.readonlyProductId$ = combineLatest([
351
352
  this.routerService.route$,
352
353
  this.routerService.isConfigurationRoute$(),
@@ -359,7 +360,8 @@ class CartPreviewComponent {
359
360
  this.isEditMode$ = this.quoteDraftService.isEditMode$();
360
361
  }
361
362
  ngOnChanges(changes) {
362
- if (changes.products) {
363
+ const { products } = changes;
364
+ if (products) {
363
365
  this.shouldUpdate$.next(true);
364
366
  }
365
367
  }
@@ -423,10 +425,11 @@ class CartPreviewComponent {
423
425
  });
424
426
  const removedIds = Object.keys(this.form.controls).filter(id => !ids.includes(id));
425
427
  removedIds.forEach(id => this.form.removeControl(id));
428
+ this.hasTermInProducts = products.some((item) => item.hasTerm);
426
429
  }
427
430
  }
428
431
  CartPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CartPreviewComponent, deps: [{ token: i2$1.FlowConfigurationService }, { token: FlowRouterService }, { token: i2$1.ProductImagesService }, { token: i2$1.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
429
- CartPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n <ng-container *ngIf=\"products.length > 0; else empty\">\n <h2 class=\"flow-header-overlay__title\">\n <span>Products ({{ products.length }})</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <div class=\"product header\">\n <span>Product</span>\n <span class=\"text-right\">Qty</span>\n <span class=\"text-right\">MRR</span>\n <span class=\"text-right\">NRR</span>\n </div>\n\n <div class=\"scrollable-wrapper\">\n <div class=\"product\" *ngFor=\"let product of products\">\n <div\n class=\"product__info\"\n *vlLet=\"!isEditMode || product.deleted || readonlyProductId === product.productId as readonlyProduct\"\n >\n <div class=\"product__image-wrapper\">\n <div\n *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n class=\"product__image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n ></div>\n </div>\n <div class=\"flex flex-column justify-content-center\">\n <div class=\"word-break\">{{ product.name }}</div>\n <div>\n <p-button\n label=\"Configure\"\n [disabled]=\"readonlyProduct || !product.configurable\"\n styleClass=\"p-button-link p-button-sm pl-0\"\n (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n ></p-button>\n <p-button\n label=\"Delete\"\n [disabled]=\"readonlyProduct\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n (onClick)=\"deleteHandler(product)\"\n ></p-button>\n </div>\n </div>\n </div>\n\n <span>\n <p-inputNumber\n *ngIf=\"form.controls[product.id] as control\"\n class=\"qty-control\"\n [formControl]=\"$any(control)\"\n [min]=\"1\"\n [required]=\"true\"\n (onBlur)=\"controlBlurHandler(product)\"\n ></p-inputNumber>\n </span>\n <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n </div>\n\n <ng-template #noImage>\n <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n </ng-template>\n </div>\n\n <div class=\"flex justify-content-end mt-3\">\n <p-button\n label=\"Clear cart\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n [disabled]=\"!isEditMode || readonlyProductId\"\n (onClick)=\"deleteAllHandler()\"\n ></p-button>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #empty>\n <h2 class=\"flow-header-overlay__title\">\n <span>Empty Cart</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n </ng-template>\n </div>\n </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent);padding-bottom:0}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}\n"], components: [{ type: i3$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
432
+ CartPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n <ng-container *ngIf=\"products.length > 0; else empty\">\n <h2 class=\"flow-header-overlay__title\">\n <span>Products ({{ products.length }})</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <div class=\"product header\">\n <span>Product</span>\n <span class=\"text-right\">Qty</span>\n <span class=\"text-right\">MRR</span>\n <span class=\"text-right\">NRR</span>\n </div>\n\n <div class=\"scrollable-wrapper\">\n <div class=\"product\" *ngFor=\"let product of products\">\n <div\n class=\"product__info\"\n *vlLet=\"!isEditMode || product.deleted || readonlyProductId === product.productId as readonlyProduct\"\n >\n <div class=\"product__image-wrapper\">\n <div\n *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n class=\"product__image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n ></div>\n </div>\n <div class=\"flex flex-column justify-content-center\">\n <div class=\"word-break\">{{ product.name }}</div>\n <div>\n <p-button\n label=\"Configure\"\n [disabled]=\"readonlyProduct || !product.configurable || product.hasTerm\"\n styleClass=\"p-button-link p-button-sm pl-0\"\n (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n ></p-button>\n <p-button\n label=\"Delete\"\n [disabled]=\"readonlyProduct || product.hasTerm\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n (onClick)=\"deleteHandler(product)\"\n ></p-button>\n </div>\n </div>\n </div>\n\n <span>\n <p-inputNumber\n *ngIf=\"form.controls[product.id] as control\"\n class=\"qty-control\"\n [formControl]=\"$any(control)\"\n [min]=\"1\"\n [required]=\"true\"\n (onBlur)=\"controlBlurHandler(product)\"\n ></p-inputNumber>\n </span>\n <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n </div>\n\n <ng-template #noImage>\n <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n </ng-template>\n </div>\n\n <div class=\"flex justify-content-end mt-3\">\n <p-button\n label=\"Clear cart\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n [disabled]=\"!isEditMode || !!readonlyProductId || hasTermInProducts\"\n (onClick)=\"deleteAllHandler()\"\n ></p-button>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #empty>\n <h2 class=\"flow-header-overlay__title\">\n <span>Empty Cart</span>\n <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n </h2>\n\n <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n </ng-template>\n </div>\n </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent);padding-bottom:0}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}:host ::ng-deep .p-overlaypanel.navigation-settings-overlay{margin-top:20px}\n"], components: [{ type: i3$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
430
433
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CartPreviewComponent, decorators: [{
431
434
  type: Component,
432
435
  args: [{
@@ -584,6 +587,7 @@ class FlowHeaderComponent {
584
587
  this.routerService = routerService;
585
588
  this.dialogService = dialogService;
586
589
  this.integrationState = integrationState;
590
+ this.objectName = '';
587
591
  this.objectDetails$ = new BehaviorSubject({});
588
592
  this.isSaveInProgress$ = new BehaviorSubject(false);
589
593
  this.isSubmitInProgress$ = new BehaviorSubject(false);
@@ -776,6 +780,7 @@ class FlowHeaderComponent {
776
780
  const date = new Date();
777
781
  date.setHours(0, 0, 0, 0);
778
782
  const now = date.getTime();
783
+ const termParentIds = lineItems.map(li => li.rampInstanceId).filter(Boolean);
779
784
  return lineItems.reduce((result, li) => {
780
785
  // find main term line item
781
786
  if (li.rampInstanceId) {
@@ -795,6 +800,7 @@ class FlowHeaderComponent {
795
800
  name: target.name,
796
801
  configurable: target.properties['#configurable'] === 'true',
797
802
  deleted: target.actionCode === 'DELETE',
803
+ hasTerm: termParentIds.includes(target.id),
798
804
  qty: target.qty,
799
805
  mrr: this.formatMetric(target.properties.VDM_Total_MRR),
800
806
  nrr: this.formatMetric(target.properties.VDM_Total_NRR),
@@ -805,8 +811,8 @@ class FlowHeaderComponent {
805
811
  }, []);
806
812
  }
807
813
  }
808
- FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i2$1.ContextService }, { token: i2$1.QuoteDraftService }, { token: i2$2.QuoteApiService }, { token: i2$2.SalesforceApiService }, { token: i2$1.FlowConfigurationService }, { token: FlowRouterService }, { token: FlowDialogService }, { token: i5$1.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
809
- FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "<div class=\"flow-info\" *vlLet=\"objectDetails$ | async as details\">\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 </span>\n <span *ngIf=\"objectName\" class=\"object-name\">&nbsp;To {{ objectName }}</span>\n </nav>\n\n <ng-container *ngIf=\"isAccountMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Account name</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\">\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 </ul>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n</div>\n\n<div class=\"flow-navigation\">\n <nav class=\"nav-item\" [ngClass]=\"{ active: isCatalogRoute$ | async }\" (click)=\"navigateToCatalog()\">Catalog</nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"products$ | async as products\">\n <nav class=\"nav-item\" [ngClass]=\"{ active: isCartRoute$ | async }\" (click)=\"navigateToShoppingCart()\">\n Shopping Cart ({{ products.length }})\n </nav>\n\n <nav class=\"nav-popover-toggle active\" (click)=\"cart?.overlayPanel?.toggle($event)\">\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</div>\n\n<div class=\"flow-controls\" *vlLet=\"objectDetails$ | async as details\">\n <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n <ng-container *ngIf=\"isAccountMode && assetPriceLists.length > 1\">\n <nav class=\"nav-item\" (click)=\"priceListsOverlay?.toggle($event)\">\n <span>{{ priceList?.name }}</span>\n <i *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-icon-chevron-down icon-with-margin\"></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 >{{ option.name }}</span\n >\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span>{{ priceList?.name }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date: 'MM.dd.yyyy' }}</span>\n\n <span class=\"slash-separator\"></span>\n\n <span class=\"metrics\">\n <div class=\"metrics__row\">\n MRR: <span class=\"font-semibold\">${{ totalMRR$ | async }}</span>\n </div>\n <div class=\"metrics__row\">\n NRR: <span class=\"font-semibold\">${{ totalNRR$ | async }}</span>\n </div>\n </span>\n </ng-container>\n\n <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n <p-button\n class=\"doc-gen-button\"\n icon=\"vl-icon vl-icon-doc-gen\"\n (onClick)=\"docGenButtonClickHandler(isCartRoute)\"\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)\"\n [model]=\"getSplitButtonActions(isCartRoute)\"\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</div>\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.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%}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button{background-color:#fff;color:var(--vl-primary-color);border:none}: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: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-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-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 .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;grid-gap:8px;gap:8px;align-items:center}.flow-info .nav-popover-toggle{margin-left:-8px}.flow-info .object-name{text-transform:capitalize}.flow-info .nav-back{font-weight:bold}.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;padding:4px 0}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}.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;grid-gap:16px;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;grid-gap:8px;gap:8px}\n"], components: [{ type: i3$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: CartPreviewComponent, selector: "vl-cart-preview", inputs: ["products"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i9.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }], directives: [{ type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
814
+ FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i2$1.ContextService }, { token: i2$1.QuoteDraftService }, { token: i2$2.QuoteApiService }, { token: i2$2.SalesforceApiService }, { token: i2$1.FlowConfigurationService }, { token: FlowRouterService }, { token: FlowDialogService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
815
+ FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "<div class=\"flow-info\" *vlLet=\"objectDetails$ | async as details\">\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 | titlecase }}</span>\n </nav>\n\n <ng-container *ngIf=\"isAccountMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Account name</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\">\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 </ul>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n</div>\n\n<div class=\"flow-navigation\">\n <nav class=\"nav-item\" [ngClass]=\"{ active: isCatalogRoute$ | async }\" (click)=\"navigateToCatalog()\">Catalog</nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"products$ | async as products\">\n <nav class=\"nav-item\" [ngClass]=\"{ active: isCartRoute$ | async }\" (click)=\"navigateToShoppingCart()\">\n Shopping Cart ({{ products.length }})\n </nav>\n\n <nav class=\"nav-popover-toggle active\" (click)=\"cart?.overlayPanel?.toggle($event)\">\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</div>\n\n<div class=\"flow-controls\" *vlLet=\"objectDetails$ | async as details\">\n <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n <ng-container *ngIf=\"isAccountMode && assetPriceLists.length > 1\">\n <nav class=\"nav-item\" (click)=\"priceListsOverlay?.toggle($event)\">\n <span>{{ priceList?.name }}</span>\n <i *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-icon-chevron-down icon-with-margin\"></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 >{{ option.name }}</span\n >\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span>{{ priceList?.name }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date: 'MM.dd.yyyy' }}</span>\n\n <span class=\"slash-separator\"></span>\n\n <span class=\"metrics\">\n <div class=\"metrics__row\">\n MRR: <span class=\"font-semibold\">${{ totalMRR$ | async }}</span>\n </div>\n <div class=\"metrics__row\">\n NRR: <span class=\"font-semibold\">${{ totalNRR$ | async }}</span>\n </div>\n </span>\n </ng-container>\n\n <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n <p-button\n class=\"doc-gen-button\"\n icon=\"vl-icon vl-icon-doc-gen\"\n (onClick)=\"docGenButtonClickHandler(isCartRoute)\"\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)\"\n [model]=\"getSplitButtonActions(isCartRoute)\"\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</div>\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.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-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 .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;grid-gap:8px;gap:8px;align-items:center}.flow-info .nav-popover-toggle{margin-left:-8px}.flow-info .nav-back{font-weight:bold}.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;padding:4px 0}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}.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;grid-gap:16px;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;grid-gap:8px;gap:8px}\n"], components: [{ type: i3$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: CartPreviewComponent, selector: "vl-cart-preview", inputs: ["products"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i9.SplitButton, selector: "p-splitButton", inputs: ["model", "icon", "iconPos", "label", "style", "styleClass", "menuStyle", "menuStyleClass", "disabled", "tabindex", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClick", "onDropdownClick"] }], directives: [{ type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i11.AsyncPipe, "titlecase": i11.TitleCasePipe, "date": i11.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
810
816
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, decorators: [{
811
817
  type: Component,
812
818
  args: [{
@@ -815,7 +821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
815
821
  styleUrls: ['./header.component.scss'],
816
822
  changeDetection: ChangeDetectionStrategy.OnPush,
817
823
  }]
818
- }], ctorParameters: function () { return [{ type: i2$1.ContextService }, { type: i2$1.QuoteDraftService }, { type: i2$2.QuoteApiService }, { type: i2$2.SalesforceApiService }, { type: i2$1.FlowConfigurationService }, { type: FlowRouterService }, { type: FlowDialogService }, { type: i5$1.IntegrationState }]; } });
824
+ }], ctorParameters: function () { return [{ type: i2$1.ContextService }, { type: i2$1.QuoteDraftService }, { type: i2$2.QuoteApiService }, { type: i2$2.SalesforceApiService }, { type: i2$1.FlowConfigurationService }, { type: FlowRouterService }, { type: FlowDialogService }, { type: i5.IntegrationState }]; } });
819
825
 
820
826
  class FlowHeaderModule {
821
827
  }
@@ -911,11 +917,11 @@ class FlowService {
911
917
  this.cleanup$.next();
912
918
  }
913
919
  }
914
- FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowService, deps: [{ token: i5$1.IntegrationState }, { token: FlowRouterService }, { token: i2$1.QuoteDraftService }, { token: i2$1.ConfigurationService }, { token: i2$1.FlowConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
920
+ FlowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowService, deps: [{ token: i5.IntegrationState }, { token: FlowRouterService }, { token: i2$1.QuoteDraftService }, { token: i2$1.ConfigurationService }, { token: i2$1.FlowConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
915
921
  FlowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowService });
916
922
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowService, decorators: [{
917
923
  type: Injectable
918
- }], ctorParameters: function () { return [{ type: i5$1.IntegrationState }, { type: FlowRouterService }, { type: i2$1.QuoteDraftService }, { type: i2$1.ConfigurationService }, { type: i2$1.FlowConfigurationService }]; } });
924
+ }], ctorParameters: function () { return [{ type: i5.IntegrationState }, { type: FlowRouterService }, { type: i2$1.QuoteDraftService }, { type: i2$1.ConfigurationService }, { type: i2$1.FlowConfigurationService }]; } });
919
925
 
920
926
  class FlowComponent {
921
927
  constructor(routerService, quoteDraftService, flowService, docGenService, integrationState) {
@@ -937,8 +943,8 @@ class FlowComponent {
937
943
  this.docGenService.cleanup();
938
944
  }
939
945
  }
940
- FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: i2$1.QuoteDraftService }, { token: FlowService }, { token: FlowDocGenService }, { token: i5$1.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
941
- FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-header *ngIf=\"showHeader$ | async\"></vl-flow-header>\n\n<div class=\"flow-content\">\n <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <vl-loader label=\"LOADING\"></vl-loader>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n\n<ng-container *vlLet=\"isStandalone$ | async as isStandalone\">\n <vl-flow-doc-gen *ngIf=\"!isStandalone\"></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;left:0;right:0;top:0;bottom:0;background-color:#ffffff80;z-index:4}\n"], components: [{ type: FlowHeaderComponent, selector: "vl-flow-header" }, { type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: DocGenComponent, selector: "vl-flow-doc-gen" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
946
+ FlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, deps: [{ token: FlowRouterService }, { token: i2$1.QuoteDraftService }, { token: FlowService }, { token: FlowDocGenService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
947
+ FlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowComponent, selector: "vl-flow", ngImport: i0, template: "<vl-flow-header *ngIf=\"showHeader$ | async\"></vl-flow-header>\n\n<div class=\"flow-content\">\n <div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n <vl-loader label=\"LOADING\"></vl-loader>\n </div>\n\n <router-outlet></router-outlet>\n</div>\n\n<ng-container *vlLet=\"isStandalone$ | async as isStandalone\">\n <vl-flow-doc-gen *ngIf=\"!isStandalone\"></vl-flow-doc-gen>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.flow-content{flex-grow:1;position:relative;overflow:hidden}.loading-overlay{position:absolute;height:100%;width:100%;left:0;right:0;top:0;bottom:0;background-color:#ffffff80;z-index:4}\n"], components: [{ type: FlowHeaderComponent, selector: "vl-flow-header" }, { type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: DocGenComponent, selector: "vl-flow-doc-gen" }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i3.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
942
948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowComponent, decorators: [{
943
949
  type: Component,
944
950
  args: [{
@@ -947,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
947
953
  styleUrls: ['./flow.component.scss'],
948
954
  changeDetection: ChangeDetectionStrategy.OnPush,
949
955
  }]
950
- }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: i2$1.QuoteDraftService }, { type: FlowService }, { type: FlowDocGenService }, { type: i5$1.IntegrationState }]; } });
956
+ }], ctorParameters: function () { return [{ type: FlowRouterService }, { type: i2$1.QuoteDraftService }, { type: FlowService }, { type: FlowDocGenService }, { type: i5.IntegrationState }]; } });
951
957
 
952
958
  class ContextGuard {
953
959
  constructor(router, routerService, contextService) {
@@ -1182,7 +1188,7 @@ class CatalogComponent {
1182
1188
  }
1183
1189
  }
1184
1190
  CatalogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CatalogComponent, deps: [{ token: i2$2.UITemplatesApiService }, { token: i2$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1185
- CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CatalogComponent, selector: "vl-flow-catalog", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5$1.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1191
+ CatalogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CatalogComponent, selector: "vl-flow-catalog", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1186
1192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: CatalogComponent, decorators: [{
1187
1193
  type: Component,
1188
1194
  args: [{
@@ -1264,7 +1270,7 @@ class DebugComponent {
1264
1270
  }
1265
1271
  }
1266
1272
  DebugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DebugComponent, deps: [{ token: i2$2.FlowsApiService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.ContextService }, { token: i2$1.FlowConfigurationService }, { token: i2$1.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Component });
1267
- DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n <div class=\"fields-container\">\n <div class=\"field\">\n <label>SF Object ID</label>\n <input formControlName=\"id\" pInputText type=\"text\" />\n </div>\n\n <div class=\"field\">\n <label>SF Object Name</label>\n <p-dropdown\n appendTo=\"body\"\n formControlName=\"name\"\n [autoDisplayFirst]=\"false\"\n [options]=\"objectNames\"\n ></p-dropdown>\n </div>\n </div>\n\n <p-button\n styleClass=\"p-button-primary\"\n label=\"Run Flow\"\n [disabled]=\"!form.value.id || !selectedFlow\"\n (onClick)=\"runFlow()\"\n ></p-button>\n</form>\n\n<table>\n <thead>\n <tr>\n <th [width]=\"30\"></th>\n <th [width]=\"160\">ID</th>\n <th [width]=\"160\">Entry Path</th>\n <th>QueryParams</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n <td>{{ flow.id }}</td>\n <td>{{ flow.entryPath }}</td>\n <td>{{ flow.queryParamsStr }}</td>\n </tr>\n </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;grid-gap:24px;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse}tr{cursor:pointer}tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px}\n"], components: [{ type: i4.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i8.InputText, selector: "[pInputText]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1273
+ DebugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: DebugComponent, selector: "vl-flow-debug", ngImport: i0, template: "<form [formGroup]=\"form\">\n <div class=\"fields-container\">\n <div class=\"field\">\n <label>SF Object ID</label>\n <input formControlName=\"id\" pInputText type=\"text\" />\n </div>\n\n <div class=\"field\">\n <label>SF Object Name</label>\n <p-dropdown\n appendTo=\"body\"\n formControlName=\"name\"\n [autoDisplayFirst]=\"false\"\n [options]=\"objectNames\"\n ></p-dropdown>\n </div>\n </div>\n\n <p-button\n styleClass=\"p-button-primary\"\n label=\"Run Flow\"\n [disabled]=\"!form.value.id || !selectedFlow\"\n (onClick)=\"runFlow()\"\n ></p-button>\n</form>\n\n<table>\n <thead>\n <tr>\n <th [width]=\"30\"></th>\n <th [width]=\"160\">ID</th>\n <th [width]=\"160\">Entry Path</th>\n <th>QueryParams</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let flow of flows$ | async\" (click)=\"selectedFlow = flow\">\n <td><p-radioButton [inputId]=\"flow.id\" name=\"flow\" [value]=\"flow\" [(ngModel)]=\"selectedFlow\"></p-radioButton></td>\n <td>{{ flow.id }}</td>\n <td>{{ flow.entryPath }}</td>\n <td>{{ flow.queryParamsStr }}</td>\n </tr>\n </tbody>\n</table>\n", styles: [":host{display:block;padding:24px 54px}form{display:flex;align-items:center;justify-content:space-between}.fields-container{display:flex;grid-gap:24px;gap:24px}.field{display:flex;flex-direction:column;width:200px;flex-shrink:0}:host ::ng-deep .p-dropdown{width:100%}table{width:100%;border-collapse:collapse}tr{cursor:pointer}tr:hover{background-color:#f0f5fa}th{text-align:left;font-weight:600}th,td{padding:0 10px;height:30px;border-bottom:1px solid var(--vl-border-color);margin-right:16px}\n"], components: [{ type: i4.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i8.InputText, selector: "[pInputText]" }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1268
1274
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: DebugComponent, decorators: [{
1269
1275
  type: Component,
1270
1276
  args: [{
@@ -1530,7 +1536,7 @@ class ProductComponent {
1530
1536
  }
1531
1537
  }
1532
1538
  ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ProductComponent, deps: [{ token: i2$1.ContextService }, { token: i2$1.ConfigurationRuntimeService }, { token: i2$1.ConfigurationService }, { token: i2$1.QuoteDraftService }, { token: i2$3.MessageService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1533
- ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5$1.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1539
+ ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1534
1540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ProductComponent, decorators: [{
1535
1541
  type: Component,
1536
1542
  args: [{
@@ -1574,7 +1580,7 @@ class RecordNotFoundComponent {
1574
1580
  }
1575
1581
  }
1576
1582
  RecordNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RecordNotFoundComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
1577
- RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RecordNotFoundComponent, selector: "vl-flow-record-not-found", ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-md-12\">\n <div class=\"message-wrapper\">\n <div class=\"msg\">\n <div *ngIf=\"message; else defaultMessage\" class=\"message-title\">\n <p>{{ message }}</p>\n\n <p *ngIf=\"subMessage\" class=\"message-title\">{{ subMessage }}</p>\n </div>\n\n <ng-template #defaultMessage>Record not found</ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1583
+ RecordNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RecordNotFoundComponent, selector: "vl-flow-record-not-found", ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-md-12\">\n <div class=\"message-wrapper\">\n <div class=\"msg\">\n <div *ngIf=\"message; else defaultMessage\" class=\"message-title\">\n <p>{{ message }}</p>\n\n <p *ngIf=\"subMessage\" class=\"message-title\">{{ subMessage }}</p>\n </div>\n\n <ng-template #defaultMessage>Record not found</ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;padding:24px 54px}\n"], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1578
1584
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: RecordNotFoundComponent, decorators: [{
1579
1585
  type: Component,
1580
1586
  args: [{
@@ -1689,7 +1695,7 @@ class ShoppingCartComponent {
1689
1695
  }
1690
1696
  }
1691
1697
  ShoppingCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartComponent, deps: [{ token: i2$2.UITemplatesApiService }, { token: i2$1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: FLOW_CUSTOMIZATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1692
- ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ShoppingCartComponent, selector: "vl-flow-shopping-cart", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5$1.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1698
+ ShoppingCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ShoppingCartComponent, selector: "vl-flow-shopping-cart", ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n <ng-template #content>\n <ng-container *ngIf=\"!state.failure\">\n <vl-cms-preview [uiDefinition]=\"uiDefinition\"></vl-cms-preview>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [""], components: [{ type: i3.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["modelId", "uiDefinition", "clearState"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1693
1699
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ShoppingCartComponent, decorators: [{
1694
1700
  type: Component,
1695
1701
  args: [{