@veloceapps/sdk 7.0.0-1 → 7.0.0-11

package/bundles/veloceapps-sdk-cms.umd.js

@@ -77,6 +77,20 @@
         type: exports.FlowAction.FLOW_SWITCH_OBJECT,
         payload: payload,
     }); };
+    exports.CmsAction = void 0;
+    (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 = function (pageName) { return ({
+            type: CmsAction.GO_TO_PAGE,
+            payload: { pageName: pageName },
+        }); };
+    })(exports.CmsAction || (exports.CmsAction = {}));
 
     var cmsActions = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -89,7 +103,8 @@
         CloseDocGenAction: CloseDocGenAction,
         RemoteApplyAction: RemoteApplyAction,
         RemoteCancelAction: RemoteCancelAction,
-        SwitchObjectAction: SwitchObjectAction
+        SwitchObjectAction: SwitchObjectAction,
+        get CmsAction () { return exports.CmsAction; }
     });
 
     /******************************************************************************
@@ -1150,9 +1165,27 @@
             this.integrationState = integrationState;
             this.cdr = cdr;
             this.state$ = new rxjs.BehaviorSubject({ loading: true, failure: false });
-            this.elements = [];
             this.destroy$ = new rxjs.Subject();
             this.runtimeService.updated$.pipe(rxjs.takeUntil(this.destroy$)).subscribe(function () { return _this.cdr.detectChanges(); });
+            this.elements$ = this.state$.pipe(rxjs.switchMap(function (_c) {
+                var loading = _c.loading, failure = _c.failure;
+                var _a, _b;
+                if (loading || failure) {
+                    return rxjs.of([]);
+                }
+                var 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$(exports.CmsAction.GO_TO_PAGE).pipe(rxjs.map(function (_c) {
+                        var pageName = _c.pageName;
+                        return pageName;
+                    }), rxjs.startWith(elements[0].name), rxjs.distinctUntilChanged(), rxjs.map(function (pageName) {
+                        var page = elements.find(function (el) { return el.name === pageName; });
+                        return page ? [page] : elements.slice(0, 1);
+                    }));
+                }
+                return rxjs.of(elements);
+            }));
         }
         PreviewComponent.prototype.ngOnInit = function () {
             var _a;
@@ -1167,6 +1200,9 @@
             this.configurationService.reset();
             this.runtimeService.clear();
         };
+        PreviewComponent.prototype.trackBy = function (_, el) {
+            return el.path;
+        };
         PreviewComponent.prototype.initializeConfiguration$ = function () {
             var _this = this;
             var isAlreadyInitialized = this.configurationRuntimeService.isInitialized;
@@ -1188,9 +1224,7 @@
                 return;
             }
             rxjs.forkJoin([this.runtimeService.initialize$(this.uiDefinition, this.config), this.initializeConfiguration$()])
-                .pipe(rxjs.tap(function (_c) {
-                var _d = __read(_c, 1), elements = _d[0];
-                _this.elements = elements;
+                .pipe(rxjs.tap(function () {
                 _this.state$.next({ loading: false, failure: false });
             }), rxjs.catchError(function (error) {
                 var _a, _b;
@@ -1206,7 +1240,7 @@
         return PreviewComponent;
     }());
     PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: RuntimeService }, { token: i2__namespace.ConfigurationService }, { token: i3__namespace.MessageService }, { token: i2__namespace.ConfigurationRuntimeService }, { token: IntegrationState }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PreviewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.ShadowDom });
+    PreviewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i7__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.ShadowDom });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1446,6 +1480,58 @@
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
 
+    var RegionPlugin = /** @class */ (function () {
+        function RegionPlugin(host) {
+            var _this = this;
+            this.host = host;
+            this.destroy$ = new rxjs.Subject();
+            this.metadata = this.host.injector.get(ELEMENT_METADATA);
+            this.document = this.host.injector.get(i7.DOCUMENT);
+            this.el = this.host.injector.get(i0.ElementRef);
+            var runtimeEditorService = this.host.injector.get(RuntimeEditorService);
+            runtimeEditorService.editorMode$
+                .pipe(rxjs.tap(function (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();
+                }
+            }), rxjs.takeUntil(this.destroy$))
+                .subscribe();
+        }
+        RegionPlugin.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        RegionPlugin.prototype.addRegionName = function () {
+            if (this.regionNameEl) {
+                this.regionNameEl.remove();
+            }
+            this.regionNameEl = this.document.createElement('div');
+            this.regionNameEl.innerHTML = this.metadata.name;
+            lodash.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);
+        };
+        return RegionPlugin;
+    }());
+    RegionPlugin.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RegionPlugin, deps: [{ token: exports.ElementComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    RegionPlugin.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: RegionPlugin, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RegionPlugin, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () { return [{ type: exports.ElementComponent }]; } });
+
     var ScriptPlugin = /** @class */ (function () {
         function ScriptPlugin(host) {
             var _this = this;
@@ -1531,6 +1617,16 @@
             plugins: [IOPlugin, ScriptPlugin],
             suppressTemplate: true,
         },
+        PAGE: {
+            component: exports.ElementComponent,
+            defaultTemplate: '<element-children></element-children>',
+            plugins: [IOPlugin, ScriptPlugin],
+        },
+        REGION: {
+            component: exports.ElementComponent,
+            defaultTemplate: '<element-children></element-children>',
+            plugins: [IOPlugin, ScriptPlugin, RegionPlugin],
+        },
     };
 
     var EXPORTED_CLASS_REGEX = /export class (\S+)/;
@@ -1560,21 +1656,17 @@
     };
     var metadataToElement = function (metadata, recursive) {
         if (recursive === void 0) { recursive = true; }
-        var 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(function (_e) {
+        var cleanMetadata = lodash.omit(metadata, [
+            'path',
+            'template',
+            'styles',
+            'script',
+            'metadata',
+        ]);
+        var elMetadata = Object.assign(Object.assign({}, cleanMetadata), { children: metadata.children.map(function (_e) {
                 var name = _e.name;
                 return name;
-            }),
-            configuredStyles: metadata.configuredStyles,
-        };
+            }) });
         var 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);
@@ -1824,6 +1916,27 @@
         DEFAULT: [],
     };
 
+    var LAYOUT = {
+        LAYOUT_1: {
+            styles: "\n/* start of LAYOUT_1 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"header\" auto\n    \"main\" 1fr\n    \"footer\" auto\n    / 1fr;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    min-height: 80px;\n    grid-area: header;\n  }\n\n  &:nth-child(2) > vl-element {\n    grid-area: main;\n  }\n\n  &:nth-child(3) > vl-element {\n    min-height: 80px;\n    grid-area: footer;\n  }\n}\n/* end of LAYOUT_1 styles */\n",
+        },
+        LAYOUT_2: {
+            styles: "\n/* start of LAYOUT_2 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"header header\" auto\n    \"left right\" 1fr\n    \"footer footer\" auto\n    / 1fr 1fr;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    min-height: 80px;\n    grid-area: header;\n  }\n\n  &:nth-child(2) > vl-element {\n    grid-area: left;\n  }\n\n  &:nth-child(3) > vl-element {\n    grid-area: right;\n  }\n\n  &:nth-child(4) > vl-element {\n    min-height: 80px;\n    grid-area: footer;\n  }\n}\n/* end of LAYOUT_2 styles */\n",
+        },
+        LAYOUT_3: {
+            styles: "\n/* start of LAYOUT_3 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"main\" 1fr\n    \"footer\" auto\n    / 1fr;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    grid-area: main;\n  }\n\n  &:nth-child(2) > vl-element {\n    min-height: 80px;\n    grid-area: footer;\n  }\n}\n/* end of LAYOUT_3 styles */\n",
+        },
+        LAYOUT_4: {
+            styles: "\n/* start of LAYOUT_4 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"left right\" 1fr\n    \"footer footer\" auto\n    / auto auto;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    grid-area: left;\n  }\n\n  &:nth-child(2) > vl-element {\n    grid-area: right;\n  }\n\n  &:nth-child(3) > vl-element {\n    min-height: 80px;\n    grid-area: footer;\n  }\n}\n/* end of LAYOUT_4 styles */\n",
+        },
+        LAYOUT_5: {
+            styles: "\n/* start of LAYOUT_5 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"header\" auto\n    \"main\" 1fr\n    / 1fr;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    min-height: 80px;\n    grid-area: header;\n  }\n\n  &:nth-child(2) > vl-element {\n    grid-area: main;\n  }\n}\n/* end of LAYOUT_5 styles */\n",
+        },
+        LAYOUT_6: {
+            styles: "\n/* start of LAYOUT_6 styles */\n:host {\n  height: 100%;\n  display: grid;\n  grid:\n    \"main\" 1fr\n    / 1fr;\n  gap: 10px;\n  padding: 10px;\n}\n\n:host ::ng-deep element-children > vl-cms-element-renderer {\n  &:nth-child(1) > vl-element {\n    grid-area: main;\n  }\n}\n/* end of LAYOUT_6 styles */\n",
+        },
+    };
+
     var VELOCE_LIBS = {
         '@veloceapps/core': {
             isDefined: core.isDefined,
@@ -1946,7 +2059,12 @@
         ElementsResolver.prototype.resolveElementStyles = function (element) {
             var _a;
             var config = CONFIG[element.type];
-            return !config.suppressStyles ? (_a = element.styles) !== null && _a !== void 0 ? _a : '' : '';
+            var styles = !config.suppressStyles ? (_a = element.styles) !== null && _a !== void 0 ? _a : '' : '';
+            var layout = element.layout && LAYOUT[element.layout];
+            if (layout === null || layout === void 0 ? void 0 : layout.styles) {
+                styles += layout.styles;
+            }
+            return styles;
         };
         ElementsResolver.prototype.processElementMetadata = function (sourceElement) {
             var _this = this;