@odoo/o-spreadsheet 16.5.0-alpha.9 → 17.0.0

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 16.5.0-alpha.9
- * @date 2023-10-03T13:16:46.370Z
- * @hash c46de91
+ * @version 17.0.0
+ * @date 2023-10-27T06:53:09.229Z
+ * @hash c0a34c2
  */
 
 (function (exports, owl) {
@@ -131,6 +131,7 @@
   const GRID_BORDER_COLOR = "#E2E3E3";
   const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
   const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
+  const COMPOSER_ASSISTANT_COLOR = "#9B359B";
   // Color picker defaults as upper case HEX to match `toHex`helper
   const COLOR_PICKER_DEFAULTS = [
       "#000000",
@@ -1242,7 +1243,17 @@
   function isDateTime(str, locale) {
       return parseDateTime(str, locale) !== null;
   }
+  const CACHE = new Map();
   function parseDateTime(str, locale) {
+      if (!CACHE.has(locale)) {
+          CACHE.set(locale, new Map());
+      }
+      if (!CACHE.get(locale).has(str)) {
+          CACHE.get(locale).set(str, _parseDateTime(str, locale));
+      }
+      return CACHE.get(locale).get(str);
+  }
+  function _parseDateTime(str, locale) {
       str = str.trim();
       let time = null;
       const timeMatch = str.match(timeRegexp);
@@ -2048,6 +2059,7 @@
       CommandResult["InvalidDataValidationCriterionValue"] = "InvalidDataValidationCriterionValue";
       CommandResult["InvalidNumberOfCriterionValues"] = "InvalidNumberOfCriterionValues";
       CommandResult["BlockingValidationRule"] = "BlockingValidationRule";
+      CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   const DEFAULT_LOCALES = [
@@ -2100,7 +2112,7 @@
   const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
   function assert(condition, message) {
       if (!condition()) {
-          throw new Error(message);
+          throw new EvaluationError(CellErrorType.GenericError, message);
       }
   }
   // -----------------------------------------------------------------------------
@@ -2506,7 +2518,7 @@
   function visitMatchingRanges(args, cb, locale, isQuery = false) {
       const countArg = args.length;
       if (countArg % 2 === 1) {
-          throw new Error(_t(`Function [[FUNCTION_NAME]] expects criteria_range and criterion to be in pairs.`));
+          throw new Error(_t("Function [[FUNCTION_NAME]] expects criteria_range and criterion to be in pairs."));
       }
       const dimRow = args[0].length;
       const dimCol = args[0][0].length;
@@ -2516,7 +2528,7 @@
           if (!isMatrix(criteriaRange) ||
               criteriaRange.length !== dimRow ||
               criteriaRange[0].length !== dimCol) {
-              throw new Error(_t(`Function [[FUNCTION_NAME]] expects criteria_range to have the same dimension`));
+              throw new Error(_t("Function [[FUNCTION_NAME]] expects criteria_range to have the same dimension"));
           }
           const description = toString(args[i + 1]);
           predicates.push(getPredicate(description, isQuery, locale));
@@ -4062,8 +4074,9 @@
       }
       get zone() {
           const { left, top, bottom, right } = this._zone;
-          if (right !== undefined && bottom !== undefined)
-              return { left, top, right, bottom };
+          if (right !== undefined && bottom !== undefined) {
+              return this._zone;
+          }
           else if (bottom === undefined && right !== undefined) {
               return { right, top, left, bottom: this.getSheetSize(this.sheetId).numberOfRows - 1 };
           }
@@ -4488,6 +4501,69 @@
   function toLowerCase(str) {
       return str ? str.toLowerCase() : "";
   }
+  /**
+   * Extract the fontSize from a context font string
+   * @param font The (context) font string to parse
+   * @returns The fontSize in pixels
+   */
+  const pxRegex = /([0-9\.]*)px/;
+  function getContextFontSize(font) {
+      return Number(font.match(pxRegex)?.[1]);
+  }
+  function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10 //This value is defined to get a good looking stroke
+  ) {
+      context.fillText(text, position.x, position.y);
+      if (!underline && !strikethrough) {
+          return;
+      }
+      const measure = context.measureText(text);
+      const textWidth = measure.width;
+      const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+      const boxHeight = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+      let { x, y } = position;
+      let strikeY = y, underlineY = y;
+      switch (context.textAlign) {
+          case "center":
+              x -= textWidth / 2;
+              break;
+          case "right":
+              x -= textWidth;
+              break;
+      }
+      switch (context.textBaseline) {
+          case "top":
+              underlineY += boxHeight - 2 * strokeWidth;
+              strikeY += boxHeight - textHeight;
+              break;
+          case "middle":
+              underlineY += boxHeight / 2 - strokeWidth;
+              break;
+          case "alphabetic":
+              underlineY += 2 * strokeWidth;
+              strikeY -= textHeight / 2 - strokeWidth / 2;
+              break;
+          case "bottom":
+              underlineY = y;
+              strikeY -= textHeight / 2 - strokeWidth / 2;
+              break;
+      }
+      if (underline) {
+          context.lineWidth = strokeWidth;
+          context.strokeStyle = context.fillStyle;
+          context.beginPath();
+          context.moveTo(x, underlineY);
+          context.lineTo(x + textWidth, underlineY);
+          context.stroke();
+      }
+      if (strikethrough) {
+          context.lineWidth = strokeWidth;
+          context.strokeStyle = context.fillStyle;
+          context.beginPath();
+          context.moveTo(x, strikeY);
+          context.lineTo(x + textWidth, strikeY);
+          context.stroke();
+      }
+  }
 
   /*
    * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
@@ -4551,6 +4627,29 @@
       };
   }
 
+  function transformZone(zone, executed) {
+      if (executed.type === "REMOVE_COLUMNS_ROWS") {
+          return reduceZoneOnDeletion(zone, executed.dimension === "COL" ? "left" : "top", executed.elements);
+      }
+      if (executed.type === "ADD_COLUMNS_ROWS") {
+          return expandZoneOnInsertion(zone, executed.dimension === "COL" ? "left" : "top", executed.base, executed.position, executed.quantity);
+      }
+      return { ...zone };
+  }
+  function transformRangeData(range, executed) {
+      const deletedSheet = executed.type === "DELETE_SHEET" && executed.sheetId;
+      if ("sheetId" in executed && range._sheetId !== executed.sheetId) {
+          return range;
+      }
+      else {
+          const newZone = transformZone(range._zone, executed);
+          if (newZone && deletedSheet !== range._sheetId) {
+              return { ...range, _zone: newZone };
+          }
+      }
+      return undefined;
+  }
+
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
       canvas = owl.useRef("graphContainer");
@@ -4573,15 +4672,7 @@
               const runtime = this.chartRuntime;
               this.createChart(runtime.chartJsConfig);
           });
-          let previousRuntime = this.chartRuntime;
-          owl.onPatched(() => {
-              const chartRuntime = this.chartRuntime;
-              if (deepEquals(previousRuntime, chartRuntime)) {
-                  return;
-              }
-              this.updateChartJs(chartRuntime);
-              previousRuntime = chartRuntime;
-          });
+          owl.useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
       }
       createChart(chartData) {
           const canvas = this.canvas.el;
@@ -4618,145 +4709,606 @@
   };
 
   /**
-   * This file is largely inspired by owl 1.
-   * `css` tag has been removed from owl 2 without workaround to manage css.
-   * So, the solution was to import the behavior of owl 1 directly in our
-   * codebase, with one difference: the css is added to the sheet as soon as the
-   * css tag is executed. In owl 1, the css was added as soon as a Component was
-   * created for the first time.
+   * AbstractChart is the class from which every Chart should inherit.
+   * The role of this class is to maintain the state of each chart.
    */
-  const STYLESHEETS = {};
-  let nextId = 0;
+  class AbstractChart {
+      sheetId;
+      title;
+      getters;
+      constructor(definition, sheetId, getters) {
+          this.title = definition.title;
+          this.sheetId = sheetId;
+          this.getters = getters;
+      }
+      /**
+       * Validate the chart definition given as arguments. This function will be
+       * called from allowDispatch function
+       */
+      static validateChartDefinition(validator, definition) {
+          throw new Error("This method should be implemented by sub class");
+      }
+      /**
+       * Get a new chart definition transformed with the executed command. This
+       * functions will be called during operational transform process
+       */
+      static transformDefinition(definition, executed) {
+          throw new Error("This method should be implemented by sub class");
+      }
+      /**
+       * Get an empty definition based on the given context
+       */
+      static getDefinitionFromContextCreation(context) {
+          throw new Error("This method should be implemented by sub class");
+      }
+  }
+
   /**
-   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
-   * an inline stylesheet with just the following code:
-   * ```js
-   *     css`.component-a { color: red; }`;
-   * ```
+   * This file contains helpers that are common to different charts (mainly
+   * line, bar and pie charts)
    */
-  function css(strings, ...args) {
-      const name = `__sheet__${nextId++}`;
-      const value = String.raw(strings, ...args);
-      registerSheet(name, value);
-      activateSheet(name);
-      return name;
-  }
-  function processSheet(str) {
-      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-      const selectorStack = [];
-      const parts = [];
-      let rules = [];
-      function generateSelector(stackIndex, parentSelector) {
-          const parts = [];
-          for (const selector of selectorStack[stackIndex]) {
-              let part = (parentSelector && parentSelector + " " + selector) || selector;
-              if (part.includes("&")) {
-                  part = selector.replace(/&/g, parentSelector || "");
-              }
-              if (stackIndex < selectorStack.length - 1) {
-                  part = generateSelector(stackIndex + 1, part);
+  /**
+   * Adapt ranges of a chart which support DataSet (dataSets and LabelRange).
+   */
+  function updateChartRangesWithDataSets(getters, applyChange, chartDataSets, chartLabelRange) {
+      let isStale = false;
+      const dataSetsWithUndefined = [];
+      for (let index in chartDataSets) {
+          let ds = chartDataSets[index];
+          if (ds.labelCell) {
+              const labelCell = adaptChartRange(ds.labelCell, applyChange);
+              if (ds.labelCell !== labelCell) {
+                  isStale = true;
+                  ds = {
+                      ...ds,
+                      labelCell: labelCell,
+                  };
               }
-              parts.push(part);
           }
-          return parts.join(", ");
-      }
-      function generateRules() {
-          if (rules.length) {
-              parts.push(generateSelector(0) + " {");
-              parts.push(...rules);
-              parts.push("}");
-              rules = [];
+          const dataRange = adaptChartRange(ds.dataRange, applyChange);
+          if (dataRange === undefined ||
+              getters.getRangeString(dataRange, dataRange.sheetId) === INCORRECT_RANGE_STRING) {
+              isStale = true;
+              ds = undefined;
+          }
+          else if (dataRange !== ds.dataRange) {
+              isStale = true;
+              ds = {
+                  ...ds,
+                  dataRange,
+              };
           }
+          dataSetsWithUndefined[index] = ds;
       }
-      while (tokens.length) {
-          let token = tokens.shift();
-          if (token === "}") {
-              generateRules();
-              selectorStack.pop();
+      let labelRange = chartLabelRange;
+      const range = adaptChartRange(labelRange, applyChange);
+      if (range !== labelRange) {
+          isStale = true;
+          labelRange = range;
+      }
+      const dataSets = dataSetsWithUndefined.filter(isDefined$1);
+      return {
+          isStale,
+          dataSets,
+          labelRange,
+      };
+  }
+  /**
+   * Copy the dataSets given. All the ranges which are on sheetIdFrom will target
+   * sheetIdTo.
+   */
+  function copyDataSetsWithNewSheetId(sheetIdFrom, sheetIdTo, dataSets) {
+      return dataSets.map((ds) => {
+          return {
+              dataRange: copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.dataRange),
+              labelCell: ds.labelCell
+                  ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.labelCell)
+                  : undefined,
+          };
+      });
+  }
+  /**
+   * Copy a range. If the range is on the sheetIdFrom, the range will target
+   * sheetIdTo.
+   */
+  function copyLabelRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
+      return range ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) : undefined;
+  }
+  /**
+   * Adapt a single range of a chart
+   */
+  function adaptChartRange(range, applyChange) {
+      if (!range) {
+          return undefined;
+      }
+      const change = applyChange(range);
+      switch (change.changeType) {
+          case "NONE":
+              return range;
+          case "REMOVE":
+              return undefined;
+          default:
+              return change.range;
+      }
+  }
+  /**
+   * Create the dataSet objects from xcs
+   */
+  function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
+      const dataSets = [];
+      for (const sheetXC of dataSetsString) {
+          const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
+          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
+          if (invalidSheetName || invalidXc) {
+              continue;
           }
-          else {
-              if (tokens[0] === "{") {
-                  generateRules();
-                  selectorStack.push(token.split(/\s*,\s*/));
-                  tokens.shift();
+          // It's a rectangle. We treat all columns (arbitrary) as different data series.
+          if (zone.left !== zone.right && zone.top !== zone.bottom) {
+              if (zone.right === undefined) {
+                  // Should never happens because of the allowDispatch of charts, but just making sure
+                  continue;
               }
-              if (tokens[0] === ";") {
-                  rules.push("  " + token + ";");
+              for (let column = zone.left; column <= zone.right; column++) {
+                  const columnZone = {
+                      ...zone,
+                      left: column,
+                      right: column,
+                  };
+                  dataSets.push(createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
+                      ? {
+                          top: columnZone.top,
+                          bottom: columnZone.top,
+                          left: columnZone.left,
+                          right: columnZone.left,
+                      }
+                      : undefined));
+              }
+          }
+          else if (zone.left === zone.right && zone.top === zone.bottom) {
+              // A single cell. If it's only the title, the dataset is not added.
+              if (!dataSetsHaveTitle) {
+                  dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
               }
           }
+          else {
+              /* 1 row or 1 column */
+              dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
+                  ? {
+                      top: zone.top,
+                      bottom: zone.top,
+                      left: zone.left,
+                      right: zone.left,
+                  }
+                  : undefined));
+          }
       }
-      return parts.join("\n");
+      return dataSets;
   }
-  function registerSheet(id, css) {
-      const sheet = document.createElement("style");
-      sheet.textContent = processSheet(css);
-      STYLESHEETS[id] = sheet;
+  function createDataSet(getters, sheetId, fullZone, titleZone) {
+      if (fullZone.left !== fullZone.right && fullZone.top !== fullZone.bottom) {
+          throw new Error(`Zone should be a single column or row: ${zoneToXc(fullZone)}`);
+      }
+      if (titleZone) {
+          const dataXC = zoneToXc(fullZone);
+          const labelCellXC = zoneToXc(titleZone);
+          return {
+              labelCell: getters.getRangeFromSheetXC(sheetId, labelCellXC),
+              dataRange: getters.getRangeFromSheetXC(sheetId, dataXC),
+          };
+      }
+      else {
+          return {
+              labelCell: undefined,
+              dataRange: getters.getRangeFromSheetXC(sheetId, zoneToXc(fullZone)),
+          };
+      }
   }
-  function activateSheet(id) {
-      const sheet = STYLESHEETS[id];
-      sheet.setAttribute("component", id);
-      document.head.appendChild(sheet);
+  /**
+   * Transform a dataSet to a ExcelDataSet
+   */
+  function toExcelDataset(getters, ds) {
+      const labelZone = ds.labelCell?.zone;
+      let dataZone = ds.dataRange.zone;
+      if (labelZone) {
+          const { numberOfRows, numberOfCols } = zoneToDimension(dataZone);
+          if (numberOfRows === 1) {
+              dataZone = { ...dataZone, left: dataZone.left + 1 };
+          }
+          else if (numberOfCols === 1) {
+              dataZone = { ...dataZone, top: dataZone.top + 1 };
+          }
+      }
+      const dataRange = ds.dataRange.clone({ zone: dataZone });
+      return {
+          label: ds.labelCell ? getters.getRangeString(ds.labelCell, "forceSheetReference") : undefined,
+          range: getters.getRangeString(dataRange, "forceSheetReference"),
+      };
   }
-  function getTextDecoration({ strikethrough, underline, }) {
-      if (!strikethrough && !underline) {
-          return "none";
+  function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
+      if (!labelRange)
+          return undefined;
+      let zone = {
+          ...labelRange.zone,
+      };
+      if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
+          zone.top = zone.top + 1;
       }
-      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+      const range = labelRange.clone({ zone });
+      return getters.getRangeString(range, "forceSheetReference");
   }
   /**
-   * Convert the cell style to CSS properties.
+   * Transform a chart definition which supports dataSets (dataSets and LabelRange)
+   * with an executed command
    */
-  function cellStyleToCss(style) {
-      const attributes = cellTextStyleToCss(style);
-      if (!style)
-          return attributes;
-      if (style.fillColor) {
-          attributes["background"] = style.fillColor;
+  function transformChartDefinitionWithDataSetsWithZone(definition, executed) {
+      let labelRange;
+      if (definition.labelRange) {
+          const labelZone = transformZone(toUnboundedZone(definition.labelRange), executed);
+          labelRange = labelZone ? zoneToXc(labelZone) : undefined;
+      }
+      const dataSets = definition.dataSets
+          .map(toUnboundedZone)
+          .map((zone) => transformZone(zone, executed))
+          .filter(isDefined$1)
+          .map(zoneToXc);
+      return {
+          ...definition,
+          labelRange,
+          dataSets,
+      };
+  }
+  const GraphColors = [
+      // the same colors as those used in odoo reporting
+      "rgb(31,119,180)",
+      "rgb(255,127,14)",
+      "rgb(174,199,232)",
+      "rgb(255,187,120)",
+      "rgb(44,160,44)",
+      "rgb(152,223,138)",
+      "rgb(214,39,40)",
+      "rgb(255,152,150)",
+      "rgb(148,103,189)",
+      "rgb(197,176,213)",
+      "rgb(140,86,75)",
+      "rgb(196,156,148)",
+      "rgb(227,119,194)",
+      "rgb(247,182,210)",
+      "rgb(127,127,127)",
+      "rgb(199,199,199)",
+      "rgb(188,189,34)",
+      "rgb(219,219,141)",
+      "rgb(23,190,207)",
+      "rgb(158,218,229)",
+  ];
+  class ChartColors {
+      graphColorIndex = 0;
+      next() {
+          return GraphColors[this.graphColorIndex++ % GraphColors.length];
       }
-      return attributes;
   }
   /**
-   * Convert the cell text style to CSS properties.
+   * Choose a font color based on a background color.
+   * The font is white with a dark background.
    */
-  function cellTextStyleToCss(style) {
-      const attributes = {};
-      if (!style)
-          return attributes;
-      if (style.bold) {
-          attributes["font-weight"] = "bold";
+  function chartFontColor(backgroundColor) {
+      if (!backgroundColor) {
+          return "#000000";
       }
-      if (style.italic) {
-          attributes["font-style"] = "italic";
+      return relativeLuminance(backgroundColor) < 0.3 ? "#FFFFFF" : "#000000";
+  }
+  function checkDataset(definition) {
+      if (definition.dataSets) {
+          const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range)) !== undefined;
+          if (invalidRanges) {
+              return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
+          }
+          const zones = definition.dataSets.map(toUnboundedZone);
+          if (zones.some((zone) => zone.top !== zone.bottom && isFullRow(zone))) {
+              return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
+          }
       }
-      if (style.strikethrough || style.underline) {
-          let decoration = style.strikethrough ? "line-through" : "";
-          decoration = style.underline ? decoration + " underline" : decoration;
-          attributes["text-decoration"] = decoration;
+      return "Success" /* CommandResult.Success */;
+  }
+  function checkLabelRange(definition) {
+      if (definition.labelRange) {
+          const invalidLabels = !rangeReference.test(definition.labelRange || "");
+          if (invalidLabels) {
+              return "InvalidLabelRange" /* CommandResult.InvalidLabelRange */;
+          }
       }
-      if (style.textColor) {
-          attributes["color"] = style.textColor;
+      return "Success" /* CommandResult.Success */;
+  }
+  function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
+      if (!dataSetsHaveTitle)
+          return false;
+      if (!labelRange)
+          return false;
+      if (!dataset)
+          return true;
+      const datasetLength = getZoneArea(dataset.dataRange.zone);
+      const labelLength = getZoneArea(labelRange.zone);
+      if (labelLength < datasetLength) {
+          return false;
       }
-      return attributes;
+      return true;
   }
-  /**
-   * Transform CSS properties into a CSS string.
-   */
-  function cssPropertiesToCss(attributes) {
-      const str = Object.entries(attributes)
-          .filter(([attName, attValue]) => attValue !== undefined)
-          .map(([attName, attValue]) => `${attName}:${attValue};`)
-          .join(" ");
-      return str;
+  // ---------------------------------------------------------------------------
+  // Scorecard
+  // ---------------------------------------------------------------------------
+  function getBaselineText(baseline, keyValue, baselineMode, locale) {
+      if (!baseline) {
+          return "";
+      }
+      else if (baselineMode === "text" ||
+          keyValue?.type !== CellValueType.number ||
+          baseline.type !== CellValueType.number) {
+          return baseline.formattedValue;
+      }
+      else {
+          let diff = keyValue.value - baseline.value;
+          if (baselineMode === "percentage" && diff !== 0) {
+              diff = (diff / baseline.value) * 100;
+          }
+          if (baselineMode !== "percentage" && baseline.format) {
+              return formatValue(diff, { format: baseline.format, locale });
+          }
+          const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
+          return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
+      }
   }
-  function getElementMargins(el) {
-      const style = window.getComputedStyle(el);
-      const margins = {
-          top: parseInt(style.marginTop, 10) || 0,
-          bottom: parseInt(style.marginBottom, 10) || 0,
-          left: parseInt(style.marginLeft, 10) || 0,
-          right: parseInt(style.marginRight, 10) || 0,
+  function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
+      if (baselineMode === "text" ||
+          baseline?.type !== CellValueType.number ||
+          keyValue?.type !== CellValueType.number) {
+          return undefined;
+      }
+      const diff = keyValue.value - baseline.value;
+      if (diff > 0) {
+          return colorUp;
+      }
+      else if (diff < 0) {
+          return colorDown;
+      }
+      return undefined;
+  }
+  function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
+      if (baselineMode === "text" ||
+          baseline?.type !== CellValueType.number ||
+          keyValue?.type !== CellValueType.number) {
+          return "neutral";
+      }
+      const diff = keyValue.value - baseline.value;
+      if (diff > 0) {
+          return "up";
+      }
+      else if (diff < 0) {
+          return "down";
+      }
+      return "neutral";
+  }
+  function getChartPositionAtCenterOfViewport(getters, chartSize) {
+      const { x, y } = getters.getMainViewportCoordinates();
+      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+      const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
+      const position = {
+          x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
+          y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
+      }; // Position at the center of the scrollable viewport
+      return position;
+  }
+
+  function checkKeyValue(definition) {
+      return definition.keyValue && !rangeReference.test(definition.keyValue)
+          ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
+          : "Success" /* CommandResult.Success */;
+  }
+  function checkBaseline(definition) {
+      return definition.baseline && !rangeReference.test(definition.baseline)
+          ? "InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */
+          : "Success" /* CommandResult.Success */;
+  }
+  const arrowDownPath = new window.Path2D("M8.6 4.8a.5.5 0 0 1 0 .75l-3.9 3.9a.5 .5 0 0 1 -.75 0l-3.8 -3.9a.5 .5 0 0 1 0 -.75l.4-.4a.5.5 0 0 1 .75 0l2.3 2.4v-5.7c0-.25.25-.5.5-.5h.6c.25 0 .5.25.5.5v5.8l2.3 -2.4a.5.5 0 0 1 .75 0z");
+  const arrowUpPath = new window.Path2D("M8.7 5.5a.5.5 0 0 0 0-.75l-3.8-4a.5.5 0 0 0-.75 0l-3.8 4a.5.5 0 0 0 0 .75l.4.4a.5.5 0 0 0 .75 0l2.3-2.4v5.8c0 .25.25.5.5.5h.6c.25 0 .5-.25.5-.5v-5.8l2.2 2.4a.5.5 0 0 0 .75 0z");
+  let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
+      keyValue;
+      baseline;
+      baselineMode;
+      baselineDescr;
+      background;
+      baselineColorUp;
+      baselineColorDown;
+      fontColor;
+      type = "scorecard";
+      constructor(definition, sheetId, getters) {
+          super(definition, sheetId, getters);
+          this.keyValue = createRange(getters, sheetId, definition.keyValue);
+          this.baseline = createRange(getters, sheetId, definition.baseline);
+          this.baselineMode = definition.baselineMode;
+          this.baselineDescr = definition.baselineDescr;
+          this.background = definition.background;
+          this.baselineColorUp = definition.baselineColorUp;
+          this.baselineColorDown = definition.baselineColorDown;
+      }
+      static validateChartDefinition(validator, definition) {
+          return validator.checkValidations(definition, checkKeyValue, checkBaseline);
+      }
+      static getDefinitionFromContextCreation(context) {
+          return {
+              background: context.background,
+              type: "scorecard",
+              keyValue: context.range ? context.range[0] : undefined,
+              title: context.title || "",
+              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
+              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
+              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
+              baseline: context.auxiliaryRange || "",
+          };
+      }
+      static transformDefinition(definition, executed) {
+          let baselineZone;
+          let keyValueZone;
+          if (definition.baseline) {
+              baselineZone = transformZone(toUnboundedZone(definition.baseline), executed);
+          }
+          if (definition.keyValue) {
+              keyValueZone = transformZone(toUnboundedZone(definition.keyValue), executed);
+          }
+          return {
+              ...definition,
+              baseline: baselineZone ? zoneToXc(baselineZone) : undefined,
+              keyValue: keyValueZone ? zoneToXc(keyValueZone) : undefined,
+          };
+      }
+      copyForSheetId(sheetId) {
+          const baseline = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.baseline);
+          const keyValue = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.keyValue);
+          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, sheetId);
+          return new ScorecardChart(definition, sheetId, this.getters);
+      }
+      copyInSheetId(sheetId) {
+          const definition = this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue, sheetId);
+          return new ScorecardChart(definition, sheetId, this.getters);
+      }
+      getDefinition() {
+          return this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue);
+      }
+      getContextCreation() {
+          return {
+              background: this.background,
+              title: this.title,
+              range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
+              auxiliaryRange: this.baseline
+                  ? this.getters.getRangeString(this.baseline, this.sheetId)
+                  : undefined,
+          };
+      }
+      getDefinitionWithSpecificRanges(baseline, keyValue, targetSheetId) {
+          return {
+              baselineColorDown: this.baselineColorDown,
+              baselineColorUp: this.baselineColorUp,
+              baselineMode: this.baselineMode,
+              title: this.title,
+              type: "scorecard",
+              background: this.background,
+              baseline: baseline
+                  ? this.getters.getRangeString(baseline, targetSheetId || this.sheetId)
+                  : undefined,
+              baselineDescr: this.baselineDescr,
+              keyValue: keyValue
+                  ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
+                  : undefined,
+          };
+      }
+      getDefinitionForExcel() {
+          // This kind of graph is not exportable in Excel
+          return undefined;
+      }
+      updateRanges(applyChange) {
+          const baseline = adaptChartRange(this.baseline, applyChange);
+          const keyValue = adaptChartRange(this.keyValue, applyChange);
+          if (this.baseline === baseline && this.keyValue === keyValue) {
+              return this;
+          }
+          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue);
+          return new ScorecardChart(definition, this.sheetId, this.getters);
+      }
+  };
+  function drawScoreChart(structure, canvas) {
+      const ctx = canvas.getContext("2d");
+      canvas.width = structure.canvas.width;
+      canvas.height = structure.canvas.height;
+      ctx.fillStyle = structure.canvas.backgroundColor;
+      ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
+      if (structure.title) {
+          ctx.font = structure.title.style.font;
+          ctx.fillStyle = structure.title.style.color;
+          ctx.fillText(structure.title.text, structure.title.position.x, structure.title.position.y);
+      }
+      if (structure.baseline) {
+          ctx.font = structure.baseline.style.font;
+          ctx.fillStyle = structure.baseline.style.color;
+          drawDecoratedText(ctx, structure.baseline.text, structure.baseline.position, structure.baseline.style.underline, structure.baseline.style.strikethrough);
+      }
+      if (structure.baselineArrow && structure.baselineArrow.style.size > 0) {
+          ctx.save();
+          ctx.fillStyle = structure.baselineArrow.style.color;
+          ctx.translate(structure.baselineArrow.position.x, structure.baselineArrow.position.y);
+          // This ratio is computed according to the original svg size and the final size we want
+          const ratio = structure.baselineArrow.style.size / 10;
+          ctx.scale(ratio, ratio);
+          switch (structure.baselineArrow.direction) {
+              case "down": {
+                  ctx.fill(arrowDownPath);
+                  break;
+              }
+              case "up": {
+                  ctx.fill(arrowUpPath);
+                  break;
+              }
+          }
+          ctx.restore();
+      }
+      if (structure.baselineDescr) {
+          ctx.font = structure.baselineDescr.style.font;
+          ctx.fillStyle = structure.baselineDescr.style.color;
+          ctx.fillText(structure.baselineDescr.text, structure.baselineDescr.position.x, structure.baselineDescr.position.y);
+      }
+      if (structure.key) {
+          ctx.font = structure.key.style.font;
+          ctx.fillStyle = structure.key.style.color;
+          drawDecoratedText(ctx, structure.key.text, structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
+      }
+  }
+  function createScorecardChartRuntime(chart, getters) {
+      let keyValue = "";
+      let formattedKeyValue = "";
+      let keyValueCell;
+      if (chart.keyValue) {
+          const keyValuePosition = {
+              sheetId: chart.keyValue.sheetId,
+              col: chart.keyValue.zone.left,
+              row: chart.keyValue.zone.top,
+          };
+          keyValueCell = getters.getEvaluatedCell(keyValuePosition);
+          keyValue = String(keyValueCell.value);
+          formattedKeyValue = keyValueCell.formattedValue;
+      }
+      let baselineCell;
+      const baseline = chart.baseline;
+      if (baseline) {
+          const baselinePosition = {
+              sheetId: chart.baseline.sheetId,
+              col: chart.baseline.zone.left,
+              row: chart.baseline.zone.top,
+          };
+          baselineCell = getters.getEvaluatedCell(baselinePosition);
+      }
+      const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
+      const locale = getters.getLocale();
+      return {
+          title: _t(chart.title),
+          keyValue: formattedKeyValue || keyValue,
+          baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
+          baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
+          baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
+          baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
+          fontColor: chartFontColor(background),
+          background,
+          baselineStyle: chart.baselineMode !== "percentage" && baseline
+              ? getters.getCellStyle({
+                  sheetId: baseline.sheetId,
+                  col: baseline.zone.left,
+                  row: baseline.zone.top,
+              })
+              : undefined,
+          keyValueStyle: chart.keyValue
+              ? getters.getCellStyle({
+                  sheetId: chart.keyValue.sheetId,
+                  col: chart.keyValue.zone.left,
+                  row: chart.keyValue.zone.top,
+              })
+              : undefined,
       };
-      return margins;
   }
 
   /* Sizes of boxes containing the texts, in percentage of the Chart size */
@@ -4772,64 +5324,96 @@
    * Having a line heigh =1em (=font size) don't work, the font will overflow.
    */
   const LINE_HEIGHT = 1.2;
-  css /* scss */ `
-  div.o-scorecard {
-    font-family: ${DEFAULT_FONT};
-    user-select: none;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-
-    .o-scorecard-content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      justify-content: center;
-      text-align: center;
-    }
-
-    .o-title-text {
-      text-align: left;
-      height: ${LINE_HEIGHT + "em"};
-      line-height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .o-key-text {
-      line-height: ${LINE_HEIGHT + "em"};
-      height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .o-cf-icon {
-      display: inline-block;
-      width: 0.65em;
-      height: 1em;
-      line-height: 1em;
-      padding-bottom: 0.07em;
-      padding-right: 3px;
-    }
-
-    .o-baseline-text {
-      line-height: ${LINE_HEIGHT + "em"};
-      height: ${LINE_HEIGHT + "em"};
-      overflow: hidden;
-      white-space: nowrap;
-
-      .o-baseline-text-description {
-        white-space: pre;
-      }
-    }
+  function formatBaselineDescr(baselineDescr, baseline) {
+      const _baselineDescr = baselineDescr || "";
+      return baseline && _baselineDescr ? " " + _baselineDescr : _baselineDescr;
   }
-`;
-  let ScorecardChart$1 = class ScorecardChart extends owl.Component {
-      static template = "o-spreadsheet-ScorecardChart";
-      ctx = document.createElement("canvas").getContext("2d");
-      get runtime() {
-          return this.env.model.getters.getChartRuntime(this.props.figure.id);
+  function getDefaultContextFont(fontSize, bold = false, italic = false) {
+      const italicStr = italic ? "italic" : "";
+      const weight = bold ? "bold" : "";
+      return `${italicStr} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
+  }
+  function getScorecardConfiguration({ width, height }, runtime) {
+      const designer = new ScorecardChartConfigBuilder({ width, height }, runtime);
+      return designer.computeDesign();
+  }
+  class ScorecardChartConfigBuilder {
+      runtime;
+      context;
+      width;
+      height;
+      constructor({ width, height }, runtime) {
+          this.runtime = runtime;
+          const canvas = document.createElement("canvas");
+          this.width = canvas.width = width;
+          this.height = canvas.height = height;
+          this.context = canvas.getContext("2d");
+      }
+      computeDesign() {
+          const structure = {
+              canvas: {
+                  width: this.width,
+                  height: this.height,
+                  backgroundColor: this.backgroundColor,
+              },
+          };
+          const style = this.getTextStyles();
+          const { height: titleHeight } = this.getTextDimensions(this.title, style.title.font);
+          if (this.title) {
+              structure.title = {
+                  text: this.title,
+                  style: style.title,
+                  position: {
+                      x: this.chartPadding,
+                      y: this.chartPadding + titleHeight,
+                  },
+              };
+          }
+          const baselineArrowSize = style.baselineArrow?.size ?? 0;
+          const { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
+          const { width: baselineDescrWidth } = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font);
+          structure.baseline = {
+              text: this.baseline,
+              style: style.baselineValue,
+              position: {
+                  x: (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2,
+                  y: this.keyValue
+                      ? this.height - 2 * this.chartPadding
+                      : this.height - (this.height - titleHeight - baselineHeight) / 2 - this.chartPadding,
+              },
+          };
+          if (style.baselineArrow) {
+              structure.baselineArrow = {
+                  direction: this.baselineArrow,
+                  style: style.baselineArrow,
+                  position: {
+                      x: structure.baseline.position.x - baselineArrowSize,
+                      y: structure.baseline.position.y - (baselineHeight + baselineArrowSize) / 2,
+                  },
+              };
+          }
+          if (this.baselineDescr) {
+              structure.baselineDescr = {
+                  text: this.baselineDescr,
+                  style: style.baselineDescr,
+                  position: {
+                      x: structure.baseline.position.x + baselineWidth,
+                      y: structure.baseline.position.y,
+                  },
+              };
+          }
+          const { height: keyHeight, width: keyWidth } = this.getTextDimensions(this.keyValue, style.keyValue.font);
+          if (this.keyValue) {
+              structure.key = {
+                  text: this.keyValue,
+                  style: style.keyValue,
+                  position: {
+                      x: (this.width - keyWidth) / 2,
+                      y: (this.height - baselineHeight + titleHeight + keyHeight) / 2 - this.chartPadding,
+                  },
+              };
+          }
+          return structure;
       }
       get title() {
           return this.runtime.title;
@@ -4841,87 +5425,73 @@
           return this.runtime.baselineDisplay;
       }
       get baselineDescr() {
-          const baselineDescr = this.runtime.baselineDescr || "";
-          return this.baseline && baselineDescr ? " " + baselineDescr : baselineDescr;
+          return formatBaselineDescr(this.runtime.baselineDescr, this.baseline);
       }
-      get baselineArrowDirection() {
+      get baselineArrow() {
           return this.runtime.baselineArrow;
       }
       get backgroundColor() {
           return this.runtime.background;
       }
-      get primaryFontColor() {
-          return this.runtime.fontColor;
-      }
       get secondaryFontColor() {
           return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
       }
-      get figure() {
-          return this.props.figure;
-      }
-      get chartStyle() {
-          return cssPropertiesToCss({
-              padding: `${this.chartPadding}px`,
-              background: this.backgroundColor,
-          });
-      }
-      get chartContentStyle() {
-          return cssPropertiesToCss({ height: `${this.getDrawableHeight()}px` });
-      }
       get chartPadding() {
-          return this.props.figure.width * CHART_PADDING_RATIO;
+          return this.width * CHART_PADDING_RATIO;
       }
-      translate(term) {
-          return _t(term);
+      getTextDimensions(text, font) {
+          this.context.font = font;
+          const measure = this.context.measureText(text);
+          return {
+              width: measure.width,
+              height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+          };
       }
       getTextStyles() {
           // If the widest text overflows horizontally, scale it down, and apply the same scaling factors to all the other fonts.
-          const maxLineWidth = this.props.figure.width * (1 - 2 * CHART_PADDING_RATIO);
+          const maxLineWidth = this.width * (1 - 2 * CHART_PADDING_RATIO);
           const widestElement = this.getWidestElement();
           const baseFontSize = widestElement.getElementMaxFontSize(this.getDrawableHeight(), this);
-          const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.ctx, this));
+          const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.context, this));
           let scalingFactor = fontSizeMatchingWidth / baseFontSize;
           // Fonts sizes in px
           const keyFontSize = new KeyValueElement(this.runtime.keyValueStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
           const baselineFontSize = new BaselineElement(this.runtime.baselineStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
           return {
-              titleStyle: this.getTextStyle({
-                  fontSize: TITLE_FONT_SIZE,
+              title: {
+                  font: getDefaultContextFont(TITLE_FONT_SIZE),
                   color: this.secondaryFontColor,
-              }),
-              keyStyle: this.getTextStyle({
-                  fontSize: keyFontSize,
-                  cellStyle: this.runtime.keyValueStyle,
-                  color: this.primaryFontColor,
-              }),
-              baselineStyle: this.getTextStyle({
-                  fontSize: baselineFontSize,
-              }),
-              baselineValueStyle: this.getTextStyle({
-                  fontSize: baselineFontSize,
-                  cellStyle: this.runtime.baselineStyle,
-                  color: this.runtime.baselineColor || this.secondaryFontColor,
-              }),
-              baselineDescrStyle: this.getTextStyle({
-                  fontSize: baselineFontSize * BASELINE_DESCR_FONT_RATIO,
+              },
+              keyValue: {
+                  color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
+                  font: getDefaultContextFont(keyFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
+                  strikethrough: this.runtime.keyValueStyle?.strikethrough,
+                  underline: this.runtime.keyValueStyle?.underline,
+              },
+              baselineValue: {
+                  font: getDefaultContextFont(baselineFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+                  strikethrough: this.runtime.baselineStyle?.strikethrough,
+                  underline: this.runtime.baselineStyle?.underline,
+                  color: this.runtime.baselineStyle?.textColor ||
+                      this.runtime.baselineColor ||
+                      this.secondaryFontColor,
+              },
+              baselineDescr: {
+                  font: getDefaultContextFont(baselineFontSize * BASELINE_DESCR_FONT_RATIO),
                   color: this.secondaryFontColor,
-              }),
+              },
+              baselineArrow: this.baselineArrow === "neutral"
+                  ? undefined
+                  : {
+                      size: this.keyValue ? 0.8 * baselineFontSize : 0,
+                      color: this.runtime.baselineColor || this.secondaryFontColor,
+                  },
           };
       }
-      /** Return an CSS style string corresponding to the given arguments */
-      getTextStyle(args) {
-          const cssAttributes = cellTextStyleToCss(args.cellStyle);
-          cssAttributes["font-size"] = `${args.fontSize}px`;
-          cssAttributes["display"] = "inline-block";
-          if (!cssAttributes["color"] && args.color) {
-              cssAttributes["color"] = args.color;
-          }
-          return cssPropertiesToCss(cssAttributes);
-      }
       /** Get the height of the chart minus all the vertical paddings */
       getDrawableHeight() {
           const verticalPadding = 2 * this.chartPadding;
-          let availableHeight = this.props.figure.height - verticalPadding;
+          let availableHeight = this.height - verticalPadding;
           availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
           return availableHeight;
       }
@@ -4929,39 +5499,39 @@
       getWidestElement() {
           const baseline = new BaselineElement(this.runtime.baselineStyle);
           const keyValue = new KeyValueElement(this.runtime.keyValueStyle);
-          return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.ctx, this) >
-              keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.ctx, this)
+          return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.context, this) >
+              keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.context, this)
               ? baseline
               : keyValue;
       }
-  };
+  }
   class ScorecardScalableElement {
       style;
       constructor(style = {}) {
           this.style = style;
       }
       measureTextWidth(ctx, text, fontSize) {
-          const italic = this.style.italic ? "italic" : "";
-          const weight = this.style.bold ? "bold" : "";
-          ctx.font = `${italic} ${weight} ${fontSize}px ${DEFAULT_FONT}`;
+          ctx.font = getDefaultContextFont(fontSize, this.style.bold, this.style.italic);
           return ctx.measureText(text).width;
       }
   }
   class BaselineElement extends ScorecardScalableElement {
       getElementWidth(fontSize, ctx, chart) {
-          if (!chart.runtime)
+          if (!chart.runtime) {
               return 0;
+          }
           const baselineStr = chart.baseline;
           // Put mock text to simulate the width of the up/down arrow
-          const largeText = chart.baselineArrowDirection !== "neutral" ? "A " + baselineStr : baselineStr;
+          const largeText = chart.baselineArrow !== "neutral" ? "A " + baselineStr : baselineStr;
           let textWidth = this.measureTextWidth(ctx, largeText, fontSize);
           // Baseline descr font size should be smaller than baseline font size
           textWidth += this.measureTextWidth(ctx, chart.baselineDescr, fontSize * BASELINE_DESCR_FONT_RATIO);
           return textWidth;
       }
       getElementMaxFontSize(availableHeight, chart) {
-          if (!chart.runtime)
+          if (!chart.runtime) {
               return 0;
+          }
           const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
           const maxHeight = haveBaseline ? BASELINE_BOX_HEIGHT_RATIO * availableHeight : 0;
           return maxHeight / LINE_HEIGHT;
@@ -4969,20 +5539,42 @@
   }
   class KeyValueElement extends ScorecardScalableElement {
       getElementWidth(fontSize, ctx, chart) {
-          if (!chart.runtime)
+          if (!chart.runtime) {
               return 0;
+          }
           const str = chart.keyValue || "";
           return this.measureTextWidth(ctx, str, fontSize);
       }
       getElementMaxFontSize(availableHeight, chart) {
-          if (!chart.runtime)
+          if (!chart.runtime) {
               return 0;
+          }
           const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
           const maxHeight = haveBaseline ? KEY_BOX_HEIGHT_RATIO * availableHeight : availableHeight;
           return maxHeight / LINE_HEIGHT;
       }
   }
-  ScorecardChart$1.props = {
+
+  class ScorecardChart extends owl.Component {
+      static template = "o-spreadsheet-ScorecardChart";
+      canvas = owl.useRef("chartContainer");
+      get runtime() {
+          return this.env.model.getters.getChartRuntime(this.props.figure.id);
+      }
+      setup() {
+          owl.useEffect(this.createChart.bind(this), () => {
+              const canvas = this.canvas.el;
+              const rect = canvas.getBoundingClientRect();
+              return [rect.width, rect.height, this.runtime, this.canvas.el];
+          });
+      }
+      createChart() {
+          const canvas = this.canvas.el;
+          const config = getScorecardConfiguration(canvas.getBoundingClientRect(), this.runtime);
+          drawScoreChart(config, canvas);
+      }
+  }
+  ScorecardChart.props = {
       figure: Object,
   };
 
@@ -5169,7 +5761,7 @@
           return textCell((value || "").toString(), localeFormat);
       }
       catch (error) {
-          return errorCell((value || "").toString(), new EvaluationError(CellErrorType.GenericError, error.message || DEFAULT_ERROR_MESSAGE));
+          return errorCell(new EvaluationError(CellErrorType.GenericError, error.message || DEFAULT_ERROR_MESSAGE));
       }
   }
   function textCell(value, localeFormat) {
@@ -5236,7 +5828,7 @@
           formattedValue,
       };
   }
-  function errorCell(content, error) {
+  function errorCell(error) {
       return {
           type: CellValueType.error,
           value: error.errorType,
@@ -5495,6 +6087,148 @@
       sequence: 40,
   });
 
+  /**
+   * This file is largely inspired by owl 1.
+   * `css` tag has been removed from owl 2 without workaround to manage css.
+   * So, the solution was to import the behavior of owl 1 directly in our
+   * codebase, with one difference: the css is added to the sheet as soon as the
+   * css tag is executed. In owl 1, the css was added as soon as a Component was
+   * created for the first time.
+   */
+  const STYLESHEETS = {};
+  let nextId = 0;
+  /**
+   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+   * an inline stylesheet with just the following code:
+   * ```js
+   *     css`.component-a { color: red; }`;
+   * ```
+   */
+  function css(strings, ...args) {
+      const name = `__sheet__${nextId++}`;
+      const value = String.raw(strings, ...args);
+      registerSheet(name, value);
+      activateSheet(name);
+      return name;
+  }
+  function processSheet(str) {
+      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+      const selectorStack = [];
+      const parts = [];
+      let rules = [];
+      function generateSelector(stackIndex, parentSelector) {
+          const parts = [];
+          for (const selector of selectorStack[stackIndex]) {
+              let part = (parentSelector && parentSelector + " " + selector) || selector;
+              if (part.includes("&")) {
+                  part = selector.replace(/&/g, parentSelector || "");
+              }
+              if (stackIndex < selectorStack.length - 1) {
+                  part = generateSelector(stackIndex + 1, part);
+              }
+              parts.push(part);
+          }
+          return parts.join(", ");
+      }
+      function generateRules() {
+          if (rules.length) {
+              parts.push(generateSelector(0) + " {");
+              parts.push(...rules);
+              parts.push("}");
+              rules = [];
+          }
+      }
+      while (tokens.length) {
+          let token = tokens.shift();
+          if (token === "}") {
+              generateRules();
+              selectorStack.pop();
+          }
+          else {
+              if (tokens[0] === "{") {
+                  generateRules();
+                  selectorStack.push(token.split(/\s*,\s*/));
+                  tokens.shift();
+              }
+              if (tokens[0] === ";") {
+                  rules.push("  " + token + ";");
+              }
+          }
+      }
+      return parts.join("\n");
+  }
+  function registerSheet(id, css) {
+      const sheet = document.createElement("style");
+      sheet.textContent = processSheet(css);
+      STYLESHEETS[id] = sheet;
+  }
+  function activateSheet(id) {
+      const sheet = STYLESHEETS[id];
+      sheet.setAttribute("component", id);
+      document.head.appendChild(sheet);
+  }
+  function getTextDecoration({ strikethrough, underline, }) {
+      if (!strikethrough && !underline) {
+          return "none";
+      }
+      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+  }
+  /**
+   * Convert the cell style to CSS properties.
+   */
+  function cellStyleToCss(style) {
+      const attributes = cellTextStyleToCss(style);
+      if (!style)
+          return attributes;
+      if (style.fillColor) {
+          attributes["background"] = style.fillColor;
+      }
+      return attributes;
+  }
+  /**
+   * Convert the cell text style to CSS properties.
+   */
+  function cellTextStyleToCss(style) {
+      const attributes = {};
+      if (!style)
+          return attributes;
+      if (style.bold) {
+          attributes["font-weight"] = "bold";
+      }
+      if (style.italic) {
+          attributes["font-style"] = "italic";
+      }
+      if (style.strikethrough || style.underline) {
+          let decoration = style.strikethrough ? "line-through" : "";
+          decoration = style.underline ? decoration + " underline" : decoration;
+          attributes["text-decoration"] = decoration;
+      }
+      if (style.textColor) {
+          attributes["color"] = style.textColor;
+      }
+      return attributes;
+  }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
+  function cssPropertiesToCss(attributes) {
+      const str = Object.entries(attributes)
+          .filter(([attName, attValue]) => attValue !== undefined)
+          .map(([attName, attValue]) => `${attName}:${attValue};`)
+          .join(" ");
+      return str;
+  }
+  function getElementMargins(el) {
+      const style = window.getComputedStyle(el);
+      const margins = {
+          top: parseInt(style.marginTop, 10) || 0,
+          bottom: parseInt(style.marginBottom, 10) || 0,
+          left: parseInt(style.marginLeft, 10) || 0,
+          right: parseInt(style.marginRight, 10) || 0,
+      };
+      return margins;
+  }
+
   const ERROR_TOOLTIP_MAX_HEIGHT = 80;
   const ERROR_TOOLTIP_WIDTH = 180;
   css /* scss */ `
@@ -6228,6 +6962,10 @@
       cursor: pointer;
       user-select: none;
 
+      .o-menu-item-name {
+        min-width: 40%;
+      }
+
       &.o-menu-root {
         display: flex;
         justify-content: space-between;
@@ -6846,6 +7584,18 @@
       }
       return result;
   }
+  /**
+   * Return the input if it's a scalar or the first element of the input if it's a matrix.
+   */
+  function toScalar(matrix) {
+      if (!isMatrix(matrix)) {
+          return matrix;
+      }
+      if (matrix.length !== 1 || matrix[0].length !== 1) {
+          throw new Error("toScalar: matrix should be a scalar or a 1x1 matrix");
+      }
+      return matrix[0][0];
+  }
 
   // -----------------------------------------------------------------------------
   // ARRAY_CONSTRAIN
@@ -7376,7 +8126,7 @@
   // FORMAT.LARGE.NUMBER
   // -----------------------------------------------------------------------------
   const FORMAT_LARGE_NUMBER = {
-      description: _t(`Apply a large number format`),
+      description: _t("Apply a large number format"),
       args: [
           arg("value (number)", _t("The number.")),
           arg("unit (string, optional)", _t("The formatting unit. Use 'k', 'm', or 'b' to force the unit")),
@@ -7556,7 +8306,7 @@
       compute: function (x, y) {
           const _x = toNumber(x, this.locale);
           const _y = toNumber(y, this.locale);
-          assert(() => _x !== 0 || _y !== 0, _t(`Function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."));
           return Math.atan2(_y, _x);
       },
       isExported: true,
@@ -7581,7 +8331,7 @@
   // CEILING
   // -----------------------------------------------------------------------------
   const CEILING = {
-      description: _t(`Rounds number up to nearest multiple of factor.`),
+      description: _t("Rounds number up to nearest multiple of factor."),
       args: [
           arg("value (number)", _t("The value to round up to the nearest integer multiple of factor.")),
           arg(`factor (number, default=${DEFAULT_FACTOR})`, _t("The number to whose multiples value will be rounded.")),
@@ -7600,7 +8350,7 @@
   // CEILING.MATH
   // -----------------------------------------------------------------------------
   const CEILING_MATH = {
-      description: _t(`Rounds number up to nearest multiple of factor.`),
+      description: _t("Rounds number up to nearest multiple of factor."),
       args: [
           arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
           arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded. The sign of significance will be ignored.")),
@@ -7630,7 +8380,7 @@
   // CEILING.PRECISE
   // -----------------------------------------------------------------------------
   const CEILING_PRECISE = {
-      description: _t(`Rounds number up to nearest multiple of factor.`),
+      description: _t("Rounds number up to nearest multiple of factor."),
       args: [
           arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
           arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7675,7 +8425,7 @@
       returns: ["NUMBER"],
       compute: function (angle) {
           const _angle = toNumber(angle, this.locale);
-          assert(() => _angle !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return 1 / Math.tan(_angle);
       },
       isExported: true,
@@ -7689,7 +8439,7 @@
       returns: ["NUMBER"],
       compute: function (value) {
           const _value = toNumber(value, this.locale);
-          assert(() => _value !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return 1 / Math.tanh(_value);
       },
       isExported: true,
@@ -7808,7 +8558,7 @@
       returns: ["NUMBER"],
       compute: function (angle) {
           const _angle = toNumber(angle, this.locale);
-          assert(() => _angle !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return 1 / Math.sin(_angle);
       },
       isExported: true,
@@ -7822,7 +8572,7 @@
       returns: ["NUMBER"],
       compute: function (value) {
           const _value = toNumber(value, this.locale);
-          assert(() => _value !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return 1 / Math.sinh(_value);
       },
       isExported: true,
@@ -7861,7 +8611,7 @@
   // DEGREES
   // -----------------------------------------------------------------------------
   const DEGREES = {
-      description: _t(`Converts an angle value in radians to degrees.`),
+      description: _t("Converts an angle value in radians to degrees."),
       args: [arg("angle (number)", _t("The angle to convert from radians to degrees."))],
       returns: ["NUMBER"],
       compute: function (angle) {
@@ -7873,7 +8623,7 @@
   // EXP
   // -----------------------------------------------------------------------------
   const EXP = {
-      description: _t(`Euler's number, e (~2.718) raised to a power.`),
+      description: _t("Euler's number, e (~2.718) raised to a power."),
       args: [arg("value (number)", _t("The exponent to raise e."))],
       returns: ["NUMBER"],
       compute: function (value) {
@@ -7885,7 +8635,7 @@
   // FLOOR
   // -----------------------------------------------------------------------------
   const FLOOR = {
-      description: _t(`Rounds number down to nearest multiple of factor.`),
+      description: _t("Rounds number down to nearest multiple of factor."),
       args: [
           arg("value (number)", _t("The value to round down to the nearest integer multiple of factor.")),
           arg(`factor (number, default=${DEFAULT_FACTOR})`, _t("The number to whose multiples value will be rounded.")),
@@ -7904,7 +8654,7 @@
   // FLOOR.MATH
   // -----------------------------------------------------------------------------
   const FLOOR_MATH = {
-      description: _t(`Rounds number down to nearest multiple of factor.`),
+      description: _t("Rounds number down to nearest multiple of factor."),
       args: [
           arg("number (number)", _t("The value to round down to the nearest integer multiple of significance.")),
           arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded. The sign of significance will be ignored.")),
@@ -7934,7 +8684,7 @@
   // FLOOR.PRECISE
   // -----------------------------------------------------------------------------
   const FLOOR_PRECISE = {
-      description: _t(`Rounds number down to nearest multiple of factor.`),
+      description: _t("Rounds number down to nearest multiple of factor."),
       args: [
           arg("number (number)", _t("The value to round down to the nearest integer multiple of significance.")),
           arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7950,7 +8700,7 @@
   // ISEVEN
   // -----------------------------------------------------------------------------
   const ISEVEN = {
-      description: _t(`Whether the provided value is even.`),
+      description: _t("Whether the provided value is even."),
       args: [arg("value (number)", _t("The value to be verified as even."))],
       returns: ["BOOLEAN"],
       compute: function (value) {
@@ -7963,7 +8713,7 @@
   // ISO.CEILING
   // -----------------------------------------------------------------------------
   const ISO_CEILING = {
-      description: _t(`Rounds number up to nearest multiple of factor.`),
+      description: _t("Rounds number up to nearest multiple of factor."),
       args: [
           arg("number (number)", _t("The value to round up to the nearest integer multiple of significance.")),
           arg(`significance (number, default=${DEFAULT_SIGNIFICANCE})`, _t("The number to whose multiples number will be rounded.")),
@@ -7979,7 +8729,7 @@
   // ISODD
   // -----------------------------------------------------------------------------
   const ISODD = {
-      description: _t(`Whether the provided value is even.`),
+      description: _t("Whether the provided value is even."),
       args: [arg("value (number)", _t("The value to be verified as even."))],
       returns: ["BOOLEAN"],
       compute: function (value) {
@@ -7992,7 +8742,7 @@
   // LN
   // -----------------------------------------------------------------------------
   const LN = {
-      description: _t(`The logarithm of a number, base e (euler's number).`),
+      description: _t("The logarithm of a number, base e (euler's number)."),
       args: [arg("value (number)", _t("The value for which to calculate the logarithm, base e."))],
       returns: ["NUMBER"],
       compute: function (value) {
@@ -8006,7 +8756,7 @@
   // MOD
   // -----------------------------------------------------------------------------
   const MOD = {
-      description: _t(`Modulo (remainder) operator.`),
+      description: _t("Modulo (remainder) operator."),
       args: [
           arg("dividend (number)", _t("The number to be divided to find the remainder.")),
           arg("divisor (number)", _t("The number to divide by.")),
@@ -8046,7 +8796,7 @@
   // ODD
   // -----------------------------------------------------------------------------
   const ODD = {
-      description: _t(`Rounds a number up to the nearest odd integer.`),
+      description: _t("Rounds a number up to the nearest odd integer."),
       args: [arg("value (number)", _t("The value to round to the next greatest odd number."))],
       returns: ["NUMBER"],
       computeFormat: (number) => number?.format,
@@ -8062,7 +8812,7 @@
   // PI
   // -----------------------------------------------------------------------------
   const PI = {
-      description: _t(`The number pi.`),
+      description: _t("The number pi."),
       args: [],
       returns: ["NUMBER"],
       compute: function () {
@@ -8074,7 +8824,7 @@
   // POWER
   // -----------------------------------------------------------------------------
   const POWER = {
-      description: _t(`A number raised to a power.`),
+      description: _t("A number raised to a power."),
       args: [
           arg("base (number)", _t("The number to raise to the exponent power.")),
           arg("exponent (number)", _t("The exponent to raise base to.")),
@@ -8239,7 +8989,7 @@
   // ROUNDDOWN
   // -----------------------------------------------------------------------------
   const ROUNDDOWN = {
-      description: _t(`Rounds down a number.`),
+      description: _t("Rounds down a number."),
       args: [
           arg("value (number)", _t("The value to round to places number of places, always rounding down.")),
           arg(`places (number, default=${DEFAULT_PLACES})`, _t("The number of decimal places to which to round.")),
@@ -8268,7 +9018,7 @@
   // ROUNDUP
   // -----------------------------------------------------------------------------
   const ROUNDUP = {
-      description: _t(`Rounds up a number.`),
+      description: _t("Rounds up a number."),
       args: [
           arg("value (number)", _t("The value to round to places number of places, always rounding up.")),
           arg(`places (number, default=${DEFAULT_PLACES})`, _t("The number of decimal places to which to round.")),
@@ -8570,7 +9320,7 @@
   function covariance(dataY, dataX, isSample) {
       const { flatDataX, flatDataY } = filterAndFlatData(dataY, dataX);
       const count = flatDataY.length;
-      assert(() => count !== 0 && (!isSample || count !== 1), _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
       let sumY = 0;
       let sumX = 0;
       for (let i = 0; i < count; i++) {
@@ -8593,14 +9343,14 @@
           count += 1;
           return acc + a;
       }, 0, locale);
-      assert(() => count !== 0 && (!isSample || count !== 1), _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+      assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
       const average = sum / count;
       return (reduceFunction(args, (acc, a) => acc + Math.pow(a - average, 2), 0, locale) /
           (count - (isSample ? 1 : 0)));
   }
   function centile(data, percent, isInclusive, locale) {
       const _percent = toNumber(percent, locale);
-      assert(() => (isInclusive ? 0 <= _percent && _percent <= 1 : 0 < _percent && _percent < 1), _t(`Function [[FUNCTION_NAME]] parameter 2 value is out of range.`));
+      assert(() => (isInclusive ? 0 <= _percent && _percent <= 1 : 0 < _percent && _percent < 1), _t("Function [[FUNCTION_NAME]] parameter 2 value is out of range."));
       let sortedArray = [];
       let index;
       let count = 0;
@@ -8611,10 +9361,10 @@
               count++;
           }
       });
-      assert(() => count !== 0, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+      assert(() => count !== 0, _t("[[FUNCTION_NAME]] has no valid input data."));
       if (!isInclusive) {
           // 2nd argument must be between 1/(n+1) and n/(n+1) with n the number of data
-          assert(() => 1 / (count + 1) <= _percent && _percent <= count / (count + 1), _t(`Function [[FUNCTION_NAME]] parameter 2 value is out of range.`));
+          assert(() => 1 / (count + 1) <= _percent && _percent <= count / (count + 1), _t("Function [[FUNCTION_NAME]] parameter 2 value is out of range."));
       }
       return percentile(sortedArray, _percent, isInclusive);
   }
@@ -8728,7 +9478,7 @@
   */
   function polynomialRegression(flatY, flatX, order, intercept) {
       assertSameNumberOfElements(flatX, flatY);
-      assert(() => order >= 1, _t(`Function [[FUNCTION_NAME]] A regression of order less than 1 cannot be possible.`));
+      assert(() => order >= 1, _t("Function [[FUNCTION_NAME]] A regression of order less than 1 cannot be possible."));
       const yMatrix = [flatY];
       const xMatrix = flatX.map((x) => range(0, order).map((i) => Math.pow(x, order - i)));
       if (intercept) {
@@ -8789,7 +9539,7 @@
               count += 1;
               return acc + a;
           }, 0, this.locale);
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           const average = sum / count;
           return reduceNumbers(values, (acc, a) => acc + Math.abs(average - a), 0, this.locale) / count;
       },
@@ -8799,7 +9549,7 @@
   // AVERAGE
   // -----------------------------------------------------------------------------
   const AVERAGE = {
-      description: _t(`Numerical average value in a dataset, ignoring text.`),
+      description: _t("Numerical average value in a dataset, ignoring text."),
       args: [
           arg("value1 (number, range<number>)", _t("The first value or range to consider when calculating the average value.")),
           arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when calculating the average value.")),
@@ -8814,7 +9564,7 @@
               count += 1;
               return acc + a;
           }, 0, this.locale);
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return sum / count;
       },
       isExported: true,
@@ -8822,10 +9572,10 @@
   // -----------------------------------------------------------------------------
   // AVERAGE.WEIGHTED
   // -----------------------------------------------------------------------------
-  const rangeError = _t(`[[FUNCTION_NAME]] has mismatched range sizes.`);
-  const negativeWeightError = _t(`[[FUNCTION_NAME]] expects the weight to be positive or equal to 0.`);
+  const rangeError = _t("[[FUNCTION_NAME]] has mismatched range sizes.");
+  const negativeWeightError = _t("[[FUNCTION_NAME]] expects the weight to be positive or equal to 0.");
   const AVERAGE_WEIGHTED = {
-      description: _t(`Weighted average.`),
+      description: _t("Weighted average."),
       args: [
           arg("values (number, range<number>)", _t("Values to average.")),
           arg("weights (number, range<number>)", _t("Weights for each corresponding value.")),
@@ -8841,7 +9591,7 @@
           let count = 0;
           let value;
           let weight;
-          assert(() => values.length % 2 === 0, _t(`Wrong number of Argument[]. Expected an even number of Argument[].`));
+          assert(() => values.length % 2 === 0, _t("Wrong number of Argument[]. Expected an even number of Argument[]."));
           for (let n = 0; n < values.length - 1; n += 2) {
               value = values[n];
               weight = values[n + 1];
@@ -8860,7 +9610,7 @@
                           let subValueIsNumber = typeof subValue === "number";
                           let subWeightIsNumber = typeof subWeight === "number";
                           // typeof subValue or subWeight can be 'number' or 'undefined'
-                          assert(() => subValueIsNumber === subWeightIsNumber, _t(`[[FUNCTION_NAME]] expects number values.`));
+                          assert(() => subValueIsNumber === subWeightIsNumber, _t("[[FUNCTION_NAME]] expects number values."));
                           if (subWeightIsNumber) {
                               assert(() => subWeight >= 0, negativeWeightError);
                               sum += subValue * subWeight;
@@ -8877,7 +9627,7 @@
                   count += weight;
               }
           }
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return sum / count;
       },
   };
@@ -8885,7 +9635,7 @@
   // AVERAGEA
   // -----------------------------------------------------------------------------
   const AVERAGEA = {
-      description: _t(`Numerical average value in a dataset.`),
+      description: _t("Numerical average value in a dataset."),
       args: [
           arg("value1 (number, range<number>)", _t("The first value or range to consider when calculating the average value.")),
           arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when calculating the average value.")),
@@ -8900,7 +9650,7 @@
               count += 1;
               return acc + a;
           }, 0, this.locale);
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return sum / count;
       },
       isExported: true,
@@ -8909,7 +9659,7 @@
   // AVERAGEIF
   // -----------------------------------------------------------------------------
   const AVERAGEIF = {
-      description: _t(`Average of values depending on criteria.`),
+      description: _t("Average of values depending on criteria."),
       args: [
           arg("criteria_range (number, range<number>)", _t("The range to check against criterion.")),
           arg("criterion (string)", _t("The pattern or test to apply to criteria_range.")),
@@ -8928,7 +9678,7 @@
                   sum += value;
               }
           }, this.locale);
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return sum / count;
       },
       isExported: true,
@@ -8937,7 +9687,7 @@
   // AVERAGEIFS
   // -----------------------------------------------------------------------------
   const AVERAGEIFS = {
-      description: _t(`Average of values depending on multiple criteria.`),
+      description: _t("Average of values depending on multiple criteria."),
       args: [
           arg("average_range (range)", _t("The range to average.")),
           arg("criteria_range1 (range)", _t("The range to check against criterion1.")),
@@ -8957,7 +9707,7 @@
                   sum += value;
               }
           }, this.locale);
-          assert(() => count !== 0, _t(`Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error.`));
+          assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
           return sum / count;
       },
       isExported: true,
@@ -8966,7 +9716,7 @@
   // COUNT
   // -----------------------------------------------------------------------------
   const COUNT = {
-      description: _t(`The number of numeric values in dataset.`),
+      description: _t("The number of numeric values in dataset."),
       args: [
           arg("value1 (number, range<number>)", _t("The first value or range to consider when counting.")),
           arg("value2 (number, range<number>, repeating)", _t("Additional values or ranges to consider when counting.")),
@@ -8998,7 +9748,7 @@
   // COUNTA
   // -----------------------------------------------------------------------------
   const COUNTA = {
-      description: _t(`The number of values in a dataset.`),
+      description: _t("The number of values in a dataset."),
       args: [
           arg("value1 (any, range)", _t("The first value or range to consider when counting.")),
           arg("value2 (any, range, repeating)", _t("Additional values or ranges to consider when counting.")),
@@ -9015,7 +9765,7 @@
   // Note: Unlike the VAR function which corresponds to the variance over a sample (VAR.S),
   // the COVAR function corresponds to the covariance over an entire population (COVAR.P)
   const COVAR = {
-      description: _t(`The covariance of a dataset.`),
+      description: _t("The covariance of a dataset."),
       args: [
           arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
           arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9030,7 +9780,7 @@
   // COVARIANCE.P
   // -----------------------------------------------------------------------------
   const COVARIANCE_P = {
-      description: _t(`The covariance of a dataset.`),
+      description: _t("The covariance of a dataset."),
       args: [
           arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
           arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9045,7 +9795,7 @@
   // COVARIANCE.S
   // -----------------------------------------------------------------------------
   const COVARIANCE_S = {
-      description: _t(`The sample covariance of a dataset.`),
+      description: _t("The sample covariance of a dataset."),
       args: [
           arg("data_y (any, range)", _t("The range representing the array or matrix of dependent data.")),
           arg("data_x (any, range)", _t("The range representing the array or matrix of independent data.")),
@@ -9133,7 +9883,7 @@
               }
           });
           const result = largests.shift();
-          assert(() => result !== undefined, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+          assert(() => result !== undefined, _t("[[FUNCTION_NAME]] has no valid input data."));
           assert(() => count >= _n, _t("Function [[FUNCTION_NAME]] parameter 2 value (%s) is out of range.", _n));
           return result;
       },
@@ -9559,6 +10309,42 @@
       },
       isExported: true,
   };
+  // RANK
+  // -----------------------------------------------------------------------------
+  const RANK = {
+      description: _t("Returns the rank of a specified value in a dataset."),
+      args: [
+          arg("value (number)", _t("The value whose rank will be determined.")),
+          arg("data (range)", _t("The range containing the dataset to consider.")),
+          arg("is_ascending (boolean, default=FALSE)", _t("Whether to consider the values in data in descending or ascending order.")),
+      ],
+      returns: ["ANY"],
+      compute: function (value, data, isAscending = false) {
+          const _isAscending = toBoolean(isAscending);
+          const _value = toNumber(value, this.locale);
+          let rank = 1;
+          let found = false;
+          for (const row of data) {
+              for (const cell of row) {
+                  if (typeof cell !== "number") {
+                      continue;
+                  }
+                  const _cell = toNumber(cell, this.locale);
+                  if (_cell === _value) {
+                      found = true;
+                  }
+                  else if (_cell > _value !== _isAscending) {
+                      rank++;
+                  }
+              }
+          }
+          if (!found) {
+              throw new NotAvailableError(_t("Value not found in the given data."));
+          }
+          return rank;
+      },
+      isExported: true,
+  };
   // -----------------------------------------------------------------------------
   // RSQ
   // -----------------------------------------------------------------------------
@@ -9619,7 +10405,7 @@
               }
           });
           const result = largests.pop();
-          assert(() => result !== undefined, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+          assert(() => result !== undefined, _t("[[FUNCTION_NAME]] has no valid input data."));
           assert(() => count >= _n, _t("Function [[FUNCTION_NAME]] parameter 2 value (%s) is out of range.", _n));
           return result;
       },
@@ -9903,6 +10689,7 @@
     QUARTILE: QUARTILE,
     QUARTILE_EXC: QUARTILE_EXC,
     QUARTILE_INC: QUARTILE_INC,
+    RANK: RANK,
     RSQ: RSQ,
     SLOPE: SLOPE,
     SMALL: SMALL,
@@ -10225,7 +11012,7 @@
           }
           const jsDate = new Date(_year, _month - 1, _day);
           const result = jsDateToRoundNumber(jsDate);
-          assert(() => result >= 0, _t(`The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900.`));
+          assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
           return result;
       },
       isExported: true,
@@ -10238,7 +11025,7 @@
       args: [
           arg("start_date (date)", _t("The start date to consider in the calculation. Must be a reference to a cell containing a DATE, a function returning a DATE type, or a number.")),
           arg("end_date (date)", _t("The end date to consider in the calculation. Must be a reference to a cell containing a DATE, a function returning a DATE type, or a number.")),
-          arg("unit (string)", _t(`A text abbreviation for unit of time. Accepted values are "Y" (the number of whole years between start_date and end_date), "M" (the number of whole months between start_date and end_date), "D" (the number of days between start_date and end_date), "MD" (the number of days between start_date and end_date after subtracting whole months), "YM" (the number of whole months between start_date and end_date after subtracting whole years), "YD" (the number of days between start_date and end_date, assuming start_date and end_date were no more than one year apart).`)),
+          arg("unit (string)", _t('A text abbreviation for unit of time. Accepted values are "Y" (the number of whole years between start_date and end_date), "M" (the number of whole months between start_date and end_date), "D" (the number of days between start_date and end_date), "MD" (the number of days between start_date and end_date after subtracting whole months), "YM" (the number of whole months between start_date and end_date after subtracting whole years), "YD" (the number of days between start_date and end_date, assuming start_date and end_date were no more than one year apart).')),
       ],
       returns: ["NUMBER"],
       compute: function (startDate, endDate, unit) {
@@ -10680,7 +11467,7 @@
           _hour += Math.floor(_minute / 60);
           _minute = (_minute % 60) + (_minute < 0 ? 60 : 0);
           _hour %= 24;
-          assert(() => _hour >= 0, _t(`The function [[FUNCTION_NAME]] result cannot be negative`));
+          assert(() => _hour >= 0, _t("The function [[FUNCTION_NAME]] result cannot be negative"));
           return _hour / 24 + _minute / (24 * 60) + _second / (24 * 60 * 60);
       },
       isExported: true,
@@ -11049,6 +11836,172 @@
     DELTA: DELTA
   });
 
+  const SORT_TYPES = [
+      CellValueType.number,
+      CellValueType.error,
+      CellValueType.text,
+      CellValueType.boolean,
+  ];
+  function cellsSortingCriterion(sortingOrder) {
+      const inverse = sortingOrder === "ascending" ? 1 : -1;
+      return (left, right) => {
+          if (left.type === CellValueType.empty) {
+              return right.type === CellValueType.empty ? 0 : 1;
+          }
+          else if (right.type === CellValueType.empty) {
+              return -1;
+          }
+          let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
+          if (typeOrder === 0) {
+              if (left.type === CellValueType.text || left.type === CellValueType.error) {
+                  typeOrder = left.value.localeCompare(right.value);
+              }
+              else {
+                  typeOrder = left.value - right.value;
+              }
+          }
+          return inverse * typeOrder;
+      };
+  }
+  function sortCells(cells, sortDirection, emptyCellAsZero) {
+      const cellsWithIndex = cells.map((cell, index) => ({
+          index,
+          type: cell.type,
+          value: cell.value,
+      }));
+      const cellsToSort = emptyCellAsZero
+          ? cellsWithIndex.map((cell) => cell.type === CellValueType.empty ? { ...cell, type: CellValueType.number, value: 0 } : cell)
+          : cellsWithIndex;
+      return cellsToSort.sort(cellsSortingCriterion(sortDirection));
+  }
+  function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
+      let result = DispatchResult.Success;
+      //several columns => bypass the contiguity check
+      let multiColumns = zone.right > zone.left;
+      if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
+          multiColumns = false;
+          let table;
+          for (let row = zone.top; row <= zone.bottom; row++) {
+              table = [];
+              for (let col = zone.left; col <= zone.right; col++) {
+                  let merge = env.model.getters.getMerge({ sheetId, col, row });
+                  if (merge && !table.includes(merge.id.toString())) {
+                      table.push(merge.id.toString());
+                  }
+              }
+              if (table.length >= 2) {
+                  multiColumns = true;
+                  break;
+              }
+          }
+      }
+      const { col, row } = anchor;
+      if (multiColumns) {
+          result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
+      }
+      else {
+          // check contiguity
+          const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
+          if (isEqual(contiguousZone, zone)) {
+              // merge as it is
+              result = env.model.dispatch("SORT_CELLS", {
+                  sheetId,
+                  col,
+                  row,
+                  zone,
+                  sortDirection,
+              });
+          }
+          else {
+              env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
+                  zone = contiguousZone;
+                  result = env.model.dispatch("SORT_CELLS", {
+                      sheetId,
+                      col,
+                      row,
+                      zone,
+                      sortDirection,
+                  });
+              }, () => {
+                  result = env.model.dispatch("SORT_CELLS", {
+                      sheetId,
+                      col,
+                      row,
+                      zone,
+                      sortDirection,
+                  });
+              });
+          }
+      }
+      if (result.isCancelledBecause("InvalidSortZone" /* CommandResult.InvalidSortZone */)) {
+          const { col, row } = anchor;
+          env.model.selection.selectZone({ cell: { col, row }, zone });
+          env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
+      }
+  }
+
+  function sortMatrix(matrix, locale, ...criteria) {
+      for (const [i, value] of criteria.entries()) {
+          assert(() => value !== undefined, _t("Value for parameter %d is missing, while the function [[FUNCTION_NAME]] expect a number or a range.", i + 1));
+      }
+      const sortingOrders = [];
+      const sortColumns = [];
+      const nRows = matrix.length;
+      for (let i = 0; i < criteria.length; i += 2) {
+          sortingOrders.push(toBoolean(toScalar(criteria[i + 1])?.value) ? "ascending" : "descending");
+          const sortColumn = criteria[i];
+          if (isMatrix(sortColumn) && (sortColumn.length > 1 || sortColumn[0].length > 1)) {
+              assert(() => sortColumn.length === 1 && sortColumn[0].length === nRows, _t("Wrong size for %s. Expected a range of size 1x%s. Got %sx%s.", `sort_column${i + 1}`, nRows, sortColumn.length, sortColumn[0].length));
+              sortColumns.push(sortColumn.flat().map((c) => c.value));
+          }
+          else {
+              const colIndex = toNumber(toScalar(sortColumn)?.value, locale);
+              if (colIndex < 1 || colIndex > matrix[0].length) {
+                  return matrix;
+              }
+              sortColumns.push(matrix.map((row) => row[colIndex - 1].value));
+          }
+      }
+      if (sortColumns.length === 0) {
+          for (let i = 0; i < matrix[0].length; i++) {
+              sortColumns.push(matrix.map((row) => row[i].value));
+              sortingOrders.push("ascending");
+          }
+      }
+      const sortingCriteria = {
+          descending: cellsSortingCriterion("descending"),
+          ascending: cellsSortingCriterion("ascending"),
+      };
+      const indexes = range(0, matrix.length);
+      indexes.sort((a, b) => {
+          for (const [i, sortColumn] of sortColumns.entries()) {
+              const left = sortColumn[a];
+              const right = sortColumn[b];
+              const leftCell = {
+                  value: left,
+                  type: left === null
+                      ? CellValueType.empty
+                      : typeof left === "string"
+                          ? CellValueType.text
+                          : typeof left,
+              };
+              const rightCell = {
+                  value: right,
+                  type: right === null
+                      ? CellValueType.empty
+                      : typeof right === "string"
+                          ? CellValueType.text
+                          : typeof right,
+              };
+              const result = sortingCriteria[sortingOrders[i]](leftCell, rightCell);
+              if (result !== 0) {
+                  return result;
+              }
+          }
+          return 0;
+      });
+      return indexes.map((i) => matrix[i]);
+  }
   // -----------------------------------------------------------------------------
   // FILTER
   // -----------------------------------------------------------------------------
@@ -11069,7 +12022,7 @@
           const _conditions = _conditionsMatrices.map((c) => c.flat());
           const mode = _conditionsMatrices[0].length === 1 ? "row" : "col";
           _array = mode === "row" ? transposeMatrix(_array) : _array;
-          assert(() => _conditions.every((cond) => cond.length === _array.length), _t(`FILTER has mismatched sizes on the range and conditions.`));
+          assert(() => _conditions.every((cond) => cond.length === _array.length), _t("FILTER has mismatched sizes on the range and conditions."));
           const result = [];
           for (let i = 0; i < _array.length; i++) {
               const row = _array[i];
@@ -11085,6 +12038,93 @@
       isExported: true,
   };
   // -----------------------------------------------------------------------------
+  // SORT
+  // -----------------------------------------------------------------------------
+  const SORT = {
+      description: _t("Sorts the rows of a given array or range by the values in one or more columns."),
+      args: [
+          arg("range (range)", _t("The data to be sorted.")),
+          arg("sort_column (any, range<number>, repeating)", _t("The index of the column in range or a range outside of range containing the values by which to sort.")),
+          arg("is_ascending (boolean, repeating)", _t("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order.")),
+      ],
+      returns: ["RANGE"],
+      computeValueAndFormat: function (range, ...sortingCriteria) {
+          const _range = transposeMatrix(range);
+          return transposeMatrix(sortMatrix(_range, this.locale, ...sortingCriteria));
+      },
+      isExported: true,
+  };
+  // -----------------------------------------------------------------------------
+  // SORTN
+  // -----------------------------------------------------------------------------
+  const SORTN = {
+      description: _t("Returns the first n items in a data set after performing a sort."),
+      args: [
+          arg("range (range)", _t("The data to be sorted.")),
+          arg("n (number, default=1)", _t("The number of items to return.")),
+          arg("display_ties_mode (number, default=0)", _t("A number representing the way to display ties.")),
+          arg("sort_column (number, range<number>, repeating)", _t("The index of the column in range or a range outside of range containing the values by which to sort.")),
+          arg("is_ascending (boolean, repeating)", _t("TRUE or FALSE indicating whether to sort sort_column in ascending order. FALSE sorts in descending order.")),
+      ],
+      returns: ["RANGE"],
+      computeValueAndFormat: function (range, n, displayTiesMode, ...sortingCriteria) {
+          const _n = toNumber(n?.value ?? 1, this.locale);
+          assert(() => _n >= 0, _t("Wrong value of 'n'. Expected a positive number. Got %s.", _n));
+          const _displayTiesMode = toNumber(displayTiesMode?.value ?? 0, this.locale);
+          assert(() => _displayTiesMode >= 0 && _displayTiesMode <= 3, _t("Wrong value of 'display_ties_mode'. Expected a positive number between 0 and 3. Got %s.", _displayTiesMode));
+          const sortedData = sortMatrix(transposeMatrix(range), this.locale, ...sortingCriteria);
+          const sameRows = (i, j) => JSON.stringify(sortedData[i].map((c) => c.value)) ===
+              JSON.stringify(sortedData[j].map((c) => c.value));
+          /*
+           * displayTiesMode determine how ties (equal values) are dealt with:
+           * 0 - ignore ties and show first n rows only
+           * 1 - show first n rows plus any additional ties with nth row
+           * 2 - show n rows but remove duplicates
+           * 3 - show first n unique rows and all duplicates of these rows
+           */
+          switch (_displayTiesMode) {
+              case 0:
+                  return transposeMatrix(sortedData.slice(0, _n));
+              case 1:
+                  for (let i = _n; i < sortedData.length; i++) {
+                      if (!sameRows(i, _n - 1)) {
+                          return transposeMatrix(sortedData.slice(0, i));
+                      }
+                  }
+                  return transposeMatrix(sortedData);
+              case 2: {
+                  const uniques = [sortedData[0]];
+                  for (let i = 1; i < sortedData.length; i++) {
+                      for (let j = 0; j < i; j++) {
+                          if (sameRows(i, j)) {
+                              break;
+                          }
+                          if (j === i - 1) {
+                              uniques.push(sortedData[i]);
+                          }
+                      }
+                  }
+                  return transposeMatrix(uniques.slice(0, _n));
+              }
+              case 3: {
+                  const uniques = [sortedData[0]];
+                  let counter = 1;
+                  for (let i = 1; i < sortedData.length; i++) {
+                      if (!sameRows(i, i - 1)) {
+                          counter++;
+                      }
+                      if (counter > _n) {
+                          break;
+                      }
+                      uniques.push(sortedData[i]);
+                  }
+                  return transposeMatrix(uniques);
+              }
+          }
+      },
+      isExported: true,
+  };
+  // -----------------------------------------------------------------------------
   // UNIQUE
   // -----------------------------------------------------------------------------
   const UNIQUE = {
@@ -11132,6 +12172,8 @@
   var filter = /*#__PURE__*/Object.freeze({
     __proto__: null,
     FILTER: FILTER,
+    SORT: SORT,
+    SORTN: SORTN,
     UNIQUE: UNIQUE
   });
 
@@ -11284,7 +12326,7 @@
       do {
           y = func(x);
           if (isNaN(y)) {
-              assert(() => count < maxIterations && nanFallback !== undefined, _t(`Function [[FUNCTION_NAME]] didn't find any result.`));
+              assert(() => count < maxIterations && nanFallback !== undefined, _t("Function [[FUNCTION_NAME]] didn't find any result."));
               count++;
               x = nanFallback(previousFallback);
               previousFallback = x;
@@ -11294,7 +12336,7 @@
           xDelta = Math.abs(newX - x);
           x = newX;
           yEqual0 = xDelta < epsMax || Math.abs(y) < epsMax;
-          assert(() => count < maxIterations, _t(`Function [[FUNCTION_NAME]] didn't find any result.`));
+          assert(() => count < maxIterations, _t("Function [[FUNCTION_NAME]] didn't find any result."));
           count++;
       } while (!yEqual0);
       return x;
@@ -13387,7 +14429,7 @@
               acc = acc && arg;
               return acc;
           });
-          assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+          assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
           return acc;
       },
       isExported: true,
@@ -13501,7 +14543,7 @@
       ],
       returns: ["ANY"],
       computeValueAndFormat: function (...values) {
-          assert(() => values.length % 2 === 0, _t(`Wrong number of arguments. Expected an even number of arguments.`));
+          assert(() => values.length % 2 === 0, _t("Wrong number of arguments. Expected an even number of arguments."));
           for (let n = 0; n < values.length - 1; n += 2) {
               if (toBoolean(values[n]()?.value)) {
                   const result = values[n + 1]();
@@ -13514,7 +14556,7 @@
                   return result;
               }
           }
-          throw new Error(_t(`No match.`));
+          throw new Error(_t("No match."));
       },
       isExported: true,
   };
@@ -13550,7 +14592,7 @@
               acc = acc || arg;
               return !acc;
           });
-          assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+          assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
           return acc;
       },
       isExported: true,
@@ -13585,7 +14627,7 @@
               acc = acc ? !arg : arg;
               return true; // no stop condition
           });
-          assert(() => foundBoolean, _t(`[[FUNCTION_NAME]] has no valid input data.`));
+          assert(() => foundBoolean, _t("[[FUNCTION_NAME]] has no valid input data."));
           return acc;
       },
       isExported: true,
@@ -13689,7 +14731,7 @@
   // HLOOKUP
   // -----------------------------------------------------------------------------
   const HLOOKUP = {
-      description: _t(`Horizontal lookup`),
+      description: _t("Horizontal lookup"),
       args: [
           arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
           arg("range (range)", _t("The range to consider for the search. The first row in the range is searched for the key specified in search_key.")),
@@ -13747,7 +14789,7 @@
   // LOOKUP
   // -----------------------------------------------------------------------------
   const LOOKUP = {
-      description: _t(`Look up a value.`),
+      description: _t("Look up a value."),
       args: [
           arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
           arg("search_array (range)", _t("One method of using this function is to provide a single sorted row or column search_array to look through for the search_key with a second argument result_range. The other way is to combine these two arguments into one search_array where the first row or column is searched and a value is returned from the last row or column in the array. If search_key is not found, a non-exact match may be returned.")),
@@ -13788,7 +14830,7 @@
   // -----------------------------------------------------------------------------
   const DEFAULT_SEARCH_TYPE = 1;
   const MATCH = {
-      description: _t(`Position of item in range that matches value.`),
+      description: _t("Position of item in range that matches value."),
       args: [
           arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
           arg("range (any, range)", _t("The one-dimensional array to be searched.")),
@@ -13856,7 +14898,7 @@
   // VLOOKUP
   // -----------------------------------------------------------------------------
   const VLOOKUP = {
-      description: _t(`Vertical lookup.`),
+      description: _t("Vertical lookup."),
       args: [
           arg("search_key (any)", _t("The value to search for. For example, 42, 'Cats', or I24.")),
           arg("range (any, range)", _t("The range to consider for the search. The first column in the range is searched for the key specified in search_key.")),
@@ -13882,7 +14924,7 @@
   // XLOOKUP
   // -----------------------------------------------------------------------------
   const XLOOKUP = {
-      description: _t(`Search a range for a match and return the corresponding item from a second range.`),
+      description: _t("Search a range for a match and return the corresponding item from a second range."),
       args: [
           arg("search_key (any)", _t("The value to search for.")),
           arg("lookup_range (any, range)", _t("The range to consider for the search. Should be a single column or a single row.")),
@@ -13946,7 +14988,7 @@
   // ADD
   // -----------------------------------------------------------------------------
   const ADD = {
-      description: _t(`Sum of two numbers.`),
+      description: _t("Sum of two numbers."),
       args: [
           arg("value1 (number)", _t("The first addend.")),
           arg("value2 (number)", _t("The second addend.")),
@@ -13961,7 +15003,7 @@
   // CONCAT
   // -----------------------------------------------------------------------------
   const CONCAT = {
-      description: _t(`Concatenation of two values.`),
+      description: _t("Concatenation of two values."),
       args: [
           arg("value1 (string)", _t("The value to which value2 will be appended.")),
           arg("value2 (string)", _t("The value to append to value1.")),
@@ -13976,7 +15018,7 @@
   // DIVIDE
   // -----------------------------------------------------------------------------
   const DIVIDE = {
-      description: _t(`One number divided by another.`),
+      description: _t("One number divided by another."),
       args: [
           arg("dividend (number)", _t("The number to be divided.")),
           arg("divisor (number)", _t("The number to divide by.")),
@@ -13997,7 +15039,7 @@
   }
   const getNeutral = { number: 0, string: "", boolean: false };
   const EQ = {
-      description: _t(`Equal.`),
+      description: _t("Equal."),
       args: [
           arg("value1 (any)", _t("The first value.")),
           arg("value2 (any)", _t("The value to test against value1 for equality.")),
@@ -14038,7 +15080,7 @@
       return cb(value1, value2);
   }
   const GT = {
-      description: _t(`Strictly greater than.`),
+      description: _t("Strictly greater than."),
       args: [
           arg("value1 (any)", _t("The value to test as being greater than value2.")),
           arg("value2 (any)", _t("The second value.")),
@@ -14054,7 +15096,7 @@
   // GTE
   // -----------------------------------------------------------------------------
   const GTE = {
-      description: _t(`Greater than or equal to.`),
+      description: _t("Greater than or equal to."),
       args: [
           arg("value1 (any)", _t("The value to test as being greater than or equal to value2.")),
           arg("value2 (any)", _t("The second value.")),
@@ -14070,7 +15112,7 @@
   // LT
   // -----------------------------------------------------------------------------
   const LT = {
-      description: _t(`Less than.`),
+      description: _t("Less than."),
       args: [
           arg("value1 (any)", _t("The value to test as being less than value2.")),
           arg("value2 (any)", _t("The second value.")),
@@ -14084,7 +15126,7 @@
   // LTE
   // -----------------------------------------------------------------------------
   const LTE = {
-      description: _t(`Less than or equal to.`),
+      description: _t("Less than or equal to."),
       args: [
           arg("value1 (any)", _t("The value to test as being less than or equal to value2.")),
           arg("value2 (any)", _t("The second value.")),
@@ -14098,7 +15140,7 @@
   // MINUS
   // -----------------------------------------------------------------------------
   const MINUS = {
-      description: _t(`Difference of two numbers.`),
+      description: _t("Difference of two numbers."),
       args: [
           arg("value1 (number)", _t("The minuend, or number to be subtracted from.")),
           arg("value2 (number)", _t("The subtrahend, or number to subtract from value1.")),
@@ -14113,7 +15155,7 @@
   // MULTIPLY
   // -----------------------------------------------------------------------------
   const MULTIPLY = {
-      description: _t(`Product of two numbers`),
+      description: _t("Product of two numbers"),
       args: [
           arg("factor1 (number)", _t("The first multiplicand.")),
           arg("factor2 (number)", _t("The second multiplicand.")),
@@ -14128,7 +15170,7 @@
   // NE
   // -----------------------------------------------------------------------------
   const NE = {
-      description: _t(`Not equal.`),
+      description: _t("Not equal."),
       args: [
           arg("value1 (any)", _t("The first value.")),
           arg("value2 (any)", _t("The value to test against value1 for inequality.")),
@@ -14142,7 +15184,7 @@
   // POW
   // -----------------------------------------------------------------------------
   const POW = {
-      description: _t(`A number raised to a power.`),
+      description: _t("A number raised to a power."),
       args: [
           arg("base (number)", _t("The number to raise to the exponent power.")),
           arg("exponent (number)", _t("The exponent to raise base to.")),
@@ -14156,7 +15198,7 @@
   // UMINUS
   // -----------------------------------------------------------------------------
   const UMINUS = {
-      description: _t(`A number with the sign reversed.`),
+      description: _t("A number with the sign reversed."),
       args: [
           arg("value (number)", _t("The number to have its sign reversed. Equivalently, the number to multiply by -1.")),
       ],
@@ -14170,7 +15212,7 @@
   // UNARY_PERCENT
   // -----------------------------------------------------------------------------
   const UNARY_PERCENT = {
-      description: _t(`Value interpreted as a percentage.`),
+      description: _t("Value interpreted as a percentage."),
       args: [arg("percentage (number)", _t("The value to interpret as a percentage."))],
       returns: ["NUMBER"],
       compute: function (percentage) {
@@ -14181,7 +15223,7 @@
   // UPLUS
   // -----------------------------------------------------------------------------
   const UPLUS = {
-      description: _t(`A specified number, unchanged.`),
+      description: _t("A specified number, unchanged."),
       args: [arg("value (any)", _t("The number to return."))],
       returns: ["ANY"],
       computeFormat: (value) => value?.format,
@@ -14292,7 +15334,7 @@
           const _searchFor = toString(searchFor);
           const _textToSearch = toString(textToSearch);
           const _startingAt = toNumber(startingAt, this.locale);
-          assert(() => _textToSearch !== "", _t(`The text_to_search must be non-empty.`));
+          assert(() => _textToSearch !== "", _t("The text_to_search must be non-empty."));
           assert(() => _startingAt >= 1, _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt.toString()));
           const result = _textToSearch.indexOf(_searchFor, _startingAt - 1);
           assert(() => result >= 0, _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor.toString(), _textToSearch));
@@ -14451,7 +15493,7 @@
           const _searchFor = toString(searchFor).toLowerCase();
           const _textToSearch = toString(textToSearch).toLowerCase();
           const _startingAt = toNumber(startingAt, this.locale);
-          assert(() => _textToSearch !== "", _t(`The text_to_search must be non-empty.`));
+          assert(() => _textToSearch !== "", _t("The text_to_search must be non-empty."));
           assert(() => _startingAt >= 1, _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt.toString()));
           const result = _textToSearch.indexOf(_searchFor, _startingAt - 1);
           assert(() => result >= 0, _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor, _textToSearch));
@@ -15559,7 +16601,7 @@
               const code = new FunctionCodeBuilder(scope);
               if (ast.type !== "REFERENCE" && !(ast.type === "BIN_OPERATION" && ast.value === ":")) {
                   if (isMeta) {
-                      throw new BadExpressionError(_t(`Argument must be a reference to a cell or range.`));
+                      throw new BadExpressionError(_t("Argument must be a reference to a cell or range."));
                   }
               }
               if (ast.debug) {
@@ -16363,410 +17405,11 @@
       return color;
   }
 
-  /**
-   * AbstractChart is the class from which every Chart should inherit.
-   * The role of this class is to maintain the state of each chart.
-   */
-  class AbstractChart {
-      sheetId;
-      title;
-      getters;
-      constructor(definition, sheetId, getters) {
-          this.title = definition.title;
-          this.sheetId = sheetId;
-          this.getters = getters;
-      }
-      /**
-       * Validate the chart definition given as arguments. This function will be
-       * called from allowDispatch function
-       */
-      static validateChartDefinition(validator, definition) {
-          throw new Error("This method should be implemented by sub class");
-      }
-      /**
-       * Get a new chart definition transformed with the executed command. This
-       * functions will be called during operational transform process
-       */
-      static transformDefinition(definition, executed) {
-          throw new Error("This method should be implemented by sub class");
-      }
-      /**
-       * Get an empty definition based on the given context
-       */
-      static getDefinitionFromContextCreation(context) {
-          throw new Error("This method should be implemented by sub class");
-      }
-  }
-
-  function transformZone(zone, executed) {
-      if (executed.type === "REMOVE_COLUMNS_ROWS") {
-          return reduceZoneOnDeletion(zone, executed.dimension === "COL" ? "left" : "top", executed.elements);
-      }
-      if (executed.type === "ADD_COLUMNS_ROWS") {
-          return expandZoneOnInsertion(zone, executed.dimension === "COL" ? "left" : "top", executed.base, executed.position, executed.quantity);
-      }
-      return { ...zone };
-  }
-
-  /**
-   * This file contains helpers that are common to different charts (mainly
-   * line, bar and pie charts)
-   */
-  /**
-   * Adapt ranges of a chart which support DataSet (dataSets and LabelRange).
-   */
-  function updateChartRangesWithDataSets(getters, applyChange, chartDataSets, chartLabelRange) {
-      let isStale = false;
-      const dataSetsWithUndefined = [];
-      for (let index in chartDataSets) {
-          let ds = chartDataSets[index];
-          if (ds.labelCell) {
-              const labelCell = adaptChartRange(ds.labelCell, applyChange);
-              if (ds.labelCell !== labelCell) {
-                  isStale = true;
-                  ds = {
-                      ...ds,
-                      labelCell: labelCell,
-                  };
-              }
-          }
-          const dataRange = adaptChartRange(ds.dataRange, applyChange);
-          if (dataRange === undefined ||
-              getters.getRangeString(dataRange, dataRange.sheetId) === INCORRECT_RANGE_STRING) {
-              isStale = true;
-              ds = undefined;
-          }
-          else if (dataRange !== ds.dataRange) {
-              isStale = true;
-              ds = {
-                  ...ds,
-                  dataRange,
-              };
-          }
-          dataSetsWithUndefined[index] = ds;
-      }
-      let labelRange = chartLabelRange;
-      const range = adaptChartRange(labelRange, applyChange);
-      if (range !== labelRange) {
-          isStale = true;
-          labelRange = range;
-      }
-      const dataSets = dataSetsWithUndefined.filter(isDefined$1);
-      return {
-          isStale,
-          dataSets,
-          labelRange,
-      };
-  }
-  /**
-   * Copy the dataSets given. All the ranges which are on sheetIdFrom will target
-   * sheetIdTo.
-   */
-  function copyDataSetsWithNewSheetId(sheetIdFrom, sheetIdTo, dataSets) {
-      return dataSets.map((ds) => {
-          return {
-              dataRange: copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.dataRange),
-              labelCell: ds.labelCell
-                  ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, ds.labelCell)
-                  : undefined,
-          };
-      });
-  }
-  /**
-   * Copy a range. If the range is on the sheetIdFrom, the range will target
-   * sheetIdTo.
-   */
-  function copyLabelRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) {
-      return range ? copyRangeWithNewSheetId(sheetIdFrom, sheetIdTo, range) : undefined;
-  }
-  /**
-   * Adapt a single range of a chart
-   */
-  function adaptChartRange(range, applyChange) {
-      if (!range) {
-          return undefined;
-      }
-      const change = applyChange(range);
-      switch (change.changeType) {
-          case "NONE":
-              return range;
-          case "REMOVE":
-              return undefined;
-          default:
-              return change.range;
-      }
-  }
-  /**
-   * Create the dataSet objects from xcs
-   */
-  function createDataSets(getters, dataSetsString, sheetId, dataSetsHaveTitle) {
-      const dataSets = [];
-      for (const sheetXC of dataSetsString) {
-          const dataRange = getters.getRangeFromSheetXC(sheetId, sheetXC);
-          const { unboundedZone: zone, sheetId: dataSetSheetId, invalidSheetName, invalidXc } = dataRange;
-          if (invalidSheetName || invalidXc) {
-              continue;
-          }
-          // It's a rectangle. We treat all columns (arbitrary) as different data series.
-          if (zone.left !== zone.right && zone.top !== zone.bottom) {
-              if (zone.right === undefined) {
-                  // Should never happens because of the allowDispatch of charts, but just making sure
-                  continue;
-              }
-              for (let column = zone.left; column <= zone.right; column++) {
-                  const columnZone = {
-                      ...zone,
-                      left: column,
-                      right: column,
-                  };
-                  dataSets.push(createDataSet(getters, dataSetSheetId, columnZone, dataSetsHaveTitle
-                      ? {
-                          top: columnZone.top,
-                          bottom: columnZone.top,
-                          left: columnZone.left,
-                          right: columnZone.left,
-                      }
-                      : undefined));
-              }
-          }
-          else if (zone.left === zone.right && zone.top === zone.bottom) {
-              // A single cell. If it's only the title, the dataset is not added.
-              if (!dataSetsHaveTitle) {
-                  dataSets.push(createDataSet(getters, dataSetSheetId, zone, undefined));
-              }
-          }
-          else {
-              /* 1 row or 1 column */
-              dataSets.push(createDataSet(getters, dataSetSheetId, zone, dataSetsHaveTitle
-                  ? {
-                      top: zone.top,
-                      bottom: zone.top,
-                      left: zone.left,
-                      right: zone.left,
-                  }
-                  : undefined));
-          }
-      }
-      return dataSets;
-  }
-  function createDataSet(getters, sheetId, fullZone, titleZone) {
-      if (fullZone.left !== fullZone.right && fullZone.top !== fullZone.bottom) {
-          throw new Error(`Zone should be a single column or row: ${zoneToXc(fullZone)}`);
-      }
-      if (titleZone) {
-          const dataXC = zoneToXc(fullZone);
-          const labelCellXC = zoneToXc(titleZone);
-          return {
-              labelCell: getters.getRangeFromSheetXC(sheetId, labelCellXC),
-              dataRange: getters.getRangeFromSheetXC(sheetId, dataXC),
-          };
-      }
-      else {
-          return {
-              labelCell: undefined,
-              dataRange: getters.getRangeFromSheetXC(sheetId, zoneToXc(fullZone)),
-          };
-      }
-  }
-  /**
-   * Transform a dataSet to a ExcelDataSet
-   */
-  function toExcelDataset(getters, ds) {
-      const labelZone = ds.labelCell?.zone;
-      let dataZone = ds.dataRange.zone;
-      if (labelZone) {
-          const { numberOfRows, numberOfCols } = zoneToDimension(dataZone);
-          if (numberOfRows === 1) {
-              dataZone = { ...dataZone, left: dataZone.left + 1 };
-          }
-          else if (numberOfCols === 1) {
-              dataZone = { ...dataZone, top: dataZone.top + 1 };
-          }
-      }
-      const dataRange = ds.dataRange.clone({ zone: dataZone });
-      return {
-          label: ds.labelCell ? getters.getRangeString(ds.labelCell, "forceSheetReference") : undefined,
-          range: getters.getRangeString(dataRange, "forceSheetReference"),
-      };
-  }
-  function toExcelLabelRange(getters, labelRange, shouldRemoveFirstLabel) {
-      if (!labelRange)
-          return undefined;
-      let zone = {
-          ...labelRange.zone,
-      };
-      if (shouldRemoveFirstLabel && labelRange.zone.bottom > labelRange.zone.top) {
-          zone.top = zone.top + 1;
-      }
-      const range = labelRange.clone({ zone });
-      return getters.getRangeString(range, "forceSheetReference");
-  }
-  /**
-   * Transform a chart definition which supports dataSets (dataSets and LabelRange)
-   * with an executed command
-   */
-  function transformChartDefinitionWithDataSetsWithZone(definition, executed) {
-      let labelRange;
-      if (definition.labelRange) {
-          const labelZone = transformZone(toUnboundedZone(definition.labelRange), executed);
-          labelRange = labelZone ? zoneToXc(labelZone) : undefined;
-      }
-      const dataSets = definition.dataSets
-          .map(toUnboundedZone)
-          .map((zone) => transformZone(zone, executed))
-          .filter(isDefined$1)
-          .map(zoneToXc);
-      return {
-          ...definition,
-          labelRange,
-          dataSets,
-      };
-  }
-  const GraphColors = [
-      // the same colors as those used in odoo reporting
-      "rgb(31,119,180)",
-      "rgb(255,127,14)",
-      "rgb(174,199,232)",
-      "rgb(255,187,120)",
-      "rgb(44,160,44)",
-      "rgb(152,223,138)",
-      "rgb(214,39,40)",
-      "rgb(255,152,150)",
-      "rgb(148,103,189)",
-      "rgb(197,176,213)",
-      "rgb(140,86,75)",
-      "rgb(196,156,148)",
-      "rgb(227,119,194)",
-      "rgb(247,182,210)",
-      "rgb(127,127,127)",
-      "rgb(199,199,199)",
-      "rgb(188,189,34)",
-      "rgb(219,219,141)",
-      "rgb(23,190,207)",
-      "rgb(158,218,229)",
-  ];
-  class ChartColors {
-      graphColorIndex = 0;
-      next() {
-          return GraphColors[this.graphColorIndex++ % GraphColors.length];
-      }
-  }
-  /**
-   * Choose a font color based on a background color.
-   * The font is white with a dark background.
-   */
-  function chartFontColor(backgroundColor) {
-      if (!backgroundColor) {
-          return "#000000";
-      }
-      return relativeLuminance(backgroundColor) < 0.3 ? "#FFFFFF" : "#000000";
-  }
-  function checkDataset(definition) {
-      if (definition.dataSets) {
-          const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range)) !== undefined;
-          if (invalidRanges) {
-              return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
-          }
-          const zones = definition.dataSets.map(toUnboundedZone);
-          if (zones.some((zone) => zone.top !== zone.bottom && isFullRow(zone))) {
-              return "InvalidDataSet" /* CommandResult.InvalidDataSet */;
-          }
-      }
-      return "Success" /* CommandResult.Success */;
-  }
-  function checkLabelRange(definition) {
-      if (definition.labelRange) {
-          const invalidLabels = !rangeReference.test(definition.labelRange || "");
-          if (invalidLabels) {
-              return "InvalidLabelRange" /* CommandResult.InvalidLabelRange */;
-          }
-      }
-      return "Success" /* CommandResult.Success */;
-  }
-  function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
-      if (!dataSetsHaveTitle)
-          return false;
-      if (!labelRange)
-          return false;
-      if (!dataset)
-          return true;
-      const datasetLength = getZoneArea(dataset.dataRange.zone);
-      const labelLength = getZoneArea(labelRange.zone);
-      if (labelLength < datasetLength) {
-          return false;
-      }
-      return true;
-  }
-  // ---------------------------------------------------------------------------
-  // Scorecard
-  // ---------------------------------------------------------------------------
-  function getBaselineText(baseline, keyValue, baselineMode, locale) {
-      if (!baseline) {
-          return "";
-      }
-      else if (baselineMode === "text" ||
-          keyValue?.type !== CellValueType.number ||
-          baseline.type !== CellValueType.number) {
-          return baseline.formattedValue;
-      }
-      else {
-          let diff = keyValue.value - baseline.value;
-          if (baselineMode === "percentage" && diff !== 0) {
-              diff = (diff / baseline.value) * 100;
-          }
-          if (baselineMode !== "percentage" && baseline.format) {
-              return formatValue(diff, { format: baseline.format, locale });
-          }
-          const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-          return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
-      }
-  }
-  function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
-      if (baselineMode === "text" ||
-          baseline?.type !== CellValueType.number ||
-          keyValue?.type !== CellValueType.number) {
-          return undefined;
-      }
-      const diff = keyValue.value - baseline.value;
-      if (diff > 0) {
-          return colorUp;
-      }
-      else if (diff < 0) {
-          return colorDown;
-      }
-      return undefined;
-  }
-  function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
-      if (baselineMode === "text" ||
-          baseline?.type !== CellValueType.number ||
-          keyValue?.type !== CellValueType.number) {
-          return "neutral";
-      }
-      const diff = keyValue.value - baseline.value;
-      if (diff > 0) {
-          return "up";
-      }
-      else if (diff < 0) {
-          return "down";
-      }
-      return "neutral";
-  }
-  function getChartPositionAtCenterOfViewport(getters, chartSize) {
-      const { x, y } = getters.getMainViewportCoordinates();
-      const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-      const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
-      const position = {
-          x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
-          y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
-      }; // Position at the center of the scrollable viewport
-      return position;
-  }
-
   const PasteInteractiveContent = {
       wrongPasteSelection: _t("This operation is not allowed with multiple selections."),
       willRemoveExistingMerge: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
       wrongFigurePasteOption: _t("Cannot do a special paste of a figure."),
-      frozenPaneOverlap: _t("Cannot paste merged cells over a frozen pane."),
+      frozenPaneOverlap: _t("This operation is not allowed due to an overlapping frozen pane."),
   };
   function handlePasteResult(env, result) {
       if (!result.isSuccessful) {
@@ -17109,6 +17752,51 @@
           return index - 1;
       }
   }
+  function chartToImage(runtime, figure, type) {
+      // wrap the canvas in a div with a fixed size because chart.js would
+      // fill the whole page otherwise
+      const div = document.createElement("div");
+      div.style.width = `${figure.width}px`;
+      div.style.height = `${figure.height}px`;
+      const canvas = document.createElement("canvas");
+      div.append(canvas);
+      canvas.setAttribute("width", figure.width.toString());
+      canvas.setAttribute("height", figure.height.toString());
+      // we have to add the canvas to the DOM otherwise it won't be rendered
+      document.body.append(div);
+      if ("chartJsConfig" in runtime) {
+          runtime.chartJsConfig.plugins = [backgroundColorChartJSPlugin];
+          // @ts-ignore
+          const chart = new window.Chart(canvas, runtime.chartJsConfig);
+          const imgContent = chart.toBase64Image();
+          chart.destroy();
+          div.remove();
+          return imgContent;
+      }
+      else if (type === "scorecard") {
+          const design = getScorecardConfiguration(figure, runtime);
+          drawScoreChart(design, canvas);
+          const imgContent = canvas.toDataURL();
+          div.remove();
+          return imgContent;
+      }
+      return "";
+  }
+  /**
+   * Custom chart.js plugin to set the background color of the canvas
+   * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+   */
+  const backgroundColorChartJSPlugin = {
+      id: "customCanvasBackgroundColor",
+      beforeDraw: (chart) => {
+          const { ctx } = chart;
+          ctx.save();
+          ctx.globalCompositeOperation = "destination-over";
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, chart.width, chart.height);
+          ctx.restore();
+      },
+  };
 
   class BarChart extends AbstractChart {
       dataSets;
@@ -18179,172 +18867,6 @@
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
-  function checkKeyValue(definition) {
-      return definition.keyValue && !rangeReference.test(definition.keyValue)
-          ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
-          : "Success" /* CommandResult.Success */;
-  }
-  function checkBaseline(definition) {
-      return definition.baseline && !rangeReference.test(definition.baseline)
-          ? "InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */
-          : "Success" /* CommandResult.Success */;
-  }
-  class ScorecardChart extends AbstractChart {
-      keyValue;
-      baseline;
-      baselineMode;
-      baselineDescr;
-      background;
-      baselineColorUp;
-      baselineColorDown;
-      fontColor;
-      type = "scorecard";
-      constructor(definition, sheetId, getters) {
-          super(definition, sheetId, getters);
-          this.keyValue = createRange(getters, sheetId, definition.keyValue);
-          this.baseline = createRange(getters, sheetId, definition.baseline);
-          this.baselineMode = definition.baselineMode;
-          this.baselineDescr = definition.baselineDescr;
-          this.background = definition.background;
-          this.baselineColorUp = definition.baselineColorUp;
-          this.baselineColorDown = definition.baselineColorDown;
-      }
-      static validateChartDefinition(validator, definition) {
-          return validator.checkValidations(definition, checkKeyValue, checkBaseline);
-      }
-      static getDefinitionFromContextCreation(context) {
-          return {
-              background: context.background,
-              type: "scorecard",
-              keyValue: context.range ? context.range[0] : undefined,
-              title: context.title || "",
-              baselineMode: DEFAULT_SCORECARD_BASELINE_MODE,
-              baselineColorUp: DEFAULT_SCORECARD_BASELINE_COLOR_UP,
-              baselineColorDown: DEFAULT_SCORECARD_BASELINE_COLOR_DOWN,
-              baseline: context.auxiliaryRange || "",
-          };
-      }
-      static transformDefinition(definition, executed) {
-          let baselineZone;
-          let keyValueZone;
-          if (definition.baseline) {
-              baselineZone = transformZone(toUnboundedZone(definition.baseline), executed);
-          }
-          if (definition.keyValue) {
-              keyValueZone = transformZone(toUnboundedZone(definition.keyValue), executed);
-          }
-          return {
-              ...definition,
-              baseline: baselineZone ? zoneToXc(baselineZone) : undefined,
-              keyValue: keyValueZone ? zoneToXc(keyValueZone) : undefined,
-          };
-      }
-      copyForSheetId(sheetId) {
-          const baseline = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.baseline);
-          const keyValue = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.keyValue);
-          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue, sheetId);
-          return new ScorecardChart(definition, sheetId, this.getters);
-      }
-      copyInSheetId(sheetId) {
-          const definition = this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue, sheetId);
-          return new ScorecardChart(definition, sheetId, this.getters);
-      }
-      getDefinition() {
-          return this.getDefinitionWithSpecificRanges(this.baseline, this.keyValue);
-      }
-      getContextCreation() {
-          return {
-              background: this.background,
-              title: this.title,
-              range: this.keyValue ? [this.getters.getRangeString(this.keyValue, this.sheetId)] : undefined,
-              auxiliaryRange: this.baseline
-                  ? this.getters.getRangeString(this.baseline, this.sheetId)
-                  : undefined,
-          };
-      }
-      getDefinitionWithSpecificRanges(baseline, keyValue, targetSheetId) {
-          return {
-              baselineColorDown: this.baselineColorDown,
-              baselineColorUp: this.baselineColorUp,
-              baselineMode: this.baselineMode,
-              title: this.title,
-              type: "scorecard",
-              background: this.background,
-              baseline: baseline
-                  ? this.getters.getRangeString(baseline, targetSheetId || this.sheetId)
-                  : undefined,
-              baselineDescr: this.baselineDescr,
-              keyValue: keyValue
-                  ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
-                  : undefined,
-          };
-      }
-      getDefinitionForExcel() {
-          // This kind of graph is not exportable in Excel
-          return undefined;
-      }
-      updateRanges(applyChange) {
-          const baseline = adaptChartRange(this.baseline, applyChange);
-          const keyValue = adaptChartRange(this.keyValue, applyChange);
-          if (this.baseline === baseline && this.keyValue === keyValue) {
-              return this;
-          }
-          const definition = this.getDefinitionWithSpecificRanges(baseline, keyValue);
-          return new ScorecardChart(definition, this.sheetId, this.getters);
-      }
-  }
-  function createScorecardChartRuntime(chart, getters) {
-      let keyValue = "";
-      let formattedKeyValue = "";
-      let keyValueCell;
-      if (chart.keyValue) {
-          const keyValuePosition = {
-              sheetId: chart.keyValue.sheetId,
-              col: chart.keyValue.zone.left,
-              row: chart.keyValue.zone.top,
-          };
-          keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-          keyValue = String(keyValueCell.value);
-          formattedKeyValue = keyValueCell.formattedValue;
-      }
-      let baselineCell;
-      const baseline = chart.baseline;
-      if (baseline) {
-          const baselinePosition = {
-              sheetId: chart.baseline.sheetId,
-              col: chart.baseline.zone.left,
-              row: chart.baseline.zone.top,
-          };
-          baselineCell = getters.getEvaluatedCell(baselinePosition);
-      }
-      const background = getters.getBackgroundOfSingleCellChart(chart.background, chart.keyValue);
-      const locale = getters.getLocale();
-      return {
-          title: _t(chart.title),
-          keyValue: formattedKeyValue || keyValue,
-          baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
-          baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
-          baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-          baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
-          fontColor: chartFontColor(background),
-          background,
-          baselineStyle: chart.baselineMode !== "percentage" && baseline
-              ? getters.getCellStyle({
-                  sheetId: baseline.sheetId,
-                  col: baseline.zone.left,
-                  row: baseline.zone.top,
-              })
-              : undefined,
-          keyValueStyle: chart.keyValue
-              ? getters.getCellStyle({
-                  sheetId: chart.keyValue.sheetId,
-                  col: chart.keyValue.zone.left,
-                  row: chart.keyValue.zone.top,
-              })
-              : undefined,
-      };
-  }
-
   /**
    * This registry is intended to map a cell content (raw string) to
    * an instance of a cell.
@@ -18382,11 +18904,11 @@
   });
   chartRegistry.add("scorecard", {
       match: (type) => type === "scorecard",
-      createChart: (definition, sheetId, getters) => new ScorecardChart(definition, sheetId, getters),
+      createChart: (definition, sheetId, getters) => new ScorecardChart$1(definition, sheetId, getters),
       getChartRuntime: createScorecardChartRuntime,
-      validateChartDefinition: (validator, definition) => ScorecardChart.validateChartDefinition(validator, definition),
-      transformDefinition: (definition, executed) => ScorecardChart.transformDefinition(definition, executed),
-      getChartDefinitionFromContextCreation: (context) => ScorecardChart.getDefinitionFromContextCreation(context),
+      validateChartDefinition: (validator, definition) => ScorecardChart$1.validateChartDefinition(validator, definition),
+      transformDefinition: (definition, executed) => ScorecardChart$1.transformDefinition(definition, executed),
+      getChartDefinitionFromContextCreation: (context) => ScorecardChart$1.getDefinitionFromContextCreation(context),
       name: _t("Scorecard"),
       sequence: 40,
   });
@@ -18405,7 +18927,7 @@
   chartComponentRegistry.add("bar", ChartJsComponent);
   chartComponentRegistry.add("pie", ChartJsComponent);
   chartComponentRegistry.add("gauge", ChartJsComponent);
-  chartComponentRegistry.add("scorecard", ScorecardChart$1);
+  chartComponentRegistry.add("scorecard", ScorecardChart);
 
   /**
    * Registry intended to support usual currencies. It is mainly used to create
@@ -19147,6 +19669,7 @@
   // Helpers
   //------------------------------------------------------------------------------
   function setFormatter(env, format) {
+      env.model.dispatch("CANCEL_EDITION");
       env.model.dispatch("SET_FORMATTING", {
           sheetId: env.model.getters.getActiveSheetId(),
           target: env.model.getters.getSelectedZones(),
@@ -20065,105 +20588,6 @@
       separator: true,
   });
 
-  const SORT_TYPES = [
-      CellValueType.number,
-      CellValueType.error,
-      CellValueType.text,
-      CellValueType.boolean,
-  ];
-  function sortCells(cells, sortDirection, emptyCellAsZero) {
-      const cellsWithIndex = cells.map((cell, index) => ({
-          index,
-          type: cell.type,
-          value: cell.value,
-      }));
-      let emptyCells = cellsWithIndex.filter((x) => x.type === CellValueType.empty);
-      let nonEmptyCells = cellsWithIndex.filter((x) => x.type !== CellValueType.empty);
-      if (emptyCellAsZero) {
-          nonEmptyCells.push(...emptyCells.map((emptyCell) => ({ ...emptyCell, type: CellValueType.number, value: 0 })));
-          emptyCells = [];
-      }
-      const inverse = sortDirection === "descending" ? -1 : 1;
-      return nonEmptyCells
-          .sort((left, right) => {
-          let typeOrder = SORT_TYPES.indexOf(left.type) - SORT_TYPES.indexOf(right.type);
-          if (typeOrder === 0) {
-              if (left.type === CellValueType.text || left.type === CellValueType.error) {
-                  typeOrder = left.value.localeCompare(right.value);
-              }
-              else
-                  typeOrder = left.value - right.value;
-          }
-          return inverse * typeOrder;
-      })
-          .concat(emptyCells);
-  }
-  function interactiveSortSelection(env, sheetId, anchor, zone, sortDirection) {
-      let result = DispatchResult.Success;
-      //several columns => bypass the contiguity check
-      let multiColumns = zone.right > zone.left;
-      if (env.model.getters.doesIntersectMerge(sheetId, zone)) {
-          multiColumns = false;
-          let table;
-          for (let row = zone.top; row <= zone.bottom; row++) {
-              table = [];
-              for (let col = zone.left; col <= zone.right; col++) {
-                  let merge = env.model.getters.getMerge({ sheetId, col, row });
-                  if (merge && !table.includes(merge.id.toString())) {
-                      table.push(merge.id.toString());
-                  }
-              }
-              if (table.length >= 2) {
-                  multiColumns = true;
-                  break;
-              }
-          }
-      }
-      const { col, row } = anchor;
-      if (multiColumns) {
-          result = env.model.dispatch("SORT_CELLS", { sheetId, col, row, zone, sortDirection });
-      }
-      else {
-          // check contiguity
-          const contiguousZone = env.model.getters.getContiguousZone(sheetId, zone);
-          if (isEqual(contiguousZone, zone)) {
-              // merge as it is
-              result = env.model.dispatch("SORT_CELLS", {
-                  sheetId,
-                  col,
-                  row,
-                  zone,
-                  sortDirection,
-              });
-          }
-          else {
-              env.askConfirmation(_t("We found data next to your selection. Since this data was not selected, it will not be sorted. Do you want to extend your selection?"), () => {
-                  zone = contiguousZone;
-                  result = env.model.dispatch("SORT_CELLS", {
-                      sheetId,
-                      col,
-                      row,
-                      zone,
-                      sortDirection,
-                  });
-              }, () => {
-                  result = env.model.dispatch("SORT_CELLS", {
-                      sheetId,
-                      col,
-                      row,
-                      zone,
-                      sortDirection,
-                  });
-              });
-          }
-      }
-      if (result.isCancelledBecause("InvalidSortZone" /* CommandResult.InvalidSortZone */)) {
-          const { col, row } = anchor;
-          env.model.selection.selectZone({ cell: { col, row }, zone });
-          env.raiseError(_t("Cannot sort. To sort, select only cells or only merges that have the same size."));
-      }
-  }
-
   const AddFilterInteractiveContent = {
       filterOverlap: _t("You cannot create overlapping filters."),
       nonContinuousTargets: _t("A filter can only be created on a continuous selection."),
@@ -20258,109 +20682,126 @@
       icon: "o-spreadsheet-Icon.SPLIT_TEXT",
   };
 
+  /**
+   * Create a format action specification for a given format.
+   * The format can be dynamically computed from the environment.
+   */
+  function createFormatActionSpec({ name, format, descriptionValue, }) {
+      const formatCallback = typeof format === "function" ? format : () => format;
+      return {
+          name,
+          description: (env) => formatValue(descriptionValue, {
+              format: formatCallback(env),
+              locale: env.model.getters.getLocale(),
+          }),
+          execute: (env) => setFormatter(env, formatCallback(env)),
+          isActive: (env) => isFormatSelected(env, formatCallback(env)),
+      };
+  }
   const formatNumberAutomatic = {
       name: _t("Automatic"),
       execute: (env) => setFormatter(env, ""),
       isActive: (env) => isAutomaticFormatSelected(env),
   };
-  const formatNumberNumber = {
+  const formatNumberNumber = createFormatActionSpec({
       name: _t("Number"),
-      description: (env) => formatValue(1000.12, {
-          format: "#,##0.00",
-          locale: env.model.getters.getLocale(),
-      }),
-      execute: (env) => setFormatter(env, "#,##0.00"),
-      isActive: (env) => isFormatSelected(env, "#,##0.00"),
-  };
+      descriptionValue: 1000.12,
+      format: "#,##0.00",
+  });
   const formatPercent = {
       name: _t("Format as percent"),
       execute: FORMAT_PERCENT_ACTION,
       icon: "o-spreadsheet-Icon.PERCENT",
   };
-  const formatNumberPercent = {
+  const formatNumberPercent = createFormatActionSpec({
       name: _t("Percent"),
-      description: (env) => formatValue(0.1012, {
-          format: "0.00%",
-          locale: env.model.getters.getLocale(),
-      }),
-      execute: FORMAT_PERCENT_ACTION,
-      isActive: (env) => isFormatSelected(env, "0.00%"),
-  };
-  const formatNumberCurrency = {
+      descriptionValue: 0.1012,
+      format: "0.00%",
+  });
+  const formatNumberCurrency = createFormatActionSpec({
       name: _t("Currency"),
-      description: (env) => formatValue(1000.12, {
-          format: env.model.config.defaultCurrencyFormat,
-          locale: env.model.getters.getLocale(),
-      }),
-      execute: (env) => setFormatter(env, env.model.config.defaultCurrencyFormat),
-      isActive: (env) => isFormatSelected(env, env.model.config.defaultCurrencyFormat),
-  };
+      descriptionValue: 1000.12,
+      format: (env) => env.model.config.defaultCurrencyFormat,
+  });
   const formatNumberCurrencyRounded = {
-      name: _t("Currency rounded"),
-      description: (env) => formatValue(1000, {
-          format: roundFormat(env.model.config.defaultCurrencyFormat),
-          locale: env.model.getters.getLocale(),
+      ...createFormatActionSpec({
+          name: _t("Currency rounded"),
+          descriptionValue: 1000,
+          format: (env) => roundFormat(env.model.config.defaultCurrencyFormat),
       }),
-      execute: (env) => setFormatter(env, roundFormat(env.model.config.defaultCurrencyFormat)),
-      isActive: (env) => isFormatSelected(env, roundFormat(env.model.config.defaultCurrencyFormat)),
       isVisible: (env) => {
           const currencyFormat = env.model.config.defaultCurrencyFormat;
           return currencyFormat !== roundFormat(currencyFormat);
       },
   };
+  const EXAMPLE_DATE = parseLiteral("2023/09/26 10:43:00 PM", DEFAULT_LOCALE);
   const formatCustomCurrency = {
       name: _t("Custom currency"),
       isVisible: (env) => env.loadCurrencies !== undefined,
       execute: (env) => env.openSidePanel("CustomCurrency", {}),
   };
-  const formatNumberDate = {
+  const formatNumberDate = createFormatActionSpec({
       name: _t("Date"),
-      description: (env) => {
-          const locale = env.model.getters.getLocale();
-          return formatValue(parseLiteral("9/26/2023", DEFAULT_LOCALE), {
-              format: locale.dateFormat,
-              locale,
-          });
-      },
-      execute: (env) => setFormatter(env, env.model.getters.getLocale().dateFormat),
-      isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().dateFormat),
-  };
-  const formatNumberTime = {
+      descriptionValue: EXAMPLE_DATE,
+      format: (env) => env.model.getters.getLocale().dateFormat,
+  });
+  const formatNumberTime = createFormatActionSpec({
       name: _t("Time"),
-      description: (env) => {
-          const locale = env.model.getters.getLocale();
-          return formatValue(parseLiteral("9/26/2023 10:43:00 PM", DEFAULT_LOCALE), {
-              format: locale.timeFormat,
-              locale,
-          });
-      },
-      execute: (env) => setFormatter(env, env.model.getters.getLocale().timeFormat),
-      isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().timeFormat),
-  };
-  const formatNumberDateTime = {
+      descriptionValue: EXAMPLE_DATE,
+      format: (env) => env.model.getters.getLocale().timeFormat,
+  });
+  const formatNumberDateTime = createFormatActionSpec({
       name: _t("Date time"),
-      description: (env) => {
-          const locale = env.model.getters.getLocale();
-          return formatValue(parseLiteral("9/26/2023 22:43:00", DEFAULT_LOCALE), {
-              format: locale.dateFormat + " " + locale.timeFormat,
-              locale,
-          });
-      },
-      execute: (env) => {
-          const locale = env.model.getters.getLocale();
-          setFormatter(env, locale.dateFormat + " " + locale.timeFormat);
-      },
-      isActive: (env) => {
+      descriptionValue: EXAMPLE_DATE,
+      format: (env) => {
           const locale = env.model.getters.getLocale();
-          return isFormatSelected(env, locale.dateFormat + " " + locale.timeFormat);
+          return locale.dateFormat + " " + locale.timeFormat;
       },
-  };
-  const formatNumberDuration = {
+  });
+  const formatNumberDuration = createFormatActionSpec({
       name: _t("Duration"),
-      description: "27:51:38",
-      execute: (env) => setFormatter(env, "hhhh:mm:ss"),
-      isActive: (env) => isFormatSelected(env, "hhhh:mm:ss"),
-  };
+      descriptionValue: "27:51:38",
+      format: "hhhh:mm:ss",
+  });
+  const moreFormats = {
+      name: _t("More date formats"),
+      execute: (env) => env.openSidePanel("MoreFormats", {}),
+  };
+  const formatNumberFullDateTime = createFormatActionSpec({
+      name: _t("Full date time"),
+      format: "dddd d mmmm yyyy hh:mm:ss a",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberFullWeekDayAndMonth = createFormatActionSpec({
+      name: _t("Full week day and month"),
+      format: "dddd d mmmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberDayAndFullMonth = createFormatActionSpec({
+      name: _t("Day and full month"),
+      format: "d mmmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberShortWeekDay = createFormatActionSpec({
+      name: _t("Short week day"),
+      format: "ddd d mmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberDayAndShortMonth = createFormatActionSpec({
+      name: _t("Day and short month"),
+      format: "d mmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberFullMonth = createFormatActionSpec({
+      name: _t("Full month"),
+      format: "mmmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
+  const formatNumberShortMonth = createFormatActionSpec({
+      name: _t("Short month"),
+      format: "mmm yyyy",
+      descriptionValue: EXAMPLE_DATE,
+  });
   const incraseDecimalPlaces = {
       name: _t("Increase decimal places"),
       icon: "o-spreadsheet-Icon.INCREASE_DECIMAL",
@@ -20613,9 +21054,16 @@
     formatNumberCurrencyRounded: formatNumberCurrencyRounded,
     formatNumberDate: formatNumberDate,
     formatNumberDateTime: formatNumberDateTime,
+    formatNumberDayAndFullMonth: formatNumberDayAndFullMonth,
+    formatNumberDayAndShortMonth: formatNumberDayAndShortMonth,
     formatNumberDuration: formatNumberDuration,
+    formatNumberFullDateTime: formatNumberFullDateTime,
+    formatNumberFullMonth: formatNumberFullMonth,
+    formatNumberFullWeekDayAndMonth: formatNumberFullWeekDayAndMonth,
     formatNumberNumber: formatNumberNumber,
     formatNumberPercent: formatNumberPercent,
+    formatNumberShortMonth: formatNumberShortMonth,
+    formatNumberShortWeekDay: formatNumberShortWeekDay,
     formatNumberTime: formatNumberTime,
     formatPercent: formatPercent,
     formatStrikethrough: formatStrikethrough,
@@ -20626,6 +21074,7 @@
     formatWrappingOverflow: formatWrappingOverflow,
     formatWrappingWrap: formatWrappingWrap,
     incraseDecimalPlaces: incraseDecimalPlaces,
+    moreFormats: moreFormats,
     textColor: textColor
   });
 
@@ -21083,6 +21532,10 @@
       ...formatNumberDuration,
       sequence: 100,
       separator: true,
+  })
+      .add("more_formats", {
+      ...moreFormats,
+      sequence: 110,
   });
   const formatNumberMenuItemSpec = {
       name: _t("More formats"),
@@ -22984,7 +23437,7 @@
           });
       }
       canUpdateChart(figureId, updateDefinition) {
-          if (figureId !== this.figureId) {
+          if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
               return;
           }
           const definition = {
@@ -24351,6 +24804,44 @@
       onCloseSidePanel: Function,
   };
 
+  css /* scss */ `
+  .o-more-formats-panel {
+    .format-preview {
+      height: 48px;
+      background-color: white;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .check-icon {
+      width: 24px;
+    }
+  }
+`;
+  const DATE_FORMAT_ACTIONS = createActions([
+      formatNumberFullDateTime,
+      formatNumberFullWeekDayAndMonth,
+      formatNumberDayAndFullMonth,
+      formatNumberShortWeekDay,
+      formatNumberDayAndShortMonth,
+      formatNumberFullMonth,
+      formatNumberShortMonth,
+      formatNumberDate,
+      formatNumberTime,
+      formatNumberDateTime,
+      formatNumberDuration,
+  ]);
+  class MoreFormatsPanel extends owl.Component {
+      static template = "o-spreadsheet-MoreFormatsPanel";
+      get dateFormatsActions() {
+          return DATE_FORMAT_ACTIONS;
+      }
+  }
+  MoreFormatsPanel.props = {
+      onCloseSidePanel: Function,
+  };
+
   css /* scss */ `
   .o-checkbox-selection {
     height: 150px;
@@ -25808,6 +26299,10 @@
       title: _t("Data validation"),
       Body: DataValidationPanel,
   });
+  sidePanelRegistry.add("MoreFormats", {
+      title: _t("More date formats"),
+      Body: MoreFormatsPanel,
+  });
 
   class TopBarComponentRegistry extends Registry {
       mapping = {};
@@ -26275,7 +26770,6 @@
     border-top-right-radius: 4px;
     font-size: ${DEFAULT_FONT_SIZE};
     color: white;
-    opacity: 0;
     pointer-events: none;
   }
 `;
@@ -26295,7 +26789,6 @@
               left: `${x - 1}px`,
               border: `1px solid ${color}`,
               "background-color": color,
-              opacity: this.props.active ? "opacity:1 !important" : undefined,
           });
       }
   }
@@ -26307,16 +26800,31 @@
       row: Number,
   };
 
+  function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
+      const pendingHtmlContent = [];
+      pattern = pattern.toLowerCase();
+      for (const patternChar of pattern) {
+          const index = value.toLocaleLowerCase().indexOf(patternChar);
+          if (index === -1) {
+              continue;
+          }
+          pendingHtmlContent.push({ value: value.slice(0, index), color: "" }, { value: value[index], color: highlightColor, class: className });
+          value = value.slice(index + 1);
+      }
+      pendingHtmlContent.push({ value });
+      const htmlContent = pendingHtmlContent.filter((content) => content.value);
+      return htmlContent;
+  }
+
   css /* scss */ `
   .o-autocomplete-dropdown {
     pointer-events: auto;
+    cursor: pointer;
     background-color: #fff;
     max-width: 400px;
-    & > div:hover {
-      background-color: #f2f2f2;
-    }
+
     .o-autocomplete-value-focus {
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: #f2f2f2;
     }
 
     & > div {
@@ -26334,7 +26842,9 @@
   TextValueProvider.props = {
       values: Array,
       selectedIndex: { type: Number, optional: true },
+      getHtmlContent: Function,
       onValueSelected: Function,
+      onValueHovered: Function,
   };
 
   class ContentEditableHelper {
@@ -26683,8 +27193,8 @@
     .o-formula-assistant-focus {
       div:first-child,
       span {
-        color: purple;
-        text-shadow: 0px 0px 1px purple;
+        color: ${COMPOSER_ASSISTANT_COLOR};
+        text-shadow: 0px 0px 1px ${COMPOSER_ASSISTANT_COLOR};
       }
       div:last-child {
         color: black;
@@ -26729,6 +27239,7 @@
 
   const functions = functionRegistry.content;
   const ASSISTANT_WIDTH = 300;
+  const AUTOCOMPLETE_ENTRIES = 10;
   const selectionIndicatorClass = "selector-flag";
   const selectionIndicatorColor = "#a9a9a9";
   const selectionIndicator = "␣";
@@ -26778,6 +27289,13 @@
       position: absolute;
       margin: 1px 4px;
       pointer-events: none;
+
+      .o-semi-bold {
+        /** FIXME: to remove in favor of Bootstrap
+        * 'fw-semibold' when we upgrade to Bootstrap 5.2
+        */
+        font-weight: 600 !important;
+      }
     }
   }
 `;
@@ -26798,6 +27316,7 @@
           values: [],
           selectedIndex: undefined,
           type: "function",
+          getHtmlContent: () => [],
       });
       functionDescriptionState = owl.useState({
           showDescription: false,
@@ -27040,24 +27559,27 @@
                   text,
                   description,
               };
+          })
+              .sort((a, b) => {
+              return a.text.length - b.text.length || a.text.localeCompare(b.text);
           });
           if (searchTerm) {
-              values = fuzzyLookup(searchTerm, values, (t) => t.text);
-          }
-          else {
-              // alphabetical order
-              values = values.sort((a, b) => a.text.localeCompare(b.text));
+              values = fuzzyLookup(searchTerm, values, (t) => t.text).slice(0, AUTOCOMPLETE_ENTRIES);
           }
-          this.autoCompleteState.values = values.slice(0, 10);
+          this.autoCompleteState.values = values.slice(0, AUTOCOMPLETE_ENTRIES);
+          this.autoCompleteState.getHtmlContent = (value) => getHtmlContentFromPattern(searchTerm, value, COMPOSER_ASSISTANT_COLOR, "o-semi-bold");
           this.autoCompleteState.selectedIndex = 0;
       }
+      updateAutoCompleteIndex(index) {
+          this.autoCompleteState.selectedIndex = clip(0, index, 10);
+      }
       /**
        * This is required to ensure the content helper selection is
        * properly updated on "onclick" events. Depending on the browser,
        * the callback onClick from the composer will be executed before
        * the selection was updated in the dom, which means we capture an
        * wrong selection which is then forced upon the content helper on
-       * patchContent.
+       * processContent.
        */
       onMousedown(ev) {
           if (ev.button > 0) {
@@ -27327,6 +27849,7 @@
           this.autoCompleteState.type = "dataValidation";
           this.autoCompleteState.selectedIndex = undefined;
           this.autoCompleteState.values = values.map((value) => ({ text: value, description: "" }));
+          this.autoCompleteState.getHtmlContent = (value) => [{ value }];
       }
   }
   Composer.props = {
@@ -28723,7 +29246,14 @@
               return;
           }
           if (this.state.waitingForMove === true) {
-              this.startMovement(ev);
+              if (!this.env.model.getters.isGridSelectionActive()) {
+                  this._selectElement(index, false);
+              }
+              else {
+                  // FIXME: Consider reintroducing this feature for all type of selection if we find
+                  // a way to have the grid selection follow the other selections evolution
+                  this.startMovement(ev);
+              }
               return;
           }
           if (this.env.model.getters.getEditionMode() === "editing") {
@@ -29804,6 +30334,8 @@
               const position = this.env.model.getters.getActivePosition();
               this.env.model.selection.selectZone({ cell: position, zone: newZone });
           },
+          "CTRL+D": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ABOVE"),
+          "CTRL+R": async () => this.env.model.dispatch("COPY_PASTE_CELLS_ON_LEFT"),
           "CTRL+SHIFT+E": () => this.setHorizontalAlign("center"),
           "CTRL+SHIFT+L": () => this.setHorizontalAlign("left"),
           "CTRL+SHIFT+R": () => this.setHorizontalAlign("right"),
@@ -32238,12 +32770,15 @@
       };
   }
   function xmlEscape(str) {
-      return String(str)
+      return (String(str)
           .replace(/\&/g, "&amp;")
           .replace(/\</g, "&lt;")
           .replace(/\>/g, "&gt;")
           .replace(/\"/g, "&quot;")
-          .replace(/\'/g, "&apos;");
+          .replace(/\'/g, "&apos;")
+          // Delete all ASCII control characters except for TAB (\x09), LF (\x0A) and CR (\x0D)
+          // They are not valid at all in XML 1.0 (even escaped)
+          .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, ""));
   }
   function formatAttributes(attrs) {
       return new XMLString(attrs.map(([key, val]) => `${key}="${xmlEscape(val)}"`).join(" "));
@@ -34971,10 +35506,11 @@
        * Reconstructs the original formula string based on a normalized form and its dependencies
        */
       getFormulaCellContent(sheetId, cell, dependencies) {
-          const ranges = dependencies || [...cell.dependencies];
+          const ranges = dependencies || cell.dependencies;
+          let rangeIndex = 0;
           return concat(cell.compiledFormula.tokens.map((token) => {
               if (token.type === "REFERENCE") {
-                  const range = ranges.shift();
+                  const range = ranges[rangeIndex++];
                   return this.getters.getRangeString(range, sheetId);
               }
               return token.value;
@@ -35352,7 +35888,7 @@
       export(data) {
           if (data.sheets) {
               for (let sheet of data.sheets) {
-                  // TODO This code is false, if two plugins want ot insert figures on the sheet, it will crash !
+                  // TODO This code is false, if two plugins want to insert figures on the sheet, it will crash !
                   const sheetFigures = this.getters.getFigures(sheet.id);
                   const figures = [];
                   for (let sheetFigure of sheetFigures) {
@@ -35372,24 +35908,6 @@
               }
           }
       }
-      exportForExcel(data) {
-          for (let sheet of data.sheets) {
-              const sheetFigures = this.getters.getFigures(sheet.id);
-              const figures = [];
-              for (let figure of sheetFigures) {
-                  if (figure && figure.tag === "chart") {
-                      const figureData = this.charts[figure.id]?.getDefinitionForExcel();
-                      if (figureData) {
-                          figures.push({
-                              ...figure,
-                              data: figureData,
-                          });
-                      }
-                  }
-              }
-              sheet.charts = figures;
-          }
-      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -36911,6 +37429,9 @@
       }
       exportForExcel(data) {
           for (const sheet of data.sheets) {
+              if (!sheet.images) {
+                  sheet.images = [];
+              }
               const figures = this.getters.getFigures(sheet.id);
               const images = [];
               for (const figure of figures) {
@@ -36924,7 +37445,7 @@
                       }
                   }
               }
-              sheet.images = images;
+              sheet.images = [...sheet.images, ...images];
           }
       }
       getAllImages() {
@@ -39188,7 +39709,7 @@
           const evaluatedCell = this.getEvaluatedCell(position);
           if (evaluatedCell.type === CellValueType.empty) {
               const cell = this.getters.getCell(position);
-              if (!cell || cell.content === "") {
+              if (!cell || (!cell.isFormula && cell.content === "")) {
                   return undefined;
               }
           }
@@ -39294,9 +39815,9 @@
        */
       getCellsDependingOn(positionIds) {
           const visited = new JetSet();
-          const queue = Array.from(positionIds);
+          const queue = Array.from(positionIds).reverse();
           while (queue.length > 0) {
-              const node = queue.shift();
+              const node = queue.pop();
               visited.add(node);
               const adjacentNodes = this.inverseDependencies.get(node) || new Set();
               for (const adjacentNode of adjacentNodes) {
@@ -39401,7 +39922,7 @@
       constructor(context, getters) {
           this.context = context;
           this.getters = getters;
-          this.compilationParams = buildCompilationParameters(context, getters, (position) => this.computeCell(this.encodePosition(position)));
+          this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
       }
       getEvaluatedCell(position) {
           return (this.evaluatedCells.get(this.encodePosition(position)) ||
@@ -39429,7 +39950,7 @@
           this.formulaDependencies().addDependencies(positionId, dependencies);
       }
       updateCompilationParameters() {
-          this.compilationParams = buildCompilationParameters(this.context, this.getters, (position) => this.computeCell(this.encodePosition(position)));
+          this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
       }
       evaluateCells(positions) {
           const cells = positions.map(this.encodePosition.bind(this));
@@ -39545,15 +40066,21 @@
               this.cellsBeingComputed.delete(cellId);
           }
       }
+      computeAndSave(position) {
+          const positionId = this.encodePosition(position);
+          const evaluatedCell = this.computeCell(positionId);
+          if (!this.evaluatedCells.has(positionId)) {
+              this.setEvaluatedCell(positionId, evaluatedCell);
+          }
+          return evaluatedCell;
+      }
       handleError(e, cell) {
-          if (!(e instanceof Error)) {
-              e = new Error(e);
+          if (!(e instanceof EvaluationError)) {
+              e = new EvaluationError(CellErrorType.GenericError, e.message);
           }
-          const msg = e?.errorType || CellErrorType.GenericError;
-          // apply function name
           const __lastFnCalled = this.compilationParams[2].__lastFnCalled || "";
-          const error = new EvaluationError(msg, e.message.replace("[[FUNCTION_NAME]]", __lastFnCalled), e.logLevel !== undefined ? e.logLevel : CellErrorLevel.error);
-          return errorCell(cell.content, error);
+          e.message = e.message.replace("[[FUNCTION_NAME]]", __lastFnCalled);
+          return errorCell(e);
       }
       computeFormulaCell(cellData) {
           const cellId = cellData.id;
@@ -39861,6 +40388,7 @@
       config;
       static getters = [
           "evaluateFormula",
+          "getCorrespondingFormulaCell",
           "getRangeFormattedValues",
           "getRangeValues",
           "getRangeFormats",
@@ -40257,6 +40785,47 @@
           const style = this.getters.getCellComputedStyle({ sheetId, col, row });
           return style.fillColor || BACKGROUND_CHART_COLOR;
       }
+      exportForExcel(data) {
+          for (const sheet of data.sheets) {
+              if (!sheet.images) {
+                  sheet.images = [];
+              }
+              const sheetFigures = this.getters.getFigures(sheet.id);
+              const figures = [];
+              for (const figure of sheetFigures) {
+                  if (!figure || figure.tag !== "chart") {
+                      continue;
+                  }
+                  const figureId = figure.id;
+                  const figureData = this.getters.getChart(figureId)?.getDefinitionForExcel();
+                  if (figureData) {
+                      figures.push({
+                          ...figure,
+                          data: figureData,
+                      });
+                  }
+                  else {
+                      const chart = this.getters.getChart(figureId);
+                      if (!chart) {
+                          continue;
+                      }
+                      const type = this.getters.getChartType(figureId);
+                      const runtime = this.getters.getChartRuntime(figureId);
+                      const img = chartToImage(runtime, figure, type);
+                      sheet.images.push({
+                          ...figure,
+                          tag: "image",
+                          data: {
+                              mimetype: "image/png",
+                              path: img,
+                              size: { width: figure.width, height: figure.height },
+                          },
+                      });
+                  }
+              }
+              sheet.charts = figures;
+          }
+      }
   }
 
   class EvaluationConditionalFormatPlugin extends UIPlugin {
@@ -40396,7 +40965,7 @@
                   return percentile(rangeValues, Number(threshold.value) / 100, true);
               case "formula":
                   const value = threshold.value && this.getters.evaluateFormula(sheetId, threshold.value);
-                  return !(value instanceof Promise) ? value : null;
+                  return typeof value === "number" ? value : null;
               default:
                   return null;
           }
@@ -40522,10 +41091,13 @@
               }
               const [value0, value1] = rule.values.map((val) => {
                   if (val.startsWith("=")) {
-                      return this.getters.evaluateFormula(target.sheetId, val);
+                      return this.getters.evaluateFormula(target.sheetId, val) ?? "";
                   }
                   return parseLiteral(val, DEFAULT_LOCALE);
               });
+              if (isMatrix(value0) || isMatrix(value1)) {
+                  return false;
+              }
               switch (rule.operator) {
                   case "IsEmpty":
                       return cell.value.toString().trim() === "";
@@ -40714,7 +41286,7 @@
                   const formula = compile(value);
                   const translatedFormula = this.getters.getTranslatedCellFormula(sheetId, offset.col, offset.row, formula, formula.dependencies.map((d) => this.getters.getRangeFromSheetXC(sheetId, d)));
                   const evaluated = this.getters.evaluateFormula(sheetId, translatedFormula);
-                  return evaluated ? evaluated.toString() : "";
+                  return evaluated && !isMatrix(evaluated) ? evaluated.toString() : "";
               }
               catch (e) {
                   return e instanceof EvaluationError ? e.errorType : CellErrorType.GenericError;
@@ -40723,8 +41295,8 @@
       }
   }
 
-  class UIRowSizePlugin extends UIPlugin {
-      static getters = ["getRowSize"];
+  class HeaderSizeUIPlugin extends UIPlugin {
+      static getters = ["getRowSize", "getHeaderSize"];
       tallestCellInRow = {};
       ctx = document.createElement("canvas").getContext("2d");
       handle(cmd) {
@@ -40803,6 +41375,11 @@
               this.tallestCellInRow[sheetId][row]?.size ??
               DEFAULT_CELL_HEIGHT);
       }
+      getHeaderSize(sheetId, dimension, index) {
+          return dimension === "ROW"
+              ? this.getRowSize(sheetId, index)
+              : this.getters.getColSize(sheetId, index);
+      }
       updateRowSizeForCellChange(sheetId, row, col) {
           const tallestCellInRow = this.tallestCellInRow[sheetId]?.[row];
           if (tallestCellInRow?.cell.col === col) {
@@ -41873,7 +42450,7 @@
       { match: isZoneDependent, fn: transformZoneDependentCommand },
       { match: isPositionDependent, fn: transformPosition },
       { match: isHeadersDependant, fn: transformHeaders },
-      { match: isRangeDependant, fn: transformRangeData },
+      { match: isRangeDependant, fn: transformRangesDependentCommand },
   ];
   /**
    * Get the result of applying the operation transformations on the given command
@@ -41969,23 +42546,13 @@
       }
       return "IGNORE_COMMAND";
   }
-  function transformRangeData(toTransform, executed) {
+  function transformRangesDependentCommand(toTransform, executed) {
       if (!("sheetId" in executed)) {
           return toTransform;
       }
-      const ranges = [];
-      const deletedSheet = executed.type === "DELETE_SHEET" && executed.sheetId;
-      for (const range of toTransform.ranges) {
-          if (range._sheetId !== executed.sheetId) {
-              ranges.push({ ...range, _zone: range._zone });
-          }
-          else {
-              const newZone = transformZone(range._zone, executed);
-              if (newZone && deletedSheet !== range._sheetId) {
-                  ranges.push({ ...range, _zone: newZone });
-              }
-          }
-      }
+      const ranges = toTransform.ranges
+          .map((range) => transformRangeData(range, executed))
+          .filter(isDefined$1);
       if (!ranges.length) {
           return "IGNORE_COMMAND";
       }
@@ -43130,6 +43697,10 @@
           if (!newRangesXC) {
               return;
           }
+          if (newRangesXC.length === 0) {
+              this.dispatch("REMOVE_CONDITIONAL_FORMAT", { id: cf.id, sheetId });
+              return;
+          }
           this.dispatch("ADD_CONDITIONAL_FORMAT", {
               cf: {
                   id: cf.id,
@@ -44045,7 +44616,7 @@
           }
       }
       drawTexts(renderingContext) {
-          const { ctx, thinLineWidth } = renderingContext;
+          const { ctx } = renderingContext;
           ctx.textBaseline = "top";
           let currentFont;
           for (let box of this.boxes) {
@@ -44090,23 +44661,7 @@
                   // use the horizontal and the vertical start points to:
                   // fill text / fill strikethrough / fill underline
                   for (let brokenLine of box.content.textLines) {
-                      ctx.fillText(brokenLine, Math.round(x), Math.round(y));
-                      if (style.strikethrough || style.underline) {
-                          const lineWidth = computeTextWidth(ctx, brokenLine, style);
-                          let _x = x;
-                          if (align === "right") {
-                              _x -= lineWidth;
-                          }
-                          else if (align === "center") {
-                              _x -= lineWidth / 2;
-                          }
-                          if (style.strikethrough) {
-                              ctx.fillRect(_x, y + textLineHeight / 2, lineWidth, 2.6 * thinLineWidth);
-                          }
-                          if (style.underline) {
-                              ctx.fillRect(_x, y + textLineHeight + 1, lineWidth, 1.3 * thinLineWidth);
-                          }
-                      }
+                      drawDecoratedText(ctx, brokenLine, { x: Math.round(x), y: Math.round(y) }, style.underline, style.strikethrough);
                       y += MIN_CELL_TEXT_MARGIN + textLineHeight;
                   }
                   if (box.clipRect) {
@@ -45230,9 +45785,6 @@
           "getTextWidth",
           "getCellText",
           "getCellMultiLineText",
-          "getColDimensions",
-          "getRowDimensions",
-          "getColRowOffset",
       ];
       ctx = document.createElement("canvas").getContext("2d");
       // ---------------------------------------------------------------------------
@@ -45317,55 +45869,6 @@
           const text = this.getters.getCellText(position, this.getters.shouldShowFormulas());
           return splitTextToWidth(this.ctx, text, style, width);
       }
-      /**
-       * Returns the size, start and end coordinates of a column on an unfolded sheet
-       */
-      getColDimensions(sheetId, col) {
-          const start = this.getColRowOffset("COL", 0, col, sheetId);
-          const size = this.getters.getColSize(sheetId, col);
-          const isColHidden = this.getters.isColHidden(sheetId, col);
-          return {
-              start,
-              size,
-              end: start + (isColHidden ? 0 : size),
-          };
-      }
-      /**
-       * Returns the size, start and end coordinates of a row an unfolded sheet
-       */
-      getRowDimensions(sheetId, row) {
-          const start = this.getColRowOffset("ROW", 0, row, sheetId);
-          const size = this.getters.getRowSize(sheetId, row);
-          const isRowHidden = this.getters.isRowHidden(sheetId, row);
-          return {
-              start,
-              size: size,
-              end: start + (isRowHidden ? 0 : size),
-          };
-      }
-      /**
-       * Returns the offset of a header (determined by the dimension) at the given index
-       * based on the referenceIndex given. If start === 0, this method will return
-       * the start attribute of the header.
-       *
-       * i.e. The size from A to B is the distance between A.start and B.end
-       */
-      getColRowOffset(dimension, referenceIndex, index, sheetId = this.getters.getActiveSheetId()) {
-          if (index < referenceIndex) {
-              return -this.getColRowOffset(dimension, index, referenceIndex);
-          }
-          let offset = 0;
-          for (let i = referenceIndex; i < index; i++) {
-              if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
-                  continue;
-              }
-              offset +=
-                  dimension === "COL"
-                      ? this.getters.getColSize(sheetId, i)
-                      : this.getters.getRowSize(sheetId, i);
-          }
-          return offset;
-      }
       doesCellHaveGridIcon(position) {
           const isFilterHeader = this.getters.isFilterHeader(position);
           const hasListIcon = !this.getters.isReadonly() && this.getters.cellHasListDataValidationIcon(position);
@@ -46191,6 +46694,20 @@
                   const state = new ClipboardOsState(cmd.text, this.getters, this.dispatch, this.selection);
                   return state.isPasteAllowed(cmd.target, { pasteOption: cmd.pasteOption });
               }
+              case "COPY_PASTE_CELLS_ABOVE": {
+                  const zones = this.getters.getSelectedZones();
+                  if (zones.length > 1 || (zones[0].top === 0 && zones[0].bottom === 0)) {
+                      return "InvalidCopyPasteSelection" /* CommandResult.InvalidCopyPasteSelection */;
+                  }
+                  break;
+              }
+              case "COPY_PASTE_CELLS_ON_LEFT": {
+                  const zones = this.getters.getSelectedZones();
+                  if (zones.length > 1 || (zones[0].left === 0 && zones[0].right === 0)) {
+                      return "InvalidCopyPasteSelection" /* CommandResult.InvalidCopyPasteSelection */;
+                  }
+                  break;
+              }
               case "INSERT_CELL": {
                   const { cut, paste } = this.getInsertCellsTargets(cmd.zone, cmd.shiftDimension);
                   const state = this.getClipboardStateForCopyCells(cut, "CUT");
@@ -46230,6 +46747,40 @@
                       this.status = "invisible";
                   }
                   break;
+              case "COPY_PASTE_CELLS_ABOVE":
+                  {
+                      const zone = this.getters.getSelectedZone();
+                      const multipleRowsInSelection = zone.top !== zone.bottom;
+                      const copyTarget = {
+                          ...zone,
+                          bottom: multipleRowsInSelection ? zone.top : zone.top - 1,
+                          top: multipleRowsInSelection ? zone.top : zone.top - 1,
+                      };
+                      const state = this.getClipboardStateForCopyCells([copyTarget], "COPY");
+                      state.paste([zone], {
+                          pasteOption: undefined,
+                          shouldPasteCF: true,
+                          selectTarget: true,
+                      });
+                  }
+                  break;
+              case "COPY_PASTE_CELLS_ON_LEFT":
+                  {
+                      const zone = this.getters.getSelectedZone();
+                      const multipleColsInSelection = zone.left !== zone.right;
+                      const copyTarget = {
+                          ...zone,
+                          right: multipleColsInSelection ? zone.left : zone.left - 1,
+                          left: multipleColsInSelection ? zone.left : zone.left - 1,
+                      };
+                      const state = this.getClipboardStateForCopyCells([copyTarget], "COPY");
+                      state.paste([zone], {
+                          pasteOption: undefined,
+                          shouldPasteCF: true,
+                          selectTarget: true,
+                      });
+                  }
+                  break;
               case "CLEAN_CLIPBOARD_HIGHLIGHT":
                   this.status = "invisible";
                   break;
@@ -46909,7 +47460,15 @@
                   return cell?.content || "";
               case CellValueType.number:
                   if (format && isDateTimeFormat(format)) {
-                      return formattedValue;
+                      if (parseDateTime(formattedValue, locale) !== null) {
+                          // formatted string can be parsed again
+                          return formattedValue;
+                      }
+                      // display a simplified and parsable string otherwise
+                      const timeFormat = Number.isInteger(value)
+                          ? locale.dateFormat
+                          : locale.dateFormat + " " + locale.timeFormat;
+                      return formatValue(value, { locale, format: timeFormat });
                   }
                   return this.numberComposerContent(value, format, locale);
           }
@@ -47175,6 +47734,9 @@
               const cellValue = content.startsWith("=")
                   ? this.getters.evaluateFormula(this.sheetId, content)
                   : parseLiteral(content, this.getters.getLocale());
+              if (isMatrix(cellValue)) {
+                  return "Success" /* CommandResult.Success */;
+              }
               const validationResult = this.getters.getValidationResultForCellValue(cellValue, cellPosition);
               if (!validationResult.isValid && validationResult.rule.isBlocking) {
                   return "BlockingValidationRule" /* CommandResult.BlockingValidationRule */;
@@ -47464,6 +48026,7 @@
           "isSingleColSelected",
           "getElementsFromSelection",
           "tryGetActiveSheetId",
+          "isGridSelectionActive",
       ];
       gridSelection = {
           anchor: {
@@ -47549,10 +48112,7 @@
           switch (cmd.type) {
               case "START":
                   const firstSheetId = this.getters.getVisibleSheetIds()[0];
-                  this.dispatch("ACTIVATE_SHEET", {
-                      sheetIdTo: firstSheetId,
-                      sheetIdFrom: firstSheetId,
-                  });
+                  this.activateSheet(firstSheetId, firstSheetId);
                   const { col, row } = this.getters.getNextVisibleCellPosition({
                       sheetId: firstSheetId,
                       col: 0,
@@ -47565,25 +48125,7 @@
                   this.moveClient({ sheetId: firstSheetId, col: 0, row: 0 });
                   break;
               case "ACTIVATE_SHEET": {
-                  if (!this.getters.isSheetVisible(cmd.sheetIdTo)) {
-                      this.dispatch("SHOW_SHEET", { sheetId: cmd.sheetIdTo });
-                  }
-                  this.setActiveSheet(cmd.sheetIdTo);
-                  this.sheetsData[cmd.sheetIdFrom] = {
-                      gridSelection: deepCopy(this.gridSelection),
-                  };
-                  if (cmd.sheetIdTo in this.sheetsData) {
-                      Object.assign(this, this.sheetsData[cmd.sheetIdTo]);
-                      this.selection.resetDefaultAnchor(this, deepCopy(this.gridSelection.anchor));
-                  }
-                  else {
-                      const { col, row } = this.getters.getNextVisibleCellPosition({
-                          sheetId: cmd.sheetIdTo,
-                          col: 0,
-                          row: 0,
-                      });
-                      this.selectCell(col, row);
-                  }
+                  this.activateSheet(cmd.sheetIdFrom, cmd.sheetIdTo);
                   break;
               }
               case "REMOVE_COLUMNS_ROWS": {
@@ -47673,6 +48215,9 @@
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
+      isGridSelectionActive() {
+          return this.selection.isListening(this);
+      }
       getActiveSheet() {
           return this.activeSheet;
       }
@@ -47757,11 +48302,19 @@
           }
       }
       getStatisticFnResults() {
-          // get deduplicated cells in zones
-          const cells = new Set(this.gridSelection.zones
-              .map((zone) => this.getters.getEvaluatedCellsInZone(this.getters.getActiveSheetId(), zone))
-              .flat()
-              .filter((cell) => cell.type !== CellValueType.empty));
+          const sheetId = this.getters.getActiveSheetId();
+          const cells = new Set();
+          for (const zone of this.gridSelection.zones) {
+              for (const { col, row } of positions(zone)) {
+                  if (this.getters.isRowHidden(sheetId, row) || this.getters.isColHidden(sheetId, col)) {
+                      continue; // Skip hidden cells
+                  }
+                  const evaluatedCell = this.getters.getEvaluatedCell({ sheetId, col, row });
+                  if (evaluatedCell.type !== CellValueType.empty) {
+                      cells.add(evaluatedCell);
+                  }
+              }
+          }
           let cellsTypes = new Set();
           let cellsValues = [];
           for (let cell of cells) {
@@ -47839,6 +48392,27 @@
       // ---------------------------------------------------------------------------
       // Other
       // ---------------------------------------------------------------------------
+      activateSheet(sheetIdFrom, sheetIdTo) {
+          if (!this.getters.isSheetVisible(sheetIdTo)) {
+              this.dispatch("SHOW_SHEET", { sheetId: sheetIdTo });
+          }
+          this.setActiveSheet(sheetIdTo);
+          this.sheetsData[sheetIdFrom] = {
+              gridSelection: deepCopy(this.gridSelection),
+          };
+          if (sheetIdTo in this.sheetsData) {
+              Object.assign(this, this.sheetsData[sheetIdTo]);
+              this.selection.resetDefaultAnchor(this, deepCopy(this.gridSelection.anchor));
+          }
+          else {
+              const { col, row } = this.getters.getNextVisibleCellPosition({
+                  sheetId: sheetIdTo,
+                  col: 0,
+                  row: 0,
+              });
+              this.selectCell(col, row);
+          }
+      }
       /**
        * Ensure selections are not outside sheet boundaries.
        * They are clipped to fit inside the sheet if needed.
@@ -47950,9 +48524,7 @@
           const toRemove = isBasedBefore ? cmd.elements.map((el) => el + thickness) : cmd.elements;
           let currentIndex = cmd.base;
           for (const element of toRemove) {
-              const size = cmd.dimension === "COL"
-                  ? this.getters.getColSize(cmd.sheetId, element)
-                  : this.getters.getRowSize(cmd.sheetId, element);
+              const size = this.getters.getHeaderSize(cmd.sheetId, cmd.dimension, element);
               this.dispatch("RESIZE_COLUMNS_ROWS", {
                   dimension: cmd.dimension,
                   sheetId: cmd.sheetId,
@@ -48133,22 +48705,22 @@
        * visible cell.
        * It returns -1 if no column is found.
        */
-      getColIndex(x, absolute = false) {
+      getColIndex(x) {
           if (x < this.offsetCorrectionX || x > this.offsetCorrectionX + this.viewportWidth) {
               return -1;
           }
-          return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left, absolute);
+          return this.searchHeaderIndex("COL", x - this.offsetCorrectionX, this.left);
       }
       /**
        * Return the index of a row given an offset y, based on the pane top
        * visible cell.
        * It returns -1 if no row is found.
        */
-      getRowIndex(y, absolute = false) {
+      getRowIndex(y) {
           if (y < this.offsetCorrectionY || y > this.offsetCorrectionY + this.viewportHeight) {
               return -1;
           }
-          return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top, absolute);
+          return this.searchHeaderIndex("ROW", y - this.offsetCorrectionY, this.top);
       }
       /**
        * This function will make sure that the provided cell position (or current selected position) is part of
@@ -48179,7 +48751,7 @@
                   finalTarget++;
               }
               const finalTargetEnd = this.getters.getColDimensions(sheetId, finalTarget).end;
-              const startIndex = this.searchHeaderIndex("COL", finalTargetEnd - this.viewportWidth - this.offsetCorrectionX, this.boundaries.left, true);
+              const startIndex = this.searchHeaderIndex("COL", finalTargetEnd - this.viewportWidth - this.offsetCorrectionX, this.boundaries.left);
               this.offsetX =
                   this.getters.getColDimensions(sheetId, startIndex).end - this.offsetCorrectionX;
               this.offsetScrollbarX = this.offsetX;
@@ -48206,7 +48778,7 @@
                   finalTarget++;
               }
               const finalTargetEnd = this.getters.getRowDimensions(sheetId, finalTarget).end;
-              const startIndex = this.searchHeaderIndex("ROW", finalTargetEnd - this.viewportHeight - this.offsetCorrectionY, this.boundaries.top, true);
+              const startIndex = this.searchHeaderIndex("ROW", finalTargetEnd - this.viewportHeight - this.offsetCorrectionY, this.boundaries.top);
               this.offsetY =
                   this.getters.getRowDimensions(sheetId, startIndex).end - this.offsetCorrectionY;
               this.offsetScrollbarY = this.offsetY;
@@ -48262,21 +48834,15 @@
               !this.getters.isRowHidden(this.sheetId, row));
       }
       // PRIVATE
-      searchHeaderIndex(dimension, position, startIndex = 0, absolute = false) {
+      searchHeaderIndex(dimension, position, startIndex = 0) {
           let size = 0;
           const sheetId = this.sheetId;
           const headers = this.getters.getNumberHeaders(sheetId, dimension);
           for (let i = startIndex; i <= headers - 1; i++) {
-              const isHiddenInViewport = !absolute && dimension === "COL"
-                  ? i < this.left && i > this.right
-                  : i < this.top && i > this.bottom;
-              if (this.getters.isHeaderHidden(sheetId, dimension, i) || isHiddenInViewport) {
+              if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
                   continue;
               }
-              size +=
-                  dimension === "COL"
-                      ? this.getters.getColSize(sheetId, i)
-                      : this.getters.getRowSize(sheetId, i);
+              size += this.getters.getHeaderSize(sheetId, dimension, i);
               if (size > position) {
                   return i;
               }
@@ -48310,8 +48876,8 @@
                   this.offsetScrollbarX = Math.max(0, viewportWidth - this.viewportWidth);
               }
           }
-          this.left = this.getColIndex(this.offsetScrollbarX, true);
-          this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth, true);
+          this.left = this.getColIndex(this.offsetScrollbarX);
+          this.right = this.getColIndex(this.offsetScrollbarX + this.viewportWidth);
           if (this.right === -1) {
               this.right = this.boundaries.right;
           }
@@ -48327,8 +48893,8 @@
                   this.offsetScrollbarY = Math.max(0, paneHeight - this.viewportHeight);
               }
           }
-          this.top = this.getRowIndex(this.offsetScrollbarY, true);
-          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportHeight, true);
+          this.top = this.getRowIndex(this.offsetScrollbarY);
+          this.bottom = this.getRowIndex(this.offsetScrollbarY + this.viewportHeight);
           if (this.bottom === -1) {
               this.bottom = this.boundaries.bottom;
           }
@@ -48443,6 +49009,7 @@
       gridOffsetX = 0;
       gridOffsetY = 0;
       sheetsWithDirtyViewports = new Set();
+      shouldAdjustViewports = false;
       // ---------------------------------------------------------------------------
       // Command Handling
       // ---------------------------------------------------------------------------
@@ -48474,11 +49041,19 @@
               const sheetId = this.getters.getActiveSheetId();
               col = Math.min(col, this.getters.getNumberCols(sheetId) - 1);
               row = Math.min(row, this.getters.getNumberRows(sheetId) - 1);
-              this.refreshViewport(this.getters.getActiveSheetId(), { col, row });
+              if (!this.sheetsWithDirtyViewports.has(sheetId)) {
+                  this.refreshViewport(this.getters.getActiveSheetId(), { col, row });
+              }
           }
       }
       handle(cmd) {
           this.cleanViewports();
+          // changing the evaluation can hide/show rows because of data filters
+          if (invalidateEvaluationCommands.has(cmd.type)) {
+              for (const sheetId of this.getters.getSheetIds()) {
+                  this.sheetsWithDirtyViewports.add(sheetId);
+              }
+          }
           switch (cmd.type) {
               case "START":
                   this.selection.observe(this, {
@@ -48488,7 +49063,10 @@
                   break;
               case "UNDO":
               case "REDO":
-                  this.resetSheetViews();
+                  for (const sheetId of this.getters.getSheetIds()) {
+                      this.sheetsWithDirtyViewports.add(sheetId);
+                  }
+                  this.shouldAdjustViewports = true;
                   break;
               case "RESIZE_SHEETVIEW":
                   this.resizeSheetView(cmd.height, cmd.width, cmd.gridOffsetX, cmd.gridOffsetY);
@@ -48509,12 +49087,17 @@
                   this.shiftVertically(shiftedOffsetY);
                   break;
               }
+              case "REMOVE_FILTER_TABLE":
+              case "UPDATE_FILTER":
+                  this.sheetsWithDirtyViewports.add(cmd.sheetId);
+                  break;
               case "REMOVE_COLUMNS_ROWS":
               case "RESIZE_COLUMNS_ROWS":
               case "HIDE_COLUMNS_ROWS":
               case "ADD_COLUMNS_ROWS":
               case "UNHIDE_COLUMNS_ROWS":
-              case "UPDATE_FILTER":
+              case "UNGROUP_HEADERS":
+              case "GROUP_HEADERS":
               case "FOLD_HEADER_GROUP":
               case "UNFOLD_HEADER_GROUP":
               case "FOLD_HEADER_GROUPS_IN_ZONE":
@@ -48528,12 +49111,13 @@
               case "UPDATE_CELL":
                   // update cell content or format can change hidden rows because of data filters
                   if ("content" in cmd || "format" in cmd || cmd.style?.fontSize !== undefined) {
-                      this.sheetsWithDirtyViewports.add(cmd.sheetId);
+                      for (const sheetId of this.getters.getSheetIds()) {
+                          this.sheetsWithDirtyViewports.add(sheetId);
+                      }
                   }
                   break;
               case "ACTIVATE_SHEET":
-                  this.setViewports();
-                  this.refreshViewport(cmd.sheetIdTo);
+                  this.sheetsWithDirtyViewports.add(cmd.sheetIdTo);
                   break;
               case "UNFREEZE_ROWS":
               case "UNFREEZE_COLUMNS":
@@ -48554,8 +49138,16 @@
       finalize() {
           for (const sheetId of this.sheetsWithDirtyViewports) {
               this.resetViewports(sheetId);
+              if (this.shouldAdjustViewports) {
+                  const position = this.getters.getSheetPosition(sheetId);
+                  const viewports = this.getSubViewports(sheetId);
+                  Object.values(viewports).forEach((viewport) => {
+                      viewport.adjustPosition(position);
+                  });
+              }
           }
           this.sheetsWithDirtyViewports = new Set();
+          this.shouldAdjustViewports = false;
           this.setViewports();
       }
       setViewports() {
@@ -48673,10 +49265,7 @@
               if (!visibleIndexes.includes(i)) {
                   continue;
               }
-              offset +=
-                  dimension === "COL"
-                      ? this.getters.getColSize(sheetId, i)
-                      : this.getters.getRowSize(sheetId, i);
+              offset += this.getters.getHeaderSize(sheetId, dimension, i);
           }
           return offset;
       }
@@ -48849,16 +49438,6 @@
               }
           }
       }
-      resetSheetViews() {
-          for (let sheetId of Object.keys(this.viewports)) {
-              const position = this.getters.getSheetPosition(sheetId);
-              this.resetViewports(sheetId);
-              const viewports = this.getSubViewports(sheetId);
-              Object.values(viewports).forEach((viewport) => {
-                  viewport.adjustPosition(position);
-              });
-          }
-      }
       resizeSheetView(height, width, gridOffsetX = 0, gridOffsetY = 0) {
           this.sheetViewHeight = height;
           this.sheetViewWidth = width;
@@ -48995,6 +49574,120 @@
       }
   }
 
+  class HeaderPositionsUIPlugin extends UIPlugin {
+      static getters = ["getColDimensions", "getRowDimensions", "getColRowOffset"];
+      headerPositions = {};
+      isDirty = true;
+      handle(cmd) {
+          if (invalidateEvaluationCommands.has(cmd.type)) {
+              this.headerPositions = {};
+              this.isDirty = true;
+          }
+          switch (cmd.type) {
+              case "START":
+                  for (const sheetId of this.getters.getSheetIds()) {
+                      this.headerPositions[sheetId] = this.computeHeaderPositionsOfSheet(sheetId);
+                  }
+                  break;
+              case "UPDATE_CELL":
+                  if ("content" in cmd || "format" in cmd || cmd.style?.fontSize !== undefined) {
+                      this.headerPositions = {};
+                      this.isDirty = true;
+                  }
+                  break;
+              case "UPDATE_FILTER":
+              case "REMOVE_FILTER_TABLE":
+                  this.headerPositions = {};
+                  this.isDirty = true;
+                  break;
+              case "REMOVE_COLUMNS_ROWS":
+              case "RESIZE_COLUMNS_ROWS":
+              case "HIDE_COLUMNS_ROWS":
+              case "ADD_COLUMNS_ROWS":
+              case "UNHIDE_COLUMNS_ROWS":
+              case "FOLD_HEADER_GROUP":
+              case "UNFOLD_HEADER_GROUP":
+              case "FOLD_HEADER_GROUPS_IN_ZONE":
+              case "UNFOLD_HEADER_GROUPS_IN_ZONE":
+              case "UNFOLD_ALL_HEADER_GROUPS":
+              case "FOLD_ALL_HEADER_GROUPS":
+              case "UNGROUP_HEADERS":
+              case "GROUP_HEADERS":
+              case "CREATE_SHEET":
+                  this.headerPositions[cmd.sheetId] = this.computeHeaderPositionsOfSheet(cmd.sheetId);
+                  break;
+              case "DUPLICATE_SHEET":
+                  this.headerPositions[cmd.sheetIdTo] = deepCopy(this.headerPositions[cmd.sheetId]);
+                  break;
+          }
+      }
+      finalize() {
+          if (this.isDirty) {
+              for (const sheetId of this.getters.getSheetIds()) {
+                  this.headerPositions[sheetId] = this.computeHeaderPositionsOfSheet(sheetId);
+              }
+              this.isDirty = false;
+          }
+      }
+      /**
+       * Returns the size, start and end coordinates of a column on an unfolded sheet
+       */
+      getColDimensions(sheetId, col) {
+          const start = this.headerPositions[sheetId]["COL"][col];
+          const size = this.getters.getColSize(sheetId, col);
+          const isColHidden = this.getters.isColHidden(sheetId, col);
+          return {
+              start,
+              size,
+              end: start + (isColHidden ? 0 : size),
+          };
+      }
+      /**
+       * Returns the size, start and end coordinates of a row an unfolded sheet
+       */
+      getRowDimensions(sheetId, row) {
+          const start = this.headerPositions[sheetId]["ROW"][row];
+          const size = this.getters.getRowSize(sheetId, row);
+          const isRowHidden = this.getters.isRowHidden(sheetId, row);
+          return {
+              start,
+              size: size,
+              end: start + (isRowHidden ? 0 : size),
+          };
+      }
+      /**
+       * Returns the offset of a header (determined by the dimension) at the given index
+       * based on the referenceIndex given. If start === 0, this method will return
+       * the start attribute of the header.
+       *
+       * i.e. The size from A to B is the distance between A.start and B.end
+       */
+      getColRowOffset(dimension, referenceIndex, index, sheetId = this.getters.getActiveSheetId()) {
+          const referencePosition = this.headerPositions[sheetId][dimension][referenceIndex];
+          const position = this.headerPositions[sheetId][dimension][index];
+          return position - referencePosition;
+      }
+      computeHeaderPositionsOfSheet(sheetId) {
+          return {
+              COL: this.computePositions(sheetId, "COL"),
+              ROW: this.computePositions(sheetId, "ROW"),
+          };
+      }
+      computePositions(sheetId, dimension) {
+          const positions = {};
+          let offset = 0;
+          // loop on number of headers +1 so the position of (last header + 1) is the end of the sheet
+          for (let i = 0; i < this.getters.getNumberHeaders(sheetId, dimension) + 1; i++) {
+              positions[i] = offset;
+              if (this.getters.isHeaderHidden(sheetId, dimension, i)) {
+                  continue;
+              }
+              offset += this.getters.getHeaderSize(sheetId, dimension, i);
+          }
+          return positions;
+      }
+  }
+
   const corePluginRegistry = new Registry()
       .add("settings", SettingsPlugin)
       .add("sheet", SheetPlugin)
@@ -49013,7 +49706,6 @@
   // Plugins which handle a specific feature, without handling any core commands
   const featurePluginRegistry = new Registry()
       .add("ui_sheet", SheetUIPlugin)
-      .add("header_visibility_ui", HeaderVisibilityUIPlugin)
       .add("ui_options", UIOptionsPlugin)
       .add("selectionInputManager", SelectionInputsManagerPlugin)
       .add("highlight", HighlightPlugin)
@@ -49032,6 +49724,8 @@
   const statefulUIPluginRegistry = new Registry()
       .add("selection", GridSelectionPlugin)
       .add("evaluation_filter", FilterEvaluationPlugin)
+      .add("header_visibility_ui", HeaderVisibilityUIPlugin)
+      .add("header_positions", HeaderPositionsUIPlugin)
       .add("viewport", SheetViewPlugin)
       .add("clipboard", ClipboardPlugin)
       .add("edition", EditionPlugin);
@@ -49040,7 +49734,7 @@
       .add("evaluation", EvaluationPlugin)
       .add("evaluation_chart", EvaluationChartPlugin)
       .add("evaluation_cf", EvaluationConditionalFormatPlugin)
-      .add("row_size", UIRowSizePlugin)
+      .add("row_size", HeaderSizeUIPlugin)
       .add("custom_colors", CustomColorsPlugin)
       .add("data_validation_ui", EvaluationDataValidationPlugin);
 
@@ -50402,6 +51096,7 @@
   css /* scss */ `
   .o-border-selector {
     padding: 4px;
+    background-color: white;
   }
   .o-divider {
     border-right: 1px solid #e0e2e4;
@@ -50762,6 +51457,7 @@
     line-height: 1.2;
     font-size: 13px;
     font-weight: 500;
+    background-color: #fff;
 
     .o-topbar-top {
       border-bottom: 1px solid ${SEPARATOR_COLOR};
@@ -52624,6 +53320,9 @@
               },
           });
       }
+      isListening(owner) {
+          return this.stream.isListening(owner);
+      }
       /**
        * Process a new anchor selection event. If the new anchor is inside
        * the sheet boundaries, the event is pushed to the event stream to
@@ -55012,8 +55711,10 @@
       toString,
       toXC,
       toZone,
+      toUnboundedZone,
       toCartesian,
       numberToLetters,
+      lettersToNumber,
       UuidGenerator,
       formatValue,
       createCurrencyFormat,
@@ -55035,6 +55736,7 @@
       genericRepeat,
       createAction,
       createActions,
+      transformRangeData,
   };
   const links = {
       isMarkdownLink,
@@ -55049,7 +55751,7 @@
       ChartJsComponent,
       Grid,
       GridOverlay,
-      ScorecardChart: ScorecardChart$1,
+      ScorecardChart,
       LineConfigPanel,
       LineBarPieDesignPanel,
       BarConfigPanel,
@@ -55060,6 +55762,7 @@
       ScorecardChartDesignPanel,
       FigureComponent,
       Menu,
+      SelectionInput,
   };
   const hooks = {
       useDragAndDropListItems,
@@ -55110,9 +55813,9 @@
   exports.tokenize = tokenize;
 
 
-  __info__.version = "16.5.0-alpha.9";
-  __info__.date = "2023-10-03T13:16:46.370Z";
-  __info__.hash = "c46de91";
+  __info__.version = "17.0.0";
+  __info__.date = "2023-10-27T06:53:09.229Z";
+  __info__.hash = "c0a34c2";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);