@qrvey/utils 1.17.1 → 1.17.2

package/dist/elements/helpers/gridStrategy.js

@@ -1,7 +1,11 @@
-import { findFixedAvailablePositions, getFixedGridElementsBottomLimit, recalculatePreservingPositions, sortElementsFromReferencePoint, updateFixedElementDimensions, } from "./fixed";
-import { findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, updateResponsiveElementDimensions, } from "./responsive";
+import { convertResponsiveElementsToFixed, findFixedAvailablePositions, getFixedGridElementsBottomLimit, recalculatePreservingPositions, sortElementsFromReferencePoint, updateFixedElementDimensions, } from "./fixed";
+import { convertFixedElementsToResponsive, findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, updateResponsiveElementDimensions, } from "./responsive";
 import { CanvasDevice, VemPositionType, } from "../interfaces";
-import { copyDesktopPositionToDevice } from "../utils/element";
+import { copyDesktopPositionToDevice, normalizeElements, } from "../utils/element";
+const normalizePositionStrategies = {
+    [VemPositionType.FIXED]: (canvasConfig, elements, device) => convertResponsiveElementsToFixed(canvasConfig, elements, device),
+    [VemPositionType.RESPONSIVE]: (canvasConfig, elements, device) => convertFixedElementsToResponsive(canvasConfig, elements, device),
+};
 const applyDynamicSizeStrategies = {
     fixed: (containerItem, scopeElements, device) => {
         return updateFixedElementDimensions(containerItem, device, scopeElements);
@@ -10,12 +14,18 @@ const applyDynamicSizeStrategies = {
         return updateResponsiveElementDimensions(containerItem, device, scopeElements, gap);
     },
 };
+export const normalizeElementPositions = ({ elements, canvasConfig, target, canvasDevice, }) => {
+    const _canvasDevice = canvasDevice ?? CanvasDevice.DESKTOP;
+    return normalizePositionStrategies[target](canvasConfig, elements, _canvasDevice);
+};
 const recalculateStrategies = {
     fixed: (elements, currentElements, canvasWidth, device, options) => {
-        const isSorted = !currentElements.length;
+        const { newElements, scopeElements } = normalizeElements(currentElements, device, VemPositionType.FIXED);
+        const elementsToCalculate = [...newElements, ...elements];
+        const isSorted = !scopeElements.length;
         const changedElements = (options.allowCopy
-            ? copyDesktopPositionToDevice(elements, device, VemPositionType.FIXED)
-            : elements);
+            ? copyDesktopPositionToDevice(elementsToCalculate, device, VemPositionType.FIXED)
+            : elementsToCalculate);
         const orderedElements = isSorted
             ? sortElementsFromReferencePoint(changedElements, options.sort, {
                 x: 0,
@@ -23,18 +33,20 @@ const recalculateStrategies = {
             })
             : changedElements;
         return options.keepPosition
-            ? recalculatePreservingPositions(orderedElements, currentElements, device, canvasWidth, options.canvasHeight)
-            : findFixedAvailablePositions(canvasWidth, orderedElements, currentElements, device, false, false, options?.canvasHeight);
+            ? recalculatePreservingPositions(orderedElements, scopeElements, device, canvasWidth, options.canvasHeight)
+            : findFixedAvailablePositions(canvasWidth, orderedElements, scopeElements, device, false, false, options?.canvasHeight);
     },
     responsive: (elements, currentElements, canvasWidth, device, options) => {
-        const isSorted = !currentElements.length;
+        const { scopeElements, newElements } = normalizeElements(currentElements, device, VemPositionType.RESPONSIVE);
+        const elementsToCalculate = [...newElements, ...elements];
+        const isSorted = !scopeElements.length;
         const changedElements = (options.allowCopy
-            ? copyDesktopPositionToDevice(elements, device, VemPositionType.RESPONSIVE)
-            : elements);
+            ? copyDesktopPositionToDevice(elementsToCalculate, device, VemPositionType.RESPONSIVE)
+            : elementsToCalculate);
         const orderedElements = isSorted
             ? sortResponsiveElements(changedElements, options.sort)
             : changedElements;
-        return findResponsiveAvailablePositions(canvasWidth, orderedElements, currentElements, device);
+        return findResponsiveAvailablePositions(canvasWidth, orderedElements, scopeElements, device);
     },
 };
 const calculateCanvasHeightStrategies = {

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

@@ -1,5 +1,5 @@
-import { CanvasDevice } from "../interfaces/ICanvasGrid";
-import { VemFixed, VemResponsive } from "../interfaces/IVemCore";
+import { CanvasDevice, CanvasGridConfig, CanvasGridConfigResponsive } from "../interfaces/ICanvasGrid";
+import { Vem, VemFixed, VemResponsive } from "../interfaces/IVemCore";
 import { VemPositionResponsive } from "../interfaces/IVemPosition";
 export declare function findAvailablePosition(canvasWidth: number, newElement: VemResponsive, elements: VemResponsive[], device: CanvasDevice): {
     colStart: number;
@@ -25,3 +25,4 @@ export declare const sortByDistanceInResponsiveFunction: (a: {
 }, _device: CanvasDevice) => number;
 export declare const sortResponsiveElements: (elements: VemResponsive<unknown>[], sortByDevice?: CanvasDevice) => VemResponsive<unknown>[];
 export declare const updateResponsiveElementDimensions: (containerItem: VemResponsive<unknown>, device: CanvasDevice, scopeElements: VemFixed<unknown>[], rowGapSize: number) => VemResponsive<unknown>;
+export declare const convertFixedElementsToResponsive: (config: CanvasGridConfig<CanvasGridConfigResponsive>, elements: Vem[], canvasDevice?: CanvasDevice) => VemResponsive[];

package/dist/elements/helpers/responsive.js

@@ -1,9 +1,10 @@
 import { objectCopy } from "../../general";
-import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { CanvasDevice, } from "../interfaces/ICanvasGrid";
 import { VemPositionType, } from "../interfaces/IVemPosition";
 import { dxGetFixedGridItemsBottomLimit } from "../utils/fixed.position";
 import { OverlapIntervalTree } from "../utils/overlap";
 import { setElementPosition } from "../utils/position";
+import { updateDimension } from "./vem-element/helpers/vem.helpers";
 const SPACE_DELTA = 1;
 const HEIGHT_DELTA = 32;
 const CANVAS_EXTRA_ROW = 1;
@@ -119,3 +120,10 @@ export const updateResponsiveElementDimensions = (containerItem, device, scopeEl
     }, device);
     return { ...currentElement };
 };
+export const convertFixedElementsToResponsive = (config, elements, canvasDevice = CanvasDevice.DESKTOP) => {
+    const newElements = elements.filter((element) => !element.position?.responsive);
+    const currentElements = elements.filter((element) => element.position?.responsive);
+    let recalculatedElements = newElements.map((baseElem) => updateDimension(baseElem, config, VemPositionType.RESPONSIVE));
+    recalculatedElements = findResponsiveAvailablePositions(config[canvasDevice].columns.count, recalculatedElements, currentElements, canvasDevice);
+    return [...currentElements, ...recalculatedElements];
+};

package/dist/elements/helpers/vem-element/constants/vem.constants.d.ts

@@ -0,0 +1,24 @@
+import { CanvasDevice } from "../../../interfaces/ICanvasGrid";
+export declare const DEFAULT_CUSTOM_HEIGHT_IN_FIXED = 30;
+export declare const DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = 32;
+export declare const DEFAULT_MIN_FONT_TO_AUTO_RESIZE = 18;
+export declare const DEFAULT_DELTA_RESIZE_IN_FIXED = 1.5;
+export declare const DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = 2.8;
+export declare const DEFAULT_WIDTH_IN_FIXED = 415;
+export declare const MIN_WIDTH_IN_FIXED = 275;
+export declare const DEFAULT_HEIGHT_IN_FIXED = 76;
+export declare const DEFAULT_WIDTH_IN_RESPONSIVE = 4;
+export declare const MIN_WIDTH_IN_RESPONSIVE = 3;
+export declare const DEFAULT_HEIGHT_IN_RESPONSIVE = 2;
+export declare const DEFAULT_HEIGHT_IN_LIST = 245;
+export declare enum FILTER_LIST_TYPE {
+    DROPDOWN = "DROPDOWN",
+    LIST = "LIST"
+}
+export declare enum FILTER_TRIGGER_TYPE {
+    AUTOMATIC = "AUTOMATIC",
+    BUTTON = "BUTTON",
+    DROPDOWN = "DROPDOWN",
+    LIST = "LIST"
+}
+export declare const DEVICE_LIST: CanvasDevice[];

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

@@ -0,0 +1,30 @@
+import { CanvasDevice } from "../../../interfaces/ICanvasGrid";
+export const DEFAULT_CUSTOM_HEIGHT_IN_FIXED = 30;
+export const DEFAULT_CUSTOM_HEIGHT_IN_RESPONSIVE = 32;
+export const DEFAULT_MIN_FONT_TO_AUTO_RESIZE = 18;
+export const DEFAULT_DELTA_RESIZE_IN_FIXED = 1.5;
+export const DEFAULT_DELTA_RESIZE_IN_RESPONSIVE = 2.8;
+export const DEFAULT_WIDTH_IN_FIXED = 415;
+export const MIN_WIDTH_IN_FIXED = 275;
+export const DEFAULT_HEIGHT_IN_FIXED = 76;
+export const DEFAULT_WIDTH_IN_RESPONSIVE = 4;
+export const MIN_WIDTH_IN_RESPONSIVE = 3;
+export const DEFAULT_HEIGHT_IN_RESPONSIVE = 2;
+export const DEFAULT_HEIGHT_IN_LIST = 245;
+export var FILTER_LIST_TYPE;
+(function (FILTER_LIST_TYPE) {
+    FILTER_LIST_TYPE["DROPDOWN"] = "DROPDOWN";
+    FILTER_LIST_TYPE["LIST"] = "LIST";
+})(FILTER_LIST_TYPE || (FILTER_LIST_TYPE = {}));
+export 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 || (FILTER_TRIGGER_TYPE = {}));
+export const DEVICE_LIST = [
+    CanvasDevice.DESKTOP,
+    CanvasDevice.TABLET,
+    CanvasDevice.MOBILE,
+];

package/dist/elements/helpers/vem-element/definitions/main.definitions.d.ts

@@ -0,0 +1,9 @@
+import { VemAnalytics, VemButton, VemDefinition, VemImage, VemText } from "../models/vem.models";
+export declare const IMAGE_ITEM_DEFINITION: VemDefinition<VemImage>;
+export declare const BUTTON_ITEM_DEFINITION: VemDefinition<VemButton>;
+export declare const TEXT_ITEM_DEFINITION: VemDefinition<VemText>;
+export declare const ANALYTICS_ITEM_DEFINITION: VemDefinition<VemAnalytics>;
+export declare const FILTER_INPUT_ITEM_DEFINITION: VemDefinition<unknown>;
+export declare const FILTER_LIST_ITEM_DEFINITION: VemDefinition<unknown>;
+export declare const FILTER_DATE_ITEM_DEFINITION: VemDefinition<unknown>;
+export declare const CONTAINER_ITEM_DEFINITION: VemDefinition<unknown>;

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

@@ -0,0 +1,260 @@
+import { DEFAULT_DELTA_RESIZE_IN_FIXED, DEFAULT_DELTA_RESIZE_IN_RESPONSIVE, DEFAULT_HEIGHT_IN_FIXED, DEFAULT_HEIGHT_IN_RESPONSIVE, DEFAULT_MIN_FONT_TO_AUTO_RESIZE, DEFAULT_WIDTH_IN_FIXED, DEFAULT_WIDTH_IN_RESPONSIVE, FILTER_LIST_TYPE, FILTER_TRIGGER_TYPE, } from "../constants/vem.constants";
+export const IMAGE_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 2,
+                    rowSpan: 6,
+                },
+                fixed: {
+                    width: 100,
+                    height: 100,
+                },
+            },
+            defaultItemData: {
+                aspect: "cover",
+            },
+        },
+    },
+};
+export const 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 > DEFAULT_MIN_FONT_TO_AUTO_RESIZE
+                            ? fontSizeValue * 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 > DEFAULT_MIN_FONT_TO_AUTO_RESIZE
+                            ? fontSizeValue * DEFAULT_DELTA_RESIZE_IN_RESPONSIVE
+                            : 30;
+                        return {
+                            height: Math.round(minHeightPx / 32),
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+export const 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,
+            },
+        },
+    },
+};
+export const ANALYTICS_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 4,
+                    rowSpan: 10,
+                },
+                fixed: {
+                    width: 400,
+                    height: 400,
+                },
+            },
+        },
+    },
+};
+export const FILTER_INPUT_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: DEFAULT_HEIGHT_IN_RESPONSIVE,
+                },
+                fixed: {
+                    width: DEFAULT_WIDTH_IN_FIXED,
+                    height: 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,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+export const FILTER_LIST_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: 2,
+                },
+                fixed: {
+                    width: DEFAULT_WIDTH_IN_FIXED,
+                    height: DEFAULT_HEIGHT_IN_FIXED,
+                },
+            },
+            minSize: {
+                fixed: {
+                    height: 30,
+                    width: 130,
+                    customSize: (itemData) => {
+                        const minHeight = itemData.type === FILTER_LIST_TYPE.LIST ? 100 : 30;
+                        return {
+                            height: minHeight,
+                            width: 130,
+                        };
+                    },
+                },
+                responsive: {
+                    height: 1,
+                    width: 1,
+                    customSize: () => {
+                        return {
+                            height: 1,
+                            width: 1,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+export const FILTER_DATE_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: DEFAULT_WIDTH_IN_RESPONSIVE,
+                    rowSpan: DEFAULT_HEIGHT_IN_RESPONSIVE,
+                },
+                fixed: {
+                    width: DEFAULT_WIDTH_IN_FIXED,
+                    height: DEFAULT_HEIGHT_IN_FIXED,
+                },
+            },
+            defaultItemData: {
+                validators: [],
+                trigger: 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,
+                        };
+                    },
+                },
+            },
+        },
+    },
+};
+export const CONTAINER_ITEM_DEFINITION = {
+    behavior: {
+        addingConfig: {
+            defaultDimensions: {
+                responsive: {
+                    colSpan: 10,
+                    rowSpan: 10,
+                },
+                fixed: {
+                    width: 900,
+                    height: 500,
+                },
+            },
+        },
+    },
+};

package/dist/elements/helpers/vem-element/helpers/vem.helpers.d.ts

@@ -0,0 +1,8 @@
+import { CanvasDevice, CanvasGridConfig, CanvasGridConfigFixed, CanvasGridConfigResponsive } from "../../../interfaces/ICanvasGrid";
+import { Vem, VemFixed, VemResponsive } from "../../../interfaces/IVemCore";
+import { VemPositionFixed, VemPositionResponsive, VemPositionType } from "../../../interfaces/IVemPosition";
+import { VemDefinitionConfig } from "../models/vem.models";
+export declare const VEM_DEFINITIONS: VemDefinitionConfig;
+export declare const updateDimension: (element: VemFixed | VemResponsive, canvasConfig: CanvasGridConfig<CanvasGridConfigResponsive | CanvasGridConfigFixed>, positionType: VemPositionType, deviceList?: CanvasDevice[]) => VemResponsive;
+export declare const getDefaultDimensions: (item: Vem, positionType: VemPositionType) => VemPositionFixed | VemPositionResponsive;
+export declare const validateDimension: (baseElem: VemResponsive, columnsCount: number, canvasDevice: CanvasDevice) => VemResponsive;

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

@@ -0,0 +1,70 @@
+import { CanvasDevice, } from "../../../interfaces/ICanvasGrid";
+import { VemPositionType, } from "../../../interfaces/IVemPosition";
+import { setElementPosition } from "../../../utils/position";
+import { DEVICE_LIST } from "../constants/vem.constants";
+import { ANALYTICS_ITEM_DEFINITION, BUTTON_ITEM_DEFINITION, CONTAINER_ITEM_DEFINITION, FILTER_DATE_ITEM_DEFINITION, FILTER_INPUT_ITEM_DEFINITION, FILTER_LIST_ITEM_DEFINITION, IMAGE_ITEM_DEFINITION, TEXT_ITEM_DEFINITION, } from "../definitions/main.definitions";
+export const VEM_DEFINITIONS = {
+    image: IMAGE_ITEM_DEFINITION,
+    button: BUTTON_ITEM_DEFINITION,
+    text: TEXT_ITEM_DEFINITION,
+    analytics: ANALYTICS_ITEM_DEFINITION,
+    filterInput: FILTER_INPUT_ITEM_DEFINITION,
+    filterDate: FILTER_DATE_ITEM_DEFINITION,
+    filterList: FILTER_LIST_ITEM_DEFINITION,
+    container: CONTAINER_ITEM_DEFINITION,
+};
+export const updateDimension = (element, canvasConfig, positionType, deviceList = DEVICE_LIST) => {
+    const position = getDefaultDimensions(element, positionType);
+    let newElement = element;
+    deviceList.forEach((device) => {
+        const isForceAddField = device !== CanvasDevice.DESKTOP;
+        const newPosition = {
+            ...position,
+            ...(isForceAddField && { preCalculated: true }),
+        };
+        const updatedElement = setElementPosition(newElement, positionType, device, newPosition);
+        if (positionType === VemPositionType.RESPONSIVE) {
+            const columns = canvasConfig[device]
+                .columns.count;
+            newElement = validateDimension(updatedElement, columns, device);
+        }
+        else {
+            newElement = updatedElement;
+        }
+    });
+    return newElement;
+};
+const normalizeSize = (item, positionType) => {
+    const vemDefinition = 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),
+    };
+};
+export const getDefaultDimensions = (item, positionType) => {
+    const { height, width } = normalizeSize(item, positionType);
+    if (positionType === VemPositionType.FIXED) {
+        return { x: 0, y: 0, height, width, z: 1 };
+    }
+    return { colSpan: width, rowSpan: height, colStart: 1, rowStart: 1 };
+};
+export 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 setElementPosition(baseElem, VemPositionType.RESPONSIVE, canvasDevice, position);
+};

package/dist/elements/helpers/vem-element/models/vem.models.d.ts

@@ -0,0 +1,85 @@
+import { VemCreation, VemType } from "../../../interfaces/IVemCore";
+import { VemPositionType, VemSizeConfig } from "../../../interfaces/IVemPosition";
+export interface VemDefinition<T = unknown> {
+    behavior: VemItemBehavior<T>;
+}
+interface VemItemBehavior<T> {
+    addingConfig: VemAddingConfig<T>;
+}
+export interface VemActionManager {
+    checkAutoLinks: (data: unknown) => unknown[] | undefined;
+}
+interface VemAddingConfig<T> {
+    defaultDimensions: VemSizeConfig;
+    defaultActionData?: ((item: VemCreation, actionManager: VemActionManager) => unknown[] | undefined) | unknown[];
+    defaultItemData?: ((item: VemCreation) => T) | T;
+    minSize?: VemMinSize;
+}
+export interface VemMinSizeConfig {
+    width: number;
+    height: number;
+    customSize: (item: Record<string, unknown>) => {
+        height: number;
+        width: number;
+    };
+}
+export interface VemMinSize {
+    [VemPositionType.FIXED]: VemMinSizeConfig;
+    [VemPositionType.RESPONSIVE]: VemMinSizeConfig;
+}
+export type VemDefinitionConfig = Record<VemType, VemDefinition>;
+export type VemImageAspect = "cover" | "fill" | "contain";
+export interface VemImage {
+    image?: string;
+    aspect?: VemImageAspect;
+    fromFile?: boolean;
+    fileName?: string;
+    linkUrl?: string;
+}
+export interface VemButton {
+    label: string;
+    background: string;
+    color: string;
+    url?: string;
+    targetLink?: boolean;
+    fontFamily?: string;
+    fontSize?: string;
+}
+export interface VemText {
+    text?: string;
+    link?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontColor?: string;
+    fontWeight?: string;
+    backgroundColor?: string;
+    alignText?: string;
+    textDecoration?: string;
+    verticalAlign?: string;
+    textWrapping?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    paddingLeft?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    format?: string;
+    whiteSpace?: string;
+    orderedList?: boolean;
+    bulletList?: boolean;
+    textWrap?: string;
+    textExpanded?: boolean;
+    selectedFormat?: Record<string, unknown>;
+}
+export interface VemAnalytics {
+    filters?: unknown[];
+    qrveyId: string;
+    chartType: string;
+    metricId?: string;
+    chartId?: string;
+    summaryId?: string;
+    showOriginal?: string;
+    originalData?: unknown;
+}
+export {};

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

@@ -0,0 +1 @@
+import { VemPositionType, } from "../../../interfaces/IVemPosition";

package/dist/elements/interfaces/ICanvasGrid.d.ts

@@ -1,5 +1,29 @@
+export interface CanvasGridConfigDetailResponsive {
+    count: number;
+    gap: number;
+    autoCount?: boolean;
+}
+export interface CanvasGridConfigResponsive {
+    columns: CanvasGridConfigDetailResponsive;
+    rows: CanvasGridConfigDetailResponsive;
+    autoPosition?: boolean;
+}
+export interface CanvasGridConfigFixed {
+    height: number;
+    width: number;
+    autoHeight: boolean;
+}
+type CanvasGridConfigGeneric = CanvasGridConfigFixed | CanvasGridConfigResponsive;
+export interface CanvasGridConfig<TGridConfig extends CanvasGridConfigGeneric = CanvasGridConfigGeneric> {
+    desktop: TGridConfig;
+    tablet?: TGridConfig;
+    mobile?: TGridConfig;
+    snapToGrid?: boolean;
+    gridLines?: boolean;
+}
 export declare enum CanvasDevice {
     DESKTOP = "desktop",
     TABLET = "tablet",
     MOBILE = "mobile"
 }
+export {};

package/dist/elements/interfaces/IVemCore.d.ts

@@ -23,4 +23,18 @@ export interface VemElementMap<T = unknown> {
     [VemPositionType.FIXED]: VemFixed<T>;
     [VemPositionType.RESPONSIVE]: VemResponsive<T>;
 }
+export type VemCreation<T = unknown> = Omit<Vem<T>, "elementId"> & {
+    baseData?: T;
+    elementId?: string;
+};
+export declare enum VemType {
+    IMAGE = "image",
+    BUTTON = "button",
+    TEXT = "text",
+    ANALYTICS = "analytics",
+    FILTER_INPUT = "filterInput",
+    FILTER_LIST = "filterList",
+    FILTER_DATE = "filterDate",
+    CONTAINER = "container"
+}
 export {};

package/dist/elements/interfaces/IVemCore.js

@@ -1 +1,12 @@
 import { VemPositionType, } from "./IVemPosition";
+export 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 || (VemType = {}));

package/dist/elements/utils/element.d.ts

@@ -1,4 +1,8 @@
 import { CanvasDevice } from "../interfaces/ICanvasGrid";
 import { Vem } from "../interfaces/IVemCore";
 import { VemPositionType } from "../interfaces/IVemPosition";
-export declare const copyDesktopPositionToDevice: (elements: Vem[], newCanvasDevice: CanvasDevice, canvasType: VemPositionType) => Vem[];
+export declare const copyDesktopPositionToDevice: (elements: Vem[], newCanvasDevice: CanvasDevice, canvasType: VemPositionType) => Vem<unknown, VemPositionType>[];
+export declare const normalizeElements: (elements: Vem[], newCanvasDevice: CanvasDevice, canvasType: VemPositionType) => {
+    scopeElements: Vem[];
+    newElements: Vem[];
+};