@odoo/o-spreadsheet 17.1.0-alpha.6 → 17.1.0-alpha.7

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 17.1.0-alpha.6
- * @date 2024-01-04T12:22:45.921Z
- * @hash 56dbdc9
+ * @version 17.1.0-alpha.7
+ * @date 2024-01-12T13:45:00.505Z
+ * @hash cbce1ed
  */
 
 (function (exports, owl) {
@@ -1201,16 +1201,84 @@
   // -----------------------------------------------------------------------------
   // Date Type
   // -----------------------------------------------------------------------------
+  /**
+   * A DateTime object that can be used to manipulate spreadsheet dates.
+   * Conceptually, a spreadsheet date is simply a number with a date format,
+   * and it is timezone-agnostic.
+   * This DateTime object consistently uses UTC time to represent a naive date and time.
+   */
+  class DateTime {
+      jsDate;
+      constructor(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+          this.jsDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds, 0));
+      }
+      static fromTimestamp(timestamp) {
+          const date = new Date(timestamp);
+          return new DateTime(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+      }
+      static now() {
+          const now = new Date();
+          return new DateTime(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+      }
+      toString() {
+          return this.jsDate.toString();
+      }
+      toLocaleDateString() {
+          return this.jsDate.toLocaleDateString();
+      }
+      getTime() {
+          return this.jsDate.getTime();
+      }
+      getFullYear() {
+          return this.jsDate.getUTCFullYear();
+      }
+      getMonth() {
+          return this.jsDate.getUTCMonth();
+      }
+      getDate() {
+          return this.jsDate.getUTCDate();
+      }
+      getDay() {
+          return this.jsDate.getUTCDay();
+      }
+      getHours() {
+          return this.jsDate.getUTCHours();
+      }
+      getMinutes() {
+          return this.jsDate.getUTCMinutes();
+      }
+      getSeconds() {
+          return this.jsDate.getUTCSeconds();
+      }
+      setFullYear(year) {
+          return this.jsDate.setUTCFullYear(year);
+      }
+      setMonth(month) {
+          return this.jsDate.setUTCMonth(month);
+      }
+      setDate(date) {
+          return this.jsDate.setUTCDate(date);
+      }
+      setHours(hours) {
+          return this.jsDate.setUTCHours(hours);
+      }
+      setMinutes(minutes) {
+          return this.jsDate.setUTCMinutes(minutes);
+      }
+      setSeconds(seconds) {
+          return this.jsDate.setUTCSeconds(seconds);
+      }
+  }
   // -----------------------------------------------------------------------------
   // Parsing
   // -----------------------------------------------------------------------------
-  const INITIAL_1900_DAY = new Date(1899, 11, 30);
+  const INITIAL_1900_DAY = new DateTime(1899, 11, 30);
   const MS_PER_DAY = 24 * 60 * 60 * 1000;
   const CURRENT_MILLENIAL = 2000; // note: don't forget to update this in 2999
-  const CURRENT_YEAR = new Date().getFullYear();
-  const CURRENT_MONTH = new Date().getMonth();
-  const INITIAL_JS_DAY = new Date(0);
-  const DATE_JS_1900_OFFSET = INITIAL_JS_DAY - INITIAL_1900_DAY;
+  const CURRENT_YEAR = DateTime.now().getFullYear();
+  const CURRENT_MONTH = DateTime.now().getMonth();
+  const INITIAL_JS_DAY = DateTime.fromTimestamp(0);
+  const DATE_JS_1900_OFFSET = INITIAL_JS_DAY.getTime() - INITIAL_1900_DAY.getTime();
   const mdyDateRegexp = /^\d{1,2}(\/|-|\s)\d{1,2}((\/|-|\s)\d{1,4})?$/;
   const ymdDateRegexp = /^\d{3,4}(\/|-|\s)\d{1,2}(\/|-|\s)\d{1,2}$/;
   const dateSeparatorsRegex = /\/|-|\s/;
@@ -1271,7 +1339,7 @@
           return {
               value: date.value + time.value,
               format: date.format + " " + (time.format === "hhhh:mm:ss" ? "hh:mm:ss" : time.format),
-              jsDate: new Date(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
+              jsDate: new DateTime(date.jsDate.getFullYear() + time.jsDate.getFullYear() - 1899, date.jsDate.getMonth() + time.jsDate.getMonth() - 11, date.jsDate.getDate() + time.jsDate.getDate() - 30, date.jsDate.getHours() + time.jsDate.getHours(), date.jsDate.getMinutes() + time.jsDate.getMinutes(), date.jsDate.getSeconds() + time.jsDate.getSeconds()),
           };
       }
       return date || time;
@@ -1347,12 +1415,12 @@
       // month + 1: months are 0-indexed in JS
       const leadingZero = (monthStr?.length === 2 && month + 1 < 10) || (dayStr?.length === 2 && day < 10);
       const fullYear = yearStr?.length !== 2;
-      const jsDate = new Date(year, month, day);
+      const jsDate = new DateTime(year, month, day);
       if (jsDate.getMonth() !== month || jsDate.getDate() !== day) {
           // invalid date
           return null;
       }
-      const delta = jsDate - INITIAL_1900_DAY;
+      const delta = jsDate.getTime() - INITIAL_1900_DAY.getTime();
       const format = getFormatFromDateParts(parts, separator, leadingZero, fullYear);
       return {
           value: Math.round(delta / MS_PER_DAY),
@@ -1443,7 +1511,7 @@
           if (hours >= 24) {
               format = "hhhh:mm:ss";
           }
-          const jsDate = new Date(1899, 11, 30, hours, minutes, seconds);
+          const jsDate = new DateTime(1899, 11, 30, hours, minutes, seconds);
           return {
               value: hours / 24 + minutes / 1440 + seconds / 86400,
               format: format,
@@ -1457,7 +1525,7 @@
   // -----------------------------------------------------------------------------
   function numberToJsDate(value) {
       const truncValue = Math.trunc(value);
-      let date = new Date(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
+      let date = DateTime.fromTimestamp(truncValue * MS_PER_DAY - DATE_JS_1900_OFFSET);
       let time = value - truncValue;
       time = time < 0 ? 1 + time : time;
       const hours = Math.round(time * 24);
@@ -1477,7 +1545,7 @@
   }
   /** Return the number of days in the current month of the given date */
   function getDaysInMonth(date) {
-      return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+      return new DateTime(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   }
   function isLastDayOfMonth(date) {
       return getDaysInMonth(date) === date.getDate();
@@ -1495,7 +1563,7 @@
       const yStart = date.getFullYear();
       const mStart = date.getMonth();
       const dStart = date.getDate();
-      const jsDate = new Date(yStart, mStart + months);
+      const jsDate = new DateTime(yStart, mStart + months, 1);
       if (keepEndOfMonth && dStart === getDaysInMonth(date)) {
           jsDate.setDate(getDaysInMonth(jsDate));
       }
@@ -2720,20 +2788,20 @@
   }
 
   function toCriterionDateNumber(dateValue) {
-      const today = new Date();
+      const today = DateTime.now();
       switch (dateValue) {
           case "today":
               return jsDateToNumber(today);
           case "yesterday":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 1)));
           case "tomorrow":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() + 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() + 1)));
           case "lastWeek":
-              return jsDateToNumber(new Date(today.setDate(today.getDate() - 7)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setDate(today.getDate() - 7)));
           case "lastMonth":
-              return jsDateToNumber(new Date(today.setMonth(today.getMonth() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setMonth(today.getMonth() - 1)));
           case "lastYear":
-              return jsDateToNumber(new Date(today.setFullYear(today.getFullYear() - 1)));
+              return jsDateToNumber(DateTime.fromTimestamp(today.setFullYear(today.getFullYear() - 1)));
       }
   }
   /** Get all the dates values of a criterion converted to numbers, converting date values such as "today" to actual dates  */
@@ -3094,7 +3162,7 @@
           .map((p) => {
           switch (p) {
               case "hhhh":
-                  const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY) / (60 * 60 * 1000));
+                  const helapsedHours = Math.floor((jsDate.getTime() - INITIAL_1900_DAY.getTime()) / (60 * 60 * 1000));
                   return helapsedHours.toString();
               case "hh":
                   return hours.toString().padStart(2, "0");
@@ -4662,6 +4730,9 @@
 
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
+      static props = {
+          figure: Object,
+      };
       canvas = owl.useRef("graphContainer");
       chart;
       get background() {
@@ -4714,9 +4785,6 @@
           this.chart.update("active");
       }
   }
-  ChartJsComponent.props = {
-      figure: Object,
-  };
 
   /**
    * AbstractChart is the class from which every Chart should inherit.
@@ -5567,6 +5635,9 @@
 
   class ScorecardChart extends owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
+      static props = {
+          figure: Object,
+      };
       canvas = owl.useRef("chartContainer");
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figure.id);
@@ -5584,9 +5655,6 @@
           drawScoreChart(config, canvas);
       }
   }
-  ScorecardChart.props = {
-      figure: Object,
-  };
 
   /**
    * Registry
@@ -6265,11 +6333,11 @@
   class ErrorToolTip extends owl.Component {
       static maxSize = { maxHeight: ERROR_TOOLTIP_MAX_HEIGHT };
       static template = "o-spreadsheet-ErrorToolTip";
+      static props = {
+          errors: Array,
+          onClosed: { type: Function, optional: true },
+      };
   }
-  ErrorToolTip.props = {
-      errors: Array,
-      onClosed: { type: Function, optional: true },
-  };
   const ErrorToolTipPopoverBuilder = {
       onHover: (position, getters) => {
           const cell = getters.getEvaluatedCell(position);
@@ -6311,6 +6379,14 @@
 `;
   class FilterMenuValueItem extends owl.Component {
       static template = "o-spreadsheet-FilterMenuValueItem";
+      static props = {
+          value: String,
+          isChecked: Boolean,
+          isSelected: Boolean,
+          onMouseMove: Function,
+          onClick: Function,
+          scrolledTo: { type: String, optional: true },
+      };
       itemRef = owl.useRef("menuValueItem");
       setup() {
           owl.onWillPatch(() => {
@@ -6328,17 +6404,9 @@
           });
       }
   }
-  FilterMenuValueItem.props = {
-      value: String,
-      isChecked: Boolean,
-      isSelected: Boolean,
-      onMouseMove: Function,
-      onClick: Function,
-      scrolledTo: { type: String, optional: true },
-  };
 
   const FILTER_MENU_HEIGHT = 295;
-  const CSS$2 = css /* scss */ `
+  const CSS = css /* scss */ `
   .o-filter-menu {
     box-sizing: border-box;
     padding: 8px 16px;
@@ -6434,9 +6502,12 @@
   }
 `;
   class FilterMenu extends owl.Component {
-      static size = { width: MENU_WIDTH, height: FILTER_MENU_HEIGHT };
       static template = "o-spreadsheet-FilterMenu";
-      static style = CSS$2;
+      static props = {
+          filterPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
+      static style = CSS;
       static components = { FilterMenuValueItem };
       state = owl.useState({
           values: [],
@@ -6588,10 +6659,6 @@
           this.props.onClosed?.();
       }
   }
-  FilterMenu.props = {
-      filterPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
   const FilterMenuPopoverBuilder = {
       onOpen: (position, getters) => {
           return {
@@ -6793,6 +6860,19 @@
 `;
   class Popover extends owl.Component {
       static template = "o-spreadsheet-Popover";
+      static props = {
+          anchorRect: Object,
+          containerRect: { type: Object, optional: true },
+          positioning: { type: String, optional: true },
+          maxWidth: { type: Number, optional: true },
+          maxHeight: { type: Number, optional: true },
+          verticalOffset: { type: Number, optional: true },
+          onMouseWheel: { type: Function, optional: true },
+          onPopoverHidden: { type: Function, optional: true },
+          onPopoverMoved: { type: Function, optional: true },
+          zIndex: { type: Number, optional: true },
+          slots: Object,
+      };
       static defaultProps = {
           positioning: "BottomLeft",
           verticalOffset: 0,
@@ -6849,19 +6929,6 @@
           });
       }
   }
-  Popover.props = {
-      anchorRect: Object,
-      containerRect: { type: Object, optional: true },
-      positioning: { type: String, optional: true },
-      maxWidth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      verticalOffset: { type: Number, optional: true },
-      onMouseWheel: { type: Function, optional: true },
-      onPopoverHidden: { type: Function, optional: true },
-      onPopoverMoved: { type: Function, optional: true },
-      zIndex: { type: Number, optional: true },
-      slots: Object,
-  };
   class PopoverPositionContext {
       anchorRect;
       containerRect;
@@ -7043,6 +7110,15 @@
 `;
   class Menu extends owl.Component {
       static template = "o-spreadsheet-Menu";
+      static props = {
+          position: Object,
+          menuItems: Array,
+          depth: { type: Number, optional: true },
+          maxHeight: { type: Number, optional: true },
+          onClose: Function,
+          onMenuClicked: { type: Function, optional: true },
+          menuId: { type: String, optional: true },
+      };
       static components = { Menu, Popover };
       static defaultProps = {
           depth: 1,
@@ -7199,15 +7275,6 @@
           }
       }
   }
-  Menu.props = {
-      position: Object,
-      menuItems: Array,
-      depth: { type: Number, optional: true },
-      maxHeight: { type: Number, optional: true },
-      onClose: Function,
-      onMenuClicked: { type: Function, optional: true },
-      menuId: { type: String, optional: true },
-  };
 
   const LINK_TOOLTIP_HEIGHT = 32;
   const LINK_TOOLTIP_WIDTH = 220;
@@ -7260,8 +7327,12 @@
   }
 `;
   class LinkDisplay extends owl.Component {
-      static components = { Menu };
       static template = "o-spreadsheet-LinkDisplay";
+      static props = {
+          cellPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
+      static components = { Menu };
       get cell() {
           const { col, row } = this.props.cellPosition;
           const sheetId = this.env.model.getters.getActiveSheetId();
@@ -7316,10 +7387,6 @@
           };
       },
   };
-  LinkDisplay.props = {
-      cellPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
 
   /**
    * Tokenizer
@@ -7953,6 +8020,10 @@
 `;
   class LinkEditor extends owl.Component {
       static template = "o-spreadsheet-LinkEditor";
+      static props = {
+          cellPosition: Object,
+          onClosed: { type: Function, optional: true },
+      };
       static components = { Menu };
       menuItems = linkMenuRegistry.getMenuItems();
       link = owl.useState(this.defaultState);
@@ -8050,10 +8121,6 @@
           };
       },
   };
-  LinkEditor.props = {
-      cellPosition: Object,
-      onClosed: { type: Function, optional: true },
-  };
 
   const cellPopoverRegistry = new Registry();
   cellPopoverRegistry
@@ -8336,6 +8403,7 @@
               labels: labels.map(truncateLabel),
               datasets: [],
           },
+          platform: undefined,
           plugins: [],
       };
   }
@@ -9640,6 +9708,10 @@
 `;
   class ChartFigure extends owl.Component {
       static template = "o-spreadsheet-ChartFigure";
+      static props = {
+          figure: Object,
+          onFigureDeleted: Function,
+      };
       static components = {};
       onDoubleClick() {
           this.env.model.dispatch("SELECT_FIGURE", { id: this.props.figure.id });
@@ -9657,13 +9729,13 @@
           return component;
       }
   }
-  ChartFigure.props = {
-      figure: Object,
-      onFigureDeleted: Function,
-  };
 
   class ImageFigure extends owl.Component {
       static template = "o-spreadsheet-ImageFigure";
+      static props = {
+          figure: Object,
+          onFigureDeleted: Function,
+      };
       static components = {};
       // ---------------------------------------------------------------------------
       // Getters
@@ -9675,10 +9747,6 @@
           return this.env.model.getters.getImagePath(this.figureId);
       }
   }
-  ImageFigure.props = {
-      figure: Object,
-      onFigureDeleted: Function,
-  };
 
   function centerFigurePosition(getters, size) {
       const { x: offsetCorrectionX, y: offsetCorrectionY } = getters.getMainViewportCoordinates();
@@ -10966,6 +11034,9 @@
   function makeArg(str, description) {
       let parts = str.match(ARG_REGEXP);
       let name = parts[1].trim();
+      if (!name) {
+          throw new Error(`Function argument definition is missing a name: '${str}'.`);
+      }
       let types = [];
       let isOptional = false;
       let isRepeating = false;
@@ -14688,7 +14759,7 @@
           if (_year < 1900) {
               _year += 1900;
           }
-          const jsDate = new Date(_year, _month - 1, _day);
+          const jsDate = new DateTime(_year, _month - 1, _day);
           const result = jsDateToRoundNumber(jsDate);
           assert(() => result >= 0, _t("The function [[FUNCTION_NAME]] result must be greater than or equal 01/01/1900."));
           return result;
@@ -14731,7 +14802,7 @@
                   // See: https://support.microsoft.com/en-us/office/datedif-function-25dba1a4-2812-480b-84dd-8b32a451b35c
                   let days = jsEndDate.getDate() - jsStartDate.getDate();
                   if (days < 0) {
-                      const monthBeforeEndMonth = new Date(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
+                      const monthBeforeEndMonth = new DateTime(jsEndDate.getFullYear(), jsEndDate.getMonth() - 1, 1);
                       const daysInMonthBeforeEndMonth = getDaysInMonth(monthBeforeEndMonth);
                       days = daysInMonthBeforeEndMonth - Math.abs(days);
                   }
@@ -14740,7 +14811,7 @@
                   if (areTwoDatesWithinOneYear(_startDate, _endDate)) {
                       return getTimeDifferenceInWholeDays(jsStartDate, jsEndDate);
                   }
-                  const endDateWithinOneYear = new Date(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
+                  const endDateWithinOneYear = new DateTime(jsStartDate.getFullYear(), jsEndDate.getMonth(), jsEndDate.getDate());
                   let days = getTimeDifferenceInWholeDays(jsStartDate, endDateWithinOneYear);
                   if (days < 0) {
                       endDateWithinOneYear.setFullYear(jsStartDate.getFullYear() + 1);
@@ -14857,7 +14928,7 @@
           const _months = Math.trunc(toNumber(months, this.locale));
           const yStart = _startDate.getFullYear();
           const mStart = _startDate.getMonth();
-          const jsDate = new Date(yStart, mStart + _months + 1, 0);
+          const jsDate = new DateTime(yStart, mStart + _months + 1, 0);
           return jsDateToRoundNumber(jsDate);
       },
       isExported: true,
@@ -14894,17 +14965,17 @@
           // The first week of the year is the week that contains the first
           // Thursday of the year.
           let firstThursday = 1;
-          while (new Date(y, 0, firstThursday).getDay() !== 4) {
+          while (new DateTime(y, 0, firstThursday).getDay() !== 4) {
               firstThursday += 1;
           }
-          const firstDayOfFirstWeek = new Date(y, 0, firstThursday - 3);
+          const firstDayOfFirstWeek = new DateTime(y, 0, firstThursday - 3);
           // The last week of the year is the week that contains the last Thursday of
           // the year.
           let lastThursday = 31;
-          while (new Date(y, 11, lastThursday).getDay() !== 4) {
+          while (new DateTime(y, 11, lastThursday).getDay() !== 4) {
               lastThursday -= 1;
           }
-          const lastDayOfLastWeek = new Date(y, 11, lastThursday + 3);
+          const lastDayOfLastWeek = new DateTime(y, 11, lastThursday + 3);
           // B - If our date > lastDayOfLastWeek then it's in the weeks of the year after
           // If our date < firstDayOfFirstWeek then it's in the weeks of the year before
           let offsetYear;
@@ -14930,17 +15001,17 @@
               case 1:
                   // firstDay is the 1st day of the 1st week of the year after
                   // firstDay = lastDayOfLastWeek + 1 Day
-                  firstDay = new Date(y, 11, lastThursday + 3 + 1);
+                  firstDay = new DateTime(y, 11, lastThursday + 3 + 1);
                   break;
               case -1:
                   // firstDay is the 1st day of the 1st week of the previous year.
                   // The first week of the previous year is the week that contains the
                   // first Thursday of the previous year.
                   let firstThursdayPreviousYear = 1;
-                  while (new Date(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
+                  while (new DateTime(y - 1, 0, firstThursdayPreviousYear).getDay() !== 4) {
                       firstThursdayPreviousYear += 1;
                   }
-                  firstDay = new Date(y - 1, 0, firstThursdayPreviousYear - 3);
+                  firstDay = new DateTime(y - 1, 0, firstThursdayPreviousYear - 3);
                   break;
           }
           const diff = (_date.getTime() - firstDay.getTime()) / MS_PER_DAY;
@@ -15075,8 +15146,8 @@
               });
           }
           const invertDate = _startDate.getTime() > _endDate.getTime();
-          const stopDate = new Date((invertDate ? _startDate : _endDate).getTime());
-          let stepDate = new Date((invertDate ? _endDate : _startDate).getTime());
+          const stopDate = DateTime.fromTimestamp((invertDate ? _startDate : _endDate).getTime());
+          let stepDate = DateTime.fromTimestamp((invertDate ? _endDate : _startDate).getTime());
           const timeStopDate = stopDate.getTime();
           let timeStepDate = stepDate.getTime();
           let netWorkingDay = 0;
@@ -15102,8 +15173,7 @@
           return getDateTimeFormat(this.locale);
       },
       compute: function () {
-          let today = new Date();
-          today.setMilliseconds(0);
+          let today = DateTime.now();
           const delta = today.getTime() - INITIAL_1900_DAY.getTime();
           const time = today.getHours() / 24 + today.getMinutes() / 1440 + today.getSeconds() / 86400;
           return Math.floor(delta / MS_PER_DAY) + time;
@@ -15177,8 +15247,8 @@
           return this.locale.dateFormat;
       },
       compute: function () {
-          const today = new Date();
-          const jsDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+          const today = DateTime.now();
+          const jsDate = new DateTime(today.getFullYear(), today.getMonth(), today.getDate());
           return jsDateToRoundNumber(jsDate);
       },
       isExported: true,
@@ -15233,10 +15303,10 @@
           }
           const y = _date.getFullYear();
           let dayStart = 1;
-          let startDayOfFirstWeek = new Date(y, 0, dayStart);
+          let startDayOfFirstWeek = new DateTime(y, 0, dayStart);
           while (startDayOfFirstWeek.getDay() !== startDayOfWeek) {
               dayStart += 1;
-              startDayOfFirstWeek = new Date(y, 0, dayStart);
+              startDayOfFirstWeek = new DateTime(y, 0, dayStart);
           }
           const dif = (_date.getTime() - startDayOfFirstWeek.getTime()) / MS_PER_DAY;
           if (dif < 0) {
@@ -15294,7 +15364,7 @@
                   timesHoliday.add(holiday.getTime());
               });
           }
-          let stepDate = new Date(_startDate.getTime());
+          let stepDate = DateTime.fromTimestamp(_startDate.getTime());
           let timeStepDate = stepDate.getTime();
           const unitDay = Math.sign(_numDays);
           let stepDay = Math.abs(_numDays);
@@ -15358,7 +15428,7 @@
           const _startDate = toJsDate(date, this.locale);
           const yStart = _startDate.getFullYear();
           const mStart = _startDate.getMonth();
-          const jsDate = new Date(yStart, mStart, 1);
+          const jsDate = new DateTime(yStart, mStart, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15400,7 +15470,7 @@
       compute: function (date) {
           const quarter = QUARTER.compute.bind(this)(date);
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, (quarter - 1) * 3, 1);
+          const jsDate = new DateTime(year, (quarter - 1) * 3, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15417,7 +15487,7 @@
       compute: function (date) {
           const quarter = QUARTER.compute.bind(this)(date);
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, quarter * 3, 0);
+          const jsDate = new DateTime(year, quarter * 3, 0);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15433,7 +15503,7 @@
       },
       compute: function (date) {
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year, 0, 1);
+          const jsDate = new DateTime(year, 0, 1);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15449,7 +15519,7 @@
       },
       compute: function (date) {
           const year = YEAR.compute.bind(this)(date);
-          const jsDate = new Date(year + 1, 0, 0);
+          const jsDate = new DateTime(year + 1, 0, 0);
           return jsDateToRoundNumber(jsDate);
       },
   };
@@ -15497,8 +15567,8 @@
   const DELTA = {
       description: _t("Compare two numeric values, returning 1 if they're equal."),
       args: [
-          arg(" (number)", _t("The first number to compare.")),
-          arg(` (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
+          arg("number1 (number)", _t("The first number to compare.")),
+          arg(`number2 (number, default=${DEFAULT_DELTA_ARG})`, _t("The second number to compare.")),
       ],
       returns: ["NUMBER"],
       compute: function (number1, number2 = DEFAULT_DELTA_ARG) {
@@ -15925,7 +15995,7 @@
   function assertSettlementLessThanOneYearBeforeMaturity(settlement, maturity, locale) {
       const startDate = toJsDate(settlement, locale);
       const endDate = toJsDate(maturity, locale);
-      const startDatePlusOneYear = new Date(startDate);
+      const startDatePlusOneYear = toJsDate(settlement, locale);
       startDatePlusOneYear.setFullYear(startDate.getFullYear() + 1);
       assert(() => endDate.getTime() <= startDatePlusOneYear.getTime(), _t("The settlement date (%s) must at most one year after the maturity date (%s).", settlement.toString(), maturity.toString()));
   }
@@ -16060,7 +16130,7 @@
           arg("salvage (number)", _t("The value of the asset at the end of depreciation.")),
           arg("period (number)", _t("The single period within life for which to calculate depreciation.")),
           arg("rate (number)", _t("The deprecation rate.")),
-          arg(" (number, optional)", _t("An indicator of what day count method to use.")),
+          arg("day_count_convention (number, optional)", _t("An indicator of what day count method to use.")),
       ],
       returns: ["NUMBER"],
       compute: function (cost, purchaseDate, firstPeriodEnd, salvage, period, rate, dayCountConvention = DEFAULT_DAY_COUNT_CONVENTION) {
@@ -19232,8 +19302,8 @@
       description: _t("A segment of a string."),
       args: [
           arg("text (string)", _t("The string to extract a segment from.")),
-          arg(" (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
-          arg(" (number)", _t("The length of the segment to extract.")),
+          arg("starting_at (number)", _t("The index from the left of string from which to begin extracting. The first character in string has the index 1.")),
+          arg("extract_length (number)", _t("The length of the segment to extract.")),
       ],
       returns: ["STRING"],
       compute: function (text, starting_at, extract_length) {
@@ -21516,6 +21586,15 @@
    */
   class SelectionInput extends owl.Component {
       static template = "o-spreadsheet-SelectionInput";
+      static props = {
+          ranges: Function,
+          hasSingleRange: { type: Boolean, optional: true },
+          required: { type: Boolean, optional: true },
+          isInvalid: { type: Boolean, optional: true },
+          class: { type: String, optional: true },
+          onSelectionChanged: { type: Function, optional: true },
+          onSelectionConfirmed: { type: Function, optional: true },
+      };
       id = uuidGenerator$1.uuidv4();
       previousRanges = this.props.ranges() || [];
       originSheet = this.env.model.getters.getActiveSheetId();
@@ -21678,15 +21757,6 @@
           this.env.model.dispatch("UNFOCUS_SELECTION_INPUT");
       }
   }
-  SelectionInput.props = {
-      ranges: Function,
-      hasSingleRange: { type: Boolean, optional: true },
-      required: { type: Boolean, optional: true },
-      isInvalid: { type: Boolean, optional: true },
-      class: { type: String, optional: true },
-      onSelectionChanged: { type: Function, optional: true },
-      onSelectionConfirmed: { type: Function, optional: true },
-  };
 
   css /* scss */ `
   .o-validation-error,
@@ -21702,6 +21772,10 @@
 `;
   class ValidationMessages extends owl.Component {
       static template = "o-spreadsheet-ValidationMessages";
+      static props = {
+          messages: Array,
+          msgType: String,
+      };
       get divClasses() {
           if (this.props.msgType === "warning") {
               return "o-validation-warning text-warning";
@@ -21709,14 +21783,96 @@
           return "o-validation-error text-danger";
       }
   }
-  ValidationMessages.props = {
-      messages: Array,
-      msgType: String,
-  };
+
+  css /* scss */ `
+  .o-checkbox {
+    display: flex;
+    justify-items: center;
+    input {
+      margin-right: 5px;
+    }
+  }
+`;
+  class Checkbox extends owl.Component {
+      static template = "o-spreadsheet.Checkbox";
+      static props = {
+          label: { type: String, optional: true },
+          value: { type: Boolean, optional: true },
+          className: { type: String, optional: true },
+          name: { type: String, optional: true },
+          onChange: Function,
+      };
+      static defaultProps = { value: false };
+      onChange(ev) {
+          const value = ev.target.checked;
+          this.props.onChange(value);
+      }
+  }
+
+  class Section extends owl.Component {
+      static template = "o_spreadsheet.Section";
+      static props = {
+          class: { type: String, optional: true },
+          slots: Object,
+      };
+  }
+
+  class ChartDataSeries extends owl.Component {
+      static template = "o-spreadsheet.ChartDataSeries";
+      static components = { SelectionInput, Section };
+      static props = {
+          ranges: Function,
+          hasSingleRange: { type: Boolean, optional: true },
+          onSelectionChanged: Function,
+          onSelectionConfirmed: Function,
+      };
+      get title() {
+          return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
+      }
+  }
+
+  class ChartErrorSection extends owl.Component {
+      static template = "o-spreadsheet.ChartErrorSection";
+      static components = { Section, ValidationMessages };
+      static props = { messages: { type: Array, element: String } };
+  }
+
+  class ChartLabelRange extends owl.Component {
+      static template = "o-spreadsheet.ChartLabelRange";
+      static components = { SelectionInput, Checkbox, Section };
+      static props = {
+          title: { type: String, optional: true },
+          range: Function,
+          isInvalid: Boolean,
+          required: { type: Boolean, optional: true },
+          onSelectionChanged: Function,
+          onSelectionConfirmed: Function,
+          options: { type: Array, optional: true },
+      };
+      static defaultProps = {
+          title: _t("Categories / Labels"),
+          options: [],
+          required: false,
+      };
+  }
 
   class LineBarPieConfigPanel extends owl.Component {
       static template = "o-spreadsheet-LineBarPieConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = {
+          SelectionInput,
+          ValidationMessages,
+          ChartDataSeries,
+          ChartLabelRange,
+          Section,
+          Checkbox,
+          ChartErrorSection,
+      };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           datasetDispatchResult: undefined,
           labelsDispatchResult: undefined,
@@ -21740,9 +21896,22 @@
       get isLabelInvalid() {
           return !!this.state.labelsDispatchResult?.isCancelledBecause("InvalidLabelRange" /* CommandResult.InvalidLabelRange */);
       }
-      onUpdateDataSetsHaveTitle(ev) {
+      get dataSetsHaveTitleLabel() {
+          return _t("Use row %s as headers", this.calculateHeaderPosition() || "");
+      }
+      getLabelRangeOptions() {
+          return [
+              {
+                  name: "aggregated",
+                  label: _t("Aggregate"),
+                  value: this.props.definition.aggregated,
+                  onChange: this.onUpdateAggregated.bind(this),
+              },
+          ];
+      }
+      onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
           this.props.updateChart(this.props.figureId, {
-              dataSetsHaveTitle: ev.target.checked,
+              dataSetsHaveTitle,
           });
       }
       /**
@@ -21782,9 +21951,9 @@
       getLabelRange() {
           return this.labelRange || "";
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
       calculateHeaderPosition() {
@@ -21804,23 +21973,20 @@
           return undefined;
       }
   }
-  LineBarPieConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class BarConfigPanel extends LineBarPieConfigPanel {
       static template = "o-spreadsheet-BarConfigPanel";
-      onUpdateStacked(ev) {
+      get stackedLabel() {
+          return _t("Stacked barchart");
+      }
+      onUpdateStacked(stacked) {
           this.props.updateChart(this.props.figureId, {
-              stacked: ev.target.checked,
+              stacked,
           });
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
   }
@@ -22148,6 +22314,12 @@
 `;
   class ColorPicker extends owl.Component {
       static template = "o-spreadsheet-ColorPicker";
+      static props = {
+          onColorPicked: Function,
+          currentColor: { type: String, optional: true },
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+      };
       static defaultProps = { currentColor: "" };
       static components = { Popover };
       COLORS = COLOR_PICKER_DEFAULTS;
@@ -22283,12 +22455,6 @@
           return isSameColor(color1, color2);
       }
   }
-  ColorPicker.props = {
-      onColorPicked: Function,
-      currentColor: { type: String, optional: true },
-      maxHeight: { type: Number, optional: true },
-      anchorRect: Object,
-  };
 
   css /* scss */ `
   .o-color-picker-widget {
@@ -22326,6 +22492,17 @@
 `;
   class ColorPickerWidget extends owl.Component {
       static template = "o-spreadsheet-ColorPickerWidget";
+      static props = {
+          currentColor: { type: String, optional: true },
+          toggleColorPicker: Function,
+          showColorPicker: Boolean,
+          onColorPicked: Function,
+          icon: String,
+          title: { type: String, optional: true },
+          disabled: { type: Boolean, optional: true },
+          dropdownMaxHeight: { type: Number, optional: true },
+          class: { type: String, optional: true },
+      };
       static components = { ColorPicker };
       colorPickerButtonRef = owl.useRef("colorPickerButton");
       get iconStyle() {
@@ -22344,44 +22521,55 @@
           };
       }
   }
-  ColorPickerWidget.props = {
-      currentColor: { type: String, optional: true },
-      toggleColorPicker: Function,
-      showColorPicker: Boolean,
-      onColorPicked: Function,
-      icon: String,
-      title: { type: String, optional: true },
-      disabled: { type: Boolean, optional: true },
-      dropdownMaxHeight: { type: Number, optional: true },
-      class: { type: String, optional: true },
-  };
 
-  class LineBarPieDesignPanel extends owl.Component {
-      static template = "o-spreadsheet-LineBarPieDesignPanel";
-      static components = { ColorPickerWidget };
-      state = owl.useState({
-          title: "",
-          fillColorTool: false,
-      });
-      onClick(ev) {
-          this.state.fillColorTool = false;
-      }
+  class ChartColor extends owl.Component {
+      static template = "o-spreadsheet.ChartColor";
+      static components = { ColorPickerWidget, Section };
+      static props = {
+          currentColor: { type: String, optional: true },
+          onColorPicked: Function,
+      };
+      state;
       setup() {
-          this.state.title = _t(this.props.definition.title);
-          owl.useExternalListener(window, "click", this.onClick);
+          this.state = owl.useState({ pickerOpened: false });
+          owl.useExternalListener(window, "click", this.closePicker);
       }
-      toggleColorPicker() {
-          this.state.fillColorTool = !this.state.fillColorTool;
+      closePicker() {
+          this.state.pickerOpened = false;
+      }
+      togglePicker() {
+          this.state.pickerOpened = !this.state.pickerOpened;
+      }
+  }
+
+  class ChartTitle extends owl.Component {
+      static template = "o-spreadsheet.ChartTitle";
+      static components = { ColorPickerWidget, Section };
+      static props = { title: String, update: Function };
+      updateTitle(ev) {
+          this.props.update(ev.target.value);
+      }
+  }
+
+  class LineBarPieDesignPanel extends owl.Component {
+      static template = "o-spreadsheet-LineBarPieDesignPanel";
+      static components = { ChartColor, ColorPickerWidget, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
+      get title() {
+          return _t(this.props.definition.title);
       }
       updateBackgroundColor(color) {
           this.props.updateChart(this.props.figureId, {
               background: color,
           });
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       updateSelect(attr, ev) {
           this.props.updateChart(this.props.figureId, {
@@ -22389,12 +22577,6 @@
           });
       }
   }
-  LineBarPieDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class BarChartDesignPanel extends LineBarPieDesignPanel {
       static template = "o-spreadsheet-BarChartDesignPanel";
@@ -22402,7 +22584,13 @@
 
   class GaugeChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = { SelectionInput, ChartErrorSection, ChartDataSeries };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           dataRangeDispatchResult: undefined,
       });
@@ -22429,12 +22617,6 @@
           return this.dataRange || "";
       }
   }
-  GaugeChartConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   css /* scss */ `
   .o-gauge-color-set {
@@ -22469,31 +22651,35 @@
 `;
   class GaugeChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-GaugeChartDesignPanel";
-      static components = { ColorPickerWidget, ValidationMessages };
+      static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
-          title: "",
           openedMenu: undefined,
           sectionRuleDispatchResult: undefined,
           sectionRule: deepCopy(this.props.definition.sectionRule),
       });
       setup() {
-          this.state.title = _t(this.props.definition.title);
           owl.useExternalListener(window, "click", this.closeMenus);
       }
+      get title() {
+          return _t(this.props.definition.title);
+      }
       get designErrorMessages() {
           const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
           return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
       }
       updateBackgroundColor(color) {
-          this.state.openedMenu = undefined;
           this.props.updateChart(this.props.figureId, {
               background: color,
           });
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       isRangeMinInvalid() {
           return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
@@ -22543,12 +22729,6 @@
           this.state.openedMenu = undefined;
       }
   }
-  GaugeChartDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class LineConfigPanel extends LineBarPieConfigPanel {
       static template = "o-spreadsheet-LineConfigPanel";
@@ -22559,24 +22739,42 @@
           }
           return false;
       }
-      onUpdateLabelsAsText(ev) {
+      get stackedLabel() {
+          return _t("Stacked linechart");
+      }
+      get cumulativeLabel() {
+          return _t("Cumulative data");
+      }
+      getLabelRangeOptions() {
+          const options = super.getLabelRangeOptions();
+          if (this.canTreatLabelsAsText) {
+              options.push({
+                  name: "labelsAsText",
+                  value: this.props.definition.labelsAsText,
+                  label: _t("Treat labels as text"),
+                  onChange: this.onUpdateLabelsAsText.bind(this),
+              });
+          }
+          return options;
+      }
+      onUpdateLabelsAsText(labelsAsText) {
           this.props.updateChart(this.props.figureId, {
-              labelsAsText: ev.target.checked,
+              labelsAsText,
           });
       }
-      onUpdateStacked(ev) {
+      onUpdateStacked(stacked) {
           this.props.updateChart(this.props.figureId, {
-              stacked: ev.target.checked,
+              stacked,
           });
       }
-      onUpdateAggregated(ev) {
+      onUpdateAggregated(aggregated) {
           this.props.updateChart(this.props.figureId, {
-              aggregated: ev.target.checked,
+              aggregated,
           });
       }
-      onUpdateCumulative(ev) {
+      onUpdateCumulative(cumulative) {
           this.props.updateChart(this.props.figureId, {
-              cumulative: ev.target.checked,
+              cumulative,
           });
       }
   }
@@ -22587,7 +22785,13 @@
 
   class ScorecardChartConfigPanel extends owl.Component {
       static template = "o-spreadsheet-ScorecardChartConfigPanel";
-      static components = { SelectionInput, ValidationMessages };
+      static components = { SelectionInput, ValidationMessages, ChartErrorSection, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
           keyValueDispatchResult: undefined,
           baselineDispatchResult: undefined,
@@ -22639,28 +22843,27 @@
           this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
       }
   }
-  ScorecardChartConfigPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   class ScorecardChartDesignPanel extends owl.Component {
       static template = "o-spreadsheet-ScorecardChartDesignPanel";
-      static components = { ColorPickerWidget };
+      static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
       state = owl.useState({
-          title: "",
           openedColorPicker: undefined,
       });
       setup() {
-          this.state.title = _t(this.props.definition.title);
           owl.useExternalListener(window, "click", this.closeMenus);
       }
-      updateTitle() {
-          this.props.updateChart(this.props.figureId, {
-              title: this.state.title,
-          });
+      get title() {
+          return _t(this.props.definition.title);
+      }
+      updateTitle(title) {
+          this.props.updateChart(this.props.figureId, { title });
       }
       translate(term) {
           return _t(term);
@@ -22694,12 +22897,6 @@
           this.state.openedColorPicker = undefined;
       }
   }
-  ScorecardChartDesignPanel.props = {
-      figureId: String,
-      definition: Object,
-      updateChart: Function,
-      canUpdateChart: Function,
-  };
 
   const chartSidePanelComponentRegistry = new Registry();
   chartSidePanelComponentRegistry
@@ -22750,6 +22947,8 @@
 `;
   class ChartPanel extends owl.Component {
       static template = "o-spreadsheet-ChartPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       state;
       get figureId() {
           return this.state.figureId;
@@ -22836,9 +23035,6 @@
           this.state.panel = panel;
       }
   }
-  ChartPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-spreadsheet {
@@ -22949,6 +23145,9 @@
 `;
   class IconPicker extends owl.Component {
       static template = "o-spreadsheet-IconPicker";
+      static props = {
+          onIconPicked: Function,
+      };
       icons = ICONS;
       iconSets = ICON_SETS;
       onIconClick(icon) {
@@ -22957,9 +23156,6 @@
           }
       }
   }
-  IconPicker.props = {
-      onIconPicked: Function,
-  };
 
   function useDragAndDropListItems() {
       let dndHelper;
@@ -23314,6 +23510,11 @@
 `;
   class ConditionalFormatPreviewList extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormatPreviewList";
+      static props = {
+          conditionalFormats: Array,
+          onPreviewClick: Function,
+          onAddConditionalFormat: Function,
+      };
       icons = ICONS;
       dragAndDrop = useDragAndDropListItems();
       cfListRef = owl.useRef("cfList");
@@ -23394,11 +23595,6 @@
           }
       }
   }
-  ConditionalFormatPreviewList.props = {
-      conditionalFormats: Array,
-      onPreviewClick: Function,
-      onAddConditionalFormat: Function,
-  };
 
   css /* scss */ `
   label {
@@ -23571,11 +23767,16 @@
 `;
   class ConditionalFormattingEditor extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingEditor";
+      static props = {
+          editedCf: { type: Object, optional: true },
+          onExitEdition: Function,
+      };
       static components = {
           SelectionInput,
           IconPicker,
           ColorPickerWidget,
           ConditionalFormatPreviewList,
+          Section,
       };
       icons = ICONS;
       cellIsOperators = CellIsOperators;
@@ -23835,13 +24036,13 @@
           this.state.rules.iconSet.icons[target] = icon;
       }
   }
-  ConditionalFormattingEditor.props = {
-      editedCf: { type: Object, optional: true },
-      onExitEdition: Function,
-  };
 
   class ConditionalFormattingPanel extends owl.Component {
       static template = "o-spreadsheet-ConditionalFormattingPanel";
+      static props = {
+          selection: { type: Object, optional: true },
+          onCloseSidePanel: Function,
+      };
       static components = {
           ConditionalFormatPreviewList,
           ConditionalFormattingEditor,
@@ -23900,10 +24101,6 @@
           this.state.editedCf = cf;
       }
   }
-  ConditionalFormattingPanel.props = {
-      selection: { type: Object, optional: true },
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-custom-currency {
@@ -23914,6 +24111,8 @@
 `;
   class CustomCurrencyPanel extends owl.Component {
       static template = "o-spreadsheet-CustomCurrencyPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       availableCurrencies;
       state;
       setup() {
@@ -24036,9 +24235,6 @@
           return currency.name + (currency.code ? ` (${currency.code})` : "");
       }
   }
-  CustomCurrencyPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-find-and-replace {
@@ -24068,7 +24264,10 @@
 `;
   class FindAndReplacePanel extends owl.Component {
       static template = "o-spreadsheet-FindAndReplacePanel";
-      static components = { SelectionInput };
+      static components = { SelectionInput, Section, Checkbox };
+      static props = {
+          onCloseSidePanel: Function,
+      };
       debounceTimeoutId;
       initialShowFormulaState = false;
       dataRange = "";
@@ -24143,19 +24342,16 @@
               this.replace();
           }
       }
-      searchFormulas(ev) {
-          const showFormula = ev.target.checked;
+      searchFormulas(showFormula) {
           this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
               show: showFormula,
           });
           this.updateSearch({ searchFormulas: showFormula });
       }
-      searchExactMatch(ev) {
-          const exactMatch = ev.target.checked;
+      searchExactMatch(exactMatch) {
           this.updateSearch({ exactMatch });
       }
-      searchMatchCase(ev) {
-          const matchCase = ev.target.checked;
+      searchMatchCase(matchCase) {
           this.updateSearch({ matchCase });
       }
       changeSearchScope(ev) {
@@ -24208,9 +24404,6 @@
           });
       }
   }
-  FindAndReplacePanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-more-formats-panel {
@@ -24242,13 +24435,13 @@
   ]);
   class MoreFormatsPanel extends owl.Component {
       static template = "o-spreadsheet-MoreFormatsPanel";
+      static props = {
+          onCloseSidePanel: Function,
+      };
       get dateFormatsActions() {
           return DATE_FORMAT_ACTIONS;
       }
   }
-  MoreFormatsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-checkbox-selection {
@@ -24257,7 +24450,7 @@
 `;
   class RemoveDuplicatesPanel extends owl.Component {
       static template = "o-spreadsheet-RemoveDuplicatesPanel";
-      static components = { ValidationMessages };
+      static components = { ValidationMessages, Section, Checkbox };
       state = owl.useState({
           hasHeader: false,
           columns: {},
@@ -24346,6 +24539,8 @@
 `;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
+      static components = { Section };
+      static props = { onCloseSidePanel: Function };
       loadedLocales = [];
       setup() {
           owl.onWillStart(() => this.loadLocales());
@@ -24394,9 +24589,6 @@
           return this.loadedLocales;
       }
   }
-  SettingsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   const SplitToColumnsInteractiveContent = {
       SplitIsDestructive: _t("This will overwrite data in the subsequent columns. Split anyway?"),
@@ -24492,7 +24684,7 @@
               return false;
           }
           if (["lastWeek", "lastMonth", "lastYear"].includes(criterion.dateValue)) {
-              const today = jsDateToRoundNumber(new Date());
+              const today = jsDateToRoundNumber(DateTime.now());
               return isDateBetween(dateValue, today, criterionValue);
           }
           return areDatesSameDay(dateValue, criterionValue);
@@ -24984,7 +25176,8 @@
   ];
   class SplitIntoColumnsPanel extends owl.Component {
       static template = "o-spreadsheet-SplitIntoColumnsPanel";
-      static components = { ValidationMessages };
+      static components = { ValidationMessages, Section, Checkbox };
+      static props = { onCloseSidePanel: Function };
       state = owl.useState({ separatorValue: "auto", addNewColumns: false, customSeparator: "" });
       setup() {
           owl.onWillUpdateProps(() => {
@@ -25006,10 +25199,8 @@
               return;
           this.state.customSeparator = ev.target.value;
       }
-      updateAddNewColumnsCheckbox(ev) {
-          if (!ev.target)
-              return;
-          this.state.addNewColumns = ev.target.checked;
+      updateAddNewColumnsCheckbox(addNewColumns) {
+          this.state.addNewColumns = addNewColumns;
       }
       confirm() {
           const result = interactiveSplitToColumns(this.env, this.separatorValue, this.state.addNewColumns);
@@ -25063,13 +25254,15 @@
           return !this.separatorValue || this.errorMessages.length > 0;
       }
   }
-  SplitIntoColumnsPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   /** This component looks like a select input, but on click it opens a Menu with the items given as props instead of a dropdown */
   class SelectMenu extends owl.Component {
       static template = "o-spreadsheet-SelectMenu";
+      static props = {
+          menuItems: Array,
+          selectedValue: String,
+          class: { type: String, optional: true },
+      };
       static components = { Menu };
       selectRef = owl.useRef("select");
       selectRect = useAbsoluteBoundingRect(this.selectRef);
@@ -25089,13 +25282,12 @@
           };
       }
   }
-  SelectMenu.props = {
-      menuItems: Array,
-      selectedValue: String,
-      class: { type: String, optional: true },
-  };
 
   class DataValidationCriterionForm extends owl.Component {
+      static props = {
+          criterion: Object,
+          onCriterionChanged: Function,
+      };
       setup() {
           owl.onMounted(() => {
               interactiveStopEdition(this.env);
@@ -25109,10 +25301,6 @@
           this.props.onCriterionChanged(filteredCriterion);
       }
   }
-  DataValidationCriterionForm.props = {
-      criterion: Object,
-      onCriterionChanged: Function,
-  };
 
   css /* scss */ `
   .o-dv-input {
@@ -25127,6 +25315,15 @@
 `;
   class DataValidationInput extends owl.Component {
       static template = "o-spreadsheet-DataValidationInput";
+      static props = {
+          value: { type: String, optional: true },
+          criterionType: String,
+          onValueChanged: Function,
+          onKeyDown: { type: Function, optional: true },
+          focused: { type: Boolean, optional: true },
+          onBlur: { type: Function, optional: true },
+          onFocus: { type: Function, optional: true },
+      };
       static defaultProps = {
           value: "",
           onKeyDown: () => { },
@@ -25165,15 +25362,6 @@
           return this.env.model.getters.getDataValidationInvalidCriterionValueMessage(this.props.criterionType, canonicalizeContent(this.props.value, this.env.model.getters.getLocale()));
       }
   }
-  DataValidationInput.props = {
-      value: { type: String, optional: true },
-      criterionType: String,
-      onValueChanged: Function,
-      onKeyDown: { type: Function, optional: true },
-      focused: { type: Boolean, optional: true },
-      onBlur: { type: Function, optional: true },
-      onFocus: { type: Function, optional: true },
-  };
 
   const DATES_VALUES = {
       today: _t("today"),
@@ -25509,7 +25697,11 @@
 `;
   class DataValidationEditor extends owl.Component {
       static template = "o-spreadsheet-DataValidationEditor";
-      static components = { SelectionInput, SelectMenu };
+      static components = { SelectionInput, SelectMenu, Section };
+      static props = {
+          rule: { type: Object, optional: true },
+          onExit: Function,
+      };
       state = owl.useState({ rule: this.defaultDataValidationRule });
       setup() {
           if (this.props.rule) {
@@ -25585,10 +25777,6 @@
           return dataValidationPanelCriteriaRegistry.get(this.state.rule.criterion.type).component;
       }
   }
-  DataValidationEditor.props = {
-      rule: { type: Object, optional: true },
-      onExit: Function,
-  };
 
   css /* scss */ `
   .o-sidePanel {
@@ -25618,6 +25806,10 @@
 `;
   class DataValidationPreview extends owl.Component {
       static template = "o-spreadsheet-DataValidationPreview";
+      static props = {
+          onClick: Function,
+          rule: Object,
+      };
       deleteDataValidation() {
           const sheetId = this.env.model.getters.getActiveSheetId();
           this.env.model.dispatch("REMOVE_DATA_VALIDATION_RULE", { sheetId, id: this.props.rule.id });
@@ -25634,13 +25826,12 @@
               .getPreview(this.props.rule.criterion, this.env.model.getters);
       }
   }
-  DataValidationPreview.props = {
-      onClick: Function,
-      rule: Object,
-  };
 
   class DataValidationPanel extends owl.Component {
       static template = "o-spreadsheet-DataValidationPanel";
+      static props = {
+          onCloseSidePanel: Function,
+      };
       static components = { DataValidationPreview, DataValidationEditor };
       state = owl.useState({ mode: "list", activeRule: undefined });
       onPreviewClick(id) {
@@ -25670,9 +25861,6 @@
           return this.env.model.getters.getDataValidationRules(sheetId);
       }
   }
-  DataValidationPanel.props = {
-      onCloseSidePanel: Function,
-  };
 
   const sidePanelRegistry = new Registry();
   sidePanelRegistry.add("ConditionalFormatting", {
@@ -25804,6 +25992,13 @@
 `;
   class FigureComponent extends owl.Component {
       static template = "o-spreadsheet-FigureComponent";
+      static props = {
+          figure: Object,
+          style: { type: String, optional: true },
+          onFigureDeleted: { type: Function, optional: true },
+          onMouseDown: { type: Function, optional: true },
+          onClickAnchor: { type: Function, optional: true },
+      };
       static components = { Menu };
       static defaultProps = {
           onFigureDeleted: () => { },
@@ -25946,13 +26141,6 @@
               .menuBuilder(this.props.figure.id, this.props.onFigureDeleted, this.env);
       }
   }
-  FigureComponent.props = {
-      figure: Object,
-      style: { type: String, optional: true },
-      onFigureDeleted: { type: Function, optional: true },
-      onMouseDown: { type: Function, optional: true },
-      onClickAnchor: { type: Function, optional: true },
-  };
 
   const ToggleGroupInteractiveContent = {
       CannotHideAllRows: _t("Cannot hide all the rows of a sheet."),
@@ -26090,6 +26278,10 @@
 `;
   class Autofill extends owl.Component {
       static template = "o-spreadsheet-Autofill";
+      static props = {
+          position: Object,
+          isVisible: Boolean,
+      };
       state = owl.useState({
           position: { left: 0, top: 0 },
           handler: false,
@@ -26158,18 +26350,14 @@
           this.env.model.dispatch("AUTOFILL_AUTO");
       }
   }
-  Autofill.props = {
-      position: Object,
-      isVisible: Boolean,
-  };
   class TooltipComponent extends owl.Component {
+      static props = {
+          content: String,
+      };
       static template = owl.xml /* xml */ `
     <div t-esc="props.content"/>
   `;
   }
-  TooltipComponent.props = {
-      content: String,
-  };
 
   css /* scss */ `
   .o-client-tag {
@@ -26183,6 +26371,13 @@
 `;
   class ClientTag extends owl.Component {
       static template = "o-spreadsheet-ClientTag";
+      static props = {
+          active: Boolean,
+          name: String,
+          color: String,
+          col: Number,
+          row: Number,
+      };
       get tagStyle() {
           const { col, row, color } = this.props;
           const { height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
@@ -26200,13 +26395,6 @@
           });
       }
   }
-  ClientTag.props = {
-      active: Boolean,
-      name: String,
-      color: String,
-      col: Number,
-      row: Number,
-  };
 
   function getHtmlContentFromPattern(pattern, value, highlightColor, className) {
       const pendingHtmlContent = [];
@@ -26246,14 +26434,14 @@
 `;
   class TextValueProvider extends owl.Component {
       static template = "o-spreadsheet-TextValueProvider";
+      static props = {
+          values: Array,
+          selectedIndex: { type: Number, optional: true },
+          getHtmlContent: Function,
+          onValueSelected: Function,
+          onValueHovered: Function,
+      };
   }
-  TextValueProvider.props = {
-      values: Array,
-      selectedIndex: { type: Number, optional: true },
-      getHtmlContent: Function,
-      onValueSelected: Function,
-      onValueHovered: Function,
-  };
 
   class ContentEditableHelper {
       // todo make el private and expose dedicated methods
@@ -26615,6 +26803,11 @@
 `;
   class FunctionDescriptionProvider extends owl.Component {
       static template = "o-spreadsheet-FunctionDescriptionProvider";
+      static props = {
+          functionName: String,
+          functionDescription: Object,
+          argToFocus: Number,
+      };
       assistantState = owl.useState({
           allowCellSelectionBehind: false,
       });
@@ -26639,11 +26832,6 @@
           }, 2000);
       }
   }
-  FunctionDescriptionProvider.props = {
-      functionName: String,
-      functionDescription: Object,
-      argToFocus: Number,
-  };
 
   const functions$2 = functionRegistry.content;
   const ASSISTANT_WIDTH = 300;
@@ -26709,6 +26897,16 @@
 `;
   class Composer extends owl.Component {
       static template = "o-spreadsheet-Composer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerContentFocused: Function,
+          inputStyle: { type: String, optional: true },
+          rect: { type: Object, optional: true },
+          delimitation: { type: Object, optional: true },
+          onComposerUnmounted: { type: Function, optional: true },
+      };
       static components = { TextValueProvider, FunctionDescriptionProvider };
       static defaultProps = {
           inputStyle: "",
@@ -27265,14 +27463,6 @@
           this.autoCompleteState.getHtmlContent = (value) => [{ value }];
       }
   }
-  Composer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerContentFocused: Function,
-      inputStyle: { type: String, optional: true },
-      rect: { type: Object, optional: true },
-      delimitation: { type: Object, optional: true },
-      onComposerUnmounted: { type: Function, optional: true },
-  };
 
   const COMPOSER_BORDER_WIDTH = 3 * 0.4 * window.devicePixelRatio || 1;
   const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
@@ -27304,6 +27494,14 @@
    */
   class GridComposer extends owl.Component {
       static template = "o-spreadsheet-GridComposer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerUnmounted: Function,
+          onComposerContentFocused: Function,
+          gridDims: Object,
+      };
       static components = { Composer };
       gridComposerRef;
       zone;
@@ -27410,22 +27608,22 @@
           });
       }
   }
-  GridComposer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerUnmounted: Function,
-      onComposerContentFocused: Function,
-      gridDims: Object,
-  };
 
-  const CSS$1 = css /* scss */ `
+  css /* scss */ `
   .o-grid-cell-icon {
     width: ${GRID_ICON_EDGE_LENGTH}px;
     height: ${GRID_ICON_EDGE_LENGTH}px;
   }
 `;
   class GridCellIcon extends owl.Component {
-      static style = CSS$1;
       static template = "o-spreadsheet-GridCellIcon";
+      static props = {
+          cellPosition: Object,
+          horizontalAlign: { type: String, optional: true },
+          verticalAlign: { type: String, optional: true },
+          offset: { type: Object, optional: true },
+          slots: Object,
+      };
       get iconStyle() {
           const x = this.getIconHorizontalPosition();
           const y = this.getIconVerticalPosition();
@@ -27474,15 +27672,8 @@
           return !(rect.width === 0 || rect.height === 0);
       }
   }
-  GridCellIcon.props = {
-      cellPosition: Object,
-      horizontalAlign: { type: String, optional: true },
-      verticalAlign: { type: String, optional: true },
-      offset: { type: Object, optional: true },
-      slots: Object,
-  };
 
-  const CSS = css /* scss */ `
+  css /* scss */ `
   .o-filter-icon {
     color: ${FILTERS_COLOR};
     display: flex;
@@ -27497,8 +27688,10 @@
   }
 `;
   class FilterIcon extends owl.Component {
-      static style = CSS;
       static template = "o-spreadsheet-FilterIcon";
+      static props = {
+          cellPosition: Object,
+      };
       onClick() {
           const position = this.props.cellPosition;
           const activePopoverType = this.env.model.getters.getPersistentPopoverTypeAtPosition(position);
@@ -27517,12 +27710,12 @@
           return this.env.model.getters.isFilterActive(this.props.cellPosition);
       }
   }
-  FilterIcon.props = {
-      cellPosition: Object,
-  };
 
   class FilterIconsOverlay extends owl.Component {
       static template = "o-spreadsheet-FilterIconsOverlay";
+      static props = {
+          gridPosition: { type: Object, optional: true },
+      };
       static components = {
           GridCellIcon,
           FilterIcon,
@@ -27536,9 +27729,6 @@
           return headerPositions.map((position) => ({ sheetId, ...position }));
       }
   }
-  FilterIconsOverlay.props = {
-      gridPosition: { type: Object, optional: true },
-  };
 
   const CHECKBOX_WIDTH = 15;
   const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
@@ -27552,6 +27742,9 @@
 `;
   class DataValidationCheckbox extends owl.Component {
       static template = "o-spreadsheet-DataValidationCheckbox";
+      static props = {
+          cellPosition: Object,
+      };
       onCheckboxChange(ev) {
           const newValue = ev.target.checked;
           const { sheetId, col, row } = this.props.cellPosition;
@@ -27566,9 +27759,6 @@
           return !!cell?.isFormula;
       }
   }
-  DataValidationCheckbox.props = {
-      cellPosition: Object,
-  };
 
   const ICON_WIDTH = 13;
   css /* scss */ `
@@ -27591,18 +27781,19 @@
 `;
   class DataValidationListIcon extends owl.Component {
       static template = "o-spreadsheet-DataValidationListIcon";
+      static props = {
+          cellPosition: Object,
+      };
       onClick() {
           const { col, row } = this.props.cellPosition;
           this.env.model.selection.selectCell(col, row);
           this.env.startCellEdition();
       }
   }
-  DataValidationListIcon.props = {
-      cellPosition: Object,
-  };
 
   class DataValidationOverlay extends owl.Component {
       static template = "o-spreadsheet-DataValidationOverlay";
+      static props = {};
       static components = { GridCellIcon, DataValidationCheckbox, DataValidationListIcon };
       get checkBoxCellPositions() {
           return this.env.model.getters.getDataValidationCheckBoxCellPositions();
@@ -27613,7 +27804,6 @@
               : this.env.model.getters.getDataValidationListCellsPositions();
       }
   }
-  DataValidationOverlay.props = {};
 
   /**
    * Transform a figure with coordinates from the model, to coordinates as they are shown on the screen,
@@ -27949,6 +28139,9 @@
    */
   class FiguresContainer extends owl.Component {
       static template = "o-spreadsheet-FiguresContainer";
+      static props = {
+          onFigureDeleted: Function,
+      };
       static components = { FigureComponent };
       dnd = owl.useState({
           draggedFigure: undefined,
@@ -28198,9 +28391,6 @@
           }
       }
   }
-  FiguresContainer.props = {
-      onFigureDeleted: Function,
-  };
 
   css /* scss */ `
   .o-grid-add-rows {
@@ -28219,6 +28409,9 @@
 `;
   class GridAddRowsFooter extends owl.Component {
       static template = "o-spreadsheet-GridAddRowsFooter";
+      static props = {
+          focusGrid: Function,
+      };
       static components = { ValidationMessages };
       inputRef = owl.useRef("inputRef");
       state = owl.useState({
@@ -28285,9 +28478,6 @@
           this.props.focusGrid();
       }
   }
-  GridAddRowsFooter.props = {
-      focusGrid: Function,
-  };
 
   /**
    * Manages an event listener on a ref. Useful for hooks that want to manage
@@ -28443,6 +28633,16 @@
   }
   class GridOverlay extends owl.Component {
       static template = "o-spreadsheet-GridOverlay";
+      static props = {
+          onCellHovered: { type: Function, optional: true },
+          onCellDoubleClicked: { type: Function, optional: true },
+          onCellClicked: { type: Function, optional: true },
+          onCellRightClicked: { type: Function, optional: true },
+          onGridResized: { type: Function, optional: true },
+          onFigureDeleted: { type: Function, optional: true },
+          onGridMoved: Function,
+          gridOverlayDimensions: String,
+      };
       static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
       static defaultProps = {
           onCellHovered: () => { },
@@ -28516,19 +28716,15 @@
           return [colIndex, rowIndex];
       }
   }
-  GridOverlay.props = {
-      onCellHovered: { type: Function, optional: true },
-      onCellDoubleClicked: { type: Function, optional: true },
-      onCellClicked: { type: Function, optional: true },
-      onCellRightClicked: { type: Function, optional: true },
-      onGridResized: { type: Function, optional: true },
-      onFigureDeleted: { type: Function, optional: true },
-      onGridMoved: Function,
-      gridOverlayDimensions: String,
-  };
 
   class GridPopover extends owl.Component {
       static template = "o-spreadsheet-GridPopover";
+      static props = {
+          hoveredCell: Object,
+          onClosePopover: Function,
+          onMouseWheel: Function,
+          gridRect: Object,
+      };
       static components = { Popover };
       zIndex = ComponentsImportance.GridPopover;
       get cellPopover() {
@@ -28548,14 +28744,11 @@
           };
       }
   }
-  GridPopover.props = {
-      hoveredCell: Object,
-      onClosePopover: Function,
-      onMouseWheel: Function,
-      gridRect: Object,
-  };
 
   class AbstractResizer extends owl.Component {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       PADDING = 0;
       MAX_SIZE_MARGIN = 0;
       MIN_ELEMENT_SIZE = 0;
@@ -28812,10 +29005,10 @@
     }
   }
 `;
-  AbstractResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class ColResizer extends AbstractResizer {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-ColResizer";
       colResizerRef;
       setup() {
@@ -28977,10 +29170,10 @@
     }
   }
 `;
-  ColResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class RowResizer extends AbstractResizer {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-RowResizer";
       setup() {
           super.setup();
@@ -29101,19 +29294,16 @@
     }
   }
 `;
-  RowResizer.props = {
-      onOpenContextMenu: Function,
-  };
   class HeadersOverlay extends owl.Component {
+      static props = {
+          onOpenContextMenu: Function,
+      };
       static template = "o-spreadsheet-HeadersOverlay";
       static components = { ColResizer, RowResizer };
       selectAll() {
           this.env.model.selection.selectAll();
       }
   }
-  HeadersOverlay.props = {
-      onOpenContextMenu: Function,
-  };
 
   function useGridDrawing(refName, model, canvasSize) {
       const canvasRef = owl.useRef(refName);
@@ -29171,6 +29361,12 @@
 `;
   class Border extends owl.Component {
       static template = "o-spreadsheet-Border";
+      static props = {
+          zone: Object,
+          orientation: String,
+          isMoving: Boolean,
+          onMoveHighlight: Function,
+      };
       get style() {
           const isTop = ["n", "w", "e"].includes(this.props.orientation);
           const isLeft = ["n", "w", "s"].includes(this.props.orientation);
@@ -29199,12 +29395,6 @@
           this.props.onMoveHighlight(ev.clientX, ev.clientY);
       }
   }
-  Border.props = {
-      zone: Object,
-      orientation: String,
-      isMoving: Boolean,
-      onMoveHighlight: Function,
-  };
 
   css /* scss */ `
   .o-corner {
@@ -29231,6 +29421,13 @@
 `;
   class Corner extends owl.Component {
       static template = "o-spreadsheet-Corner";
+      static props = {
+          zone: Object,
+          color: String,
+          orientation: String,
+          isResizing: Boolean,
+          onResizeHighlight: Function,
+      };
       isTop = this.props.orientation[0] === "n";
       isLeft = this.props.orientation[1] === "w";
       get style() {
@@ -29259,13 +29456,6 @@
           this.props.onResizeHighlight(this.isLeft, this.isTop);
       }
   }
-  Corner.props = {
-      zone: Object,
-      color: String,
-      orientation: String,
-      isResizing: Boolean,
-      onResizeHighlight: Function,
-  };
 
   css /*SCSS*/ `
   .o-highlight {
@@ -29274,6 +29464,10 @@
 `;
   class Highlight extends owl.Component {
       static template = "o-spreadsheet-Highlight";
+      static props = {
+          zone: Object,
+          color: String,
+      };
       static components = {
           Corner,
           Border,
@@ -29357,10 +29551,6 @@
           dragAndDropBeyondTheViewport(this.env, mouseMove, mouseUp);
       }
   }
-  Highlight.props = {
-      zone: Object,
-      color: String,
-  };
 
   let ScrollBar$1 = class ScrollBar {
       direction;
@@ -29400,6 +29590,14 @@
   }
 `;
   class ScrollBar extends owl.Component {
+      static props = {
+          width: { type: Number, optional: true },
+          height: { type: Number, optional: true },
+          direction: String,
+          position: Object,
+          offset: Number,
+          onScroll: Function,
+      };
       static template = owl.xml /*xml*/ `
     <div
         t-attf-class="o-scrollbar {{props.direction}}"
@@ -29443,16 +29641,11 @@
           }
       }
   }
-  ScrollBar.props = {
-      width: { type: Number, optional: true },
-      height: { type: Number, optional: true },
-      direction: String,
-      position: Object,
-      offset: Number,
-      onScroll: Function,
-  };
 
   class HorizontalScrollBar extends owl.Component {
+      static props = {
+          leftOffset: { type: Number, optional: true },
+      };
       static components = { ScrollBar };
       static template = owl.xml /*xml*/ `
       <ScrollBar
@@ -29493,11 +29686,11 @@
           });
       }
   }
-  HorizontalScrollBar.props = {
-      leftOffset: { type: Number, optional: true },
-  };
 
   class VerticalScrollBar extends owl.Component {
+      static props = {
+          topOffset: { type: Number, optional: true },
+      };
       static components = { ScrollBar };
       static template = owl.xml /*xml*/ `
     <ScrollBar
@@ -29538,9 +29731,6 @@
           });
       }
   }
-  VerticalScrollBar.props = {
-      topOffset: { type: Number, optional: true },
-  };
 
   const registries$1 = {
       ROW: rowMenuRegistry,
@@ -29554,6 +29744,13 @@
   // -----------------------------------------------------------------------------
   class Grid extends owl.Component {
       static template = "o-spreadsheet-Grid";
+      static props = {
+          sidePanelIsOpen: Boolean,
+          exposeFocus: Function,
+          focusComposer: String,
+          onComposerContentFocused: Function,
+          onGridComposerCellFocused: Function,
+      };
       static components = {
           GridComposer,
           GridOverlay,
@@ -30158,13 +30355,6 @@
           }
       }
   }
-  Grid.props = {
-      sidePanelIsOpen: Boolean,
-      exposeFocus: Function,
-      focusComposer: String,
-      onComposerContentFocused: Function,
-      onGridComposerCellFocused: Function,
-  };
 
   /**
    * Represent a raw XML string
@@ -31585,20 +31775,26 @@
           .filter(isDefined$1);
   }
   function convertFigure(figure, id, sheetData) {
-      const x1 = getColPosition(figure.anchors[0].col, sheetData) +
-          convertEMUToDotValue(figure.anchors[0].colOffset);
-      const x2 = getColPosition(figure.anchors[1].col, sheetData) +
-          convertEMUToDotValue(figure.anchors[1].colOffset);
-      const y1 = getRowPosition(figure.anchors[0].row, sheetData) +
-          convertEMUToDotValue(figure.anchors[0].rowOffset);
-      const y2 = getRowPosition(figure.anchors[1].row, sheetData) +
-          convertEMUToDotValue(figure.anchors[1].rowOffset);
+      let x1, y1;
+      let height, width;
+      if (figure.anchors.length === 1) {
+          // one cell anchor
+          ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+          width = convertEMUToDotValue(figure.figureSize.cx);
+          height = convertEMUToDotValue(figure.figureSize.cy);
+      }
+      else {
+          ({ x: x1, y: y1 } = getPositionFromAnchor(figure.anchors[0], sheetData));
+          const { x: x2, y: y2 } = getPositionFromAnchor(figure.anchors[1], sheetData);
+          width = x2 - x1;
+          height = y2 - y1;
+      }
       const figureData = { id, x: x1, y: y1 };
       if (isChartData(figure.data)) {
           return {
               ...figureData,
-              width: x2 - x1,
-              height: y2 - y1,
+              width,
+              height,
               tag: "chart",
               data: convertChartData(figure.data),
           };
@@ -31664,6 +31860,12 @@
       const dataXC = zoneToXc(zone);
       return getFullReference(sheetName, dataXC);
   }
+  function getPositionFromAnchor(anchor, sheetData) {
+      return {
+          x: getColPosition(anchor.col, sheetData) + convertEMUToDotValue(anchor.colOffset),
+          y: getRowPosition(anchor.row, sheetData) + convertEMUToDotValue(anchor.rowOffset),
+      };
+  }
 
   /**
    * Match external reference (ex. '[1]Sheet 3'!$B$4)
@@ -32787,27 +32989,50 @@
       }
   }
 
+  const ONE_CELL_ANCHOR = "oneCellAnchor";
+  const TWO_CELL_ANCHOR = "twoCellAnchor";
   class XlsxFigureExtractor extends XlsxBaseExtractor {
       extractFigures() {
           return this.mapOnElements({ parent: this.rootFile.file.xml, query: "xdr:wsDr", children: true }, (figureElement) => {
               const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
-              if (anchorType !== "twoCellAnchor") {
-                  throw new Error("Only twoCellAnchor are supported for xlsx drawings.");
-              }
+              const anchors = this.extractFigureAnchorsByType(figureElement, anchorType);
               const chartElement = this.querySelector(figureElement, "c:chart");
               const imageElement = this.querySelector(figureElement, "a:blip");
               if (!chartElement && !imageElement) {
                   throw new Error("Only chart and image figures are currently supported.");
               }
               return {
-                  anchors: [
-                      this.extractFigureAnchor("xdr:from", figureElement),
-                      this.extractFigureAnchor("xdr:to", figureElement),
-                  ],
+                  anchors,
                   data: chartElement ? this.extractChart(chartElement) : this.extractImage(figureElement),
+                  figureSize: anchorType === ONE_CELL_ANCHOR
+                      ? this.extractFigureSizeFromSizeTag(figureElement, "xdr:ext")
+                      : undefined,
               };
           });
       }
+      extractFigureAnchorsByType(figureElement, anchorType) {
+          switch (anchorType) {
+              case ONE_CELL_ANCHOR:
+                  return [this.extractFigureAnchor("xdr:from", figureElement)];
+              case TWO_CELL_ANCHOR:
+                  return [
+                      this.extractFigureAnchor("xdr:from", figureElement),
+                      this.extractFigureAnchor("xdr:to", figureElement),
+                  ];
+              default:
+                  throw new Error(`${anchorType} is not supported for xlsx drawings. `);
+          }
+      }
+      extractFigureSizeFromSizeTag(figureElement, sizeTag) {
+          const sizeElement = this.querySelector(figureElement, sizeTag);
+          if (!sizeElement) {
+              throw new Error(`Missing size element '${sizeTag}'`);
+          }
+          return {
+              cx: this.extractAttr(sizeElement, "cx", { required: true }).asNum(),
+              cy: this.extractAttr(sizeElement, "cy", { required: true }).asNum(),
+          };
+      }
       extractFigureAnchor(anchorTag, figureElement) {
           const anchor = this.querySelector(figureElement, anchorTag);
           if (!anchor) {
@@ -32836,15 +33061,15 @@
           if (!image) {
               throw new Error("Unable to extract image");
           }
-          const shapePropertyElement = this.querySelector(figureElement, "a:xfrm");
           const extension = image.fileName.split(".").at(-1);
+          const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
+          const sizeElement = anchorType === TWO_CELL_ANCHOR ? this.querySelector(figureElement, "a:xfrm") : figureElement;
+          const sizeTag = anchorType === TWO_CELL_ANCHOR ? "a:ext" : "xdr:ext";
+          const size = this.extractFigureSizeFromSizeTag(sizeElement, sizeTag);
           return {
               imageSrc: image.imageSrc,
               mimetype: extension ? IMAGE_EXTENSION_TO_MIMETYPE_MAPPING[extension] : undefined,
-              size: {
-                  cx: this.extractChildAttr(shapePropertyElement, "a:ext", "cx", { required: true }).asNum(),
-                  cy: this.extractChildAttr(shapePropertyElement, "a:ext", "cy", { required: true }).asNum(),
-              },
+              size,
           };
       }
   }
@@ -50819,6 +51044,20 @@
 `;
   class RippleEffect extends owl.Component {
       static template = "o-spreadsheet-RippleEffect";
+      static props = {
+          x: String,
+          y: String,
+          color: String,
+          opacity: Number,
+          duration: Number,
+          width: Number,
+          height: Number,
+          offsetY: Number,
+          offsetX: Number,
+          allowOverflow: Boolean,
+          onAnimationEnd: Function,
+          style: String,
+      };
       rippleRef = owl.useRef("ripple");
       setup() {
           let animation = undefined;
@@ -50854,22 +51093,23 @@
           });
       }
   }
-  RippleEffect.props = {
-      x: String,
-      y: String,
-      color: String,
-      opacity: Number,
-      duration: Number,
-      width: Number,
-      height: Number,
-      offsetY: Number,
-      offsetX: Number,
-      allowOverflow: Boolean,
-      onAnimationEnd: Function,
-      style: String,
-  };
   class Ripple extends owl.Component {
       static template = "o-spreadsheet-Ripple";
+      static props = {
+          color: { type: String, optional: true },
+          opacity: { type: Number, optional: true },
+          duration: { type: Number, optional: true },
+          ignoreClickPosition: { type: Boolean, optional: true },
+          width: { type: Number, optional: true },
+          height: { type: Number, optional: true },
+          offsetY: { type: Number, optional: true },
+          offsetX: { type: Number, optional: true },
+          allowOverflow: { type: Boolean, optional: true },
+          enabled: { type: Boolean, optional: true },
+          onAnimationEnd: { type: Function, optional: true },
+          slots: Object,
+          class: { type: String, optional: true },
+      };
       static components = { RippleEffect };
       static defaultProps = {
           color: "#aaaaaa",
@@ -50955,21 +51195,6 @@
           };
       }
   }
-  Ripple.props = {
-      color: { type: String, optional: true },
-      opacity: { type: Number, optional: true },
-      duration: { type: Number, optional: true },
-      ignoreClickPosition: { type: Boolean, optional: true },
-      width: { type: Number, optional: true },
-      height: { type: Number, optional: true },
-      offsetY: { type: Number, optional: true },
-      offsetX: { type: Number, optional: true },
-      allowOverflow: { type: Boolean, optional: true },
-      enabled: { type: Boolean, optional: true },
-      onAnimationEnd: { type: Function, optional: true },
-      slots: Object,
-      class: { type: String, optional: true },
-  };
 
   function interactiveRenameSheet(env, sheetId, name, errorCallback) {
       const result = env.model.dispatch("RENAME_SHEET", { sheetId, name });
@@ -51027,6 +51252,12 @@
 `;
   class BottomBarSheet extends owl.Component {
       static template = "o-spreadsheet-BottomBarSheet";
+      static props = {
+          sheetId: String,
+          openContextMenu: Function,
+          style: { type: String, optional: true },
+          onMouseDown: { type: Function, optional: true },
+      };
       static components = { Ripple };
       static defaultProps = {
           onMouseDown: () => { },
@@ -51148,12 +51379,6 @@
           return this.env.model.getters.getSheetName(this.props.sheetId);
       }
   }
-  BottomBarSheet.props = {
-      sheetId: String,
-      openContextMenu: Function,
-      style: { type: String, optional: true },
-      onMouseDown: { type: Function, optional: true },
-  };
 
   // -----------------------------------------------------------------------------
   // SpreadSheet
@@ -51171,6 +51396,10 @@
 `;
   class BottomBarStatistic extends owl.Component {
       static template = "o-spreadsheet-BottomBarStatisic";
+      static props = {
+          openContextMenu: Function,
+          closeContextMenu: Function,
+      };
       static components = { Ripple };
       selectedStatisticFn = "";
       statisticFnResults = {};
@@ -51217,10 +51446,6 @@
           return fnName + ": " + (fnValue !== undefined ? formatValue(fnValue, { locale }) : "__");
       }
   }
-  BottomBarStatistic.props = {
-      openContextMenu: Function,
-      closeContextMenu: Function,
-  };
 
   // -----------------------------------------------------------------------------
   // SpreadSheet
@@ -51271,6 +51496,9 @@
 `;
   class BottomBar extends owl.Component {
       static template = "o-spreadsheet-BottomBar";
+      static props = {
+          onClick: Function,
+      };
       static components = { Menu, Ripple, BottomBarSheet, BottomBarStatistic };
       bottomBarRef = owl.useRef("bottomBar");
       sheetListRef = owl.useRef("sheetList");
@@ -51456,9 +51684,6 @@
           return this.sheetListRef.el.scrollWidth - this.sheetListRef.el.clientWidth;
       }
   }
-  BottomBar.props = {
-      onClick: Function,
-  };
 
   css /* scss */ `
   .o-dashboard-clickable-cell {
@@ -51469,6 +51694,7 @@
   let tKey = 1;
   class SpreadsheetDashboard extends owl.Component {
       static template = "o-spreadsheet-SpreadsheetDashboard";
+      static props = {};
       static components = {
           GridOverlay,
           GridPopover,
@@ -51587,7 +51813,6 @@
           return { ...this.canvasPosition, ...this.env.model.getters.getSheetViewDimensionWithHeaders() };
       }
   }
-  SpreadsheetDashboard.props = {};
 
   css /* scss */ `
   .o-header-group {
@@ -51615,6 +51840,11 @@
 `;
   class AbstractHeaderGroup extends owl.Component {
       static template = "o-spreadsheet-HeaderGroup";
+      static props = {
+          group: Object,
+          layerOffset: Number,
+          openContextMenu: Function,
+      };
       toggleGroup() {
           const sheetId = this.env.model.getters.getActiveSheetId();
           const { start, end } = this.props.group;
@@ -51651,11 +51881,6 @@
           this.props.openContextMenu(position, menuItems);
       }
   }
-  AbstractHeaderGroup.props = {
-      group: Object,
-      layerOffset: Number,
-      openContextMenu: Function,
-  };
   class RowGroup extends AbstractHeaderGroup {
       dimension = "ROW";
       get groupBorderStyle() {
@@ -51786,6 +52011,10 @@
 `;
   class HeaderGroupContainer extends owl.Component {
       static template = "o-spreadsheet-HeaderGroupContainer";
+      static props = {
+          dimension: String,
+          layers: Array,
+      };
       static components = { RowGroup, ColGroup, Menu };
       menu = owl.useState({ isOpen: false, position: null, menuItems: [] });
       getLayerOffset(layerIndex) {
@@ -51848,10 +52077,6 @@
           }
       }
   }
-  HeaderGroupContainer.props = {
-      dimension: String,
-      layers: Array,
-  };
 
   css /* scss */ `
   .o-sidePanel {
@@ -51962,14 +52187,6 @@
       text-align: left;
     }
 
-    .o-checkbox {
-      display: flex;
-      justify-items: center;
-      input {
-        margin-right: 5px;
-      }
-    }
-
     .o-inflection {
       table {
         table-layout: fixed;
@@ -52010,6 +52227,11 @@
 `;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
+      static props = {
+          component: String,
+          panelProps: { type: Object, optional: true },
+          onCloseSidePanel: Function,
+      };
       state;
       setup() {
           this.state = owl.useState({
@@ -52023,11 +52245,6 @@
               : this.state.panel.title;
       }
   }
-  SidePanel.props = {
-      component: String,
-      panelProps: { type: Object, optional: true },
-      onCloseSidePanel: Function,
-  };
 
   css /* scss */ `
   .o-menu-item-button {
@@ -52045,6 +52262,13 @@
 `;
   class ActionButton extends owl.Component {
       static template = "o-spreadsheet-ActionButton";
+      static props = {
+          action: Object,
+          hasTriangleDownIcon: { type: Boolean, optional: true },
+          selectedColor: { type: String, optional: true },
+          class: { type: String, optional: true },
+          onClick: { type: Function, optional: true },
+      };
       actionButton = createAction(this.props.action);
       setup() {
           owl.onWillUpdateProps((nextProps) => {
@@ -52087,13 +52311,6 @@
           return "";
       }
   }
-  ActionButton.props = {
-      action: Object,
-      hasTriangleDownIcon: { type: Boolean, optional: true },
-      selectedColor: { type: String, optional: true },
-      class: { type: String, optional: true },
-      onClick: { type: Function, optional: true },
-  };
 
   /**
    * List the available borders positions and the corresponding icons.
@@ -52190,6 +52407,17 @@
 `;
   class BorderEditor extends owl.Component {
       static template = "o-spreadsheet-BorderEditor";
+      static props = {
+          class: { type: String, optional: true },
+          currentBorderColor: { type: String, optional: false },
+          currentBorderStyle: { type: String, optional: false },
+          currentBorderPosition: { type: String, optional: true },
+          onBorderColorPicked: Function,
+          onBorderStylePicked: Function,
+          onBorderPositionPicked: Function,
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+      };
       static components = { ColorPickerWidget, Popover };
       BORDER_POSITIONS = BORDER_POSITIONS;
       lineStyleButtonRef = owl.useRef("lineStyleButton");
@@ -52245,20 +52473,16 @@
           };
       }
   }
-  BorderEditor.props = {
-      class: { type: String, optional: true },
-      currentBorderColor: { type: String, optional: false },
-      currentBorderStyle: { type: String, optional: false },
-      currentBorderPosition: { type: String, optional: true },
-      onBorderColorPicked: Function,
-      onBorderStylePicked: Function,
-      onBorderPositionPicked: Function,
-      maxHeight: { type: Number, optional: true },
-      anchorRect: Object,
-  };
 
   class BorderEditorWidget extends owl.Component {
       static template = "o-spreadsheet-BorderEditorWidget";
+      static props = {
+          toggleBorderEditor: Function,
+          showBorderEditor: Boolean,
+          disabled: { type: Boolean, optional: true },
+          dropdownMaxHeight: { type: Number, optional: true },
+          class: { type: String, optional: true },
+      };
       static components = { BorderEditor };
       borderEditorButtonRef = owl.useRef("borderEditorButton");
       state = owl.useState({
@@ -52303,13 +52527,6 @@
           });
       }
   }
-  BorderEditorWidget.props = {
-      toggleBorderEditor: Function,
-      showBorderEditor: Boolean,
-      disabled: { type: Boolean, optional: true },
-      dropdownMaxHeight: { type: Number, optional: true },
-      class: { type: String, optional: true },
-  };
 
   const COMPOSER_MAX_HEIGHT = 100;
   /* svg free of use from https://uxwing.com/formula-fx-icon/ */
@@ -52338,6 +52555,12 @@
 `;
   class TopBarComposer extends owl.Component {
       static template = "o-spreadsheet-TopBarComposer";
+      static props = {
+          focus: {
+              validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+          },
+          onComposerContentFocused: Function,
+      };
       static components = { Composer };
       get composerStyle() {
           const style = {
@@ -52360,10 +52583,6 @@
           });
       }
   }
-  TopBarComposer.props = {
-      focus: { validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value) },
-      onComposerContentFocused: Function,
-  };
 
   css /* scss */ `
   .o-font-size-editor {
@@ -52392,6 +52611,11 @@
 `;
   class FontSizeEditor extends owl.Component {
       static template = "o-spreadsheet-FontSizeEditor";
+      static props = {
+          onToggle: Function,
+          dropdownStyle: String,
+          class: String,
+      };
       static components = {};
       fontSizes = FONT_SIZES;
       dropdown = owl.useState({ isOpen: false });
@@ -52448,14 +52672,12 @@
           }
       }
   }
-  FontSizeEditor.props = {
-      onToggle: Function,
-      dropdownStyle: String,
-      class: String,
-  };
 
   class PaintFormatButton extends owl.Component {
       static template = "o-spreadsheet-PaintFormatButton";
+      static props = {
+          class: { type: String, optional: true },
+      };
       get isActive() {
           return this.env.model.getters.isPaintingFormat();
       }
@@ -52471,9 +52693,6 @@
           }
       }
   }
-  PaintFormatButton.props = {
-      class: { type: String, optional: true },
-  };
 
   // -----------------------------------------------------------------------------
   // TopBar
@@ -52566,6 +52785,12 @@
 `;
   class TopBar extends owl.Component {
       static template = "o-spreadsheet-TopBar";
+      static props = {
+          onClick: Function,
+          focusComposer: String,
+          onComposerContentFocused: Function,
+          dropdownMaxHeight: Number,
+      };
       get dropdownStyle() {
           return `max-height:${this.props.dropdownMaxHeight}px`;
       }
@@ -52682,12 +52907,6 @@
           this.onClick();
       }
   }
-  TopBar.props = {
-      onClick: Function,
-      focusComposer: String,
-      onComposerContentFocused: Function,
-      dropdownMaxHeight: Number,
-  };
 
   function instantiateClipboard() {
       return new WebClipboardWrapper(navigator.clipboard);
@@ -52920,6 +53139,9 @@
 `;
   class Spreadsheet extends owl.Component {
       static template = "o-spreadsheet-Spreadsheet";
+      static props = {
+          model: Object,
+      };
       static components = {
           TopBar,
           Grid,
@@ -53132,9 +53354,6 @@
           return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
       }
   }
-  Spreadsheet.props = {
-      model: Object,
-  };
 
   class LocalTransportService {
       listeners = [];
@@ -56816,9 +57035,9 @@
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.1.0-alpha.6";
-  __info__.date = "2024-01-04T12:22:45.921Z";
-  __info__.hash = "56dbdc9";
+  __info__.version = "17.1.0-alpha.7";
+  __info__.date = "2024-01-12T13:45:00.505Z";
+  __info__.hash = "cbce1ed";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);