@omnia/velcron 8.0.88-vnext → 8.0.91-vnext

package/index.d.ts

@@ -4,3 +4,4 @@ export * from "./actions";
 export * from "./stores";
 export * from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 export * from "./rules";
+export * from "./templatebuilder";

package/index.js

@@ -7,3 +7,4 @@ tslib_1.__exportStar(require("./actions"), exports);
 tslib_1.__exportStar(require("./stores"), exports);
 tslib_1.__exportStar(require("@omnia/velcron/internal-do-not-import-from-here/shared/models"), exports);
 tslib_1.__exportStar(require("./rules"), exports);
+tslib_1.__exportStar(require("./templatebuilder"), exports);

package/models/VelcronDefinitions.d.ts

@@ -7,7 +7,7 @@ import { useVelcronBlueprintStore } from "../stores/VelcronBlueprint";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
-    customComponent: boolean;
+    customComponent?: boolean;
 }
 export interface BuiltInComponentRenderers {
     "view": unknown;
@@ -23,6 +23,7 @@ export interface BuiltInComponentRenderers {
     "icon": unknown;
     "chip": unknown;
     "markdown": unknown;
+    "slot": unknown;
 }
 export interface ColorSchemaReference {
     name: string;
@@ -215,7 +216,7 @@ export interface VelcronTextDefinition extends VelcronDefinitionWithEditMode, Ve
 }
 export declare enum VelcronImageRatios {
     square = "square",
-    landscape = "landscapre"
+    landscape = "landscape"
 }
 export interface VelcronImageDefinition extends VelcronDefinition {
     type: "image";
@@ -279,6 +280,11 @@ export interface VelcronChipDefinition extends VelcronDefinition {
     disabled?: boolean;
     events?: VelcronOnPressEvent;
 }
+export interface VelcronSlotDefinition extends VelcronDefinition {
+    type: "slot";
+    bind: string;
+    value: VelcroncomponentArrayType;
+}
 export type VelcronCustomComponentDefinition = VelcronComponentDefinition;
 export type VelcronRenderProps<TDefinition> = {
     definition: TDefinition;

package/models/VelcronDefinitions.js

@@ -4,5 +4,5 @@ exports.VelcronImageRatios = void 0;
 var VelcronImageRatios;
 (function (VelcronImageRatios) {
     VelcronImageRatios["square"] = "square";
-    VelcronImageRatios["landscape"] = "landscapre";
+    VelcronImageRatios["landscape"] = "landscape";
 })(VelcronImageRatios = exports.VelcronImageRatios || (exports.VelcronImageRatios = {}));

package/models/VelcronPropertyEditorDefinitions.d.ts

@@ -2,6 +2,15 @@ import { VelcronImageRatios } from "@omnia/fx-models";
 export interface ResolvedPropertyEditor {
     editor: VelcronPropertyEditor;
 }
+export interface VelcronPropertyEditor<TSettings = any> {
+    name?: string;
+    category?: string;
+    type: BuiltInPropertyEditorType | string;
+    settings?: TSettings;
+    stateMapping?: string;
+    propertyMapping?: boolean;
+    component?: unknown;
+}
 export interface BuiltInPropertyEditors {
     text: unknown;
     slider: unknown;
@@ -12,17 +21,9 @@ export interface BuiltInPropertyEditors {
     icon: unknown;
     image: unknown;
     typography: unknown;
+    "color-schema-type": unknown;
 }
-export interface VelcronPropertyEditor<TSettings = any> {
-    name?: string;
-    category?: string;
-    type: BuiltInPropertyEditorType | string;
-    settings?: TSettings;
-    stateMapping?: string;
-    propertyMapping?: string;
-    component?: unknown;
-}
-export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography";
+export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "color-schema-type";
 export declare enum BuiltInPropertyEditorTypes {
     text = "text",
     slider = "slider",
@@ -32,7 +33,8 @@ export declare enum BuiltInPropertyEditorTypes {
     markdown = "markdown",
     icon = "icon",
     image = "image",
-    typography = "typography"
+    typography = "typography",
+    "color-schema-type" = "color-schema-type"
 }
 export interface VelcronSliderPropertyEditorSettings {
     min: number;
@@ -57,6 +59,9 @@ export interface VelcronAlignmentPropertyEditor extends VelcronPropertyEditor<an
 export interface VelcronColorPropertyEditor extends VelcronPropertyEditor<any> {
     type: "color";
 }
+export interface VelcronColorSchemaPropertyEditor extends VelcronPropertyEditor<any> {
+    type: "color-schema-type";
+}
 export interface VelcronIconPropertyEditor extends VelcronPropertyEditor<any> {
     type: "icon";
 }
@@ -67,10 +72,12 @@ export interface VelcronImagePropertyEditor extends VelcronPropertyEditor<any> {
     type: "image";
 }
 export interface VelcronContentState {
-    caption: string;
-    main: string;
+    content: {
+        caption?: string;
+        main?: string;
+    };
 }
 export interface VelcronImageState {
-    url: string;
-    ratio: VelcronImageRatios;
+    url?: string;
+    ratio?: VelcronImageRatios;
 }

package/models/VelcronPropertyEditorDefinitions.js

@@ -12,4 +12,5 @@ var BuiltInPropertyEditorTypes;
     BuiltInPropertyEditorTypes["icon"] = "icon";
     BuiltInPropertyEditorTypes["image"] = "image";
     BuiltInPropertyEditorTypes["typography"] = "typography";
+    BuiltInPropertyEditorTypes["color-schema-type"] = "color-schema-type";
 })(BuiltInPropertyEditorTypes = exports.BuiltInPropertyEditorTypes || (exports.BuiltInPropertyEditorTypes = {}));

package/package.json

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

package/parser/VelcronActions.js

@@ -331,7 +331,7 @@ class VelcronActions {
         return text;
     }
     static parseAndExecuteComputed(renderContext, template) {
-        VelcronData_1.VelcronData.getTokens(template).forEach(token => {
+        VelcronData_1.VelcronData.getTokens(template, false).forEach(token => {
             const paramValues = [];
             VelcronActions.parseFunction(renderContext.computed, token, renderContext, paramValues, (acName, params) => {
                 const funcContent = renderContext.computed[acName];

package/parser/VelcronConstants.d.ts

@@ -13,6 +13,7 @@ export declare const VelcronConstants: {
         icon: string;
         chip: string;
         markdown: string;
+        slot: string;
     };
     events: {
         idTokenStart: string;
@@ -25,5 +26,6 @@ export declare const VelcronConstants: {
     properties: {
         tokenStart: string;
         tokenEnd: string;
+        propsToken: string;
     };
 };

package/parser/VelcronConstants.js

@@ -16,6 +16,7 @@ exports.VelcronConstants = {
         icon: "icon",
         chip: "chip",
         markdown: "markdown",
+        slot: "slot",
     },
     events: {
         idTokenStart: "$ev{",
@@ -26,7 +27,8 @@ exports.VelcronConstants = {
         stateRootToken: "$state"
     },
     properties: {
-        tokenStart: "${",
-        tokenEnd: "}"
+        tokenStart: "{{",
+        tokenEnd: "}}",
+        propsToken: "$props"
     }
 };

package/parser/VelcronData.d.ts

@@ -26,7 +26,7 @@ export declare class VelcronData {
     static extendObject(obj: any): any;
     static getOrSetObjectByPath<T>(object: Object, path: string, value?: any): T | null;
     static getOrSetObjectByPathUsingRenderContext<T>(renderContext: VelcronRenderContext, path: string, value?: any): T;
-    static getTokens(template: any): string[];
+    static getTokens(template: any, removeBrackets: boolean): string[];
     static ensureEventId(event: string): string;
     static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition, generateNewKeys?: boolean): void;
     static removeKeys(ui: VelcronDefinition | VelcronAppDefinition): void;

package/parser/VelcronData.js

@@ -10,10 +10,9 @@ class VelcronData {
         if (!VelcronData.isString(text)) {
             return text;
         }
-        const tokens = this.getTokens(text);
-        tokens.forEach((name) => {
-            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, name);
-            const token = VelcronConstants_1.VelcronConstants.properties.tokenStart + name + VelcronConstants_1.VelcronConstants.properties.tokenEnd;
+        const tokens = this.getTokens(text, false);
+        tokens.forEach((token) => {
+            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
             if (data instanceof TextValue_1.TextValue) {
                 data = data.value;
             }
@@ -508,52 +507,49 @@ class VelcronData {
             variables[renderContext.id].hasOwnProperty(path)) {
             result = variables[renderContext.id][path];
         }
+        else if (path.startsWith(VelcronConstants_1.VelcronConstants.properties.propsToken + ".")) {
+            //props in a custom component $props.
+            path = path.substring(VelcronConstants_1.VelcronConstants.properties.propsToken.length + 1);
+            const propObj = VelcronData.getOrSetObjectByPath(renderContext.properties, path);
+            if (VelcronData.isString(propObj)) {
+                const propString = propObj;
+                path = VelcronData.dataBind(renderContext, propString);
+                result = path;
+            }
+            result = propObj;
+        }
         else {
-            let pathIsPropertyValue = false;
-            if (renderContext.properties?.hasOwnProperty(path)) {
-                pathIsPropertyValue = true;
-                const propObj = renderContext.properties[path];
-                if (VelcronData.isString(propObj)) {
-                    const propString = propObj;
-                    path = VelcronData.dataBind(renderContext, propString);
-                }
-                result = propObj;
+            const tokens = VelcronData.getTokens(path, true);
+            if (tokens.length > 0) {
+                path = tokens[0];
             }
-            if (!result || VelcronData.isString(result)) {
-                const tokens = VelcronData.getTokens(path);
-                if (tokens.length > 0) {
-                    path = tokens[0];
-                }
-                let object = null;
-                if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
-                    //Fetch from the data object
-                    object = renderContext.rootContext;
-                    path = path.substring(6);
-                }
-                else {
-                    //Fetch from current ctx
-                    object = renderContext.currentContext;
-                }
-                if (VelcronData.isObject(object)) {
-                    result = VelcronData.getOrSetObjectByPath(object, path, value);
-                }
-                else {
-                    //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
-                    result = object;
-                }
-                if (typeof result === "undefined" && pathIsPropertyValue) {
-                    result = path;
-                }
+            let object = null;
+            if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
+                //Fetch from the data object
+                object = renderContext.rootContext;
+                path = path.substring(6);
+            }
+            else {
+                //Fetch from current ctx
+                object = renderContext.currentContext;
+            }
+            if (VelcronData.isObject(object)) {
+                result = VelcronData.getOrSetObjectByPath(object, path, value);
+            }
+            else {
+                //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
+                result = object;
             }
         }
         return result;
     }
-    static getTokens(template) {
+    static getTokens(template, removeBrackets) {
         const tokens = [];
         if (template) {
-            template.replace(/(\${).+?(?=\})/g, (tokenWithVar, token) => {
-                tokens.push(tokenWithVar.substring(2));
-                return token;
+            template.replace(removeBrackets ? /{{\s*(.+?)\s*}}/g : /(\{{.+?\}})/g, (foundToken, token) => {
+                const tokenWithVar = removeBrackets ? token : foundToken;
+                tokens.push(tokenWithVar);
+                return tokenWithVar;
             });
         }
         return tokens;

package/parser/VelcronRenderers.js

@@ -95,7 +95,6 @@ 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))) {
@@ -106,7 +105,7 @@ class VelcronRenderers {
                             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]);
+                                result.properties[propName] = VelcronData_1.VelcronData.dataBind(result, definition[propName]);
                             }
                             else {
                                 result.properties[propName] = definition[propName];

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;

package/templatebuilder/editor/VelcronContentEditor.d.ts

@@ -0,0 +1,14 @@
+import { VelcronPropertyEditor } from "@omnia/fx-models";
+import { VelcronEditorBuilderBase } from "./VelcronEditorBuilderBase";
+export declare class VelcronContentEditorBuilder extends VelcronEditorBuilderBase {
+    private mainEditor;
+    private captionEditor;
+    constructor(builder: any);
+    main: {
+        add: () => VelcronContentEditorBuilder;
+    };
+    caption: {
+        add: () => VelcronContentEditorBuilder;
+    };
+    protected internalBuild(): VelcronPropertyEditor<any>[];
+}

package/templatebuilder/editor/VelcronContentEditor.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronContentEditorBuilder = void 0;
+const VelcronEditorBuilderBase_1 = require("./VelcronEditorBuilderBase");
+class VelcronContentEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEditorBuilderBase {
+    constructor(builder) {
+        super(builder);
+        this.mainEditor = null;
+        this.captionEditor = null;
+        this.main = {
+            add: () => {
+                if (!this.mainEditor) {
+                    this.mainEditor = {
+                        name: "Body",
+                        type: "markdown",
+                        stateMapping: "content.main"
+                    };
+                }
+                return this;
+            }
+        };
+        this.caption = {
+            add: () => {
+                if (!this.captionEditor) {
+                    this.captionEditor = {
+                        name: "Caption",
+                        type: "text",
+                        stateMapping: "content.caption"
+                    };
+                }
+                return this;
+            }
+        };
+    }
+    internalBuild() {
+        const result = [];
+        if (this.mainEditor) {
+            result.push(this.mainEditor);
+        }
+        if (this.captionEditor) {
+            result.push(this.captionEditor);
+        }
+        return result;
+    }
+}
+exports.VelcronContentEditorBuilder = VelcronContentEditorBuilder;

package/templatebuilder/editor/VelcronEditorBuilder.d.ts

@@ -0,0 +1,13 @@
+import { VelcronPropertyEditor } from "@omnia/fx-models";
+import { VelcronContentEditorBuilder } from "./VelcronContentEditor";
+import { VelcronColorSchemaEditorBuilder } from "./VelcronColorSchemaEditor";
+import { VelcronImageEditorBuilder } from "./VelcronImageEditor";
+export declare class VelcronEditorBuilder {
+    private contentEditorBuilder;
+    private colorSchemaEditorBuilder;
+    private imageEditorBuilder;
+    content(): VelcronContentEditorBuilder;
+    colorSchemaType(): VelcronColorSchemaEditorBuilder;
+    image(): VelcronImageEditorBuilder;
+    build(): VelcronPropertyEditor<any>[];
+}

package/templatebuilder/editor/VelcronEditorBuilder.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronEditorBuilder = void 0;
+const VelcronContentEditor_1 = require("./VelcronContentEditor");
+const VelcronColorSchemaEditor_1 = require("./VelcronColorSchemaEditor");
+const VelcronImageEditor_1 = require("./VelcronImageEditor");
+class VelcronEditorBuilder {
+    content() {
+        if (!this.contentEditorBuilder) {
+            this.contentEditorBuilder = new VelcronContentEditor_1.VelcronContentEditorBuilder(this);
+        }
+        return this.contentEditorBuilder;
+    }
+    colorSchemaType() {
+        if (!this.colorSchemaEditorBuilder) {
+            this.colorSchemaEditorBuilder = new VelcronColorSchemaEditor_1.VelcronColorSchemaEditorBuilder(this);
+        }
+        return this.colorSchemaEditorBuilder;
+    }
+    image() {
+        if (!this.imageEditorBuilder) {
+            this.imageEditorBuilder = new VelcronImageEditor_1.VelcronImageEditorBuilder(this);
+        }
+        return this.imageEditorBuilder;
+    }
+    build() {
+        const result = [];
+        if (this.colorSchemaEditorBuilder) {
+            result.push(...this.colorSchemaEditorBuilder.internalBuild());
+        }
+        if (this.contentEditorBuilder) {
+            result.push(...this.contentEditorBuilder.internalBuild());
+        }
+        if (this.imageEditorBuilder) {
+            result.push(...this.imageEditorBuilder.internalBuild());
+        }
+        return result;
+    }
+}
+exports.VelcronEditorBuilder = VelcronEditorBuilder;

package/templatebuilder/editor/VelcronEditorBuilderBase.d.ts

@@ -0,0 +1,9 @@
+import { VelcronPropertyEditor } from "../../models";
+import { VelcronEditorBuilder } from "./VelcronEditorBuilder";
+export declare abstract class VelcronEditorBuilderBase {
+    protected builder: VelcronEditorBuilder;
+    constructor(builder: VelcronEditorBuilder);
+    done(): VelcronEditorBuilder;
+    build(): VelcronPropertyEditor<any>[];
+    protected abstract internalBuild(): Array<VelcronPropertyEditor>;
+}

package/templatebuilder/editor/VelcronEditorBuilderBase.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronEditorBuilderBase = void 0;
+class VelcronEditorBuilderBase {
+    constructor(builder) {
+        this.builder = null;
+        this.builder = builder;
+    }
+    done() {
+        return this.builder;
+    }
+    build() {
+        return this.builder.build();
+    }
+}
+exports.VelcronEditorBuilderBase = VelcronEditorBuilderBase;

package/templatebuilder/editor/VelcronImageEditor.d.ts

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

package/templatebuilder/editor/VelcronImageEditor.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronImageEditorBuilder = void 0;
+const VelcronEditorBuilderBase_1 = require("./VelcronEditorBuilderBase");
+class VelcronImageEditorBuilder extends VelcronEditorBuilderBase_1.VelcronEditorBuilderBase {
+    constructor(builder) {
+        super(builder);
+        this.mainEditor = null;
+        this.main = {
+            add: () => {
+                if (!this.mainEditor) {
+                    this.mainEditor = {
+                        name: "Select Main Image",
+                        type: "image",
+                        stateMapping: "main-image"
+                    };
+                }
+                return this.builder;
+            }
+        };
+    }
+    internalBuild() {
+        const result = [];
+        if (this.mainEditor) {
+            result.push(this.mainEditor);
+        }
+        return result;
+    }
+}
+exports.VelcronImageEditorBuilder = VelcronImageEditorBuilder;

package/templatebuilder/index.d.ts

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

package/templatebuilder/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useVelcronTemplateBuilder"), exports);

package/templatebuilder/state/VelcronColorSchemaBuilder.d.ts

@@ -0,0 +1,11 @@
+import { ColorSchemaType } from "@omnia/fx-models";
+import { VelcronStateBuilderBase } from "./VelcronStateBuilderBase";
+export declare class VelcronColorSchemaStateBuilder extends VelcronStateBuilderBase {
+    private colorSchema;
+    constructor(stateBuilder: any);
+    add(colorSchema?: ColorSchemaType): VelcronColorSchemaStateBuilder;
+    bind: string;
+    protected internalBuild(): {
+        colorSchemaType: ColorSchemaType;
+    };
+}

package/templatebuilder/state/VelcronColorSchemaBuilder.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronColorSchemaStateBuilder = void 0;
+const VelcronStateBuilderBase_1 = require("./VelcronStateBuilderBase");
+class VelcronColorSchemaStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBuilderBase {
+    constructor(stateBuilder) {
+        super(stateBuilder);
+        this.bind = "{{colorSchemaType}}";
+    }
+    add(colorSchema) {
+        this.colorSchema = colorSchema;
+        return this;
+    }
+    internalBuild() {
+        return {
+            colorSchemaType: this.colorSchema
+        };
+    }
+}
+exports.VelcronColorSchemaStateBuilder = VelcronColorSchemaStateBuilder;

package/templatebuilder/state/VelcronContentStateBuilder.d.ts

@@ -0,0 +1,17 @@
+import { VelcronStateBuilderBase } from "./VelcronStateBuilderBase";
+export declare class VelcronContentStateBuilder extends VelcronStateBuilderBase {
+    private mainContent;
+    private captionContent;
+    constructor(stateBuilder: any);
+    main: {
+        add: (value?: string) => VelcronContentStateBuilder;
+        bind: string;
+    };
+    caption: {
+        add: (value?: string) => VelcronContentStateBuilder;
+        bind: string;
+    };
+    protected internalBuild(): {
+        content: {};
+    };
+}

package/templatebuilder/state/VelcronContentStateBuilder.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronContentStateBuilder = void 0;
+const VelcronStateBuilderBase_1 = require("./VelcronStateBuilderBase");
+class VelcronContentStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBuilderBase {
+    constructor(stateBuilder) {
+        super(stateBuilder);
+        this.main = {
+            add: (value) => {
+                this.mainContent = value;
+                return this;
+            },
+            bind: "$state.content.main"
+        };
+        this.caption = {
+            add: (value) => {
+                this.captionContent = value;
+                return this;
+            },
+            bind: "{{content.caption}}"
+        };
+    }
+    internalBuild() {
+        const resultValue = {};
+        let hasContent = false;
+        if (this.mainContent) {
+            resultValue["main"] = this.mainContent;
+            hasContent = true;
+        }
+        if (this.captionContent) {
+            resultValue["caption"] = this.captionContent;
+            hasContent = true;
+        }
+        return {
+            content: resultValue
+        };
+    }
+}
+exports.VelcronContentStateBuilder = VelcronContentStateBuilder;

package/templatebuilder/state/VelcronImageStateBuilder.d.ts

@@ -0,0 +1,20 @@
+import { VelcronImageRatios } from "../../models";
+import { VelcronStateBuilderBase } from "./VelcronStateBuilderBase";
+export declare class VelcronImageStateBuilder extends VelcronStateBuilderBase {
+    private mainImageUrl;
+    private mainImageRatio;
+    constructor(stateBuilder: any);
+    main: {
+        url: {
+            add: (url: string) => VelcronImageStateBuilder;
+            bind: string;
+        };
+        ratio: {
+            add: (ratio: VelcronImageRatios) => VelcronImageStateBuilder;
+            bind: string;
+        };
+    };
+    protected internalBuild(): {
+        "main-image": {};
+    };
+}

package/templatebuilder/state/VelcronImageStateBuilder.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronImageStateBuilder = void 0;
+const VelcronStateBuilderBase_1 = require("./VelcronStateBuilderBase");
+class VelcronImageStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBuilderBase {
+    constructor(stateBuilder) {
+        super(stateBuilder);
+        this.main = {
+            url: {
+                add: (url) => {
+                    this.mainImageUrl = url;
+                    return this;
+                },
+                bind: "{{main-image.url}}"
+            },
+            ratio: {
+                add: (ratio) => {
+                    this.mainImageRatio = ratio;
+                    return this;
+                },
+                bind: "{{main-image.ratio}}"
+            }
+        };
+    }
+    internalBuild() {
+        if (!this.mainImageUrl) {
+            return null;
+        }
+        const resultValue = {};
+        if (this.mainImageRatio) {
+            resultValue["ratio"] = this.mainImageRatio;
+        }
+        if (this.mainImageUrl) {
+            resultValue["url"] = this.mainImageUrl;
+        }
+        return {
+            "main-image": {
+                ...resultValue
+            }
+        };
+    }
+}
+exports.VelcronImageStateBuilder = VelcronImageStateBuilder;

package/templatebuilder/state/VelcronStateBuilder.d.ts

@@ -0,0 +1,12 @@
+import { VelcronColorSchemaStateBuilder } from "./VelcronColorSchemaBuilder";
+import { VelcronContentStateBuilder } from "./VelcronContentStateBuilder";
+import { VelcronImageStateBuilder } from "./VelcronImageStateBuilder";
+export declare class VelcronStateBuilder {
+    private contentStateBuilder;
+    private imageStateBuilder;
+    private colorSchemaStateBuilder;
+    content(): VelcronContentStateBuilder;
+    image(): VelcronImageStateBuilder;
+    colorSchemaType(): VelcronColorSchemaStateBuilder;
+    build(): any;
+}

package/templatebuilder/state/VelcronStateBuilder.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronStateBuilder = void 0;
+const VelcronColorSchemaBuilder_1 = require("./VelcronColorSchemaBuilder");
+const VelcronContentStateBuilder_1 = require("./VelcronContentStateBuilder");
+const VelcronImageStateBuilder_1 = require("./VelcronImageStateBuilder");
+class VelcronStateBuilder {
+    content() {
+        if (!this.contentStateBuilder) {
+            this.contentStateBuilder = new VelcronContentStateBuilder_1.VelcronContentStateBuilder(this);
+        }
+        return this.contentStateBuilder;
+    }
+    image() {
+        if (!this.imageStateBuilder) {
+            this.imageStateBuilder = new VelcronImageStateBuilder_1.VelcronImageStateBuilder(this);
+        }
+        return this.imageStateBuilder;
+    }
+    colorSchemaType() {
+        if (!this.colorSchemaStateBuilder) {
+            this.colorSchemaStateBuilder = new VelcronColorSchemaBuilder_1.VelcronColorSchemaStateBuilder(this);
+        }
+        return this.colorSchemaStateBuilder;
+    }
+    build() {
+        return {
+            ...this?.contentStateBuilder?.internalBuild(),
+            ...this?.imageStateBuilder?.internalBuild(),
+            ...this?.colorSchemaStateBuilder?.internalBuild(),
+        };
+    }
+}
+exports.VelcronStateBuilder = VelcronStateBuilder;

package/templatebuilder/state/VelcronStateBuilderBase.d.ts

@@ -0,0 +1,8 @@
+import { VelcronStateBuilder } from "./VelcronStateBuilder";
+export declare abstract class VelcronStateBuilderBase {
+    protected stateBuilder: VelcronStateBuilder;
+    constructor(stateBulder: VelcronStateBuilder);
+    done(): VelcronStateBuilder;
+    build(): any;
+    protected abstract internalBuild(): any;
+}

package/templatebuilder/state/VelcronStateBuilderBase.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronStateBuilderBase = void 0;
+class VelcronStateBuilderBase {
+    constructor(stateBulder) {
+        this.stateBuilder = stateBulder;
+    }
+    done() {
+        return this.stateBuilder;
+    }
+    build() {
+        return this.stateBuilder.build();
+    }
+}
+exports.VelcronStateBuilderBase = VelcronStateBuilderBase;

package/templatebuilder/useVelcronTemplateBuilder.d.ts

@@ -0,0 +1,6 @@
+import { VelcronEditorBuilder } from "./editor/VelcronEditorBuilder";
+import { VelcronStateBuilder } from "./state/VelcronStateBuilder";
+export declare function useVelcronTemplateBuilder(): {
+    state: VelcronStateBuilder;
+    editor: VelcronEditorBuilder;
+};

package/templatebuilder/useVelcronTemplateBuilder.js

@@ -0,0 +1,13 @@
+"use strict";
+// import { VelcronContentState,  VelcronImagePropertyEditor,  VelcronImageRatios, VelcronImageState, VelcronMarkdownPropertyEditor, VelcronTextPropertyEditor} from "@omnia/fx-models";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVelcronTemplateBuilder = void 0;
+const VelcronEditorBuilder_1 = require("./editor/VelcronEditorBuilder");
+const VelcronStateBuilder_1 = require("./state/VelcronStateBuilder");
+function useVelcronTemplateBuilder() {
+    return {
+        state: new VelcronStateBuilder_1.VelcronStateBuilder(),
+        editor: new VelcronEditorBuilder_1.VelcronEditorBuilder()
+    };
+}
+exports.useVelcronTemplateBuilder = useVelcronTemplateBuilder;