@odoo/o-spreadsheet 19.1.0-alpha.1 → 19.1.0-alpha.11

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 19.1.0-alpha.1
- @date 2025-09-12T13:34:33.243Z
- @hash d3e4e7b
+ @version 19.1.0-alpha.11
+ @date 2025-11-03T12:35:22.290Z
+ @hash d9230f3
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -153,6 +153,21 @@
     </Popover>
   </t>
 
+  <div t-name="o-spreadsheet-TopBarZoom" t-ref="buttonRef" t-on-click.stop="">
+    <NumberEditor
+      currentValue="currentFontSize"
+      onValueChange.bind="this.setZoom"
+      class="props.class"
+      onToggle.bind="this.toggle"
+      onFocusInput.bind="this.onFocusInput"
+      valueIcon="'%'"
+      min="25"
+      max="300"
+      valueList="valueList"
+      title.translate="Zoom"
+    />
+  </div>
+
   <div t-name="o-spreadsheet-NumberFormatsTool" t-ref="buttonRef" t-on-click.stop="">
     <ActionButton
       action="formatNumberMenuItemSpec"
@@ -215,22 +230,20 @@
     </div>
   </t>
 
-  <div t-name="o-spreadsheet-TextInput" class="w-100">
+  <t t-name="o-spreadsheet-TextInput">
     <input
-      t-ref="input"
-      class="os-input w-100"
       type="text"
+      t-ref="{{refName}}"
       t-att-class="inputClass"
       t-att-id="props.id"
       t-att-placeholder="props.placeholder"
-      t-att-value="props.value"
       t-on-change="save"
       t-on-blur="save"
       t-on-pointerdown="onMouseDown"
       t-on-pointerup="onMouseUp"
       t-on-keydown="onKeyDown"
     />
-  </div>
+  </t>
 
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
@@ -361,7 +374,7 @@
       t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard getGridSize.bind="getGridSize"/>
-        <FullScreenChart/>
+        <FullScreenFigure/>
       </t>
       <t t-else="">
         <div class="o-spreadsheet-topbar-wrapper o-two-columns">
@@ -398,9 +411,14 @@
         <RibbonMenu onClose="() => this.menuState.isOpen=false"/>
       </t>
       <t t-else="">
-        <div class="o-small-composer px-2 py-2">
+        <div class="o-small-composer px-2 py-2 position-relative">
           <div class="w-100" t-ref="bottombarComposer">
             <Composer t-props="composerProps"/>
+            <span
+              t-if="showFxIcon"
+              class="position-absolute top-50 translate-middle-y ps-2 pe-none">
+              <t t-call="o-spreadsheet-Icon.FX_SVG"/>
+            </span>
           </div>
           <span
             class="align-items-center d-flex justify-content-center o-selection-button"
@@ -448,7 +466,10 @@
         </div>
         <span class="d-flex align-items-center" t-esc="state.title"/>
       </div>
-      <div class="o-ribbon-menu-wrapper overflow-auto">
+      <div
+        class="o-ribbon-menu-wrapper overflow-auto"
+        t-ref="container"
+        t-on-scroll="updateShadows">
         <Menu t-props="menuProps"/>
       </div>
     </div>
@@ -506,12 +527,12 @@
                 value="tableConfig.numberOfHeaders > 0"
                 onChange.bind="this.updateHasHeaders"
               />
-              <input
+              <NumberInput
                 t-if="tableConfig.numberOfHeaders > 0"
-                t-att-value="tableConfig.numberOfHeaders"
-                type="number"
-                class="o-table-n-of-headers ms-2 o-input"
-                t-on-change="onChangeNumberOfHeaders"
+                value="tableConfig.numberOfHeaders"
+                class="'o-table-n-of-headers ms-2'"
+                min="0"
+                onChange.bind="onChangeNumberOfHeaders"
               />
             </div>
             <Checkbox
@@ -856,12 +877,43 @@
           <CogWheelMenu items="cogWheelMenuItems"/>
         </div>
       </t>
-      <TextInput class="'os-pivot-title'" value="name" onChange.bind="onNameChanged"/>
+      <TextInput
+        class="'os-pivot-title'"
+        value="name"
+        onChange.bind="onNameChanged"
+        selectContentOnFocus="true"
+      />
     </Section>
   </t>
 
   <t t-name="o-spreadsheet-PivotSidePanel">
-    <t t-component="sidePanelEditor" t-props="props"/>
+    <div class="d-flex flex-column h-100">
+      <div class="o-panel d-flex">
+        <div
+          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          t-att-class="state.panel !== 'configuration' ? 'inactive' : ''"
+          t-on-click="switchPanel.bind(this, 'configuration')">
+          <i class="fa fa-sliders me-1"/>
+          Configuration
+        </div>
+        <div
+          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          t-att-class="state.panel !== 'design' ? 'inactive' : ''"
+          t-on-click="switchPanel.bind(this, 'design')">
+          <i class="fa fa-paint-brush me-1"/>
+          Design
+        </div>
+      </div>
+
+      <div class="o-panel-content overflow-y-auto h-100" t-ref="panelContent">
+        <div class="h-100" t-att-class="{ 'd-none': state.panel !== 'configuration' }">
+          <t t-component="sidePanelEditor" t-props="props"/>
+        </div>
+        <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
+          <PivotDesignPanel pivotId="props.pivotId"/>
+        </div>
+      </div>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
@@ -913,6 +965,69 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotDesignPanel">
+    <Section class="'o-pivot-design'" title.translate="Display options">
+      <div>
+        <div class="container-fluid p-0 pt-2">
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Max rows:</div>
+            <div class="col-6 d-flex align-items-center">
+              <input
+                t-att-value="pivotStyle.numberOfRows ?? ''"
+                type="number"
+                class="o-pivot-n-of-rows o-input"
+                placeholder="e.g. 10"
+                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfRows', ev.target.valueAsNumber)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Max columns:</div>
+            <div class="col-6 d-flex align-items-center">
+              <input
+                t-att-value="pivotStyle.numberOfColumns ?? ''"
+                type="number"
+                class="o-pivot-n-of-columns o-input"
+                placeholder="e.g. 5"
+                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfColumns', ev.target.valueAsNumber)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show totals:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayTotals'"
+                value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
+                onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show column titles:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayColumnHeaders'"
+                value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
+                onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
+              />
+            </div>
+          </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Show measure titles:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'displayMeasuresRow'"
+                value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
+                onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
     <Section title.translate="Show measure as:">
       <select
@@ -1218,6 +1333,7 @@
             value="props.dimension.displayName"
             onChange.bind="updateName"
             class="'o-fw-bold'"
+            selectContentOnFocus="true"
           />
           <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
         </div>
@@ -1302,6 +1418,7 @@
               <TextInput
                 value="group.name"
                 onChange="(newName) => this.onRenameGroup(group_index, newName)"
+                selectContentOnFocus="true"
               />
               <i
                 class="o-button-icon ps-3 fa fa-trash"
@@ -1505,6 +1622,7 @@
             t-key="state.rule.criterion.type"
             criterion="state.rule.criterion"
             onCriterionChanged.bind="onCriterionChanged"
+            autofocus="state.isTypeUpdated"
           />
         </div>
       </Section>
@@ -1615,6 +1733,7 @@
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
       required="true"
       hasSingleRange="true"
+      autofocus="props.autofocus"
     />
     <t t-foreach="values" t-as="value" t-key="value_index">
       <div class="o-dv-list-values p-1 d-flex align-items-center">
@@ -1684,6 +1803,7 @@
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 
@@ -1693,6 +1813,7 @@
       onValueChanged.bind="onFirstValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
     <CriterionInput
       value="props.criterion.values[1]"
@@ -1720,6 +1841,7 @@
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 
@@ -2176,6 +2298,7 @@
         t-key="state.rules.cellIs.operator"
         criterion="genericCriterion"
         onCriterionChanged.bind="onRuleValuesChanged"
+        autofocus="this.state.hasEditedCf"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
@@ -2382,6 +2505,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -2421,7 +2547,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2560,6 +2686,9 @@
             hasVerticalAlign="true"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </SidePanelCollapsible>
   </t>
@@ -2620,6 +2749,9 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -2671,7 +2803,7 @@
     <t t-set="color_down">Color Down</t>
     <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2785,7 +2917,7 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2800,7 +2932,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
         <PieHoleSize
@@ -2814,19 +2946,19 @@
 
   <t t-name="o-spreadsheet-ChartPanel">
     <div class="o-chart d-flex flex-column h-100" t-if="chartId">
-      <div class="o-panel">
+      <div class="o-panel d-flex">
         <div
-          class="o-panel-element o-panel-configuration"
+          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders"/>
+          <i class="fa fa-sliders me-1"/>
           Configuration
         </div>
         <div
-          class="o-panel-element o-panel-design"
+          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'design' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush"/>
+          <i class="fa fa-paint-brush me-1"/>
           Design
         </div>
       </div>
@@ -2875,7 +3007,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -2984,7 +3116,7 @@
             <option value="left">Bottom left</option>
           </select>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3077,7 +3209,7 @@
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3223,7 +3355,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3263,7 +3395,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
@@ -3813,11 +3945,11 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'trailingMovingAverage'">
                   <span class="o-section-subtitle">Window</span>
-                  <input
-                    t-att-value="trend.window || this.defaultWindowSize"
-                    type="number"
-                    class="w-100 o-input trend-window-input"
-                    t-on-change="(ev) => this.onChangeMovingAverageWindow(index, ev)"
+                  <NumberInput
+                    value="trend.window || this.defaultWindowSize"
+                    class="'w-100 trend-window-input'"
+                    min="2"
+                    onChange="(value) => this.onChangeMovingAverageWindow(index, value)"
                   />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
@@ -3890,13 +4022,12 @@
   <t t-name="o-spreadsheet.PieHoleSize">
     <Section class="'pt-0'" title.translate="Center radius">
       <div class="d-flex flex-row">
-        <input
-          t-att-value="props.value"
-          type="number"
-          class="o-input o-pie-hole-size-input"
+        <NumberInput
+          value="props.value"
+          class="'o-pie-hole-size-input'"
           min="0"
           max="95"
-          t-on-change="(ev) => debouncedOnChange(ev.target.value)"
+          onChange.bind="onChange"
         />
         %
       </div>
@@ -3943,7 +4074,8 @@
   <t t-name="o-spreadsheet-ChartHumanizeNumbers">
     <Checkbox
       name="'humanizeNumbers'"
-      label.translate="Make numbers human-readable"
+      label.translate="Use compact format"
+      title="title"
       value="props.definition.humanize ?? true"
       onChange="(humanize) => props.updateChart(this.props.chartId, { humanize })"
     />
@@ -4043,12 +4175,11 @@
 
   <t t-name="o-spreadsheet.ChartTitle">
     <Section class="'o-chart-title'" title="props.name">
-      <input
-        type="text"
-        class="o-input"
-        t-att-value="props.title"
-        t-on-change="updateTitle"
-        t-att-placeholder="props.placeholder"
+      <TextInput
+        value="props.title"
+        onChange.bind="updateTitle"
+        placeholder="props.placeholder"
+        alwaysShowBorder="true"
       />
       <TextStyler
         style="props.style"
@@ -4118,6 +4249,7 @@
           onChange.bind="updateTitleText"
           placeholder.translate="Add a Title"
           alwaysShowBorder="true"
+          selectContentOnFocus="true"
         />
         <TextStyler
           style="title ?? {}"
@@ -4151,10 +4283,11 @@
               <TextInput
                 value="getItemTitle(item)"
                 onChange="(newName) => this.renameCarouselItem(item, newName)"
+                selectContentOnFocus="true"
               />
             </div>
             <div class="ms-auto"/>
-            <div class="flex-shrink-0 d-flex align-self-start me-1">
+            <div class="flex-shrink-0 d-flex me-1">
               <CogWheelMenu items="getCogWheelMenuItems(item)"/>
             </div>
           </div>
@@ -4268,7 +4401,6 @@
         t-att-class="props.class"
         t-ref="popover"
         t-on-wheel="props.onMouseWheel"
-        t-att-style="popoverStyle"
         t-on-click.stop="">
         <div class="o-popover-content" t-ref="popoverContent">
           <t t-slot="default"/>
@@ -4340,6 +4472,60 @@
     </span>
   </t>
 
+  <t t-name="o-spreadsheet-NumberInput">
+    <input
+      type="number"
+      t-ref="{{refName}}"
+      t-att-class="inputClass"
+      t-att-id="props.id"
+      t-att-placeholder="props.placeholder"
+      t-on-change="save"
+      t-on-blur="save"
+      t-on-pointerdown="onMouseDown"
+      t-on-pointerup="onMouseUp"
+      t-on-keydown="onKeyDown"
+      t-att-min="props.min"
+      t-att-max="props.max"
+    />
+  </t>
+
+  <t t-name="o-spreadsheet-NumberEditor">
+    <div class="o-dropdown" t-ref="NumberEditor">
+      <div
+        class="o-number-editor d-flex align-items-center"
+        t-att-class="props.class"
+        t-att-title="props.title"
+        t-on-click="this.toggleList">
+        <input
+          type="number"
+          t-att-min="props.min"
+          t-att-max="props.max"
+          class="o-font-size o-number-input bg-transparent border-0"
+          t-on-keydown="onInputKeydown"
+          t-on-wheel.prevent.stop=""
+          t-on-click.stop="props.onFocusInput"
+          t-on-focus.stop="onInputFocused"
+          t-on-change="setValueFromInput"
+          t-ref="inputNumber"
+        />
+        <t t-esc="props.valueIcon"/>
+        <span>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+        </span>
+      </div>
+      <Popover t-if="dropdown.isOpen" t-props="popoverProps">
+        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="numberList">
+          <t t-foreach="props.valueList" t-as="value" t-key="value">
+            <div t-att-data-size="value" t-on-click="() => this.setValueFromList(value)">
+              <t t-esc="value"/>
+              <t t-esc="props.valueIcon"/>
+            </div>
+          </t>
+        </div>
+      </Popover>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Menu-Popover">
     <Popover t-if="props.menuItems" t-props="popoverProps">
       <div t-ref="menu" class="o-menu-wrapper" t-on-mouseover="() => this.onMouseOverMainMenu()">
@@ -5276,6 +5462,11 @@
       <i class="fa fa-search"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.ZOOM">
+    <div class="o-icon">
+      <i class="fa fa-search-plus"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
     <svg class="o-icon" viewBox="0 0 24 24">
       <path
@@ -5333,7 +5524,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.COG">
-    <svg fill="currentColor" viewBox="0 0 16 16">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 16 16">
       <path
         d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"
       />
@@ -5426,7 +5617,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.EDIT_TABLE">
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c.1-.2.45-.05.5.02l1 1V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3 M8.2 15.7v1.8h1.8l5.4-5.4-1.8-1.8-5.4 5.4Zm8.8-5.2a.5.5 0 0 0 0-.7l-1.1-1.1a.5.5 0 0 0-.7 0l-.9.9 1.8 1.8.9-.9Z"
@@ -5434,7 +5625,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.DELETE_TABLE">
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7V6.75h3.5v.75L12 9V6.75h3.5l1.5 1.5V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3m0 1.5h3v2.75h-3m10-2.25 3-3 1.5 1.5-3 3 3 3-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5"
@@ -5442,7 +5633,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PAINT_TABLE">
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h5c0-.5 0-1 .5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c1-.7 1.5-.4 1.5-.4V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3m7.5-.3c.7-.3 1.5-.1 2.1.6.6.7.8 1.4.5 1.9-.6 1.4-3.7 1.6-4 1.7l-.6.1.3-.5s.5-.8.5-2.1c0-.7.5-1.4 1.1-1.7Zm6.7-5.1a.9.9 0 0 1 1 1c-.1 1.3-2.5 3.7-4.3 5.3a3.9 3.9 0 0 0-.6-1.1c-.4-.4-.8-.7-1.3-.8 1.5-1.7 4-4.3 5.4-4.4"
@@ -5553,6 +5744,30 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.FX_SVG">
+    <svg class="o-icon fx-icon" viewBox="0 0 121.8 122.9">
+      <path
+        fill="currentColor"
+        d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z'
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.COLLAPSE">
+    <svg class="o-icon" viewBox="0 0 18 18">
+      <path
+        d="M12.124 2.576a.6.6 0 0 1 0 .848l-2.7 2.7a.6.6 0 0 1-.848 0l-2.7-2.7a.6.6 0 0 1 .848-.848L8.4 4.2V.9a.6.6 0 0 1 1.2 0v3.3l1.676-1.624a.6.6 0 0 1 .848 0M5.876 15.424a.6.6 0 0 1 0-.848l2.7-2.7a.6.6 0 0 1 .848 0l2.7 2.7a.6.6 0 0 1-.848.848L9.6 13.8v3.3a.6.6 0 0 1-1.2 0v-3.3l-1.676 1.624a.6.6 0 0 1-.848 0M2 7a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1M2 10a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.EXPAND">
+    <svg class="o-icon" viewBox="0 0 18 18">
+      <path
+        d="M5.876 14.076a.6.6 0 0 0 0 .848l2.7 2.7a.6.6 0 0 0 .848 0l2.7-2.7a.6.6 0 0 0-.848-.848L9.6 15.7v-3.3a.6.6 0 0 0-1.2 0v3.3l-1.676-1.624a.6.6 0 0 0-.848 0m6.248-10.152a.6.6 0 0 0 0-.848l-2.7-2.7a.6.6 0 0 0-.848 0l-2.7 2.7a.6.6 0 0 0 .848.848L8.4 2.3v3.3a.6.6 0 0 0 1.2 0V2.3l1.676 1.624a.6.6 0 0 0 .848 0M2 10a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1M2 7a.5.5 0 0 0 0 1h14a.5.5 0 0 0 0-1"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker">
@@ -5715,7 +5930,7 @@
 
   <t t-name="o-spreadsheet-RowResizer">
     <div
-      class="o-row-resizer"
+      class="o-row-resizer o-zoomable"
       t-ref="rowResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
@@ -5759,7 +5974,7 @@
 
   <t t-name="o-spreadsheet-ColResizer">
     <div
-      class="o-col-resizer d-flex"
+      class="o-col-resizer d-flex o-zoomable"
       t-ref="colResizer"
       t-on-pointermove.self="onMouseMove"
       t-on-mouseleave="onMouseLeave"
@@ -5904,7 +6119,7 @@
       anchorRect="cellPopover.anchorRect"
       containerRect="env.getPopoverContainerRect()"
       onMouseWheel="props.onMouseWheel"
-      zIndex="zIndex">
+      class="'o-popover-grid-index'">
       <t
         t-component="cellPopover.Component"
         t-props="{...cellPopover.props, onClosed : () => props.onClosePopover()}"
@@ -5918,7 +6133,7 @@
     </div>
     <div
       t-ref="gridOverlay"
-      class="o-grid-overlay overflow-hidden"
+      class="o-grid-overlay overflow-hidden o-zoomable"
       t-att-class="{'o-paint-format-cursor': isPaintingFormat}"
       t-att-style="style"
       t-on-pointerdown="onPointerDown"
@@ -5963,7 +6178,7 @@
 
   <t t-name="o-spreadsheet-Grid">
     <div
-      class="o-grid w-100 h-100"
+      class="o-grid w-100 h-100 o-zoomable"
       tabindex="-1"
       composerFocusableElement="true"
       t-on-click="focusDefaultElement"
@@ -6030,8 +6245,8 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-FullScreenChart">
-    <div class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex" t-if="chartId">
+  <t t-name="o-spreadsheet-FullScreenFigure">
+    <div class="position-absolute o-fullscreen-figure-overlay w-100 h-100 d-flex" t-if="figureUI">
       <div
         class="position-absolute top-0 start-0 end-0 bottom-0"
         t-on-click="exitFullScreen"
@@ -6044,56 +6259,37 @@
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-chart o-figure position-relative border rounded shadow"
+          class="o-fullscreen-figure o-figure position-relative border rounded shadow"
           tabindex="1"
-          t-ref="fullScreenChart"
+          t-ref="fullScreenFigure"
           t-on-click.stop=""
           t-on-keydown="(ev) => this.onKeyDown(ev)">
-          <t t-component="chartComponent" chartId="chartId" isFullScreen="true" t-key="chartId"/>
-          <div class="position-absolute top-0 end-0">
-            <ChartDashboardMenu chartId="chartId"/>
-          </div>
+          <t>
+            <t
+              t-component="figureComponent"
+              figureUI="figureUI"
+              isFullScreen="true"
+              onFigureDeleted="() => {}"
+              t-key="figureUI.id"
+            />
+          </t>
         </div>
       </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-FontSizeEditor">
-    <div class="o-dropdown" t-ref="FontSizeEditor">
-      <div
-        class=" o-font-size-editor d-flex align-items-center"
-        t-att-class="props.class"
-        title="Font Size"
-        t-on-click="this.toggleFontList">
-        <input
-          type="number"
-          min="1"
-          max="400"
-          class="o-font-size o-number-input bg-transparent border-0"
-          t-on-keydown="onInputKeydown"
-          t-on-wheel.prevent.stop=""
-          t-on-click.stop="props.onFocusInput"
-          t-on-focus.stop="onInputFocused"
-          t-att-value="props.currentFontSize"
-          t-on-change="setSizeFromInput"
-          t-ref="inputFontSize"
-        />
-        <span>
-          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-        </span>
-      </div>
-      <Popover t-if="dropdown.isOpen" t-props="popoverProps">
-        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="fontSizeList">
-          <t t-foreach="fontSizes" t-as="fontSize" t-key="fontSize">
-            <div
-              t-esc="fontSize"
-              t-att-data-size="fontSize"
-              t-on-click="() => this.setSizeFromList(fontSize)"
-            />
-          </t>
-        </div>
-      </Popover>
-    </div>
+    <NumberEditor
+      currentValue="props.currentFontSize"
+      onValueChange="props.onFontSizeChanged"
+      class="props.class"
+      onToggle="props.onToggle"
+      onFocusInput="props.onFocusInput"
+      min="1"
+      max="400"
+      valueList="fontSizes"
+      title.translate="Font Size"
+    />
   </t>
 
   <t t-name="o-spreadsheet-FilterMenuValueList">
@@ -6137,7 +6333,7 @@
       </div>
       <div
         t-if="state.displayedValues.length === 0"
-        class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
+        class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 text-muted fst-italic">
         No results
       </div>
     </div>
@@ -6178,6 +6374,7 @@
       criterion="state.criterion"
       onCriterionChanged.bind="onCriterionChanged"
       disableFormulas="true"
+      autofocus="true"
     />
   </t>
 
@@ -6279,7 +6476,12 @@
 
   <t t-name="o-spreadsheet-ChartFigure">
     <div class="o-chart-container w-100 h-100" t-on-dblclick="onDoubleClick">
-      <t t-component="chartComponent" chartId="chartId" t-key="chartId"/>
+      <t
+        t-component="chartComponent"
+        chartId="chartId"
+        t-key="chartId"
+        isFullScreen="props.isFullScreen"
+      />
     </div>
     <div t-if="env.isDashboard()" class="position-absolute top-0 end-0">
       <ChartDashboardMenu chartId="chartId"/>
@@ -6303,7 +6505,7 @@
           t-att-style="titleStyle"
         />
         <div class="o-carousel-tabs d-flex flex-fill justify-content-end" t-ref="carouselTabs">
-          <t t-foreach="carousel.items" t-as="item" t-key="item_index">
+          <t t-foreach="visibleCarouselItems" t-as="item" t-key="item_index">
             <div
               class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': isItemSelected(item) }"
@@ -6313,7 +6515,7 @@
           </t>
         </div>
         <div
-          class="o-carousel-tabs-dropdown flex-shrink-0 rounded"
+          class="o-carousel-tabs-dropdown o-carousel-button flex-shrink-0 rounded p-1"
           t-att-class="{'active': menuState.isOpen}"
           t-ref="carouselTabsDropdown"
           t-on-click="toggleMenu">
@@ -6327,6 +6529,22 @@
             popoverPositioning="'bottom-left'"
           />
         </div>
+        <div
+          t-if="env.isDashboard()"
+          t-att-title="fullScreenButtonTitle"
+          class="o-carousel-full-screen-button fa o-carousel-button rounded p-1 ms-1"
+          t-att-class="{
+            'fa-compress': props.isFullScreen,
+            'fa-expand': !props.isFullScreen,
+            'invisible': selectedCarouselItem?.type !== 'chart',
+          }"
+          t-on-click="toggleFullScreen"
+        />
+        <div
+          t-if="!env.isDashboard()"
+          class="o-carousel-menu-button o-carousel-button fa fa-ellipsis-v rounded ms-1"
+          t-on-click="openContextMenu"
+        />
       </div>
       <div
         t-if="!selectedItem"
@@ -6340,12 +6558,14 @@
           <t
             t-component="chartComponent"
             chartId="selectedItem.chartId"
+            isFullScreen="props.isFullScreen"
             t-key="selectedItem.chartId"
           />
         </div>
         <ChartDashboardMenu
           t-if="env.isDashboard()"
           chartId="selectedItem.chartId"
+          hasFullScreenButton="false"
           t-key="selectedItem.chartId"
         />
       </div>
@@ -6353,7 +6573,11 @@
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
-    <div class="o-figure-wrapper" t-att-style="wrapperStyle" t-ref="figureWrapper">
+    <div
+      class="o-figure-wrapper"
+      t-att-class="{'o-figure-selected': isSelected}"
+      t-att-style="wrapperStyle"
+      t-ref="figureWrapper">
       <div
         class="o-figure w-100 h-100"
         t-att-class="props.class"
@@ -6372,6 +6596,7 @@
           onFigureDeleted="props.onFigureDeleted"
           figureUI="props.figureUI"
           editFigureStyle.bind="editWrapperStyle"
+          openContextMenu.bind="openContextMenu"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
           <div
@@ -6392,18 +6617,22 @@
         <div t-if="!env.isDashboard()" class="position-absolute top-0 start-0 pe-none w-100 h-100">
           <div
             class="o-figure-border pe-auto w-100 h-0 position-absolute pb-2"
+            t-att-class="{'o-selected': isSelected}"
             t-att-style="getBorderStyle('top')"
           />
           <div
             class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
+            t-att-class="{'o-selected': isSelected}"
             t-att-style="getBorderStyle('left')"
           />
           <div
             class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
+            t-att-class="{'o-selected': isSelected}"
             t-att-style="getBorderStyle('bottom')"
           />
           <div
             class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
+            t-att-class="{'o-selected': isSelected}"
             t-att-style="getBorderStyle('right')"
           />
         </div>
@@ -6595,9 +6824,10 @@
         class="o-topbar-composer position-relative bg-white user-select-text d-flex"
         t-att-class="{
           'o-topbar-composer-readonly': env.model.getters.isReadonly(),
+          'o-topbar-composer-active': focus !== 'inactive',
+          'o-topbar-composer-inactive': focus === 'inactive',
         }"
-        t-on-click.stop=""
-        t-att-style="containerStyle">
+        t-on-click.stop="">
         <Composer
           focus="focus"
           inputStyle="composerStyle"
@@ -6605,6 +6835,9 @@
           composerStore="composerStore"
           placeholder="composerStore.placeholder"
         />
+        <span t-if="showFxIcon" class="position-absolute top-50 translate-middle-y ps-2 pe-none">
+          <t t-call="o-spreadsheet-Icon.FX_SVG"/>
+        </span>
       </div>
     </div>
   </t>
@@ -6652,21 +6885,12 @@
       <div class="o-formula-assistant" t-if="context.functionDescription.name">
         <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
           <div>
-            <span t-esc="context.functionDescription.name"/>
-            (
-            <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-              <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
+            <t t-foreach="formulaHeaderContent" t-as="part" t-key="part_index">
               <span
-                t-att-class="{ 'o-formula-assistant-focus': context.argsToFocus.includes(arg_index) }">
-                <span>
-                  <span t-if="arg.optional || arg.repeating || arg.default">[</span>
-                  <span t-esc="arg.name"/>
-                  <span t-if="arg.repeating">, ...</span>
-                  <span t-if="arg.optional || arg.repeating || arg.default">]</span>
-                </span>
-              </span>
+                t-esc="part.content"
+                t-att-class="part.focused ? 'o-formula-assistant-focus' : ''"
+              />
             </t>
-            )
           </div>
           <div
             class="collapsor px-2 d-flex align-items-center rounded"
@@ -6684,22 +6908,29 @@
             <div t-esc="context.functionDescription.description"/>
           </div>
 
+          <t
+            t-set="firstRepeatableGroupOptional"
+            t-value="context.functionDescription.args.some(arg => arg.repeating and arg.optional)"
+          />
+
           <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
             <div
               class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
-              t-att-class="{
-                  'o-formula-assistant-gray': context.argsToFocus.length > 0,
-                  'o-formula-assistant-focus': context.argsToFocus.includes(arg_index),
-                }">
-              <div>
-                <span t-esc="arg.name"/>
+              t-att-class="{'o-formula-assistant-gray': context.argsToFocus.length > 0}">
+              <div
+                t-att-class="{'o-formula-assistant-focus': context.argsToFocus.includes(arg_index)}">
+                <span t-if="arg.repeating">
+                  <span t-esc="arg.name + (context.repeatingArgGroupIndex + 1)"/>
+                </span>
+                <span t-else="">
+                  <span t-esc="arg.name"/>
+                </span>
                 <span
-                  t-if="arg.optional || arg.repeating || arg.default ">&#xA0;- [optional]&#xA0;</span>
+                  t-if="arg.optional || arg.default || (arg.repeating and (firstRepeatableGroupOptional or context.repeatingArgGroupIndex > 0))">&#xA0;- [optional]&#xA0;</span>
                 <span t-if="arg.default">
                   <span>default:&#xA0;</span>
                   <t t-esc="arg.defaultValue"/>
                 </span>
-                <span t-if="arg.repeating">repeatable</span>
               </div>
               <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
             </div>
@@ -6777,6 +7008,7 @@
             t-if="functionDescriptionState.showDescription"
             functionDescription="functionDescriptionState.functionDescription"
             argsToFocus="functionDescriptionState.argsToFocus"
+            repeatingArgGroupIndex="functionDescriptionState.repeatingArgGroupIndex"
           />
           <div
             t-if="functionDescriptionState.showDescription and autoCompleteProposals.length"
@@ -7083,6 +7315,7 @@
           t-ref="sheetNameSpan"
           t-esc="sheetName"
           t-on-pointerdown="(ev) => this.onMouseEventSheetName(ev)"
+          t-on-click="(ev) => this.onMouseEventSheetName(ev)"
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"