@odoo/o-spreadsheet 16.5.0-alpha.10 → 16.5.0-alpha.12

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.10
- * @date 2023-10-10T07:31:20.876Z
- * @hash 4dc340f
+ * @version 16.5.0-alpha.12
+ * @date 2023-10-20T15:12:28.296Z
+ * @hash 430f090
  */
 
 (function (exports, owl) {
@@ -2059,6 +2059,7 @@
       CommandResult["InvalidDataValidationCriterionValue"] = "InvalidDataValidationCriterionValue";
       CommandResult["InvalidNumberOfCriterionValues"] = "InvalidNumberOfCriterionValues";
       CommandResult["BlockingValidationRule"] = "BlockingValidationRule";
+      CommandResult["InvalidCopyPasteSelection"] = "InvalidCopyPasteSelection";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   const DEFAULT_LOCALES = [
@@ -4500,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
@@ -4563,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");
@@ -4585,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;
@@ -4630,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 */
@@ -4784,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;
@@ -4853,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;
       }
@@ -4941,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;
@@ -4981,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,
   };
 
@@ -5507,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 */ `
@@ -6240,6 +6962,10 @@
       cursor: pointer;
       user-select: none;
 
+      .o-menu-item-name {
+        min-width: 40%;
+      }
+
       &.o-menu-root {
         display: flex;
         justify-content: space-between;
@@ -16375,410 +17101,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) {
@@ -17121,6 +17448,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;
@@ -18191,172 +18563,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.
@@ -18394,11 +18600,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,
   });
@@ -18417,7 +18623,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
@@ -19159,6 +19365,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(),
@@ -20270,109 +20477,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",
@@ -20625,9 +20849,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,
@@ -20638,6 +20869,7 @@
     formatWrappingOverflow: formatWrappingOverflow,
     formatWrappingWrap: formatWrappingWrap,
     incraseDecimalPlaces: incraseDecimalPlaces,
+    moreFormats: moreFormats,
     textColor: textColor
   });
 
@@ -21095,6 +21327,10 @@
       ...formatNumberDuration,
       sequence: 100,
       separator: true,
+  })
+      .add("more_formats", {
+      ...moreFormats,
+      sequence: 110,
   });
   const formatNumberMenuItemSpec = {
       name: _t("More formats"),
@@ -22996,7 +23232,7 @@
           });
       }
       canUpdateChart(figureId, updateDefinition) {
-          if (figureId !== this.figureId) {
+          if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
               return;
           }
           const definition = {
@@ -24363,6 +24599,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;
@@ -25820,6 +26094,10 @@
       title: _t("Data validation"),
       Body: DataValidationPanel,
   });
+  sidePanelRegistry.add("MoreFormats", {
+      title: _t("More date formats"),
+      Body: MoreFormatsPanel,
+  });
 
   class TopBarComponentRegistry extends Registry {
       mapping = {};
@@ -28765,7 +29043,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") {
@@ -29846,6 +30131,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"),
@@ -32280,12 +32567,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(" "));
@@ -35395,7 +35685,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) {
@@ -35415,24 +35705,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
       // ---------------------------------------------------------------------------
@@ -36954,6 +37226,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) {
@@ -36967,7 +37242,7 @@
                       }
                   }
               }
-              sheet.images = images;
+              sheet.images = [...sheet.images, ...images];
           }
       }
       getAllImages() {
@@ -39910,6 +40185,7 @@
       config;
       static getters = [
           "evaluateFormula",
+          "getCorrespondingFormulaCell",
           "getRangeFormattedValues",
           "getRangeValues",
           "getRangeFormats",
@@ -40306,6 +40582,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 {
@@ -41922,7 +42239,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
@@ -42018,23 +42335,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";
       }
@@ -43179,6 +43486,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,
@@ -44094,7 +44405,7 @@
           }
       }
       drawTexts(renderingContext) {
-          const { ctx, thinLineWidth } = renderingContext;
+          const { ctx } = renderingContext;
           ctx.textBaseline = "top";
           let currentFont;
           for (let box of this.boxes) {
@@ -44139,23 +44450,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) {
@@ -46240,6 +46535,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");
@@ -46279,6 +46588,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;
@@ -46958,7 +47301,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);
           }
@@ -47513,6 +47864,7 @@
           "isSingleColSelected",
           "getElementsFromSelection",
           "tryGetActiveSheetId",
+          "isGridSelectionActive",
       ];
       gridSelection = {
           anchor: {
@@ -47722,6 +48074,9 @@
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
+      isGridSelectionActive() {
+          return this.selection.isListening(this);
+      }
       getActiveSheet() {
           return this.activeSheet;
       }
@@ -47806,11 +48161,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) {
@@ -52673,6 +53036,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
@@ -55061,8 +55427,10 @@
       toString,
       toXC,
       toZone,
+      toUnboundedZone,
       toCartesian,
       numberToLetters,
+      lettersToNumber,
       UuidGenerator,
       formatValue,
       createCurrencyFormat,
@@ -55084,6 +55452,7 @@
       genericRepeat,
       createAction,
       createActions,
+      transformRangeData,
   };
   const links = {
       isMarkdownLink,
@@ -55098,7 +55467,7 @@
       ChartJsComponent,
       Grid,
       GridOverlay,
-      ScorecardChart: ScorecardChart$1,
+      ScorecardChart,
       LineConfigPanel,
       LineBarPieDesignPanel,
       BarConfigPanel,
@@ -55109,6 +55478,7 @@
       ScorecardChartDesignPanel,
       FigureComponent,
       Menu,
+      SelectionInput,
   };
   const hooks = {
       useDragAndDropListItems,
@@ -55159,9 +55529,9 @@
   exports.tokenize = tokenize;
 
 
-  __info__.version = "16.5.0-alpha.10";
-  __info__.date = "2023-10-10T07:31:20.876Z";
-  __info__.hash = "4dc340f";
+  __info__.version = "16.5.0-alpha.12";
+  __info__.date = "2023-10-20T15:12:28.296Z";
+  __info__.hash = "430f090";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);