@veloceapps/sdk 7.0.0-2 → 7.0.0-3

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

@@ -1446,6 +1446,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 +1583,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 +1622,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 +1882,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 +2025,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;