@odoo/o-spreadsheet 19.1.0-alpha.8 → 19.1.0-alpha.9

package/dist/o_spreadsheet.esm.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.1.0-alpha.8
- * @date 2025-10-23T08:20:05.310Z
- * @hash 78717d4
+ * @version 19.1.0-alpha.9
+ * @date 2025-10-23T11:12:55.400Z
+ * @hash bd756dd
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -487,8 +487,17 @@ function isObjectEmptyRecursive(argument) {
 /**
  * Returns a function, that, as long as it continues to be invoked, will not
  * be triggered. The function will be called after it stops being called for
- * N milliseconds. If `immediate` is passed, trigger the function on the
- * leading edge, instead of the trailing.
+ * N milliseconds. If `immediate` is passed,  the function is called is called
+ * immediately on the first call and the debouncing is triggered starting the second
+ * call in the defined time window.
+ *
+ * Example:
+ * debouncedFunction = debounce(() => console.log('Hello!'), 250);
+ * debouncedFunction(); debouncedFunction(); // Will log 'Hello!' after 250ms
+ *
+ * debouncedFunction = debounce(() => console.log('Hello!'), 250, true);
+ * debouncedFunction(); debouncedFunction(); // Will log 'Hello!' and relog it after 250ms
+ *
  *
  * Also decorate the argument function with two methods: stopDebounce and isDebouncePending.
  *
@@ -496,21 +505,21 @@ function isObjectEmptyRecursive(argument) {
  */
 function debounce(func, wait, immediate) {
     let timeout = undefined;
+    let firstCalled = false;
     const debounced = function () {
         const context = this;
         const args = Array.from(arguments);
+        if (!firstCalled && immediate) {
+            firstCalled = true;
+            return func.apply(context, args);
+        }
         function later() {
             timeout = undefined;
-            if (!immediate) {
-                func.apply(context, args);
-            }
+            firstCalled = false;
+            func.apply(context, args);
         }
-        const callNow = immediate && !timeout;
         clearTimeout(timeout);
         timeout = setTimeout(later, wait);
-        if (callNow) {
-            func.apply(context, args);
-        }
     };
     debounced.isDebouncePending = () => timeout !== undefined;
     debounced.stopDebounce = () => {
@@ -73124,39 +73133,38 @@ function useAutofocus({ refName }) {
     }, () => [ref.el]);
 }
 
-class TextInput extends Component {
-    static template = "o-spreadsheet-TextInput";
+class GenericInput extends Component {
     static props = {
-        value: String,
+        value: [Number, String],
         onChange: Function,
-        class: {
-            type: String,
-            optional: true,
-        },
-        id: {
-            type: String,
-            optional: true,
-        },
-        placeholder: {
-            type: String,
-            optional: true,
-        },
-        autofocus: {
-            type: Boolean,
-            optional: true,
-        },
+        class: { type: String, optional: true },
+        id: { type: String, optional: true },
+        placeholder: { type: String, optional: true },
+        autofocus: { type: Boolean, optional: true },
         alwaysShowBorder: { type: Boolean, optional: true },
+        selectContentOnFocus: { type: Boolean, optional: true },
     };
-    inputRef = useRef("input");
+    refName = "input";
+    inputRef;
     setup() {
+        this.inputRef = useRef(this.refName);
         useExternalListener(window, "click", (ev) => {
             if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
                 this.save();
             }
         }, { capture: true });
         if (this.props.autofocus) {
-            useAutofocus({ refName: "input" });
+            useAutofocus({ refName: this.refName });
         }
+        onWillUpdateProps((nextProps) => {
+            if (document.activeElement !== this.inputRef.el && this.inputRef.el) {
+                this.inputRef.el.value = nextProps.value;
+            }
+        });
+        onMounted(() => {
+            if (this.inputRef.el)
+                this.inputRef.el.value = this.props.value.toString();
+        });
     }
     onKeyDown(ev) {
         switch (ev.key) {
@@ -73167,7 +73175,7 @@ class TextInput extends Component {
                 break;
             case "Escape":
                 if (this.inputRef.el) {
-                    this.inputRef.el.value = this.props.value;
+                    this.inputRef.el.value = this.props.value.toString();
                     this.inputRef.el.blur();
                 }
                 ev.preventDefault();
@@ -73175,12 +73183,14 @@ class TextInput extends Component {
                 break;
         }
     }
-    save() {
+    save(keepFocus = false) {
         const currentValue = (this.inputRef.el?.value || "").trim();
-        if (currentValue !== this.props.value) {
+        if (currentValue !== this.props.value.toString()) {
             this.props.onChange(currentValue);
         }
-        this.inputRef.el?.blur();
+        if (!keepFocus) {
+            this.inputRef.el?.blur();
+        }
     }
     onMouseDown(ev) {
         // Stop the event if the input is not focused, we handle everything in onMouseUp
@@ -73193,13 +73203,25 @@ class TextInput extends Component {
         const target = ev.target;
         if (target !== document.activeElement) {
             target.focus();
-            target.select();
+            if (this.props.selectContentOnFocus) {
+                target.select();
+            }
             ev.preventDefault();
             ev.stopPropagation();
         }
     }
+}
+
+class TextInput extends GenericInput {
+    static template = "o-spreadsheet-TextInput";
+    static components = {};
+    static props = GenericInput.props;
     get inputClass() {
-        return [this.props.class, this.props.alwaysShowBorder ? "o-input-border" : undefined]
+        return [
+            this.props.class,
+            "w-100 os-input",
+            this.props.alwaysShowBorder ? "o-input-border" : undefined,
+        ]
             .filter(isDefined$1)
             .join(" ");
     }
@@ -73309,6 +73331,16 @@ class FontSizeEditor extends Component {
     fontSizeListRef = useRef("fontSizeList");
     setup() {
         useExternalListener(window, "click", this.onExternalClick, { capture: true });
+        onWillUpdateProps((nextProps) => {
+            if (this.inputRef.el && document.activeElement !== this.inputRef.el) {
+                this.inputRef.el.value = nextProps.currentFontSize;
+            }
+        });
+        onMounted(() => {
+            if (this.inputRef.el) {
+                this.inputRef.el.value = this.props.currentFontSize.toString();
+            }
+        });
     }
     get popoverProps() {
         const { x, y, width, height } = this.rootEditorRef.el.getBoundingClientRect();
@@ -74202,7 +74234,7 @@ class BadgeSelection extends Component {
 
 class ChartTitle extends Component {
     static template = "o-spreadsheet.ChartTitle";
-    static components = { Section, TextStyler };
+    static components = { Section, TextStyler, TextInput };
     static props = {
         title: { type: String, optional: true },
         placeholder: { type: String, optional: true },
@@ -74216,8 +74248,8 @@ class ChartTitle extends Component {
         title: "",
         placeholder: "",
     };
-    updateTitle(ev) {
-        this.props.updateTitle(ev.target.value);
+    updateTitle(value) {
+        this.props.updateTitle(value);
     }
 }
 
@@ -74361,6 +74393,27 @@ class ChartLegend extends Component {
     }
 }
 
+class NumberInput extends GenericInput {
+    static template = "o-spreadsheet-NumberInput";
+    static components = {};
+    static props = {
+        ...GenericInput.props,
+        min: { type: Number, optional: true },
+        max: { type: Number, optional: true },
+    };
+    // Very short debounce to prevent up/down arrow on number input to spam the onChange
+    debouncedOnChange = debounce(this.props.onChange.bind(this), 100, true);
+    save() {
+        const currentValue = (this.inputRef.el?.value || "").trim();
+        if (currentValue !== this.props.value.toString()) {
+            this.debouncedOnChange(currentValue);
+        }
+    }
+    get inputClass() {
+        return [this.props.class, "o-input"].join(" ");
+    }
+}
+
 class SeriesDesignEditor extends Component {
     static template = "o-spreadsheet-SeriesDesignEditor";
     static components = {
@@ -74432,6 +74485,7 @@ class SeriesWithAxisDesignEditor extends Component {
         RadioSelection,
         Section,
         RoundColorPicker,
+        NumberInput,
     };
     static props = {
         chartId: String,
@@ -74523,9 +74577,8 @@ class SeriesWithAxisDesignEditor extends Component {
     get defaultWindowSize() {
         return DEFAULT_WINDOW_SIZE;
     }
-    onChangeMovingAverageWindow(index, ev) {
-        const element = ev.target;
-        let window = parseInt(element.value) || DEFAULT_WINDOW_SIZE;
+    onChangeMovingAverageWindow(index, value) {
+        let window = parseInt(value) || DEFAULT_WINDOW_SIZE;
         if (window <= 1) {
             window = DEFAULT_WINDOW_SIZE;
         }
@@ -75054,10 +75107,8 @@ class LineChartDesignPanel extends GenericZoomableChartDesignPanel {
 
 class PieHoleSize extends Component {
     static template = "o-spreadsheet.PieHoleSize";
-    static components = { Section };
+    static components = { Section, NumberInput };
     static props = { onValueChange: Function, value: Number };
-    // Very short debounce to prevent up/down arrow on number input to spam the onChange
-    debouncedOnChange = debounce(this.onChange.bind(this), 100);
     onChange(value) {
         if (!isNaN(Number(value))) {
             this.props.onValueChange(clip(Number(value), 0, 95));
@@ -79261,7 +79312,14 @@ class TableStylePicker extends Component {
 
 class TablePanel extends Component {
     static template = "o-spreadsheet-TablePanel";
-    static components = { TableStylePicker, SelectionInput, ValidationMessages, Checkbox, Section };
+    static components = {
+        TableStylePicker,
+        SelectionInput,
+        ValidationMessages,
+        Checkbox,
+        Section,
+        NumberInput,
+    };
     static props = { onCloseSidePanel: Function, table: Object };
     state;
     setup() {
@@ -79311,13 +79369,9 @@ class TablePanel extends Component {
             this.state.tableZoneErrors = [];
         }
     }
-    onChangeNumberOfHeaders(ev) {
-        const input = ev.target;
-        const numberOfHeaders = parseInt(input.value);
-        const result = this.updateNumberOfHeaders(numberOfHeaders);
-        if (!result.isSuccessful) {
-            input.value = this.props.table.config.numberOfHeaders.toString();
-        }
+    onChangeNumberOfHeaders(value) {
+        const numberOfHeaders = parseInt(value);
+        this.updateNumberOfHeaders(numberOfHeaders);
     }
     updateNumberOfHeaders(numberOfHeaders) {
         const hasFilters = numberOfHeaders > 0 && (this.tableConfig.hasFilters || this.state.filtersEnabledIfPossible);
@@ -87802,6 +87856,7 @@ const components = {
     GeoChartRegionSelectSection,
     ChartDashboardMenu,
     FullScreenFigure,
+    NumberInput,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -87851,6 +87906,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType$1 as CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DEFAULT_LOCALE, DEFAULT_LOCALES, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, categories, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, createAutocompleteArgumentsProvider, findCellInNewZone, functionCache, getCaretDownSvg, getCaretUpSvg, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "19.1.0-alpha.8";
-__info__.date = "2025-10-23T08:20:05.310Z";
-__info__.hash = "78717d4";
+__info__.version = "19.1.0-alpha.9";
+__info__.date = "2025-10-23T11:12:55.400Z";
+__info__.hash = "bd756dd";

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.1.0-alpha.8
- * @date 2025-10-23T08:20:05.310Z
- * @hash 78717d4
+ * @version 19.1.0-alpha.9
+ * @date 2025-10-23T11:12:55.400Z
+ * @hash bd756dd
  */
 
 (function (exports, owl) {
@@ -488,8 +488,17 @@
     /**
      * Returns a function, that, as long as it continues to be invoked, will not
      * be triggered. The function will be called after it stops being called for
-     * N milliseconds. If `immediate` is passed, trigger the function on the
-     * leading edge, instead of the trailing.
+     * N milliseconds. If `immediate` is passed,  the function is called is called
+     * immediately on the first call and the debouncing is triggered starting the second
+     * call in the defined time window.
+     *
+     * Example:
+     * debouncedFunction = debounce(() => console.log('Hello!'), 250);
+     * debouncedFunction(); debouncedFunction(); // Will log 'Hello!' after 250ms
+     *
+     * debouncedFunction = debounce(() => console.log('Hello!'), 250, true);
+     * debouncedFunction(); debouncedFunction(); // Will log 'Hello!' and relog it after 250ms
+     *
      *
      * Also decorate the argument function with two methods: stopDebounce and isDebouncePending.
      *
@@ -497,21 +506,21 @@
      */
     function debounce(func, wait, immediate) {
         let timeout = undefined;
+        let firstCalled = false;
         const debounced = function () {
             const context = this;
             const args = Array.from(arguments);
+            if (!firstCalled && immediate) {
+                firstCalled = true;
+                return func.apply(context, args);
+            }
             function later() {
                 timeout = undefined;
-                if (!immediate) {
-                    func.apply(context, args);
-                }
+                firstCalled = false;
+                func.apply(context, args);
             }
-            const callNow = immediate && !timeout;
             clearTimeout(timeout);
             timeout = setTimeout(later, wait);
-            if (callNow) {
-                func.apply(context, args);
-            }
         };
         debounced.isDebouncePending = () => timeout !== undefined;
         debounced.stopDebounce = () => {
@@ -73125,39 +73134,38 @@ stores.inject(MyMetaStore, storeInstance);
         }, () => [ref.el]);
     }
 
-    class TextInput extends owl.Component {
-        static template = "o-spreadsheet-TextInput";
+    class GenericInput extends owl.Component {
         static props = {
-            value: String,
+            value: [Number, String],
             onChange: Function,
-            class: {
-                type: String,
-                optional: true,
-            },
-            id: {
-                type: String,
-                optional: true,
-            },
-            placeholder: {
-                type: String,
-                optional: true,
-            },
-            autofocus: {
-                type: Boolean,
-                optional: true,
-            },
+            class: { type: String, optional: true },
+            id: { type: String, optional: true },
+            placeholder: { type: String, optional: true },
+            autofocus: { type: Boolean, optional: true },
             alwaysShowBorder: { type: Boolean, optional: true },
+            selectContentOnFocus: { type: Boolean, optional: true },
         };
-        inputRef = owl.useRef("input");
+        refName = "input";
+        inputRef;
         setup() {
+            this.inputRef = owl.useRef(this.refName);
             owl.useExternalListener(window, "click", (ev) => {
                 if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
                     this.save();
                 }
             }, { capture: true });
             if (this.props.autofocus) {
-                useAutofocus({ refName: "input" });
+                useAutofocus({ refName: this.refName });
             }
+            owl.onWillUpdateProps((nextProps) => {
+                if (document.activeElement !== this.inputRef.el && this.inputRef.el) {
+                    this.inputRef.el.value = nextProps.value;
+                }
+            });
+            owl.onMounted(() => {
+                if (this.inputRef.el)
+                    this.inputRef.el.value = this.props.value.toString();
+            });
         }
         onKeyDown(ev) {
             switch (ev.key) {
@@ -73168,7 +73176,7 @@ stores.inject(MyMetaStore, storeInstance);
                     break;
                 case "Escape":
                     if (this.inputRef.el) {
-                        this.inputRef.el.value = this.props.value;
+                        this.inputRef.el.value = this.props.value.toString();
                         this.inputRef.el.blur();
                     }
                     ev.preventDefault();
@@ -73176,12 +73184,14 @@ stores.inject(MyMetaStore, storeInstance);
                     break;
             }
         }
-        save() {
+        save(keepFocus = false) {
             const currentValue = (this.inputRef.el?.value || "").trim();
-            if (currentValue !== this.props.value) {
+            if (currentValue !== this.props.value.toString()) {
                 this.props.onChange(currentValue);
             }
-            this.inputRef.el?.blur();
+            if (!keepFocus) {
+                this.inputRef.el?.blur();
+            }
         }
         onMouseDown(ev) {
             // Stop the event if the input is not focused, we handle everything in onMouseUp
@@ -73194,13 +73204,25 @@ stores.inject(MyMetaStore, storeInstance);
             const target = ev.target;
             if (target !== document.activeElement) {
                 target.focus();
-                target.select();
+                if (this.props.selectContentOnFocus) {
+                    target.select();
+                }
                 ev.preventDefault();
                 ev.stopPropagation();
             }
         }
+    }
+
+    class TextInput extends GenericInput {
+        static template = "o-spreadsheet-TextInput";
+        static components = {};
+        static props = GenericInput.props;
         get inputClass() {
-            return [this.props.class, this.props.alwaysShowBorder ? "o-input-border" : undefined]
+            return [
+                this.props.class,
+                "w-100 os-input",
+                this.props.alwaysShowBorder ? "o-input-border" : undefined,
+            ]
                 .filter(isDefined$1)
                 .join(" ");
         }
@@ -73310,6 +73332,16 @@ stores.inject(MyMetaStore, storeInstance);
         fontSizeListRef = owl.useRef("fontSizeList");
         setup() {
             owl.useExternalListener(window, "click", this.onExternalClick, { capture: true });
+            owl.onWillUpdateProps((nextProps) => {
+                if (this.inputRef.el && document.activeElement !== this.inputRef.el) {
+                    this.inputRef.el.value = nextProps.currentFontSize;
+                }
+            });
+            owl.onMounted(() => {
+                if (this.inputRef.el) {
+                    this.inputRef.el.value = this.props.currentFontSize.toString();
+                }
+            });
         }
         get popoverProps() {
             const { x, y, width, height } = this.rootEditorRef.el.getBoundingClientRect();
@@ -74203,7 +74235,7 @@ stores.inject(MyMetaStore, storeInstance);
 
     class ChartTitle extends owl.Component {
         static template = "o-spreadsheet.ChartTitle";
-        static components = { Section, TextStyler };
+        static components = { Section, TextStyler, TextInput };
         static props = {
             title: { type: String, optional: true },
             placeholder: { type: String, optional: true },
@@ -74217,8 +74249,8 @@ stores.inject(MyMetaStore, storeInstance);
             title: "",
             placeholder: "",
         };
-        updateTitle(ev) {
-            this.props.updateTitle(ev.target.value);
+        updateTitle(value) {
+            this.props.updateTitle(value);
         }
     }
 
@@ -74362,6 +74394,27 @@ stores.inject(MyMetaStore, storeInstance);
         }
     }
 
+    class NumberInput extends GenericInput {
+        static template = "o-spreadsheet-NumberInput";
+        static components = {};
+        static props = {
+            ...GenericInput.props,
+            min: { type: Number, optional: true },
+            max: { type: Number, optional: true },
+        };
+        // Very short debounce to prevent up/down arrow on number input to spam the onChange
+        debouncedOnChange = debounce(this.props.onChange.bind(this), 100, true);
+        save() {
+            const currentValue = (this.inputRef.el?.value || "").trim();
+            if (currentValue !== this.props.value.toString()) {
+                this.debouncedOnChange(currentValue);
+            }
+        }
+        get inputClass() {
+            return [this.props.class, "o-input"].join(" ");
+        }
+    }
+
     class SeriesDesignEditor extends owl.Component {
         static template = "o-spreadsheet-SeriesDesignEditor";
         static components = {
@@ -74433,6 +74486,7 @@ stores.inject(MyMetaStore, storeInstance);
             RadioSelection,
             Section,
             RoundColorPicker,
+            NumberInput,
         };
         static props = {
             chartId: String,
@@ -74524,9 +74578,8 @@ stores.inject(MyMetaStore, storeInstance);
         get defaultWindowSize() {
             return DEFAULT_WINDOW_SIZE;
         }
-        onChangeMovingAverageWindow(index, ev) {
-            const element = ev.target;
-            let window = parseInt(element.value) || DEFAULT_WINDOW_SIZE;
+        onChangeMovingAverageWindow(index, value) {
+            let window = parseInt(value) || DEFAULT_WINDOW_SIZE;
             if (window <= 1) {
                 window = DEFAULT_WINDOW_SIZE;
             }
@@ -75055,10 +75108,8 @@ stores.inject(MyMetaStore, storeInstance);
 
     class PieHoleSize extends owl.Component {
         static template = "o-spreadsheet.PieHoleSize";
-        static components = { Section };
+        static components = { Section, NumberInput };
         static props = { onValueChange: Function, value: Number };
-        // Very short debounce to prevent up/down arrow on number input to spam the onChange
-        debouncedOnChange = debounce(this.onChange.bind(this), 100);
         onChange(value) {
             if (!isNaN(Number(value))) {
                 this.props.onValueChange(clip(Number(value), 0, 95));
@@ -79262,7 +79313,14 @@ stores.inject(MyMetaStore, storeInstance);
 
     class TablePanel extends owl.Component {
         static template = "o-spreadsheet-TablePanel";
-        static components = { TableStylePicker, SelectionInput, ValidationMessages, Checkbox, Section };
+        static components = {
+            TableStylePicker,
+            SelectionInput,
+            ValidationMessages,
+            Checkbox,
+            Section,
+            NumberInput,
+        };
         static props = { onCloseSidePanel: Function, table: Object };
         state;
         setup() {
@@ -79312,13 +79370,9 @@ stores.inject(MyMetaStore, storeInstance);
                 this.state.tableZoneErrors = [];
             }
         }
-        onChangeNumberOfHeaders(ev) {
-            const input = ev.target;
-            const numberOfHeaders = parseInt(input.value);
-            const result = this.updateNumberOfHeaders(numberOfHeaders);
-            if (!result.isSuccessful) {
-                input.value = this.props.table.config.numberOfHeaders.toString();
-            }
+        onChangeNumberOfHeaders(value) {
+            const numberOfHeaders = parseInt(value);
+            this.updateNumberOfHeaders(numberOfHeaders);
         }
         updateNumberOfHeaders(numberOfHeaders) {
             const hasFilters = numberOfHeaders > 0 && (this.tableConfig.hasFilters || this.state.filtersEnabledIfPossible);
@@ -87803,6 +87857,7 @@ stores.inject(MyMetaStore, storeInstance);
         GeoChartRegionSelectSection,
         ChartDashboardMenu,
         FullScreenFigure,
+        NumberInput,
     };
     const hooks = {
         useDragAndDropListItems,
@@ -87906,9 +87961,9 @@ stores.inject(MyMetaStore, storeInstance);
     exports.tokenize = tokenize;
 
 
-    __info__.version = "19.1.0-alpha.8";
-    __info__.date = "2025-10-23T08:20:05.310Z";
-    __info__.hash = "78717d4";
+    __info__.version = "19.1.0-alpha.9";
+    __info__.date = "2025-10-23T11:12:55.400Z";
+    __info__.hash = "bd756dd";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);