@veloceapps/sdk 5.0.9 → 5.0.11

package/bundles/veloce-sdk.umd.js

@@ -794,7 +794,7 @@
         return CartPreviewComponent;
     }());
     CartPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CartPreviewComponent, deps: [{ token: i1__namespace$2.FlowConfigurationService }, { token: FlowRouterService }, { token: i1__namespace$2.ProductImagesService }, { token: i1__namespace$2.QuoteDraftService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CartPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: i3$1.OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<p-overlayPanel\n  styleClass=\"navigation-settings-overlay flow-header-overlay center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"lockedProductId$ | async as lockedProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"product header\">\n                <span>Product</span>\n                <span class=\"text-right\">Qty</span>\n                <span class=\"text-right\">MRR</span>\n                <span class=\"text-right\">NRR</span>\n              </div>\n            </ng-template>\n\n            <ng-template pTemplate=\"item\" let-product>\n              <div\n                class=\"product item\"\n                *vlLet=\"!isEditMode || product.deleted as isReadonlyProduct\"\n                [class.readonly]=\"isReadonlyProduct\"\n                [class.deleted]=\"product.deleted\"\n              >\n                <ng-container *vlLet=\"lockedProductId === product.productId as isLockedProduct\">\n                  <div class=\"product__info\">\n                    <div class=\"product__image-wrapper\">\n                      <div\n                        *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n                        class=\"product__image\"\n                        [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n                      ></div>\n                    </div>\n                    <div class=\"flex flex-column justify-content-center\">\n                      <div class=\"word-break\" [class.line-through]=\"product.deleted\">{{ product.name }}</div>\n                      <div *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-2 pl-0\"\n                          (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                        ></p-button>\n                        <p-button\n                          label=\"Delete\"\n                          [disabled]=\"isLockedProduct || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-button-danger p-2 pr-0\"\n                          (onClick)=\"deleteHandler(product)\"\n                        ></p-button>\n                      </div>\n                    </div>\n                  </div>\n\n                  <ng-container *ngIf=\"form.controls[product.id] as control\">\n                    <span class=\"pt-2\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <p-inputNumber\n                        class=\"qty-control\"\n                        [formControl]=\"$any(control)\"\n                        [min]=\"1\"\n                        [required]=\"true\"\n                        (onBlur)=\"controlBlurHandler(product)\"\n                      ></p-inputNumber>\n                    </span>\n                    <ng-template #readonlyQty\n                      ><span class=\"text-right\">{{ control.value }}</span></ng-template\n                    >\n                  </ng-container>\n\n                  <span class=\"text-right\" [class.pt-3]=\"!isReadonlyProduct\">${{ product.mrr }}</span>\n                  <span class=\"text-right\" [class.pt-3]=\"!isReadonlyProduct\">${{ product.nrr }}</span>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-virtualScroller>\n\n          <ng-template #noImage>\n            <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex justify-content-end footer\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n              [disabled]=\"!isEditMode || !!lockedProductId || hasTermInProducts\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: ["p-virtualscroller ::ng-deep .p-virtualscroller-header{background:none;padding:0;border:none;font-weight:unset}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px}.empty-state{color:var(--vl-text-color-deep-accent);padding:0 16px 16px}.product{display:grid;grid-template-columns:auto 60px 70px 70px;padding:16px;border-bottom:1px solid var(--vl-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.header{position:-webkit-sticky;position:sticky;top:0;background-color:var(--surface-card);z-index:1;color:var(--vl-text-color-deep-accent);padding-bottom:0;border-bottom:none;overflow-y:scroll}.product .item{height:97px;overflow:hidden}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;height:24px;width:100%}.footer{padding:12px 16px}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}:host ::ng-deep .p-overlaypanel.navigation-settings-overlay{margin-top:20px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i4__namespace.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "rows", "minBufferPx", "maxBufferPx", "delay", "trackBy", "totalRecords", "first", "cache"], outputs: ["onLazyLoad"] }, { type: i5__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i6__namespace.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2__namespace$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i5__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    CartPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: CartPreviewComponent, selector: "vl-cart-preview", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: i3$1.OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<p-overlayPanel\n  styleClass=\"navigation-settings-overlay flow-header-overlay center no-padding\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"lockedProductId$ | async as lockedProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <p-virtualScroller [value]=\"products\" scrollHeight=\"{{ scrollHeight }}px\" [itemSize]=\"productRowHeight\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"product header\">\n                <span>Product</span>\n                <span class=\"text-right\">Qty</span>\n              </div>\n            </ng-template>\n\n            <ng-template pTemplate=\"item\" let-product>\n              <div\n                class=\"product item\"\n                *vlLet=\"!isEditMode || product.deleted as isReadonlyProduct\"\n                [class.readonly]=\"isReadonlyProduct\"\n                [class.deleted]=\"product.deleted\"\n              >\n                <ng-container *vlLet=\"lockedProductId === product.productId as isLockedProduct\">\n                  <div class=\"product__info\">\n                    <div class=\"product__image-wrapper\">\n                      <div\n                        *ngIf=\"getImageUrl(product.productId) | async as imageUrl; else noImage\"\n                        class=\"product__image\"\n                        [ngStyle]=\"{ 'background-image': 'url(' + imageUrl + ')' }\"\n                      ></div>\n                    </div>\n                    <div class=\"flex flex-column justify-content-center\">\n                      <div class=\"word-break\" [class.line-through]=\"product.deleted\">{{ product.name }}</div>\n                      <div *ngIf=\"!isReadonlyProduct\">\n                        <p-button\n                          label=\"Configure\"\n                          [disabled]=\"isLockedProduct || !product.configurable || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-2 pl-0\"\n                          (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                        ></p-button>\n                        <p-button\n                          label=\"Delete\"\n                          [disabled]=\"isLockedProduct || product.hasTerm\"\n                          styleClass=\"p-button-link p-button-sm p-button-danger p-2 pr-0\"\n                          (onClick)=\"deleteHandler(product)\"\n                        ></p-button>\n                      </div>\n                    </div>\n                  </div>\n\n                  <ng-container *ngIf=\"form.controls[product.id] as control\">\n                    <span class=\"pt-2\" *ngIf=\"!isReadonlyProduct; else readonlyQty\">\n                      <p-inputNumber\n                        class=\"qty-control\"\n                        [formControl]=\"$any(control)\"\n                        [min]=\"1\"\n                        [required]=\"true\"\n                        (onBlur)=\"controlBlurHandler(product)\"\n                      ></p-inputNumber>\n                    </span>\n                    <ng-template #readonlyQty\n                      ><span class=\"text-right\">{{ control.value }}</span></ng-template\n                    >\n                  </ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-virtualScroller>\n\n          <ng-template #noImage>\n            <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n          </ng-template>\n\n          <div class=\"flex justify-content-end footer\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n              [disabled]=\"!isEditMode || !!lockedProductId || hasTermInProducts\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: ["p-virtualscroller ::ng-deep .p-virtualscroller-header{background:none;padding:0;border:none;font-weight:unset}p-virtualscroller ::ng-deep cdk-virtual-scroll-viewport{overflow-y:scroll}.flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px}.empty-state{color:var(--vl-text-color-deep-accent);padding:0 16px 16px}.product{display:grid;grid-template-columns:auto 60px;padding:16px;border-bottom:1px solid var(--vl-border-color)}.product.readonly{align-items:center}.product.deleted{opacity:.5}.product.header{position:-webkit-sticky;position:sticky;top:0;background-color:var(--surface-card);z-index:1;color:var(--vl-text-color-deep-accent);padding-bottom:0;border-bottom:none;overflow-y:scroll}.product .item{height:97px;overflow:hidden}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;height:24px;width:100%}.footer{padding:12px 16px}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}:host ::ng-deep .p-overlaypanel.navigation-settings-overlay{margin-top:20px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i4__namespace.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "rows", "minBufferPx", "maxBufferPx", "delay", "trackBy", "totalRecords", "first", "cache"], outputs: ["onLazyLoad"] }, { type: i5__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i6__namespace.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i2__namespace$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i5__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i5__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CartPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1481,7 +1481,9 @@
                 !this.quoteDraftService.hasAssets);
         };
         FlowHeaderComponent.prototype.isUpsellQuoteWithoutChanges = function () {
-            return this.quoteDraftService.activeCurrentState.every(function (lineItem) { return lineItem.actionCode === 'EXIST'; });
+            var noUpdates = this.quoteDraftService.activeCurrentState.every(function (lineItem) { return lineItem.actionCode === 'EXIST'; });
+            var sameNumberOfProducts = this.quoteDraftService.getInitialCurrentState().length === this.quoteDraftService.activeCurrentState.length;
+            return noUpdates && sameNumberOfProducts;
         };
         return FlowHeaderComponent;
     }());