@veloceapps/sdk 7.0.2-20 → 7.0.2-22

package/fesm2020/veloceapps-sdk-cms.mjs

@@ -2,7 +2,7 @@ import { __decorate, __param, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, ViewEncapsulation, NgModule, inject, ElementRef, Directive, ApplicationRef, createComponent, createNgModule } from '@angular/core';
 import * as rxjs from 'rxjs';
-import { BehaviorSubject, Subject, of, map, tap, switchMap, startWith, distinctUntilChanged, filter, ReplaySubject, noop, take, Observable, takeUntil, forkJoin, catchError, combineLatest } from 'rxjs';
+import { BehaviorSubject, Subject, filter, map, distinctUntilChanged, of, tap, switchMap, startWith, ReplaySubject, noop, take, Observable, takeUntil, forkJoin, catchError, combineLatest } from 'rxjs';
 import * as i2 from '@veloceapps/sdk/core';
 import { ConfigurationService, QuoteDraftService, FlowConfigurationService, LineItemWorker, ProductImagesService, ContextService, lineItemUtils, generateLineItem, getAttributeValue, SdkCoreModule, UI_DEFINITION_VERSION } from '@veloceapps/sdk/core';
 import * as i3 from 'primeng/api';
@@ -70,6 +70,9 @@ var CmsAction;
 (function (CmsAction) {
     CmsAction.GO_TO_PAGE = '[CMS]_GO_TO_PAGE';
     CmsAction.UPDATE_CUSTOMIZATION = '[CMS]_UPDATE_CUSTOMIZATION';
+    CmsAction.SHOW_OVERLAY = '[CMS]_SHOW_OVERLAY';
+    CmsAction.HIDE_OVERLAY = '[CMS]_HIDE_OVERLAY';
+    CmsAction.HIDE_ALL_OVERLAYS = '[CMS]_HIDE_ALL_OVERLAYS';
     /**
      * Navigate UI definition to a specific page
      *
@@ -88,6 +91,34 @@ var CmsAction;
         type: CmsAction.UPDATE_CUSTOMIZATION,
         payload: { value },
     });
+    /**
+     * Show an Overlay on the selected page
+     *
+     * @param name - name of the overlay
+     * @returns void
+     */
+    CmsAction.ShowOverlay = (name) => ({
+        type: CmsAction.SHOW_OVERLAY,
+        payload: { name },
+    });
+    /**
+     * Hide an Overlay on the selected page
+     *
+     * @param name - name of the overlay
+     * @returns void
+     */
+    CmsAction.HideOverlay = (name) => ({
+        type: CmsAction.HIDE_OVERLAY,
+        payload: { name },
+    });
+    /**
+     * Hide all Overlays on the selected page
+     *
+     * @returns void
+     */
+    CmsAction.HideAllOverlays = () => ({
+        type: CmsAction.HIDE_ALL_OVERLAYS,
+    });
 })(CmsAction || (CmsAction = {}));
 
 var cmsActions = /*#__PURE__*/Object.freeze({
@@ -175,6 +206,40 @@ ElementComponent = __decorate([
     __metadata("design:paramtypes", [Injector])
 ], ElementComponent);
 
+class IntegrationState {
+    constructor() {
+        this.stateSubj$ = new BehaviorSubject({});
+        this.action$ = new Subject();
+    }
+    get state$() {
+        return this.stateSubj$.asObservable();
+    }
+    get state() {
+        return this.stateSubj$.getValue();
+    }
+    patchState(update) {
+        this.stateSubj$.next({ ...this.stateSubj$.getValue(), ...update });
+    }
+    dispatch(action) {
+        this.action$.next(action);
+    }
+    listen$(actionType) {
+        return this.action$.pipe(filter(action => action.type === actionType), map(action => action.payload));
+    }
+    listenAll$() {
+        return this.action$.asObservable();
+    }
+    clear() {
+        this.stateSubj$.next({});
+    }
+}
+IntegrationState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+IntegrationState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const insertElementAt = (source, target, parentPath, index) => {
     const result = [...source];
     const name = getCollectionUniqueName(result, target.name, (name) => (el) => el.name === name);
@@ -250,14 +315,38 @@ const findElementByModule = (elements, module, elementName) => {
 const CMS_COMPILATION_SERVICE = new InjectionToken('VENDOR_MAP');
 
 class RuntimeService {
-    constructor(injector) {
+    constructor(injector, integrationState) {
         this.injector = injector;
+        this.integrationState = integrationState;
         this.moduleRefs = [];
         this.componentTypes = {};
         this.applicationTree = [];
         this.isInitialized$ = new BehaviorSubject(false);
         this.updated$ = new Subject();
+        this.selectedPageName$ = new BehaviorSubject(null);
+        this.selectedOverlayNames$ = new BehaviorSubject([]);
         this.compilationService = this.injector.get(CMS_COMPILATION_SERVICE);
+        this.integrationState
+            .listen$(CmsAction.GO_TO_PAGE)
+            .pipe(map(({ pageName }) => pageName), distinctUntilChanged())
+            .subscribe(pageName => this.selectedPageName$.next(pageName));
+        this.integrationState
+            .listen$(CmsAction.SHOW_OVERLAY)
+            .pipe(map(({ name }) => name))
+            .subscribe(overlayName => {
+            const overlayNames = this.selectedOverlayNames$.value;
+            if (!overlayNames.includes(overlayName)) {
+                this.selectedOverlayNames$.next([...overlayNames, overlayName]);
+            }
+        });
+        this.integrationState
+            .listen$(CmsAction.HIDE_OVERLAY)
+            .pipe(map(({ name }) => name))
+            .subscribe(overlayName => {
+            const overlayNames = this.selectedOverlayNames$.value;
+            this.selectedOverlayNames$.next(overlayNames.filter(name => name !== overlayName));
+        });
+        this.integrationState.listen$(CmsAction.HIDE_ALL_OVERLAYS).subscribe(() => this.selectedOverlayNames$.next([]));
     }
     initialize$(uiDefinition, config) {
         this.config = config;
@@ -317,45 +406,11 @@ class RuntimeService {
         applyPatch(this.applicationTree, [operation]);
     }
 }
-RuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, deps: [{ token: i0.Injector }, { token: IntegrationState }], target: i0.ɵɵFactoryTarget.Injectable });
 RuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-class IntegrationState {
-    constructor() {
-        this.stateSubj$ = new BehaviorSubject({});
-        this.action$ = new Subject();
-    }
-    get state$() {
-        return this.stateSubj$.asObservable();
-    }
-    get state() {
-        return this.stateSubj$.getValue();
-    }
-    patchState(update) {
-        this.stateSubj$.next({ ...this.stateSubj$.getValue(), ...update });
-    }
-    dispatch(action) {
-        this.action$.next(action);
-    }
-    listen$(actionType) {
-        return this.action$.pipe(filter(action => action.type === actionType), map(action => action.payload));
-    }
-    listenAll$() {
-        return this.action$.asObservable();
-    }
-    clear() {
-        this.stateSubj$.next({});
-    }
-}
-IntegrationState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-IntegrationState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: IntegrationState }]; } });
 
 class ResourcesService {
     constructor() {
@@ -709,10 +764,7 @@ class PreviewComponent {
             const elements = this.runtimeService.applicationTree;
             // If UI definition contains pages, return page by SelectedPageName
             if (this.uiDefinition?.pages?.length) {
-                return this.integrationState.listen$(CmsAction.GO_TO_PAGE).pipe(map(({ pageName }) => pageName), startWith(elements[0].name), distinctUntilChanged(), map(pageName => {
-                    const page = elements.find(el => el.name === pageName);
-                    return page ? [page] : elements.slice(0, 1);
-                }));
+                return this.getPages$(elements);
             }
             return of(elements);
         }));
@@ -763,6 +815,14 @@ class PreviewComponent {
         }), takeUntil(this.destroy$))
             .subscribe();
     }
+    getPages$(elements) {
+        return combineLatest([this.runtimeService.selectedPageName$, this.runtimeService.selectedOverlayNames$]).pipe(map(([pageName, overlayNames]) => {
+            const page = elements.find(el => el.name === pageName);
+            const overlayName = overlayNames.at(-1);
+            const overlay = elements.find(el => el.name === overlayName);
+            return [...(page ? [page] : elements.slice(0, 1)), ...(overlay ? [overlay] : [])];
+        }));
+    }
 }
 PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewComponent, deps: [{ token: RuntimeService }, { token: i2.ConfigurationService }, { token: i3.MessageService }, { token: i2.ConfigurationRuntimeService }, { token: IntegrationState }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition", config: "config" }, providers: [IOProviderService, TemplatesService], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer\n        *ngFor=\"let el of elements$ | async; trackBy: trackBy\"\n        [meta]=\"el\"\n      ></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
@@ -1129,6 +1189,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
+class PagePlugin {
+    constructor(host) {
+        this.host = host;
+        this.destroy$ = new Subject();
+        this.metadata = this.host.injector.get(ELEMENT_METADATA);
+        this.el = this.host.injector.get(ElementRef);
+        const runtimeService = this.host.injector.get(RuntimeService);
+        runtimeService.selectedOverlayNames$
+            .pipe(tap(overlayNames => {
+            if (this.metadata.pageType === 'FULL_PAGE') {
+                this.styleFullPage(overlayNames.length > 0);
+            }
+        }), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    styleFullPage(hasOverlays) {
+        this.el.nativeElement.style.background = hasOverlays ? 'rgba(0, 0, 0, 0.15)' : '';
+        this.el.nativeElement.style.pointerEvents = hasOverlays ? 'none' : '';
+    }
+}
+PagePlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PagePlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+PagePlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: PagePlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PagePlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
 class RegionPlugin {
     constructor(host) {
         this.host = host;
@@ -1328,7 +1418,7 @@ const CONFIG = {
     PAGE: {
         component: ElementComponent,
         defaultTemplate: '<element-children></element-children>',
-        plugins: [IOPlugin, ScriptPlugin],
+        plugins: [IOPlugin, ScriptPlugin, PagePlugin],
         builder: {
             suppressRemovable: true,
         },
@@ -1785,12 +1875,18 @@ const LAYOUT = {
         styles: `
     /* start of LAYOUT_7 styles */
     :host {
-      height: 100%;
+      position: absolute;
+      left: 300px;
+      background: #ffffff;
       display: grid;
-      grid: "left" 1fr / 0.3fr;
+      grid: "left" 1fr / 1fr;
       gap: 10px;
       padding: 10px;
       justify-content: start;
+      width: 20%;
+      height: fill-available;
+      height: -webkit-fill-available;
+      height: -moz-available;
     }
     :host ::ng-deep element-children > vl-cms-element-renderer {
       &:nth-child(1) > vl-element {
@@ -1804,12 +1900,18 @@ const LAYOUT = {
         styles: `
     /* start of LAYOUT_8 styles */
     :host {
-      height: 100%;
+      position: absolute;
+      right: 0;
+      background: #ffffff;
       display: grid;
-      grid: "right" 1fr / 0.3fr;
+      grid: "right" 1fr / 1fr;
       gap: 10px;
       padding: 10px;
       justify-content: end;
+      width: 20%;
+      height: fill-available;
+      height: -webkit-fill-available;
+      height: -moz-available;
     }
     :host ::ng-deep element-children > vl-cms-element-renderer {
       &:nth-child(1) > vl-element {
@@ -2362,5 +2464,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyProductConfigurationAction, CloseDocGenAction, CmsAction, ConfigureProductAction, DEFAULT_PLUGINS_TOKEN, ELEMENT_CONFIG, ELEMENT_METADATA, ElementComponent, ElementDefinition, ElementsResolver, FlowAction, IntegrationState, LauncherModule, MigrationsModule, MigrationsService, NavigateBackAction, NavigateToCatalogAction, OpenDocGenAction, PreviewComponent, PreviewModule, RemoteApplyAction, RemoteCancelAction, ResourcesService, RuntimeEditorService, RuntimeModule, SHARED_ELEMENT_METADATA, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
+export { ApplyProductConfigurationAction, CloseDocGenAction, CmsAction, ConfigureProductAction, DEFAULT_PLUGINS_TOKEN, ELEMENT_CONFIG, ELEMENT_METADATA, ElementComponent, ElementDefinition, ElementsResolver, FlowAction, IntegrationState, LauncherModule, MigrationsModule, MigrationsService, NavigateBackAction, NavigateToCatalogAction, OpenDocGenAction, PreviewComponent, PreviewModule, RemoteApplyAction, RemoteCancelAction, ResourcesService, RuntimeEditorService, RuntimeModule, RuntimeService, SHARED_ELEMENT_METADATA, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
 //# sourceMappingURL=veloceapps-sdk-cms.mjs.map