@odoo/o-spreadsheet 18.4.4 → 18.4.5

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.5
+ * @date 2025-08-04T06:54:49.107Z
+ * @hash 358931f
  */
 
 '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) {
@@ -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
@@ -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;
@@ -66547,9 +66563,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 +66936,7 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
                 if (!computedDataBars[col])
                     computedDataBars[col] = [];
                 computedDataBars[col][row] = {
-                    color: colorNumberString(color),
+                    color: colorNumberToHex(color),
                     percentage: (cell.value * 100) / max,
                 };
             }
@@ -79937,7 +79953,6 @@ css /* scss */ `
     }
   }
 
-  .o-spreadsheet-topbar-wrapper,
   .o-spreadsheet-bottombar-wrapper {
     z-index: ${ComponentsImportance.ScrollBar + 1};
   }
@@ -80052,7 +80067,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 +82599,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 +82627,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 +84686,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.5";
+__info__.date = "2025-08-04T06:54:49.107Z";
+__info__.hash = "358931f";

package/dist/o-spreadsheet.esm.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.5
+ * @date 2025-08-04T06:54:49.107Z
+ * @hash 358931f
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -1056,16 +1056,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.
@@ -1324,6 +1329,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
@@ -1605,6 +1616,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({
@@ -1612,19 +1625,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) {
@@ -22760,6 +22775,7 @@ class ChartJsComponent extends Component {
             this.animationStore = useStore(ChartAnimationStore);
         }
         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
@@ -51843,16 +51859,16 @@ class ConditionalFormatPreview extends 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 "";
@@ -52060,7 +52076,7 @@ class ConditionalFormattingEditor extends Component {
     icons = ICONS;
     iconSets = ICON_SETS;
     getTextDecoration = getTextDecoration;
-    colorNumberString = colorNumberString;
+    colorNumberToHex = colorNumberToHex;
     state;
     setup() {
         this.state = useState({
@@ -52311,9 +52327,9 @@ class ConditionalFormattingEditor extends 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 + ")"
@@ -52321,8 +52337,8 @@ class ConditionalFormattingEditor extends 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;
@@ -66545,9 +66561,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);
@@ -66918,7 +66934,7 @@ class EvaluationConditionalFormatPlugin extends CoreViewPlugin {
                 if (!computedDataBars[col])
                     computedDataBars[col] = [];
                 computedDataBars[col][row] = {
-                    color: colorNumberString(color),
+                    color: colorNumberToHex(color),
                     percentage: (cell.value * 100) / max,
                 };
             }
@@ -79935,7 +79951,6 @@ css /* scss */ `
     }
   }
 
-  .o-spreadsheet-topbar-wrapper,
   .o-spreadsheet-bottombar-wrapper {
     z-index: ${ComponentsImportance.ScrollBar + 1};
   }
@@ -80050,7 +80065,6 @@ class Spreadsheet extends Component {
             this.checkViewportSize();
             stores.on("store-updated", this, render);
             resizeObserver.observe(this.spreadsheetRef.el);
-            registerChartJSExtensions();
         });
         onWillUnmount(() => {
             this.unbindModelEvents();
@@ -82583,7 +82597,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>
@@ -82611,7 +82625,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.");
@@ -84622,6 +84636,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.4.4";
-__info__.date = "2025-07-30T11:20:08.639Z";
-__info__.hash = "b14de14";
+__info__.version = "18.4.5";
+__info__.date = "2025-08-04T06:54:49.107Z";
+__info__.hash = "358931f";

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.5
+ * @date 2025-08-04T06:54:49.107Z
+ * @hash 358931f
  */
 
 (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) {
@@ -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
@@ -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;
@@ -66546,9 +66562,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 +66935,7 @@ stores.inject(MyMetaStore, storeInstance);
                   if (!computedDataBars[col])
                       computedDataBars[col] = [];
                   computedDataBars[col][row] = {
-                      color: colorNumberString(color),
+                      color: colorNumberToHex(color),
                       percentage: (cell.value * 100) / max,
                   };
               }
@@ -79936,7 +79952,6 @@ stores.inject(MyMetaStore, storeInstance);
     }
   }
 
-  .o-spreadsheet-topbar-wrapper,
   .o-spreadsheet-bottombar-wrapper {
     z-index: ${ComponentsImportance.ScrollBar + 1};
   }
@@ -80051,7 +80066,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 +82598,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 +82626,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 +84685,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.5";
+  __info__.date = "2025-08-04T06:54:49.107Z";
+  __info__.hash = "358931f";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);