@odoo/o-spreadsheet 18.4.4 → 18.4.6

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -1057,16 +1057,21 @@
       "#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.
@@ -1325,6 +1330,12 @@
   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
@@ -1606,6 +1617,8 @@
       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({
@@ -1613,19 +1626,21 @@
               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) {
@@ -19625,7 +19640,7 @@ stores.inject(MyMetaStore, storeInstance);
               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();
           }
@@ -22761,6 +22776,7 @@ stores.inject(MyMetaStore, storeInstance);
               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
@@ -43816,7 +43832,7 @@ stores.inject(MyMetaStore, storeInstance);
           env.openSidePanel("DataValidationEditor", {
               rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
               onExit: () => {
-                  env.openSidePanel("DataValidation");
+                  env.replaceSidePanel("DataValidation", "DataValidationEditor");
               },
           });
       },
@@ -51844,16 +51860,16 @@ stores.inject(MyMetaStore, storeInstance);
               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 "";
@@ -52061,7 +52077,7 @@ stores.inject(MyMetaStore, storeInstance);
       icons = ICONS;
       iconSets = ICON_SETS;
       getTextDecoration = getTextDecoration;
-      colorNumberString = colorNumberString;
+      colorNumberToHex = colorNumberToHex;
       state;
       setup() {
           this.state = owl.useState({
@@ -52312,9 +52328,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 + ")"
@@ -52322,8 +52338,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
@@ -53636,11 +53652,15 @@ stores.inject(MyMetaStore, storeInstance);
           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) => ({
@@ -54102,7 +54122,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       openShowValuesAs() {
-          this.env.openSidePanel("PivotMeasureDisplayPanel", {
+          this.env.replaceSidePanel("PivotMeasureDisplayPanel", `pivot_key_${this.props.pivotId}`, {
               pivotId: this.props.pivotId,
               measure: this.props.measure,
           });
@@ -54362,7 +54382,7 @@ stores.inject(MyMetaStore, storeInstance);
           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)) {
@@ -57201,7 +57221,11 @@ stores.inject(MyMetaStore, storeInstance);
           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 };
@@ -57226,6 +57250,7 @@ stores.inject(MyMetaStore, storeInstance);
   class SidePanelStore extends SpreadsheetStore {
       mutators = [
           "open",
+          "replace",
           "toggle",
           "close",
           "changePanelSize",
@@ -57287,8 +57312,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
           }
@@ -57307,6 +57331,34 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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) {
@@ -57366,11 +57418,9 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -66546,9 +66596,9 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
@@ -66919,7 +66969,7 @@ stores.inject(MyMetaStore, storeInstance);
                   if (!computedDataBars[col])
                       computedDataBars[col] = [];
                   computedDataBars[col][row] = {
-                      color: colorNumberString(color),
+                      color: colorNumberToHex(color),
                       percentage: (cell.value * 100) / max,
                   };
               }
@@ -77764,9 +77814,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           if (!(xc in clickableCells[sheetId])) {
               const clickableCell = this.findClickableItem(position);
-              if (clickableCell) {
-                  clickableCells[sheetId][xc] = clickableCell;
-              }
+              clickableCells[sheetId][xc] = clickableCell;
           }
           return clickableCells[sheetId][xc];
       }
@@ -79936,7 +79984,6 @@ stores.inject(MyMetaStore, storeInstance);
     }
   }
 
-  .o-spreadsheet-topbar-wrapper,
   .o-spreadsheet-bottombar-wrapper {
     z-index: ${ComponentsImportance.ScrollBar + 1};
   }
@@ -80009,6 +80056,7 @@ stores.inject(MyMetaStore, storeInstance);
               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 }),
@@ -80051,7 +80099,6 @@ stores.inject(MyMetaStore, storeInstance);
               this.checkViewportSize();
               stores.on("store-updated", this, render);
               resizeObserver.observe(this.spreadsheetRef.el);
-              registerChartJSExtensions();
           });
           owl.onWillUnmount(() => {
               this.unbindModelEvents();
@@ -82584,7 +82631,7 @@ stores.inject(MyMetaStore, storeInstance);
         <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>
@@ -82612,7 +82659,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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.");
@@ -84671,9 +84718,9 @@ stores.inject(MyMetaStore, storeInstance);
   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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);