@omnia/velcron 8.0.84-vnext → 8.0.85-dev

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 {
@@ -33,7 +32,7 @@ class VelcronRenderers {
             customComponentDefinition = renderContext.components?.find(p => p.type.toLowerCase() === definition.type.toLowerCase());
         }
         if (customComponentDefinition) {
-            if (!this.components["customcomponent"]) {
+            if (!this.components[__1.VelcronConstants.components["custom-component"]]) {
                 throw "Cant find the custom component renderer";
             }
             //Make a new instance of the custom component
@@ -43,7 +42,7 @@ class VelcronRenderers {
             //comes from the current instance and override the ones from the original to make style overide work as we want
             customComponentInstance.style = definition.style;
             result = {
-                component: this.components["customcomponent"],
+                component: this.components[__1.VelcronConstants.components["custom-component"]],
                 definition: customComponentInstance,
                 customComponent: true
             };
@@ -74,7 +73,9 @@ class VelcronRenderers {
             computed: currentRenderCtx.computed,
             colors: currentRenderCtx.colors,
             editMode: currentRenderCtx.editMode,
-            blueprints: currentRenderCtx.blueprints,
+            //blueprints: currentRenderCtx.blueprints,
+            disposers: currentRenderCtx.disposers,
+            properties: currentRenderCtx.properties,
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
             const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
@@ -95,26 +96,25 @@ class VelcronRenderers {
                 //Fetch the custom component definition
                 const customDef = rendererInfo.definition;
                 if (customDef.properties) {
-                    // customDef.properties.forEach((prop) => {
                     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(currentRenderCtx, 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;
         }
@@ -58,22 +58,29 @@ class VelcronStyles {
         if (!borderSettings) {
             return;
         }
+        let borderColor = borderSettings.toned ?
+            renderCtx.colors.get[borderSettings.colorType]?.colorToned
+            : renderCtx.colors.get[borderSettings.colorType]?.color;
+        if (borderSettings.opacity) {
+            borderColor = renderCtx.colors.get.base.dark ? `rgba(255,255,255,${borderSettings.opacity})` : `rgba(0,0,0,${borderSettings.opacity})`;
+        }
         if (borderSettings.top || borderSettings.top === 0) {
             styleBase["borderTopStyle"] = "solid";
-            styleBase["borderTopColor"] = renderCtx.colors.get[borderSettings.color];
+            styleBase["borderTopColor"] = borderColor;
         }
         if (borderSettings.right || borderSettings.right === 0) {
             styleBase["borderRightStyle"] = "solid";
-            styleBase["borderRightColor"] = renderCtx.colors.get[borderSettings.color];
+            styleBase["borderRightColor"] = borderColor;
         }
         if (borderSettings.bottom || borderSettings.bottom === 0) {
             styleBase["borderBottomStyle"] = "solid";
-            styleBase["borderBottomColor"] = renderCtx.colors.get[borderSettings.color];
+            styleBase["borderBottomColor"] = borderColor;
         }
         if (borderSettings.left || borderSettings.left === 0) {
             styleBase["borderLeftStyle"] = "solid";
-            styleBase["borderLeftColor"] = renderCtx.colors.get[borderSettings.color];
+            styleBase["borderLeftColor"] = borderColor;
         }
+        styleBase["borderWidth"] = borderSettings.width ? this.unitProvider.formatDimension(borderSettings.width) : 1;
     }
     static create(definition, renderCtx) {
         if (!definition) {
@@ -81,15 +88,15 @@ class VelcronStyles {
         }
         const styleBase = { ...definition.style };
         /**Generic styling */
-        // if(definition.styling?.margin){
-        //     const spacing =  renderCtx.blueprints.get.spacing.inner;                
-        //     styleBase["marginTop"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.top,spacing)) as any;
-        //     styleBase["marginRight"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.right,spacing)) as any;
-        //     styleBase["marginBottom"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.bottom,spacing)) as any;
-        //     styleBase["marginLeft"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.left,spacing)) as any;                
-        // }
+        if (definition.margin) {
+            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;          
@@ -98,7 +105,7 @@ class VelcronStyles {
             styleBase["paddingBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding.bottom), spacing));
             styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding.left), spacing));
         }
-        if (definition.type === VelcronConstants_1.VelcronConstants.components.appDefinition) {
+        if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
             //styleBase["backgroundColor"] = renderCtx.colors.get.base.color;
         }
         if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
@@ -137,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.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.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.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);
-                }
-                else {
-                    styleBase["height"] = this.unitProvider.formatDimension(height);
+            if (flexDefinition.alignY) {
+                if (flexDefinition.alignY === "center") {
+                    alignY = "center";
                 }
-                //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.horizontalAlignment) {
-                const propertyName = direction === "column" || direction === "column-reverse" ? "alignItems" : "justifyContent";
-                if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
-                    styleBase[propertyName] = "flex-end";
+                else if (flexDefinition.alignY === "bottom") {
+                    alignY = "flex-end";
                 }
-                else if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
-                    styleBase[propertyName] = "center";
+                else {
+                    alignY = "stretch";
                 }
             }
-            const propertyName = direction === "column" || direction === "column-reverse" ? "justifyContent" : "alignItems";
-            if (flexViewDefinition.verticalAlignment) {
-                if (flexViewDefinition.verticalAlignment === 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.verticalAlignment === 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/parser/index.d.ts

@@ -5,3 +5,4 @@ export * from "./VelcronStyles";
 export * from "./VelcronLogger";
 export * from "./VelcronRenderers";
 export * from "./TextValue";
+export * from "./VelcronPropertyEditors";

package/parser/index.js

@@ -8,3 +8,4 @@ tslib_1.__exportStar(require("./VelcronStyles"), exports);
 tslib_1.__exportStar(require("./VelcronLogger"), exports);
 tslib_1.__exportStar(require("./VelcronRenderers"), exports);
 tslib_1.__exportStar(require("./TextValue"), exports);
+tslib_1.__exportStar(require("./VelcronPropertyEditors"), exports);

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: ColorSchemaTypes | ColorSchemaType;
+        colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | ColorSchemaTypes;
         themeStore: {
             state: {
                 currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
             };
             get: {
-                blueprint: (blueprintType: import("@omnia/fx-models").BlueprintType | import("@omnia/fx-models").BlueprintTypes) => import("@omnia/fx-models").BlueprintDefinition;
-                colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => ColorSchema;
-                typography: (typographyType: import("@omnia/fx-models").TypographyType | import("@omnia/fx-models").TypographyTypes, size: import("@omnia/fx-models").TypographySize | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
-                color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
-                colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
-                complementaryColorType: (colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
-                complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
-                complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | 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" | "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/VelcronColorSchemaEditor.d.ts

@@ -0,0 +1,9 @@
+import { VelcronPropertyEditor } from "@omnia/fx-models";
+import { VelcronEditorBuilder } from "./VelcronEditorBuilder";
+import { VelcronEditorBuilderBase } from "./VelcronEditorBuilderBase";
+export declare class VelcronColorSchemaEditorBuilder extends VelcronEditorBuilderBase {
+    private editor;
+    constructor(builder: any);
+    add(): VelcronEditorBuilder;
+    protected internalBuild(): VelcronPropertyEditor<any>[];
+}

package/templatebuilder/editor/VelcronColorSchemaEditor.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronColorSchemaEditorBuilder = void 0;
+const VelcronEditorBuilderBase_1 = require("./VelcronEditorBuilderBase");
+class VelcronColorSchemaEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEditorBuilderBase {
+    constructor(builder) {
+        super(builder);
+        this.editor = null;
+    }
+    add() {
+        if (!this.editor) {
+            this.editor = {
+                name: "Color Schema",
+                type: "color-schema-type",
+                stateMapping: "colorSchemaType"
+            };
+        }
+        return this.builder;
+    }
+    internalBuild() {
+        const result = [];
+        if (this.editor) {
+            result.push(this.editor);
+        }
+        return result;
+    }
+}
+exports.VelcronColorSchemaEditorBuilder = VelcronColorSchemaEditorBuilder;