@veloceapps/sdk 7.0.0-1 → 7.0.0-11

package/fesm2015/veloceapps-sdk-cms.js

@@ -1,10 +1,10 @@
 import { __decorate, __param, __awaiter, __rest } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, ViewEncapsulation, NgModule, Directive } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, ViewEncapsulation, NgModule, Directive, ElementRef } 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 } from 'rxjs';
 import * as lodash from 'lodash';
-import { compact, isArray, pull, flatten, set, kebabCase, cloneDeep } from 'lodash';
+import { compact, isArray, pull, merge, omit, flatten, set, kebabCase, cloneDeep } from 'lodash';
 import { applyPatch } from 'rfc6902';
 import * as i2 from '@veloceapps/sdk/core';
 import { ConfigurationService, LineItemWorker, generateLineItem, getAttributeValue, QuoteDraftService, FlowConfigurationService, ProductImagesService, ContextService, lineItemUtils, SdkCoreModule, UI_DEFINITION_VERSION } from '@veloceapps/sdk/core';
@@ -66,6 +66,20 @@ const SwitchObjectAction = (payload) => ({
     type: FlowAction.FLOW_SWITCH_OBJECT,
     payload,
 });
+var CmsAction;
+(function (CmsAction) {
+    CmsAction.GO_TO_PAGE = '[CMS]_GO_TO_PAGE';
+    /**
+     * Navigate UI definition to a specific page
+     *
+     * @param pageName name of the page
+     * @returns void
+     */
+    CmsAction.GoToPage = (pageName) => ({
+        type: CmsAction.GO_TO_PAGE,
+        payload: { pageName },
+    });
+})(CmsAction || (CmsAction = {}));
 
 var cmsActions = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -78,7 +92,8 @@ var cmsActions = /*#__PURE__*/Object.freeze({
     CloseDocGenAction: CloseDocGenAction,
     RemoteApplyAction: RemoteApplyAction,
     RemoteCancelAction: RemoteCancelAction,
-    SwitchObjectAction: SwitchObjectAction
+    SwitchObjectAction: SwitchObjectAction,
+    get CmsAction () { return CmsAction; }
 });
 
 const DEFAULT_PLUGINS_TOKEN = new InjectionToken('DEFAULT_PLUGINS_TOKEN');
@@ -692,9 +707,23 @@ class PreviewComponent {
         this.integrationState = integrationState;
         this.cdr = cdr;
         this.state$ = new BehaviorSubject({ loading: true, failure: false });
-        this.elements = [];
         this.destroy$ = new Subject();
         this.runtimeService.updated$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+        this.elements$ = this.state$.pipe(switchMap(({ loading, failure }) => {
+            var _a, _b;
+            if (loading || failure) {
+                return of([]);
+            }
+            const elements = this.runtimeService.applicationTree;
+            // If UI definition contains pages, return page by SelectedPageName
+            if ((_b = (_a = this.uiDefinition) === null || _a === void 0 ? void 0 : _a.pages) === null || _b === void 0 ? void 0 : _b.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 of(elements);
+        }));
     }
     ngOnInit() {
         var _a;
@@ -709,6 +738,9 @@ class PreviewComponent {
         this.configurationService.reset();
         this.runtimeService.clear();
     }
+    trackBy(_, el) {
+        return el.path;
+    }
     initializeConfiguration$() {
         const isAlreadyInitialized = this.configurationRuntimeService.isInitialized;
         if (!this.uiDefinition || this.uiDefinition.type !== 'CONFIGURATION' || isAlreadyInitialized) {
@@ -728,8 +760,7 @@ class PreviewComponent {
             return;
         }
         forkJoin([this.runtimeService.initialize$(this.uiDefinition, this.config), this.initializeConfiguration$()])
-            .pipe(tap(([elements]) => {
-            this.elements = elements;
+            .pipe(tap(() => {
             this.state$.next({ loading: false, failure: false });
         }), catchError(error => {
             var _a, _b;
@@ -744,7 +775,7 @@ class PreviewComponent {
     }
 }
 PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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: "12.0.0", version: "12.2.17", 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 *ngFor=\"let el of elements\" [meta]=\"el\"></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"], components: [{ type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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"], components: [{ type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -962,6 +993,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
+class RegionPlugin {
+    constructor(host) {
+        this.host = host;
+        this.destroy$ = new Subject();
+        this.metadata = this.host.injector.get(ELEMENT_METADATA);
+        this.document = this.host.injector.get(DOCUMENT);
+        this.el = this.host.injector.get(ElementRef);
+        const runtimeEditorService = this.host.injector.get(RuntimeEditorService);
+        runtimeEditorService.editorMode$
+            .pipe(tap(editMode => {
+            var _a;
+            this.el.nativeElement.style.outline = editMode ? 'solid 1px #dce5ef' : '';
+            if (editMode && !this.metadata.children.length) {
+                this.addRegionName();
+            }
+            else {
+                (_a = this.regionNameEl) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+        }), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    addRegionName() {
+        if (this.regionNameEl) {
+            this.regionNameEl.remove();
+        }
+        this.regionNameEl = this.document.createElement('div');
+        this.regionNameEl.innerHTML = this.metadata.name;
+        merge(this.regionNameEl.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#AEB5BD',
+            pointerEvents: 'none',
+            userSelect: 'none',
+        });
+        this.el.nativeElement.append(this.regionNameEl);
+    }
+}
+RegionPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RegionPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+RegionPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: RegionPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RegionPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
 class ScriptPlugin {
     constructor(host) {
         this.host = host;
@@ -1046,6 +1127,16 @@ const CONFIG = {
         plugins: [IOPlugin, ScriptPlugin],
         suppressTemplate: true,
     },
+    PAGE: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [IOPlugin, ScriptPlugin],
+    },
+    REGION: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [IOPlugin, ScriptPlugin, RegionPlugin],
+    },
 };
 
 const EXPORTED_CLASS_REGEX = /export class (\S+)/;
@@ -1072,18 +1163,14 @@ const elementToMetadata = (el, parentPath) => {
         styles, children: el.children.map(child => elementToMetadata(child, path)) });
 };
 const metadataToElement = (metadata, recursive = true) => {
-    const elMetadata = {
-        name: metadata.name,
-        isShared: metadata.isShared,
-        type: metadata.type,
-        model: metadata.model,
-        module: metadata.module,
-        reference: metadata.reference,
-        inputs: metadata.inputs,
-        outputs: metadata.outputs,
-        children: metadata.children.map(({ name }) => name),
-        configuredStyles: metadata.configuredStyles,
-    };
+    const cleanMetadata = omit(metadata, [
+        'path',
+        'template',
+        'styles',
+        'script',
+        'metadata',
+    ]);
+    const elMetadata = Object.assign(Object.assign({}, cleanMetadata), { children: metadata.children.map(({ name }) => name) });
     const normalizedElMetadata = normalizeElementMetadata(elMetadata);
     if (!metadata.script || !EXPORTED_CLASS_REGEX.test(metadata.script)) {
         throw new UiBuildError(`'${metadata.name}' component script is missing an exported class`, metadata);
@@ -1311,6 +1398,185 @@ const DEFAULT_PLUGINS = {
     DEFAULT: [],
 };
 
+const LAYOUT = {
+    LAYOUT_1: {
+        styles: `
+/* start of LAYOUT_1 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header" auto
+    "main" 1fr
+    "footer" auto
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: main;
+  }
+
+  &:nth-child(3) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_1 styles */
+`,
+    },
+    LAYOUT_2: {
+        styles: `
+/* start of LAYOUT_2 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header header" auto
+    "left right" 1fr
+    "footer footer" auto
+    / 1fr 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: left;
+  }
+
+  &:nth-child(3) > vl-element {
+    grid-area: right;
+  }
+
+  &:nth-child(4) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_2 styles */
+`,
+    },
+    LAYOUT_3: {
+        styles: `
+/* start of LAYOUT_3 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "main" 1fr
+    "footer" auto
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: main;
+  }
+
+  &:nth-child(2) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_3 styles */
+`,
+    },
+    LAYOUT_4: {
+        styles: `
+/* start of LAYOUT_4 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "left right" 1fr
+    "footer footer" auto
+    / auto auto;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: left;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: right;
+  }
+
+  &:nth-child(3) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_4 styles */
+`,
+    },
+    LAYOUT_5: {
+        styles: `
+/* start of LAYOUT_5 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header" auto
+    "main" 1fr
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: main;
+  }
+}
+/* end of LAYOUT_5 styles */
+`,
+    },
+    LAYOUT_6: {
+        styles: `
+/* start of LAYOUT_6 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "main" 1fr
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: main;
+  }
+}
+/* end of LAYOUT_6 styles */
+`,
+    },
+};
+
 const VELOCE_LIBS = {
     '@veloceapps/core': {
         isDefined,
@@ -1418,7 +1684,12 @@ class ElementsResolver {
     resolveElementStyles(element) {
         var _a;
         const config = CONFIG[element.type];
-        return !config.suppressStyles ? (_a = element.styles) !== null && _a !== void 0 ? _a : '' : '';
+        let styles = !config.suppressStyles ? (_a = element.styles) !== null && _a !== void 0 ? _a : '' : '';
+        const layout = element.layout && LAYOUT[element.layout];
+        if (layout === null || layout === void 0 ? void 0 : layout.styles) {
+            styles += layout.styles;
+        }
+        return styles;
     }
     processElementMetadata(sourceElement) {
         var _a, _b;
@@ -1796,5 +2067,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyProductConfigurationAction, CloseDocGenAction, 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, VENDOR_MAP, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, getElementUniqueName, 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, SHARED_ELEMENT_METADATA, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, VENDOR_MAP, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, getElementUniqueName, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
 //# sourceMappingURL=veloceapps-sdk-cms.js.map