@qrvey/utils 1.18.0 → 1.18.1

package/README.md

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

package/dist/cjs/comparativeAnalysis/index.js

@@ -0,0 +1,467 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REFERENCE_COLUMN_MARKER = exports.DELTA_COLUMN_PREFIX = void 0;
+exports.formatDeltaColumnCaption = formatDeltaColumnCaption;
+exports.formatReferenceColumnCaption = formatReferenceColumnCaption;
+exports.resolveComparativeColumnCaption = resolveComparativeColumnCaption;
+exports.formatComparativePeriodCaption = formatComparativePeriodCaption;
+exports.formatDeltaDefaultCaption = formatDeltaDefaultCaption;
+exports.computeComparativeVirtualColumns = computeComparativeVirtualColumns;
+exports.expandColumnListWithComparativeColumns = expandColumnListWithComparativeColumns;
+exports.applyComparativeHeaderBorders = applyComparativeHeaderBorders;
+exports.mapOperatorToValidationType = mapOperatorToValidationType;
+exports.buildComparisonExpressionValue = buildComparisonExpressionValue;
+exports.buildComparativeChartComparison = buildComparativeChartComparison;
+exports.resolveDeltaDiffInfo = resolveDeltaDiffInfo;
+exports.computeDeltaCellContent = computeDeltaCellContent;
+const get_1 = require("../general/object/get");
+const format_1 = require("../format/format");
+exports.DELTA_COLUMN_PREFIX = "\u0394";
+exports.REFERENCE_COLUMN_MARKER = "\u25CF";
+function formatDeltaColumnCaption(caption) {
+    return `${exports.DELTA_COLUMN_PREFIX} ${caption}`;
+}
+function formatReferenceColumnCaption(caption) {
+    return `${exports.REFERENCE_COLUMN_MARKER} ${caption}`;
+}
+function resolveComparativeColumnCaption(chartModel, columnKey, allDatesText) {
+    const fallbackAllDates = allDatesText || "All dates";
+    const columnsList = chartModel?.chart?.fields?.columnsList ??
+        (0, get_1._get)(chartModel, "data.chart.fields.columnsList") ??
+        [];
+    const comparativeAnalisis = (0, get_1._get)(chartModel, "store.comparativeAnalisis") ??
+        chartModel?.v2?.comparativeAnalisis ??
+        (0, get_1._get)(chartModel, "data.v2.comparativeAnalisis") ??
+        {};
+    const suffixMatch = columnKey.match(/^(.+?)__(comp|delta(?:_(\d+))?)$/);
+    if (!suffixMatch) {
+        const col = columnsList.find((c) => c.data?.uniqueCode === columnKey) ??
+            columnsList.find((c) => c.dataField === columnKey);
+        return col?.label || col?.data?.text || columnKey;
+    }
+    const baseKey = suffixMatch[1];
+    const suffixType = suffixMatch[2];
+    const deltaIndexStr = suffixMatch[3];
+    const deltaIndex = deltaIndexStr ? parseInt(deltaIndexStr, 10) : 0;
+    const refCol = columnsList.find((c) => c.data?.uniqueCode === baseKey) ??
+        columnsList.find((c) => c.dataField === baseKey);
+    if (!refCol)
+        return columnKey;
+    const defaultName = refCol.data?.text ?? "";
+    const uniqueCode = refCol.data?.uniqueCode ?? "";
+    const refDataField = refCol.dataField ?? "";
+    const customLabels = (0, get_1._get)(comparativeAnalisis, "customColumnLabels") ?? {};
+    const dataFieldKey = refDataField
+        ? `${refDataField}__${suffixType}`
+        : columnKey;
+    if (suffixType === "comp") {
+        return (customLabels[dataFieldKey] ??
+            formatComparativePeriodCaption(comparativeAnalisis.compareTo, fallbackAllDates, defaultName));
+    }
+    const diffCols = comparativeAnalisis?.styles?.columnDiffs?.[uniqueCode] ?? [];
+    const diffCol = diffCols[deltaIndex];
+    const hasConfiguredDiffs = comparativeAnalisis?.styles?.columnDiffs?.[uniqueCode] != null;
+    const diffName = diffCol?.name?.trim() || null;
+    if (hasConfiguredDiffs) {
+        if (diffName)
+            return formatDeltaColumnCaption(diffName);
+        return formatDeltaDefaultCaption(comparativeAnalisis.referencePeriod, comparativeAnalisis.compareTo, fallbackAllDates, defaultName);
+    }
+    if (diffName)
+        return formatDeltaColumnCaption(diffName);
+    if (customLabels[dataFieldKey])
+        return formatDeltaColumnCaption(customLabels[dataFieldKey]);
+    return formatDeltaDefaultCaption(comparativeAnalisis.referencePeriod, comparativeAnalisis.compareTo, fallbackAllDates, defaultName);
+}
+function formatComparativePeriodCaption(period, allDatesText, colLabel = "") {
+    if (!period?.date1) {
+        return colLabel ? `${colLabel} - ${allDatesText}` : allDatesText;
+    }
+    const dateRange = period.date2
+        ? `${period.date1}-${period.date2}`
+        : period.date1;
+    return colLabel ? `${colLabel} - ${dateRange}` : dateRange;
+}
+function formatDeltaDefaultCaption(referencePeriod, compareTo, allDatesText, colLabel = "") {
+    const fmtPeriodFn = (p) => {
+        if (!p?.date1)
+            return allDatesText;
+        return p.date2 ? `${p.date1}-${p.date2}` : p.date1;
+    };
+    const ref = fmtPeriodFn(referencePeriod);
+    const cmp = fmtPeriodFn(compareTo);
+    const comparison = ref && cmp ? `${ref} vs ${cmp}` : ref || cmp;
+    const prefix = colLabel ? `${exports.DELTA_COLUMN_PREFIX} ${colLabel}` : exports.DELTA_COLUMN_PREFIX;
+    return comparison ? `${prefix} - ${comparison}` : prefix;
+}
+function computeComparativeVirtualColumns(isGrouped, myBus, chart, getChartColumns) {
+    if (!isGrouped)
+        return [];
+    const isActive = (0, get_1._get)(myBus, "store.comparativeAnalisis.enabled", (0, get_1._get)(chart, "data.v2.comparativeAnalisis.enabled")) === true;
+    const compareVisible = (0, get_1._get)(myBus, "store.comparativeAnalisis.compareVisible", (0, get_1._get)(chart, "data.v2.comparativeAnalisis.compareVisible", true));
+    if (!isActive || compareVisible === false)
+        return [];
+    const referenceColumnCodes = (0, get_1._get)(myBus, "store.comparativeAnalisis.referenceColumns", (0, get_1._get)(chart, "data.v2.comparativeAnalisis.referenceColumns", [])) || [];
+    if (!referenceColumnCodes.length)
+        return [];
+    const ca = (0, get_1._get)(myBus, "store.comparativeAnalisis") ??
+        (0, get_1._get)(chart, "data.v2.comparativeAnalisis") ??
+        {};
+    const columnList = getChartColumns();
+    const result = [];
+    columnList.forEach((col, i) => {
+        if (!referenceColumnCodes.includes(col.data?.uniqueCode))
+            return;
+        const uniqueCode = col.data?.uniqueCode;
+        const colDiffs = ca?.styles != null
+            ? (ca.styles.columnDiffs?.[uniqueCode] ?? [{ id: "default" }])
+            : [{ id: "default" }];
+        const extraDeltaDataFields = colDiffs
+            .slice(1)
+            .map((_, j) => `${col.dataField}__delta_${j + 1}`);
+        result.push({
+            originalDataField: col.dataField,
+            originalIndex: i,
+            compDataField: `${col.dataField}__comp`,
+            ...(colDiffs.length > 0
+                ? {
+                    deltaDataField: `${col.dataField}__delta`,
+                    extraDeltaDataFields: extraDeltaDataFields.length
+                        ? extraDeltaDataFields
+                        : undefined,
+                }
+                : {}),
+        });
+    });
+    return result;
+}
+function expandColumnListWithComparativeColumns(columnList, comparativeVirtualColumns, myBus, chart, allDatesText) {
+    if (!comparativeVirtualColumns?.length)
+        return columnList;
+    const comparativeData = (0, get_1._get)(myBus, "store.comparativeAnalisis", (0, get_1._get)(chart, "data.v2.comparativeAnalisis", {})) || {};
+    const fallbackAllDates = allDatesText || "All dates";
+    const result = [];
+    for (const col of columnList) {
+        const vc = comparativeVirtualColumns.find((v) => v.originalDataField === col.dataField);
+        if (!vc) {
+            result.push(col);
+        }
+        else {
+            const defaultName = col.data?.text ?? "";
+            const hasCustomLabel = typeof col.label === "string" &&
+                col.label.trim().length > 0 &&
+                col.label.trim() !== defaultName.trim();
+            const refLabel = hasCustomLabel
+                ? col.label
+                : formatComparativePeriodCaption(comparativeData.referencePeriod, fallbackAllDates, defaultName);
+            const customLabels = (0, get_1._get)(myBus, "store.comparativeAnalisis.customColumnLabels") ??
+                (0, get_1._get)(chart, "data.v2.comparativeAnalisis.customColumnLabels") ??
+                {};
+            const uniqueCode = col.data?.uniqueCode ?? "";
+            const diffCols = comparativeData?.styles != null
+                ? (comparativeData.styles.columnDiffs?.[uniqueCode] ?? [
+                    { id: "default", name: "" },
+                ])
+                : [{ id: "default", name: "" }];
+            const hasConfiguredDiffs = comparativeData?.styles?.columnDiffs?.[uniqueCode] != null;
+            const compLabel = customLabels[vc.compDataField] ??
+                formatComparativePeriodCaption(comparativeData.compareTo, fallbackAllDates, defaultName);
+            result.push({
+                ...col,
+                _comparativeLabel: refLabel,
+                _originalColIndex: vc.originalIndex,
+            });
+            result.push({
+                ...col,
+                dataField: vc.compDataField,
+                label: compLabel,
+                _isVirtualComparative: true,
+                _virtualType: "comp",
+                _originalDataField: vc.originalDataField,
+                _originalColIndex: vc.originalIndex,
+            });
+            if (vc.deltaDataField) {
+                const firstDiffName = diffCols[0]?.name?.trim() || "";
+                const resolvedFirstName = firstDiffName || null;
+                const deltaLabel = hasConfiguredDiffs
+                    ? (resolvedFirstName ??
+                        formatDeltaDefaultCaption(comparativeData.referencePeriod, comparativeData.compareTo, fallbackAllDates, defaultName))
+                    : (resolvedFirstName ??
+                        customLabels[vc.deltaDataField] ??
+                        formatDeltaDefaultCaption(comparativeData.referencePeriod, comparativeData.compareTo, fallbackAllDates, defaultName));
+                result.push({
+                    ...col,
+                    dataField: vc.deltaDataField,
+                    label: deltaLabel,
+                    _isVirtualComparative: true,
+                    _virtualType: "delta",
+                    _diffColStyleIndex: 0,
+                    _originalDataField: vc.originalDataField,
+                    _originalColIndex: vc.originalIndex,
+                });
+            }
+            (vc.extraDeltaDataFields ?? []).forEach((df, j) => {
+                const styleIndex = j + 1;
+                const extraDiffName = diffCols[styleIndex]?.name?.trim() || "";
+                const resolvedExtraName = extraDiffName || null;
+                const extraLabel = hasConfiguredDiffs
+                    ? (resolvedExtraName ??
+                        formatDeltaDefaultCaption(comparativeData.referencePeriod, comparativeData.compareTo, fallbackAllDates, defaultName))
+                    : (resolvedExtraName ??
+                        customLabels[df] ??
+                        formatDeltaDefaultCaption(comparativeData.referencePeriod, comparativeData.compareTo, fallbackAllDates, defaultName));
+                result.push({
+                    ...col,
+                    dataField: df,
+                    label: extraLabel,
+                    _isVirtualComparative: true,
+                    _virtualType: "delta",
+                    _diffColStyleIndex: styleIndex,
+                    _originalDataField: vc.originalDataField,
+                    _originalColIndex: vc.originalIndex,
+                });
+            });
+        }
+    }
+    return result;
+}
+function applyComparativeHeaderBorders(columns, myBus, chart) {
+    const tableBodyStyle = (0, get_1._get)(myBus, "store.stylesSettings.tableBodyStyle") ||
+        (0, get_1._get)(chart, "data.v2.stylesSettings.tableBodyStyle") ||
+        {};
+    const hasVerticalBorder = tableBodyStyle.verticalBorder === undefined ||
+        tableBodyStyle.verticalBorder === null
+        ? true
+        : tableBodyStyle.verticalBorder;
+    const borderColor = tableBodyStyle.borderColor || "#CACFD6";
+    return columns.map((col) => {
+        if (!col?.headerCellTemplate)
+            return col;
+        const origTemplate = col.headerCellTemplate;
+        return {
+            ...col,
+            headerCellTemplate: (columnHeader, cellInfo) => {
+                origTemplate(columnHeader, cellInfo);
+                if (col._comparativeLabel) {
+                    const titleEl = columnHeader.querySelector(".an-header-title-text");
+                    if (titleEl)
+                        titleEl.textContent = `${exports.REFERENCE_COLUMN_MARKER} ${col._comparativeLabel}`;
+                }
+                const totalCols = cellInfo.component?.columnCount?.() ?? 0;
+                if (hasVerticalBorder && cellInfo.columnIndex < totalCols - 1) {
+                    columnHeader.parentElement?.style.setProperty("border-right", `1px solid ${borderColor}`);
+                }
+                else {
+                    columnHeader.parentElement?.style.setProperty("border-right", "1px solid transparent");
+                }
+            },
+        };
+    });
+}
+function mapOperatorToValidationType(operatorLabel) {
+    if (!operatorLabel)
+        return "EQUAL";
+    switch (operatorLabel) {
+        case "EQUAL":
+            return "EQUAL";
+        case "DOES_NOT_EQUAL":
+            return "NOT_EQUAL";
+        case "BETWEEN_INCLUSIVE":
+        case "BETWEEN_EXCLUSIVE":
+        case "BETWEEN":
+        case "GREATER_THAN":
+        case "LESS_THAN":
+        case "GREATER_THAN_OR_EQUAL":
+        case "LESS_THAN_OR_EQUAL":
+        case "BEFORE":
+        case "AFTER":
+        case "BEFORE_OR_ON":
+        case "AFTER_OR_ON":
+            return "RANGE";
+        case "IS_NULL":
+            return "IS_EMPTY";
+        case "IS_NOT_NULL":
+            return "IS_NOT_EMPTY";
+        default:
+            return "EQUAL";
+    }
+}
+function buildComparisonExpressionValue(date1, date2, operatorLabel) {
+    switch (operatorLabel) {
+        case "EQUAL":
+        case "DOES_NOT_EQUAL":
+            return date1 ? [date1] : [];
+        case "BETWEEN_INCLUSIVE":
+            return date1 && date2 ? [{ gte: date1, lte: date2 }] : [];
+        case "BETWEEN_EXCLUSIVE":
+        case "BETWEEN":
+            return date1 && date2 ? [{ gt: date1, lt: date2 }] : [];
+        case "GREATER_THAN":
+        case "AFTER":
+            return date1 ? [{ gt: date1 }] : [];
+        case "GREATER_THAN_OR_EQUAL":
+        case "AFTER_OR_ON":
+            return date1 ? [{ gte: date1 }] : [];
+        case "LESS_THAN":
+        case "BEFORE":
+            return date1 ? [{ lt: date1 }] : [];
+        case "LESS_THAN_OR_EQUAL":
+        case "BEFORE_OR_ON":
+            return date1 ? [{ lte: date1 }] : [];
+        default:
+            return [];
+    }
+}
+function buildComparativeChartComparison(myBus, chart, groups) {
+    const comparativeData = (0, get_1._get)(myBus, "store.comparativeAnalisis", (0, get_1._get)(chart, "data.v2.comparativeAnalisis", {})) || {};
+    const { dateColumn, referencePeriod, compareTo } = comparativeData;
+    if (!dateColumn)
+        return undefined;
+    const dateGroup = groups.find((g) => g.data.id === dateColumn);
+    const qrveyid = dateGroup?.data?.qrveyid;
+    const questionType = dateGroup?.data?.type || "DATE";
+    const buildExpression = (periodData) => {
+        if (!periodData || !periodData.operator)
+            return null;
+        const operatorLabel = periodData.operator.label;
+        const isNullType = operatorLabel === "IS_NULL" || operatorLabel === "IS_NOT_NULL";
+        if (!isNullType && !periodData.date1)
+            return null;
+        const validationType = mapOperatorToValidationType(operatorLabel);
+        const expression = {
+            groupValue: "day",
+            questionid: dateColumn,
+            qrveyid,
+            questionType,
+            validationType,
+            enabled: true,
+        };
+        if (!isNullType) {
+            expression.value = buildComparisonExpressionValue(periodData.date1, periodData.date2, operatorLabel);
+        }
+        return expression;
+    };
+    return {
+        comparison: buildExpression(compareTo),
+        period: buildExpression(referencePeriod),
+    };
+}
+function resolveDeltaDiffInfo(dataField, comparativeVirtualColumns, getChartColumns) {
+    for (const vc of comparativeVirtualColumns) {
+        if (vc.deltaDataField === dataField) {
+            const chartCols = getChartColumns();
+            const refCol = chartCols.find((c) => c.dataField === vc.originalDataField);
+            return {
+                origUniqueCode: refCol?.data?.uniqueCode ?? "",
+                diffIndex: 0,
+            };
+        }
+        const extraIdx = (vc.extraDeltaDataFields ?? []).indexOf(dataField);
+        if (extraIdx !== -1) {
+            const chartCols = getChartColumns();
+            const refCol = chartCols.find((c) => c.dataField === vc.originalDataField);
+            return {
+                origUniqueCode: refCol?.data?.uniqueCode ?? "",
+                diffIndex: extraIdx + 1,
+            };
+        }
+    }
+    return { origUniqueCode: "", diffIndex: -1 };
+}
+function computeDeltaCellContent(comparativeAnalisis, columnKey, rawValue, options) {
+    const match = columnKey.match(/^(.+?)__delta(?:_(\d+))?$/);
+    if (!match)
+        return { text: String(rawValue ?? ""), color: "#1f3864" };
+    const uniqueCode = match[1];
+    const deltaIndex = match[2] ? parseInt(match[2], 10) : 0;
+    const styles = comparativeAnalisis?.styles ?? {};
+    const diffCols = styles?.columnDiffs?.[uniqueCode] ?? [];
+    const diffStyle = diffCols[deltaIndex] ?? diffCols[0] ?? null;
+    const gs = styles;
+    const neutralColor = gs.neutralColor ?? "#1f3864";
+    const positiveColor = gs.positiveColor ?? "#52c41a";
+    const negativeColor = gs.negativeColor ?? "#f5222d";
+    const positiveIs = diffStyle?.positiveIs ?? gs.positiveIs ?? "higher";
+    const delta = -rawValue;
+    if (typeof delta !== "number" || !isFinite(delta)) {
+        return { text: "", color: neutralColor };
+    }
+    const increased = delta > 0;
+    const decreased = delta < 0;
+    const neutral = delta === 0;
+    const isPositive = positiveIs === "higher" ? increased : decreased;
+    let color;
+    if (neutral) {
+        color = neutralColor;
+    }
+    else if (isPositive) {
+        color = positiveColor;
+    }
+    else {
+        color = negativeColor;
+    }
+    const defaultOrder = [
+        "showTrendIcon",
+        "showPercent",
+        "showValue",
+        "showABCLabels",
+    ];
+    const order = diffStyle?.displayOrder?.length
+        ? diffStyle.displayOrder
+        : defaultOrder;
+    const showTrendIcon = diffStyle?.showTrendIcon ?? false;
+    const showPercent = diffStyle?.showPercent ?? true;
+    const showValue = diffStyle?.showValue ?? false;
+    const showABC = diffStyle?.showABCLabels ?? false;
+    const parts = [];
+    for (const flag of order) {
+        if (flag === "showTrendIcon" && showTrendIcon) {
+            if (increased)
+                parts.push("\u25B2");
+            else if (decreased)
+                parts.push("\u25BC");
+        }
+        else if (flag === "showPercent" && showPercent) {
+            const origNum = options?.originalValue;
+            if (origNum != null &&
+                typeof origNum === "number" &&
+                isFinite(origNum) &&
+                origNum !== 0) {
+                const pct = (delta / origNum) * 100;
+                const sign = pct > 0 ? "+" : "";
+                parts.push(`${sign}${pct.toFixed(1)}%`);
+            }
+        }
+        else if (flag === "showValue" && showValue) {
+            let sign;
+            if (delta > 0) {
+                sign = "+";
+            }
+            else if (delta < 0) {
+                sign = "-";
+            }
+            else {
+                sign = "";
+            }
+            const formattedAbs = options?.format
+                ? (0, format_1.addFormat)(Math.abs(delta), options.format, options.locale)
+                : Math.abs(delta).toLocaleString();
+            parts.push(`${sign}${formattedAbs}`);
+        }
+        else if (flag === "showABCLabels" && showABC) {
+            let abcLabel;
+            if (neutral) {
+                abcLabel = diffStyle?.neutralLabel ?? "";
+            }
+            else if (isPositive) {
+                abcLabel = diffStyle?.positiveLabel ?? "";
+            }
+            else {
+                abcLabel = diffStyle?.negativeLabel ?? "";
+            }
+            if (abcLabel)
+                parts.push(abcLabel);
+        }
+    }
+    return { text: parts.join(" "), color };
+}

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,6 +20,11 @@ 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 { newElements, scopeElements } = (0, element_1.normalizeElements)(currentElements, device, interfaces_1.VemPositionType.FIXED);

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,
+];