@omnia/velcron 8.0.163-dev → 8.0.165-dev

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

@@ -129,10 +129,11 @@ export interface BackgroundDefinition {
     fill?: FillDefinitionValue;
     border?: BorderStylingDefinition;
     elevation?: number;
-    media?: BackgroundMedia;
+    media?: BackgroundMediaDefinition;
 }
-export interface BackgroundMedia {
-    type: "image" | "video";
+export type BackgroundMedia = "image" | "video";
+export interface BackgroundMediaDefinition {
+    type: BackgroundMedia;
     src: string;
 }
 export interface FillDefinition {

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

@@ -60,15 +60,16 @@ export interface VelcronComponentDefinition extends VelcronDefinition {
     icon?: any;
 }
 export type VelcronCustomComponentDefinition = VelcronComponentDefinition;
-export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "spacing" | "color-schema-type" | "container" | "reference";
+export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "spacing" | "color-schema-type" | "blueprint" | "background" | "grid" | "reference";
+export type EditorLocation = "inline " | "pane" | "toolbar";
 export interface VelcronEditor<TSettings = any> {
     name?: string;
     icon?: IFontAwesomeIcon;
     category?: string;
-    locations?: ("inline" | "pane" | "menu")[];
+    locations?: (EditorLocation)[];
     type: BuiltInPropertyEditorType | string;
     settings?: TSettings;
-    stateMapping?: string;
+    state?: string;
     propertyMapping?: boolean;
     multiple?: boolean;
     component?: unknown;

package/models/Enums.d.ts

@@ -16,22 +16,9 @@ export declare enum VelcronActionTypes {
 export declare enum VelcronIconTypes {
     fontAwesome = "fa"
 }
-export declare enum VelcronViewDirections {
-    row = "row",
-    column = "column",
-    rowReverse = "row-reverse",
-    columnRevers = "column-reverse"
-}
-export declare enum VelcronHorizontalAlignments {
-    left = "left",
-    center = "center",
-    right = "right"
-}
-export declare enum VelcronVerticalAlignments {
-    top = "top",
-    center = "center",
-    bottom = "bottom"
-}
+export type VelcronViewDirections = "row" | "column" | "row-reverse" | "column-reverse";
+export type VelcronHorizontalAlignments = "left" | "center" | "right";
+export type VelcronVerticalAlignments = "top" | "center" | "bottom";
 export declare enum VelcronDataTypes {
     unknown = "unknown",
     object = "object",

package/models/Enums.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VelcronDataTypes = exports.VelcronVerticalAlignments = exports.VelcronHorizontalAlignments = exports.VelcronViewDirections = exports.VelcronIconTypes = exports.VelcronActionTypes = exports.AssignOperators = void 0;
+exports.VelcronDataTypes = exports.VelcronIconTypes = exports.VelcronActionTypes = exports.AssignOperators = void 0;
 var AssignOperators;
 (function (AssignOperators) {
     AssignOperators["equals"] = "=";
@@ -22,25 +22,6 @@ var VelcronIconTypes;
 (function (VelcronIconTypes) {
     VelcronIconTypes["fontAwesome"] = "fa";
 })(VelcronIconTypes || (exports.VelcronIconTypes = VelcronIconTypes = {}));
-var VelcronViewDirections;
-(function (VelcronViewDirections) {
-    VelcronViewDirections["row"] = "row";
-    VelcronViewDirections["column"] = "column";
-    VelcronViewDirections["rowReverse"] = "row-reverse";
-    VelcronViewDirections["columnRevers"] = "column-reverse";
-})(VelcronViewDirections || (exports.VelcronViewDirections = VelcronViewDirections = {}));
-var VelcronHorizontalAlignments;
-(function (VelcronHorizontalAlignments) {
-    VelcronHorizontalAlignments["left"] = "left";
-    VelcronHorizontalAlignments["center"] = "center";
-    VelcronHorizontalAlignments["right"] = "right";
-})(VelcronHorizontalAlignments || (exports.VelcronHorizontalAlignments = VelcronHorizontalAlignments = {}));
-var VelcronVerticalAlignments;
-(function (VelcronVerticalAlignments) {
-    VelcronVerticalAlignments["top"] = "top";
-    VelcronVerticalAlignments["center"] = "center";
-    VelcronVerticalAlignments["bottom"] = "bottom";
-})(VelcronVerticalAlignments || (exports.VelcronVerticalAlignments = VelcronVerticalAlignments = {}));
 var VelcronDataTypes;
 (function (VelcronDataTypes) {
     //Unknown = null
@@ -51,5 +32,6 @@ var VelcronDataTypes;
     VelcronDataTypes["boolean"] = "boolean";
     VelcronDataTypes["array"] = "array";
     VelcronDataTypes["componentArray"] = "componentArray";
+    //Depricated????
     VelcronDataTypes["bind"] = "bind";
 })(VelcronDataTypes || (exports.VelcronDataTypes = VelcronDataTypes = {}));

package/models/VelcronDefinitions.d.ts

@@ -1,4 +1,4 @@
-import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, ContainerBlueprint, BackgroundDefinition, VelcronEditor } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
+import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, VelcronEditor, ContainerBlueprint, BackgroundDefinition, ContainerVariant } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
 import { DynamicState, VelcronDefinition, useVelcronThemingStore } from "..";
@@ -85,11 +85,11 @@ export interface VelcronRenderContextEventHandlersInstance extends VelcronRender
 }
 export interface VelcronRenderContextHooks {
     dialogVisibilityChanged?: ((visible: boolean) => void);
-    onItemSelected?: ((item: VelcronDefinition) => void);
+    onItemSelected?: ((item: VelcronDefinition, renderContext: VelcronRenderContext) => void);
     wrapperStyleExtensions?: ((item: VelcronDefinition, renderContext: VelcronRenderContext) => string);
-    renderExtensions?: <TNodeType>(item: VelcronDefinition) => TNodeType;
+    renderExtensions?: <TNodeType>(item: VelcronDefinition, renderContext: VelcronRenderContext) => TNodeType;
     appStyleExtension?: (() => string);
-    onItemCreatedProps?: ((item: VelcronDefinition) => object);
+    onItemCreatedProps?: ((item: VelcronDefinition, renderContext: VelcronRenderContext) => object);
 }
 export interface VelcronContainerRenderer {
     definition: VelcronDefinition;
@@ -161,7 +161,7 @@ export interface VelcronFlexRowDefinition extends VelcronDefinition, VelcronColo
     events?: VelcronOnPressEvent;
     direction?: VelcronBindableProp<"row" | "row-reverse">;
     absolute?: VelcronSpacing;
-    blueprint?: ContainerBlueprint;
+    blueprint?: ContainerBlueprint | ContainerVariant;
     background?: BackgroundDefinition;
     hideOverflow?: boolean;
     wrap?: boolean;
@@ -194,7 +194,6 @@ export interface VelcronTextDefinition extends VelcronDefinition, VelcronColorSt
     type: "text";
     value?: VelcronBindableProp;
     placeholder?: VelcronBindableProp;
-    editLabel?: VelcronBindableProp;
     lineClamp?: VelcronBindableProp<number>;
     noWrap?: VelcronBindableProp<boolean>;
     wordBreak?: VelcronBindableProp<"none">;

package/models/VelcronPropertyEditorDefinitions.d.ts

@@ -23,6 +23,12 @@ export interface VelcronTextEditorSettings {
     type: TypographyType;
     placeholder: string;
 }
+export interface VelcronBlueprintEditorSettings {
+    type: "container" | "";
+}
+export interface VelcronBackgroundEditorSettings {
+    type: "image" | "video";
+}
 export interface VelcronSliderPropertyEditor extends VelcronEditor<VelcronSliderPropertyEditorSettings> {
     type: "slider";
 }
@@ -35,9 +41,6 @@ export interface VelcronEnterprisePropertyEditor extends VelcronEditor<any> {
 export interface VelcronTypographyPropertyEditor extends VelcronEditor<VelcronTypographyEditorSettings> {
     type: "typography";
 }
-export interface VelcronContainerPropertyEditor extends VelcronEditor<any> {
-    type: "container";
-}
 export interface VelcronSwitchPropertyEditor extends VelcronEditor<any> {
     type: "switch";
 }
@@ -65,3 +68,12 @@ export interface VelcronSpacingPropertyEditor extends VelcronEditor<VelcronSpaci
 export interface VelcronReferencePropertyEditor extends VelcronEditor<any> {
     type: "reference";
 }
+export interface VelcronBlueprintEditor extends VelcronEditor<VelcronBlueprintEditorSettings> {
+    type: "blueprint";
+}
+export interface VelcronBackgroundEditor extends VelcronEditor<VelcronBackgroundEditorSettings> {
+    type: "background";
+}
+export interface VelcronGridEditor extends VelcronEditor<any> {
+    type: "grid";
+}

package/models/VelcronState.d.ts

@@ -1,14 +1,25 @@
-import { TextBlueprint, TypographySize, TypographyType, VelcronSpacing } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
+import { BackgroundDefinition, ContainerBlueprint, ContainerVariant, TextBlueprint, TypographySize, TypographyType, VelcronSpacing } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 import { VelcronImageRatios } from "./VelcronDefinitions";
 export interface VelcronState {
     images?: VelcronImagesState;
-    styling?: VelcronStylingState;
+    container?: {
+        colorSchemaType?: string;
+        spacing?: VelcronSpacing;
+        blueprint?: ContainerBlueprint | ContainerVariant;
+        background?: BackgroundDefinition;
+    };
+    grid?: VelcronGridState;
     colorSchemas?: VelcronColorSchemasState;
     content?: VelcronContentState;
     header?: VelcronHeaderState;
     properties?: VelcronPropertiesState;
     spacing?: VelcronSpacingState;
 }
+export interface VelcronGridState {
+    columnWidth?: number;
+    columns?: Array<object>;
+    gap?: string | number;
+}
 export interface VelcronSpacingState {
     container?: VelcronSpacing;
 }
@@ -79,60 +90,28 @@ export declare const VelcronImagesStateBinding: {
         height: string;
     };
 };
-export declare const VelcronHeaderStateBinding: {
-    title: {
-        text: string;
-        placeholder: string;
-        blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
-    };
-    icon: string;
-};
-export declare const VelcronContentStateBinding: {
-    title: {
-        text: string;
-        placeholder: string;
-        blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
-    };
-    main: {
-        text: string;
-        placeholder: string;
-        blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
-    };
-    caption: {
-        text: string;
-        placeholder: string;
-        blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
-    };
-    summary: {
-        text: string;
-        placeholder: string;
-        blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
-    };
-};
-export declare const VelcronColorSchemasStateBinding: {
-    main: {
-        value: string;
-        type: string;
-        filled: string;
-    };
-};
-export declare const VelcronSpacingStateBinding: {
-    container: {
-        value: string;
-        top: string;
-        right: string;
-        bottom: string;
-        left: string;
+export declare const VelcronStateMapping: {
+    grid: {
+        columns: string;
     };
 };
 export declare const VelcronStateBinding: {
     colorSchemas: {
-        main: {
+        main_depricated: {
             value: string;
             type: string;
             filled: string;
         };
     };
+    container: {
+        colorSchemaType: string;
+        spacing: string;
+        blueprint: string;
+        background: {
+            value: string;
+            media: string;
+        };
+    };
     images: {
         main: {
             editor: string;
@@ -181,6 +160,12 @@ export declare const VelcronStateBinding: {
             blueprint: import("@omnia/velcron/internal-do-not-import-from-here/shared/models").VelcronBindableProp<TextBlueprint>;
         };
     };
+    grid: {
+        value: string;
+        columnWidth: string;
+        columns: string;
+        gap: string;
+    };
     header: {
         title: {
             text: string;

package/models/VelcronState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VelcronStateBinding = exports.VelcronSpacingStateBinding = exports.VelcronColorSchemasStateBinding = exports.VelcronContentStateBinding = exports.VelcronHeaderStateBinding = exports.VelcronImagesStateBinding = void 0;
+exports.VelcronStateBinding = exports.VelcronStateMapping = exports.VelcronImagesStateBinding = void 0;
 const models_1 = require("@omnia/velcron/internal-do-not-import-from-here/shared/models");
 exports.VelcronImagesStateBinding = {
     main: {
@@ -28,15 +28,7 @@ exports.VelcronImagesStateBinding = {
         height: "{{images.alt2.height}}",
     },
 };
-exports.VelcronHeaderStateBinding = {
-    title: {
-        text: (0, models_1.velcronBind)("header.title.text"),
-        placeholder: (0, models_1.velcronBind)("header.title.placeholder"),
-        blueprint: (0, models_1.velcronBind)("content.title.blueprint")
-    },
-    icon: (0, models_1.velcronBind)("header.icon")
-};
-exports.VelcronContentStateBinding = {
+const VelcronContentStateBinding = {
     title: {
         text: (0, models_1.velcronBind)("content.title.text"),
         placeholder: (0, models_1.velcronBind)("content.title.placeholder"),
@@ -58,34 +50,53 @@ exports.VelcronContentStateBinding = {
         blueprint: (0, models_1.velcronBind)("content.summary.blueprint")
     },
 };
-exports.VelcronColorSchemasStateBinding = {
-    main: {
-        value: (0, models_1.velcronBind)("colorSchemas.main"),
-        type: (0, models_1.velcronBind)("colorSchemas.main.type"),
-        filled: (0, models_1.velcronBind)("colorSchemas.main.filled")
-    }
-};
-exports.VelcronSpacingStateBinding = {
-    container: {
-        value: (0, models_1.velcronBind)("spacing.chrome"),
-        top: (0, models_1.velcronBind)("{{spacing.chrome.top}}"),
-        right: (0, models_1.velcronBind)("{{spacing.chrome.right}}"),
-        bottom: (0, models_1.velcronBind)("{{spacing.chrome.bottom}}"),
-        left: (0, models_1.velcronBind)("{{spacing.chrome.left}}"),
-    }
+exports.VelcronStateMapping = {
+    grid: {
+        columns: "grid.columns",
+    },
 };
-// export interface VelcronSpacingState {
-//     chrome?: VelcronDimensionState 
-// }
-// export interface VelcronDimensionState {
-//     margin?: VelcronSpacing;
-//     padding?: VelcronSpacing;
-// } 
 exports.VelcronStateBinding = {
-    colorSchemas: exports.VelcronColorSchemasStateBinding,
+    colorSchemas: {
+        main_depricated: {
+            value: (0, models_1.velcronBind)("colorSchemas.main"),
+            type: (0, models_1.velcronBind)("colorSchemas.main.type"),
+            filled: (0, models_1.velcronBind)("colorSchemas.main.filled")
+        }
+    },
+    container: {
+        colorSchemaType: (0, models_1.velcronBind)("$state.container.colorSchemaType"),
+        spacing: (0, models_1.velcronBind)("$state.container.spacing"),
+        blueprint: (0, models_1.velcronBind)("$state.container.blueprint"),
+        background: {
+            value: (0, models_1.velcronBind)("$state.container.background"),
+            media: (0, models_1.velcronBind)("$state.container.background.media")
+        }
+    },
     images: exports.VelcronImagesStateBinding,
-    content: exports.VelcronContentStateBinding,
-    header: exports.VelcronHeaderStateBinding,
-    spacing: exports.VelcronSpacingStateBinding
+    content: VelcronContentStateBinding,
+    grid: {
+        value: (0, models_1.velcronBind)("$state.grid"),
+        columnWidth: (0, models_1.velcronBind)("$state.grid.columnWidth"),
+        columns: (0, models_1.velcronBind)("$state.grid.columns"),
+        gap: (0, models_1.velcronBind)("$state.grid.gap"),
+        //rows:velcronBind("grid.rows"),
+    },
+    header: {
+        title: {
+            text: (0, models_1.velcronBind)("$state.header.title.text"),
+            placeholder: (0, models_1.velcronBind)("$state.header.title.placeholder"),
+            blueprint: (0, models_1.velcronBind)("$state.content.title.blueprint")
+        },
+        icon: (0, models_1.velcronBind)("$state.header.icon")
+    },
+    spacing: {
+        container: {
+            value: (0, models_1.velcronBind)("$state.spacing.chrome"),
+            top: (0, models_1.velcronBind)("{{spacing.chrome.top}}"),
+            right: (0, models_1.velcronBind)("{{spacing.chrome.right}}"),
+            bottom: (0, models_1.velcronBind)("{{spacing.chrome.bottom}}"),
+            left: (0, models_1.velcronBind)("{{spacing.chrome.left}}"),
+        }
+    }
     //properties?:VelcronPropertiesState,    
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "8.0.163-dev",
+  "version": "8.0.165-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronData.d.ts

@@ -1,4 +1,4 @@
-import { VelcronRenderContext } from "../models";
+import { VelcronRenderContext, VelcronDataTypes } from "../models";
 import { VelcronAppDefinition, VelcronBindableProp, VelcronDefinition } from "..";
 export interface ParseResult<T> {
     is: boolean;
@@ -26,6 +26,7 @@ export declare class VelcronData {
     static isUndefined(value: any): boolean;
     static isArray(obj: any): obj is ExtendArray;
     static isObject(value: any): value is object;
+    static getDataType(value: any): VelcronDataTypes;
     static extendObject(obj: any): any;
     static propertyPathExists(obj: object, path: string): boolean;
     static getOrSetObjectByPath<T>(object: Object, path: string, value?: any): T | null;

package/parser/VelcronData.js

@@ -464,6 +464,22 @@ class VelcronData {
             !Array.isArray(value) &&
             value !== null;
     }
+    static getDataType(value) {
+        if (value === null)
+            return models_1.VelcronDataTypes.unknown;
+        else if (Array.isArray(value))
+            return models_1.VelcronDataTypes.array;
+        else if (VelcronData.isObject(value))
+            return models_1.VelcronDataTypes.object;
+        else if (VelcronData.isString(value))
+            return models_1.VelcronDataTypes.text;
+        else if (VelcronData.isNumber(value))
+            return models_1.VelcronDataTypes.number;
+        else if (VelcronData.isBoolean(value))
+            return models_1.VelcronDataTypes.boolean;
+        else
+            return models_1.VelcronDataTypes.unknown;
+    }
     static extendObject(obj) {
         //Give objects some powerups
         if (VelcronData.isUndefined(obj)) {

package/parser/VelcronStyles.js

@@ -157,16 +157,16 @@ class VelcronStyles {
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
             const flexDefinition = definition;
+            const spacing = renderCtx.theming.get.spacing();
             let alignX = null;
             let alignY = null;
-            const gapX = flexDefinition.gapX ? flexDefinition.gapX : flexDefinition.gapY;
-            const gapY = flexDefinition.gapY ? flexDefinition.gapY : flexDefinition.gapX;
+            const gapX = flexDefinition.gapX || flexDefinition?.gapX?.toString() === "0" ? (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapX), spacing) : (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacing);
+            const gapY = flexDefinition.gapY || flexDefinition?.gapY?.toString() === "0" ? (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacing) : 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, flexDefinition.absolute.top), spacing));
@@ -200,8 +200,8 @@ class VelcronStyles {
             styleBase["flexWrap"] = flexDefinition.wrap ? "wrap" : null;
             styleBase["justifyContent"] = alignX;
             styleBase["alignItems"] = alignY;
-            styleBase["rowGap"] = gapY;
-            styleBase["columnGap"] = gapX;
+            styleBase["rowGap"] = this.unitProvider.formatDimension(gapY);
+            styleBase["columnGap"] = this.unitProvider.formatDimension(gapX);
             styleBase["flexBasis"] = flexDefinition.height ? this.unitProvider.formatDimension(height) : undefined;
             styleBase["width"] = this.unitProvider.formatDimension(width);
             styleBase["maxWidth"] = this.unitProvider.formatDimension(width);

package/stores/VelcronColorSchema.d.ts

@@ -8,7 +8,7 @@ export declare const useVelcronColorSchemaStore: (newStateWithName?: string) =>
         onContainer: ColorDefinition;
         isContainer: boolean;
         name: string;
-        colorSchemaType: "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "error" | "info" | "dynamic";
+        colorSchemaType: "background" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "error" | "info" | "dynamic";
         id: import("@omnia/fx-models").GuidValue;
     };
     get: {

package/templatebuilder/VelcronEditorBuilder.d.ts

@@ -3,6 +3,7 @@ export declare class VelcronEditorBuilder {
     private editors;
     private formatStateMapping;
     add(): {
+        blueprintEditor: (name: string, stateMapping: string, type: "container") => VelcronEditorBuilder;
         spacingEditor: (name: string, stateMapping: string, individualSelection?: boolean) => VelcronEditorBuilder;
         imageEditor: (name: string, stateMapping: string) => VelcronEditorBuilder;
         colorSchemaEditor: (name: string, stateMapping: string) => VelcronEditorBuilder;
@@ -10,6 +11,8 @@ export declare class VelcronEditorBuilder {
         textEditor: (name: string, stateMapping: string, typographyType: TypographyType, placeholder?: string) => VelcronEditorBuilder;
         blockHeaderEditor: () => VelcronEditorBuilder;
         typographyEditor: (stateMapping: string, settings: VelcronTypographyEditorSettings) => VelcronEditorBuilder;
+        backgroundEditor: (name: string, stateMapping: string, type: "image" | "video") => VelcronEditorBuilder;
+        gridEditor: (name: string, stateMapping: string) => VelcronEditorBuilder;
     };
     build(): VelcronEditor<any>[];
 }

package/templatebuilder/VelcronEditorBuilder.js

@@ -1,20 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronEditorBuilder = void 0;
+const parser_1 = require("../parser");
 class VelcronEditorBuilder {
     constructor() {
         this.editors = [];
     }
     formatStateMapping(stateMapping) {
-        return stateMapping.replace("{{", "").replace("}}", "");
+        return stateMapping
+            .replace(parser_1.VelcronConstants.properties.tokenStart, "")
+            .replace(parser_1.VelcronConstants.properties.tokenEnd, "")
+            .replace(parser_1.VelcronConstants.state.bindToken, "")
+            .replace(parser_1.VelcronConstants.state.stateRootToken + ".", "")
+            .trim();
     }
     add() {
         return {
+            blueprintEditor: (name, stateMapping, type) => {
+                this.editors.push({
+                    name: name,
+                    type: "blueprint",
+                    state: this.formatStateMapping(stateMapping),
+                    settings: {
+                        type: type
+                    }
+                });
+                return this;
+            },
             spacingEditor: (name, stateMapping, individualSelection) => {
                 this.editors.push({
                     name: name,
                     type: "spacing",
-                    stateMapping: this.formatStateMapping(stateMapping),
+                    state: this.formatStateMapping(stateMapping),
                     settings: {
                         individualSelection: individualSelection
                     }
@@ -25,7 +42,7 @@ class VelcronEditorBuilder {
                 this.editors.push({
                     name: name,
                     type: "image",
-                    stateMapping: this.formatStateMapping(stateMapping),
+                    state: this.formatStateMapping(stateMapping),
                 });
                 return this;
             },
@@ -33,7 +50,7 @@ class VelcronEditorBuilder {
                 this.editors.push({
                     name: name,
                     type: "color-schema-type",
-                    stateMapping: this.formatStateMapping(stateMapping),
+                    state: this.formatStateMapping(stateMapping),
                 });
                 return this;
             },
@@ -41,7 +58,7 @@ class VelcronEditorBuilder {
                 this.editors.push({
                     name: name,
                     type: "markdown",
-                    stateMapping: this.formatStateMapping(stateMapping),
+                    state: this.formatStateMapping(stateMapping),
                     settings: {
                         placeholder: placeholder
                     }
@@ -52,7 +69,7 @@ class VelcronEditorBuilder {
                 this.editors.push({
                     name: name,
                     type: "text",
-                    stateMapping: this.formatStateMapping(stateMapping),
+                    state: this.formatStateMapping(stateMapping),
                     settings: {
                         type: typographyType,
                         placeholder: placeholder
@@ -75,12 +92,31 @@ class VelcronEditorBuilder {
                 this.editors.push({
                     name: "Typography",
                     type: "typography",
-                    stateMapping: stateMapping,
+                    state: stateMapping,
                     settings: settings ? settings : {
                         type: "text"
                     }
                 });
                 return this;
+            },
+            backgroundEditor: (name, stateMapping, type) => {
+                this.editors.push({
+                    name: name,
+                    type: "background",
+                    state: this.formatStateMapping(stateMapping),
+                    settings: {
+                        type: type
+                    }
+                });
+                return this;
+            },
+            gridEditor: (name, stateMapping) => {
+                this.editors.push({
+                    name: name,
+                    type: "grid",
+                    state: this.formatStateMapping(stateMapping),
+                });
+                return this;
             }
         };
     }

package/templatebuilder/old/editor/VelcronContentEditor.js

@@ -23,7 +23,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.mainEditor = {
                         name: "Body",
                         type: "markdown",
-                        stateMapping: "content.main.text"
+                        state: "content.main.text"
                     };
                 }
                 return this;
@@ -33,7 +33,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.mainPropertyEditor = {
                         name: title ? title : "Main",
                         type: "text",
-                        stateMapping: "content.main.text",
+                        state: "content.main.text",
                         propertyMapping: true
                     };
                 }
@@ -44,7 +44,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.mainTypographyEditor = {
                         name: title ? title : "Main formatting",
                         type: "typography",
-                        stateMapping: "content.main.text",
+                        state: "content.main.text",
                         settings: {
                             type: type ? type : "text"
                         }
@@ -59,7 +59,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.captionEditor = {
                         name: "Caption",
                         type: "text",
-                        stateMapping: "content.caption.text"
+                        state: "content.caption.text"
                     };
                 }
                 return this;
@@ -69,7 +69,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.captionPropertyEditor = {
                         name: title ? title : "Caption",
                         type: "text",
-                        stateMapping: "content.caption.text",
+                        state: "content.caption.text",
                         propertyMapping: true
                     };
                 }
@@ -80,7 +80,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.captionTypographyEditor = {
                         name: title ? title : "Caption formatting",
                         type: "typography",
-                        stateMapping: "content.caption.text",
+                        state: "content.caption.text",
                         settings: {
                             type: type ? type : "text"
                         }
@@ -95,7 +95,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.titleEditor = {
                         name: "Title",
                         type: "text",
-                        stateMapping: "content.title.text"
+                        state: "content.title.text"
                     };
                 }
                 return this;
@@ -105,7 +105,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.titlePropertyEditor = {
                         name: title ? title : "Title",
                         type: "text",
-                        stateMapping: "content.title.text",
+                        state: "content.title.text",
                         propertyMapping: true
                     };
                 }
@@ -116,7 +116,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.titleTypographyEditor = {
                         name: title ? title : "Title formatting",
                         type: "typography",
-                        stateMapping: "content.title.text",
+                        state: "content.title.text",
                         settings: {
                             type: type ? type : "title"
                         }
@@ -131,7 +131,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.summaryEditor = {
                         name: "Summary",
                         type: "text",
-                        stateMapping: "content.summary.text"
+                        state: "content.summary.text"
                     };
                 }
                 return this;
@@ -141,7 +141,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.summaryPropertyEditor = {
                         name: title ? title : "Summary",
                         type: "text",
-                        stateMapping: "content.summary.text",
+                        state: "content.summary.text",
                         propertyMapping: true
                     };
                 }
@@ -152,7 +152,7 @@ class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEdit
                     this.summaryTypographyEditor = {
                         name: title ? title : "Summary formatting",
                         type: "typography",
-                        stateMapping: "content.summary.text",
+                        state: "content.summary.text",
                         settings: {
                             type: type ? type : "text"
                         }

package/templatebuilder/old/editor/VelcronImageEditor.js

@@ -12,7 +12,7 @@ class VelcronImageEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEditor
                     this.mainEditor = {
                         name: "Select Main Image",
                         type: "image",
-                        stateMapping: "main-image"
+                        state: "main-image"
                     };
                 }
                 return this.builder;

package/templatebuilder/old/editor/VelcronPropertyMappingEditorBuilder.js

@@ -12,7 +12,7 @@ class VelcronPropertyMappingEditorBuilder extends VelcronEditorBuilderBase_1.Vel
             this.editor = {
                 name: "Properties",
                 type: "enterprise-property",
-                stateMapping: "properties.mappings",
+                state: "properties.mappings",
                 propertyMapping: true,
                 multiple: true,
             };