@odoo/o-spreadsheet 19.5.0-alpha.0 → 19.5.0-alpha.2

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.0
- * @date 2026-06-29T09:01:26.331Z
- * @hash 2437c0b
+ * @version 19.5.0-alpha.2
+ * @date 2026-07-13T06:26:20.354Z
+ * @hash a4d2f90
  */
 
 (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 = {
@@ -2601,7 +2602,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 +2732,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 +8408,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;
@@ -9499,142 +8972,675 @@ set(value) {
 	function getNthColor(index, palette) {
 		return palette[index % palette.length];
 	}
-	function getColorsPalette(quantity) {
-		if (quantity <= 6) return COLORS_SM;
-		else if (quantity <= 12) return COLORS_MD;
-		else if (quantity <= 24) return COLORS_LG;
-		else return COLORS_XL;
+	function getColorsPalette(quantity) {
+		if (quantity <= 6) return COLORS_SM;
+		else if (quantity <= 12) return COLORS_MD;
+		else if (quantity <= 24) return COLORS_LG;
+		else return COLORS_XL;
+	}
+	function getAlternatingColorsPalette(quantity) {
+		if (quantity <= 6) return COLORS_SM;
+		else if (quantity <= 12) return ALTERNATING_COLORS_MD;
+		else if (quantity <= 24) return ALTERNATING_COLORS_LG;
+		else return ALTERNATING_COLORS_XL;
+	}
+	var ColorGenerator = class {
+		preferredColors;
+		currentColorIndex = 0;
+		palette;
+		constructor(paletteSize, preferredColors = []) {
+			this.preferredColors = preferredColors;
+			this.palette = getColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
+		}
+		next() {
+			return this.preferredColors?.[this.currentColorIndex] ? this.preferredColors[this.currentColorIndex++] : getNthColor(this.currentColorIndex++, this.palette);
+		}
+	};
+	var AlternatingColorGenerator = class extends ColorGenerator {
+		constructor(paletteSize, preferredColors = []) {
+			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);
+		}
+		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() : "";
 	}
-	function getAlternatingColorsPalette(quantity) {
-		if (quantity <= 6) return COLORS_SM;
-		else if (quantity <= 12) return ALTERNATING_COLORS_MD;
-		else if (quantity <= 24) return ALTERNATING_COLORS_LG;
-		else return ALTERNATING_COLORS_XL;
+	/**
+	* 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]);
 	}
-	var ColorGenerator = class {
-		preferredColors;
-		currentColorIndex = 0;
-		palette;
-		constructor(paletteSize, preferredColors = []) {
-			this.preferredColors = preferredColors;
-			this.palette = getColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
+	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);
 		}
-		next() {
-			return this.preferredColors?.[this.currentColorIndex] ? this.preferredColors[this.currentColorIndex++] : getNthColor(this.currentColorIndex++, this.palette);
+		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);
 		}
-	};
-	var AlternatingColorGenerator = class extends ColorGenerator {
-		constructor(paletteSize, preferredColors = []) {
-			super(paletteSize, preferredColors);
-			this.palette = getAlternatingColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
+		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;
 		}
-	};
-	var AlternatingColorMap = class {
-		availableColors;
-		colors = {};
-		constructor(paletteSize = 12) {
-			this.availableColors = new AlternatingColorGenerator(paletteSize);
+		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;
 		}
-		get(id) {
-			if (!this.colors[id]) this.colors[id] = this.availableColors.next();
-			return this.colors[id];
+		if (underline) {
+			context.lineWidth = strokeWidth;
+			context.strokeStyle = context.fillStyle;
+			context.beginPath();
+			context.moveTo(x, underlineY);
+			context.lineTo(x + textWidth, underlineY);
+			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 (strikethrough) {
+			context.lineWidth = strokeWidth;
+			context.strokeStyle = context.fillStyle;
+			context.beginPath();
+			context.moveTo(x, strikeY);
+			context.lineTo(x + textWidth, strikeY);
+			context.stroke();
+		}
+		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
@@ -12074,11 +12080,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 +12102,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 +12337,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 +12460,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);
 		}
 	};
 
@@ -21793,10 +21807,10 @@ set(value) {
 			type: dimension.type
 		}));
 		if (groupValueString.toLowerCase() === "false") return false;
-		return pivotNormalizationValueRegistry.get(dimension.type)(groupValueString, dimension.granularity);
+		return pivotNormalizationValueRegistry.get(dimension.type)(groupValueString, dimension);
 	}
-	function normalizeDateTime(value, granularity) {
-		return pivotTimeAdapter(granularity ?? "month").normalizeFunctionValue(value);
+	function normalizeDateTime(value, dimension) {
+		return pivotTimeAdapter(dimension.granularity ?? "month").normalizeFunctionValue(value);
 	}
 	function toFunctionPivotValue(value, dimension) {
 		if (value === null) return `"null"`;
@@ -28057,7 +28071,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;
@@ -34538,6 +34552,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 +35269,8 @@ set(value) {
 		static template = "o-spreadsheet-DataValidationDateCriterion";
 		static components = {
 			CriterionInput,
-			Select
+			Select,
+			CalendarButton
 		};
 		get currentDateValue() {
 			return this.props.criterion.dateValue || "exactDate";
@@ -35252,7 +35296,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 +35308,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 +46657,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 +46673,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 +46811,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 +46836,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 +46846,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 +46920,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 +46930,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 +46978,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;
@@ -58721,13 +58776,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 +66241,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 +66257,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 +66404,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 +66687,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 +70763,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)}`;
@@ -87335,7 +87409,9 @@ set(value) {
 		collapseHierarchicalDisplayName,
 		getCanonicalSymbolName,
 		fuzzyLookup,
-		replaceSymbolInFormula
+		replaceSymbolInFormula,
+		isSingleCellReference,
+		computeCachedTextDimension
 	};
 	const links = {
 		isMarkdownLink,
@@ -87405,7 +87481,8 @@ set(value) {
 		FullScreenFigure,
 		NumberInput,
 		TopBar,
-		Composer
+		Composer,
+		CalendarButton
 	};
 	const hooks = {
 		useDragAndDropListItems,
@@ -87559,8 +87636,8 @@ exports.stores = stores;
 exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
-__info__.version = "19.5.0-alpha.0";
-__info__.date = "2026-06-29T09:01:26.331Z";
-__info__.hash = "2437c0b";
+__info__.version = "19.5.0-alpha.2";
+__info__.date = "2026-07-13T06:26:20.354Z";
+__info__.hash = "a4d2f90";
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);