@qrvey/utils 1.17.1 → 1.17.2

package/README.md

@@ -1,4 +1,4 @@
-# [@qrvey/utils](https://bitbucket.org/qrvey/qrvey_utils/wiki/Home) *1.17.1*
+# [@qrvey/utils](https://bitbucket.org/qrvey/qrvey_utils/wiki/Home) *1.17.2*
 
 > Helper, Utils for all Qrvey Projects
 

package/dist/cjs/elements/helpers/fixed.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateFixedElementDimensions = exports.sortElementsFromReferencePoint = exports.calculateDistancesToReferencePoint = exports.getFixedGridElementsBottomLimit = exports.recalculatePreservingPositions = exports.getFixedPositionByDevice = exports.CANVAS_EXTRA_HEIGHT = void 0;
+exports.convertResponsiveElementsToFixed = exports.updateFixedElementDimensions = exports.sortElementsFromReferencePoint = exports.calculateDistancesToReferencePoint = exports.getFixedGridElementsBottomLimit = exports.recalculatePreservingPositions = exports.getFixedPositionByDevice = exports.CANVAS_EXTRA_HEIGHT = void 0;
 exports.updateFixedPosition = updateFixedPosition;
 exports.findAvailablePosition = findAvailablePosition;
 exports.findFixedAvailablePositions = findFixedAvailablePositions;
 exports.updateFixedElementWidth = updateFixedElementWidth;
+const vem_helpers_1 = require("./vem-element/helpers/vem.helpers");
 const general_1 = require("../../general");
 const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
 const IVemPosition_1 = require("../interfaces/IVemPosition");
@@ -178,3 +179,11 @@ const updateFixedElementDimensions = (containerItem, device, scopeElements) => {
     return { ...currentElement };
 };
 exports.updateFixedElementDimensions = updateFixedElementDimensions;
+const convertResponsiveElementsToFixed = (config, elements, canvasDevice = ICanvasGrid_1.CanvasDevice.DESKTOP) => {
+    const newElements = elements.filter((element) => !element.position?.fixed);
+    const currentFixedElements = elements.filter((element) => element.position?.fixed);
+    const recalculatedElements = newElements.map((element) => (0, vem_helpers_1.updateDimension)(element, config, IVemPosition_1.VemPositionType.FIXED));
+    const toProcessElements = findFixedAvailablePositions(config[canvasDevice].width, recalculatedElements, currentFixedElements, canvasDevice);
+    return [...currentFixedElements, ...toProcessElements];
+};
+exports.convertResponsiveElementsToFixed = convertResponsiveElementsToFixed;

package/dist/cjs/elements/helpers/gridStrategy.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeElementPositions = void 0;
 exports.recalculateElements = recalculateElements;
 exports.applyDynamicSize = applyDynamicSize;
 exports.calculateCanvasHeight = calculateCanvasHeight;
@@ -7,6 +8,10 @@ const fixed_1 = require("./fixed");
 const responsive_1 = require("./responsive");
 const interfaces_1 = require("../interfaces");
 const element_1 = require("../utils/element");
+const normalizePositionStrategies = {
+    [interfaces_1.VemPositionType.FIXED]: (canvasConfig, elements, device) => (0, fixed_1.convertResponsiveElementsToFixed)(canvasConfig, elements, device),
+    [interfaces_1.VemPositionType.RESPONSIVE]: (canvasConfig, elements, device) => (0, responsive_1.convertFixedElementsToResponsive)(canvasConfig, elements, device),
+};
 const applyDynamicSizeStrategies = {
     fixed: (containerItem, scopeElements, device) => {
         return (0, fixed_1.updateFixedElementDimensions)(containerItem, device, scopeElements);
@@ -15,12 +20,19 @@ const applyDynamicSizeStrategies = {
         return (0, responsive_1.updateResponsiveElementDimensions)(containerItem, device, scopeElements, gap);
     },
 };
+const normalizeElementPositions = ({ elements, canvasConfig, target, canvasDevice, }) => {
+    const _canvasDevice = canvasDevice ?? interfaces_1.CanvasDevice.DESKTOP;
+    return normalizePositionStrategies[target](canvasConfig, elements, _canvasDevice);
+};
+exports.normalizeElementPositions = normalizeElementPositions;
 const recalculateStrategies = {
     fixed: (elements, currentElements, canvasWidth, device, options) => {
-        const isSorted = !currentElements.length;
+        const { newElements, scopeElements } = (0, element_1.normalizeElements)(currentElements, device, interfaces_1.VemPositionType.FIXED);
+        const elementsToCalculate = [...newElements, ...elements];
+        const isSorted = !scopeElements.length;
         const changedElements = (options.allowCopy
-            ? (0, element_1.copyDesktopPositionToDevice)(elements, device, interfaces_1.VemPositionType.FIXED)
-            : elements);
+            ? (0, element_1.copyDesktopPositionToDevice)(elementsToCalculate, device, interfaces_1.VemPositionType.FIXED)
+            : elementsToCalculate);
         const orderedElements = isSorted
             ? (0, fixed_1.sortElementsFromReferencePoint)(changedElements, options.sort, {
                 x: 0,
@@ -28,18 +40,20 @@ const recalculateStrategies = {
             })
             : changedElements;
         return options.keepPosition
-            ? (0, fixed_1.recalculatePreservingPositions)(orderedElements, currentElements, device, canvasWidth, options.canvasHeight)
-            : (0, fixed_1.findFixedAvailablePositions)(canvasWidth, orderedElements, currentElements, device, false, false, options?.canvasHeight);
+            ? (0, fixed_1.recalculatePreservingPositions)(orderedElements, scopeElements, device, canvasWidth, options.canvasHeight)
+            : (0, fixed_1.findFixedAvailablePositions)(canvasWidth, orderedElements, scopeElements, device, false, false, options?.canvasHeight);
     },
     responsive: (elements, currentElements, canvasWidth, device, options) => {
-        const isSorted = !currentElements.length;
+        const { scopeElements, newElements } = (0, element_1.normalizeElements)(currentElements, device, interfaces_1.VemPositionType.RESPONSIVE);
+        const elementsToCalculate = [...newElements, ...elements];
+        const isSorted = !scopeElements.length;
         const changedElements = (options.allowCopy
-            ? (0, element_1.copyDesktopPositionToDevice)(elements, device, interfaces_1.VemPositionType.RESPONSIVE)
-            : elements);
+            ? (0, element_1.copyDesktopPositionToDevice)(elementsToCalculate, device, interfaces_1.VemPositionType.RESPONSIVE)
+            : elementsToCalculate);
         const orderedElements = isSorted
             ? (0, responsive_1.sortResponsiveElements)(changedElements, options.sort)
             : changedElements;
-        return (0, responsive_1.findResponsiveAvailablePositions)(canvasWidth, orderedElements, currentElements, device);
+        return (0, responsive_1.findResponsiveAvailablePositions)(canvasWidth, orderedElements, scopeElements, device);
     },
 };
 const calculateCanvasHeightStrategies = {

package/dist/cjs/elements/helpers/responsive.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateResponsiveElementDimensions = exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = void 0;
+exports.convertFixedElementsToResponsive = exports.updateResponsiveElementDimensions = exports.sortResponsiveElements = exports.sortByDistanceInResponsiveFunction = exports.calculateDistancesToReferencePoint = exports.getResponsiveGridElementsBottomLimit = void 0;
 exports.findAvailablePosition = findAvailablePosition;
 exports.updateResponsivePosition = updateResponsivePosition;
 exports.findResponsiveAvailablePositions = findResponsiveAvailablePositions;
@@ -11,6 +11,7 @@ const IVemPosition_1 = require("../interfaces/IVemPosition");
 const fixed_position_1 = require("../utils/fixed.position");
 const overlap_1 = require("../utils/overlap");
 const position_1 = require("../utils/position");
+const vem_helpers_1 = require("./vem-element/helpers/vem.helpers");
 const SPACE_DELTA = 1;
 const HEIGHT_DELTA = 32;
 const CANVAS_EXTRA_ROW = 1;
@@ -131,3 +132,11 @@ const updateResponsiveElementDimensions = (containerItem, device, scopeElements,
     return { ...currentElement };
 };
 exports.updateResponsiveElementDimensions = updateResponsiveElementDimensions;
+const convertFixedElementsToResponsive = (config, elements, canvasDevice = ICanvasGrid_1.CanvasDevice.DESKTOP) => {
+    const newElements = elements.filter((element) => !element.position?.responsive);
+    const currentElements = elements.filter((element) => element.position?.responsive);
+    let recalculatedElements = newElements.map((baseElem) => (0, vem_helpers_1.updateDimension)(baseElem, config, IVemPosition_1.VemPositionType.RESPONSIVE));
+    recalculatedElements = findResponsiveAvailablePositions(config[canvasDevice].columns.count, recalculatedElements, currentElements, canvasDevice);
+    return [...currentElements, ...recalculatedElements];
+};
+exports.convertFixedElementsToResponsive = convertFixedElementsToResponsive;

package/dist/cjs/elements/helpers/vem-element/constants/vem.constants.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEVICE_LIST = exports.FILTER_TRIGGER_TYPE = exports.FILTER_LIST_TYPE = exports.DEFAULT_HEIGHT_IN_LIST = exports.DEFAULT_HEIGHT_IN_RESPONSIVE = exports.MIN_WIDTH_IN_RESPONSIVE = exports.DEFAULT_WIDTH_IN_RESPONSIVE = exports.DEFAULT_HEIGHT_IN_FIXED = exports.MIN_WIDTH_IN_FIXED = exports.DEFAULT_WIDTH_IN_FIXED = exports.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = exports.DEFAULT_DELTA_RESIZE_IN_FIXED = exports.DEFAULT_MIN_FONT_TO_AUTO_RESIZE = exports.DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = exports.DEFAULT_CUSTOM_HEIGHT_IN_FIXED = void 0;
+const ICanvasGrid_1 = require("../../../interfaces/ICanvasGrid");
+exports.DEFAULT_CUSTOM_HEIGHT_IN_FIXED = 30;
+exports.DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = 32;
+exports.DEFAULT_MIN_FONT_TO_AUTO_RESIZE = 18;
+exports.DEFAULT_DELTA_RESIZE_IN_FIXED = 1.5;
+exports.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = 2.8;
+exports.DEFAULT_WIDTH_IN_FIXED = 415;
+exports.MIN_WIDTH_IN_FIXED = 275;
+exports.DEFAULT_HEIGHT_IN_FIXED = 76;
+exports.DEFAULT_WIDTH_IN_RESPONSIVE = 4;
+exports.MIN_WIDTH_IN_RESPONSIVE = 3;
+exports.DEFAULT_HEIGHT_IN_RESPONSIVE = 2;
+exports.DEFAULT_HEIGHT_IN_LIST = 245;
+var FILTER_LIST_TYPE;
+(function (FILTER_LIST_TYPE) {
+    FILTER_LIST_TYPE["DROPDOWN"] = "DROPDOWN";
+    FILTER_LIST_TYPE["LIST"] = "LIST";
+})(FILTER_LIST_TYPE || (exports.FILTER_LIST_TYPE = FILTER_LIST_TYPE = {}));
+var FILTER_TRIGGER_TYPE;
+(function (FILTER_TRIGGER_TYPE) {
+    FILTER_TRIGGER_TYPE["AUTOMATIC"] = "AUTOMATIC";
+    FILTER_TRIGGER_TYPE["BUTTON"] = "BUTTON";
+    FILTER_TRIGGER_TYPE["DROPDOWN"] = "DROPDOWN";
+    FILTER_TRIGGER_TYPE["LIST"] = "LIST";
+})(FILTER_TRIGGER_TYPE || (exports.FILTER_TRIGGER_TYPE = FILTER_TRIGGER_TYPE = {}));
+exports.DEVICE_LIST = [
+    ICanvasGrid_1.CanvasDevice.DESKTOP,
+    ICanvasGrid_1.CanvasDevice.TABLET,
+    ICanvasGrid_1.CanvasDevice.MOBILE,
+];

package/dist/cjs/elements/helpers/vem-element/definitions/main.definitions.js

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTAINER_ITEM_DEFINITION = exports.FILTER_DATE_ITEM_DEFINITION = exports.FILTER_LIST_ITEM_DEFINITION = exports.FILTER_INPUT_ITEM_DEFINITION = exports.ANALYTICS_ITEM_DEFINITION = exports.TEXT_ITEM_DEFINITION = exports.BUTTON_ITEM_DEFINITION = exports.IMAGE_ITEM_DEFINITION = void 0;
+const vem_constants_1 = require("../constants/vem.constants");
+exports.IMAGE_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 2,
+                    rowSpan: 6,
+                },
+                fixed: {
+                    width: 100,
+                    height: 100,
+                },
+            },
+            defaultItemData: {
+                aspect: "cover",
+            },
+        },
+    },
+};
+exports.BUTTON_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 1,
+                    rowSpan: 1,
+                },
+                fixed: {
+                    width: 100,
+                    height: 30,
+                },
+            },
+            defaultItemData: () => ({
+                background: "#FF5300",
+                color: "#ffffff",
+                fontFamily: "Inter, serif",
+                fontSize: "12px",
+                url: "",
+                label: "",
+            }),
+            minSize: {
+                fixed: {
+                    height: 30,
+                    width: 30,
+                    customSize: (itemData) => {
+                        const fontSizeValue = parseInt(itemData.fontSize.replace("px", ""), 10);
+                        const minHeight = fontSizeValue > vem_constants_1.DEFAULT_MIN_FONT_TO_AUTO_RESIZE
+                            ? fontSizeValue * vem_constants_1.DEFAULT_DELTA_RESIZE_IN_FIXED
+                            : 30;
+                        return {
+                            height: minHeight,
+                            width: 30,
+                        };
+                    },
+                },
+                responsive: {
+                    height: 1,
+                    width: 1,
+                    customSize: (itemData) => {
+                        const fontSizeValue = parseInt(itemData.fontSize.replace("px", ""), 10);
+                        const minHeightPx = fontSizeValue > vem_constants_1.DEFAULT_MIN_FONT_TO_AUTO_RESIZE
+                            ? fontSizeValue * vem_constants_1.DEFAULT_DELTA_RESIZE_IN_RESPONSIVE
+                            : 30;
+                        return {
+                            height: Math.round(minHeightPx / 32),
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+exports.TEXT_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 2,
+                    rowSpan: 6,
+                },
+                fixed: {
+                    width: 200,
+                    height: 100,
+                },
+            },
+            defaultItemData: {
+                backgroundColor: "rgba(0,0,0,0)",
+                borderColor: "#000000",
+                borderWidth: "1px",
+                borderStyle: "none",
+                fontFamily: "Inter, serif",
+                fontSize: "12px",
+                fontColor: "#000000",
+                paddingTop: 5,
+                paddingBottom: 5,
+                paddingLeft: 5,
+                paddingRight: 5,
+            },
+        },
+    },
+};
+exports.ANALYTICS_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 4,
+                    rowSpan: 10,
+                },
+                fixed: {
+                    width: 400,
+                    height: 400,
+                },
+            },
+        },
+    },
+};
+exports.FILTER_INPUT_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: vem_constants_1.DEFAULT_HEIGHT_IN_RESPONSIVE,
+                },
+                fixed: {
+                    width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
+                    height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
+                },
+            },
+            minSize: {
+                fixed: {
+                    height: 76,
+                    width: 200,
+                    customSize: () => {
+                        return {
+                            height: 76,
+                            width: 200,
+                        };
+                    },
+                },
+                responsive: {
+                    height: 1,
+                    width: 1,
+                    customSize: () => {
+                        return {
+                            height: 1,
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+exports.FILTER_LIST_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: 2,
+                },
+                fixed: {
+                    width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
+                    height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
+                },
+            },
+            minSize: {
+                fixed: {
+                    height: 30,
+                    width: 130,
+                    customSize: (itemData) => {
+                        const minHeight = itemData.type === vem_constants_1.FILTER_LIST_TYPE.LIST ? 100 : 30;
+                        return {
+                            height: minHeight,
+                            width: 130,
+                        };
+                    },
+                },
+                responsive: {
+                    height: 1,
+                    width: 1,
+                    customSize: () => {
+                        return {
+                            height: 1,
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+exports.FILTER_DATE_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: vem_constants_1.DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: vem_constants_1.DEFAULT_HEIGHT_IN_RESPONSIVE,
+                },
+                fixed: {
+                    width: vem_constants_1.DEFAULT_WIDTH_IN_FIXED,
+                    height: vem_constants_1.DEFAULT_HEIGHT_IN_FIXED,
+                },
+            },
+            defaultItemData: {
+                validators: [],
+                trigger: vem_constants_1.FILTER_TRIGGER_TYPE.BUTTON,
+                selectorColor: "#FF5300",
+                buttonBackgroundColor: "#FF5300",
+                buttonTextColor: "#ffffff",
+                buttonBorderColor: "#FF5300",
+                borderColor: "#e3e3e3",
+                fontColor: "#5F5F5F",
+            },
+            minSize: {
+                fixed: {
+                    height: 30,
+                    width: 100,
+                    customSize: () => {
+                        return {
+                            height: 30,
+                            width: 100,
+                        };
+                    },
+                },
+                responsive: {
+                    height: 1,
+                    width: 1,
+                    customSize: () => {
+                        return {
+                            height: 1,
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+exports.CONTAINER_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 10,
+                    rowSpan: 10,
+                },
+                fixed: {
+                    width: 900,
+                    height: 500,
+                },
+            },
+        },
+    },
+};

package/dist/cjs/elements/helpers/vem-element/helpers/vem.helpers.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDimension = exports.getDefaultDimensions = exports.updateDimension = exports.VEM_DEFINITIONS = void 0;
+const ICanvasGrid_1 = require("../../../interfaces/ICanvasGrid");
+const IVemPosition_1 = require("../../../interfaces/IVemPosition");
+const position_1 = require("../../../utils/position");
+const vem_constants_1 = require("../constants/vem.constants");
+const main_definitions_1 = require("../definitions/main.definitions");
+exports.VEM_DEFINITIONS = {
+    image: main_definitions_1.IMAGE_ITEM_DEFINITION,
+    button: main_definitions_1.BUTTON_ITEM_DEFINITION,
+    text: main_definitions_1.TEXT_ITEM_DEFINITION,
+    analytics: main_definitions_1.ANALYTICS_ITEM_DEFINITION,
+    filterInput: main_definitions_1.FILTER_INPUT_ITEM_DEFINITION,
+    filterDate: main_definitions_1.FILTER_DATE_ITEM_DEFINITION,
+    filterList: main_definitions_1.FILTER_LIST_ITEM_DEFINITION,
+    container: main_definitions_1.CONTAINER_ITEM_DEFINITION,
+};
+const updateDimension = (element, canvasConfig, positionType, deviceList = vem_constants_1.DEVICE_LIST) => {
+    const position = (0, exports.getDefaultDimensions)(element, positionType);
+    let newElement = element;
+    deviceList.forEach((device) => {
+        const isForceAddField = device !== ICanvasGrid_1.CanvasDevice.DESKTOP;
+        const newPosition = {
+            ...position,
+            ...(isForceAddField && { preCalculated: true }),
+        };
+        const updatedElement = (0, position_1.setElementPosition)(newElement, positionType, device, newPosition);
+        if (positionType === IVemPosition_1.VemPositionType.RESPONSIVE) {
+            const columns = canvasConfig[device]
+                .columns.count;
+            newElement = (0, exports.validateDimension)(updatedElement, columns, device);
+        }
+        else {
+            newElement = updatedElement;
+        }
+    });
+    return newElement;
+};
+exports.updateDimension = updateDimension;
+const normalizeSize = (item, positionType) => {
+    const vemDefinition = exports.VEM_DEFINITIONS[item.type];
+    const rawSize = vemDefinition.behavior.addingConfig.defaultDimensions[positionType];
+    const customSizeResolver = vemDefinition?.behavior.addingConfig.minSize?.[positionType]?.customSize;
+    const baseHeight = "height" in rawSize ? rawSize.height : rawSize.rowSpan;
+    const baseWidth = "width" in rawSize ? rawSize.width : rawSize.colSpan;
+    if (!customSizeResolver)
+        return { height: baseHeight, width: baseWidth };
+    const customSize = customSizeResolver(item.itemData);
+    return {
+        height: Math.max(customSize.height, baseHeight),
+        width: Math.max(customSize.width, baseWidth),
+    };
+};
+const getDefaultDimensions = (item, positionType) => {
+    const { height, width } = normalizeSize(item, positionType);
+    if (positionType === IVemPosition_1.VemPositionType.FIXED) {
+        return { x: 0, y: 0, height, width, z: 1 };
+    }
+    return { colSpan: width, rowSpan: height, colStart: 1, rowStart: 1 };
+};
+exports.getDefaultDimensions = getDefaultDimensions;
+const validateDimension = (baseElem, columnsCount, canvasDevice) => {
+    const currentPosition = baseElem.position.responsive[canvasDevice];
+    if (!currentPosition)
+        return baseElem;
+    const fixedColSpan = currentPosition.colSpan <= columnsCount
+        ? currentPosition?.colSpan
+        : columnsCount;
+    const position = {
+        ...currentPosition,
+        colSpan: fixedColSpan,
+    };
+    return (0, position_1.setElementPosition)(baseElem, IVemPosition_1.VemPositionType.RESPONSIVE, canvasDevice, position);
+};
+exports.validateDimension = validateDimension;

package/dist/cjs/elements/helpers/vem-element/models/vem.models.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IVemPosition_1 = require("../../../interfaces/IVemPosition");

package/dist/cjs/elements/interfaces/IVemCore.js

@@ -1,3 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.VemType = void 0;
 const IVemPosition_1 = require("./IVemPosition");
+var VemType;
+(function (VemType) {
+    VemType["IMAGE"] = "image";
+    VemType["BUTTON"] = "button";
+    VemType["TEXT"] = "text";
+    VemType["ANALYTICS"] = "analytics";
+    VemType["FILTER_INPUT"] = "filterInput";
+    VemType["FILTER_LIST"] = "filterList";
+    VemType["FILTER_DATE"] = "filterDate";
+    VemType["CONTAINER"] = "container";
+})(VemType || (exports.VemType = VemType = {}));

package/dist/cjs/elements/utils/element.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyDesktopPositionToDevice = void 0;
+exports.normalizeElements = exports.copyDesktopPositionToDevice = void 0;
 const position_1 = require("./position");
 const ICanvasGrid_1 = require("../interfaces/ICanvasGrid");
 const IVemPosition_1 = require("../interfaces/IVemPosition");
@@ -16,7 +16,7 @@ const copyDesktopPositionToDevice = (elements, newCanvasDevice, canvasType) => {
         },
     };
     return elements.map((element) => {
-        if (!element.position[canvasType]?.[newCanvasDevice]) {
+        if (!hasPositionForDevice(element, newCanvasDevice, canvasType)) {
             const desktopViewPosition = element.position[canvasType][ICanvasGrid_1.CanvasDevice.DESKTOP];
             const newDevicePosition = {
                 ...desktopViewPosition,
@@ -29,3 +29,24 @@ const copyDesktopPositionToDevice = (elements, newCanvasDevice, canvasType) => {
     });
 };
 exports.copyDesktopPositionToDevice = copyDesktopPositionToDevice;
+const normalizeElements = (elements, newCanvasDevice, canvasType) => {
+    const withPosition = [];
+    const withoutPosition = [];
+    for (const element of elements) {
+        if (hasPositionForDevice(element, newCanvasDevice, canvasType)) {
+            withPosition.push(element);
+        }
+        else {
+            withoutPosition.push(element);
+        }
+    }
+    const newElements = (0, exports.copyDesktopPositionToDevice)(withoutPosition, newCanvasDevice, canvasType);
+    return {
+        scopeElements: withPosition,
+        newElements,
+    };
+};
+exports.normalizeElements = normalizeElements;
+const hasPositionForDevice = (element, device, canvasType) => {
+    return !!element.position[canvasType]?.[device];
+};

package/dist/elements/helpers/fixed.d.ts

@@ -1,6 +1,6 @@
-import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { CanvasDevice, CanvasGridConfig, CanvasGridConfigFixed } from "../interfaces/ICanvasGrid";
 import { FindAvailablePositionOptions } from "../interfaces/IFixedPosition";
-import { VemFixed } from "../interfaces/IVemCore";
+import { Vem, VemFixed } from "../interfaces/IVemCore";
 import { VemPositionFixed } from "../interfaces/IVemPosition";
 export declare const CANVAS_EXTRA_HEIGHT = 10;
 export declare function updateFixedPosition(element: VemFixed, newDevicePosition: Partial<VemPositionFixed>, device: CanvasDevice): VemFixed;
@@ -25,3 +25,4 @@ export declare const sortElementsFromReferencePoint: (elements: VemFixed<unknown
     y: number;
 }) => VemFixed<unknown>[];
 export declare const updateFixedElementDimensions: (containerItem: VemFixed<unknown>, device: CanvasDevice, scopeElements: VemFixed<unknown>[]) => VemFixed<unknown>;
+export declare const convertResponsiveElementsToFixed: (config: CanvasGridConfig<CanvasGridConfigFixed>, elements: Vem[], canvasDevice?: CanvasDevice) => VemFixed[];

package/dist/elements/helpers/fixed.js

@@ -1,5 +1,6 @@
+import { updateDimension } from "./vem-element/helpers/vem.helpers";
 import { objectCopy } from "../../general";
-import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { CanvasDevice, } from "../interfaces/ICanvasGrid";
 import { VemPositionType } from "../interfaces/IVemPosition";
 import { dxGetFixedGridItemDevice, dxGetFixedGridItemsBottomLimit, hasOverflow, hasOverlap, } from "../utils/fixed.position";
 import { sortByDistanceFunction } from "../utils/general";
@@ -165,3 +166,10 @@ export const updateFixedElementDimensions = (containerItem, device, scopeElement
     }, device);
     return { ...currentElement };
 };
+export const convertResponsiveElementsToFixed = (config, elements, canvasDevice = CanvasDevice.DESKTOP) => {
+    const newElements = elements.filter((element) => !element.position?.fixed);
+    const currentFixedElements = elements.filter((element) => element.position?.fixed);
+    const recalculatedElements = newElements.map((element) => updateDimension(element, config, VemPositionType.FIXED));
+    const toProcessElements = findFixedAvailablePositions(config[canvasDevice].width, recalculatedElements, currentFixedElements, canvasDevice);
+    return [...currentFixedElements, ...toProcessElements];
+};

package/dist/elements/helpers/gridStrategy.d.ts

@@ -1,10 +1,17 @@
-import { CanvasDevice, Vem } from "../interfaces";
+import { CanvasDevice, CanvasGridConfig, CanvasGridConfigFixed, CanvasGridConfigResponsive, Vem, VemPositionType } from "../interfaces";
 interface RecalculateOptions {
     canvasHeight?: number;
     sort?: CanvasDevice;
     allowCopy?: boolean;
     keepPosition?: boolean;
 }
+type NormalizeElementDimensionFunction = {
+    elements: Vem[];
+    canvasConfig: CanvasGridConfig<CanvasGridConfigResponsive | CanvasGridConfigFixed>;
+    target: VemPositionType;
+    canvasDevice?: CanvasDevice;
+};
+export declare const normalizeElementPositions: ({ elements, canvasConfig, target, canvasDevice, }: NormalizeElementDimensionFunction) => Vem[];
 export declare function recalculateElements(newElements: Vem[], currentElements: Vem[], canvasWidth: number, canvasType: string, device: CanvasDevice, options?: RecalculateOptions): Vem[];
 export declare function applyDynamicSize(containerItem: Vem, scopeElements: Vem[], device: CanvasDevice, canvasType: string, gap?: number): Vem | undefined;
 export declare function calculateCanvasHeight(elements: Vem[], canvasType: string, device: CanvasDevice, rowGap?: number): number;