@veloceapps/sdk 5.0.0 → 5.0.2

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.
Files changed (17) hide show
  1. package/bundles/veloce-sdk-cms.umd.js +24 -11
  2. package/bundles/veloce-sdk-cms.umd.js.map +1 -1
  3. package/bundles/veloce-sdk.umd.js +9 -1
  4. package/bundles/veloce-sdk.umd.js.map +1 -1
  5. package/cms/types/configuration.types.d.ts +1 -1
  6. package/cms/utils/element.utils.d.ts +2 -0
  7. package/esm2015/cms/components/element-renderer/element-renderer.component.js +14 -9
  8. package/esm2015/cms/plugins/configuration.plugin.js +4 -4
  9. package/esm2015/cms/types/configuration.types.js +1 -1
  10. package/esm2015/cms/utils/element.utils.js +8 -1
  11. package/esm2015/src/components/header/header.component.js +10 -2
  12. package/fesm2015/veloce-sdk-cms.js +24 -13
  13. package/fesm2015/veloce-sdk-cms.js.map +1 -1
  14. package/fesm2015/veloce-sdk.js +9 -1
  15. package/fesm2015/veloce-sdk.js.map +1 -1
  16. package/package.json +4 -4
  17. package/src/components/header/header.component.d.ts +6 -0
package/fesm2015/veloce-sdk.js CHANGED
@@ -630,6 +630,8 @@ class FlowHeaderComponent {
630
630
  this.isCatalogRoute$ = this.routerService.isCatalogRoute$();
631
631
  this.totalMRR$ = this.contextService.resolve$().pipe(map(ctx => ctx.properties.VDM_Total_MRR), distinctUntilChanged(), map(mrr => this.formatMetric(mrr)));
632
632
  this.totalNRR$ = this.contextService.resolve$().pipe(map(ctx => ctx.properties.VDM_Total_NRR), distinctUntilChanged(), map(nrr => this.formatMetric(nrr)));
633
+ this.totalEMRR$ = this.contextService.resolve$().pipe(map(ctx => `${this.toNumber(ctx.properties.VDM_Total_MRR) - this.toNumber(ctx.properties.PreviousVDM_Total_MRR)}`), distinctUntilChanged(), map(emrr => this.formatMetric(emrr)));
634
+ this.totalENRR$ = this.contextService.resolve$().pipe(map(ctx => `${this.toNumber(ctx.properties.VDM_Total_NRR) - this.toNumber(ctx.properties.PreviousVDM_Total_NRR)}`), distinctUntilChanged(), map(enrr => this.formatMetric(enrr)));
633
635
  }
634
636
  ngOnInit() {
635
637
  this.populateObjectDetails();
@@ -853,9 +855,15 @@ class FlowHeaderComponent {
853
855
  return (((_a = this.quoteDraftService.quoteDraft) === null || _a === void 0 ? void 0 : _a.context.properties.mode) === ConfigurationContextMode.ACCOUNT &&
854
856
  !this.quoteDraftService.hasAssets);
855
857
  }
858
+ /**
859
+ * Convert a value from string|undefined to number.
860
+ */
861
+ toNumber(value) {
862
+ return +(value || 0);
863
+ }
856
864
  }
857
865
  FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i2$1.QuoteApiService }, { token: i2$1.SalesforceApiService }, { token: i1$1.FlowConfigurationService }, { token: FlowRouterService }, { token: FlowDialogService }, { token: i4.IntegrationState }], target: i0.ɵɵFactoryTarget.Component });
858
- 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 <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 <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n <nav\n class=\"nav-item\"\n [ngClass]=\"{ active: (isCatalogRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"navigateToCatalog()\"\n >\n Catalog\n </nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"products$ | async as products\">\n <nav\n class=\"nav-item\"\n [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"navigateToShoppingCart()\"\n >\n Shopping Cart ({{ products.length }})\n </nav>\n\n <nav\n class=\"nav-popover-toggle\"\n [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"toggleCartOverlay(cart, $event)\"\n >\n <i *ngIf=\"!cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-down icon-with-margin\"></i>\n <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\n </nav>\n\n <vl-cart-preview #cart [products]=\"products\"></vl-cart-preview>\n </ng-container>\n </ng-container>\n</div>\n\n<div class=\"flow-controls\" *vlLet=\"objectDetails$ | async as details\">\n <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n <div>\n <ng-container *ngIf=\"isAccountMode && assetPriceLists.length > 1; else singlePriceList\">\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-template #singlePriceList>\n <div>{{ priceList?.name }}</div>\n </ng-template>\n\n <div *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date: 'MM.dd.yyyy' }}</div>\n </div>\n </ng-container>\n\n <span class=\"metrics\">\n <div class=\"metrics__row\">\n <span>MRR:</span>\n <span class=\"font-semibold\">${{ totalMRR$ | async }}</span>\n </div>\n <div class=\"metrics__row\">\n <span>NRR:</span>\n <span class=\"font-semibold\">${{ totalNRR$ | async }}</span>\n </div>\n </span>\n\n <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n <p-button\n class=\"doc-gen-button\"\n icon=\"vl-icon vl-icon-doc-gen\"\n [disabled]=\"isReadonlyMode\"\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 [disabled]=\"isReadonlyMode\"\n styleClass=\"p-button-outlined\"\n >\n </p-splitButton>\n\n <p-button\n *ngIf=\"isSaveInProgress\"\n class=\"save-button\"\n styleClass=\"p-button\"\n label=\"Saving\"\n [loading]=\"true\"\n ></p-button>\n\n <p-button\n *ngIf=\"isSubmitInProgress\"\n class=\"submit-button\"\n styleClass=\"p-button\"\n label=\"Submitting\"\n [loading]=\"true\"\n ></p-button>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;flex-shrink:0}::ng-deep .p-overlaypanel.flow-header-overlay .p-overlaypanel-content{background-color:#fff;padding:16px}::ng-deep .p-overlaypanel.flow-header-overlay.no-padding .p-overlaypanel-content{padding:0}::ng-deep .p-overlaypanel.flow-header-overlay.left:before{left:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.right:before{right:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.left .p-overlaypanel-content{margin-left:-16px}::ng-deep .p-overlaypanel.flow-header-overlay.right .p-overlaypanel-content{margin-right:-16px}::ng-deep .p-overlaypanel.flow-header-overlay:before{background-color:#fff}::ng-deep .p-overlaypanel.price-list-overlay .p-overlaypanel-content{border-radius:5px;border-color:var(--vl-border-color);padding:0;display:flex;flex-direction:column;max-height:140px;overflow:auto}:host ::ng-deep p-splitButton{height:32px;width:146px;display:flex}:host ::ng-deep p-splitButton .p-splitbutton{display:flex;font-size:12px;border-radius:2px;height:100%;width:100%;-webkit-backface-visibility:hidden}:host ::ng-deep p-splitButton .p-splitbutton .p-button:focus{box-shadow:none}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton{padding:7px 12px 7px 10px}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton:disabled{opacity:.2}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-menubutton:disabled{opacity:.3}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button{background-color:#fff;color:var(--vl-primary-color);border:1px solid #fff}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button:enabled:hover{background-color:var(--vl-secondary-nav-bg);color:var(--vl-primary-color);border:1px solid var(--vl-secondary-nav-bg);outline:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton{background-color:var(--vl-secondary-nav-bg);border-radius:0 2px 2px 0;border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton:hover{background-color:var(--vl-secondary-nav-bg);border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton{border-radius:2px 0 0 2px}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep p-splitButton .p-splitbutton .p-menu{display:flex;width:auto;margin-top:2px;border-radius:4px;border:1px solid var(--vl-border-color);box-shadow:0 4px 20px #2767c11a}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list{display:flex;flex-direction:column}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem{display:flex;width:100%;height:32px}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link{padding:8px;width:100%;height:100%}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover{background-color:var(--vl-secondary-nav-bg)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text{color:var(--vl-primary-color)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link .p-menuitem-text{line-height:16px;font-size:12px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep .doc-gen-button{height:32px;width:32px;display:inline-flex}:host ::ng-deep .doc-gen-button .p-button{border:1px solid #fff;border-radius:2px;width:100%;height:100%}:host ::ng-deep .doc-gen-button .p-button.p-component:disabled{opacity:.3}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;width:100%;height:100%;background:rgba(255,255,255,.3);opacity:1;border:none}:host ::ng-deep .save-button .p-button .p-button-label,:host ::ng-deep .submit-button .p-button .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.vl-icon{display:inline-block}.flow-info{flex-shrink:0;display:flex;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;height:14px}nav.disabled{opacity:.6;cursor:default}nav .nav-icon{margin-right:10px}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:24px;display:flex;justify-content:center}nav.nav-popover-toggle i{pointer-events:none;margin:0}nav i{pointer-events:none}.metrics__row{display:flex;justify-content:space-between;grid-gap:2px;gap:2px}.dot-separator:after{content:\"\";display:block;width:4px;height:4px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-header-overlay__wrapper{width:360px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__wrapper .info-list{list-style:none;padding:0;font-size:12px}.flow-header-overlay__wrapper .info-list__row{padding:8px 0;display:flex;justify-content:space-between}.flow-header-overlay__wrapper .info-list__row a{text-align:right}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.flow-navigation{flex-grow:1;display:flex;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:not(.disabled),.flow-navigation .nav-item:not(.disabled):hover,.flow-navigation .nav-popover-toggle.active:not(.disabled),.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:16px;gap:16px}\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$2.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, "titlecase": i5.TitleCasePipe, "date": i5.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
866
+ 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 <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 <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n <nav\n class=\"nav-item\"\n [ngClass]=\"{ active: (isCatalogRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"navigateToCatalog()\"\n >\n Catalog\n </nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"products$ | async as products\">\n <nav\n class=\"nav-item\"\n [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"navigateToShoppingCart()\"\n >\n Shopping Cart ({{ products.length }})\n </nav>\n\n <nav\n class=\"nav-popover-toggle\"\n [ngClass]=\"{ active: (isCartRoute$ | async), disabled: isReadonlyMode }\"\n (click)=\"toggleCartOverlay(cart, $event)\"\n >\n <i *ngIf=\"!cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-down icon-with-margin\"></i>\n <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\n </nav>\n\n <vl-cart-preview #cart [products]=\"products\"></vl-cart-preview>\n </ng-container>\n </ng-container>\n</div>\n\n<div class=\"flow-controls\" *vlLet=\"objectDetails$ | async as details\">\n <ng-container *ngIf=\"(isReadonlyMode$ | async) === false\">\n <ng-container *vlLet=\"activePriceList$ | async as priceList\">\n <div>\n <ng-container *ngIf=\"isAccountMode && assetPriceLists.length > 1; else singlePriceList\">\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 >\n {{ option.name }}\n </span>\n </ng-template>\n </p-overlayPanel>\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: 'MM.dd.yyyy' }}</div>\n </div>\n </ng-container>\n </ng-container>\n\n <span class=\"metrics\">\n <div class=\"metrics__row\">\n <span>MRR:</span>\n <span class=\"font-semibold\">${{ totalMRR$ | async }}</span>\n </div>\n <div class=\"metrics__row\">\n <span>NRR:</span>\n <span class=\"font-semibold\">${{ totalNRR$ | async }}</span>\n </div>\n </span>\n\n <span class=\"metrics\">\n <div class=\"metrics__row\">\n <span>E.MRR:</span>\n <span class=\"font-semibold\">${{ totalEMRR$ | async }}</span>\n </div>\n <div class=\"metrics__row\">\n <span>E.NRR:</span>\n <span class=\"font-semibold\">${{ totalENRR$ | async }}</span>\n </div>\n </span>\n\n <ng-container *vlLet=\"isCartRoute$ | async as isCartRoute\">\n <ng-container *vlLet=\"isReadonlyMode$ | async as isReadonlyMode\">\n <p-button\n class=\"doc-gen-button\"\n icon=\"vl-icon vl-icon-doc-gen\"\n [disabled]=\"isReadonlyMode\"\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 [disabled]=\"isReadonlyMode\"\n styleClass=\"p-button-outlined\"\n >\n </p-splitButton>\n\n <p-button\n *ngIf=\"isSaveInProgress\"\n class=\"save-button\"\n styleClass=\"p-button\"\n label=\"Saving\"\n [loading]=\"true\"\n ></p-button>\n\n <p-button\n *ngIf=\"isSubmitInProgress\"\n class=\"submit-button\"\n styleClass=\"p-button\"\n label=\"Submitting\"\n [loading]=\"true\"\n ></p-button>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;flex-shrink:0}::ng-deep .p-overlaypanel.flow-header-overlay .p-overlaypanel-content{background-color:#fff;padding:16px}::ng-deep .p-overlaypanel.flow-header-overlay.no-padding .p-overlaypanel-content{padding:0}::ng-deep .p-overlaypanel.flow-header-overlay.left:before{left:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.right:before{right:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.left .p-overlaypanel-content{margin-left:-16px}::ng-deep .p-overlaypanel.flow-header-overlay.right .p-overlaypanel-content{margin-right:-16px}::ng-deep .p-overlaypanel.flow-header-overlay:before{background-color:#fff}::ng-deep .p-overlaypanel.price-list-overlay .p-overlaypanel-content{border-radius:5px;border-color:var(--vl-border-color);padding:0;display:flex;flex-direction:column;max-height:140px;overflow:auto}:host ::ng-deep p-splitButton{height:32px;width:146px;display:flex}:host ::ng-deep p-splitButton .p-splitbutton{display:flex;font-size:12px;border-radius:2px;height:100%;width:100%;-webkit-backface-visibility:hidden}:host ::ng-deep p-splitButton .p-splitbutton .p-button:focus{box-shadow:none}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton{padding:7px 12px 7px 10px}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-defaultbutton:disabled{opacity:.2}:host ::ng-deep p-splitButton .p-splitbutton .p-splitbutton-menubutton:disabled{opacity:.3}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button{background-color:#fff;color:var(--vl-primary-color);border:1px solid #fff}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button:enabled:hover{background-color:var(--vl-secondary-nav-bg);color:var(--vl-primary-color);border:1px solid var(--vl-secondary-nav-bg);outline:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton{background-color:var(--vl-secondary-nav-bg);border-radius:0 2px 2px 0;border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-menubutton:hover{background-color:var(--vl-secondary-nav-bg);border:1px solid var(--vl-secondary-nav-bg);border-left:none}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton{border-radius:2px 0 0 2px}:host ::ng-deep p-splitButton .p-splitbutton.p-button-outlined .p-button.p-splitbutton-defaultbutton .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep p-splitButton .p-splitbutton .p-menu{display:flex;width:auto;margin-top:2px;border-radius:4px;border:1px solid var(--vl-border-color);box-shadow:0 4px 20px #2767c11a}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list{display:flex;flex-direction:column}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem{display:flex;width:100%;height:32px}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link{padding:8px;width:100%;height:100%}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover{background-color:var(--vl-secondary-nav-bg)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text{color:var(--vl-primary-color)}:host ::ng-deep p-splitButton .p-splitbutton .p-menu .p-menu-list .p-menuitem .p-menuitem-link .p-menuitem-text{line-height:16px;font-size:12px;letter-spacing:.3px;white-space:nowrap}:host ::ng-deep .doc-gen-button{height:32px;width:32px;display:inline-flex}:host ::ng-deep .doc-gen-button .p-button{border:1px solid #fff;border-radius:2px;width:100%;height:100%}:host ::ng-deep .doc-gen-button .p-button.p-component:disabled{opacity:.3}:host ::ng-deep .save-button,:host ::ng-deep .submit-button{height:32px;width:146px;display:flex}:host ::ng-deep .save-button .p-button,:host ::ng-deep .submit-button .p-button{border-radius:3px;width:100%;height:100%;background:rgba(255,255,255,.3);opacity:1;border:none}:host ::ng-deep .save-button .p-button .p-button-label,:host ::ng-deep .submit-button .p-button .p-button-label{font-size:12px;line-height:16px;letter-spacing:.3px;white-space:nowrap}.vl-icon{display:inline-block}.flow-info{flex-shrink:0;display:flex;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;height:14px}nav.disabled{opacity:.6;cursor:default}nav .nav-icon{margin-right:10px}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:24px;display:flex;justify-content:center}nav.nav-popover-toggle i{pointer-events:none;margin:0}nav i{pointer-events:none}.metrics__row{display:flex;justify-content:space-between;grid-gap:2px;gap:2px}.dot-separator:after{content:\"\";display:block;width:4px;height:4px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-header-overlay__wrapper{width:360px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__wrapper .info-list{list-style:none;padding:0;font-size:12px}.flow-header-overlay__wrapper .info-list__row{padding:8px 0;display:flex;justify-content:space-between}.flow-header-overlay__wrapper .info-list__row a{text-align:right}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.flow-navigation{flex-grow:1;display:flex;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:16px;gap:16px}\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$2.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, "titlecase": i5.TitleCasePipe, "date": i5.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
859
867
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, decorators: [{
860
868
  type: Component,
861
869
  args: [{