@odoo/o-spreadsheet 19.5.0-alpha.1 → 19.5.0-alpha.3

package/dist/o_spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.5.0-alpha.1
- * @date 2026-07-01T05:05:42.239Z
- * @hash 3c78107
+ * @version 19.5.0-alpha.3
+ * @date 2026-07-14T10:17:06.949Z
+ * @hash c029184
  */
 
 (function(exports, _odoo_owl) {
@@ -564,6 +564,7 @@ _odoo_owl = __toESM(_odoo_owl, 1);
 	};
 	const DEFAULT_VERTICAL_ALIGN = DEFAULT_STYLE.verticalAlign;
 	const DEFAULT_WRAPPING_MODE = DEFAULT_STYLE.wrapping;
+	const DEFAULT_TEXT_HIGHLIGHT_PERCENT = .25;
 	const DEFAULT_FONT_SIZE = DEFAULT_STYLE.fontSize;
 	const DEFAULT_FONT = "'Roboto', arial, 'Liberation Sans'";
 	const DEFAULT_BORDER_DESC = {
@@ -1248,6 +1249,12 @@ _odoo_owl = __toESM(_odoo_owl, 1);
 			}
 		};
 	}
+	function repeat(array, times) {
+		const len = array.length;
+		const result = new Array(len * times);
+		for (let t = 0; t < times; t++) for (let i = 0; i < len; i++) result[t * len + i] = array[i];
+		return result;
+	}
 
 //#endregion
 //#region src/helpers/coordinates.ts
@@ -2601,7 +2608,7 @@ stores.inject(MyMetaStore, storeInstance);
 	*
 	* The end goal is to eliminate all compatibility shims.
 	*/
-	const { __ODOO_COMPATIBILITY_LAYER_ADDED__, blockDom: blockDom$1, config, onMounted: onMounted$24, onPatched: onPatched$5, onWillUnmount: onWillUnmount$18, App: OwlApp, Component: OwlComponent, EnvPlugin: OwlEnvPlugin, useChildEnv: OwlUseChildEnv, useChildSubEnv: OwlUseChildSubEnv, useComponent: OwlUseComponent, useEnv: OwlUseEnv, useExternalListener: OwlUseExternalListener, useLayoutEffect: OwlUseLayoutEffect, useSubEnv: OwlUseSubEnv, Plugin, plugin, props: props$166, providePlugins, useScope, xml: xml$4 } = _odoo_owl;
+	const { __ODOO_COMPATIBILITY_LAYER_ADDED__, blockDom: blockDom$1, config, onMounted: onMounted$24, onPatched: onPatched$5, onWillUnmount: onWillUnmount$18, App: OwlApp, Component: OwlComponent, EnvPlugin: OwlEnvPlugin, useChildEnv: OwlUseChildEnv, useChildSubEnv: OwlUseChildSubEnv, useComponent: OwlUseComponent, useEnv: OwlUseEnv, useExternalListener: OwlUseExternalListener, useLayoutEffect: OwlUseLayoutEffect, useSubEnv: OwlUseSubEnv, Plugin, plugin, props: props$167, providePlugins, useScope, xml: xml$4 } = _odoo_owl;
 	const isOdooCompatLoaded = __ODOO_COMPATIBILITY_LAYER_ADDED__ === true;
 	var _Component = class extends OwlComponent {
 		static template = "";
@@ -2731,7 +2738,7 @@ stores.inject(MyMetaStore, storeInstance);
 		static template = xml$4`<t t-call-slot="default"/>`;
 		constructor(node) {
 			super(node);
-			this.props = props$166();
+			this.props = props$167();
 			this.__owl__ = node;
 		}
 		setup() {
@@ -8407,534 +8414,6 @@ set(value) {
 		return cell;
 	}
 
-//#endregion
-//#region src/helpers/text_helper.ts
-	function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
-		return numberOfLines * (textLineHeight + 4) - 4;
-	}
-	function getCanvas(width = 100, height = 100) {
-		return new OffscreenCanvas(width, height).getContext("2d");
-	}
-	/**
-	* Get the default height of the cell given its style.
-	*/
-	function getDefaultCellHeight(ctx, cell, locale, colSize) {
-		if (!cell || !cell.isFormula && !cell.content) return 23;
-		let content = "";
-		try {
-			if (!cell.isFormula) {
-				const localeFormat = {
-					format: cell.format,
-					locale
-				};
-				content = formatValue(parseLiteral(cell.content, locale), localeFormat);
-			}
-		} catch {
-			content = CellErrorType.GenericError;
-		}
-		return getCellContentHeight(ctx, content, cell.style, colSize);
-	}
-	function getCellContentHeight(ctx, content, style, colSize) {
-		return computeMultilineTextSize(ctx, splitTextToWidth(ctx, content, style, style?.wrapping === "wrap" ? colSize - 2 * 4 : void 0), style).height + 2 * 3;
-	}
-	function getDefaultContextFont(fontSize, bold = false, italic = false) {
-		return `${italic ? "italic" : ""} ${bold ? "bold" : ""} ${fontSize}px ${DEFAULT_FONT}`;
-	}
-	function computeMultilineTextSize(context, textLines, style = {}, fontUnit = "pt") {
-		if (!textLines.length) return {
-			width: 0,
-			height: 0
-		};
-		const font = computeTextFont(style, fontUnit);
-		const sizes = textLines.map((line) => computeCachedTextDimension(context, line, font));
-		const height = computeTextLinesHeight(sizes[0].height, textLines.length);
-		const width = Math.max(...sizes.map((size) => size.width));
-		if (!style.rotation) return {
-			height,
-			width
-		};
-		const cos = Math.abs(Math.cos(style.rotation));
-		const sin = Math.abs(Math.sin(style.rotation));
-		return {
-			width: width * cos + height * sin,
-			height: sin * width + cos * height
-		};
-	}
-	function computeTextWidth(context, text, style = {}, fontUnit = "pt") {
-		return computeCachedTextWidth(context, text, computeTextFont(style, fontUnit), style.rotation);
-	}
-	function computeCachedTextWidth(context, text, font, rotation) {
-		const size = computeCachedTextDimension(context, text, font);
-		if (!rotation) return size.width;
-		const cos = Math.abs(Math.cos(rotation));
-		const sin = Math.abs(Math.sin(rotation));
-		return size.width * cos + size.height * sin;
-	}
-	const textDimensionsCache = {};
-	function computeTextDimension(context, text, style, fontUnit = "pt") {
-		const size = computeCachedTextDimension(context, text, computeTextFont(style, fontUnit));
-		if (!style.rotation) return size;
-		const cos = Math.abs(Math.cos(style.rotation));
-		const sin = Math.abs(Math.sin(style.rotation));
-		return {
-			width: size.width * cos + size.height * sin,
-			height: size.height * cos + size.width * sin
-		};
-	}
-	function computeCachedTextDimension(context, text, font) {
-		if (!textDimensionsCache[font]) textDimensionsCache[font] = {};
-		if (textDimensionsCache[font][text] === void 0) {
-			context.save();
-			context.font = font;
-			const measure = context.measureText(text);
-			context.restore();
-			const width = measure.width;
-			const height = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
-			textDimensionsCache[font][text] = {
-				width,
-				height
-			};
-		}
-		return textDimensionsCache[font][text];
-	}
-	function fontSizeInPixels(fontSize) {
-		return Math.round(fontSize * 96 / 72);
-	}
-	function computeTextFont(style, fontUnit = "pt") {
-		return `${style.italic ? "italic " : ""}${style.bold ? "bold" : "400"} ${(fontUnit === "pt" ? computeTextFontSizeInPixels(style) : style.fontSize) ?? DEFAULT_FONT_SIZE}px ${DEFAULT_FONT}`;
-	}
-	function computeTextFontSizeInPixels(style) {
-		return fontSizeInPixels(style?.fontSize || DEFAULT_FONT_SIZE);
-	}
-	function splitWordToSpecificWidth(ctx, word, width, style) {
-		if (computeTextWidth(ctx, word, style) <= width) return [word];
-		const splitWord = [];
-		let wordPart = "";
-		for (const l of word) if (computeTextWidth(ctx, wordPart + l, style) > width) {
-			splitWord.push(wordPart);
-			wordPart = l;
-		} else wordPart += l;
-		splitWord.push(wordPart);
-		return splitWord;
-	}
-	/**
-	* Return the given text, split in multiple lines if needed. The text will be split in multiple
-	* line if it contains NEWLINE characters, or if it's longer than the given width.
-	*/
-	function splitTextToWidth(ctx, text, style, width) {
-		if (!style) style = {};
-		if (isMarkdownLink(text)) text = parseMarkdownLink(text).label;
-		const brokenText = [];
-		const lines = text.includes("\n") ? text.split("\n") : [text];
-		for (const line of lines) {
-			const words = line.includes(" ") ? line.split(" ") : [line];
-			if (!width) {
-				brokenText.push(line);
-				continue;
-			}
-			let textLine = "";
-			let availableWidth = width;
-			for (const word of words) {
-				const splitWord = splitWordToSpecificWidth(ctx, word, width, style);
-				const lastPart = splitWord.pop();
-				const lastPartWidth = computeTextWidth(ctx, lastPart, style);
-				if (splitWord.length) {
-					if (textLine !== "") {
-						brokenText.push(textLine);
-						textLine = "";
-						availableWidth = width;
-					}
-					splitWord.forEach((wordPart) => {
-						brokenText.push(wordPart);
-					});
-					textLine = lastPart;
-					availableWidth = width - lastPartWidth;
-				} else {
-					const _word = textLine === "" ? lastPart : " " + lastPart;
-					const wordWidth = computeTextWidth(ctx, _word, style);
-					if (wordWidth <= availableWidth) {
-						textLine += _word;
-						availableWidth -= wordWidth;
-					} else {
-						brokenText.push(textLine);
-						textLine = lastPart;
-						availableWidth = width - lastPartWidth;
-					}
-				}
-			}
-			if (textLine !== "") brokenText.push(textLine);
-		}
-		return brokenText;
-	}
-	/**
-	* Return the font size that makes the width of a text match the given line width.
-	* Minimum font size is 1.
-	*
-	* @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
-	*/
-	function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = .25) {
-		let minFontSize = 1;
-		if (getTextWidth(minFontSize) > lineWidth) return minFontSize;
-		if (getTextWidth(maxFontSize) < lineWidth) return maxFontSize;
-		let fontSize = (minFontSize + maxFontSize) / 2;
-		let currentTextWidth = getTextWidth(fontSize);
-		let iterations = 0;
-		while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
-			if (currentTextWidth >= lineWidth) maxFontSize = (minFontSize + maxFontSize) / 2;
-			else minFontSize = (minFontSize + maxFontSize) / 2;
-			fontSize = (minFontSize + maxFontSize) / 2;
-			currentTextWidth = getTextWidth(fontSize);
-			iterations++;
-		}
-		return fontSize;
-	}
-	/** Transform a string to lowercase and removes whitespace from both ends of the string*/
-	function toTrimmedLowerCase(str) {
-		return str ? str.toLowerCase().trim() : "";
-	}
-	/**
-	* 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 clipTextWithEllipsis(ctx, text, maxWidth) {
-		let width = computeCachedTextWidth(ctx, text, ctx.font);
-		if (width <= maxWidth) return text;
-		const ellipsis = "…";
-		const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
-		if (width <= ellipsisWidth) return text;
-		let len = text.length;
-		while (width >= maxWidth - ellipsisWidth && len-- > 0) {
-			text = text.substring(0, len);
-			width = computeCachedTextWidth(ctx, text, ctx.font);
-		}
-		return text + ellipsis;
-	}
-	function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10) {
-		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 / 2 - strokeWidth;
-				break;
-			case "middle":
-				underlineY += boxHeight / 2 - strokeWidth;
-				break;
-			case "alphabetic":
-				underlineY += 2 * strokeWidth;
-				strikeY -= 3 * strokeWidth;
-				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();
-		}
-	}
-	function sliceTextToFitWidth(context, width, text, style, fontUnit = "pt") {
-		if (computeTextWidth(context, text, style, fontUnit) <= width) return text;
-		const ellipsis = "...";
-		const ellipsisWidth = computeTextWidth(context, ellipsis, style, fontUnit);
-		if (ellipsisWidth >= width) return "";
-		let lowerBoundLen = 1;
-		let upperBoundLen = text.length;
-		let currentWidth;
-		while (lowerBoundLen <= upperBoundLen) {
-			const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
-			currentWidth = computeTextWidth(context, text.slice(0, currentLen), style, fontUnit);
-			if (currentWidth + ellipsisWidth > width) upperBoundLen = currentLen - 1;
-			else lowerBoundLen = currentLen + 1;
-		}
-		const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
-		return slicedText ? slicedText + ellipsis : "";
-	}
-	/**
-	* Return the position to draw text on a rotated canvas to ensure that the rotated text alignment correspond
-	* with to original's text vertical and horizontal alignment.
-	*/
-	function computeRotationPosition(rect, style) {
-		if (!style.rotation || style.rotation % (Math.PI * 2) === 0) return rect;
-		let { x, y } = rect;
-		const cos = Math.cos(-style.rotation);
-		const sin = Math.sin(-style.rotation);
-		const width = rect.textWidth - 2 * 4;
-		const height = rect.textHeight;
-		const center = style.align === "center";
-		const rotateTowardCellCenter = style.align === "left" === sin < 0;
-		const sh = sin * height;
-		const sw = Math.abs(sin * width);
-		const ch = cos * height;
-		if (style.verticalAlign === "top") if (center) {
-			y += sw / 2;
-			x -= sh / 2;
-		} else if (rotateTowardCellCenter) x -= sh;
-		else y += sw;
-		else if (!style.verticalAlign || style.verticalAlign === "bottom") {
-			y += height - ch;
-			if (center) {
-				y -= sw / 2;
-				x -= sh / 2;
-			} else if (rotateTowardCellCenter) {
-				x -= sh;
-				y -= sw;
-			}
-		} else if (center) {
-			x -= sh / 2;
-			y -= height / 2;
-			if (rotateTowardCellCenter) y += sh;
-			else y -= sh;
-		} else if (rotateTowardCellCenter) {
-			x -= sh;
-			y -= sw / 2;
-		} else y += sw / 2 + ch / 4;
-		return {
-			x: cos * x - sin * y,
-			y: cos * y + sin * x
-		};
-	}
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_colorscale_plugin.ts
-/** This is a chartJS plugin that will draw the heatmap colorscale at the chart legend position */
-	const chartColorScalePlugin = {
-		id: "chartColorScalePlugin",
-		afterDatasetsDraw(chart, args, options) {
-			if (!options.position || options.position === "none" || !options.colorScale.length) return;
-			const ctx = chart.ctx;
-			ctx.save();
-			ctx.textAlign = "center";
-			ctx.textBaseline = "middle";
-			ctx.miterLimit = 1;
-			const gradientHeight = (chart.chartArea.bottom - chart.chartArea.top) / 2;
-			const gradientWidth = 10;
-			const gradientX = options.position === "left" ? 20 : ctx.canvas.width - 70;
-			const gradientY = chart.chartArea.top;
-			const gradient = ctx.createLinearGradient(0, gradientY + gradientHeight, 0, gradientY);
-			const step = 1 / (options.colorScale.length - 1);
-			options.colorScale.forEach((color, index) => {
-				gradient.addColorStop(index * step, color);
-			});
-			ctx.fillStyle = gradient;
-			ctx.fillRect(gradientX, gradientY, gradientWidth, gradientHeight);
-			ctx.fillStyle = options.fontColor ?? "black";
-			ctx.font = getDefaultContextFont(12);
-			ctx.textAlign = "left";
-			let minValue = Math.round(options.minValue * 100) / 100;
-			let maxValue = Math.round(options.maxValue * 100) / 100;
-			if (options.minValue === options.maxValue) {
-				minValue -= 1;
-				maxValue += 1;
-			}
-			const formattedMaxValue = humanizeNumber({
-				value: maxValue,
-				format: void 0
-			}, options.locale);
-			const formattedMinValue = humanizeNumber({
-				value: minValue,
-				format: void 0
-			}, options.locale);
-			ctx.fillText(formattedMinValue, gradientX + gradientWidth + 5, gradientY + gradientHeight - 6);
-			ctx.fillText(formattedMaxValue, gradientX + gradientWidth + 5, gradientY + 6);
-			ctx.restore();
-		}
-	};
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_funnel_chart.ts
-	function getFunnelChartController() {
-		if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
-		return class FunnelChartController extends globalThis.Chart.BarController {
-			static id = "funnel";
-			static defaults = {
-				...globalThis.Chart?.BarController.defaults,
-				dataElementType: "funnel",
-				animation: { duration: (ctx) => {
-					if (ctx.type !== "data") return 1e3;
-					return 1e3 * (ctx.raw[1] / Math.max(...ctx.dataset.data.map((data) => data[1])));
-				} }
-			};
-			/** Called at each chart render to update the elements of the chart (FunnelChartElement) with the updated data */
-			updateElements(rects, start, count, mode) {
-				super.updateElements(rects, start, count, mode);
-				for (let i = start; i < start + count; i++) {
-					const rect = rects[i];
-					this.updateElement(rect, i, { nextElement: rects[i + 1] }, mode);
-				}
-			}
-		};
-	}
-	function getFunnelChartElement() {
-		if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
-		/**
-		* Similar to a bar chart element, but it's a trapezoid rather than a rectangle. The top is of width
-		* `width`, and the bottom is of width `nextElementWidth`.
-		*/
-		return class FunnelChartElement extends globalThis.Chart.BarElement {
-			static id = "funnel";
-			/** Overwrite this to draw a trapezoid rather then a rectangle */
-			draw(ctx) {
-				ctx.save();
-				const { x, y, height, nextElement, base, options } = this.getProps([
-					"x",
-					"y",
-					"width",
-					"height",
-					"nextElement",
-					"base",
-					"options"
-				]);
-				const width = getElementWidth(this);
-				const offset = (width - (nextElement ? getElementWidth(nextElement) : 0)) / 2;
-				const startX = Math.min(x, base);
-				const startY = y - height / 2;
-				ctx.fillStyle = options.backgroundColor;
-				ctx.beginPath();
-				ctx.moveTo(startX, startY);
-				ctx.lineTo(startX + width, startY);
-				ctx.lineTo(startX + width - offset, startY + height);
-				ctx.lineTo(startX + offset, startY + height);
-				ctx.closePath();
-				ctx.fill();
-				if (options.borderWidth) {
-					ctx.strokeStyle = options.borderColor;
-					ctx.lineWidth = options.borderWidth;
-					ctx.stroke();
-				}
-				ctx.restore();
-			}
-			/** Check if the mouse is inside the trapezoid */
-			inRange(mouseX, mouseY) {
-				const { x, y, height, nextElement, base } = this.getProps([
-					"x",
-					"y",
-					"width",
-					"height",
-					"nextElement",
-					"base",
-					"options"
-				]);
-				const width = getElementWidth(this);
-				const nextElementWidth = nextElement ? getElementWidth(nextElement) : 0;
-				const startX = Math.min(x, base);
-				const startY = y - height / 2;
-				if (mouseY < startY || mouseY > startY + height) return false;
-				const offset = (width - nextElementWidth) / 2;
-				const left = startX + offset * (mouseY - startY) / height;
-				const right = startX + width - offset * (mouseY - startY) / height;
-				if (mouseX < left || mouseX > right) return false;
-				return true;
-			}
-		};
-	}
-	/**
-	* Get an element width.
-	*
-	* The property width is undefined during animations, we need to compute it manually.
-	*/
-	function getElementWidth(element) {
-		const { x, base } = element.getProps(["x", "base"]);
-		return Math.max(x, base) - Math.min(x, base);
-	}
-	/**
-	* Position the tooltip inside the trapezoid.
-	* The default position for tooltips of bar elements is at the end of rectangle, which is not ideal for trapezoids.
-	*/
-	const funnelTooltipPositioner = function(elements) {
-		if (!elements.length) return {
-			x: 0,
-			y: 0
-		};
-		const { x, y, base, width, height } = elements[0].element.getProps([
-			"x",
-			"y",
-			"width",
-			"height",
-			"base"
-		]);
-		const startX = Math.min(x, base);
-		const startY = y - height / 2;
-		return {
-			x: startX + width * 2 / 3,
-			y: startY + height / 2
-		};
-	};
-
-//#endregion
-//#region src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts
-	const chartMinorGridPlugin = {
-		id: "o-spreadsheet-minor-gridlines",
-		beforeDatasetsDraw(chart) {
-			const ctx = chart.ctx;
-			const chartArea = chart.chartArea;
-			if (!chartArea) return;
-			for (const scaleId in chart.scales) {
-				const scale = chart.scales[scaleId];
-				const options = scale.options;
-				const minor = options?.grid?.minor;
-				if (!minor?.display) continue;
-				const showMajorGrid = options?.grid?.display;
-				const ticks = scale.ticks;
-				if (!ticks || ticks.length < 2) continue;
-				ctx.save();
-				ctx.lineWidth = 1;
-				ctx.strokeStyle = minor.color ?? options?.grid?.color ?? "#e6e6e6";
-				for (let i = 0; i < ticks.length - 1; i++) {
-					const start = scale.getPixelForTick(i);
-					const end = scale.getPixelForTick(i + 1);
-					if (!isFinite(start) || !isFinite(end)) continue;
-					for (let j = showMajorGrid ? 1 : 0; j < 4; j++) {
-						const ratio = j / 4;
-						const position = Math.round(start + (end - start) * ratio) + .5;
-						ctx.beginPath();
-						if (scale.isHorizontal()) {
-							ctx.moveTo(position, chartArea.top);
-							ctx.lineTo(position, chartArea.bottom);
-						} else {
-							ctx.moveTo(chartArea.left, position);
-							ctx.lineTo(chartArea.right, position);
-						}
-						ctx.stroke();
-					}
-				}
-				ctx.restore();
-			}
-		}
-	};
-
 //#endregion
 //#region src/helpers/color.ts
 	const RBA_REGEX = /rgba?\(|\s+|\)/gi;
@@ -9528,113 +9007,646 @@ set(value) {
 			super(paletteSize, preferredColors);
 			this.palette = getAlternatingColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
 		}
-	};
-	var AlternatingColorMap = class {
-		availableColors;
-		colors = {};
-		constructor(paletteSize = 12) {
-			this.availableColors = new AlternatingColorGenerator(paletteSize);
+	};
+	var AlternatingColorMap = class {
+		availableColors;
+		colors = {};
+		constructor(paletteSize = 12) {
+			this.availableColors = new AlternatingColorGenerator(paletteSize);
+		}
+		get(id) {
+			if (!this.colors[id]) this.colors[id] = this.availableColors.next();
+			return this.colors[id];
+		}
+	};
+	const COLORSCHEMES = {
+		greys: [
+			"#ffffff",
+			"#808080",
+			"#000000"
+		],
+		blues: [
+			"#f7fbff",
+			"#6aaed6",
+			"#08306b"
+		],
+		reds: [
+			"#fff5f0",
+			"#fb694a",
+			"#67000d"
+		],
+		greens: [
+			"#f7fcf5",
+			"#73c476",
+			"#00441b"
+		],
+		oranges: [
+			"#fff5eb",
+			"#fd8c3b",
+			"#7f2704"
+		],
+		purples: [
+			"#fcfbfd",
+			"#9e9ac8",
+			"#3f007d"
+		],
+		viridis: [
+			"#440154",
+			"#21918c",
+			"#fde725"
+		],
+		cividis: [
+			"#00224e",
+			"#7d7c78",
+			"#fee838"
+		],
+		rainbow: [
+			"#B41DB4",
+			"#FFFF00",
+			"#00FFFF"
+		]
+	};
+	const COLORSCALES = Object.keys(COLORSCHEMES);
+	/**
+	* Returns a function that maps a value to a color using a color scale defined by the given
+	* color/threshold values pairs.
+	*/
+	function getColorScale(colorScalePoints) {
+		if (colorScalePoints.length < 2) throw new Error("Color scale must have at least 2 points");
+		const sortedColorScalePoints = [...colorScalePoints.sort((a, b) => a.value - b.value)];
+		const thresholds = [];
+		for (let i = 1; i < sortedColorScalePoints.length; i++) {
+			const minColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i - 1].color).a;
+			const maxColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i].color).a;
+			const minColor = colorToNumber(sortedColorScalePoints[i - 1].color);
+			const maxColor = colorToNumber(sortedColorScalePoints[i].color);
+			thresholds.push({
+				min: sortedColorScalePoints[i - 1].value,
+				max: sortedColorScalePoints[i].value,
+				minColor,
+				maxColor,
+				minColorAlpha,
+				maxColorAlpha,
+				colorDiff: computeColorDiffUnits(sortedColorScalePoints[i - 1].value, sortedColorScalePoints[i].value, minColor, maxColor)
+			});
+		}
+		return (value) => {
+			if (value < thresholds[0].min) return colorNumberToHex(thresholds[0].minColor, thresholds[0].minColorAlpha);
+			for (const threshold of thresholds) if (value >= threshold.min && value <= threshold.max) return colorNumberToHex(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff), threshold.maxColorAlpha);
+			return colorNumberToHex(thresholds[thresholds.length - 1].maxColor, thresholds[thresholds.length - 1].maxColorAlpha);
+		};
+	}
+	function computeColorDiffUnits(minValue, maxValue, minColor, maxColor) {
+		const deltaValue = maxValue - minValue;
+		const deltaColorR = (minColor >> 16) % 256 - (maxColor >> 16) % 256;
+		const deltaColorG = (minColor >> 8) % 256 - (maxColor >> 8) % 256;
+		const deltaColorB = minColor % 256 - maxColor % 256;
+		return [
+			deltaColorR / deltaValue,
+			deltaColorG / deltaValue,
+			deltaColorB / deltaValue
+		];
+	}
+	function colorCell(value, minValue, minColor, colorDiffUnit) {
+		const [colorDiffUnitR, colorDiffUnitG, colorDiffUnitB] = colorDiffUnit;
+		const r = Math.round((minColor >> 16) % 256 - colorDiffUnitR * (value - minValue));
+		const g = Math.round((minColor >> 8) % 256 - colorDiffUnitG * (value - minValue));
+		const b = Math.round(minColor % 256 - colorDiffUnitB * (value - minValue));
+		return r << 16 | g << 8 | b;
+	}
+
+//#endregion
+//#region src/helpers/text_helper.ts
+	function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
+		return numberOfLines * (textLineHeight + 4) - 4;
+	}
+	function getCanvas(width = 100, height = 100) {
+		return new OffscreenCanvas(width, height).getContext("2d");
+	}
+	/**
+	* Get the default height of the cell given its style.
+	*/
+	function getDefaultCellHeight(ctx, cell, locale, colSize) {
+		if (!cell || !cell.isFormula && !cell.content) return 23;
+		let content = "";
+		try {
+			if (!cell.isFormula) {
+				const localeFormat = {
+					format: cell.format,
+					locale
+				};
+				content = formatValue(parseLiteral(cell.content, locale), localeFormat);
+			}
+		} catch {
+			content = CellErrorType.GenericError;
+		}
+		return getCellContentHeight(ctx, content, cell.style, colSize);
+	}
+	function getCellContentHeight(ctx, content, style, colSize) {
+		return computeMultilineTextSize(ctx, splitTextToWidth(ctx, content, style, style?.wrapping === "wrap" ? colSize - 2 * 4 : void 0), style).height + 2 * 3;
+	}
+	function getDefaultContextFont(fontSize, bold = false, italic = false) {
+		return `${italic ? "italic" : ""} ${bold ? "bold" : ""} ${fontSize}px ${DEFAULT_FONT}`;
+	}
+	function computeMultilineTextSize(context, textLines, style = {}, fontUnit = "pt") {
+		if (!textLines.length) return {
+			width: 0,
+			height: 0
+		};
+		const font = computeTextFont(style, fontUnit);
+		const sizes = textLines.map((line) => computeCachedTextDimension(context, line, font));
+		const height = computeTextLinesHeight(sizes[0].height, textLines.length);
+		const width = Math.max(...sizes.map((size) => size.width));
+		if (!style.rotation) return {
+			height,
+			width
+		};
+		const cos = Math.abs(Math.cos(style.rotation));
+		const sin = Math.abs(Math.sin(style.rotation));
+		return {
+			width: width * cos + height * sin,
+			height: sin * width + cos * height
+		};
+	}
+	function computeTextWidth(context, text, style = {}, fontUnit = "pt") {
+		return computeCachedTextWidth(context, text, computeTextFont(style, fontUnit), style.rotation);
+	}
+	function computeCachedTextWidth(context, text, font, rotation) {
+		const size = computeCachedTextDimension(context, text, font);
+		if (!rotation) return size.width;
+		const cos = Math.abs(Math.cos(rotation));
+		const sin = Math.abs(Math.sin(rotation));
+		return size.width * cos + size.height * sin;
+	}
+	const textDimensionsCache = {};
+	function computeTextDimension(context, text, style, fontUnit = "pt") {
+		const size = computeCachedTextDimension(context, text, computeTextFont(style, fontUnit));
+		if (!style.rotation) return size;
+		const cos = Math.abs(Math.cos(style.rotation));
+		const sin = Math.abs(Math.sin(style.rotation));
+		return {
+			width: size.width * cos + size.height * sin,
+			height: size.height * cos + size.width * sin
+		};
+	}
+	function computeCachedTextDimension(context, text, font) {
+		if (!textDimensionsCache[font]) textDimensionsCache[font] = {};
+		if (textDimensionsCache[font][text] === void 0) {
+			context.save();
+			context.font = font;
+			const measure = context.measureText(text);
+			context.restore();
+			const width = measure.width;
+			const height = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+			textDimensionsCache[font][text] = {
+				width,
+				height
+			};
+		}
+		return textDimensionsCache[font][text];
+	}
+	function fontSizeInPixels(fontSize) {
+		return Math.round(fontSize * 96 / 72);
+	}
+	function computeTextFont(style, fontUnit = "pt") {
+		return `${style.italic ? "italic " : ""}${style.bold ? "bold" : "400"} ${(fontUnit === "pt" ? computeTextFontSizeInPixels(style) : style.fontSize) ?? DEFAULT_FONT_SIZE}px ${DEFAULT_FONT}`;
+	}
+	function computeTextFontSizeInPixels(style) {
+		return fontSizeInPixels(style?.fontSize || DEFAULT_FONT_SIZE);
+	}
+	function splitWordToSpecificWidth(ctx, word, width, style) {
+		if (computeTextWidth(ctx, word, style) <= width) return [word];
+		const splitWord = [];
+		let wordPart = "";
+		for (const l of word) if (computeTextWidth(ctx, wordPart + l, style) > width) {
+			splitWord.push(wordPart);
+			wordPart = l;
+		} else wordPart += l;
+		splitWord.push(wordPart);
+		return splitWord;
+	}
+	/**
+	* Return the given text, split in multiple lines if needed. The text will be split in multiple
+	* line if it contains NEWLINE characters, or if it's longer than the given width.
+	*/
+	function splitTextToWidth(ctx, text, style, width) {
+		if (!style) style = {};
+		if (isMarkdownLink(text)) text = parseMarkdownLink(text).label;
+		const brokenText = [];
+		const lines = text.includes("\n") ? text.split("\n") : [text];
+		for (const line of lines) {
+			const words = line.includes(" ") ? line.split(" ") : [line];
+			if (!width) {
+				brokenText.push(line);
+				continue;
+			}
+			let textLine = "";
+			let availableWidth = width;
+			for (const word of words) {
+				const splitWord = splitWordToSpecificWidth(ctx, word, width, style);
+				const lastPart = splitWord.pop();
+				const lastPartWidth = computeTextWidth(ctx, lastPart, style);
+				if (splitWord.length) {
+					if (textLine !== "") {
+						brokenText.push(textLine);
+						textLine = "";
+						availableWidth = width;
+					}
+					splitWord.forEach((wordPart) => {
+						brokenText.push(wordPart);
+					});
+					textLine = lastPart;
+					availableWidth = width - lastPartWidth;
+				} else {
+					const _word = textLine === "" ? lastPart : " " + lastPart;
+					const wordWidth = computeTextWidth(ctx, _word, style);
+					if (wordWidth <= availableWidth) {
+						textLine += _word;
+						availableWidth -= wordWidth;
+					} else {
+						brokenText.push(textLine);
+						textLine = lastPart;
+						availableWidth = width - lastPartWidth;
+					}
+				}
+			}
+			if (textLine !== "") brokenText.push(textLine);
+		}
+		return brokenText;
+	}
+	/**
+	* Return the font size that makes the width of a text match the given line width.
+	* Minimum font size is 1.
+	*
+	* @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
+	*/
+	function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = .25) {
+		let minFontSize = 1;
+		if (getTextWidth(minFontSize) > lineWidth) return minFontSize;
+		if (getTextWidth(maxFontSize) < lineWidth) return maxFontSize;
+		let fontSize = (minFontSize + maxFontSize) / 2;
+		let currentTextWidth = getTextWidth(fontSize);
+		let iterations = 0;
+		while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
+			if (currentTextWidth >= lineWidth) maxFontSize = (minFontSize + maxFontSize) / 2;
+			else minFontSize = (minFontSize + maxFontSize) / 2;
+			fontSize = (minFontSize + maxFontSize) / 2;
+			currentTextWidth = getTextWidth(fontSize);
+			iterations++;
+		}
+		return fontSize;
+	}
+	/** Transform a string to lowercase and removes whitespace from both ends of the string*/
+	function toTrimmedLowerCase(str) {
+		return str ? str.toLowerCase().trim() : "";
+	}
+	/**
+	* 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 clipTextWithEllipsis(ctx, text, maxWidth) {
+		let width = computeCachedTextWidth(ctx, text, ctx.font);
+		if (width <= maxWidth) return text;
+		const ellipsis = "…";
+		const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
+		if (width <= ellipsisWidth) return text;
+		let len = text.length;
+		while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+			text = text.substring(0, len);
+			width = computeCachedTextWidth(ctx, text, ctx.font);
+		}
+		return text + ellipsis;
+	}
+	function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10, highlightText = false) {
+		if (highlightText) {
+			context.save();
+			context.fillStyle = lightenColor(context.fillStyle, DEFAULT_TEXT_HIGHLIGHT_PERCENT);
+		}
+		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 / 2 - strokeWidth;
+				break;
+			case "middle":
+				underlineY += boxHeight / 2 - strokeWidth;
+				break;
+			case "alphabetic":
+				underlineY += 2 * strokeWidth;
+				strikeY -= 3 * strokeWidth;
+				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();
 		}
-		get(id) {
-			if (!this.colors[id]) this.colors[id] = this.availableColors.next();
-			return this.colors[id];
+		if (strikethrough) {
+			context.lineWidth = strokeWidth;
+			context.strokeStyle = context.fillStyle;
+			context.beginPath();
+			context.moveTo(x, strikeY);
+			context.lineTo(x + textWidth, strikeY);
+			context.stroke();
 		}
-	};
-	const COLORSCHEMES = {
-		greys: [
-			"#ffffff",
-			"#808080",
-			"#000000"
-		],
-		blues: [
-			"#f7fbff",
-			"#6aaed6",
-			"#08306b"
-		],
-		reds: [
-			"#fff5f0",
-			"#fb694a",
-			"#67000d"
-		],
-		greens: [
-			"#f7fcf5",
-			"#73c476",
-			"#00441b"
-		],
-		oranges: [
-			"#fff5eb",
-			"#fd8c3b",
-			"#7f2704"
-		],
-		purples: [
-			"#fcfbfd",
-			"#9e9ac8",
-			"#3f007d"
-		],
-		viridis: [
-			"#440154",
-			"#21918c",
-			"#fde725"
-		],
-		cividis: [
-			"#00224e",
-			"#7d7c78",
-			"#fee838"
-		],
-		rainbow: [
-			"#B41DB4",
-			"#FFFF00",
-			"#00FFFF"
-		]
-	};
-	const COLORSCALES = Object.keys(COLORSCHEMES);
+		if (highlightText) context.restore();
+	}
+	function sliceTextToFitWidth(context, width, text, style, fontUnit = "pt") {
+		if (computeTextWidth(context, text, style, fontUnit) <= width) return text;
+		const ellipsis = "...";
+		const ellipsisWidth = computeTextWidth(context, ellipsis, style, fontUnit);
+		if (ellipsisWidth >= width) return "";
+		let lowerBoundLen = 1;
+		let upperBoundLen = text.length;
+		let currentWidth;
+		while (lowerBoundLen <= upperBoundLen) {
+			const currentLen = Math.floor((lowerBoundLen + upperBoundLen) / 2);
+			currentWidth = computeTextWidth(context, text.slice(0, currentLen), style, fontUnit);
+			if (currentWidth + ellipsisWidth > width) upperBoundLen = currentLen - 1;
+			else lowerBoundLen = currentLen + 1;
+		}
+		const slicedText = text.slice(0, Math.max(0, lowerBoundLen - 1));
+		return slicedText ? slicedText + ellipsis : "";
+	}
 	/**
-	* Returns a function that maps a value to a color using a color scale defined by the given
-	* color/threshold values pairs.
+	* Return the position to draw text on a rotated canvas to ensure that the rotated text alignment correspond
+	* with to original's text vertical and horizontal alignment.
 	*/
-	function getColorScale(colorScalePoints) {
-		if (colorScalePoints.length < 2) throw new Error("Color scale must have at least 2 points");
-		const sortedColorScalePoints = [...colorScalePoints.sort((a, b) => a.value - b.value)];
-		const thresholds = [];
-		for (let i = 1; i < sortedColorScalePoints.length; i++) {
-			const minColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i - 1].color).a;
-			const maxColorAlpha = colorOrNumberToRGBA(sortedColorScalePoints[i].color).a;
-			const minColor = colorToNumber(sortedColorScalePoints[i - 1].color);
-			const maxColor = colorToNumber(sortedColorScalePoints[i].color);
-			thresholds.push({
-				min: sortedColorScalePoints[i - 1].value,
-				max: sortedColorScalePoints[i].value,
-				minColor,
-				maxColor,
-				minColorAlpha,
-				maxColorAlpha,
-				colorDiff: computeColorDiffUnits(sortedColorScalePoints[i - 1].value, sortedColorScalePoints[i].value, minColor, maxColor)
+	function computeRotationPosition(rect, style) {
+		if (!style.rotation || style.rotation % (Math.PI * 2) === 0) return rect;
+		let { x, y } = rect;
+		const cos = Math.cos(-style.rotation);
+		const sin = Math.sin(-style.rotation);
+		const width = rect.textWidth - 2 * 4;
+		const height = rect.textHeight;
+		const center = style.align === "center";
+		const rotateTowardCellCenter = style.align === "left" === sin < 0;
+		const sh = sin * height;
+		const sw = Math.abs(sin * width);
+		const ch = cos * height;
+		if (style.verticalAlign === "top") if (center) {
+			y += sw / 2;
+			x -= sh / 2;
+		} else if (rotateTowardCellCenter) x -= sh;
+		else y += sw;
+		else if (!style.verticalAlign || style.verticalAlign === "bottom") {
+			y += height - ch;
+			if (center) {
+				y -= sw / 2;
+				x -= sh / 2;
+			} else if (rotateTowardCellCenter) {
+				x -= sh;
+				y -= sw;
+			}
+		} else if (center) {
+			x -= sh / 2;
+			y -= height / 2;
+			if (rotateTowardCellCenter) y += sh;
+			else y -= sh;
+		} else if (rotateTowardCellCenter) {
+			x -= sh;
+			y -= sw / 2;
+		} else y += sw / 2 + ch / 4;
+		return {
+			x: cos * x - sin * y,
+			y: cos * y + sin * x
+		};
+	}
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_colorscale_plugin.ts
+/** This is a chartJS plugin that will draw the heatmap colorscale at the chart legend position */
+	const chartColorScalePlugin = {
+		id: "chartColorScalePlugin",
+		afterDatasetsDraw(chart, args, options) {
+			if (!options.position || options.position === "none" || !options.colorScale.length) return;
+			const ctx = chart.ctx;
+			ctx.save();
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.miterLimit = 1;
+			const gradientHeight = (chart.chartArea.bottom - chart.chartArea.top) / 2;
+			const gradientWidth = 10;
+			const gradientX = options.position === "left" ? 20 : ctx.canvas.width - 70;
+			const gradientY = chart.chartArea.top;
+			const gradient = ctx.createLinearGradient(0, gradientY + gradientHeight, 0, gradientY);
+			const step = 1 / (options.colorScale.length - 1);
+			options.colorScale.forEach((color, index) => {
+				gradient.addColorStop(index * step, color);
 			});
+			ctx.fillStyle = gradient;
+			ctx.fillRect(gradientX, gradientY, gradientWidth, gradientHeight);
+			ctx.fillStyle = options.fontColor ?? "black";
+			ctx.font = getDefaultContextFont(12);
+			ctx.textAlign = "left";
+			let minValue = Math.round(options.minValue * 100) / 100;
+			let maxValue = Math.round(options.maxValue * 100) / 100;
+			if (options.minValue === options.maxValue) {
+				minValue -= 1;
+				maxValue += 1;
+			}
+			const formattedMaxValue = humanizeNumber({
+				value: maxValue,
+				format: void 0
+			}, options.locale);
+			const formattedMinValue = humanizeNumber({
+				value: minValue,
+				format: void 0
+			}, options.locale);
+			ctx.fillText(formattedMinValue, gradientX + gradientWidth + 5, gradientY + gradientHeight - 6);
+			ctx.fillText(formattedMaxValue, gradientX + gradientWidth + 5, gradientY + 6);
+			ctx.restore();
 		}
-		return (value) => {
-			if (value < thresholds[0].min) return colorNumberToHex(thresholds[0].minColor, thresholds[0].minColorAlpha);
-			for (const threshold of thresholds) if (value >= threshold.min && value <= threshold.max) return colorNumberToHex(colorCell(value, threshold.min, threshold.minColor, threshold.colorDiff), threshold.maxColorAlpha);
-			return colorNumberToHex(thresholds[thresholds.length - 1].maxColor, thresholds[thresholds.length - 1].maxColorAlpha);
+	};
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_funnel_chart.ts
+	function getFunnelChartController() {
+		if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
+		return class FunnelChartController extends globalThis.Chart.BarController {
+			static id = "funnel";
+			static defaults = {
+				...globalThis.Chart?.BarController.defaults,
+				dataElementType: "funnel",
+				animation: { duration: (ctx) => {
+					if (ctx.type !== "data") return 1e3;
+					return 1e3 * (ctx.raw[1] / Math.max(...ctx.dataset.data.map((data) => data[1])));
+				} }
+			};
+			/** Called at each chart render to update the elements of the chart (FunnelChartElement) with the updated data */
+			updateElements(rects, start, count, mode) {
+				super.updateElements(rects, start, count, mode);
+				for (let i = start; i < start + count; i++) {
+					const rect = rects[i];
+					this.updateElement(rect, i, { nextElement: rects[i + 1] }, mode);
+				}
+			}
 		};
 	}
-	function computeColorDiffUnits(minValue, maxValue, minColor, maxColor) {
-		const deltaValue = maxValue - minValue;
-		const deltaColorR = (minColor >> 16) % 256 - (maxColor >> 16) % 256;
-		const deltaColorG = (minColor >> 8) % 256 - (maxColor >> 8) % 256;
-		const deltaColorB = minColor % 256 - maxColor % 256;
-		return [
-			deltaColorR / deltaValue,
-			deltaColorG / deltaValue,
-			deltaColorB / deltaValue
-		];
+	function getFunnelChartElement() {
+		if (!globalThis.Chart) throw new Error("Chart.js library is not loaded");
+		/**
+		* Similar to a bar chart element, but it's a trapezoid rather than a rectangle. The top is of width
+		* `width`, and the bottom is of width `nextElementWidth`.
+		*/
+		return class FunnelChartElement extends globalThis.Chart.BarElement {
+			static id = "funnel";
+			/** Overwrite this to draw a trapezoid rather then a rectangle */
+			draw(ctx) {
+				ctx.save();
+				const { x, y, height, nextElement, base, options } = this.getProps([
+					"x",
+					"y",
+					"width",
+					"height",
+					"nextElement",
+					"base",
+					"options"
+				]);
+				const width = getElementWidth(this);
+				const offset = (width - (nextElement ? getElementWidth(nextElement) : 0)) / 2;
+				const startX = Math.min(x, base);
+				const startY = y - height / 2;
+				ctx.fillStyle = options.backgroundColor;
+				ctx.beginPath();
+				ctx.moveTo(startX, startY);
+				ctx.lineTo(startX + width, startY);
+				ctx.lineTo(startX + width - offset, startY + height);
+				ctx.lineTo(startX + offset, startY + height);
+				ctx.closePath();
+				ctx.fill();
+				if (options.borderWidth) {
+					ctx.strokeStyle = options.borderColor;
+					ctx.lineWidth = options.borderWidth;
+					ctx.stroke();
+				}
+				ctx.restore();
+			}
+			/** Check if the mouse is inside the trapezoid */
+			inRange(mouseX, mouseY) {
+				const { x, y, height, nextElement, base } = this.getProps([
+					"x",
+					"y",
+					"width",
+					"height",
+					"nextElement",
+					"base",
+					"options"
+				]);
+				const width = getElementWidth(this);
+				const nextElementWidth = nextElement ? getElementWidth(nextElement) : 0;
+				const startX = Math.min(x, base);
+				const startY = y - height / 2;
+				if (mouseY < startY || mouseY > startY + height) return false;
+				const offset = (width - nextElementWidth) / 2;
+				const left = startX + offset * (mouseY - startY) / height;
+				const right = startX + width - offset * (mouseY - startY) / height;
+				if (mouseX < left || mouseX > right) return false;
+				return true;
+			}
+		};
 	}
-	function colorCell(value, minValue, minColor, colorDiffUnit) {
-		const [colorDiffUnitR, colorDiffUnitG, colorDiffUnitB] = colorDiffUnit;
-		const r = Math.round((minColor >> 16) % 256 - colorDiffUnitR * (value - minValue));
-		const g = Math.round((minColor >> 8) % 256 - colorDiffUnitG * (value - minValue));
-		const b = Math.round(minColor % 256 - colorDiffUnitB * (value - minValue));
-		return r << 16 | g << 8 | b;
+	/**
+	* Get an element width.
+	*
+	* The property width is undefined during animations, we need to compute it manually.
+	*/
+	function getElementWidth(element) {
+		const { x, base } = element.getProps(["x", "base"]);
+		return Math.max(x, base) - Math.min(x, base);
 	}
+	/**
+	* Position the tooltip inside the trapezoid.
+	* The default position for tooltips of bar elements is at the end of rectangle, which is not ideal for trapezoids.
+	*/
+	const funnelTooltipPositioner = function(elements) {
+		if (!elements.length) return {
+			x: 0,
+			y: 0
+		};
+		const { x, y, base, width, height } = elements[0].element.getProps([
+			"x",
+			"y",
+			"width",
+			"height",
+			"base"
+		]);
+		const startX = Math.min(x, base);
+		const startY = y - height / 2;
+		return {
+			x: startX + width * 2 / 3,
+			y: startY + height / 2
+		};
+	};
+
+//#endregion
+//#region src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts
+	const chartMinorGridPlugin = {
+		id: "o-spreadsheet-minor-gridlines",
+		beforeDatasetsDraw(chart) {
+			const ctx = chart.ctx;
+			const chartArea = chart.chartArea;
+			if (!chartArea) return;
+			for (const scaleId in chart.scales) {
+				const scale = chart.scales[scaleId];
+				const options = scale.options;
+				const minor = options?.grid?.minor;
+				if (!minor?.display) continue;
+				const showMajorGrid = options?.grid?.display;
+				const ticks = scale.ticks;
+				if (!ticks || ticks.length < 2) continue;
+				ctx.save();
+				ctx.lineWidth = 1;
+				ctx.strokeStyle = minor.color ?? options?.grid?.color ?? "#e6e6e6";
+				for (let i = 0; i < ticks.length - 1; i++) {
+					const start = scale.getPixelForTick(i);
+					const end = scale.getPixelForTick(i + 1);
+					if (!isFinite(start) || !isFinite(end)) continue;
+					for (let j = showMajorGrid ? 1 : 0; j < 4; j++) {
+						const ratio = j / 4;
+						const position = Math.round(start + (end - start) * ratio) + .5;
+						ctx.beginPath();
+						if (scale.isHorizontal()) {
+							ctx.moveTo(position, chartArea.top);
+							ctx.lineTo(position, chartArea.bottom);
+						} else {
+							ctx.moveTo(chartArea.left, position);
+							ctx.lineTo(chartArea.right, position);
+						}
+						ctx.stroke();
+					}
+				}
+				ctx.restore();
+			}
+		}
+	};
 
 //#endregion
 //#region src/xlsx/constants.ts
@@ -10128,6 +10140,7 @@ set(value) {
 //#endregion
 //#region src/components/figures/chart/chartJs/chartjs_show_values_plugin.ts
 	const MINIMAL_VERTICAL_DISTANCE = 13;
+	const HORIZONTAL_PADDING = 3;
 	function isLineOverlayOnBarChart(options, dataset) {
 		return options.type === "bar" && dataset.type === "line";
 	}
@@ -10137,175 +10150,276 @@ set(value) {
 		afterDatasetsDraw(chart, args, options) {
 			if (!options.showValues) return;
 			if (!chart._metasets?.[0]?.data) return;
-			const ctx = chart.ctx;
-			ctx.save();
-			ctx.textAlign = "center";
-			ctx.textBaseline = "middle";
-			ctx.miterLimit = 1;
 			switch (options.type) {
 				case "pie":
-					drawPieChartValues(chart, options, ctx);
+					drawPieValues(chart, options);
 					break;
 				case "line":
 				case "scatter":
+					drawLineValues(chart, options);
+					break;
 				case "combo":
 				case "waterfall":
+					drawComboValues(chart, options);
+					break;
 				case "radar":
-					drawLineOrBarOrRadarChartValues(chart, options, ctx);
+					drawRadarValues(chart, options);
 					break;
 				case "bar":
-					options.horizontal ? drawHorizontalBarChartValues(chart, options, ctx) : drawLineOrBarOrRadarChartValues(chart, options, ctx);
+					options.horizontal ? drawHorizontalBarValues(chart, options) : drawVerticalBarValues(chart, options);
 					break;
 				case "pyramid":
-					drawHorizontalBarChartValues(chart, options, ctx);
+					drawHorizontalBarValues(chart, options);
 					break;
 				case "calendar":
-					drawBarChartValues(chart, options, ctx);
+					drawCalendarValues(chart, options);
 					break;
 				case "bubble":
-					drawBubbleChartValues(chart, options, ctx);
+					drawBubbleValues(chart, options);
 					break;
 				case "funnel":
-					drawHorizontalBarChartValues(chart, options, ctx);
+					drawFunnelValues(chart, options);
 					break;
 			}
-			ctx.restore();
 		}
 	};
-	function drawTextWithBackground(text, x, y, ctx) {
-		ctx.lineWidth = 3;
-		ctx.strokeText(text, x, y);
-		ctx.lineWidth = 1;
-		ctx.fillText(text, x, y);
-	}
-	function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
+	function drawValues(args) {
+		const { chart, options, getNumberValue, direction } = args;
+		const ctx = chart.ctx;
+		ctx.save();
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.miterLimit = 1;
 		const textsPositions = {};
 		for (const dataset of chart._metasets) {
-			if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden || isLineOverlayOnBarChart(options, dataset)) continue;
-			const yAxisScale = chart.scales[dataset.yAxisID];
+			if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) continue;
 			for (let i = 0; i < dataset._parsed.length; i++) {
-				const parsedValue = dataset._parsed[i];
-				const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
-				if (isNaN(value)) continue;
-				const point = dataset.data[i];
-				const xPosition = point.x;
-				let yPosition = 0;
-				if (chart.config.type === "line" || chart.config.type === "radar") yPosition = value < 0 ? point.y + 10 : point.y - 10;
-				else if (chart.config.type === "bubble") yPosition = point.y;
-				else {
-					const yZeroLine = yAxisScale.getPixelForValue(0);
-					const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
-					const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-					if (distanceFromAxisOrigin < textHeight) yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
-					else yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
-				}
-				if (!textsPositions[xPosition]) textsPositions[xPosition] = [];
-				for (const otherPosition of textsPositions[xPosition] || []) if (Math.abs(otherPosition - yPosition) < MINIMAL_VERTICAL_DISTANCE) yPosition = otherPosition + MINIMAL_VERTICAL_DISTANCE * (value < 0 ? 1 : -1);
-				textsPositions[xPosition].push(yPosition);
-				ctx.fillStyle = point.options.backgroundColor;
-				ctx.strokeStyle = options.background(Number(value), dataset, i) || "#ffffff";
-				drawTextWithBackground(options.callback(Number(value), dataset, i), xPosition, yPosition, ctx);
+				const numberValue = getNumberValue(dataset, i);
+				if (numberValue === void 0 || isNaN(numberValue)) continue;
+				const chartElement = dataset.data[i];
+				const elementColor = chartElement.options.backgroundColor;
+				if (!elementColor || colorToRGBA(elementColor).a !== 1) continue;
+				const valueToDisplay = options.callback(numberValue, dataset, i);
+				const textSize = getTextDimensions(valueToDisplay, ctx);
+				const callbackArgs = {
+					dataset,
+					chartElement,
+					numberValue,
+					valueIndex: i,
+					textSize,
+					options,
+					chart
+				};
+				const position = args.getValuePosition(callbackArgs);
+				if (args.shouldSkipValue?.(callbackArgs)) continue;
+				if (direction === "vertical") {
+					const key = Math.round(position.x);
+					if (!textsPositions[key]) textsPositions[key] = [];
+					for (const otherPosition of textsPositions[key] || []) if (Math.abs(otherPosition - position.y) < MINIMAL_VERTICAL_DISTANCE) position.y = otherPosition + MINIMAL_VERTICAL_DISTANCE * (numberValue < 0 ? 1 : -1);
+					textsPositions[key].push(position.y);
+				} else {
+					const key = Math.round(position.y);
+					if (!textsPositions[key]) textsPositions[key] = [];
+					for (const otherPosition of textsPositions[key]) if (Math.abs(otherPosition - position.x) < textSize.width) position.x = numberValue < 0 ? otherPosition - textSize.width - HORIZONTAL_PADDING : otherPosition + textSize.width + HORIZONTAL_PADDING;
+					textsPositions[key].push(position.x);
+				}
+				const { strokeColor, textColor } = args.getTextColors(callbackArgs);
+				if (!!strokeColor) {
+					ctx.strokeStyle = strokeColor;
+					ctx.lineWidth = 3;
+					ctx.strokeText(valueToDisplay, position.x, position.y);
+				}
+				ctx.fillStyle = textColor;
+				ctx.lineWidth = 1;
+				ctx.fillText(valueToDisplay, position.x, position.y);
 			}
 		}
+		ctx.restore();
 	}
-	function drawBarChartValues(chart, options, ctx) {
-		const yMax = chart.chartArea.bottom;
-		const yMin = chart.chartArea.top;
-		for (const dataset of chart._metasets) {
-			if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) continue;
-			const yAxisScale = chart.scales[dataset.yAxisID];
-			for (let i = 0; i < dataset._parsed.length; i++) {
-				const parsedValue = dataset._parsed[i];
-				const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
-				if (isNaN(value)) continue;
-				const point = dataset.data[i];
-				const xPosition = point.x;
-				let yPosition = 0;
-				const yZeroLine = yAxisScale.getPixelForValue(0);
-				const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
-				const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-				if (distanceFromAxisOrigin < textHeight) yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
-				else yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
-				yPosition = Math.min(yPosition, yMax);
-				yPosition = Math.max(yPosition, yMin);
-				ctx.strokeStyle = point.options.backgroundColor;
-				ctx.fillStyle = options.background(Number(value), dataset, i) || "#ffffff";
-				const valueToDisplay = options.callback(Number(value), dataset, i);
-				const measures = ctx.measureText(valueToDisplay);
-				if (measures.actualBoundingBoxAscent + measures.actualBoundingBoxDescent + 2 > Math.abs(point.height) - 2) continue;
-				drawTextWithBackground(valueToDisplay, xPosition, yPosition, ctx);
-			}
-		}
-	}
-	function drawBubbleChartValues(chart, options, ctx) {
-		const yMax = chart.chartArea.bottom;
-		const yMin = chart.chartArea.top;
-		const textsPositions = {};
-		for (const dataset of chart._metasets) for (let i = 0; i < dataset._parsed.length; i++) {
-			const value = dataset._parsed[i].y;
-			if (isNaN(value)) continue;
-			const point = dataset.data[i];
-			const xPosition = point.x;
-			let yPosition = Math.max(Math.min(point.y, yMax), yMin);
-			if (!textsPositions[xPosition]) textsPositions[xPosition] = [];
-			for (const otherPosition of textsPositions[xPosition] || []) if (Math.abs(otherPosition - yPosition) < MINIMAL_VERTICAL_DISTANCE) yPosition = otherPosition + MINIMAL_VERTICAL_DISTANCE * (value < 0 ? 1 : -1);
-			textsPositions[xPosition].push(yPosition);
-			const color = point.options.backgroundColor ?? "#ffffff";
-			if (hexToHSLA(toHex(color)).a === 1) ctx.fillStyle = chartFontColor(color);
-			else ctx.fillStyle = "#000000";
-			const valueToDisplay = options.callback(Number(value), dataset, i);
-			ctx.fillText(valueToDisplay, xPosition, yPosition);
-		}
-	}
-	function drawHorizontalBarChartValues(chart, options, ctx) {
-		const textsPositions = {};
-		for (const dataset of chart._metasets) {
-			if (isTrendLineAxis(dataset.xAxisID) || isLineOverlayOnBarChart(options, dataset)) continue;
-			const xZeroLine = chart.scales[dataset.xAxisID].getPixelForValue(0);
-			for (let i = 0; i < dataset._parsed.length; i++) {
-				const value = Number(dataset._parsed[i].x);
-				if (isNaN(value)) continue;
-				const displayValue = options.callback(value, dataset, i);
-				const point = dataset.data[i];
-				const yPosition = point.y;
-				const textWidth = computeTextWidth(ctx, displayValue, { fontSize: globalThis.Chart?.defaults.font.size ?? 12 }, "px");
-				const distanceFromAxisOrigin = Math.abs(point.x - xZeroLine);
-				const PADDING = 3;
+	function drawVerticalBarValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+			getValuePosition: getVerticalBarValuePosition,
+			shouldSkipValue: ({ dataset }) => isLineOverlayOnBarChart(options, dataset),
+			getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+		});
+	}
+	function drawRadarValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => Number(dataset._parsed[i].r),
+			getValuePosition: ({ chartElement }) => ({
+				x: chartElement.x,
+				y: chartElement.y - 10
+			}),
+			shouldSkipValue: () => false,
+			getTextColors: chartElementColoredTextWithChartBackgroundHalo
+		});
+	}
+	function drawLineValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+			getValuePosition: ({ chartElement }) => ({
+				x: chartElement.x,
+				y: chartElement.y - 10
+			}),
+			shouldSkipValue: () => false,
+			getTextColors: chartElementColoredTextWithChartBackgroundHalo
+		});
+	}
+	function drawComboValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => Number(dataset._parsed[i].y),
+			getValuePosition: (args) => args.dataset.type === "line" ? {
+				x: args.chartElement.x,
+				y: args.chartElement.y - 10
+			} : getVerticalBarValuePosition(args),
+			shouldSkipValue: () => false,
+			getTextColors: (args) => args.dataset.type === "line" ? chartElementColoredTextWithChartBackgroundHalo(args) : chartBackgroundColoredTextWithElementColoredHalo(args)
+		});
+	}
+	function drawCalendarValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => dataset._parsed[i].y,
+			getValuePosition: ({ chartElement }) => ({
+				x: chartElement.x,
+				y: chartElement.y + chartElement.height / 2
+			}),
+			shouldSkipValue: ({ chartElement, textSize }) => textSize.height + 2 > Math.abs(chartElement.height) - 2,
+			getTextColors: ({ chartElement }) => ({
+				strokeColor: void 0,
+				textColor: chartFontColor(chartElement.options.backgroundColor)
+			})
+		});
+	}
+	function drawBubbleValues(chart, options) {
+		const canDrawTextInsideBubble = (chartElement, textSize) => {
+			const radius = chartElement.options.radius ?? globalThis.Chart?.defaults.elements.point.radius ?? 3;
+			return textSize.height < radius * 2;
+		};
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => dataset._parsed[i].y,
+			getValuePosition: ({ chartElement, textSize }) => ({
+				x: chartElement.x,
+				y: canDrawTextInsideBubble(chartElement, textSize) ? chartElement.y : chartElement.y - 10
+			}),
+			shouldSkipValue: () => false,
+			getTextColors: (args) => {
+				return canDrawTextInsideBubble(args.chartElement, args.textSize) ? chartBackgroundColoredTextWithElementColoredHalo(args) : chartElementColoredTextWithChartBackgroundHalo(args);
+			}
+		});
+	}
+	function drawHorizontalBarValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "horizontal",
+			getNumberValue: (dataset, i) => dataset._parsed[i].x,
+			getValuePosition: ({ chartElement, numberValue, textSize, dataset }) => {
+				const xZeroLine = chart.scales[dataset.xAxisID].getPixelForValue(0);
+				const distanceFromAxisOrigin = Math.abs(chartElement.x - xZeroLine);
 				let xPosition;
-				if (distanceFromAxisOrigin < textWidth) xPosition = value < 0 ? xZeroLine - textWidth / 2 - PADDING : xZeroLine + textWidth / 2 + PADDING;
-				else xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
-				if (!textsPositions[yPosition]) textsPositions[yPosition] = [];
-				for (const otherPosition of textsPositions[yPosition]) if (Math.abs(otherPosition - xPosition) < textWidth) xPosition = value < 0 ? otherPosition - textWidth - PADDING : otherPosition + textWidth + PADDING;
-				textsPositions[yPosition].push(xPosition);
-				ctx.strokeStyle = point.options.backgroundColor;
-				ctx.fillStyle = options.background(Number(value), dataset, i) || "#ffffff";
-				drawTextWithBackground(displayValue, xPosition, yPosition, ctx);
-			}
-		}
-	}
-	function drawPieChartValues(chart, options, ctx) {
-		for (const dataset of chart._metasets) for (let i = 0; i < dataset._parsed.length; i++) {
-			const value = Number(dataset._parsed[i]);
-			if (isNaN(value) || value === 0) continue;
-			const bar = dataset.data[i];
-			const { startAngle, endAngle, innerRadius, outerRadius } = bar;
-			const midAngle = (startAngle + endAngle) / 2;
-			const midRadius = (innerRadius + outerRadius) / 2;
-			const x = bar.x + midRadius * Math.cos(midAngle);
-			const y = bar.y + midRadius * Math.sin(midAngle);
-			const displayValue = options.callback(value, dataset, i);
-			const textHeight = globalThis.Chart?.defaults.font.size ?? 12;
-			const textWidth = computeTextWidth(ctx, displayValue, { fontSize: textHeight }, "px");
-			const radius = outerRadius - innerRadius;
-			if (textWidth >= radius || radius < textHeight) continue;
-			const sliceAngle = endAngle - startAngle;
-			const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
-			if (sliceAngle < Math.PI / 2 && (textWidth >= midWidth || midWidth < textHeight)) continue;
-			const background = options.background(Number(value), dataset, i);
-			ctx.fillStyle = chartFontColor(background);
-			ctx.strokeStyle = background || "#ffffff";
-			drawTextWithBackground(displayValue, x, y, ctx);
-		}
+				const sign = numberValue < 0 ? -1 : 1;
+				if (distanceFromAxisOrigin < textSize.width) xPosition = xZeroLine + sign * (textSize.width / 2 + HORIZONTAL_PADDING);
+				else xPosition = chartElement.x - sign * (chartElement.width / 2);
+				return {
+					x: xPosition,
+					y: chartElement.y
+				};
+			},
+			shouldSkipValue: ({ dataset }) => isLineOverlayOnBarChart(options, dataset),
+			getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+		});
+	}
+	function drawFunnelValues(chart, options) {
+		drawValues({
+			chart,
+			options,
+			direction: "horizontal",
+			getNumberValue: (dataset, i) => dataset._parsed[i].x,
+			getValuePosition: ({ chartElement }) => ({
+				x: chartElement.x - chartElement.width / 2,
+				y: chartElement.y
+			}),
+			shouldSkipValue: () => false,
+			getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+		});
+	}
+	function drawPieValues(chart, options) {
+		const getSliceDimensions = (chartElement) => {
+			const { startAngle, endAngle, innerRadius, outerRadius } = chartElement;
+			return {
+				midAngle: (startAngle + endAngle) / 2,
+				midRadius: (innerRadius + outerRadius) / 2
+			};
+		};
+		drawValues({
+			chart,
+			options,
+			direction: "vertical",
+			getNumberValue: (dataset, i) => Number(dataset._parsed[i]),
+			getValuePosition: ({ chartElement }) => {
+				const { midAngle, midRadius } = getSliceDimensions(chartElement);
+				return {
+					x: chartElement.x + midRadius * Math.cos(midAngle),
+					y: chartElement.y + midRadius * Math.sin(midAngle)
+				};
+			},
+			shouldSkipValue: ({ chartElement, textSize }) => {
+				const { midRadius } = getSliceDimensions(chartElement);
+				const sliceAngle = chartElement.endAngle - chartElement.startAngle;
+				const midWidth = 2 * midRadius * Math.tan(sliceAngle / 2);
+				return sliceAngle < Math.PI / 2 && (textSize.width >= midWidth || midWidth < textSize.height);
+			},
+			getTextColors: chartBackgroundColoredTextWithElementColoredHalo
+		});
+	}
+	function getTextDimensions(text, ctx) {
+		return computeCachedTextDimension(ctx, text, computeTextFont({ fontSize: globalThis.Chart?.defaults.font.size ?? 12 }, "px"));
+	}
+	function chartBackgroundColoredTextWithElementColoredHalo(args) {
+		const { dataset, numberValue, valueIndex, chartElement, options } = args;
+		return {
+			strokeColor: chartElement.options.backgroundColor,
+			textColor: options.background(numberValue, dataset, valueIndex) || "#ffffff"
+		};
+	}
+	function chartElementColoredTextWithChartBackgroundHalo(args) {
+		const { dataset, numberValue, valueIndex, chartElement, options } = args;
+		return {
+			strokeColor: options.background(numberValue, dataset, valueIndex) || "#ffffff",
+			textColor: chartElement.options.backgroundColor
+		};
+	}
+	function getVerticalBarValuePosition(args) {
+		const { chartElement, numberValue, dataset, textSize, chart } = args;
+		const yZeroLine = chart.scales[dataset.yAxisID].getPixelForValue(0);
+		const distanceFromAxisOrigin = Math.abs(yZeroLine - chartElement.y);
+		const sign = numberValue < 0 ? -1 : 1;
+		let yPosition = 0;
+		if (distanceFromAxisOrigin < textSize.height) yPosition = yZeroLine - sign * (textSize.height / 2);
+		else yPosition = chartElement.y + sign * (chartElement.height / 2);
+		return {
+			x: chartElement.x,
+			y: yPosition
+		};
 	}
 
 //#endregion
@@ -11162,6 +11276,7 @@ set(value) {
 				hidden,
 				borderColor,
 				backgroundColor: borderColor,
+				pointBackgroundColor: borderColor,
 				pointRadius: definition.hideDataMarkers ? 0 : 3
 			};
 			if (fill) {
@@ -12074,11 +12189,11 @@ set(value) {
 		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);
+			drawDecoratedText(ctx, structure.baseline.text, structure.baseline.position, structure.baseline.style.underline, structure.baseline.style.strikethrough, void 0, structure.baseline.style.highlightText);
 		}
 		if (structure.baselineArrow && structure.baselineArrow.style.size > 0 && Path2DConstructor) {
 			ctx.save();
-			ctx.fillStyle = structure.baselineArrow.style.color;
+			ctx.fillStyle = structure.baselineArrow.style.highlight ? lightenColor(structure.baselineArrow.style.color, DEFAULT_TEXT_HIGHLIGHT_PERCENT) : structure.baselineArrow.style.color;
 			ctx.translate(structure.baselineArrow.position.x, structure.baselineArrow.position.y);
 			const ratio = structure.baselineArrow.style.size / 10;
 			ctx.scale(ratio, ratio);
@@ -12096,18 +12211,18 @@ set(value) {
 			const descr = structure.baselineDescr;
 			ctx.font = descr.style.font;
 			ctx.fillStyle = descr.style.color;
-			ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
+			drawDecoratedText(ctx, clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position, void 0, void 0, void 0, structure.baseline?.style.highlightText);
 		}
 		if (structure.key) {
 			ctx.font = structure.key.style.font;
 			ctx.fillStyle = structure.key.style.color;
-			drawDecoratedText(ctx, clipTextWithEllipsis(ctx, structure.key.text, availableWidth - structure.key.position.x), structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
+			drawDecoratedText(ctx, clipTextWithEllipsis(ctx, structure.key.text, availableWidth - structure.key.position.x), structure.key.position, structure.key.style.underline, structure.key.style.strikethrough, void 0, structure.key.style.highlightText);
 		}
 		if (structure.keyDescr) {
 			const descr = structure.keyDescr;
 			ctx.font = structure.keyDescr?.style.font ?? descr.style.font;
 			ctx.fillStyle = descr.style.color;
-			ctx.fillText(clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position.x, descr.position.y);
+			drawDecoratedText(ctx, clipTextWithEllipsis(ctx, descr.text, availableWidth - descr.position.x), descr.position, void 0, void 0, void 0, structure.key?.style.highlightText);
 		}
 		if (structure.progressBar) {
 			ctx.fillStyle = structure.progressBar.style.backgroundColor;
@@ -12331,29 +12446,34 @@ set(value) {
 					color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
 					font: getDefaultContextFont(keyValueFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
 					strikethrough: this.runtime.keyValueStyle?.strikethrough,
-					underline: this.runtime.keyValueStyle?.underline
+					underline: this.runtime.keyValueStyle?.underline,
+					highlightText: this.runtime.keyHighlight
 				},
 				keyDescr: {
 					color: this.runtime.keyValueDescrStyle?.textColor || this.runtime.fontColor,
 					font: getDefaultContextFont(keyValueDescrFontSize, this.runtime.keyValueDescrStyle?.bold, this.runtime.keyValueDescrStyle?.italic),
 					strikethrough: this.runtime.keyValueDescrStyle?.strikethrough,
-					underline: this.runtime.keyValueDescrStyle?.underline
+					underline: this.runtime.keyValueDescrStyle?.underline,
+					highlightText: this.runtime.keyHighlight
 				},
 				baselineValue: {
 					font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
 					strikethrough: this.runtime.baselineStyle?.strikethrough,
 					underline: this.runtime.baselineStyle?.underline,
-					color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor
+					color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor,
+					highlightText: this.runtime.baselineHighlight
 				},
 				baselineDescr: {
 					font: getDefaultContextFont(baselineDescrFontSize, this.runtime.baselineDescrStyle?.bold, this.runtime.baselineDescrStyle?.italic),
 					strikethrough: this.runtime.baselineDescrStyle?.strikethrough,
 					underline: this.runtime.baselineDescrStyle?.underline,
-					color: this.runtime.baselineDescrStyle?.textColor ?? this.secondaryFontColor
+					color: this.runtime.baselineDescrStyle?.textColor ?? this.secondaryFontColor,
+					highlightText: this.runtime.baselineHighlight
 				},
 				baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar ? void 0 : {
 					size: this.keyValue ? .8 * baselineValueFontSize : 0,
-					color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor
+					color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor,
+					highlight: this.runtime.baselineHighlight
 				}
 			};
 		}
@@ -12449,11 +12569,14 @@ set(value) {
 			});
 			(0, _odoo_owl.onWillUnmount)(() => resizeObserver.disconnect());
 		}
+		config(canvasRect, zoom) {
+			return getScorecardConfiguration(getZoomedRect(1 / zoom, canvasRect), this.runtime);
+		}
 		createChart() {
 			const canvas = this.canvas();
 			if (!canvas) return;
 			const zoom = this.env.model.getters.getViewportZoomLevel();
-			drawScoreChart(getScorecardConfiguration(getZoomedRect(1 / zoom, canvas.getBoundingClientRect()), this.runtime), canvas, zoom);
+			drawScoreChart(this.config(canvas.getBoundingClientRect(), zoom), canvas, zoom);
 		}
 	};
 
@@ -28057,7 +28180,7 @@ set(value) {
 	*/
 	function filterInvalidHierarchicalPoints(values, hierarchy) {
 		const numberOfDataPoints = Math.max(values.length, ...hierarchy.map((dataset) => dataset.data?.length || 0));
-		const isEmpty = (value) => value === null || value === "";
+		const isEmpty = (value) => value === void 0 || value === null || value === "";
 		const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
 			const groups = hierarchy.map((dataset) => dataset.data?.[dataPointIndex]);
 			if (isEmpty(groups[0]?.value)) return false;
@@ -28621,23 +28744,11 @@ set(value) {
 	}
 	function getCalendarChartShowValues(definition, args) {
 		const { locale, axisFormats } = args;
-		let background = (_value, dataset, index) => definition.background;
-		const values = args.dataSetsValues.flat().flatMap((dsv) => dsv?.data.filter(isNumberResult)).map((cell) => cell.value);
-		if (values.length) {
-			const min = Math.min(...values);
-			const max = Math.max(...values);
-			const colorScale = getRuntimeColorScale(definition.colorScale ?? schemeToColorScale("oranges"), min, max);
-			background = (_value, dataset, index) => {
-				const value = dataset._dataset.values[index];
-				if (value === void 0) return definition.background;
-				return chartFontColor(colorScale(value));
-			};
-		}
 		return {
 			type: "calendar",
 			horizontal: false,
 			showValues: "showValues" in definition ? !!definition.showValues : false,
-			background,
+			background: () => definition.background,
 			callback: (_value, dataset, index) => {
 				const value = dataset._dataset.values[index];
 				return value === void 0 ? "" : humanizeNumber({
@@ -34538,6 +34649,35 @@ set(value) {
 		}
 	};
 
+//#endregion
+//#region src/components/side_panel/criterion_form/calendar_button/calendar_button.ts
+	var CalendarButton = class extends Component {
+		static template = "o-spreadsheet-CalendarButton";
+		props = (0, _odoo_owl.props)({
+			value: types.string().optional(""),
+			onChange: types.function()
+		});
+		datePickerRef = _odoo_owl.signal.ref(HTMLInputElement);
+		openCalendar() {
+			this.datePickerRef()?.showPicker();
+		}
+		formatDateForInput(value) {
+			const dateValue = parseDateTime(value, DEFAULT_LOCALE);
+			return dateValue ? formatValue(dateValue.value, {
+				format: "yyyy-mm-dd",
+				locale: DEFAULT_LOCALE
+			}) : "";
+		}
+		onDateInputValueChanged(value) {
+			const dateValue = parseDateTime(value, DEFAULT_LOCALE);
+			const formattedValue = dateValue ? formatValue(dateValue.value, {
+				format: DEFAULT_LOCALE.dateFormat,
+				locale: DEFAULT_LOCALE
+			}) : "";
+			this.props.onChange(formattedValue);
+		}
+	};
+
 //#endregion
 //#region src/components/side_panel/criterion_form/criterion_form.ts
 	var CriterionForm = class extends Component {
@@ -35226,7 +35366,8 @@ set(value) {
 		static template = "o-spreadsheet-DataValidationDateCriterion";
 		static components = {
 			CriterionInput,
-			Select
+			Select,
+			CalendarButton
 		};
 		get currentDateValue() {
 			return this.props.criterion.dateValue || "exactDate";
@@ -35252,7 +35393,10 @@ set(value) {
 //#region src/components/side_panel/criterion_form/double_input_criterion/double_input_criterion.ts
 	var DoubleInputCriterionForm = class extends CriterionForm {
 		static template = "o-spreadsheet-DoubleInputCriterionForm";
-		static components = { CriterionInput };
+		static components = {
+			CriterionInput,
+			CalendarButton
+		};
 		onFirstValueChanged(value) {
 			const values = this.props.criterion.values;
 			this.updateCriterion({ values: [value, values[1] || ""] });
@@ -35261,6 +35405,9 @@ set(value) {
 			const values = this.props.criterion.values;
 			this.updateCriterion({ values: [values[0] || "", value] });
 		}
+		get isDateType() {
+			return ["dateIsBetween", "dateIsNotBetween"].includes(this.props.criterion.type);
+		}
 	};
 
 //#endregion
@@ -46607,7 +46754,7 @@ set(value) {
 			horizontalSnap: void 0,
 			verticalSnap: void 0,
 			cancelDnd: void 0,
-			overlappingCarousel: void 0
+			overlappingChartOrCarousel: void 0
 		});
 		setup() {
 			(0, _odoo_owl.onMounted)(() => {
@@ -46623,7 +46770,7 @@ set(value) {
 					this.dnd.selectedRect = void 0;
 					this.dnd.horizontalSnap = void 0;
 					this.dnd.verticalSnap = void 0;
-					this.dnd.overlappingCarousel = void 0;
+					this.dnd.overlappingChartOrCarousel = void 0;
 					this.dnd.cancelDnd = void 0;
 				}
 			});
@@ -46761,11 +46908,11 @@ set(value) {
 				hasStartedDnd = true;
 				const selectedFigures = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigures, maxDimensions, initialScrollPosition, getters.getActiveSheetScrollInfo());
 				const draggedFigure = selectedFigures.find((f) => f.id === draggedFigureId);
-				let overlappingCarousel = void 0;
+				let overlappingChartOrCarousel = void 0;
 				const otherFigures = this.getOtherFigures(selectedFigures.map((f) => f.id));
-				if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingCarousel = this.getCarouselOverlappingChart(draggedFigure, otherFigures);
-				this.dnd.overlappingCarousel = overlappingCarousel;
-				if (!overlappingCarousel) {
+				if (draggedFigure && !selectedFigures.find((f) => f.tag !== "chart")) overlappingChartOrCarousel = this.getOverlappingFigure(draggedFigure, otherFigures);
+				this.dnd.overlappingChartOrCarousel = overlappingChartOrCarousel;
+				if (!overlappingChartOrCarousel) {
 					const snapReturn = snapForMove(getters, selectedFigures, otherFigures);
 					this.dnd.selectedFigures = snapReturn.snappedFigures;
 					this.dnd.selectedRect = this.getDndFigureRect();
@@ -46786,7 +46933,7 @@ set(value) {
 					else this.env.model.dispatch("SELECT_FIGURE", { figureId: figureUI.id });
 					return;
 				}
-				if (!this.dnd.overlappingCarousel) {
+				if (!this.dnd.overlappingChartOrCarousel) {
 					const payloads = this.dnd.selectedFigures?.map((f) => {
 						return {
 							sheetId,
@@ -46796,20 +46943,25 @@ set(value) {
 					}) || [];
 					this.env.model.dispatch("MOVE_FIGURES", { figures: payloads });
 				} else {
-					const carouselFigureId = this.dnd.overlappingCarousel.id;
+					const overlappingFigureId = this.dnd.overlappingChartOrCarousel.id;
 					const chartFigureIds = this.dnd.selectedFigures?.map((f) => f.id) || [];
-					this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
+					if (this.dnd.overlappingChartOrCarousel.tag === "carousel") this.env.model.dispatch("ADD_FIGURES_CHART_TO_CAROUSEL", {
 						sheetId,
-						carouselFigureId,
+						carouselFigureId: overlappingFigureId,
 						chartFigureIds
 					});
+					else if (this.dnd.overlappingChartOrCarousel.tag === "chart") this.env.model.dispatch("MERGE_CHART_FIGURES_INTO_CAROUSEL", {
+						sheetId,
+						baseFigureId: overlappingFigureId,
+						chartFigureIds: [overlappingFigureId, ...chartFigureIds]
+					});
 				}
 				this.dnd.draggedFigure = void 0;
 				this.dnd.selectedFigures = void 0;
 				this.dnd.selectedRect = void 0;
 				this.dnd.horizontalSnap = void 0;
 				this.dnd.verticalSnap = void 0;
-				this.dnd.overlappingCarousel = void 0;
+				this.dnd.overlappingChartOrCarousel = void 0;
 			};
 			this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 		}
@@ -46865,7 +47017,7 @@ set(value) {
 				this.dnd.selectedRect = void 0;
 				this.dnd.horizontalSnap = void 0;
 				this.dnd.verticalSnap = void 0;
-				this.dnd.overlappingCarousel = void 0;
+				this.dnd.overlappingChartOrCarousel = void 0;
 			};
 			this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
 		}
@@ -46875,12 +47027,12 @@ set(value) {
 		getFigureStyle(figureUI) {
 			if (figureUI.id !== this.dnd.draggedFigure?.id) return "";
 			return cssPropertiesToCss({
-				opacity: this.dnd.overlappingCarousel?.id ? "0.6" : "0.9",
+				opacity: this.dnd.overlappingChartOrCarousel?.id ? "0.6" : "0.9",
 				cursor: "grabbing"
 			});
 		}
 		getFigureClass(figureUI) {
-			if (figureUI.id !== this.dnd.overlappingCarousel?.id) return "";
+			if (figureUI.id !== this.dnd.overlappingChartOrCarousel?.id) return "";
 			return "o-add-to-carousel";
 		}
 		getSnap(snapLine) {
@@ -46923,18 +47075,18 @@ set(value) {
 				height: `100%`
 			});
 		}
-		getCarouselOverlappingChart(figureUI, otherFigures) {
+		getOverlappingFigure(figureUI, otherFigures) {
 			if (figureUI.tag !== "chart") return;
 			const figureCenterX = figureUI.x + figureUI.width / 2;
 			const figureCenterY = figureUI.y + figureUI.height / 2;
 			let bestMatch;
 			let smallestDistance = Infinity;
 			for (const figure of otherFigures) {
-				if (figure.tag !== "carousel") continue;
-				const carouselCenterX = figure.x + figure.width / 2;
-				const carouselCenterY = figure.y + figure.height / 2;
-				const distanceX = Math.abs(figureCenterX - carouselCenterX);
-				const distanceY = Math.abs(figureCenterY - carouselCenterY);
+				if (figure.tag !== "chart" && figure.tag !== "carousel") continue;
+				const targetCenterX = figure.x + figure.width / 2;
+				const targetCenterY = figure.y + figure.height / 2;
+				const distanceX = Math.abs(figureCenterX - targetCenterX);
+				const distanceY = Math.abs(figureCenterY - targetCenterY);
 				const squaredDistance = distanceX ** 2 + distanceY ** 2;
 				if (distanceX <= figureUI.width / 2 && distanceY <= figureUI.height / 2 && squaredDistance < smallestDistance) {
 					smallestDistance = squaredDistance;
@@ -53027,11 +53179,16 @@ set(value) {
 				const deltaStyle = {};
 				let hasDelta = false;
 				const styleSheet = this.style[position.sheetId];
-				if (!styleSheet) continue;
 				for (const key in newDefaultStyle) {
 					if (key in cellStyle) continue;
-					const defaults = styleSheet[key];
-					if (!defaults) continue;
+					const defaults = styleSheet?.[key];
+					if (!defaults) {
+						if (newDefaultStyle[key] !== DEFAULT_STYLE[key]) {
+							deltaStyle[key] = DEFAULT_STYLE[key];
+							hasDelta = true;
+						}
+						continue;
+					}
 					const rowDefault = defaults.rowDefault?.[position.row];
 					if (rowDefault !== void 0) {
 						if (priorities.shouldUseDefaultRow) {
@@ -53073,7 +53230,8 @@ set(value) {
 			for (const key in styleSheet) if (!(key in style)) {
 				const defaults = styleSheet[key];
 				if (!defaults) continue;
-				style[key] = defaults.rowDefault?.[position.row] ?? defaults.colDefault?.[position.col] ?? defaults.sheetDefault;
+				const styleValue = defaults.rowDefault?.[position.row] ?? defaults.colDefault?.[position.col] ?? defaults.sheetDefault;
+				if (styleValue !== void 0) style[key] = styleValue;
 			}
 			return style;
 		}
@@ -58721,13 +58879,13 @@ set(value) {
 			const minValue = this.parsePoint(sheetId, range, rule.minimum, "min");
 			const midValue = rule.midpoint ? this.parsePoint(sheetId, range, rule.midpoint) : null;
 			const maxValue = this.parsePoint(sheetId, range, rule.maximum, "max");
-			if (minValue === null || maxValue === null || minValue >= maxValue || midValue && (minValue >= midValue || midValue >= maxValue)) return;
+			if (minValue === null || maxValue === null || minValue >= maxValue || midValue !== null && (minValue >= midValue || midValue >= maxValue)) return;
 			const zone = this.getters.getRangeFromSheetXC(sheetId, range).zone;
 			const colorThresholds = [{
 				value: minValue,
 				color: rule.minimum.color
 			}];
-			if (rule.midpoint && midValue) colorThresholds.push({
+			if (rule.midpoint && midValue !== null) colorThresholds.push({
 				value: midValue,
 				color: rule.midpoint.color
 			});
@@ -66186,7 +66344,9 @@ set(value) {
 			ctx.lineWidth = 1.5 * thinLineWidth;
 			const isDarkMode = this.getters.isDarkMode();
 			for (const zone of zones) {
+				if (!viewports.isZoneVisibleInViewport(sheetId, zone)) continue;
 				const { x, y, width, height } = viewports.getVisibleRect(sheetId, zone);
+				const currentLineWidth = ctx.lineWidth;
 				if (!isDarkMode) ctx.globalCompositeOperation = "multiply";
 				if (height === 0 || width === 0) ctx.lineWidth = 3 * thinLineWidth;
 				if (height === 0 && width === 0) {
@@ -66200,6 +66360,7 @@ set(value) {
 					ctx.globalCompositeOperation = "source-over";
 					ctx.strokeRect(x, y, width, height);
 				}
+				ctx.lineWidth = currentLineWidth;
 			}
 			ctx.globalCompositeOperation = "source-over";
 			const position = renderingContext.activePosition;
@@ -66346,6 +66507,9 @@ set(value) {
 			this.adjustViewportZoneX();
 			this.adjustViewportZoneY();
 		}
+		isZoneVisible(zone) {
+			return intersection(zone, this) !== void 0;
+		}
 		/**
 		*
 		* Computes the visible coordinates & dimensions of a given zone inside the viewport
@@ -66626,6 +66790,9 @@ set(value) {
 		isVisibleInViewport({ sheetId, col, row }) {
 			return this.getSubViewports(sheetId).some((pane) => pane.isVisible(col, row));
 		}
+		isZoneVisibleInViewport(sheetId, zone) {
+			return this.getSubViewports(sheetId).some((pane) => pane.isZoneVisible(zone));
+		}
 		getScrollBarWidth() {
 			return 15 / this.zoomLevel;
 		}
@@ -70699,18 +70866,28 @@ set(value) {
 				return;
 			}
 			const activeSheetId = this.env.model.getters.getActiveSheetId();
-			if (activeSheetId !== sheetId) this.env.model.dispatch("ACTIVATE_SHEET", {
-				sheetIdFrom: activeSheetId,
-				sheetIdTo: sheetId
-			});
-			this.env.model.selection.selectCell(zone.right, zone.bottom);
+			if (activeSheetId !== sheetId) {
+				if (!this.env.model.getters.getSheet(sheetId).isVisible) {
+					this.env.notifyUser({
+						text: _t("The sheet on which the range is defined is hidden."),
+						type: "info",
+						sticky: false
+					});
+					return;
+				}
+				this.env.model.dispatch("ACTIVATE_SHEET", {
+					sheetIdFrom: activeSheetId,
+					sheetIdTo: sheetId
+				});
+			}
+			this.env.model.selection.selectCell(zone.right, zone.bottom, { allowsHiddenSelection: true });
 			this.env.model.selection.selectZone({
 				cell: {
 					col: zone.left,
 					row: zone.top
 				},
 				zone
-			});
+			}, { allowsHiddenSelection: true });
 		}
 		get selectionKey() {
 			return `${this.env.model.getters.getActiveSheetId()}-${zoneToXc(this.selectedZone)}`;
@@ -76989,8 +77166,8 @@ set(value) {
 			for (const key in DEFAULT_STYLE) {
 				content.style[key] = {
 					sheetDefault: this.getters.getDefaultStyle(data.sheetId, key, "SHEET", void 0) ?? DEFAULT_STYLE[key],
-					colDefault: {},
-					rowDefault: {}
+					colDefault: [],
+					rowDefault: []
 				};
 				let colIndex = 0;
 				for (const col of data.columnsIndexes) {
@@ -77007,20 +77184,41 @@ set(value) {
 			}
 			return content;
 		}
-		clearStyleFormat(sheetId, zone) {
-			this.dispatch("SET_FORMATTING", {
-				sheetId,
-				target: [zone],
-				format: ""
-			});
+		adaptContentToZone(zone, content) {
+			const colRepetition = Math.max(Math.floor((zone.right - zone.left + 1) / content.width), 1);
+			const rowRepetition = Math.max(Math.floor((zone.bottom - zone.top + 1) / content.height), 1);
+			if (colRepetition === 1 && rowRepetition === 1) return content;
+			const newContent = deepCopy(content);
+			newContent.height *= rowRepetition;
+			newContent.width *= colRepetition;
+			if (rowRepetition > 1 && newContent.format.rowDefault) {
+				newContent.format.rowDefault.length = content.height;
+				newContent.format.rowDefault = repeat(newContent.format.rowDefault, rowRepetition);
+			}
+			if (colRepetition > 1 && newContent.format.colDefault) {
+				newContent.format.colDefault.length = content.width;
+				newContent.format.colDefault = repeat(newContent.format.colDefault, colRepetition);
+			}
+			for (const key in content.style) {
+				if (rowRepetition > 1 && newContent.style[key].rowDefault) {
+					newContent.style[key].rowDefault.length = content.height;
+					newContent.style[key].rowDefault = repeat(newContent.style[key].rowDefault, rowRepetition);
+				}
+				if (colRepetition > 1 && newContent.style[key].colDefault) {
+					newContent.style[key].colDefault.length = content.width;
+					newContent.style[key].colDefault = repeat(newContent.style[key].colDefault, colRepetition);
+				}
+			}
+			return newContent;
 		}
 		paste(target, content, options) {
 			const sheetId = target.sheetId;
 			if (options.pasteOption === "asValue") return;
 			const zones = target.zones;
-			if (!options.isCutOperation) for (const zone of zones) for (const pasteZone of splitZoneForPaste(zone, content.width, content.height)) {
-				this.pasteStyle(sheetId, pasteZone.left, pasteZone.top, content.width, content.height, content.style);
-				this.pasteFormat(sheetId, pasteZone.left, pasteZone.top, content.width, content.height, content.format);
+			if (!options.isCutOperation) for (const zone of zones) {
+				const newContent = this.adaptContentToZone(zone, content);
+				this.pasteStyle(sheetId, zone.left, zone.top, newContent.width, newContent.height, newContent.style);
+				this.pasteFormat(sheetId, zone.left, zone.top, newContent.width, newContent.height, newContent.format);
 			}
 			else {
 				this.clearClippedZones(content);
@@ -77133,7 +77331,7 @@ set(value) {
 			const commands = [];
 			for (const [zoneStr, [zone, priority]] of Object.entries(zones)) {
 				const format = updateCells[zoneStr];
-				commands.push([
+				if (format !== void 0) commands.push([
 					priority,
 					zone,
 					format
@@ -87335,7 +87533,9 @@ set(value) {
 		collapseHierarchicalDisplayName,
 		getCanonicalSymbolName,
 		fuzzyLookup,
-		replaceSymbolInFormula
+		replaceSymbolInFormula,
+		isSingleCellReference,
+		computeCachedTextDimension
 	};
 	const links = {
 		isMarkdownLink,
@@ -87405,7 +87605,8 @@ set(value) {
 		FullScreenFigure,
 		NumberInput,
 		TopBar,
-		Composer
+		Composer,
+		CalendarButton
 	};
 	const hooks = {
 		useDragAndDropListItems,
@@ -87559,8 +87760,8 @@ exports.stores = stores;
 exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
-__info__.version = "19.5.0-alpha.1";
-__info__.date = "2026-07-01T05:05:42.239Z";
-__info__.hash = "3c78107";
+__info__.version = "19.5.0-alpha.3";
+__info__.date = "2026-07-14T10:17:06.949Z";
+__info__.hash = "c029184";
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);