@odoo/o-spreadsheet 18.4.4 → 18.4.6

package/dist/o-spreadsheet.cjs.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.4.4
- * @date 2025-07-30T11:20:08.639Z
- * @hash b14de14
+ * @version 18.4.6
+ * @date 2025-08-18T08:16:33.453Z
+ * @hash 9c7c143
  */
 
 'use strict';
@@ -1058,16 +1058,21 @@ const colors = [
     "#001f3f",
 ];
 /*
- * transform a color number (R * 256^2 + G * 256 + B) into classic hex6 value
+ * transform a color number (R * 256^2 + G * 256 + B) into classic hex (+alpha) value
  * */
-function colorNumberString(color) {
-    return toHex(color.toString(16).padStart(6, "0"));
+function colorNumberToHex(color, alpha = 1) {
+    const alphaHex = alpha !== 1
+        ? Math.round(alpha * 255)
+            .toString(16)
+            .padStart(2, "0")
+        : "";
+    return toHex(color.toString(16).padStart(6, "0")) + alphaHex;
 }
 function colorToNumber(color) {
     if (typeof color === "number") {
         return color;
     }
-    return Number.parseInt(toHex(color).slice(1), 16);
+    return Number.parseInt(toHex(color).slice(1, 7), 16);
 }
 /**
  * Converts any CSS color value to a standardized hex6 value.
@@ -1326,6 +1331,12 @@ function hslaToHex(hsla) {
 function hexToHSLA(hex) {
     return rgbaToHSLA(colorToRGBA(hex));
 }
+function colorOrNumberToRGBA(color) {
+    if (typeof color === "number") {
+        return colorToRGBA(colorNumberToHex(color));
+    }
+    return colorToRGBA(color);
+}
 /**
  * Will compare two color strings
  * A tolerance can be provided to account for small differences that could
@@ -1607,6 +1618,8 @@ function getColorScale(colorScalePoints) {
     const sortedColorScalePoints = [...colorScalePoints.sort((a, b) => a.value - b.value)];
     const thresholds = [];
     for (let i = 1; i < sortedColorScalePoints.length; i++) {
+        const minColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i - 1].color).a;
+        const maxColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i].color).a;
         const minColor = colorToNumber(sortedColorScalePoints[i - 1].color);
         const maxColor = colorToNumber(sortedColorScalePoints[i].color);
         thresholds.push({
@@ -1614,19 +1627,21 @@ function getColorScale(colorScalePoints) {
             max: sortedColorScalePoints[i].value,
             minColor,
             maxColor,
+            minColorAlpha: minColorAlpha,
+            maxColorAlpha: maxColorAlpha,
             colorDiff: computeColorDiffUnits(sortedColorScalePoints[i - 1].value, sortedColorScalePoints[i].value, minColor, maxColor),
         });
     }
     return (value) => {
         if (value < thresholds[0].min) {
-            return colorNumberString(thresholds[0].minColor);
+            return colorNumberToHex(thresholds[0].minColor, thresholds[0].minColorAlpha);
         }
         for (const threshold of thresholds) {
             if (value >= threshold.min && value <= threshold.max) {
-                return colorNumberString(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff));
+                return colorNumberToHex(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff), threshold.maxColorAlpha);
             }
         }
-        return colorNumberString(thresholds[thresholds.length - 1].maxColor);
+        return colorNumberToHex(thresholds[thresholds.length - 1].maxColor, thresholds[thresholds.length - 1].maxColorAlpha);
     };
 }
 function computeColorDiffUnits(minValue, maxValue, minColor, maxColor) {
@@ -19626,7 +19641,7 @@ const OFFSET = {
             right: startingCol + offsetWidth - 1,
             bottom: startingRow + offsetHeight - 1,
         };
-        const range = this.getters.getRangeFromZone(this.__originSheetId, dependencyZone);
+        const range = this.getters.getRangeFromZone(sheetId, dependencyZone);
         if (range.invalidXc || range.invalidSheetName) {
             return new InvalidReferenceError();
         }
@@ -22762,6 +22777,7 @@ class ChartJsComponent extends owl.Component {
             this.animationStore = useStore(ChartAnimationStore);
         }
         owl.onMounted(() => {
+            registerChartJSExtensions();
             const runtime = this.chartRuntime;
             this.currentRuntime = runtime;
             // Note: chartJS modify the runtime in place, so it's important to give it a copy
@@ -43817,7 +43833,7 @@ const insertDropdown = {
         env.openSidePanel("DataValidationEditor", {
             rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
             onExit: () => {
-                env.openSidePanel("DataValidation");
+                env.replaceSidePanel("DataValidation", "DataValidationEditor");
             },
         });
     },
@@ -51845,16 +51861,16 @@ class ConditionalFormatPreview extends owl.Component {
             return cssPropertiesToCss(cellStyleToCss(rule.style));
         }
         else if (rule.type === "ColorScaleRule") {
-            const minColor = colorNumberString(rule.minimum.color);
-            const midColor = rule.midpoint ? colorNumberString(rule.midpoint.color) : null;
-            const maxColor = colorNumberString(rule.maximum.color);
+            const minColor = colorNumberToHex(rule.minimum.color);
+            const midColor = rule.midpoint ? colorNumberToHex(rule.midpoint.color) : null;
+            const maxColor = colorNumberToHex(rule.maximum.color);
             const baseString = "background-image: linear-gradient(to right, ";
             return midColor
                 ? baseString + minColor + ", " + midColor + ", " + maxColor + ")"
                 : baseString + minColor + ", " + maxColor + ")";
         }
         else if (rule.type === "DataBarRule") {
-            const color = colorNumberString(rule.color);
+            const color = colorNumberToHex(rule.color);
             return `background-image: linear-gradient(to right, ${color} 50%, white 50%)`;
         }
         return "";
@@ -52062,7 +52078,7 @@ class ConditionalFormattingEditor extends owl.Component {
     icons = ICONS;
     iconSets = ICON_SETS;
     getTextDecoration = getTextDecoration;
-    colorNumberString = colorNumberString;
+    colorNumberToHex = colorNumberToHex;
     state;
     setup() {
         this.state = owl.useState({
@@ -52313,9 +52329,9 @@ class ConditionalFormattingEditor extends owl.Component {
     }
     getPreviewGradient() {
         const rule = this.state.rules.colorScale;
-        const minColor = colorNumberString(rule.minimum.color);
-        const midColor = colorNumberString(rule.midpoint?.color || DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
-        const maxColor = colorNumberString(rule.maximum.color);
+        const minColor = colorNumberToHex(rule.minimum.color);
+        const midColor = colorNumberToHex(rule.midpoint?.color || DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
+        const maxColor = colorNumberToHex(rule.maximum.color);
         const baseString = "background-image: linear-gradient(to right, ";
         return rule.midpoint === undefined
             ? baseString + minColor + ", " + maxColor + ")"
@@ -52323,8 +52339,8 @@ class ConditionalFormattingEditor extends owl.Component {
     }
     getThresholdColor(threshold) {
         return threshold
-            ? colorNumberString(threshold.color)
-            : colorNumberString(DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
+            ? colorNumberToHex(threshold.color)
+            : colorNumberToHex(DEFAULT_COLOR_SCALE_MIDPOINT_COLOR);
     }
     onMidpointChange(ev) {
         const type = ev.target.value;
@@ -53637,11 +53653,15 @@ class PivotMeasureDisplayPanel extends owl.Component {
         this.store = useLocalStore(PivotMeasureDisplayPanelStore, this.props.pivotId, this.props.measure);
     }
     onSave() {
-        this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+        this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+            pivotId: this.props.pivotId,
+        });
     }
     onCancel() {
         this.store.cancelMeasureDisplayEdition();
-        this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+        this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+            pivotId: this.props.pivotId,
+        });
     }
     get fieldChoices() {
         return this.store.fields.map((field) => ({
@@ -54103,7 +54123,7 @@ class PivotMeasureEditor extends owl.Component {
         });
     }
     openShowValuesAs() {
-        this.env.openSidePanel("PivotMeasureDisplayPanel", {
+        this.env.replaceSidePanel("PivotMeasureDisplayPanel", `pivot_key_${this.props.pivotId}`, {
             pivotId: this.props.pivotId,
             measure: this.props.measure,
         });
@@ -54363,7 +54383,7 @@ class PivotLayoutConfigurator extends owl.Component {
         this.props.onDimensionsUpdated(update);
     }
     getMeasureId(fieldName, aggregator) {
-        const baseId = fieldName + (aggregator ? `:${aggregator}` : "");
+        const baseId = fieldName.replaceAll("'", "") + (aggregator ? `:${aggregator}` : "");
         let id = baseId;
         let i = 2;
         while (this.props.definition.measures.some((m) => m.id === id)) {
@@ -57202,7 +57222,11 @@ sidePanelRegistry.add("PivotMeasureDisplayPanel", {
         try {
             // This will throw if the pivot or measure does not exist
             getters.getPivot(props.pivotId).getMeasure(props.measure.id);
-            return { isOpen: true, props, key: "pivot_measure_display" };
+            return {
+                isOpen: true,
+                props,
+                key: `pivot_measure_display_${props.pivotId}_${props.measure.id}`,
+            };
         }
         catch (e) {
             return { isOpen: false };
@@ -57227,6 +57251,7 @@ const MIN_SHEET_VIEW_WIDTH = 150;
 class SidePanelStore extends SpreadsheetStore {
     mutators = [
         "open",
+        "replace",
         "toggle",
         "close",
         "changePanelSize",
@@ -57288,8 +57313,7 @@ class SidePanelStore extends SpreadsheetStore {
         if (!state.isOpen) {
             return;
         }
-        const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
-        if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+        if (!this.mainPanel || !this.mainPanel.isPinned || this.mainPanelKey === state.key) {
             this._openPanel("mainPanel", newPanelInfo, state);
             return;
         }
@@ -57308,6 +57332,34 @@ class SidePanelStore extends SpreadsheetStore {
         }
         this._openPanel("secondaryPanel", newPanelInfo, state);
     }
+    replace(componentTag, currentPanelKey, initialPanelProps = {}) {
+        const newPanelInfo = { initialPanelProps, componentTag, size: DEFAULT_SIDE_PANEL_SIZE };
+        const state = this.computeState(newPanelInfo);
+        if (!state.isOpen) {
+            return;
+        }
+        const ensureMainPanelExpanded = () => {
+            if (this.mainPanel?.isCollapsed) {
+                this.toggleCollapsePanel("mainPanel");
+            }
+        };
+        // Close the current panel if the target panel is already open
+        const isMainPanel = this.mainPanelKey === state.key;
+        const isSecondaryPanel = this.secondaryPanelKey === state.key;
+        if (isMainPanel && this.secondaryPanel) {
+            this.close();
+            ensureMainPanelExpanded();
+            return;
+        }
+        if (isSecondaryPanel) {
+            this.closeMainPanel();
+            this.togglePinPanel();
+            ensureMainPanelExpanded();
+            return;
+        }
+        const targetPanel = this.mainPanelKey === currentPanelKey ? "mainPanel" : "secondaryPanel";
+        this._openPanel(targetPanel, newPanelInfo, state);
+    }
     _openPanel(panel, newPanel, state) {
         const currentPanel = this[panel];
         if (currentPanel && newPanel.componentTag !== currentPanel.componentTag) {
@@ -57367,11 +57419,9 @@ class SidePanelStore extends SpreadsheetStore {
         panelInfo.size = size;
     }
     resetPanelSize(panel) {
-        const panelInfo = this[panel];
-        if (!panelInfo) {
-            return;
+        if (this[panel]) {
+            this[panel].size = DEFAULT_SIDE_PANEL_SIZE;
         }
-        panelInfo.size = DEFAULT_SIDE_PANEL_SIZE;
     }
     togglePinPanel() {
         if (!this.mainPanel) {
@@ -66547,9 +66597,9 @@ class CustomColorsPlugin extends CoreViewPlugin {
                 formatColors.push(rule.style.fillColor);
             }
             else if (rule.type === "ColorScaleRule") {
-                formatColors.push(colorNumberString(rule.minimum.color));
-                formatColors.push(rule.midpoint ? colorNumberString(rule.midpoint.color) : undefined);
-                formatColors.push(colorNumberString(rule.maximum.color));
+                formatColors.push(colorNumberToHex(rule.minimum.color));
+                formatColors.push(rule.midpoint ? colorNumberToHex(rule.midpoint.color) : undefined);
+                formatColors.push(colorNumberToHex(rule.maximum.color));
             }
         }
         return formatColors.filter(isDefined);
@@ -66920,7 +66970,7 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
                 if (!computedDataBars[col])
                     computedDataBars[col] = [];
                 computedDataBars[col][row] = {
-                    color: colorNumberString(color),
+                    color: colorNumberToHex(color),
                     percentage: (cell.value * 100) / max,
                 };
             }
@@ -77765,9 +77815,7 @@ class ClickableCellsStore extends SpreadsheetStore {
         }
         if (!(xc in clickableCells[sheetId])) {
             const clickableCell = this.findClickableItem(position);
-            if (clickableCell) {
-                clickableCells[sheetId][xc] = clickableCell;
-            }
+            clickableCells[sheetId][xc] = clickableCell;
         }
         return clickableCells[sheetId][xc];
     }
@@ -79937,7 +79985,6 @@ css /* scss */ `
     }
   }
 
-  .o-spreadsheet-topbar-wrapper,
   .o-spreadsheet-bottombar-wrapper {
     z-index: ${ComponentsImportance.ScrollBar + 1};
   }
@@ -80010,6 +80057,7 @@ class Spreadsheet extends owl.Component {
             loadLocales: this.model.config.external.loadLocales,
             isDashboard: () => this.model.getters.isDashboard(),
             openSidePanel: this.sidePanel.open.bind(this.sidePanel),
+            replaceSidePanel: this.sidePanel.replace.bind(this.sidePanel),
             toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
             clipboard: this.env.clipboard || instantiateClipboard(),
             startCellEdition: (content) => this.composerFocusStore.focusActiveComposer({ content }),
@@ -80052,7 +80100,6 @@ class Spreadsheet extends owl.Component {
             this.checkViewportSize();
             stores.on("store-updated", this, render);
             resizeObserver.observe(this.spreadsheetRef.el);
-            registerChartJSExtensions();
         });
         owl.onWillUnmount(() => {
             this.unbindModelEvents();
@@ -82585,7 +82632,7 @@ function addDataBarRule(cf, rule) {
         <dataBar>
           <cfvo type="min" val="0"/>
           <cfvo type="max" val="100"/>
-          <color rgb="${toXlsxHexColor(colorNumberString(rule.color))}"/>
+          <color rgb="${toXlsxHexColor(colorNumberToHex(rule.color))}"/>
         </dataBar>
       </cfRule>
     </conditionalFormatting>
@@ -82613,7 +82660,7 @@ function addColorScaleRule(cf, rule) {
                 continue;
             }
             cfValueObject.push(thresholdAttributes(threshold, position));
-            colors.push([["rgb", toXlsxHexColor(colorNumberString(threshold.color))]]);
+            colors.push([["rgb", toXlsxHexColor(colorNumberToHex(threshold.color))]]);
         }
         if (!canExport) {
             console.warn("Conditional formats with formula rules are not supported at the moment. The rule is therefore skipped.");
@@ -84672,6 +84719,6 @@ exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
 
-__info__.version = "18.4.4";
-__info__.date = "2025-07-30T11:20:08.639Z";
-__info__.hash = "b14de14";
+__info__.version = "18.4.6";
+__info__.date = "2025-08-18T08:16:33.453Z";
+__info__.hash = "9c7c143";

package/dist/o-spreadsheet.d.ts

@@ -4294,6 +4294,7 @@ interface SpreadsheetChildEnv extends NotificationStoreMethods {
     imageProvider?: ImageProviderInterface;
     isDashboard: () => boolean;
     openSidePanel: (panel: string, panelProps?: any) => void;
+    replaceSidePanel: (panel: string, currentPanel: string, panelProps?: any) => void;
     toggleSidePanel: (panel: string, panelProps?: any) => void;
     clipboard: ClipboardInterface;
     startCellEdition: (content?: string) => void;
@@ -9139,7 +9140,7 @@ interface PanelInfo {
     isCollapsed?: boolean;
 }
 declare class SidePanelStore extends SpreadsheetStore {
-    mutators: readonly ["open", "toggle", "close", "changePanelSize", "resetPanelSize", "togglePinPanel", "closeMainPanel", "changeSpreadsheetWidth", "toggleCollapsePanel"];
+    mutators: readonly ["open", "replace", "toggle", "close", "changePanelSize", "resetPanelSize", "togglePinPanel", "closeMainPanel", "changeSpreadsheetWidth", "toggleCollapsePanel"];
     mainPanel: (PanelInfo & {
         isCollapsed?: boolean;
         isPinned?: boolean;
@@ -9161,6 +9162,7 @@ declare class SidePanelStore extends SpreadsheetStore {
     private getPanelProps;
     private getPanelKey;
     open(componentTag: string, initialPanelProps?: SidePanelComponentProps): void;
+    replace(componentTag: string, currentPanelKey: string, initialPanelProps?: SidePanelComponentProps): void;
     private _openPanel;
     toggle(componentTag: string, panelProps: SidePanelComponentProps): void;
     close(): void;