@veloceapps/sdk 11.0.0-122 → 11.0.0-124

package/fesm2020/veloceapps-sdk.mjs

@@ -456,6 +456,15 @@ class FlowRouterService {
             this.integrationState.dispatch(FlowAction.CloseGuidedSelling({ keepState: true }));
         });
     }
+    get route$() {
+        return this.lastChildRoute$;
+    }
+    get params$() {
+        return this.lastChildParams$;
+    }
+    get params() {
+        return this.getLastChildParams(this.route.snapshot);
+    }
     getFlowRootRoute(route) {
         const path = [...route.pathFromRoot];
         while (path.length) {
@@ -480,15 +489,6 @@ class FlowRouterService {
             .join('/');
         return '/' + path;
     }
-    get route$() {
-        return this.lastChildRoute$;
-    }
-    get params$() {
-        return this.lastChildParams$;
-    }
-    get params() {
-        return this.getLastChildParams(this.route.snapshot);
-    }
     isConfigurationRoute$() {
         return this.getFlowSubpath$().pipe(map(url => url.startsWith('product')));
     }
@@ -756,7 +756,9 @@ class ProductUnloadGuard {
         return observable.pipe(map(unload => {
             if (unload) {
                 this.configurationService.reset();
-                if (!nextState || currentState.url === nextState.url) {
+                const currentUrl = currentState.url.split('?')[0];
+                const nextUrl = (nextState?.url ?? '').split('?')[0];
+                if (!nextState || currentUrl === nextUrl) {
                     return true;
                 }
                 // clear obsolete queryParams
@@ -1106,28 +1108,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 class ProductComponent {
-    constructor(configurationRuntimeService, configurationStateService) {
+    constructor(configurationRuntimeService, configurationStateService, flowService, route) {
         this.configurationRuntimeService = configurationRuntimeService;
         this.configurationStateService = configurationStateService;
+        this.flowService = flowService;
+        this.route = route;
         this.uiDefinitionContainer$ = new BehaviorSubject(null);
         this.showNotFound$ = new BehaviorSubject(false);
+        this.isInitialized$ = new BehaviorSubject(true);
+        this.destroy$ = new Subject();
         this.uiDefinitionContainer$.next(this.configurationRuntimeService.uiDefinitionContainer);
         this.config = {
             init$: () => this.init$(),
         };
     }
+    ngOnInit() {
+        let prevParams;
+        this.route.queryParams
+            .pipe(tap(params => {
+            if (prevParams && prevParams['productId'] !== params['productId']) {
+                this.isInitialized$.next(false);
+                setTimeout(() => {
+                    this.isInitialized$.next(true);
+                }, 0);
+            }
+            prevParams = params;
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     init$() {
         return this.configurationStateService.init$().pipe(tap(() => {
             this.showNotFound$.next(Boolean(!this.uiDefinitionContainer$.value));
         }));
     }
 }
-ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i3$1.ConfigurationRuntimeService }, { token: i3$1.ConfigurationStateService }], target: i0.ɵɵFactoryTarget.Component });
-ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<vl-cms-preview [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\" [config]=\"config\"></vl-cms-preview>\n\n<div *ngIf=\"showNotFound$ | async\" class=\"not-found-wrapper\">\n  <div class=\"not-found\">\n    <div class=\"icon\"></div>\n    <div class=\"message\">\n      This product doesn't have a linked Configuration UI. <br />\n      Please contact your system administrator for further assistance.\n    </div>\n  </div>\n</div>\n", styles: [".not-found-wrapper{position:absolute;top:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#fff;z-index:1000}.not-found{display:flex;align-items:center;padding:16px;border-radius:8px;gap:8px;background-color:#f5f5f5}.not-found .icon{width:48px;height:42px;background-image:url(\"data:image/svg+xml,%3Csvg width='48' height='42' viewBox='0 0 48 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='24.0798' cy='32.6052' rx='2.85714' ry='2.63158' fill='%231F2029'/%3E%3Cpath d='M22.285 3.35831C23.0618 2.06363 24.9382 2.06363 25.715 3.35831L46.1826 37.471C46.9824 38.8041 46.0222 40.5 44.4676 40.5L3.53238 40.5C1.97779 40.5 1.01757 38.8041 1.8174 37.471L22.285 3.35831Z' stroke='%23141414' stroke-width='2'/%3E%3Cpath d='M24 17.342V26.8157' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A\")}.not-found .message{font-size:14px;color:#141414;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, deps: [{ token: i3$1.ConfigurationRuntimeService }, { token: i3$1.ConfigurationStateService }, { token: i3$1.FlowInfoService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+ProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ProductComponent, selector: "vl-flow-product", ngImport: i0, template: "<vl-cms-preview\n  *ngIf=\"isInitialized$ | async\"\n  [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\"\n  [config]=\"config\"\n></vl-cms-preview>\n\n<div *ngIf=\"showNotFound$ | async\" class=\"not-found-wrapper\">\n  <div class=\"not-found\">\n    <div class=\"icon\"></div>\n    <div class=\"message\">\n      This product doesn't have a linked Configuration UI. <br />\n      Please contact your system administrator for further assistance.\n    </div>\n  </div>\n</div>\n", styles: [".not-found-wrapper{position:absolute;top:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#fff;z-index:1000}.not-found{display:flex;align-items:center;padding:16px;border-radius:8px;gap:8px;background-color:#f5f5f5}.not-found .icon{width:48px;height:42px;background-image:url(\"data:image/svg+xml,%3Csvg width='48' height='42' viewBox='0 0 48 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='24.0798' cy='32.6052' rx='2.85714' ry='2.63158' fill='%231F2029'/%3E%3Cpath d='M22.285 3.35831C23.0618 2.06363 24.9382 2.06363 25.715 3.35831L46.1826 37.471C46.9824 38.8041 46.0222 40.5 44.4676 40.5L3.53238 40.5C1.97779 40.5 1.01757 38.8041 1.8174 37.471L22.285 3.35831Z' stroke='%23141414' stroke-width='2'/%3E%3Cpath d='M24 17.342V26.8157' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A\")}.not-found .message{font-size:14px;color:#141414;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.PreviewComponent, selector: "vl-cms-preview", inputs: ["uiDefinition", "config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-cms-preview [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\" [config]=\"config\"></vl-cms-preview>\n\n<div *ngIf=\"showNotFound$ | async\" class=\"not-found-wrapper\">\n  <div class=\"not-found\">\n    <div class=\"icon\"></div>\n    <div class=\"message\">\n      This product doesn't have a linked Configuration UI. <br />\n      Please contact your system administrator for further assistance.\n    </div>\n  </div>\n</div>\n", styles: [".not-found-wrapper{position:absolute;top:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#fff;z-index:1000}.not-found{display:flex;align-items:center;padding:16px;border-radius:8px;gap:8px;background-color:#f5f5f5}.not-found .icon{width:48px;height:42px;background-image:url(\"data:image/svg+xml,%3Csvg width='48' height='42' viewBox='0 0 48 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='24.0798' cy='32.6052' rx='2.85714' ry='2.63158' fill='%231F2029'/%3E%3Cpath d='M22.285 3.35831C23.0618 2.06363 24.9382 2.06363 25.715 3.35831L46.1826 37.471C46.9824 38.8041 46.0222 40.5 44.4676 40.5L3.53238 40.5C1.97779 40.5 1.01757 38.8041 1.8174 37.471L22.285 3.35831Z' stroke='%23141414' stroke-width='2'/%3E%3Cpath d='M24 17.342V26.8157' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A\")}.not-found .message{font-size:14px;color:#141414;font-weight:300}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$1.ConfigurationRuntimeService }, { type: i3$1.ConfigurationStateService }]; } });
+            args: [{ selector: 'vl-flow-product', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-cms-preview\n  *ngIf=\"isInitialized$ | async\"\n  [uiDefinition]=\"(uiDefinitionContainer$ | async)?.source\"\n  [config]=\"config\"\n></vl-cms-preview>\n\n<div *ngIf=\"showNotFound$ | async\" class=\"not-found-wrapper\">\n  <div class=\"not-found\">\n    <div class=\"icon\"></div>\n    <div class=\"message\">\n      This product doesn't have a linked Configuration UI. <br />\n      Please contact your system administrator for further assistance.\n    </div>\n  </div>\n</div>\n", styles: [".not-found-wrapper{position:absolute;top:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#fff;z-index:1000}.not-found{display:flex;align-items:center;padding:16px;border-radius:8px;gap:8px;background-color:#f5f5f5}.not-found .icon{width:48px;height:42px;background-image:url(\"data:image/svg+xml,%3Csvg width='48' height='42' viewBox='0 0 48 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='24.0798' cy='32.6052' rx='2.85714' ry='2.63158' fill='%231F2029'/%3E%3Cpath d='M22.285 3.35831C23.0618 2.06363 24.9382 2.06363 25.715 3.35831L46.1826 37.471C46.9824 38.8041 46.0222 40.5 44.4676 40.5L3.53238 40.5C1.97779 40.5 1.01757 38.8041 1.8174 37.471L22.285 3.35831Z' stroke='%23141414' stroke-width='2'/%3E%3Cpath d='M24 17.342V26.8157' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A\")}.not-found .message{font-size:14px;color:#141414;font-weight:300}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3$1.ConfigurationRuntimeService }, { type: i3$1.ConfigurationStateService }, { type: i3$1.FlowInfoService }, { type: i1$2.ActivatedRoute }]; } });
 
 class ProductModule {
 }