@qrvey/utils 1.15.0-2 → 1.15.0-20

package/dist/cjs/general/string/strategies/XSSEstrictedSanitizer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XSSEstrictedSanitizer = void 0;
+const xss_1 = require("xss");
+class XSSEstrictedSanitizer {
+    constructor(options, attributesBlackList = []) {
+        this.attributesBlackList = attributesBlackList;
+        this.options = Object.assign({ css: false, onIgnoreTagAttr: (_tag, name, value) => {
+                if (this.attributesBlackList.includes(name)) {
+                    return ""; // Elimina el atributo si está en la lista negra
+                }
+                return `${name}="${value}"`; // Mantiene el atributo si no está en la lista negra
+            }, onIgnoreTag: (tag, _html, _options) => {
+                if (["script", "iframe"].includes(tag)) {
+                    return ""; // Elimina los <script>
+                }
+            }, escapeHtml: (str) => str }, options);
+    }
+    sanitize(html) {
+        return (0, xss_1.filterXSS)(html, this.options);
+    }
+}
+exports.XSSEstrictedSanitizer = XSSEstrictedSanitizer;

package/dist/cjs/general/string/strategies/XSSSanitizer.d.ts

@@ -0,0 +1,8 @@
+import { IFilterXSSOptions } from "xss";
+import { SanitizerStrategy } from "../../../interfaces/SatinizerStrategy";
+export declare class XSSSanitizer implements SanitizerStrategy {
+    private attributesBlackList;
+    private options;
+    constructor(options?: IFilterXSSOptions, attributesBlackList?: string[]);
+    sanitize(html: string): string;
+}

package/dist/cjs/general/string/strategies/XSSSanitizer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XSSSanitizer = void 0;
+const xss_1 = require("xss");
+class XSSSanitizer {
+    constructor(options, attributesBlackList = []) {
+        this.attributesBlackList = attributesBlackList;
+        this.options = Object.assign({ css: false, onIgnoreTagAttr: (tag, name, value) => {
+                if (!this.attributesBlackList.includes(name)) {
+                    return `${name}="${value}"`;
+                }
+                return "";
+            } }, options);
+    }
+    sanitize(html) {
+        return (0, xss_1.filterXSS)(html, this.options);
+    }
+}
+exports.XSSSanitizer = XSSSanitizer;

package/dist/cjs/general/string/urlValidator.d.ts

@@ -0,0 +1,10 @@
+export declare class URLValidator {
+    private validDomains;
+    private validProtocols;
+    constructor(domains?: string[], protocols?: string[]);
+    setValidDomains(domains?: string[]): this;
+    setValidProtocols(protocols?: string[]): this;
+    validate(url: string): boolean;
+    private isValidProtocol;
+    private isValidDomain;
+}

package/dist/cjs/general/string/urlValidator.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.URLValidator = void 0;
+class URLValidator {
+    constructor(domains = [], protocols = ["http", "https"]) {
+        this.validDomains = domains;
+        this.validProtocols = protocols;
+    }
+    setValidDomains(domains = []) {
+        this.validDomains = domains;
+        return this;
+    }
+    setValidProtocols(protocols = []) {
+        this.validProtocols = protocols;
+        return this;
+    }
+    validate(url) {
+        try {
+            const urlObj = new URL(url);
+            return (this.isValidProtocol(urlObj.protocol) &&
+                (this.validDomains.length === 0 || this.isValidDomain(urlObj.hostname)));
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    isValidProtocol(protocol) {
+        const normalizedProtocol = protocol.replace(":", "").toLowerCase();
+        return this.validProtocols.includes(normalizedProtocol);
+    }
+    isValidDomain(domain) {
+        if (this.validDomains.length === 0) {
+            return true;
+        }
+        return this.validDomains.some((validDomain) => domain.endsWith(validDomain));
+    }
+}
+exports.URLValidator = URLValidator;

package/dist/cjs/globalization/interfaces/export/II18nExportingModal.d.ts

@@ -16,6 +16,26 @@ export interface I18nExportingModal {
         failed_scheduling: string;
         successful_scheduling: string;
     };
+    pivoting_export: {
+        dataset_label: string;
+        filter_label: string;
+        pivoting: {
+            title: string;
+            yes_label: string;
+            no_label: string;
+        };
+        search_placeholder: string;
+        columns_section: {
+            title: string;
+            subtitle: string;
+            select_all_label: string;
+            dataset_columns: string;
+            pivot_columns_label: string;
+            pivot_columns_sublabel: string;
+        };
+        columns_to_export_label: string;
+        no_results_found: string;
+    };
     schedule: {
         chart_download_ready: string;
         page_download_ready: string;

package/dist/cjs/globalization/interfaces/filters/II18nFilterDisplay.d.ts

@@ -3,4 +3,5 @@ export interface II18nFilterDisplay {
     edit: string;
     remove: string;
     title: string;
+    dataset_title?: string;
 }

package/dist/cjs/globalization/labels/export/I18N_EXPORT_MODAL.js

@@ -27,6 +27,26 @@ exports.EXPORTING_MODAL = {
         failed_scheduling: "The export could not be scheduled at this time.",
         successful_scheduling: "The export of {{fileName}} has been scheduled successfully.",
     },
+    pivoting_export: {
+        dataset_label: "Dataset",
+        filter_label: "Filter",
+        pivoting: {
+            title: "Pivoting",
+            yes_label: "Yes",
+            no_label: "No",
+        },
+        search_placeholder: "Search",
+        columns_section: {
+            title: "Columns",
+            subtitle: "(Select columns to export)",
+            select_all_label: "Add All Columns",
+            dataset_columns: "Dataset Columns",
+            pivot_columns_label: "Pivot Columns",
+            pivot_columns_sublabel: "Displaying only the first 100 results.",
+        },
+        columns_to_export_label: "Columns to export",
+        no_results_found: "No results found",
+    },
     schedule: {
         chart_download_ready: "Chart is ready to download",
         page_download_ready: "Dashboard is ready to download",

package/dist/cjs/globalization/labels/filters/I18N_FILTER_DISPLAY.js

@@ -9,4 +9,5 @@ exports.I18N_FILTER_DISPLAY = {
     edit: "Edit",
     remove: "Remove",
     title: "Filters affecting this chart",
+    dataset_title: "Filters affecting this dataset",
 };

package/dist/cjs/index.d.ts

@@ -16,3 +16,4 @@ export * from "./typescript/index";
 export * from "./tokens/index";
 export * from "./column_format/index";
 export * from "./themes/index";
+export * from "./elements/index";

package/dist/cjs/index.js

@@ -32,3 +32,4 @@ __exportStar(require("./typescript/index"), exports);
 __exportStar(require("./tokens/index"), exports);
 __exportStar(require("./column_format/index"), exports);
 __exportStar(require("./themes/index"), exports);
+__exportStar(require("./elements/index"), exports);

package/dist/cjs/interfaces/SatinizerStrategy.d.ts

@@ -0,0 +1,3 @@
+export interface SanitizerStrategy {
+    sanitize(html: string): string;
+}

package/dist/cjs/interfaces/SatinizerStrategy.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,85 @@
+import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { FindAvailablePositionOptions } from "../interfaces/IFixedPosition";
+import { VemFixed } from "../interfaces/IVemCore";
+import { VemPositionFixed } from "../interfaces/IVemPosition";
+/**
+ * update the position for a specific device
+ * @param element element to be updated
+ * @param newDevicePosition new position attributes for the element
+ * @param device device for the update
+ * @returns new element with its position updated
+ */
+export declare function updateFixedPosition(element: VemFixed, newDevicePosition: Partial<VemPositionFixed>, device: CanvasDevice): VemFixed;
+/**
+ * Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElement - The new element to be placed, with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [options] - Additional options for position finding.
+ * @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
+ * @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
+ * @returns - The x and y coordinates of the first available position.
+ * @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
+ */
+export declare function findAvailablePosition(canvasWidth: number, newElement: VemFixed, elements: VemFixed[], device: CanvasDevice, options?: FindAvailablePositionOptions): {
+    x: number;
+    y: number;
+};
+export declare const getFixedPositionByDevice: (item: VemFixed, device: CanvasDevice) => VemPositionFixed | undefined;
+/**
+ * Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElements - The list of new elements to be positioned, each with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
+ * @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
+ * @returns
+ */
+export declare function findFixedAvailablePositions(canvasWidth: number, newElements: VemFixed[], elements: VemFixed[], device: CanvasDevice, startWithPositionY?: boolean, findRightToLeft?: boolean, canvasHeight?: number): VemFixed[];
+/**
+ * Adjusts the `width` of a responsive element to fit within the specified canvas width and updates its position.
+ * @param element - The fixed element to adjust.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
+ * @returns - The updated responsive element with an adjusted `width`.
+ */
+export declare function calculateWidth(element: VemFixed, canvasWidth: number, canvasDevice: CanvasDevice): VemFixed;
+/**
+ * @param elements elements to calculate
+ * @param device  current device
+ * @returns height
+ */
+export declare const getFixedGridElementsBottomLimit: (elements: VemFixed[], device: CanvasDevice) => number;
+/**
+ * Calculates distances of elements from a given reference point on the canvas device.
+ * @param elements - Array of `VemFixed` elements to calculate distances for.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of objects containing the original elements and their calculated distances from the reference point.
+ */
+export declare const calculateDistancesToReferencePoint: (elements: VemFixed[], device: CanvasDevice, referencePoint: {
+    x: number;
+    y: number;
+}) => {
+    distance: number;
+    element: VemFixed;
+}[];
+/**
+ * Sorts elements based on their distance from a reference point on the canvas.
+ * @param elements - Array of `VemFixed` elements to be sorted.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of `VemFixed` elements sorted by their distance from the reference point (0, 0).
+ */
+export declare const sortElementsFromReferencePoint: (elements: VemFixed<unknown>[], device: CanvasDevice, referencePoint: {
+    x: number;
+    y: number;
+}) => VemFixed<unknown>[];

package/dist/elements/helpers/fixed.js

@@ -0,0 +1,177 @@
+import { VemPositionType } from "../interfaces/IVemPosition";
+import { sortByDistanceFunction } from "../utils/general";
+import { OverlapIntervalTree } from "../utils/overlap";
+import { setElementPosition } from "../utils/position";
+const SPACE_DELTA = 10;
+/**
+ * update the position for a specific device
+ * @param element element to be updated
+ * @param newDevicePosition new position attributes for the element
+ * @param device device for the update
+ * @returns new element with its position updated
+ */
+export function updateFixedPosition(element, newDevicePosition, device) {
+    var _a;
+    return Object.assign(Object.assign({}, element), { position: Object.assign(Object.assign({}, element.position), { fixed: Object.assign(Object.assign({}, element.position.fixed), { [device]: Object.assign(Object.assign({}, (_a = element.position.fixed) === null || _a === void 0 ? void 0 : _a[device]), newDevicePosition) }) }) });
+}
+/**
+ * Finds the first available position within a canvas where a new element can be placed without overlapping existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElement - The new element to be placed, with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [options] - Additional options for position finding.
+ * @param [options.canvasHeight] - The maximum height of the canvas in pixels. Defaults to `Infinity`.
+ * @param [options.findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [options.initialY] - The initial Y-coordinate to start the search. Defaults to `0`.
+ * @returns - The x and y coordinates of the first available position.
+ * @throws {Error} - Throws an error if no valid position is found and `canvasHeight` is not specified.
+ */
+export function findAvailablePosition(canvasWidth, newElement, elements, device, options = {}) {
+    var _a, _b;
+    const { width: newWidth, height: newHeight } = getFixedPositionByDevice(newElement, device);
+    const canvasHeight = (_a = options.canvasHeight) !== null && _a !== void 0 ? _a : Infinity;
+    const sortedElements = options.findRightToLeft
+        ? elements
+            .slice()
+            .sort((b, a) => b.position.fixed[device].x - a.position.fixed[device].x)
+        : elements
+            .slice()
+            .sort((a, b) => a.position.fixed[device].y - b.position.fixed[device].y);
+    const intervalTree = new OverlapIntervalTree();
+    for (const element of sortedElements) {
+        const elemPosition = element.position.fixed[device];
+        intervalTree.insert(elemPosition.x, elemPosition.x + elemPosition.width, elemPosition.y, elemPosition.y + elemPosition.height);
+    }
+    let startX = options.findRightToLeft ? canvasWidth - newWidth : 0;
+    const initialY = (_b = options.initialY) !== null && _b !== void 0 ? _b : 0;
+    let increment = options.findRightToLeft ? -SPACE_DELTA : SPACE_DELTA;
+    for (let y = initialY; y <= canvasHeight - newHeight; y += SPACE_DELTA) {
+        let x = startX;
+        while (x >= 0 && x <= canvasWidth - newWidth) {
+            if (!intervalTree.overlaps(x, x + newWidth, y, y + newHeight)) {
+                return { x, y };
+            }
+            x += increment;
+        }
+        if (options.findRightToLeft) {
+            startX = 0;
+            increment = SPACE_DELTA;
+        }
+    }
+    if (options.canvasHeight)
+        return { x: 0, y: 0 };
+    throw new Error("No valid position found");
+}
+export const getFixedPositionByDevice = (item, device) => {
+    const fixedPosition = item.position.fixed;
+    const devicePosition = fixedPosition[device];
+    return isValidPosition(devicePosition) ? devicePosition : undefined;
+};
+const isValidPosition = (position) => {
+    return ((position === null || position === void 0 ? void 0 : position.y) !== undefined &&
+        position.x !== undefined &&
+        position.z !== undefined &&
+        position.height !== undefined &&
+        position.width !== undefined);
+};
+/**
+ * Finds available positions for multiple new elements within a canvas, ensuring they do not overlap with existing elements.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param newElements - The list of new elements to be positioned, each with fixed position properties.
+ * @param elements - The list of existing elements on the canvas.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param [startWithPositionY] - Whether to start the position search for each new element based on its initial Y-coordinate. Defaults to `false`.
+ * @param [findRightToLeft] - Whether to search for positions from right to left. Defaults to `false`.
+ * @param [canvasHeight] - The maximum height of the canvas in pixels. If not provided, the search height is unlimited.
+ * @returns
+ */
+export function findFixedAvailablePositions(canvasWidth, newElements, elements, device, startWithPositionY = false, findRightToLeft = false, canvasHeight) {
+    const processedElements = elements.slice();
+    const resultElems = [];
+    newElements.forEach((nElement) => {
+        const initialY = startWithPositionY
+            ? nElement.position.fixed[device].y
+            : 0;
+        const newElement = calculateWidth(nElement, canvasWidth, device);
+        const availablePosition = findAvailablePosition(canvasWidth, newElement, processedElements, device, { initialY, findRightToLeft, canvasHeight });
+        const newElemWithPosition = updateFixedPosition(newElement, availablePosition, device);
+        resultElems.push(newElemWithPosition);
+        processedElements.push(newElemWithPosition);
+    });
+    return resultElems;
+}
+/**
+ * Adjusts the `width` of a responsive element to fit within the specified canvas width and updates its position.
+ * @param element - The fixed element to adjust.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
+ * @returns - The updated responsive element with an adjusted `width`.
+ */
+export function calculateWidth(element, canvasWidth, canvasDevice) {
+    const currentPosition = element.position.fixed[canvasDevice];
+    const fixedWidth = Math.min(currentPosition.width, canvasWidth);
+    const position = Object.assign(Object.assign({}, currentPosition), { width: fixedWidth });
+    return setElementPosition(element, VemPositionType.FIXED, canvasDevice, position);
+}
+const getFixedGridElementY = (element, device, allowNegative = false) => {
+    var _a;
+    const position = element.position.fixed[device];
+    const itemY = (_a = position === null || position === void 0 ? void 0 : position.y) !== null && _a !== void 0 ? _a : 0;
+    if (!allowNegative) {
+        return itemY >= 0 ? itemY : 0;
+    }
+    return itemY;
+};
+const getFixedGridElementHeight = (element, device) => {
+    const position = element.position.fixed[device];
+    return position === null || position === void 0 ? void 0 : position.height;
+};
+/**
+ * @param elements elements to calculate
+ * @param device  current device
+ * @returns height
+ */
+export const getFixedGridElementsBottomLimit = (elements, device) => {
+    if (!elements.length)
+        return 0;
+    return Math.max(...elements.map((element) => getFixedGridElementY(element, device) +
+        getFixedGridElementHeight(element, device)));
+};
+/**
+ * Calculates distances of elements from a given reference point on the canvas device.
+ * @param elements - Array of `VemFixed` elements to calculate distances for.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of objects containing the original elements and their calculated distances from the reference point.
+ */
+export const calculateDistancesToReferencePoint = (elements, device, referencePoint) => {
+    return elements.map((element) => {
+        const elementPosition = getFixedPositionByDevice(element, device);
+        if (!elementPosition) {
+            throw new Error(`Position for device ${device} is undefined for element with Id ${element.elementId}.`);
+        }
+        const distance = Math.pow(referencePoint.x - elementPosition.x, 2) +
+            Math.pow(referencePoint.y - elementPosition.y, 2);
+        return {
+            distance,
+            element,
+        };
+    });
+};
+/**
+ * Sorts elements based on their distance from a reference point on the canvas.
+ * @param elements - Array of `VemFixed` elements to be sorted.
+ * @param device - Canvas device providing the coordinates of the elements.
+ * @param referencePoint - The reference point to calculate distances from.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns An array of `VemFixed` elements sorted by their distance from the reference point (0, 0).
+ */
+export const sortElementsFromReferencePoint = (elements, device, referencePoint) => {
+    const calculatedElements = calculateDistancesToReferencePoint(elements, device, referencePoint);
+    const sortedElements = [...calculatedElements].sort(sortByDistanceFunction);
+    return sortedElements.map((element) => element.element);
+};

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

@@ -0,0 +1,28 @@
+import { CanvasDevice, Vem } from "../interfaces";
+interface RecalculateOptions {
+    canvasHeight?: number;
+    sort?: CanvasDevice;
+    allowCopy?: boolean;
+}
+/**
+ * Recalculates the positions of elements on a canvas based on the canvas type.
+ * @param newElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param currentElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param canvasHeight -  variable for the canvas with header component
+ * @param options
+ * @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
+ */
+export declare function recalculateElements(newElements: Vem[], currentElements: Vem[], canvasWidth: number, canvasType: string, device: CanvasDevice, options?: RecalculateOptions): Vem[];
+/**
+ * The calculation is delegated to a specific strategy based on the `canvasType`.
+ * @param elements - The list of elements in the canvas.
+ * @param canvasType - The type of canvas (e.g., "fixed", "responsive").
+ * @param device - The target device type (e.g., desktop, tablet, mobile).
+ * @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
+ * @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
+ */
+export declare function calculateCanvasHeight(elements: Vem[], canvasType: string, device: CanvasDevice, rowGap?: number): number;
+export {};

package/dist/elements/helpers/gridStrategy.js

@@ -0,0 +1,76 @@
+import { findFixedAvailablePositions, getFixedGridElementsBottomLimit, sortElementsFromReferencePoint, } from "./fixed";
+import { findResponsiveAvailablePositions, getResponsiveGridElementsBottomLimit, sortResponsiveElements, } from "./responsive";
+import { CanvasDevice, VemPositionType, } from "../interfaces";
+import { copyDesktopPositionToDevice } from "../utils/element";
+const recalculateStrategies = {
+    fixed: (elements, currentElements, canvasWidth, device, options) => {
+        const isSorted = !currentElements.length;
+        const changedElements = (options.allowCopy
+            ? copyDesktopPositionToDevice(elements, device, VemPositionType.FIXED)
+            : elements);
+        // sort elements
+        const orderedElements = isSorted
+            ? sortElementsFromReferencePoint(changedElements, options.sort, {
+                x: 0,
+                y: 0,
+            })
+            : changedElements;
+        return findFixedAvailablePositions(canvasWidth, orderedElements, currentElements, device, false, false, options === null || options === void 0 ? void 0 : options.canvasHeight);
+    },
+    responsive: (elements, currentElements, canvasWidth, device, options) => {
+        const isSorted = !currentElements.length;
+        const changedElements = (options.allowCopy
+            ? copyDesktopPositionToDevice(elements, device, VemPositionType.RESPONSIVE)
+            : elements);
+        const orderedElements = isSorted
+            ? sortResponsiveElements(changedElements, options.sort)
+            : changedElements;
+        return findResponsiveAvailablePositions(canvasWidth, orderedElements, currentElements, device);
+    },
+};
+const calculateCanvasHeightStrategies = {
+    fixed: (elements, device) => {
+        return getFixedGridElementsBottomLimit(elements, device);
+    },
+    responsive: (elements, device, rowGap) => {
+        return getResponsiveGridElementsBottomLimit(elements, device, rowGap);
+    },
+};
+/**
+ * Recalculates the positions of elements on a canvas based on the canvas type.
+ * @param newElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param currentElements - The list of elements to be recalculated. Each element has properties based on its type.
+ * @param canvasWidth - The width of the canvas in pixels.
+ * @param canvasType - The type of canvas (e.g., "fixed") that determines how positions are recalculated.
+ * @param device - The device type (e.g., desktop, tablet, mobile) for determining element positions.
+ * @param canvasHeight -  variable for the canvas with header component
+ * @param options
+ * @returns - A list of elements with updated positions if the canvas type is "fixed" or "responsive".
+ */
+export function recalculateElements(newElements, currentElements, canvasWidth, canvasType, device, options) {
+    const strategy = recalculateStrategies[canvasType];
+    if (!strategy) {
+        return [];
+    }
+    const defaultOptions = {
+        sort: CanvasDevice.DESKTOP,
+        allowCopy: true,
+    };
+    const calculatedOptions = Object.assign(Object.assign({}, defaultOptions), options);
+    return strategy(newElements, currentElements, canvasWidth, device, calculatedOptions);
+}
+/**
+ * The calculation is delegated to a specific strategy based on the `canvasType`.
+ * @param elements - The list of elements in the canvas.
+ * @param canvasType - The type of canvas (e.g., "fixed", "responsive").
+ * @param device - The target device type (e.g., desktop, tablet, mobile).
+ * @param [rowGap] - The optional gap (in pixels) between rows in the canvas.
+ * @returns - The calculated canvas height based on the selected strategy. Returns an empty array if no strategy is found.
+ */
+export function calculateCanvasHeight(elements, canvasType, device, rowGap) {
+    const strategy = calculateCanvasHeightStrategies[canvasType];
+    if (!strategy) {
+        return 0;
+    }
+    return strategy(elements, device, rowGap);
+}

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

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

package/dist/elements/helpers/index.js

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

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

@@ -0,0 +1,87 @@
+import { CanvasDevice } from "../interfaces/ICanvasGrid";
+import { VemResponsive } from "../interfaces/IVemCore";
+import { VemPositionResponsive } from "../interfaces/IVemPosition";
+/**
+ * Finds the first available position for a new responsive element within a canvas.
+ * @param canvasWidth - The width of the canvas in terms of columns.
+ * @param newElement - The new responsive element to place on the canvas.
+ * @param elements - The existing elements on the canvas.
+ * @param device - The target device type (e.g., desktop, tablet, mobile) to calculate responsive positions.
+ * @returns - The column and row start positions for the new element, or `undefined` if no valid position is found.
+ */
+export declare function findAvailablePosition(canvasWidth: number, newElement: VemResponsive, elements: VemResponsive[], device: CanvasDevice): {
+    colStart: number;
+    rowStart: number;
+} | undefined;
+/**
+ * Updates the responsive position of a given element for a specified device.
+ * @param element - The responsive element to update.
+ * @param newPosition - The new position values to update for the element.
+ * @param device - The target device type (e.g., desktop, tablet, mobile) for which the position is updated.
+ * @returns - A new `VemResponsive` object with the updated responsive position for the specified device.
+ */
+export declare function updateResponsivePosition(element: VemResponsive, newPosition: Partial<VemPositionResponsive>, device: CanvasDevice): VemResponsive;
+/**
+ * Finds available positions for a list of responsive elements on a canvas and updates their positions.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param newElements - The list of new responsive elements to position.
+ * @param elements - The list of existing responsive elements already positioned on the canvas.
+ * @param device - The target device type (e.g., desktop, tablet, mobile) for which positions are calculated.
+ * @returns - A list of responsive elements with updated positions for the specified device.
+ */
+export declare function findResponsiveAvailablePositions(canvasWidth: number, newElements: VemResponsive[], elements: VemResponsive[], device: CanvasDevice): VemResponsive[];
+/**
+ * Adjusts the `colSpan` of a responsive element to fit within the specified canvas width and updates its position.
+ * @param element - The responsive element to adjust.
+ * @param canvasWidth - The width of the canvas in grid columns.
+ * @param canvasDevice - The target device type (e.g., desktop, tablet, mobile).
+ * @returns - The updated responsive element with an adjusted `colSpan`.
+ */
+export declare function calculateColSpan(element: VemResponsive, canvasWidth: number, canvasDevice: CanvasDevice): VemResponsive;
+export declare const getResponsiveGridElementsBottomLimit: (elements: VemResponsive[], device: CanvasDevice, rowGap: number) => number;
+/**
+ * Calculates the distances of elements from a reference point and returns a list of objects
+ * containing the calculated distance and the corresponding element.
+ * @param elements - An array of `VemResponsive` objects. Each object represents an element with
+ *                   a `position` property that contains responsive positions for various devices.
+ * @param device - The specific device type (key of `CanvasDevice`) to determine the responsive position.
+ * @param referencePoint - An object representing the reference point with `x` and `y` coordinates.
+ * @param referencePoint.x
+ * @param referencePoint.y
+ * @returns - An array of objects, where each object contains:
+ *            - `distance`: The squared Euclidean distance from the reference point.
+ *            - `element`: The corresponding `VemResponsive` object.
+ */
+export declare const calculateDistancesToReferencePoint: (elements: VemResponsive[], device: CanvasDevice, referencePoint: {
+    x: number;
+    y: number;
+}) => {
+    distance: number;
+    element: VemResponsive;
+}[];
+/**
+/**
+Sorts objects containing a `distance` and `element` by distance in ascending order.
+If two objects have the same distance, it resolves the tie by comparing the `colStart` property
+of their responsive positions for the `DESKTOP` device.
+ * @param a - An object containing:
+ *            - `distance`: The calculated distance from a reference point.
+ *            - `element`: A `VemResponsive` object with responsive position data.
+ * @param b - Another object with the same structure as `a`.
+ * @param a.element
+ * @param a.distance
+ * @param _device - The device type (of type `CanvasDevice`). Currently unused in this function.
+ * @param b.distance
+ * @param b.element
+ * @returns - A negative number if `a` should come before `b`,
+ *            a positive number if `a` should come after `b`,
+ *            or 0 if they have the same distance and `colStart` values.
+ */
+export declare const sortByDistanceInResponsiveFunction: (a: {
+    distance: number;
+    element: VemResponsive;
+}, b: {
+    distance: number;
+    element: VemResponsive;
+}, _device: CanvasDevice) => number;
+export declare const sortResponsiveElements: (elements: VemResponsive<unknown>[], sortByDevice?: CanvasDevice) => VemResponsive<unknown>[];