@veloceapps/sdk 3.0.10 → 3.0.12
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.
- package/bundles/veloce-sdk-cms.umd.js +45 -19
- package/bundles/veloce-sdk-cms.umd.js.map +1 -1
- package/bundles/veloce-sdk.umd.js +63 -27
- package/bundles/veloce-sdk.umd.js.map +1 -1
- package/cms/modules/configuration/services/configuration.service.d.ts +3 -1
- package/cms/modules/flow-configuration/services/flow-configuration.service.d.ts +2 -4
- package/esm2015/cms/modules/configuration/services/configuration.service.js +7 -1
- package/esm2015/cms/modules/flow-configuration/services/flow-configuration.service.js +17 -19
- package/esm2015/cms/modules/flow-configuration/services/flow-update.service.js +15 -2
- package/esm2015/src/components/header/cart-overlay/cart-overlay.component.js +31 -26
- package/esm2015/src/components/header/header.component.js +34 -3
- package/esm2015/src/components/header/header.types.js +1 -1
- package/fesm2015/veloce-sdk-cms.js +37 -20
- package/fesm2015/veloce-sdk-cms.js.map +1 -1
- package/fesm2015/veloce-sdk.js +63 -27
- package/fesm2015/veloce-sdk.js.map +1 -1
- package/package.json +1 -1
- package/src/components/header/cart-overlay/cart-overlay.component.d.ts +11 -9
- package/src/components/header/header.component.d.ts +3 -2
- package/src/components/header/header.types.d.ts +9 -0
package/fesm2015/veloce-sdk.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i9 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Injectable, Component, ChangeDetectionStrategy, ViewChild, NgModule, InjectionToken, Optional, Inject } from '@angular/core';
|
|
4
|
+
import { Injectable, Component, ChangeDetectionStrategy, ViewChild, Input, NgModule, InjectionToken, Optional, Inject } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@veloce/api';
|
|
6
6
|
import { ApiModule } from '@veloce/api';
|
|
7
7
|
import * as i2$2 from '@veloce/components';
|
|
@@ -144,10 +144,10 @@ class HeaderCartOverlayComponent {
|
|
|
144
144
|
this.baseHttpService = baseHttpService;
|
|
145
145
|
this.flowConfiguration = flowConfiguration;
|
|
146
146
|
this.routerService = routerService;
|
|
147
|
+
this.form = new FormGroup({});
|
|
148
|
+
this.shouldUpdate$ = new BehaviorSubject(true);
|
|
147
149
|
this.imagesMap$ = new BehaviorSubject({});
|
|
148
150
|
this.destroyed$ = new Subject();
|
|
149
|
-
this.form = new FormGroup({});
|
|
150
|
-
this.lineItems$ = this.flowConfiguration.get();
|
|
151
151
|
this.readonlyProductId$ = combineLatest([
|
|
152
152
|
this.routerService.route$,
|
|
153
153
|
this.routerService.isConfigurationRoute$(),
|
|
@@ -158,10 +158,15 @@ class HeaderCartOverlayComponent {
|
|
|
158
158
|
return route.queryParams.productId;
|
|
159
159
|
}));
|
|
160
160
|
}
|
|
161
|
+
ngOnChanges(changes) {
|
|
162
|
+
if (changes.products) {
|
|
163
|
+
this.shouldUpdate$.next(true);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
161
166
|
ngAfterViewInit() {
|
|
162
|
-
combineLatest([this.
|
|
167
|
+
combineLatest([this.readonlyProductId$, this.shouldUpdate$, this.overlayPanel.onShow])
|
|
163
168
|
.pipe(filter(() => this.overlayPanel.overlayVisible), takeUntil(this.destroyed$))
|
|
164
|
-
.subscribe(([
|
|
169
|
+
.subscribe(([readonlyProductId]) => this.updateControls(this.products, readonlyProductId));
|
|
165
170
|
}
|
|
166
171
|
ngOnDestroy() {
|
|
167
172
|
this.destroyed$.next();
|
|
@@ -174,30 +179,28 @@ class HeaderCartOverlayComponent {
|
|
|
174
179
|
}
|
|
175
180
|
return this.imagesMap$.pipe(map(imagesMap => imagesMap[productId]), distinctUntilChanged());
|
|
176
181
|
}
|
|
177
|
-
isConfigurable(lineItem) {
|
|
178
|
-
return lineItem.properties['#configurable'] === 'true';
|
|
179
|
-
}
|
|
180
182
|
navigateToProductConfiguration(productId) {
|
|
181
183
|
this.overlayPanel.hide();
|
|
182
184
|
this.routerService.navigateToProductConfiguration(productId);
|
|
183
185
|
}
|
|
184
|
-
controlBlurHandler(
|
|
185
|
-
const control = this.form.controls[
|
|
186
|
+
controlBlurHandler(product) {
|
|
187
|
+
const control = this.form.controls[product.id];
|
|
186
188
|
if (control.invalid) {
|
|
187
189
|
return;
|
|
188
190
|
}
|
|
189
191
|
this.flowConfiguration.update({
|
|
190
192
|
dataType: 'LINEITEM',
|
|
191
193
|
attributeType: 'QTY',
|
|
192
|
-
id:
|
|
194
|
+
id: product.id,
|
|
193
195
|
newValue: control.value,
|
|
194
196
|
});
|
|
195
197
|
}
|
|
196
|
-
deleteHandler(
|
|
197
|
-
this.flowConfiguration.delete(
|
|
198
|
+
deleteHandler(product) {
|
|
199
|
+
this.flowConfiguration.delete([product.id]);
|
|
198
200
|
}
|
|
199
201
|
deleteAllHandler() {
|
|
200
|
-
this.
|
|
202
|
+
const productIds = this.products.map(product => product.id);
|
|
203
|
+
this.flowConfiguration.delete(productIds);
|
|
201
204
|
}
|
|
202
205
|
fetchProductImage(productId) {
|
|
203
206
|
this.baseHttpService
|
|
@@ -210,25 +213,25 @@ class HeaderCartOverlayComponent {
|
|
|
210
213
|
.pipe(map(file => URL.createObjectURL(file)), catchError(() => of('')), tap(url => this.imagesMap$.next(Object.assign(Object.assign({}, this.imagesMap$.value), { [productId]: url }))), takeUntil(this.destroyed$))
|
|
211
214
|
.subscribe();
|
|
212
215
|
}
|
|
213
|
-
updateControls(
|
|
216
|
+
updateControls(products, readonlyProductId) {
|
|
214
217
|
const ids = [];
|
|
215
|
-
|
|
218
|
+
products.forEach(item => {
|
|
216
219
|
var _a;
|
|
217
|
-
if (!
|
|
220
|
+
if (!item.id) {
|
|
218
221
|
return;
|
|
219
222
|
}
|
|
220
|
-
ids.push(
|
|
221
|
-
if (!this.form.controls[
|
|
222
|
-
this.form.addControl(
|
|
223
|
+
ids.push(item.id);
|
|
224
|
+
if (!this.form.controls[item.id]) {
|
|
225
|
+
this.form.addControl(item.id, new FormControl(item.qty, []));
|
|
223
226
|
}
|
|
224
227
|
else {
|
|
225
|
-
(_a = this.form.controls[
|
|
228
|
+
(_a = this.form.controls[item.id]) === null || _a === void 0 ? void 0 : _a.setValue(item.qty);
|
|
226
229
|
}
|
|
227
|
-
if (
|
|
228
|
-
this.form.controls[
|
|
230
|
+
if (item.productId === readonlyProductId) {
|
|
231
|
+
this.form.controls[item.id].disable();
|
|
229
232
|
}
|
|
230
233
|
else {
|
|
231
|
-
this.form.controls[
|
|
234
|
+
this.form.controls[item.id].enable();
|
|
232
235
|
}
|
|
233
236
|
});
|
|
234
237
|
const removedIds = Object.keys(this.form.controls).filter(id => !ids.includes(id));
|
|
@@ -236,7 +239,7 @@ class HeaderCartOverlayComponent {
|
|
|
236
239
|
}
|
|
237
240
|
}
|
|
238
241
|
HeaderCartOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: HeaderCartOverlayComponent, deps: [{ token: i1$1.BaseHttpService }, { token: i2$1.FlowConfigurationService }, { token: FlowRouterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
239
|
-
HeaderCartOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: HeaderCartOverlayComponent, selector: "vl-header-cart-overlay", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"
|
|
242
|
+
HeaderCartOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: HeaderCartOverlayComponent, selector: "vl-header-cart-overlay", inputs: { products: "products" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-overlayPanel\n styleClass=\"navigation-settings-overlay flow-header-overlay center\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"flow-header-overlay__wrapper\" *vlLet=\"readonlyProductId$ | async as readonlyProductId\">\n <ng-container *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]=\"!product.configurable || readonlyProductId === product.productId\"\n styleClass=\"p-button-link p-button-sm pl-0\"\n (click)=\"navigateToProductConfiguration(product.productId)\"\n ></p-button>\n <p-button\n label=\"Delete\"\n [disabled]=\"readonlyProductId === product.productId\"\n styleClass=\"p-button-link p-button-sm p-button-danger pl-0 pr-0\"\n (click)=\"deleteHandler(product)\"\n ></p-button>\n </div>\n </div>\n </div>\n\n <span>\n <p-inputNumber\n *ngIf=\"form.controls[product.id] as control\"\n class=\"qty-control\"\n [formControl]=\"$any(control)\"\n [min]=\"1\"\n [required]=\"true\"\n (onBlur)=\"controlBlurHandler(product)\"\n ></p-inputNumber>\n </span>\n <span class=\"text-right pt-3\">$0.00</span>\n <span class=\"text-right pt-3\">$0.00</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]=\"readonlyProductId\"\n (click)=\"deleteAllHandler()\"\n ></p-button>\n </div>\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: i4.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { type: i6.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: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i2$2.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i9.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
240
243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: HeaderCartOverlayComponent, decorators: [{
|
|
241
244
|
type: Component,
|
|
242
245
|
args: [{
|
|
@@ -248,6 +251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
|
|
|
248
251
|
}], ctorParameters: function () { return [{ type: i1$1.BaseHttpService }, { type: i2$1.FlowConfigurationService }, { type: FlowRouterService }]; }, propDecorators: { overlayPanel: [{
|
|
249
252
|
type: ViewChild,
|
|
250
253
|
args: [OverlayPanel]
|
|
254
|
+
}], products: [{
|
|
255
|
+
type: Input
|
|
251
256
|
}] } });
|
|
252
257
|
|
|
253
258
|
class HeaderCartOverlayModule {
|
|
@@ -278,7 +283,7 @@ class FlowHeaderComponent {
|
|
|
278
283
|
this.mode = ctx === null || ctx === void 0 ? void 0 : ctx.mode;
|
|
279
284
|
this.objectName = (_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.mode) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
|
|
280
285
|
this.contextProperties = (_c = ctx === null || ctx === void 0 ? void 0 : ctx.properties) !== null && _c !== void 0 ? _c : {};
|
|
281
|
-
this.
|
|
286
|
+
this.products$ = this.flowConfiguration.get().pipe(map(lineItems => this.generateProducts(lineItems)));
|
|
282
287
|
this.isConfigurationRoute$ = this.routerService.isConfigurationRoute$();
|
|
283
288
|
this.isCartRoute$ = this.routerService.isCartRoute$();
|
|
284
289
|
}
|
|
@@ -339,9 +344,40 @@ class FlowHeaderComponent {
|
|
|
339
344
|
this.queryName$('Account', accountId).subscribe(accountName => this.objectDetails$.next(Object.assign(Object.assign({}, this.objectDetails$.value), { accountName })));
|
|
340
345
|
this.queryName$('Opportunity', opportunityId).subscribe(opportunityName => this.objectDetails$.next(Object.assign(Object.assign({}, this.objectDetails$.value), { opportunityName })));
|
|
341
346
|
}
|
|
347
|
+
generateProducts(lineItems) {
|
|
348
|
+
const date = new Date();
|
|
349
|
+
date.setHours(0, 0, 0, 0);
|
|
350
|
+
const now = date.getTime();
|
|
351
|
+
return lineItems.reduce((result, li) => {
|
|
352
|
+
// find main term line item
|
|
353
|
+
if (li.rampInstanceId) {
|
|
354
|
+
return result;
|
|
355
|
+
}
|
|
356
|
+
// find current term line item
|
|
357
|
+
let target = li;
|
|
358
|
+
while (target && target.endDate && new Date(target.endDate).getTime() <= now) {
|
|
359
|
+
target = lineItems.find(sub => sub.rampInstanceId === li.id);
|
|
360
|
+
}
|
|
361
|
+
if (target && target.productId) {
|
|
362
|
+
return [
|
|
363
|
+
...result,
|
|
364
|
+
{
|
|
365
|
+
id: target.id,
|
|
366
|
+
productId: target.productId,
|
|
367
|
+
name: target.name,
|
|
368
|
+
configurable: target.properties['#configurable'] === 'true',
|
|
369
|
+
qty: target.qty,
|
|
370
|
+
mrr: 0,
|
|
371
|
+
nrr: 0,
|
|
372
|
+
},
|
|
373
|
+
];
|
|
374
|
+
}
|
|
375
|
+
return result;
|
|
376
|
+
}, []);
|
|
377
|
+
}
|
|
342
378
|
}
|
|
343
379
|
FlowHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, deps: [{ token: i2.ContextService }, { token: i2.QuoteService }, { token: i1$2.SalesforceApiService }, { token: i2$1.FlowConfigurationService }, { token: FlowRouterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
344
|
-
FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "<div class=\"flow-info\" *vlLet=\"objectDetails$ | async as details\">\n <nav class=\"nav-item nav-back\" (click)=\"back()\">\n <i class=\"nav-icon vl-icon vl-icon-arrow-left\"></i>\n\n <span> Back </span>\n <span *ngIf=\"objectName\" class=\"object-name\"> To {{ objectName }}</span>\n </nav>\n\n <ng-container *ngIf=\"isAccountMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Account name</span>\n\n <nav class=\"account-name\" [pTooltip]=\"contextProperties.Name ?? ''\" tooltipPosition=\"bottom\" [showDelay]=\"1000\">\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(contextProperties.Id)\">{{ contextProperties.Name }}</a>\n </nav>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Quote #{{ details.quoteNumber }}</span>\n\n <span class=\"dot-separator\"></span>\n\n <nav class=\"nav-item\" (click)=\"quoteDetails.toggle($event)\">\n <span>{{ contextProperties.Status }}</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)\">{{ details.accountName }}</a>\n </li>\n <li class=\"info-list__row\">\n <span>Opportunity Name:</span>\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">{{\n details.opportunityName\n }}</a>\n </li>\n <li class=\"info-list__row\">\n <span>Quote Name:</span>\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">{{ details.quoteName }}</a>\n </li>\n </ul>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n</div>\n\n<div class=\"flow-navigation\">\n <nav class=\"nav-item disabled\">Catalog</nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"
|
|
380
|
+
FlowHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FlowHeaderComponent, selector: "vl-flow-header", ngImport: i0, template: "<div class=\"flow-info\" *vlLet=\"objectDetails$ | async as details\">\n <nav class=\"nav-item nav-back\" (click)=\"back()\">\n <i class=\"nav-icon vl-icon vl-icon-arrow-left\"></i>\n\n <span> Back </span>\n <span *ngIf=\"objectName\" class=\"object-name\"> To {{ objectName }}</span>\n </nav>\n\n <ng-container *ngIf=\"isAccountMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Account name</span>\n\n <nav class=\"account-name\" [pTooltip]=\"contextProperties.Name ?? ''\" tooltipPosition=\"bottom\" [showDelay]=\"1000\">\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(contextProperties.Id)\">{{ contextProperties.Name }}</a>\n </nav>\n </ng-container>\n\n <ng-container *ngIf=\"isQuoteMode\">\n <span class=\"dot-separator\"></span>\n\n <span>Quote #{{ details.quoteNumber }}</span>\n\n <span class=\"dot-separator\"></span>\n\n <nav class=\"nav-item\" (click)=\"quoteDetails.toggle($event)\">\n <span>{{ contextProperties.Status }}</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)\">{{ details.accountName }}</a>\n </li>\n <li class=\"info-list__row\">\n <span>Opportunity Name:</span>\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.opportunityId)\">{{\n details.opportunityName\n }}</a>\n </li>\n <li class=\"info-list__row\">\n <span>Quote Name:</span>\n <a target=\"_blank\" [href]=\"getSalesforceObjectLink(details.quoteId)\">{{ details.quoteName }}</a>\n </li>\n </ul>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-container>\n</div>\n\n<div class=\"flow-navigation\">\n <nav class=\"nav-item disabled\">Catalog</nav>\n <nav class=\"nav-item disabled\" [ngClass]=\"{ active: isConfigurationRoute$ | async }\">Configurator</nav>\n <ng-container *vlLet=\"products$ | async as products\">\n <nav class=\"nav-item\" [ngClass]=\"{ active: isCartRoute$ | async }\" (click)=\"navigateToShoppingCart()\">\n Shopping Cart ({{ products.length }})\n </nav>\n\n <nav class=\"nav-popover-toggle active\" (click)=\"cart?.overlayPanel?.toggle($event)\">\n <i *ngIf=\"!cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-down icon-with-margin\"></i>\n <i *ngIf=\"cart?.overlayPanel?.overlayVisible\" class=\"vl-icon vl-icon-chevron-up icon-with-margin\"></i>\n </nav>\n\n <vl-header-cart-overlay #cart [products]=\"products\"></vl-header-cart-overlay>\n </ng-container>\n</div>\n\n<div class=\"flow-controls\" *vlLet=\"objectDetails$ | async as details\">\n <ng-container *ngIf=\"isQuoteMode\">\n <span *ngIf=\"details.priceListName\">{{ details.priceListName }}</span>\n <span *ngIf=\"contextProperties.StartDate\">{{ contextProperties.StartDate | date: 'MM.dd.yyyy' }}</span>\n\n <span class=\"slash-separator\"></span>\n\n <span>MRR: <span class=\"font-semibold\">$0.00</span></span>\n <span>NRR: <span class=\"font-semibold\">$0.00</span></span>\n </ng-container>\n\n <p-button label=\"Generate Doc\" styleClass=\"p-button-outlined\"></p-button>\n <p-button label=\"Save\" styleClass=\"p-button-outlined\"></p-button>\n <p-button label=\"Submit For Approval\" styleClass=\"p-button\"></p-button>\n</div>\n", styles: [":host{display:flex;align-items:center;height:48px;width:100%;background-color:var(--vl-primary-color);color:#fff;padding:0 32px;flex-shrink:0}::ng-deep .p-overlaypanel.flow-header-overlay .p-overlaypanel-content{background-color:#fff;padding:16px}::ng-deep .p-overlaypanel.flow-header-overlay.left:before{left:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.right:before{right:6px!important}::ng-deep .p-overlaypanel.flow-header-overlay.left .p-overlaypanel-content{margin-left:-16px}::ng-deep .p-overlaypanel.flow-header-overlay.right .p-overlaypanel-content{margin-right:-16px}::ng-deep .p-overlaypanel.flow-header-overlay:before{background-color:#fff}:host ::ng-deep .p-button{padding:5px 15px;font-size:12px}:host ::ng-deep .p-button{color:var(--vl-primary-color);background-color:#fff;border-color:#fff}:host ::ng-deep .p-button:enabled:hover{background-color:var(--vl-primary-color);color:#fff;border-color:#fff}:host ::ng-deep .p-button.p-button-outlined{background-color:var(--vl-primary-color);color:#fff;border-color:#fff}:host ::ng-deep .p-button.p-button-outlined:enabled:hover{color:var(--vl-primary-color);background-color:#fff;border-color:#fff}.vl-icon{display:inline-block}.flow-info{flex-shrink:0;display:flex;grid-gap:8px;gap:8px;align-items:center}.flow-info .nav-popover-toggle{margin-left:-8px}.flow-info .object-name{text-transform:capitalize}.flow-info .nav-back{font-weight:bold}.flow-info .nav-item:not(.disabled):hover,.flow-info .nav-popover-toggle:not(.disabled):hover{opacity:.6}nav{display:flex;align-items:center;cursor:pointer;padding:4px 0}nav.disabled{opacity:.6;cursor:default}nav .nav-icon{margin-right:10px}nav .icon-with-margin{margin:0 4px}nav a{color:#fff}nav.account-name{margin-left:4px;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}nav.nav-popover-toggle{width:24px;display:flex;justify-content:center}nav.nav-popover-toggle i{pointer-events:none;margin:0}nav i{pointer-events:none}.dot-separator:after{content:\"\";display:block;width:4px;height:4px;border-radius:50%;background:#fff}.slash-separator:after{content:\"\";display:block;background:#fff;width:1px;height:16px}.flow-header-overlay__wrapper{width:360px}.flow-header-overlay__wrapper .close-icon{cursor:pointer}.flow-header-overlay__wrapper .info-list{list-style:none;padding:0;font-size:12px}.flow-header-overlay__wrapper .info-list__row{padding:8px 0;display:flex;justify-content:space-between}.flow-header-overlay__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}.flow-controls{flex-shrink:0;display:flex;align-items:center;grid-gap:8px;gap:8px}\n"], components: [{ type: i4.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { type: HeaderCartOverlayComponent, selector: "vl-header-cart-overlay", inputs: ["products"] }, { type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }], directives: [{ type: i2$2.LetDirective, selector: "[vlLet]", inputs: ["vlLet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i9.AsyncPipe, "date": i9.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
345
381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: FlowHeaderComponent, decorators: [{
|
|
346
382
|
type: Component,
|
|
347
383
|
args: [{
|