@veloceapps/sdk 8.0.0-29 → 8.0.0-30

package/fesm2020/veloceapps-sdk.mjs

@@ -1292,10 +1292,10 @@ class FlowHeaderComponent {
     }
 }
 FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i2.QuoteApiService }, { token: i2.SalesforceApiService }, { token: i1$1.FlowConfigurationService }, { token: FlowRouterService }, { token: FlowDialogService }, { token: i5.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
-FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\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=\"nav-item\">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-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\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          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\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\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </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\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\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-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\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 class=\"price-plan\">\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 *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-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          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\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{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;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-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.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:32px}nav.disabled{opacity:.6;cursor:default}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:16px;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:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.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:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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$1.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "directive", type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\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=\"nav-item\">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-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\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          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\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\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </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\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\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-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\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 class=\"price-plan\">\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 *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-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          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\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{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;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-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.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:32px}nav.disabled{opacity:.6;cursor:default}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:16px;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:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.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:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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$1.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { kind: "directive", type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FlowHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"contextProperties$ | async as contextProperties\">\n  <ng-container *ngIf=\"objectDetails$ | async as details\">\n    <div class=\"flow-info\">\n      <nav class=\"nav-item nav-back\" (click)=\"back()\">\n        <i class=\"nav-icon vl-icon vl-icon-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\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=\"nav-item\">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-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\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          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\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\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </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\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\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-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\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 class=\"price-plan\">\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 *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-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          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\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{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;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-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.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:32px}nav.disabled{opacity:.6;cursor:default}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:16px;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:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.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:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"] }]
+            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-back\"></i>\n      </nav>\n\n      <ng-container *ngIf=\"isAccountMode$ | async\">\n        <nav\n          class=\"account-name nav-item\"\n          [pTooltip]=\"contextProperties.Name ?? ''\"\n          tooltipPosition=\"bottom\"\n          [showDelay]=\"1000\"\n        >\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=\"nav-item\">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-arrow-down icon-with-margin\"></i>\n          <i *ngIf=\"quoteDetails.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n        </nav>\n\n        <p-overlayPanel styleClass=\"catalog-overlay quote-info-overlay\" #quoteDetails>\n          <ng-template pTemplate>\n            <div class=\"quote-info\">\n              <div class=\"title\">\n                <span>Quote Information</span>\n                <span class=\"close-action\" (click)=\"quoteDetails.hide()\">\n                  <i class=\"vl-icon vl-cross\"></i>\n                </span>\n              </div>\n\n              <div class=\"details\">\n                <div class=\"details-row\">\n                  <div class=\"label\">Account Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.accountId)\">\n                      {{ details.accountName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Opportunity Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">\n                      {{ details.opportunityName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Name</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteName }}\n                    </a>\n                  </div>\n                </div>\n                <div class=\"details-row\">\n                  <div class=\"label\">Quote Number</div>\n                  <div class=\"value\">\n                    <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">\n                      {{ details.quoteNumber }}\n                    </a>\n                  </div>\n                </div>\n              </div>\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          *vlLet=\"assetsCount$ | async as assetsCount\"\n          [ngClass]=\"{ active: (isAssetsRoute$ | async), disabled: isReadonlyMode }\"\n          (click)=\"navigateToAssets()\"\n        >\n          Assets\n          <div *ngIf=\"assetsCount\" class=\"counter\">{{ assetsCount }}</div>\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\n          *vlLet=\"isConfigurationRoute$ | async as isConfigurationRoute\"\n          class=\"nav-item\"\n          [ngClass]=\"{ active: isConfigurationRoute, disabled: !isConfigurationRoute }\"\n        >\n          Configurator\n        </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\n            <div *ngIf=\"products?.length\" class=\"counter\">{{ products?.length }}</div>\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-arrow-down icon-with-margin\"></i>\n              <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-arrow-up icon-with-margin\"></i>\n            </nav>\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 class=\"price-plan\">\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 *ngIf=\"!priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-down icon-with-margin\"></i>\n                  <i *ngIf=\"priceListsOverlay?.overlayVisible\" class=\"vl-icon vl-arrow-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          <ng-container *vlLet=\"isSaveInProgress$ | async as isSaveInProgress\">\n            <ng-container *vlLet=\"isSubmitInProgress$ | async as isSubmitInProgress\">\n              <p-splitButton\n                *ngIf=\"!isSaveInProgress && !isSubmitInProgress\"\n                #splitButton\n                label=\"Save to Quote\"\n                (onClick)=\"saveButtonClickHandler(isCartRoute === true)\"\n                [model]=\"getSplitButtonActions(isCartRoute === true)\"\n                [disabled]=\"isReadonlyMode === true\"\n                styleClass=\"catalog-split-button p-button-outlined\"\n                [class.opened]=\"splitButton?.menu?.visible\"\n                icon=\"vl-icon vl-arrow-down\"\n                [menuStyle]=\"{ width: '144px' }\"\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{font-family:var(--cg-font-family);display:flex;align-items:center;height:48px;width:100%;background-color:var(--cg-primary-color);color:#fff;padding:0 16px;flex-shrink:0}:host *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.quote-info-overlay{margin-left:-16px}.quote-info{width:348px}.quote-info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px;font-style:normal;font-weight:500;line-height:20px}.quote-info .title .close-action{padding:4px}.quote-info .title .vl-icon{cursor:pointer}.quote-info .details .details-row{display:flex;align-items:center}.quote-info .details .details-row .label,.quote-info .details .details-row .value{flex:1;padding:8px;color:var(--cg-black)}.quote-info .details .details-row .label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.2px}.quote-info .details .details-row .value{text-align:right}.quote-info .details .details-row a{color:var(--cg-black);text-decoration:none;font-size:12px;line-height:18px;letter-spacing:.3px;border-bottom:1px solid var(--cg-black)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton{padding:8px 0 8px 16px;border-top-left-radius:24px;border-bottom-left-radius:24px;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-defaultbutton .p-button-icon{display:none}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton{width:16px;box-sizing:content-box;padding:8px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none;color:var(--cg-white);background:var(--cg-primary-color);border-color:var(--cg-white)}:host ::ng-deep .catalog-split-button .p-splitbutton-menubutton:hover:enabled{border-left:none}:host ::ng-deep .catalog-split-button .p-button{line-height:16px}:host ::ng-deep .catalog-split-button .p-button-label{font-size:12px;font-weight:300}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button:hover .p-splitbutton-defaultbutton:hover,:host ::ng-deep .catalog-split-button:hover .p-splitbutton-menubutton:hover{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay{overflow:hidden;margin-top:4px;padding:0;border-radius:8px;box-shadow:0 8px 32px #0000001a}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem:not(:last-child){border-bottom:1px solid var(--cg-border-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link{padding:8px;color:var(--cg-primary-color);white-space:nowrap;font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link .p-menuitem-text{color:var(--cg-primary-color)}:host ::ng-deep .catalog-split-button .p-menu-overlay .p-menuitem-link:hover{background:var(--cg-bg-color)}:host ::ng-deep p-splitButton.opened .p-button-icon{transform:rotate(180deg)}:host ::ng-deep p-splitButton.opened .p-splitbutton-defaultbutton,:host ::ng-deep p-splitButton.opened .p-splitbutton-menubutton{color:var(--cg-primary-color);background:var(--cg-white);border-color:var(--cg-primary-color)}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:136px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:24px;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-item{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px}.flow-info .nav-popover-toggle{margin-left:-8px}.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:32px}nav.disabled{opacity:.6;cursor:default}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:16px;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:2px;height:2px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-navigation{margin-left:16px;margin-right:auto;display:flex;gap:8px;justify-content:center}.flow-navigation .nav-item{padding:8px 16px;border-radius:32px;color:#ffffff80;font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.flow-navigation .nav-item:not(.disabled):hover:not(.active){color:var(--cg-white);background:rgba(255,255,255,.1)}.flow-navigation .nav-item:not(.disabled).active{color:var(--cg-white)}.flow-navigation .cart-nav-container{display:flex}.flow-navigation .nav-popover-toggle{margin-left:8px}.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:8px;font-size:12px;line-height:16px}.flow-controls .price-plan{color:#ffffffb3}.counter{margin-left:8px;height:16px;min-width:16px;text-align:center;background:rgba(255,255,255,.2);border-radius:16px;padding:0 4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i2.QuoteApiService }, { type: i2.SalesforceApiService }, { type: i1$1.FlowConfigurationService }, { type: FlowRouterService }, { type: FlowDialogService }, { type: i5.IntegrationState }]; } });
 
 class MetricsModule {
@@ -1439,6 +1439,7 @@ class FlowService {
                 return of(undefined);
             }
             const isNewLineItem = quoteDraft.currentState.every(li => li.id !== lineItem.id);
+            const assetId = lineItem.assetId || lineItem.openOrderLineItemId;
             let updatedState;
             if (isNewLineItem) {
                 updatedState = [...quoteDraft.currentState, lineItem];
@@ -1446,7 +1447,14 @@ class FlowService {
             else {
                 updatedState = quoteDraft.currentState.map(li => (li.id === lineItem.id ? lineItem : li));
             }
-            return this.flowConfigurationService.calculate$({ ...quoteDraft, currentState: updatedState });
+            return this.flowConfigurationService.calculate$({ ...quoteDraft, currentState: updatedState }).pipe(tap(() => {
+                if (assetId) {
+                    const modifiedAssets = this.integrationState.state.modifiedAssets ?? {};
+                    this.integrationState.patchState({
+                        modifiedAssets: { ...modifiedAssets, [assetId]: true },
+                    });
+                }
+            }));
         }), tap(() => {
             this.configurationService.hasUnsavedChanges = false;
             this.flowRouterService.navigateToShoppingCart();