@veloceapps/sdk 3.1.28 → 3.1.30

package/bundles/veloce-sdk.umd.js

@@ -776,7 +776,7 @@
         return CartPreviewComponent;
     }());
     CartPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CartPreviewComponent, deps: [{ token: i2__namespace$1.FlowConfigurationService }, { token: FlowRouterService }, { token: i2__namespace$1.ProductImagesService }, { token: i2__namespace$1.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\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <div class=\"product header\">\n            <span>Product</span>\n            <span class=\"text-right\">Qty</span>\n            <span class=\"text-right\">MRR</span>\n            <span class=\"text-right\">NRR</span>\n          </div>\n\n          <div class=\"scrollable-wrapper\">\n            <div class=\"product\" *ngFor=\"let product of products\">\n              <div 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\">{{ product.name }}</div>\n                  <div>\n                    <p-button\n                      label=\"Configure\"\n                      [disabled]=\"!isEditMode || !product.configurable || readonlyProductId === product.productId\"\n                      styleClass=\"p-button-link p-button-sm pl-0\"\n                      (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                    ></p-button>\n                    <p-button\n                      label=\"Delete\"\n                      [disabled]=\"!isEditMode || readonlyProductId === product.productId\"\n                      styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n                      (onClick)=\"deleteHandler(product)\"\n                    ></p-button>\n                  </div>\n                </div>\n              </div>\n\n              <span>\n                <p-inputNumber\n                  *ngIf=\"form.controls[product.id] as control\"\n                  class=\"qty-control\"\n                  [formControl]=\"$any(control)\"\n                  [min]=\"1\"\n                  [required]=\"true\"\n                  [disabled]=\"!isEditMode\"\n                  (onBlur)=\"controlBlurHandler(product)\"\n                ></p-inputNumber>\n              </span>\n              <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n              <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n            </div>\n\n            <ng-template #noImage>\n              <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n            </ng-template>\n          </div>\n\n          <div class=\"flex justify-content-end mt-3\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n              [disabled]=\"!isEditMode || readonlyProductId\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent)}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5__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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i8__namespace.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\"\n  showTransitionOptions=\"0ms\"\n  hideTransitionOptions=\"0ms\"\n>\n  <ng-template pTemplate>\n    <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n      <ng-container *vlLet=\"isEditMode$ | async as isEditMode\">\n        <ng-container *ngIf=\"products.length > 0; else empty\">\n          <h2 class=\"flow-header-overlay__title\">\n            <span>Products ({{ products.length }})</span>\n            <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n          </h2>\n\n          <div class=\"product header\">\n            <span>Product</span>\n            <span class=\"text-right\">Qty</span>\n            <span class=\"text-right\">MRR</span>\n            <span class=\"text-right\">NRR</span>\n          </div>\n\n          <div class=\"scrollable-wrapper\">\n            <div class=\"product\" *ngFor=\"let product of products\">\n              <div 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\">{{ product.name }}</div>\n                  <div>\n                    <p-button\n                      label=\"Configure\"\n                      [disabled]=\"!isEditMode || !product.configurable || readonlyProductId === product.productId\"\n                      styleClass=\"p-button-link p-button-sm pl-0\"\n                      (onClick)=\"navigateToProductConfiguration(product.productId, product.id)\"\n                    ></p-button>\n                    <p-button\n                      label=\"Delete\"\n                      [disabled]=\"!isEditMode || readonlyProductId === product.productId\"\n                      styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n                      (onClick)=\"deleteHandler(product)\"\n                    ></p-button>\n                  </div>\n                </div>\n              </div>\n\n              <span>\n                <p-inputNumber\n                  *ngIf=\"form.controls[product.id] as control\"\n                  class=\"qty-control\"\n                  [formControl]=\"$any(control)\"\n                  [min]=\"1\"\n                  [required]=\"true\"\n                  [disabled]=\"!isEditMode\"\n                  (onBlur)=\"controlBlurHandler(product)\"\n                ></p-inputNumber>\n              </span>\n              <span class=\"text-right pt-3\">${{ product.mrr }}</span>\n              <span class=\"text-right pt-3\">${{ product.nrr }}</span>\n            </div>\n\n            <ng-template #noImage>\n              <i class=\"vl-icon vl-icon-no-image no-image-icon\"></i>\n            </ng-template>\n          </div>\n\n          <div class=\"flex justify-content-end mt-3\">\n            <p-button\n              label=\"Clear cart\"\n              styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n              [disabled]=\"!isEditMode || readonlyProductId\"\n              (onClick)=\"deleteAllHandler()\"\n            ></p-button>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-template #empty>\n        <h2 class=\"flow-header-overlay__title\">\n          <span>Empty Cart</span>\n          <i class=\"vl-icon vl-icon-close close-icon\" (click)=\"overlayPanel.hide()\"></i>\n        </h2>\n\n        <span class=\"empty-state\">There are no products added to the Shopping Cart yet.</span>\n      </ng-template>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n", styles: [".flow-header-overlay__wrapper{display:flex;flex-direction:column;width:460px;max-height:600px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.empty-state{color:var(--vl-text-color-deep-accent)}.scrollable-wrapper{overflow:auto}.product{display:grid;grid-template-columns:auto 60px 80px 80px;padding:16px 0}.product:not(.header){border-bottom:1px solid var(--vl-border-color)}.product.header{color:var(--vl-text-color-deep-accent);padding-bottom:0}.product__info{display:flex;grid-gap:16px;gap:16px}.product__image-wrapper{flex-shrink:0;height:64px;width:64px;display:flex;justify-content:center;align-items:center;background:var(--vl-primary-nav-overlay-bg);border-radius:4px}.product__image{background-size:contain;background-repeat:no-repeat;background-position:center;height:calc(100% - 12px);width:calc(100% - 12px)}.product .qty-control ::ng-deep .p-inputnumber-input{align-self:flex-start;text-align:right;width:100%}.word-break{word-break:break-word}.no-image-icon{color:#b4d1ef;height:18px;width:18px}\n"], components: [{ type: i3__namespace$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i2__namespace.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i5__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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i3__namespace.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i8__namespace.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: [{
@@ -1180,6 +1180,10 @@
                 .listen$(i1$1.FlowAction.FLOW_NAVIGATE_BACK)
                 .pipe(rxjs.tap(function () { return _this.flowRouterService.navigateBack(); }), rxjs.takeUntil(this.cleanup$))
                 .subscribe();
+            this.integrationState
+                .listen$(i1$1.FlowAction.FLOW_NAVIGATE_TO_CATALOG)
+                .pipe(rxjs.tap(function () { return _this.flowRouterService.navigateToCatalog(); }), rxjs.takeUntil(this.cleanup$))
+                .subscribe();
             this.integrationState
                 .listen$(i1$1.FlowAction.FLOW_APPLY_PRODUCT_CONFIGURATION)
                 .pipe(rxjs.switchMap(function () {
@@ -1827,7 +1831,7 @@
             var offeringId = (currentStateItem !== null && currentStateItem !== void 0 ? currentStateItem : {}).offeringId;
             this.runtimeService
                 .init({ productId: productId, offeringId: offeringId })
-                .pipe(rxjs.tap(function (context) { return (_this.uiDefinition = context === null || context === void 0 ? void 0 : context.uiDefinition); }), rxjs.switchMap(function () { return _this.customize(productId); }), rxjs.switchMap(function () { return _this.configurationService.configure(); }), rxjs.tap(function () { return _this.state$.next({ loading: false, failure: false }); }), rxjs.catchError(function (error) {
+                .pipe(rxjs.tap(function (context) { return (_this.uiDefinition = context === null || context === void 0 ? void 0 : context.uiDefinition); }), rxjs.switchMap(function () { return _this.customize(productId); }), this.throwIfNoUIDefinition(), rxjs.switchMap(function () { return _this.configurationService.configure(); }), rxjs.tap(function () { return _this.state$.next({ loading: false, failure: false }); }), rxjs.catchError(function (error) {
                 var _a, _b;
                 if (!((_b = (_a = _this.uiDefinition) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.suppressToastMessages)) {
                     _this.messageService.add({ severity: 'error', summary: error });
@@ -1837,6 +1841,17 @@
             }), rxjs.takeUntil(this.destroy$))
                 .subscribe();
         };
+        ProductComponent.prototype.throwIfNoUIDefinition = function () {
+            var _this = this;
+            return function (source$) {
+                return source$.pipe(rxjs.switchMap(function () {
+                    if (!_this.uiDefinition) {
+                        return rxjs.throwError(function () { return 'Product does not have Configuration UI'; });
+                    }
+                    return source$;
+                }));
+            };
+        };
         ProductComponent.prototype.getLineItemId = function (quote, lineItemId) {
             var _a;
             return (_a = quote.currentState.find(function (li) { return li.id === lineItemId; })) === null || _a === void 0 ? void 0 : _a.id;