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

package/dist/o-spreadsheet.esm.js

@@ -2,12 +2,12 @@
 /**
  * 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.11
+ * @date 2023-10-19T14:26:01.790Z
+ * @hash 4b42059
  */
 
-import { Component, useRef, onMounted, onPatched, onWillPatch, useState, onWillUpdateProps, useComponent, useEffect, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
+import { Component, useRef, onMounted, useEffect, onWillPatch, useState, onWillUpdateProps, onPatched, useComponent, useExternalListener, onWillUnmount, onWillStart, xml, useChildSubEnv, useSubEnv, markRaw } from '@odoo/owl';
 
 // define a mock translation function, when o-spreadsheet runs in standalone it doesn't translate any string
 let _translate = (s) => s;
@@ -4499,6 +4499,69 @@ function computeIconWidth(style) {
 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
@@ -4562,6 +4625,29 @@ function createAction(item) {
     };
 }
 
+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 Component {
     static template = "o-spreadsheet-ChartJsComponent";
     canvas = useRef("graphContainer");
@@ -4573,7 +4659,7 @@ class ChartJsComponent extends Component {
         return `background-color: ${this.background}`;
     }
     get chartRuntime() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
+        const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
         if (!("chartJsConfig" in runtime)) {
             throw new Error("Unsupported chart runtime");
         }
@@ -4584,15 +4670,7 @@ class ChartJsComponent extends Component {
             const runtime = this.chartRuntime;
             this.createChart(runtime.chartJsConfig);
         });
-        let previousRuntime = this.chartRuntime;
-        onPatched(() => {
-            const chartRuntime = this.chartRuntime;
-            if (deepEquals(previousRuntime, chartRuntime)) {
-                return;
-            }
-            this.updateChartJs(chartRuntime);
-            previousRuntime = chartRuntime;
-        });
+        useEffect(() => this.updateChartJs(this.chartRuntime), () => [this.chartRuntime]);
     }
     createChart(chartData) {
         const canvas = this.canvas.el;
@@ -4625,149 +4703,594 @@ class ChartJsComponent extends Component {
     }
 }
 ChartJsComponent.props = {
-    figure: Object,
+    figureId: String,
 };
 
 /**
- * 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 */;
+}
+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) {
+        ctx.font = structure.baselineArrow.style.font;
+        ctx.fillStyle = structure.baselineArrow.style.color;
+        ctx.fillText(structure.baselineArrow.text, structure.baselineArrow.position.x, structure.baselineArrow.position.y);
+    }
+    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 */
@@ -4783,64 +5306,92 @@ const CHART_PADDING_RATIO = 0.02;
  * 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;
-      }
-    }
-  }
-`;
-let ScorecardChart$1 = class ScorecardChart extends 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 formatBaselineDescr(baselineDescr, baseline) {
+    const _baselineDescr = baselineDescr || "";
+    return baseline && _baselineDescr ? " " + _baselineDescr : _baselineDescr;
+}
+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 { height: baselineArrowHeight, width: baselineArrowWidth } = this.getTextDimensions(this.baselineArrow, style.baselineArrow.font);
+        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 + baselineArrowWidth) / 2,
+                y: this.height - 2 * this.chartPadding,
+            },
+        };
+        structure.baselineArrow = {
+            text: this.baselineArrow,
+            style: style.baselineArrow,
+            position: {
+                x: structure.baseline.position.x - baselineArrowWidth,
+                y: structure.baseline.position.y - (baselineHeight - baselineArrowHeight) / 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;
@@ -4852,87 +5403,77 @@ let ScorecardChart$1 = class ScorecardChart extends Component {
         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() {
-        return this.runtime.baselineArrow;
+    get baselineArrow() {
+        switch (this.runtime.baselineArrow) {
+            case "up":
+                return "\u{1F871}";
+            case "down":
+                return "\u{1F873}";
+        }
+        return "";
     }
     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: {
+                font: getDefaultContextFont(0.8 * baselineFontSize),
+                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;
     }
@@ -4940,39 +5481,39 @@ let ScorecardChart$1 = class ScorecardChart extends Component {
     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 !== "" ? "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;
@@ -4980,21 +5521,43 @@ class BaselineElement extends ScorecardScalableElement {
 }
 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 = {
-    figure: Object,
+
+class ScorecardChart extends Component {
+    static template = "o-spreadsheet-ScorecardChart";
+    canvas = useRef("chartContainer");
+    get runtime() {
+        return this.env.model.getters.getChartRuntime(this.props.figureId);
+    }
+    setup() {
+        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 = {
+    figureId: String,
 };
 
 /**
@@ -5506,6 +6069,148 @@ autofillRulesRegistry
     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 */ `
@@ -6239,6 +6944,10 @@ css /* scss */ `
       cursor: pointer;
       user-select: none;
 
+      .o-menu-item-name {
+        min-width: 40%;
+      }
+
       &.o-menu-root {
         display: flex;
         justify-content: space-between;
@@ -16374,405 +17083,6 @@ function toXlsxHexColor(color) {
     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."),
@@ -17120,6 +17430,51 @@ function getFillingMode(index) {
         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;
@@ -18190,172 +18545,6 @@ function createPieChartRuntime(chart, getters) {
     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.
@@ -18393,11 +18582,11 @@ chartRegistry.add("pie", {
 });
 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,
 });
@@ -18416,7 +18605,7 @@ chartComponentRegistry.add("line", ChartJsComponent);
 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
@@ -18438,11 +18627,11 @@ class ChartFigure extends Component {
     static template = "o-spreadsheet-ChartFigure";
     static components = {};
     onDoubleClick() {
-        this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
+        this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figureId });
         this.env.openSidePanel("ChartPanel");
     }
     get chartType() {
-        return this.env.model.getters.getChartType(this.props.figure.id);
+        return this.env.model.getters.getChartType(this.props.figureId);
     }
     get chartComponent() {
         const type = this.chartType;
@@ -18454,7 +18643,7 @@ class ChartFigure extends Component {
     }
 }
 ChartFigure.props = {
-    figure: Object,
+    figureId: String,
     onFigureDeleted: Function,
 };
 
@@ -18465,14 +18654,14 @@ class ImageFigure extends Component {
     // Getters
     // ---------------------------------------------------------------------------
     get figureId() {
-        return this.props.figure.id;
+        return this.props.figureId;
     }
     get getImagePath() {
         return this.env.model.getters.getImagePath(this.figureId);
     }
 }
 ImageFigure.props = {
-    figure: Object,
+    figureId: String,
     onFigureDeleted: Function,
 };
 
@@ -19158,6 +19347,7 @@ if (window.Chart) {
 // 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(),
@@ -20269,109 +20459,126 @@ const splitToColumns = {
     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) => {
+    descriptionValue: EXAMPLE_DATE,
+    format: (env) => {
         const locale = env.model.getters.getLocale();
-        setFormatter(env, locale.dateFormat + " " + locale.timeFormat);
+        return locale.dateFormat + " " + locale.timeFormat;
     },
-    isActive: (env) => {
-        const locale = env.model.getters.getLocale();
-        return isFormatSelected(env, 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",
@@ -20624,9 +20831,16 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   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,
@@ -20637,6 +20851,7 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   formatWrappingOverflow: formatWrappingOverflow,
   formatWrappingWrap: formatWrappingWrap,
   incraseDecimalPlaces: incraseDecimalPlaces,
+  moreFormats: moreFormats,
   textColor: textColor
 });
 
@@ -21094,6 +21309,10 @@ numberFormatMenuRegistry
     ...formatNumberDuration,
     sequence: 100,
     separator: true,
+})
+    .add("more_formats", {
+    ...moreFormats,
+    sequence: 110,
 });
 const formatNumberMenuItemSpec = {
     name: _t("More formats"),
@@ -22995,7 +23214,7 @@ class ChartPanel extends Component {
         });
     }
     canUpdateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId) {
+        if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
             return;
         }
         const definition = {
@@ -24362,6 +24581,44 @@ FindAndReplacePanel.props = {
     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 Component {
+    static template = "o-spreadsheet-MoreFormatsPanel";
+    get dateFormatsActions() {
+        return DATE_FORMAT_ACTIONS;
+    }
+}
+MoreFormatsPanel.props = {
+    onCloseSidePanel: Function,
+};
+
 css /* scss */ `
   .o-checkbox-selection {
     height: 150px;
@@ -25819,6 +26076,10 @@ sidePanelRegistry.add("DataValidation", {
     title: _t("Data validation"),
     Body: DataValidationPanel,
 });
+sidePanelRegistry.add("MoreFormats", {
+    title: _t("More date formats"),
+    Body: MoreFormatsPanel,
+});
 
 class TopBarComponentRegistry extends Registry {
     mapping = {};
@@ -28764,7 +29025,14 @@ class AbstractResizer extends Component {
             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") {
@@ -32279,12 +32547,15 @@ function createXMLFile(doc, path, contentType) {
     };
 }
 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(" "));
@@ -35394,7 +35665,7 @@ class ChartPlugin extends CorePlugin {
     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) {
@@ -35414,24 +35685,6 @@ class ChartPlugin extends CorePlugin {
             }
         }
     }
-    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
     // ---------------------------------------------------------------------------
@@ -36953,6 +37206,9 @@ class ImagePlugin extends CorePlugin {
     }
     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) {
@@ -36966,7 +37222,7 @@ class ImagePlugin extends CorePlugin {
                     }
                 }
             }
-            sheet.images = images;
+            sheet.images = [...sheet.images, ...images];
         }
     }
     getAllImages() {
@@ -39909,6 +40165,7 @@ class EvaluationPlugin extends UIPlugin {
     config;
     static getters = [
         "evaluateFormula",
+        "getCorrespondingFormulaCell",
         "getRangeFormattedValues",
         "getRangeValues",
         "getRangeFormats",
@@ -40305,6 +40562,47 @@ class EvaluationChartPlugin extends UIPlugin {
         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 {
@@ -41921,7 +42219,7 @@ const transformations = [
     { 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
@@ -42017,23 +42315,13 @@ function transformZoneDependentCommand(cmd, executed) {
     }
     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";
     }
@@ -43178,6 +43466,10 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
         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,
@@ -44093,7 +44385,7 @@ class RendererPlugin extends UIPlugin {
         }
     }
     drawTexts(renderingContext) {
-        const { ctx, thinLineWidth } = renderingContext;
+        const { ctx } = renderingContext;
         ctx.textBaseline = "top";
         let currentFont;
         for (let box of this.boxes) {
@@ -44138,23 +44430,7 @@ class RendererPlugin extends UIPlugin {
                 // 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) {
@@ -46957,7 +47233,15 @@ class EditionPlugin extends UIPlugin {
                 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);
         }
@@ -47512,6 +47796,7 @@ class GridSelectionPlugin extends UIPlugin {
         "isSingleColSelected",
         "getElementsFromSelection",
         "tryGetActiveSheetId",
+        "isGridSelectionActive",
     ];
     gridSelection = {
         anchor: {
@@ -47721,6 +48006,9 @@ class GridSelectionPlugin extends UIPlugin {
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
+    isGridSelectionActive() {
+        return this.selection.isListening(this);
+    }
     getActiveSheet() {
         return this.activeSheet;
     }
@@ -52672,6 +52960,9 @@ class SelectionStreamProcessorImpl {
             },
         });
     }
+    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
@@ -55060,8 +55351,10 @@ const helpers = {
     toString,
     toXC,
     toZone,
+    toUnboundedZone,
     toCartesian,
     numberToLetters,
+    lettersToNumber,
     UuidGenerator,
     formatValue,
     createCurrencyFormat,
@@ -55083,6 +55376,7 @@ const helpers = {
     genericRepeat,
     createAction,
     createActions,
+    transformRangeData,
 };
 const links = {
     isMarkdownLink,
@@ -55097,7 +55391,7 @@ const components = {
     ChartJsComponent,
     Grid,
     GridOverlay,
-    ScorecardChart: ScorecardChart$1,
+    ScorecardChart,
     LineConfigPanel,
     LineBarPieDesignPanel,
     BarConfigPanel,
@@ -55108,6 +55402,7 @@ const components = {
     ScorecardChartDesignPanel,
     FigureComponent,
     Menu,
+    SelectionInput,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -55125,6 +55420,6 @@ const constants = {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, 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.11";
+__info__.date = "2023-10-19T14:26:01.790Z";
+__info__.hash = "4b42059";