@qrvey/utils 1.18.0 → 1.18.2

package/dist/comparativeAnalysis/index.js

@@ -0,0 +1,457 @@
+import { _get } from "../general/object/get";
+import { addFormat } from "../format/format";
+export const DELTA_COLUMN_PREFIX = "\u0394";
+export const REFERENCE_COLUMN_MARKER = "\u25CF";
+export function formatDeltaColumnCaption(caption) {
+    return `${DELTA_COLUMN_PREFIX} ${caption}`;
+}
+export function formatReferenceColumnCaption(caption) {
+    return `${REFERENCE_COLUMN_MARKER} ${caption}`;
+}
+export function stripColumnMarker(caption) {
+    const markers = DELTA_COLUMN_PREFIX + REFERENCE_COLUMN_MARKER;
+    return caption
+        .replace(new RegExp(`^[${markers}]\\s*`), "")
+        .replace(new RegExp(`\\s*[${markers}]$`), "");
+}
+export function resolveComparativeColumnCaption(chartModel, columnKey, allDatesText) {
+    const fallbackAllDates = allDatesText || "All dates";
+    const columnsList = chartModel?.chart?.fields?.columnsList ??
+        _get(chartModel, "data.chart.fields.columnsList") ??
+        [];
+    const comparativeAnalisis = _get(chartModel, "store.comparativeAnalisis") ??
+        chartModel?.v2?.comparativeAnalisis ??
+        _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 = _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);
+}
+export 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;
+}
+export 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 ? `${DELTA_COLUMN_PREFIX} ${colLabel}` : DELTA_COLUMN_PREFIX;
+    return comparison ? `${prefix} - ${comparison}` : prefix;
+}
+export function computeComparativeVirtualColumns(isGrouped, myBus, chart, getChartColumns) {
+    if (!isGrouped)
+        return [];
+    const isActive = _get(myBus, "store.comparativeAnalisis.enabled", _get(chart, "data.v2.comparativeAnalisis.enabled")) === true;
+    const compareVisible = _get(myBus, "store.comparativeAnalisis.compareVisible", _get(chart, "data.v2.comparativeAnalisis.compareVisible", true));
+    if (!isActive || compareVisible === false)
+        return [];
+    const referenceColumnCodes = _get(myBus, "store.comparativeAnalisis.referenceColumns", _get(chart, "data.v2.comparativeAnalisis.referenceColumns", [])) || [];
+    if (!referenceColumnCodes.length)
+        return [];
+    const ca = _get(myBus, "store.comparativeAnalisis") ??
+        _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;
+}
+export function expandColumnListWithComparativeColumns(columnList, comparativeVirtualColumns, myBus, chart, allDatesText) {
+    if (!comparativeVirtualColumns?.length)
+        return columnList;
+    const comparativeData = _get(myBus, "store.comparativeAnalisis", _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 = _get(myBus, "store.comparativeAnalisis.customColumnLabels") ??
+                _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;
+}
+export function applyComparativeHeaderBorders(columns, myBus, chart) {
+    const tableBodyStyle = _get(myBus, "store.stylesSettings.tableBodyStyle") ||
+        _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 = `${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");
+                }
+            },
+        };
+    });
+}
+export 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";
+    }
+}
+export 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 [];
+    }
+}
+export function buildComparativeChartComparison(myBus, chart, groups) {
+    const comparativeData = _get(myBus, "store.comparativeAnalisis", _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),
+    };
+}
+export 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 };
+}
+export 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
+                ? 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/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;

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, 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,6 +14,10 @@ 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 { newElements, scopeElements } = normalizeElements(currentElements, device, VemPositionType.FIXED);

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>;