@omnia/velcron 8.0.101-vnext → 8.0.102-dev

package/parser/VelcronData.js

@@ -12,7 +12,7 @@ class VelcronData {
         }
         const tokens = this.getTokens(text, false);
         tokens.forEach((token) => {
-            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
+            let data = this.getOrSet(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
             if (data instanceof TextValue_1.TextValue) {
                 data = data.value;
             }
@@ -70,11 +70,11 @@ class VelcronData {
         let propertiesToEval = {};
         if (renderContext.properties) {
             //Custom component properties evaluation
-            propertiesToEval = {};
-            Object.keys(renderContext.properties).forEach((key) => {
-                propertiesToEval[key] = "properties";
-            });
-            names.push("properties");
+            // propertiesToEval = {};
+            // Object.keys(renderContext.properties).forEach((key) => {
+            //     propertiesToEval[key] = VelcronConstants.properties.propsToken;
+            // });
+            names.push(VelcronConstants_1.VelcronConstants.properties.propsToken);
             obj.push(renderContext.properties);
         }
         else if (overrideNamesMatching) {
@@ -84,7 +84,8 @@ class VelcronData {
             "null",
             "return"
         ];
-        template = VelcronData.addCtxToVariableNames(template, undefined, reservedWords, propertiesToEval);
+        const skipName = "$props";
+        template = VelcronData.addCtxToVariableNames(template, skipName, reservedWords, propertiesToEval);
         names.push("rootCtx");
         names.push("currentCtx");
         obj.push(renderContext.rootContext);
@@ -223,7 +224,7 @@ class VelcronData {
                     }
                     else {
                         //Try get value from rootContext or currentContext
-                        value = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        value = VelcronData.getOrSet(renderContext, value);
                     }
                 }
             }
@@ -243,7 +244,7 @@ class VelcronData {
                 runEvaluation = true;
             }
         }
-        const existingVal = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, path);
+        const existingVal = VelcronData.getOrSet(renderContext, path);
         if (assignOperator === models_1.AssignOperators.equals || assignOperator === models_1.AssignOperators.equalsExclamation) {
             //debugger;
             if (typeof existingVal === "boolean" && typeof value !== "boolean") {
@@ -285,7 +286,7 @@ class VelcronData {
                     }
                     else {
                         //try get value from render context
-                        const localVal = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        const localVal = VelcronData.getOrSet(renderContext, value);
                         if (localVal !== undefined && localVal !== null) {
                             value = localVal;
                         }
@@ -494,7 +495,7 @@ class VelcronData {
         }
         return object;
     }
-    static getOrSetObjectByPathUsingRenderContext(renderContext, path, value = undefined) {
+    static getOrSet(renderContext, path, value = undefined) {
         let result;
         if (VelcronData.isUndefined(path)) {
             return result;
@@ -637,5 +638,5 @@ class VelcronData {
         return { promise, reject, resolve };
     }
 }
-VelcronData.variables = {};
 exports.VelcronData = VelcronData;
+VelcronData.variables = {};

package/parser/VelcronPropertyEditors.js

@@ -36,5 +36,5 @@ class VelcronPropertyEditors {
         return result;
     }
 }
-VelcronPropertyEditors.editors = {};
 exports.VelcronPropertyEditors = VelcronPropertyEditors;
+VelcronPropertyEditors.editors = {};

package/parser/VelcronRenderers.d.ts

@@ -1,4 +1,5 @@
-import { BuiltInComponentRenderers, DynamicState, ResolvedComponentRenderer, VelcronDefinition, VelcronRenderContext } from "../models";
+import { BuiltInComponentRenderers, ResolvedComponentRenderer, VelcronRenderContext } from "../models";
+import { DynamicState, VelcronDefinition } from "..";
 export declare class VelcronRenderers {
     private static components;
     static registerComponent(type: string, component: any): void;

package/parser/VelcronRenderers.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronRenderers = void 0;
-const VelcronLogger_1 = require("./VelcronLogger");
 const VelcronData_1 = require("./VelcronData");
 const __1 = require("..");
 class VelcronRenderers {
@@ -74,8 +73,9 @@ class VelcronRenderers {
             computed: currentRenderCtx.computed,
             colors: currentRenderCtx.colors,
             editMode: currentRenderCtx.editMode,
-            blueprints: currentRenderCtx.blueprints,
-            disposers: currentRenderCtx.disposers
+            //blueprints: currentRenderCtx.blueprints,
+            disposers: currentRenderCtx.disposers,
+            properties: currentRenderCtx.properties,
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
             const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
@@ -98,23 +98,23 @@ class VelcronRenderers {
                 if (customDef.properties) {
                     Object.keys(customDef.properties).forEach((propName) => {
                         const prop = customDef.properties ? customDef.properties[propName] : null;
-                        if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
-                            VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
-                        }
+                        // if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
+                        //     VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
+                        // }
                         result.properties = result.properties || {};
-                        if (definition.hasOwnProperty(propName)) {
-                            if (VelcronData_1.VelcronData.isString(definition[propName])) {
-                                //Properties can be databound so if its a string we try do databind
-                                //this is true for other values such as number / string also
-                                result.properties[propName] = VelcronData_1.VelcronData.dataBind(result, definition[propName]);
-                            }
-                            else {
-                                result.properties[propName] = definition[propName];
-                            }
-                        }
-                        else if (prop.hasOwnProperty("defaultValue")) {
-                            result.properties[propName] = prop.defaultValue;
-                        }
+                        // if (definition.hasOwnProperty(propName)) {
+                        //     if (VelcronData.isString(definition[propName])) {
+                        //         //Properties can be databound so if its a string we try do databind
+                        //         //this is true for other values such as number / string also
+                        //         result.properties[propName] = VelcronData.dataBind(result, definition[propName]);
+                        //     }
+                        //     else {
+                        //         result.properties[propName] = definition[propName];
+                        //     }
+                        // }
+                        // else if (prop.hasOwnProperty("defaultValue")) {
+                        //     result.properties[propName] = prop.defaultValue;
+                        // }
                     });
                 }
             }
@@ -122,5 +122,5 @@ class VelcronRenderers {
         return result;
     }
 }
-VelcronRenderers.components = {};
 exports.VelcronRenderers = VelcronRenderers;
+VelcronRenderers.components = {};

package/parser/VelcronStyles.d.ts

@@ -1,5 +1,6 @@
-import { VelcronBorder, VelcronColorStyling, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
+import { VelcronBorder, VelcronColorStyling, VelcronDimensions, VelcronRenderContext } from "../models";
 import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
+import { VelcronDefinition } from "..";
 export declare class VelcronStyles {
     static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
     static unitProvider: VelcronUnitProvider;

package/parser/VelcronStyles.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronStyles = void 0;
 const VelcronData_1 = require("./VelcronData");
-const models_1 = require("../models");
 const VelcronConstants_1 = require("./VelcronConstants");
 const __1 = require("..");
 class VelcronStyles {
@@ -25,6 +24,7 @@ class VelcronStyles {
             }
             if (colorValue) {
                 styleBase["backgroundColor"] = color.toned ? colorValue.colorToned : colorValue.color;
+                //styleBase["backgroundColor"] = colorValue.colorToned;
             }
             //styleBase["backgroundColor"] = renderCtx.colors.get.base.color;
         }
@@ -80,6 +80,7 @@ class VelcronStyles {
             styleBase["borderLeftStyle"] = "solid";
             styleBase["borderLeftColor"] = borderColor;
         }
+        styleBase["borderWidth"] = borderSettings.width ? this.unitProvider.formatDimension(borderSettings.width) : 1;
     }
     static create(definition, renderCtx) {
         if (!definition) {
@@ -88,14 +89,14 @@ class VelcronStyles {
         const styleBase = { ...definition.style };
         /**Generic styling */
         if (definition.margin) {
-            const spacing = renderCtx.blueprints.get.spacing.inner;
-            styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.top, spacing));
-            styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.right, spacing));
-            styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.bottom, spacing));
-            styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.left, spacing));
+            const spacing = renderCtx.theming.get.spacing();
+            styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.top), spacing));
+            styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.right), spacing));
+            styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.bottom), spacing));
+            styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.left), spacing));
         }
         if (definition.padding) {
-            const spacing = renderCtx.blueprints.get.spacing.inner;
+            const spacing = renderCtx.theming.get.spacing();
             //  const padding:VelcronSpacing = definition.padding instanceof Object ? definition.padding : 
             //                  VelcronData.getOrSetObjectByPathUsingRenderContext(renderCtx, definition.padding);             
             //const padding = VelcronData.dataBind(renderCtx, definition.padding) as any as VelcronDimensions;          
@@ -143,79 +144,181 @@ class VelcronStyles {
             else {
                 styleBase["color"] = textDefinition.toned ? renderCtx.colors.get.onBase.colorToned : renderCtx.colors.get.onBase.color;
             }
+            if (textDefinition.noWrap) {
+                styleBase["textWrap"] = "nowrap";
+            }
+        }
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.flex) {
+            const flexDefinition = definition;
+            //     styleBase["position"] = "absolute";
+            styleBase["width"] = "100%";
+            styleBase["boxSizing"] = "border-box";
+            this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
         }
-        else if (definition.type === VelcronConstants_1.VelcronConstants.components.view) {
-            const flexViewDefinition = definition;
-            styleBase["overflow"] = "hidden";
-            if (flexViewDefinition.absolute) {
-                const spacing = renderCtx.blueprints.get.spacing.inner;
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
+            const flexDefinition = definition;
+            let alignX = null;
+            let alignY = null;
+            const gapX = flexDefinition.gapX ? flexDefinition.gapX : flexDefinition.gapY;
+            const gapY = flexDefinition.gapY ? flexDefinition.gapY : flexDefinition.gapX;
+            const width = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.width);
+            const minWidth = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minWidth);
+            const height = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.height);
+            const minHeight = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minHeight);
+            if (flexDefinition.absolute) {
+                const spacing = renderCtx.theming.get.spacing();
                 styleBase["position"] = "absolute";
                 /**Use margin to position the element since flex does not support absolute positioning */
-                styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.absolute.top), spacing));
-                styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.absolute.right), spacing));
-                styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.absolute.bottom), spacing));
-                styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.absolute.left), spacing));
+                styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.top), spacing));
+                styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.right), spacing));
+                styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.bottom), spacing));
+                styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.absolute.left), spacing));
             }
-            const flexGrow = flexViewDefinition.grow || flexViewDefinition.grow === 0 ? flexViewDefinition.grow : 1;
-            const direction = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.direction);
-            styleBase["flex"] = flexGrow;
-            styleBase["flexDirection"] = direction === "column" ? "column"
-                : direction === "column-reverse" ? "column-reverse"
-                    : direction === "row-reverse" ? "row-reverse"
-                        : "row";
-            if (flexViewDefinition.width) {
-                const width = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.width);
-                if (!direction || direction === "" || direction === "row" || direction === "row-reverse") {
-                    styleBase["flexBasis"] = this.unitProvider.formatDimension(width);
-                    styleBase["maxWidth"] = this.unitProvider.formatDimension(width);
+            if (flexDefinition.alignX) {
+                if (flexDefinition.alignX === "right") {
+                    alignX = "flex-end";
                 }
-                else {
-                    styleBase["width"] = this.unitProvider.formatDimension(width);
+                else if (flexDefinition.alignX === "center") {
+                    alignX = "center";
                 }
-                //styleBase["width"] = this.unitProvider.formatDimension(flexViewDefinition.width);
-            }
-            if (flexViewDefinition.minWidth) {
-                const minWidth = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.minWidth);
-                styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
             }
-            if (flexViewDefinition.height) {
-                const height = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.height);
-                if (direction === "column" || direction === "column-reverse") {
-                    styleBase["maxHeight"] = this.unitProvider.formatDimension(height);
-                    styleBase["flexBasis"] = this.unitProvider.formatDimension(height);
+            if (flexDefinition.alignY) {
+                if (flexDefinition.alignY === "center") {
+                    alignY = "center";
                 }
-                else {
-                    styleBase["height"] = this.unitProvider.formatDimension(height);
-                }
-                //direction === "column" || direction === "column-reverse"
-            }
-            if (flexViewDefinition.minHeight) {
-                const minHeight = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.minHeight);
-                styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
-            }
-            if (flexViewDefinition.hAlign) {
-                const propertyName = direction === "column" || direction === "column-reverse" ? "alignItems" : "justifyContent";
-                if (flexViewDefinition.hAlign === models_1.VelcronHorizontalAlignments.right) {
-                    styleBase[propertyName] = "flex-end";
+                else if (flexDefinition.alignY === "bottom") {
+                    alignY = "flex-end";
                 }
-                else if (flexViewDefinition.hAlign === models_1.VelcronHorizontalAlignments.center) {
-                    styleBase[propertyName] = "center";
+                else {
+                    alignY = "stretch";
                 }
             }
-            const propertyName = direction === "column" || direction === "column-reverse" ? "justifyContent" : "alignItems";
-            if (flexViewDefinition.vAlign) {
-                if (flexViewDefinition.vAlign === models_1.VelcronVerticalAlignments.center) {
-                    styleBase[propertyName] = "center";
+            styleBase["overflow"] = flexDefinition.hideOverflow ? "hidden" : null;
+            styleBase["flexDirection"] = flexDefinition.direction;
+            styleBase["display"] = "flex";
+            styleBase["flex"] = "1 1 auto";
+            styleBase["flexWrap"] = flexDefinition.wrap ? "wrap" : null;
+            styleBase["justifyContent"] = alignX;
+            styleBase["alignItems"] = alignY;
+            styleBase["rowGap"] = gapY;
+            styleBase["columnGap"] = gapX;
+            styleBase["flexBasis"] = flexDefinition.height ? this.unitProvider.formatDimension(height) : undefined;
+            styleBase["width"] = this.unitProvider.formatDimension(width);
+            styleBase["maxWidth"] = this.unitProvider.formatDimension(width);
+            styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
+            styleBase["height"] = this.unitProvider.formatDimension(height);
+            styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
+            this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
+        }
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.column) {
+            const flexDefinition = definition;
+            let yAlignment = null;
+            const width = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.width);
+            const minWidth = VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.minWidth);
+            if (flexDefinition.alignY) {
+                if (flexDefinition.alignY === "center") {
+                    yAlignment = "center";
                 }
-                else if (flexViewDefinition.vAlign === models_1.VelcronVerticalAlignments.bottom) {
-                    styleBase[propertyName] = "flex-end";
+                else if (flexDefinition.alignY === "bottom") {
+                    yAlignment = "end";
                 }
             }
-            else {
-                styleBase[propertyName] = "flex-start";
-            }
-            this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
+            styleBase["flexBasis"] = flexDefinition.width ? this.unitProvider.formatDimension(width) : 0;
+            styleBase["flexGrow"] = flexDefinition.grow || flexDefinition.grow === 0 ? flexDefinition.grow : 1;
+            styleBase["maxWidth"] = flexDefinition.width ? this.unitProvider.formatDimension(width) : "100%";
+            styleBase["alignSelf"] = yAlignment;
+            styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
+            this.insertBackgroundColor(styleBase, flexDefinition, renderCtx);
         }
+        // const flexViewDefinition = definition as VelcronFlexDefinition;  
+        // // let calculatedMaxHeight = maxHeight;
+        // // let calculatedHeight = height;
+        // styleBase["overflow"] = "hidden";
+        // if(flexViewDefinition.absolute){
+        //     const spacing =  renderCtx.blueprints.get.spacing.inner;   
+        //     styleBase["position"] = "absolute";
+        //     /**Use margin to position the element since flex does not support absolute positioning */                
+        //     styleBase["marginTop"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.top),spacing)) as any;
+        //     styleBase["marginRight"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.right),spacing)) as any;
+        //     styleBase["marginBottom"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.bottom),spacing)) as any;
+        //     styleBase["marginLeft"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx,flexViewDefinition.absolute.left),spacing)) as any;
+        // }
+        // const flexGrow = flexViewDefinition.grow === "default"? 
+        //                     undefined :  
+        //                     flexViewDefinition.grow || flexViewDefinition.grow === 0 ? 
+        //                         flexViewDefinition.grow : 
+        //                         1;
+        // styleBase["flex"] = flexGrow;               
+        // const direction = VelcronData.dataBind(renderCtx, flexViewDefinition.direction);          
+        // //styleBase["flex"] = flexGrow; /**testing */
+        // styleBase["flexDirection"] = direction === "column" ? "column" 
+        //     : direction === "column-reverse" ? "column-reverse" 
+        //     : direction === "row-reverse" ? "row-reverse" 
+        //     : "row";
+        // if (flexViewDefinition.width) {          
+        //     const width = VelcronData.dataBind(renderCtx,flexViewDefinition.width);                         
+        //     const maxWidth = VelcronData.dataBind(renderCtx,flexViewDefinition.maxWidth);                         
+        //     if(!direction || direction==="" || direction === "row" || direction === "row-reverse"){                                        
+        //         styleBase["flexBasis"] =  this.unitProvider.formatDimension(width);
+        //         styleBase["maxWidth"] = maxWidth?this.unitProvider.formatDimension(maxWidth) :  this.unitProvider.formatDimension(width);
+        //         styleBase["width"] = this.unitProvider.formatDimension(width);
+        //     }                
+        //     else{
+        //         styleBase["width"] = this.unitProvider.formatDimension(width);
+        //         if(!flexGrow){
+        //             styleBase["maxWidth"] = maxWidth?this.unitProvider.formatDimension(maxWidth) :  this.unitProvider.formatDimension(width);
+        //         }
+        //     }                
+        //     //styleBase["width"] = this.unitProvider.formatDimension(flexViewDefinition.width);
+        // }
+        // if(flexViewDefinition.minWidth){                
+        //     const minWidth = VelcronData.dataBind(renderCtx,flexViewDefinition.minWidth);                         
+        //     styleBase["minWidth"] = this.unitProvider.formatDimension(minWidth);
+        // }
+        // if (flexViewDefinition.height) {                  
+        //     const height = VelcronData.dataBind(renderCtx,flexViewDefinition.height);                         
+        //     const maxHeight = VelcronData.dataBind(renderCtx,flexViewDefinition.maxHeight);
+        //     if(direction === "column" || direction === "column-reverse"){
+        //         styleBase["flexBasis"] = this.unitProvider.formatDimension(height);
+        //         styleBase["maxHeight"] = maxHeight?this.unitProvider.formatDimension(maxHeight) :  this.unitProvider.formatDimension(height);                    
+        //         styleBase["height"] = this.unitProvider.formatDimension(height); /**Test since flex basis doesn't seem to bite on column direction */
+        //     }
+        //     else{
+        //         styleBase["height"] = this.unitProvider.formatDimension(height);
+        //         if(!flexGrow){
+        //             styleBase["maxHeight"] = maxHeight?this.unitProvider.formatDimension(maxHeight) :  this.unitProvider.formatDimension(height);                    
+        //         }
+        //     }
+        //     //direction === "column" || direction === "column-reverse"
+        // }
+        // if(flexViewDefinition.minHeight){
+        //     const minHeight = VelcronData.dataBind(renderCtx,flexViewDefinition.minHeight);                         
+        //     styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
+        // }
+        // if (flexViewDefinition.hAlign) {
+        //     const propertyName = direction === "column" || direction === "column-reverse" ? "alignItems" : "justifyContent";
+        //     if (flexViewDefinition.hAlign === VelcronHorizontalAlignments.right) {
+        //         styleBase[propertyName] = "flex-end";
+        //     }
+        //     else if (flexViewDefinition.hAlign === VelcronHorizontalAlignments.center) {
+        //         styleBase[propertyName] = "center";
+        //     }
+        // }
+        // const propertyName = direction === "column" || direction === "column-reverse" ? "justifyContent" : "alignItems";
+        // if (flexViewDefinition.vAlign) {
+        //     if (flexViewDefinition.vAlign === VelcronVerticalAlignments.center
+        //         ) {
+        //         styleBase[propertyName] = "center";
+        //     }
+        //     else if (flexViewDefinition.vAlign === VelcronVerticalAlignments.bottom) {
+        //         styleBase[propertyName] = "flex-end";
+        //     }
+        // }
+        // else {
+        //     styleBase[propertyName] = "flex-start";
+        // }
+        // this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
+        //}
         /**
          *
          * Generic styles for all components

package/stores/ReactivitySystem.d.ts

@@ -1,5 +1,5 @@
 export declare class ReactivitySystem {
-    static makeReactive: (obj: any) => unknown;
+    static makeReactive: (obj: any) => any;
     static hasReactivityProvider: boolean;
-    static registerProvider(fn: (obj: any) => unknown): void;
+    static registerProvider(fn: (obj: any) => any): void;
 }

package/stores/ReactivitySystem.js

@@ -7,6 +7,6 @@ class ReactivitySystem {
         ReactivitySystem.hasReactivityProvider = true;
     }
 }
+exports.ReactivitySystem = ReactivitySystem;
 ReactivitySystem.makeReactive = null;
 ReactivitySystem.hasReactivityProvider = false;
-exports.ReactivitySystem = ReactivitySystem;

package/stores/VelcronColorSchema.d.ts

@@ -8,20 +8,21 @@ export declare const useVelcronColorSchemaStore: (newStateWithName?: string) =>
         onContainer: ColorDefinition;
         isContainer: boolean;
         name: string;
-        colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background";
+        colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes;
         themeStore: {
             state: {
                 currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
             };
             get: {
-                blueprint: (blueprintType: "default" | "variant1" | "variant2" | "variant3" | import("@omnia/fx-models").BlueprintTypes) => import("@omnia/fx-models").BlueprintDefinition;
-                colorSchema: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background") => ColorSchema;
-                typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
-                color: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
-                colorDefinition: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
+                componentBlueprints: (blueprintType: import("@omnia/fx-models").VelcronBlueprintDefintionTypes) => import("@omnia/fx-models").ComponentBlueprint;
+                colorSchema: (colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes) => ColorSchema;
+                spacing: () => import("@omnia/fx-models").SpacingDefinition;
+                typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => any;
+                color: (colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes, colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
+                colorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes, colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
                 complementaryColorType: (colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
-                complementaryColor: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
-                complementaryColorDefinition: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
+                complementaryColor: (colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes, colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
+                complementaryColorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes, colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
                 currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
             };
             actions: {

package/stores/VelcronTheming.d.ts

@@ -1,12 +1,13 @@
-import { BlueprintType, BlueprintTypes, ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
+import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ComponentBlueprint, SpacingDefinition, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes, VelcronBlueprintDefintionTypes } from "..";
 export declare const useVelcronThemingStore: (newStateWithName?: string) => {
     state: {
         currentTheme: ThemeDefinitionV2;
     };
     get: {
-        blueprint: (blueprintType: BlueprintTypes | BlueprintType) => import("..").BlueprintDefinition;
+        componentBlueprints: (blueprintType: VelcronBlueprintDefintionTypes) => ComponentBlueprint;
         colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("..").ColorSchema;
-        typography: (typographyType: TypographyTypes | TypographyType, size: TypographySizes | TypographySize) => import("..").TypographyTypeDefinition;
+        spacing: () => SpacingDefinition;
+        typography: (typographyType: TypographyTypes | TypographyType, size: TypographySizes | TypographySize) => any;
         color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
         colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;
         complementaryColorType: (colorType: ColorTypes | ColorType) => ColorTypes;

package/stores/VelcronTheming.js

@@ -13,14 +13,26 @@ exports.useVelcronThemingStore = (0, _1.defineVelcronStore)("VelcronTheming", {
     },
     getters(state) {
         return {
-            blueprint: (blueprintType) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).blueprint(blueprintType);
+            componentBlueprints: (blueprintType) => {
+                return (0, __1.useThemeMethods)(() => state.currentTheme).bluePrintbyType("component");
             },
             colorSchema: (colorSchemaType) => {
                 return (0, __1.useThemeMethods)(() => state.currentTheme).colorSchema(colorSchemaType);
             },
+            spacing: () => {
+                return (0, __1.useThemeMethods)(() => state.currentTheme).bluePrintbyType("spacing").default.inner;
+            },
             typography: (typographyType, size) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).typography(__1.BlueprintTypes.default, typographyType, size);
+                const typography = (0, __1.useThemeMethods)(() => state.currentTheme).bluePrintbyType("typography").default;
+                if (typographyType === __1.TypographyTypes.text) {
+                    return typography.text[size];
+                }
+                else if (typographyType === __1.TypographyTypes.title) {
+                    return typography.title[size];
+                }
+                else if (typographyType === __1.TypographyTypes.navigation) {
+                    return typography.navigation[size];
+                }
             },
             color: (colorSchemaType, colorType) => {
                 return (0, __1.useThemeMethods)(() => state.currentTheme).color(colorSchemaType, colorType);

package/stores/index.d.ts

@@ -2,4 +2,3 @@ export * from "./VelcronStore";
 export * from "./VelcronTheming";
 export * from "./ReactivitySystem";
 export * from "./VelcronColorSchema";
-export * from "./VelcronBlueprint";

package/stores/index.js

@@ -5,4 +5,4 @@ tslib_1.__exportStar(require("./VelcronStore"), exports);
 tslib_1.__exportStar(require("./VelcronTheming"), exports);
 tslib_1.__exportStar(require("./ReactivitySystem"), exports);
 tslib_1.__exportStar(require("./VelcronColorSchema"), exports);
-tslib_1.__exportStar(require("./VelcronBlueprint"), exports);
+//export * from "./VelcronBlueprint";

package/templatebuilder/editor/VelcronEditorBuilder2.d.ts

@@ -0,0 +1,15 @@
+import { TypographyType, VelcronPropertyEditor, VelcronTypographyEditorSettings } from "@omnia/fx-models";
+export declare class VelcronEditorBuilder2 {
+    private editors;
+    private formatStateMapping;
+    add(): {
+        spacingEditor: (name: string, stateMapping: string, individualSelection?: boolean) => VelcronEditorBuilder2;
+        imageEditor: (name: string, stateMapping: string) => VelcronEditorBuilder2;
+        colorSchemaEditor: (name: string, stateMapping: string) => VelcronEditorBuilder2;
+        markdownEditor: (name: string, stateMapping: string, placeholder?: string) => VelcronEditorBuilder2;
+        textEditor: (name: string, stateMapping: string, typographyType: TypographyType, placeholder?: string) => VelcronEditorBuilder2;
+        blockHeaderEditor: () => VelcronEditorBuilder2;
+        typographyEditor: (stateMapping: string, settings: VelcronTypographyEditorSettings) => VelcronEditorBuilder2;
+    };
+    build(): VelcronPropertyEditor<any>[];
+}