@odoo/o-spreadsheet 19.4.0-alpha.11 → 19.4.0-alpha.13

package/dist/o_spreadsheet.cjs

@@ -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.4.0-alpha.11
- * @date 2026-06-03T11:42:34.595Z
- * @hash 6f35bc7
+ * @version 19.4.0-alpha.13
+ * @date 2026-06-06T09:34:53.140Z
+ * @hash af3c199
  */
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -4323,6 +4323,7 @@ const DEFAULT_LOCALE_DIGIT_GROUPING = "[3,0]";
 //#endregion
 //#region src/helpers/format/format_tokenizer.ts
 function tokenizeFormat(str) {
+	str = str.replace(/\s/g, " ");
 	const chars = new TokenizingChars(str);
 	const result = [];
 	let currentFormatPart = [];
@@ -10557,7 +10558,7 @@ function getFunnelChartScales(definition, args) {
 	};
 }
 function getGeoChartProjection(projection) {
-	if (projection === "conicConformal") return globalThis.ChartGeo.geoConicConformal().rotate([100, 0]);
+	if (globalThis.ChartGeo && projection === "conicConformal") return globalThis.ChartGeo.geoConicConformal().rotate([100, 0]);
 	return projection;
 }
 function getChartAxisTitleRuntime(design) {
@@ -10570,7 +10571,7 @@ function getChartAxisTitleRuntime(design) {
 			font: {
 				style: italic ? "italic" : "normal",
 				weight: bold ? "bold" : "normal",
-				size: design.title.fontSize ?? 12
+				size: fontSizeInPixels(design.title.fontSize ?? 12)
 			},
 			align: align === "left" ? "start" : align === "right" ? "end" : "center"
 		};
@@ -11192,7 +11193,7 @@ function getTextStyle(design, defaultDesign) {
 		font: {
 			weight: design?.bold ?? defaultDesign?.bold ? "bold" : "normal",
 			style: design?.italic ?? defaultDesign?.italic ? "italic" : "normal",
-			size: design?.fontSize ?? defaultDesign?.fontSize
+			size: fontSizeInPixels(design?.fontSize ?? defaultDesign.fontSize)
 		}
 	};
 }
@@ -12128,35 +12129,35 @@ var ScorecardChartConfigBuilder = class {
 		if (this.runtime.progressBar) baselineValueFontSize /= 1.5;
 		return {
 			title: {
-				font: getDefaultContextFont(this.runtime.title.fontSize ?? 14, this.runtime.title.bold, this.runtime.title.italic),
+				font: getDefaultContextFont(fontSizeInPixels(this.runtime.title.fontSize ?? 14), this.runtime.title.bold, this.runtime.title.italic),
 				color: this.runtime.title.color ?? this.secondaryFontColor
 			},
 			keyValue: {
 				color: this.runtime.keyValueStyle?.textColor || this.runtime.fontColor,
-				font: getDefaultContextFont(keyValueFontSize, this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
+				font: getDefaultContextFont(fontSizeInPixels(keyValueFontSize), this.runtime.keyValueStyle?.bold, this.runtime.keyValueStyle?.italic),
 				strikethrough: this.runtime.keyValueStyle?.strikethrough,
 				underline: this.runtime.keyValueStyle?.underline
 			},
 			keyDescr: {
 				color: this.runtime.keyValueDescrStyle?.textColor || this.runtime.fontColor,
-				font: getDefaultContextFont(keyValueDescrFontSize, this.runtime.keyValueDescrStyle?.bold, this.runtime.keyValueDescrStyle?.italic),
+				font: getDefaultContextFont(fontSizeInPixels(keyValueDescrFontSize), this.runtime.keyValueDescrStyle?.bold, this.runtime.keyValueDescrStyle?.italic),
 				strikethrough: this.runtime.keyValueDescrStyle?.strikethrough,
 				underline: this.runtime.keyValueDescrStyle?.underline
 			},
 			baselineValue: {
-				font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+				font: getDefaultContextFont(fontSizeInPixels(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
 			},
 			baselineDescr: {
-				font: getDefaultContextFont(baselineDescrFontSize, this.runtime.baselineDescrStyle?.bold, this.runtime.baselineDescrStyle?.italic),
+				font: getDefaultContextFont(fontSizeInPixels(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
 			},
 			baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar ? void 0 : {
-				size: this.keyValue ? .8 * baselineValueFontSize : 0,
+				size: this.keyValue ? .8 * fontSizeInPixels(baselineValueFontSize) : 0,
 				color: this.runtime.baselineColor || this.runtime.baselineStyle?.textColor || this.secondaryFontColor
 			}
 		};
@@ -12366,7 +12367,7 @@ function drawInflectionValues(ctx, config) {
 function drawTitle(ctx, config) {
 	ctx.save();
 	const title = config.title;
-	ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
+	ctx.font = getDefaultContextFont(fontSizeInPixels(title.fontSize), title.bold, title.italic);
 	ctx.textBaseline = "middle";
 	ctx.fillStyle = title.color;
 	ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
@@ -12400,8 +12401,8 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
 	const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
 	let x = 0, titleWidth = 0, titleHeight = 0;
 	if (runtime.title.text) ({width: titleWidth, height: titleHeight} = computeTextDimension(ctx, runtime.title.text, {
-		fontSize: 16,
-		...runtime.title
+		...runtime.title,
+		fontSize: fontSizeInPixels(runtime.title.fontSize ?? 16)
 	}, "px"));
 	switch (runtime.title.align) {
 		case "right":
@@ -13924,10 +13925,10 @@ var GaugeChartComponent = class extends Component {
 		let animation = null;
 		let lastRuntime = void 0;
 		useLayoutEffect(() => {
-			if (this.env.isDashboard() && lastRuntime === void 0 && this.animationStore?.animationPlayed[this.animationChartId] !== "gauge") {
+			if (this.env.model.getters.isDashboard() && lastRuntime === void 0 && this.animationStore?.animationPlayed[this.animationChartId] !== "gauge") {
 				animation = this.drawGaugeWithAnimation();
 				this.animationStore?.disableAnimationForChart(this.animationChartId, "gauge");
-			} else if (this.env.isDashboard() && lastRuntime !== void 0 && !deepEquals(this.runtime, lastRuntime)) {
+			} else if (this.env.model.getters.isDashboard() && lastRuntime !== void 0 && !deepEquals(this.runtime, lastRuntime)) {
 				animation = this.drawGaugeWithAnimation();
 				this.animationStore?.disableAnimationForChart(this.animationChartId, "gauge");
 			} else {
@@ -15218,10 +15219,12 @@ var CarouselFigure = class extends Component {
 		return this.carousel.title?.text ?? "";
 	}
 	get titleStyle() {
-		return cssPropertiesToCss(cellTextStyleToCss(chartStyleToCellStyle({
+		const style = {
 			...DEFAULT_CAROUSEL_TITLE_STYLE,
 			...this.carousel.title
-		})));
+		};
+		style.fontSize = fontSizeInPixels(style.fontSize ?? 16);
+		return cssPropertiesToCss(cellTextStyleToCss(chartStyleToCellStyle(style)));
 	}
 	updateTabsVisibility() {
 		const tabsContainerEl = this.carouselTabsRef();
@@ -15384,7 +15387,7 @@ var FigureComponent = class extends Component {
 		return figureRegistry;
 	}
 	getBorderWidth() {
-		if (this.env.isDashboard()) return 0;
+		if (this.env.model.getters.isDashboard()) return 0;
 		return this.isSelected ? ACTIVE_BORDER_WIDTH : this.borderWidth;
 	}
 	getBorderStyle(position) {
@@ -15526,7 +15529,7 @@ var FigureComponent = class extends Component {
 		};
 	}
 	onContextMenu(ev) {
-		if (this.env.isDashboard()) return;
+		if (this.env.model.getters.isDashboard()) return;
 		const zoomedMouseEvent = withZoom(this.env, ev);
 		this.openContextMenu({
 			x: zoomedMouseEvent.clientX,
@@ -15552,7 +15555,7 @@ var FigureComponent = class extends Component {
 		if (el) for (const property in properties) el.style.setProperty(property, properties[property] || null);
 	}
 	get isFigureResizable() {
-		return this.isSelected && !this.env.isMobile() && !this.env.isDashboard() && !this.env.model.getters.isCurrentSheetLocked();
+		return this.isSelected && !this.env.isMobile() && !this.env.model.getters.isDashboard() && !this.env.model.getters.isCurrentSheetLocked();
 	}
 };
 
@@ -24802,6 +24805,18 @@ var ColorPicker = class extends Component {
 	isSameColor(color1, color2) {
 		return isSameColor(color1, color2);
 	}
+	get canUseEyeDropper() {
+		return !!globalThis.EyeDropper && !this.env.model.getters.isDarkMode();
+	}
+	async activateEyedropper() {
+		if (!globalThis.EyeDropper) return;
+		try {
+			const result = await new globalThis.EyeDropper().open();
+			if (result && result.sRGBHex) this.props.onColorPicked(toHex(result.sRGBHex));
+		} catch (error) {
+			if (error.name !== "AbortError") throw error;
+		}
+	}
 };
 
 //#endregion
@@ -28481,7 +28496,7 @@ function getSunburstShowValues(definition, args) {
 		showLabels: definition.showLabels ?? SunburstChartDefaults.showLabels,
 		showValues: definition.showValues ?? SunburstChartDefaults.showValues,
 		style: {
-			fontSize: definition.valuesDesign?.fontSize ?? SunburstChartDefaults.valuesDesign.fontSize,
+			fontSize: fontSizeInPixels(definition.valuesDesign?.fontSize ?? SunburstChartDefaults.valuesDesign.fontSize),
 			align: definition.valuesDesign?.align ?? SunburstChartDefaults.valuesDesign.align,
 			bold: definition.valuesDesign?.bold ?? SunburstChartDefaults.valuesDesign.bold,
 			italic: definition.valuesDesign?.italic ?? SunburstChartDefaults.valuesDesign.italic,
@@ -28536,7 +28551,7 @@ function getChartTitle({ title, legendPosition, background }, getters) {
 		color: title?.color ?? fontColor,
 		align: title.align === "center" ? "center" : title.align === "right" ? "end" : "start",
 		font: {
-			size: title.fontSize ?? 16,
+			size: fontSizeInPixels(title.fontSize ?? 16),
 			weight: title.bold ? "bold" : "normal",
 			style: title.italic ? "italic" : "normal"
 		},
@@ -38785,7 +38800,8 @@ var PivotDimensionOrder = class extends Component {
 	static template = "o-spreadsheet-PivotDimensionOrder";
 	props = (0, _odoo_owl.props)({
 		dimension: types$6.PivotDimension(),
-		onUpdated: types$6.function([types$6.PivotDimension(), types$6.instanceOf(InputEvent)])
+		onUpdated: types$6.function([types$6.PivotDimension(), types$6.instanceOf(InputEvent)]),
+		"isMeasureSorted?": types$6.boolean()
 	});
 	static components = { Select };
 	get orderSelectOptions() {
@@ -38796,12 +38812,20 @@ var PivotDimensionOrder = class extends Component {
 			value: "desc",
 			label: _t("Descending")
 		}];
+		if (this.props.isMeasureSorted) options.unshift({
+			value: "measures",
+			label: _t("Sorted by measure")
+		});
 		if (this.props.dimension.type === "date") return options;
 		return [{
 			value: "",
 			label: _t("Unsorted")
 		}, ...options];
 	}
+	get selectedValue() {
+		if (this.props.isMeasureSorted) return "measures";
+		return this.props.dimension.order || "";
+	}
 };
 
 //#endregion
@@ -39172,7 +39196,8 @@ var PivotLayoutConfigurator = class extends Component {
 		return this.env.model.getters.getPivotCoreDefinition(this.props.pivotId).customFields?.[dimension.nameWithGranularity];
 	}
 	updateOrder(updateDimension, order) {
-		const { rows, columns } = this.props.definition;
+		const { rows, columns, sortedColumn } = this.props.definition;
+		const isRow = rows.some((row) => row.nameWithGranularity === updateDimension.nameWithGranularity);
 		this.props.onDimensionsUpdated({
 			rows: rows.map((row) => {
 				if (row.nameWithGranularity === updateDimension.nameWithGranularity) return {
@@ -39187,7 +39212,8 @@ var PivotLayoutConfigurator = class extends Component {
 					order: order || void 0
 				};
 				return col;
-			})
+			}),
+			sortedColumn: isRow ? void 0 : sortedColumn
 		});
 	}
 	updateGranularity(dimension, granularity) {
@@ -39213,6 +39239,9 @@ var PivotLayoutConfigurator = class extends Component {
 		const possibleValues = this.env.model.getters.getPivot(this.props.pivotId).getPossibleFieldValues(dimension);
 		return possibleValues.length > 100 ? _t("This dimension contains a lot of values (%s), and might slow down the pivot table.", possibleValues.length) : void 0;
 	}
+	get hasSortedColumn() {
+		return !!this.props.definition.sortedColumn;
+	}
 };
 
 //#endregion
@@ -59011,9 +59040,11 @@ var PivotUIPlugin = class extends CoreViewPlugin {
 				this.refreshPivot(cmd.id);
 				break;
 			case "ADD_PIVOT":
+				this.unusedPivotsInFormulas?.push(cmd.pivotId);
 				this.setupPivot(cmd.pivotId);
 				break;
 			case "DUPLICATE_PIVOT":
+				this.unusedPivotsInFormulas?.push(cmd.newPivotId);
 				this.setupPivot(cmd.newPivotId);
 				break;
 			case "UPDATE_PIVOT":
@@ -59205,8 +59236,8 @@ var PivotUIPlugin = class extends CoreViewPlugin {
 			}
 		}
 		for (const pivotId of this.getters.getPivotIds()) {
-			const pivot = this.getters.getPivot(pivotId);
-			for (const measure of pivot.definition.measures) if (measure.computedBy) {
+			const pivot = this.getters.getPivotCoreDefinition(pivotId);
+			for (const measure of pivot.measures) if (measure.computedBy) {
 				const { sheetId } = measure.computedBy;
 				const formula = this.getters.getMeasureCompiledFormula(pivotId, measure);
 				const relatedPivotIds = this.getPivotIdsFromFormula(sheetId, formula);
@@ -62548,6 +62579,7 @@ var GeoFeaturePlugin = class extends UIPlugin {
 	convertToGeoJson(json) {
 		if (!json) return null;
 		if (json.type === "Topology") {
+			if (!globalThis.ChartGeo) return null;
 			const features = globalThis.ChartGeo.topojson.feature(json, Object.values(json.objects)[0]);
 			return features.type === "FeatureCollection" ? features.features : [features];
 		} else if (json.type === "FeatureCollection") return json.features;
@@ -70968,7 +71000,7 @@ var Spreadsheet = class extends Component {
 		properties["color-scheme"] = this.props.model.getters.isDarkMode() ? "dark" : "light";
 		if (this.state.printModeEnabled) properties["display"] = `block`;
 		else {
-			if (this.env.isDashboard()) properties["grid-template-rows"] = `auto`;
+			if (this.env.model.getters.isDashboard()) properties["grid-template-rows"] = `auto`;
 			else properties["grid-template-rows"] = `min-content auto min-content`;
 			properties["grid-template-columns"] = `auto ${this.sidePanel.mainPanel ? `${this.sidePanel.totalPanelSize || 350}px` : "auto"}`;
 		}
@@ -70996,7 +71028,6 @@ var Spreadsheet = class extends Component {
 			imageProvider: fileStore ? new ImageProvider(fileStore) : void 0,
 			loadCurrencies: this.model.config.external.loadCurrencies,
 			loadLocales: this.model.config.external.loadLocales,
-			isDashboard: () => this.model.getters.isDashboard(),
 			openSidePanel: this.sidePanel.open.bind(this.sidePanel),
 			replaceSidePanel: this.sidePanel.replace.bind(this.sidePanel),
 			toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
@@ -86245,7 +86276,8 @@ const registries = {
 	pivotToFunctionValueRegistry,
 	migrationStepRegistry,
 	chartJsExtensionRegistry,
-	onIterationEndEvaluationRegistry
+	onIterationEndEvaluationRegistry,
+	specificRangeTransformRegistry
 };
 const helpers = {
 	arg,
@@ -86545,6 +86577,6 @@ exports.stores = stores;
 exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
-__info__.version = "19.4.0-alpha.11";
-__info__.date = "2026-06-03T11:42:34.595Z";
-__info__.hash = "6f35bc7";
+__info__.version = "19.4.0-alpha.13";
+__info__.date = "2026-06-06T09:34:53.140Z";
+__info__.hash = "af3c199";

package/dist/o_spreadsheet.css

@@ -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.4.0-alpha.11
- * @date 2026-06-03T11:42:36.487Z
- * @hash 6f35bc7
+ * @version 19.4.0-alpha.13
+ * @date 2026-06-06T09:34:54.989Z
+ * @hash af3c199
  */
 :root {
   --os-gray-100: light-dark(#f9fafb, #1b1d26);
@@ -2251,6 +2251,7 @@
 /* Originates from src/components/headers_overlay/headers_overlay.css */
 .o-spreadsheet {
   .o-col-resizer {
+    z-index: calc(var(--os-components-importance-grid) + 1);
     position: absolute;
     top: 0;
     left: var(--os-header-width);
@@ -2293,12 +2294,12 @@
       background-color: var(--os-selection-border-color);
     }
     .o-unhide:hover {
-      z-index: calc(var(--os-components-importance-grid) + 1);
       background-color: var(--os-gray-400);
     }
   }
 
   .o-row-resizer {
+    z-index: calc(var(--os-components-importance-grid) + 1);
     position: absolute;
     top: var(--os-header-height);
     left: 0;
@@ -2340,7 +2341,6 @@
       background-color: var(--os-selection-border-color);
     }
     .o-unhide:hover {
-      z-index: calc(var(--os-components-importance-grid) + 1);
       background-color: var(--os-gray-400);
     }
   }
@@ -3173,9 +3173,12 @@
         }
       }
     }
+
+    --color-picker-item-size: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
+
     .o-color-picker-line-item {
-      width: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
-      height: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
+      width: var(--color-picker-item-size);
+      height: var(--color-picker-item-size);
       margin: 0px;
       border-radius: 50px;
       border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), #c0c0c0);
@@ -3187,6 +3190,18 @@
         cursor: pointer;
       }
     }
+    .eyedropper {
+      width: var(--color-picker-item-size);
+      height: var(--color-picker-item-size);
+      &:hover {
+        background-color: var(--os-hovered-menu-item-color);
+        color: var(--os-button-active-text-color);
+        cursor: pointer;
+      }
+      .fa {
+        font-size: 13px;
+      }
+    }
     .o-buttons {
       padding: var(--os-picker-padding);
       display: flex;