@omnia/velcron 8.0.114-vnext → 8.0.116-dev

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.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>[];
+}

package/templatebuilder/editor/VelcronEditorBuilder2.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronEditorBuilder2 = void 0;
+const fx_models_1 = require("@omnia/fx-models");
+class VelcronEditorBuilder2 {
+    constructor() {
+        this.editors = [];
+    }
+    formatStateMapping(stateMapping) {
+        return stateMapping.replace("{{", "").replace("}}", "");
+    }
+    add() {
+        return {
+            spacingEditor: (name, stateMapping, individualSelection) => {
+                this.editors.push({
+                    name: name,
+                    type: "spacing",
+                    stateMapping: this.formatStateMapping(stateMapping),
+                    settings: {
+                        individualSelection: individualSelection
+                    }
+                });
+                return this;
+            },
+            imageEditor: (name, stateMapping) => {
+                this.editors.push({
+                    name: name,
+                    type: "image",
+                    stateMapping: this.formatStateMapping(stateMapping),
+                });
+                return this;
+            },
+            colorSchemaEditor: (name, stateMapping) => {
+                this.editors.push({
+                    name: name,
+                    type: "color-schema-type",
+                    stateMapping: this.formatStateMapping(stateMapping),
+                });
+                return this;
+            },
+            markdownEditor: (name, stateMapping, placeholder) => {
+                this.editors.push({
+                    name: name,
+                    type: "markdown",
+                    stateMapping: this.formatStateMapping(stateMapping),
+                    settings: {
+                        placeholder: placeholder
+                    }
+                });
+                return this;
+            },
+            textEditor: (name, stateMapping, typographyType, placeholder) => {
+                this.editors.push({
+                    name: name,
+                    type: "text",
+                    stateMapping: this.formatStateMapping(stateMapping),
+                    settings: {
+                        type: typographyType,
+                        placeholder: placeholder
+                    }
+                });
+                return this;
+            },
+            blockHeaderEditor: () => {
+                this.editors.push({
+                    name: "Typography",
+                    type: "typography",
+                    stateMapping: fx_models_1.VelcronHeaderStateBinding.title.typography.editor,
+                    settings: {
+                        type: "title"
+                    }
+                });
+                return this;
+            },
+            typographyEditor: (stateMapping, settings) => {
+                this.editors.push({
+                    name: "Typography",
+                    type: "typography",
+                    stateMapping: stateMapping,
+                    settings: settings ? settings : {
+                        type: "text"
+                    }
+                });
+                return this;
+            }
+        };
+    }
+    build() {
+        // const result = [] as Array<VelcronPropertyEditor>;
+        // if(this.colorSchemaEditorBuilder){
+        //     result.push(...this.colorSchemaEditorBuilder.internalBuild());            
+        // }
+        // if(this.contentEditorBuilder){
+        //     result.push(...this.contentEditorBuilder.internalBuild());            
+        // }
+        // if(this.imageEditorBuilder){
+        //     result.push(...this.imageEditorBuilder.internalBuild());            
+        // }
+        // if(this.propertyMappingBuilder){
+        //     result.push(...this.propertyMappingBuilder.internalBuild());            
+        // }
+        return this.editors;
+        // return result;
+    }
+}
+exports.VelcronEditorBuilder2 = VelcronEditorBuilder2;

package/templatebuilder/editor/VelcronEditorBuilderBase.d.ts

@@ -1,4 +1,4 @@
-import { VelcronPropertyEditor } from "../../models";
+import { VelcronPropertyEditor } from "@omnia/fx-models";
 import { VelcronEditorBuilder } from "./VelcronEditorBuilder";
 export declare abstract class VelcronEditorBuilderBase {
     protected builder: VelcronEditorBuilder;

package/templatebuilder/index.d.ts

@@ -1 +1,2 @@
 export * from "./useVelcronTemplateBuilder";
+export * from "./useVelcronEditorBuilder";

package/templatebuilder/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./useVelcronTemplateBuilder"), exports);
+tslib_1.__exportStar(require("./useVelcronEditorBuilder"), exports);

package/templatebuilder/state/VelcronBlockHeaderStateBuilder.js

@@ -0,0 +1,38 @@
+// import { VelcronStateBuilderBase } from "./VelcronStateBuilderBase";
+// import { VelcronTextContentBuilder } from "./VelcronTextContentBuilder";
+// export class VelcronBlockHeaderStateBuilder extends VelcronStateBuilderBase {
+//     title = new VelcronTextContentBuilder<VelcronBlockHeaderStateBuilder>(this,"content.title");
+//     constructor(stateBuilder) {
+//         super(stateBuilder);
+//     }
+//     protected internalBuild() {
+//         const resultValue = {} as VelcronContentState;
+//         let hasContent = false;
+//         const mainContent = (this.main as any).internalBuild();
+//         const captionContent = (this.caption as any).internalBuild();
+//         const titleContent = (this.title as any).internalBuild();
+//         const summaryContent = (this.summary as any).internalBuild();
+//         if(mainContent){
+//             hasContent = true;
+//             resultValue.main = mainContent;
+//         }
+//         if(captionContent){
+//             hasContent = true;
+//             resultValue.caption = captionContent;
+//         }
+//         if(titleContent){
+//             hasContent = true;
+//             resultValue.title = titleContent;
+//         }
+//         if(summaryContent){
+//             hasContent = true;
+//             resultValue.summary = summaryContent;
+//         }
+//         if(!hasContent){
+//             return null;
+//         }  
+//         return <VelcronState>{
+//             content: resultValue
+//         };        
+//     }
+// }

package/templatebuilder/useVelcronEditorBuilder.d.ts

@@ -0,0 +1,2 @@
+import { VelcronEditorBuilder2 } from "./editor/VelcronEditorBuilder2";
+export declare function useVelcronEditorBuilder(): VelcronEditorBuilder2;

package/templatebuilder/useVelcronEditorBuilder.js

@@ -0,0 +1,9 @@
+"use strict";
+// import { VelcronContentState,  VelcronImagePropertyEditor,  VelcronImageRatios, VelcronImageState, VelcronMarkdownPropertyEditor, VelcronTextPropertyEditor} from "@omnia/fx-models";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVelcronEditorBuilder = void 0;
+const VelcronEditorBuilder2_1 = require("./editor/VelcronEditorBuilder2");
+function useVelcronEditorBuilder() {
+    return new VelcronEditorBuilder2_1.VelcronEditorBuilder2();
+}
+exports.useVelcronEditorBuilder = useVelcronEditorBuilder;

package/internal-do-not-import-from-here/shared/models/Bring.d.ts

@@ -1,24 +0,0 @@
-export type BringMethods = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
-export type BringCacheOptions = "no-cache" | "reload" | "force-cache" | "only-if-cached";
-export type BringCredentials = "include" | "omit" | "same-origin";
-export interface BringInterceptOptions {
-    beforeRequest?: (request: BringConfig) => BringConfig;
-    afterRequest?: <T>(response: BringResponse<T>, request: BringConfig) => BringResponse<T>;
-}
-export interface BringConfig {
-    baseUrl?: string;
-    headers?: {
-        [key: string]: string;
-    };
-    cache?: BringCacheOptions;
-    interceptors?: BringInterceptOptions;
-    abortable?: boolean;
-    credentials?: BringCredentials;
-    executeOnWorker?: boolean;
-}
-export interface BringResponse<TData> {
-    data?: TData;
-    status: Number;
-    statusText: String;
-    ok: Boolean;
-}

package/internal-do-not-import-from-here/shared/models/hub/activities/FeedResult.d.ts

@@ -1,9 +0,0 @@
-import { Activity, ActivityId } from "./Activity";
-import { ActivityRenderer } from "./ActivityRenderer";
-import { IdentityActivity } from "./IdentityActivity";
-export interface FeedResult {
-    renderers: Array<ActivityRenderer>;
-    identityActivities: Array<IdentityActivity>;
-    activities: Array<Activity>;
-    nextStartingFromId: ActivityId;
-}