@omnia/velcron 8.0.285-dev → 8.0.287-dev

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

@@ -0,0 +1,6 @@
+/**
+ * Generates a short ID.
+ *
+ * @returns {string} The generated short ID.
+ */
+export declare function shortId(): string;

package/internal-do-not-import-from-here/shared/models/ShortId.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortId = shortId;
+const Guid_1 = require("./Guid");
+/**
+ * Generates a short ID.
+ *
+ * @returns {string} The generated short ID.
+ */
+function shortId() {
+    return (0, Guid_1.guid)().replace("-", "").substring(0, 8);
+}

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

@@ -20,3 +20,4 @@ export * from "./velcron";
 export * from "./DependencyInjection";
 export * from "./Messaging";
 export * from "./EventHook";
+export * from "./ShortId";

package/internal-do-not-import-from-here/shared/models/index.js

@@ -24,3 +24,4 @@ tslib_1.__exportStar(require("./velcron"), exports);
 tslib_1.__exportStar(require("./DependencyInjection"), exports);
 tslib_1.__exportStar(require("./Messaging"), exports);
 tslib_1.__exportStar(require("./EventHook"), exports);
+tslib_1.__exportStar(require("./ShortId"), exports);

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

@@ -56,10 +56,9 @@ export interface ComponentBlueprints extends Blueprints, BlueprintsReference {
     containers?: ContainerBlueprints;
 }
 export interface SpacingBlueprint {
-    layout: SpacingDefinition;
-    inner: SpacingDefinition;
+    l: SpacingDefinition;
+    s: SpacingDefinition;
 }
-export type SpacingBlueprintTypes = "inner" | "layout";
 export type WebBlueprintItemDefintionType = "button" | "searchbox" | "text" | "icon" | "tab";
 export declare enum WebBlueprintItemDefintionTypes {
     button = "button",

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

@@ -1,2 +1,3 @@
-import { SpacingDefinition } from "./Spacing";
-export declare function getSpacingValueFromBlueprint(spacingValue: any, definition: SpacingDefinition): number;
+import { SpacingBlueprint } from "./Blueprints";
+import { SpacingScale } from "./Spacing";
+export declare function getSpacingValueFromBlueprint(spacingValue: any, blueprint: SpacingBlueprint, scale?: SpacingScale): number;

package/internal-do-not-import-from-here/shared/models/theming/SharedBlueprintMethods.js

@@ -3,30 +3,49 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSpacingValueFromBlueprint = getSpacingValueFromBlueprint;
 const Spacing_1 = require("./Spacing");
-function getSpacingValueFromBlueprint(spacingValue, definition) {
+const useSpacingScaling_1 = require("./useSpacingScaling");
+const spacingScaling = (0, useSpacingScaling_1.useSpacingScaling)();
+function getValueWithoutScale(value) {
+    if (!value) {
+        return value;
+    }
+    if (typeof value === "number") {
+        return value;
+    }
+    if (value.indexOf(":") === -1) {
+        return value;
+    }
+    return value.split(":")[1];
+}
+function getSpacingValueFromBlueprint(spacingValue, blueprint, scale) {
     if (!spacingValue) {
         return 0;
     }
+    if (!scale) {
+        scale = spacingScaling.get.scale(spacingValue);
+    }
+    const definition = scale === "l" ? blueprint.l : blueprint.s;
     let negative = false;
     let result = spacingValue;
     if (isNaN(spacingValue) && definition) {
-        if (spacingValue.startsWith("-")) {
+        let strippedValue = getValueWithoutScale(spacingValue);
+        if (strippedValue.startsWith("-")) {
             negative = true;
         }
-        spacingValue = spacingValue.replace("-", "");
-        if (spacingValue === Spacing_1.SpacingTypes.xs) {
+        strippedValue = strippedValue.replace("-", "");
+        if (strippedValue === Spacing_1.SpacingTypes.xs) {
             result = definition.xs;
         }
-        else if (spacingValue === Spacing_1.SpacingTypes.s) {
+        else if (strippedValue === Spacing_1.SpacingTypes.s) {
             result = definition.s;
         }
-        else if (spacingValue === Spacing_1.SpacingTypes.m) {
+        else if (strippedValue === Spacing_1.SpacingTypes.m) {
             result = definition.m;
         }
-        else if (spacingValue === Spacing_1.SpacingTypes.l) {
+        else if (strippedValue === Spacing_1.SpacingTypes.l) {
             result = definition.l;
         }
-        else if (spacingValue === Spacing_1.SpacingTypes.xl) {
+        else if (strippedValue === Spacing_1.SpacingTypes.xl) {
             result = definition.xl;
         }
         else {

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

@@ -1,10 +1,11 @@
-export interface Spacing {
-    scale?: "l" | "s";
+export type Spacing = {
+    scale?: SpacingScale;
     top?: SpacingValue;
     right?: SpacingValue;
     bottom?: SpacingValue;
     left?: SpacingValue;
-}
+};
+export type SpacingScale = "l" | "s";
 export interface SpacingDefinition {
     name: string;
     xs: number;
@@ -13,7 +14,7 @@ export interface SpacingDefinition {
     l: number;
     xl: number;
 }
-export type SpacingValue = "xs" | "s" | "m" | "l" | "xl" | number;
+export type SpacingValue = "xs" | "s" | "m" | "l" | "xl" | "l:xs" | "l:s" | "l:m" | "l:l" | "l:xl" | "s:xs" | "s:s" | "s:m" | "s:l" | "s:xl" | number;
 export declare enum SpacingTypes {
     xs = "xs",
     s = "s",

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

@@ -5,3 +5,4 @@ export * from "./Spacing";
 export * from "./SharedBlueprintMethods";
 export * from "./SharedColorMethods";
 export * from "./Blueprints";
+export * from "./useSpacingScaling";

package/internal-do-not-import-from-here/shared/models/theming/index.js

@@ -9,3 +9,4 @@ tslib_1.__exportStar(require("./Spacing"), exports);
 tslib_1.__exportStar(require("./SharedBlueprintMethods"), exports);
 tslib_1.__exportStar(require("./SharedColorMethods"), exports);
 tslib_1.__exportStar(require("./Blueprints"), exports);
+tslib_1.__exportStar(require("./useSpacingScaling"), exports);

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

@@ -0,0 +1,15 @@
+import { Spacing, SpacingScale, SpacingValue } from "@omnia/fx-models";
+export declare function useSpacingScaling(): {
+    get: {
+        valueWithoutScale: (value: SpacingValue) => string | number;
+        scaleFromValue: (value: SpacingValue) => SpacingScale;
+        scale: (value: Spacing | SpacingValue) => SpacingScale;
+    };
+    add: {
+        scaleToValue: (value: SpacingValue, scale: SpacingScale) => string | number;
+        fallBackScale: (value: SpacingValue, scale: SpacingScale) => string | number;
+    };
+    has: {
+        scaling: (value: SpacingValue) => boolean;
+    };
+};

package/internal-do-not-import-from-here/shared/models/theming/useSpacingScaling.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpacingScaling = useSpacingScaling;
+function useSpacingScaling() {
+    function getValueWithoutScale(value) {
+        if (!value) {
+            return value;
+        }
+        if (typeof value === "number") {
+            return value;
+        }
+        if (!value.indexOf) {
+            return value;
+        }
+        if (value.indexOf(":") === -1) {
+            return value;
+        }
+        return value.split(":")[1];
+    }
+    function getScaleFromValue(value) {
+        if (!value) {
+            return value;
+        }
+        if (typeof value === "number") {
+            return value;
+        }
+        if (value.indexOf(":") === -1) {
+            return undefined;
+        }
+        return value.split(":")[0];
+    }
+    function addScaleToValue(value, scale) {
+        if (!scale) {
+            return value;
+        }
+        if (!value) {
+            return value;
+        }
+        if (typeof value === "number") {
+            return value;
+        }
+        if (value.indexOf(":") > -1) {
+            return `${scale}:${value.split(":")[1]}`;
+        }
+        return `${scale}:${value}`;
+    }
+    function hasScaling(value) {
+        if (!value) {
+            return false;
+        }
+        if (typeof value === "number") {
+            return false;
+        }
+        if (value.indexOf(":") > -1) {
+            return true;
+        }
+        return false;
+    }
+    function getScale(value) {
+        if (!value) {
+            return undefined;
+        }
+        if (typeof value === "object") {
+            return value.scale;
+        }
+        return getScaleFromValue(value);
+    }
+    function setScaleIfEmpty(value, scale) {
+        if (hasScaling(value)) {
+            return value;
+        }
+        return addScaleToValue(value, scale);
+    }
+    return {
+        get: {
+            valueWithoutScale: getValueWithoutScale,
+            scaleFromValue: getScaleFromValue,
+            scale: getScale
+        },
+        add: {
+            scaleToValue: addScaleToValue,
+            fallBackScale: setScaleIfEmpty
+        },
+        has: {
+            scaling: hasScaling
+        }
+    };
+}

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

@@ -25,17 +25,17 @@ export interface VelcronDefinition extends VelcronDefinitionBase, VelcronDimensi
     if?: string;
     events?: VelcronEvent;
 }
+export type VelcronSpacingScale = "l" | "s";
 export interface VelcronSpacing {
+    scale?: VelcronSpacingScale;
     top?: number | string;
     right?: number | string;
     bottom?: number | string;
     left?: number | string;
 }
-export type VelcronSpacingTypes = "inner" | "layout";
 interface VelcronDimensionStyling {
     margin?: VelcronSpacing;
     padding?: VelcronSpacing;
-    spacingType?: VelcronSpacingTypes;
 }
 export interface VelcronStyling {
     margin?: string;

package/models/Enums.d.ts

@@ -26,6 +26,5 @@ export declare enum VelcronDataTypes {
     number = "number",
     boolean = "boolean",
     array = "array",
-    componentArray = "componentArray",
-    bind = "bind"
+    componentArray = "componentArray"
 }

package/models/Enums.js

@@ -32,6 +32,4 @@ 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,5 +1,5 @@
 import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, VelcronEditor, ContainerBlueprint, BackgroundDefinition, ContainerVariant, IconBlueprint, ButtonBlueprint } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
-import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
+import { VelcronComponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
 import { DynamicState, VelcronDefinition, VelcronEffects, useVelcronThemingStore } from "..";
 import { guid, PropertyConfiguration, PropertyValue, PropertyDefinition, PropertySetupBase } from "@omnia/fx/models";
@@ -65,7 +65,7 @@ export interface VelcronRenderContext {
     };
     components?: Array<VelcronCustomComponentDefinition>;
     properties?: {
-        [name: string]: VelcronPrimitiveType | VelcroncomponentArrayType;
+        [name: string]: VelcronPrimitiveType | VelcronComponentArrayType;
     };
     computed?: {
         [name: string]: Array<string>;
@@ -314,6 +314,7 @@ export interface VelcronLottieDefinition extends VelcronDefinition {
 export interface VelcronSlidePanelDefinition extends VelcronDefinition {
     type: "slide-panel";
     slidesPerView?: VelcronBindableProp<number>;
+    delay?: VelcronBindableProp<number>;
     pagination?: VelcronBindableProp<boolean>;
     navigation?: VelcronBindableProp<boolean>;
     scrollbar?: VelcronBindableProp<boolean>;

package/models/VelcronTypes.d.ts

@@ -2,4 +2,4 @@ import { VelcronDefinition } from "@omnia/fx-models";
 export type VelcronPrimitiveType = string | number | boolean;
 export type VelcronArrayType<T> = Array<T>;
 export type VelcronObjectType<T extends Object> = T;
-export type VelcroncomponentArrayType = Array<VelcronDefinition>;
+export type VelcronComponentArrayType = Array<VelcronDefinition>;

package/package.json

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

package/parser/VelcronData.d.ts

@@ -26,6 +26,7 @@ export declare class VelcronData {
     static isUndefined(value: any): value is undefined;
     static isArray(obj: any): obj is ExtendArray;
     static isObject(value: any): value is object;
+    static hasValue(value: any): boolean;
     static getDataType(value: any): VelcronDataTypes;
     static extendObject(obj: any): any;
     static propertyPathExists(obj: object, path: string): boolean;

package/parser/VelcronData.js

@@ -477,6 +477,9 @@ class VelcronData {
             !Array.isArray(value) &&
             value !== null;
     }
+    static hasValue(value) {
+        return value !== undefined && value !== null;
+    }
     static getDataType(value) {
         if (value === null)
             return models_1.VelcronDataTypes.unknown;

package/parser/VelcronStyles.d.ts

@@ -1,10 +1,24 @@
 import { VelcronBorder, VelcronColorStyling, VelcronDefinitionHasEffects, VelcronDefinitionHasOverflow, VelcronDimensions, VelcronEffects, VelcronRenderContext } from "../models";
 import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
-import { SpacingDefinition, VelcronBindableProp, VelcronDefinition } from "..";
+import { SpacingBlueprint, VelcronBindableProp, VelcronDefinition } from "..";
 export declare class VelcronStyles {
     static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
     static effectsProvider: (effects: VelcronEffects, renderCtx: VelcronRenderContext) => VelcronEffects;
     static unitProvider: VelcronUnitProvider;
+    spacingScaling: {
+        get: {
+            valueWithoutScale: (value: import("..").SpacingValue) => string | number;
+            scaleFromValue: (value: import("..").SpacingValue) => import("..").SpacingScale;
+            scale: (value: import("..").Spacing | import("..").SpacingValue) => import("..").SpacingScale;
+        };
+        add: {
+            scaleToValue: (value: import("..").SpacingValue, scale: import("..").SpacingScale) => string | number;
+            fallBackScale: (value: import("..").SpacingValue, scale: import("..").SpacingScale) => string | number;
+        };
+        has: {
+            scaling: (value: import("..").SpacingValue) => boolean;
+        };
+    };
     static registerStyleProvider(fn: (styleBase: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string, unitProvider: VelcronUnitProvider): void;
     static registerEffectsProvider(fn: (effects: VelcronEffects, renderCtx: VelcronRenderContext) => VelcronEffects): void;
     static applyEffects(definition: VelcronDefinitionHasEffects, renderCtx: VelcronRenderContext, applyTo: (effects: VelcronEffects) => any): any;
@@ -12,8 +26,8 @@ export declare class VelcronStyles {
     static insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
     static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
     static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
-    static applySpacingDimension(value: string | number, spacing: SpacingDefinition): string | number;
+    static applySpacingDimension(value: string | number, spacing: SpacingBlueprint): string | number;
     static applyOverflow(definition: VelcronDefinitionHasOverflow, renderCtx: VelcronRenderContext, styleBase: any): void;
-    static applySpacingStyles<T>(spacing: VelcronBindableProp<T>, renderCtx: VelcronRenderContext, styleBase: any, spacingDef: SpacingDefinition, styleType: string, objectIsDatabound?: (obj: T) => void, additionalPropsToDataBind?: object): void;
+    static applySpacingStyles<T>(spacing: VelcronBindableProp<T>, renderCtx: VelcronRenderContext, styleBase: any, spacingDef: SpacingBlueprint, styleType: string, objectIsDatabound?: (obj: T) => void, additionalPropsToDataBind?: object): void;
     static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
 }

package/parser/VelcronStyles.js

@@ -5,6 +5,9 @@ const VelcronData_1 = require("./VelcronData");
 const VelcronConstants_1 = require("./VelcronConstants");
 const __1 = require("..");
 class VelcronStyles {
+    constructor() {
+        this.spacingScaling = (0, __1.useSpacingScaling)();
+    }
     static registerStyleProvider(fn, unitProvider) {
         VelcronStyles.styleProvider = fn;
         VelcronStyles.unitProvider = unitProvider;
@@ -95,23 +98,39 @@ class VelcronStyles {
         const styleBase = { ...definition.style };
         /**Generic styling */
         if (definition.margin) {
-            const spacing = renderCtx.theming.get.spacing(definition);
             const margin = VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin);
-            styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.top), spacing));
-            styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.right), spacing));
-            styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.bottom), spacing));
-            styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.left), spacing));
+            const spacing = renderCtx.theming.get.spacing();
+            if (typeof margin === "object") {
+                styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.top), spacing, margin.scale));
+                styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.right), spacing, margin.scale));
+                styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.bottom), spacing, margin.scale));
+                styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin.left), spacing, margin.scale));
+            }
+            else {
+                //const spacing =  renderCtx.theming.get.spacing(VelcronStyles.spacingScaling.get.scaleFromValue(margin));                  
+                const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, margin), spacing));
+                styleBase["marginTop"] = value;
+                styleBase["marginRight"] = value;
+                styleBase["marginBottom"] = value;
+                styleBase["marginLeft"] = value;
+            }
         }
         if (definition.padding) {
-            const spacing = renderCtx.theming.get.spacing(definition);
             const padding = VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding);
-            //  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;          
-            styleBase["paddingTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.top), spacing));
-            styleBase["paddingRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.right), spacing));
-            styleBase["paddingBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.bottom), spacing));
-            styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.left), spacing));
+            const spacing = renderCtx.theming.get.spacing();
+            if (typeof padding === "object") {
+                styleBase["paddingTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.top), spacing, padding.scale));
+                styleBase["paddingRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.right), spacing, padding.scale));
+                styleBase["paddingBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.bottom), spacing, padding.scale));
+                styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding.left), spacing, padding.scale));
+            }
+            else {
+                const value = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, padding), spacing));
+                styleBase["paddingTop"] = value;
+                styleBase["paddingRight"] = value;
+                styleBase["paddingBottom"] = value;
+                styleBase["paddingLeft"] = value;
+            }
         }
         if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
             this.applyOverflow(definition, renderCtx, styleBase);
@@ -166,16 +185,25 @@ class VelcronStyles {
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.row) {
             const flexDefinition = definition;
-            const spacing = renderCtx.theming.get.spacing();
+            const spacingBlueprint = renderCtx.theming.get.spacing();
             let alignX = null;
             let alignY = null;
-            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;
+            if (flexDefinition.gapX) {
+                //debugger;
+            }
+            //const testing = getSpacingValueFromBlueprint(VelcronData.dataBind(renderCtx, flexDefinition.gapX), spacing);
+            const gapX = flexDefinition.gapX || flexDefinition?.gapX?.toString() === "0" ?
+                (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapX), spacingBlueprint) :
+                (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacingBlueprint);
+            const gapY = flexDefinition.gapY || flexDefinition?.gapY?.toString() === "0" ?
+                (0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, flexDefinition.gapY), spacingBlueprint) :
+                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.position) {
+                const spacing = renderCtx.theming.get.spacing();
                 this.applySpacingStyles(flexDefinition.position, renderCtx, styleBase, spacing, "", (pos) => styleBase["position"] = pos.type, {
                     "position": "type"
                 });

package/stores/VelcronTheming.d.ts

@@ -1,4 +1,4 @@
-import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes, VelcronDefinition } from "..";
+import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
 export declare const useVelcronThemingStore: (newStateWithName?: string) => {
     state: {
         currentTheme: ThemeDefinitionV2;
@@ -7,7 +7,7 @@ export declare const useVelcronThemingStore: (newStateWithName?: string) => {
         componentBlueprints: () => void;
         containerBlueprint: (type: ContainerVariant | ContainerBlueprint | string) => any;
         colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("..").ColorSchema;
-        spacing: (definition?: VelcronDefinition) => import("..").SpacingDefinition;
+        spacing: () => import("..").SpacingBlueprint;
         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;

package/stores/VelcronTheming.js

@@ -22,10 +22,8 @@ exports.useVelcronThemingStore = (0, _1.defineVelcronStore)("VelcronTheming", {
             colorSchema: (colorSchemaType) => {
                 return (0, __1.useThemeMethods)(() => state.currentTheme).colorSchema(colorSchemaType);
             },
-            spacing: (definition) => {
-                return definition?.spacingType === "layout" ?
-                    state.currentTheme.spacing.primary.layout :
-                    state.currentTheme.spacing.primary.inner;
+            spacing: () => {
+                return state.currentTheme.spacing.primary;
             },
             typography: (typographyType, size) => {
                 const typography = state.currentTheme.typography.primary;