@odoo/o-spreadsheet 18.1.0-alpha.1 → 18.1.0-alpha.3

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 18.1.0-alpha.1
- @date 2024-10-14T07:54:16.437Z
- @hash e9ce3aa
+ @version 18.1.0-alpha.3
+ @date 2024-11-08T12:19:23.924Z
+ @hash 96dcfab
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -2653,7 +2653,7 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="chartTerms.StackedBarChart"
+          label="stackedLabel"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />
@@ -2697,8 +2697,7 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartDataSeries">
-    <Section class="'o-data-series'">
-      <t t-set-slot="title" t-esc="title"/>
+    <Section class="'o-data-series'" title="title">
       <SelectionInput
         ranges="ranges"
         required="true"
@@ -2718,11 +2717,9 @@
 
   <t t-name="o-spreadsheet-GeneralDesignEditor">
     <t t-set="chart_title">Chart title</t>
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">General</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="General">
       <t t-set-slot="content">
-        <Section class="'o-chart-background-color pt-0 pb-0'">
-          <t t-set-slot="title">Background color</t>
+        <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
           <RoundColorPicker
             currentColor="props.definition.background"
             onColorPicked.bind="updateBackgroundColor"
@@ -2763,8 +2760,7 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartLabelRange">
-    <Section class="'o-data-labels'">
-      <t t-set-slot="title" t-esc="props.title"/>
+    <Section class="'o-data-labels'" title="props.title">
       <SelectionInput
         ranges="[props.range]"
         isInvalid="props.isInvalid"
@@ -2784,13 +2780,158 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartLegend">
+    <Section class="'pt-0'" title.translate="Legend position">
+      <select
+        t-att-value="props.definition.legendPosition ?? 'top'"
+        class="o-input o-chart-legend-position"
+        t-on-change="this.updateLegendPosition">
+        <option value="none">None</option>
+        <option value="top">Top</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+        <option value="right">Right</option>
+      </select>
+    </Section>
+  </t>
+
+  <t t-name="o-spreadsheet-SeriesDesignEditor">
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Data Series">
+      <t t-set-slot="content">
+        <Section class="'pt-0 pb-0'">
+          <select
+            class="o-input data-series-selector"
+            t-model="state.label"
+            t-on-change="(ev) => this.updateSerieEditor(ev)">
+            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
+              <option
+                t-att-value="serie"
+                t-att-selected="state.index === serie_index"
+                t-esc="serie"
+              />
+            </t>
+          </select>
+          <Section class="'px-0'">
+            <div class="d-flex align-items-center">
+              <span class="o-section-title mb-0 pe-2">Series color</span>
+              <RoundColorPicker
+                currentColor="getDataSerieColor()"
+                onColorPicked.bind="updateDataSeriesColor"
+              />
+            </div>
+          </Section>
+          <Section class="'pt-0 px-0'" title.translate="Series name">
+            <input
+              class="o-input o-serie-label-editor"
+              type="text"
+              t-att-value="getDataSerieLabel()"
+              t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
+            />
+          </Section>
+        </Section>
+        <t t-slot="data-series-extension" index="state.index"/>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-SeriesWithAxisDesignEditor">
+    <SeriesDesignEditor t-props="props">
+      <t t-set-slot="data-series-extension" t-slot-scope="scope">
+        <t t-set="index" t-value="scope.index"/>
+        <t t-slot="general-extension" index="index"/>
+        <Section class="'pt-0 pb-0'">
+          <Section
+            class="'pt-0 px-0 o-vertical-axis-selection'"
+            t-if="canHaveTwoVerticalAxis"
+            title.translate="Vertical axis">
+            <RadioSelection
+              choices="axisChoices"
+              selectedValue="getDataSerieAxis(index)"
+              name="'axis'"
+              onChange="(value) => this.updateDataSeriesAxis(index, value)"
+            />
+          </Section>
+          <Section
+            class="'pt-0 px-0 o-show-trend-line'"
+            t-if="!props.definition.horizontal"
+            title.translate="Trend line">
+            <t t-set="showTrendLineLabel">Show trend line</t>
+            <t t-set="trend" t-value="getTrendLineConfiguration(index)"/>
+            <t t-set="trendType" t-value="getTrendType(trend)"/>
+            <Checkbox
+              name="'showTrendLine'"
+              label="showTrendLineLabel"
+              value="trend !== undefined and trend.display"
+              onChange="(display) => this.toggleDataTrend(index, display)"
+            />
+            <div t-if="trend !== undefined and trend.display">
+              <div class="d-flex py-2">
+                <div class="w-100">
+                  <span class="o-section-subtitle">Type</span>
+                  <select
+                    class="o-input trend-type-selector"
+                    t-on-change="(ev) => this.onChangeTrendType(index, ev)">
+                    <option value="linear" t-att-selected="trendType === 'linear'">Linear</option>
+                    <option value="exponential" t-att-selected="trendType === 'exponential'">
+                      Exponential
+                    </option>
+                    <option value="polynomial" t-att-selected="trendType === 'polynomial'">
+                      Polynomial
+                    </option>
+                    <option value="logarithmic" t-att-selected="trendType === 'logarithmic'">
+                      Logarithmic
+                    </option>
+                    <option
+                      value="trailingMovingAverage"
+                      t-att-selected="trendType === 'trailingMovingAverage'">
+                      Trailing moving average
+                    </option>
+                  </select>
+                </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)"
+                  />
+                </div>
+                <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
+                  <span class="o-section-subtitle">Degree</span>
+                  <select
+                    t-att-value="trend.order"
+                    class="o-input trend-order-input"
+                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)">
+                    <t t-foreach="getPolynomialDegrees(index)" t-as="degree" t-key="degree">
+                      <option t-att-value="degree">
+                        <t t-esc="degree"/>
+                      </option>
+                    </t>
+                  </select>
+                </div>
+              </div>
+              <div class="d-flex align-items-center">
+                <span class="o-section-subtitle my-0 pe-2">Trend line color</span>
+                <RoundColorPicker
+                  currentColor="getTrendLineColor(index)"
+                  onColorPicked="(ev) => this.updateTrendLineColor(index, ev)"
+                />
+              </div>
+            </div>
+          </Section>
+        </Section>
+      </t>
+    </SeriesDesignEditor>
+  </t>
+
   <t t-name="o-spreadsheet.ChartTitle">
     <t t-set="placeholder">Add a title</t>
-    <Section class="'o-chart-title'">
-      <t t-set-slot="title">
-        <t t-if="props.name" t-esc="props.name"/>
-        <t t-else="">Title</t>
-      </t>
+    <t t-set="title">
+      <t t-if="props.name" t-esc="props.name"/>
+      <t t-else="">Title</t>
+    </t>
+    <Section class="'o-chart-title'" title="title.toString()">
       <input
         type="text"
         class="o-input"
@@ -3086,11 +3227,36 @@
       <path fill="#444" d="M23,2 v43 h1 v-43 M2,45 h44 v1 h-44"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.RADAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke="#0074d9" d="m24 16 14.27 3.36-1.93 21.63-18.22-8.9-3.63-11.18Z"/>
+      <path fill="none" stroke="#eb6d00" d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"/>
+      <path
+        fill="none"
+        stroke="#444"
+        d="M24 2v22l20.92-6.8L24 24l12.93 17.8L24 24 11.07 41.8 24 24 3.08 17.2"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.FILLED_RADAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#0074d944"
+        stroke="#0074d9"
+        d="m24 16 14.27 3.36-1.93 21.63-18.22-8.9-3.63-11.18Z"
+      />
+      <path fill="#eb6d0044" stroke="#eb6d00" d="m24 4 7.61 17.53-4.67 6.52-12.34 8.89-7.72-18.5Z"/>
+      <path
+        fill="none"
+        stroke="#444"
+        d="M24 2v22l20.92-6.8L24 24l12.93 17.8L24 24 11.07 41.8 24 24 3.08 17.2"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-ChartTypePicker">
     <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
-    <Section>
-      <t t-set-slot="title">Chart type</t>
+    <Section title.translate="Chart type">
       <div class="position-relative">
         <select
           class="o-input o-type-selector"
@@ -3141,21 +3307,12 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Values</t>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3165,102 +3322,8 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Data series</t>
-      <t t-set-slot="content">
-        <Section class="'pt-0 pb-0'">
-          <select
-            class="o-input data-series-selector"
-            t-model="state.label"
-            t-on-change="(ev) => this.updateSerieEditor(ev)">
-            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
-              <option
-                t-att-value="serie"
-                t-att-selected="state.index === serie_index"
-                t-esc="serie"
-              />
-            </t>
-          </select>
-          <Section class="'px-0'">
-            <div class="d-flex align-items-center">
-              <t t-set-slot="title">Series color</t>
-              <RoundColorPicker
-                currentColor="getDataSerieColor()"
-                onColorPicked.bind="updateDataSeriesColor"
-              />
-            </div>
-          </Section>
-          <Section class="'pt-0 px-0 o-vertical-axis-selection'" t-if="canHaveTwoVerticalAxis">
-            <t t-set-slot="title">Vertical axis</t>
-            <RadioSelection
-              choices="axisChoices"
-              selectedValue="getDataSerieAxis()"
-              name="'axis'"
-              onChange.bind="updateDataSeriesAxis"
-            />
-          </Section>
-          <Section class="'pt-0 px-0'">
-            <t t-set-slot="title">Series name</t>
-            <input
-              class="o-input o-serie-label-editor"
-              type="text"
-              t-att-value="getDataSerieLabel()"
-              t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
-            />
-          </Section>
-          <Section class="'pt-0 px-0 o-show-trend-line'" t-if="!props.definition.horizontal">
-            <t t-set-slot="title">Trend line</t>
-            <t t-set="showTrendLineLabel">Show trend line</t>
-            <t t-set="trend" t-value="getTrendLineConfiguration()"/>
-            <t t-set="trendType" t-value="getTrendType(trend)"/>
-            <Checkbox
-              name="'showTrendLine'"
-              label="showTrendLineLabel"
-              value="trend !== undefined and trend.display"
-              onChange.bind="toggleDataTrend"
-            />
-            <div t-if="trend !== undefined and trend.display">
-              <div class="d-flex py-2">
-                <div class="w-100">
-                  <span class="o-section-subtitle">Type</span>
-                  <select class="o-input trend-type-selector" t-on-change="this.onChangeTrendType">
-                    <option value="linear" t-att-selected="trendType === 'linear'">Linear</option>
-                    <option value="exponential" t-att-selected="trendType === 'exponential'">
-                      Exponential
-                    </option>
-                    <option value="polynomial" t-att-selected="trendType === 'polynomial'">
-                      Polynomial
-                    </option>
-                    <option value="logarithmic" t-att-selected="trendType === 'logarithmic'">
-                      Logarithmic
-                    </option>
-                  </select>
-                </div>
-                <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
-                  <span class="o-section-subtitle">Degree</span>
-                  <input
-                    t-att-value="trend.order"
-                    type="number"
-                    class="w-100 o-input trend-order-input"
-                    t-on-change="this.onChangePolynomialDegree"
-                    min="1"
-                  />
-                </div>
-              </div>
-              <div class="d-flex align-items-center">
-                <span class="o-section-subtitle my-0 pe-2">Trend line color</span>
-                <RoundColorPicker
-                  currentColor="getTrendLineColor()"
-                  onColorPicked.bind="updateTrendLineColor"
-                />
-              </div>
-            </div>
-          </Section>
-        </Section>
-      </t>
-    </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Axes</t>
+    <SeriesWithAxisDesignEditor t-props="props"/>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -3297,135 +3360,35 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Values</t>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
-            label="showValuesLabel"
+            label.translate="Show values"
             value="props.definition.showValues"
             onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
           />
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Data series</t>
-      <t t-set-slot="content">
-        <Section class="'pt-0 pb-0'">
-          <select
-            class="o-input data-series-selector"
-            t-model="state.label"
-            t-on-change="(ev) => this.updateSerieEditor(ev)">
-            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
-              <option
-                t-att-value="serie"
-                t-att-selected="state.index === serie_index"
-                t-esc="serie"
-              />
-            </t>
-          </select>
-          <Section class="'px-0'">
-            <div class="d-flex align-items-center">
-              <t t-set-slot="title">Series color</t>
-              <RoundColorPicker
-                currentColor="getDataSerieColor()"
-                onColorPicked.bind="updateDataSeriesColor"
-              />
-            </div>
-          </Section>
-          <Section class="'pt-0 px-0 o-vertical-axis-selection'" t-if="canHaveTwoVerticalAxis">
-            <t t-set-slot="title">Vertical axis</t>
-            <RadioSelection
-              choices="axisChoices"
-              selectedValue="getDataSerieAxis()"
-              name="'axis'"
-              onChange.bind="updateDataSeriesAxis"
-            />
-          </Section>
-          <Section class="'pt-0 px-0 o-series-type-selection'">
-            <t t-set-slot="title">Serie type</t>
-            <RadioSelection
-              choices="seriesTypeChoices"
-              selectedValue="getDataSeriesType()"
-              name="'seriesType'"
-              onChange.bind="updateDataSeriesType"
-            />
-          </Section>
-          <Section class="'pt-0 px-0'">
-            <t t-set-slot="title">Series name</t>
-            <input
-              class="o-input o-serie-label-editor"
-              type="text"
-              t-att-value="getDataSerieLabel()"
-              t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
-            />
-          </Section>
-          <Section class="'pt-0 px-0 o-show-trend-line'" t-if="!props.definition.horizontal">
-            <t t-set-slot="title">Trend line</t>
-            <t t-set="showTrendLineLabel">Show trend line</t>
-            <t t-set="trend" t-value="getTrendLineConfiguration()"/>
-            <t t-set="trendType" t-value="getTrendType(trend)"/>
-            <Checkbox
-              name="'showTrendLine'"
-              label="showTrendLineLabel"
-              value="trend !== undefined and trend.display"
-              onChange.bind="toggleDataTrend"
-            />
-            <div t-if="trend !== undefined and trend.display">
-              <div class="d-flex py-2">
-                <div class="w-100">
-                  <span class="o-section-subtitle">Type</span>
-                  <select class="o-input trend-type-selector" t-on-change="this.onChangeTrendType">
-                    <option value="linear" t-att-selected="trendType === 'linear'">Linear</option>
-                    <option value="exponential" t-att-selected="trendType === 'exponential'">
-                      Exponential
-                    </option>
-                    <option value="polynomial" t-att-selected="trendType === 'polynomial'">
-                      Polynomial
-                    </option>
-                    <option value="logarithmic" t-att-selected="trendType === 'logarithmic'">
-                      Logarithmic
-                    </option>
-                  </select>
-                </div>
-                <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
-                  <span class="o-section-subtitle">Degree</span>
-                  <input
-                    t-att-value="trend.order"
-                    type="number"
-                    class="w-100 o-input trend-order-input"
-                    t-on-change="this.onChangePolynomialDegree"
-                    min="1"
-                  />
-                </div>
-              </div>
-              <div class="d-flex align-items-center">
-                <span class="o-section-subtitle my-0 pe-2">Trend line color</span>
-                <RoundColorPicker
-                  currentColor="getTrendLineColor()"
-                  onColorPicked.bind="updateTrendLineColor"
-                />
-              </div>
-            </div>
-          </Section>
+    <SeriesWithAxisDesignEditor t-props="props">
+      <t t-set-slot="general-extension" t-slot-scope="scope">
+        <t t-set="index" t-value="scope.index"/>
+        <Section class="'pt-0 o-series-type-selection'" title.translate="Serie type">
+          <RadioSelection
+            choices="seriesTypeChoices"
+            selectedValue="getDataSeriesType(index)"
+            name="'seriesType'"
+            onChange="(type) => this.updateDataSeriesType(index, type)"
+          />
         </Section>
       </t>
-    </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Axes</t>
+    </SeriesWithAxisDesignEditor>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -3459,11 +3422,9 @@
       definition="props.definition"
       updateChart="props.updateChart"
     />
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">Gauge Design</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Gauge Design">
       <t t-set-slot="content">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Range</t>
+        <Section class="'pt-0'" title.translate="Range">
           <div class="o-subsection-left">
             <input
               type="text"
@@ -3486,8 +3447,7 @@
           </div>
         </Section>
 
-        <Section>
-          <t t-set-slot="title">Thresholds</t>
+        <Section title.translate="Thresholds">
           <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
             <t t-set="sectionRule" t-value="state.sectionRule"/>
           </t>
@@ -3671,21 +3631,12 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
-          <select
-            t-att-value="props.definition.legendPosition ?? 'top'"
-            class="o-input"
-            t-on-change="(ev) => this.updateLegendPosition(ev)">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section>
-          <t t-set-slot="title">Values</t>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3697,6 +3648,22 @@
     </GeneralDesignEditor>
   </t>
 
+  <t t-name="o-spreadsheet-RadarChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </GeneralDesignEditor>
+    <SeriesDesignEditor t-props="props"/>
+  </t>
+
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
       <ChartDataSeries
@@ -3718,8 +3685,7 @@
 
   <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
     <div>
-      <Section class="'o-data-series'">
-        <t t-set-slot="title">Key value</t>
+      <Section class="'o-data-series'" title.translate="Key value">
         <SelectionInput
           ranges="[this.getKeyValueRange()]"
           isInvalid="isKeyValueInvalid"
@@ -3729,8 +3695,7 @@
           onSelectionConfirmed="() => this.updateKeyValueRange()"
         />
       </Section>
-      <Section class="'o-data-labels'">
-        <t t-set-slot="title">Baseline configuration</t>
+      <Section class="'o-data-labels'" title.translate="Baseline configuration">
         <div class="o-section-subtitle">Value</div>
         <SelectionInput
           ranges="[this.getBaselineRange()]"
@@ -3763,8 +3728,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'">
-          <t t-set-slot="title">Number formatting</t>
+        <Section class="'pt-1'" title.translate="Number formatting">
           <Checkbox
             name="'humanizeNumbers'"
             label="humanizeNumbersLabel"
@@ -3774,11 +3738,9 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="false">
-      <t t-set-slot="title">Baseline</t>
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Baseline">
       <t t-set-slot="content">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Baseline description</t>
+        <Section class="'pt-0'" title.translate="Baseline description">
           <input
             type="text"
             t-att-value="translate(props.definition.baselineDescr)"
@@ -3787,8 +3749,7 @@
             placeholder="Baseline description"
           />
         </Section>
-        <Section class="'o-chart-baseline-color'">
-          <t t-set-slot="title" t-esc="colorsSectionTitle"/>
+        <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="props.definition.baselineColorUp"
@@ -3816,8 +3777,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'o-vertical-axis-selection'">
-          <t t-set-slot="title">Vertical axis position</t>
+        <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
           <RadioSelection
             choices="axisChoices"
             selectedValue="props.definition.verticalAxisPosition"
@@ -3825,21 +3785,12 @@
             onChange.bind="updateVerticalAxisPosition"
           />
         </Section>
-        <Section>
-          <t t-set-slot="title">Legend position</t>
-          <select
-            t-att-value="props.definition.legendPosition"
-            class="o-input o-chart-legend-position"
-            t-on-change="(ev) => this.updateLegendPosition(ev)">
-            <option value="none">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-          </select>
-        </Section>
-        <Section>
-          <t t-set-slot="title">Values</t>
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3849,11 +3800,9 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Waterfall design</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Waterfall design">
       <t t-set-slot="content">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Options</t>
+        <Section class="'pt-0'" title.translate="Options">
           <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
           <Checkbox
             className="'mb-2'"
@@ -3878,8 +3827,7 @@
             onChange.bind="onUpdateShowConnectorLines"
           />
         </Section>
-        <Section>
-          <t t-set-slot="title">Colors</t>
+        <Section class="'pt-0'" title.translate="Colors">
           <div class="o-waterfall-positive-color d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="positiveValuesColor"
@@ -3904,8 +3852,7 @@
         </Section>
       </t>
     </SidePanelCollapsible>
-    <SidePanelCollapsible collapsedAtInit="true">
-      <t t-set-slot="title">Axes</t>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
@@ -3967,7 +3914,7 @@
 
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="" t-att-class="props.class">
-      <div class="o_side_panel_collapsible_title d-flex align-items-center">
+      <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
         <div
           t-att-id="'btn-collapse-'+currentId"
           t-att-class="{ 'collapsed': props.collapsedAtInit }"
@@ -3977,9 +3924,7 @@
           <span class="collapsor-arrow">
             <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
           </span>
-          <div class="ps-2">
-            <t t-slot="title"/>
-          </div>
+          <div class="ps-2" t-esc="props.title"/>
         </div>
       </div>
       <div
@@ -4035,8 +3980,9 @@
 
   <t t-name="o_spreadsheet.Section">
     <div class="o-section" t-att-class="props.class">
-      <t t-if="props.slots.title">
+      <t t-if="props.slots.title or props.title">
         <div class="o-section-title">
+          <t t-esc="props.title"/>
           <t t-slot="title"/>
         </div>
       </t>
@@ -4062,9 +4008,15 @@
     <t t-set="text_color">Text Color</t>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
-      <select t-model="rule.operator" class="o-input o-cell-is-operator mb-3">
-        <t t-foreach="Object.keys(cellIsOperators)" t-as="op" t-key="op_index">
-          <option t-att-value="op" t-esc="cellIsOperators[op]"/>
+      <select
+        class="o-input o-cell-is-operator mb-3"
+        t-on-change="(ev) => this.editOperator(ev.target.value)">
+        <t t-foreach="cellIsOperators" t-as="op" t-key="op_index">
+          <option
+            t-att-value="op"
+            t-esc="cellIsOperators[op]"
+            t-att-selected="rule.operator === op"
+          />
         </t>
       </select>
       <t t-if="rule.operator !== 'IsEmpty' and rule.operator !== 'IsNotEmpty'">
@@ -4136,20 +4088,19 @@
 
   <t t-name="o-spreadsheet-ConditionalFormattingEditor">
     <div class="o-cf-ruleEditor">
-      <Section class="'o-cf-range pb-0'">
-        <t t-set-slot="title">Apply to range</t>
+      <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
         <div class="o-selection-cf">
           <SelectionInput
-            ranges="state.currentCF.ranges"
+            ranges="state.ranges"
             class="'o-range'"
             isInvalid="isRangeValid"
-            onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
+            onSelectionChanged.bind="onRangeUpdate"
+            onSelectionConfirmed.bind="onRangeConfirmed"
             required="true"
           />
         </div>
       </Section>
-      <Section class="'pb-0'">
-        <t t-set-slot="title">Format rules</t>
+      <Section class="'pb-0'" title.translate="Format rules">
         <div class="o-cf-type-selector">
           <BadgeSelection
             choices="cfTypesValues"
@@ -4176,8 +4127,11 @@
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="props.onExitEdition" class="o-button o-cf-cancel">Cancel</button>
-          <button t-on-click="saveConditionalFormat" class="o-button primary o-cf-save">
+          <button t-on-click="props.onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button
+            t-on-click="onSave"
+            class="o-button primary o-cf-save"
+            t-att-disabled="state.errors.length !== 0">
             Save
           </button>
         </div>
@@ -4211,14 +4165,18 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-model="threshold.type"
+          t-on-change="(ev) => this.updateThresholdType(thresholdType, ev.target.value)"
           t-on-click="closeMenus"
           t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
-          <option value="value">Cell values</option>
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-          <option value="percentile">Percentile</option>
-          <option value="formula">Formula</option>
+          <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
+          <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
+          <option value="percentage" t-att-selected="threshold.type === 'percentage'">
+            Percentage
+          </option>
+          <option value="percentile" t-att-selected="threshold.type === 'percentile'">
+            Percentile
+          </option>
+          <option value="formula" t-att-selected="threshold.type === 'formula'">Formula</option>
         </select>
       </t>
       <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
@@ -4226,7 +4184,8 @@
           t-if="threshold.type !== 'formula'"
           type="text"
           class="o-input"
-          t-model="rule[thresholdType].value"
+          t-att-value="threshold.value"
+          t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
           t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         />
         <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
@@ -4278,7 +4237,8 @@
         class="'o-range'"
         isInvalid="false"
         hasSingleRange="true"
-        onSelectionChanged="(ranges) => this.onDataBarRangeUpdate(ranges)"
+        onSelectionChanged.bind="onDataBarRangeUpdate"
+        onSelectionConfirmed.bind="onDataBarRangeChange"
         required="false"
       />
     </div>
@@ -4323,11 +4283,14 @@
       </td>
       <td>When value is</td>
       <td>
-        <select class="o-input" name="valueType" t-model="inflectionPointValue.operator">
-          <option value="gt">
+        <select
+          class="o-input"
+          name="valueType"
+          t-on-change="(ev) => this.setInflectionOperator(inflectionPoint, ev.target.value)">
+          <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
             <span>&#62;</span>
           </option>
-          <option value="ge">
+          <option value="ge" t-att-selected="inflectionPointValue.operator === 'ge'">
             <span>&#8805;</span>
           </option>
         </select>
@@ -4339,17 +4302,29 @@
             t-if="inflectionPointValue.type !== 'formula'"
             class="o-input"
             t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
-            t-model="rule[inflectionPoint].value"
+            t-att-value="rule[inflectionPoint].value"
+            t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
           />
           <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
         </div>
       </td>
       <td>
-        <select class="o-input" name="valueType" t-model="inflectionPointValue.type">
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-          <option value="percentile">Percentile</option>
-          <option value="formula">Formula</option>
+        <select
+          class="o-input"
+          name="valueType"
+          t-on-change="(ev) => this.setInflectionType(inflectionPoint, ev.target.value, ev)">
+          <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
+            Number
+          </option>
+          <option value="percentage" t-att-selected="inflectionPointValue.type === 'percentage'">
+            Percentage
+          </option>
+          <option value="percentile" t-att-selected="inflectionPointValue.type === 'percentile'">
+            Percentile
+          </option>
+          <option value="formula" t-att-selected="inflectionPointValue.type === 'formula'">
+            Formula
+          </option>
         </select>
       </td>
     </tr>
@@ -4442,7 +4417,7 @@
         </t>
         <div class="o-cf-preview-description">
           <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule text-truncate">
+            <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
               <t t-esc="getDescription(cf)"/>
             </div>
           </div>
@@ -4492,15 +4467,18 @@
         />
       </t>
       <t t-if="state.mode === 'edit'">
-        <ConditionalFormattingEditor editedCf="state.editedCf" onExitEdition.bind="switchToList"/>
+        <ConditionalFormattingEditor
+          editedCf="editedCF"
+          onSave.bind="switchToList"
+          onCancel.bind="cancelEdition"
+        />
       </t>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-CustomCurrencyPanel">
     <div class="o-custom-currency">
-      <Section t-if="availableCurrencies.length > 1">
-        <t t-set-slot="title">Currency</t>
+      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
         <select
           class="o-input o-available-currencies"
           t-on-change="(ev) => this.updateSelectCurrency(ev)">
@@ -4535,8 +4513,7 @@
           />
         </div>
       </Section>
-      <Section>
-        <t t-set-slot="title">Format</t>
+      <Section title.translate="Format">
         <select
           class="o-input o-format-proposals mb-1"
           t-on-change="(ev) => this.updateSelectFormat(ev)"
@@ -4560,7 +4537,7 @@
           <table>
             <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
               <tr>
-                <td class="pe-3 fw-bolder" t-esc="example.label"/>
+                <td class="pe-3 o-fw-bold" t-esc="example.label"/>
                 <td t-esc="example.value"/>
               </tr>
             </t>
@@ -4720,8 +4697,7 @@
 
   <t t-name="o-spreadsheet-DataValidationEditor">
     <div class="o-dv-form w-100 h-100">
-      <Section class="'o-dv-range'">
-        <t t-set-slot="title">Apply to range</t>
+      <Section class="'o-dv-range'" title.translate="Apply to range">
         <SelectionInput
           ranges="state.rule.ranges"
           onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
@@ -4747,8 +4723,7 @@
         </div>
       </Section>
 
-      <Section class="'o-dv-invalid-option pt-0'">
-        <t t-set-slot="title">If the data is invalid</t>
+      <Section class="'o-dv-invalid-option pt-0'" title.translate="If the data is invalid">
         <select class="o-dv-reject-input o-input" t-on-change="changeRuleIsBlocking">
           <option t-att-selected="!state.rule.isBlocking" value="false">Show a warning</option>
           <option t-att-selected="state.rule.isBlocking" value="true">Reject the input</option>
@@ -4773,7 +4748,7 @@
     <div class="o-dv-preview p-3" t-on-click="props.onClick" t-ref="dvPreview">
       <div class="d-flex justify-content-between">
         <div class="o-dv-container d-flex flex-column">
-          <div class="o-dv-preview-description fw-bold text-truncate" t-esc="descriptionString"/>
+          <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
           <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
         </div>
         <div
@@ -4787,8 +4762,7 @@
 
   <t t-name="o-spreadsheet-FindAndReplacePanel">
     <div class="o-find-and-replace">
-      <Section>
-        <t t-set-slot="title">Search</t>
+      <Section title.translate="Search">
         <div class="o-input-search-container">
           <input
             type="text"
@@ -4863,8 +4837,7 @@
           <ValidationMessages msgType="'info'" messages="searchInfo" singleBox="true"/>
         </div>
       </Section>
-      <Section class="'pt-0'" t-if="!env.model.getters.isReadonly()">
-        <t t-set-slot="title">Replace</t>
+      <Section class="'pt-0'" t-if="!env.model.getters.isReadonly()" title.translate="Replace">
         <div class="o-input-search-container">
           <input
             type="text"
@@ -4911,22 +4884,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-EditableName">
-    <t t-if="state.isEditing">
-      <div>
-        <input type="text" class="o-input o_sp_en_name" t-model="state.name"/>
-      </div>
-      <div class="o-button-link o_sp_en_save" t-on-click="save">Save</div>
-    </t>
-    <t t-else="">
-      <div class="o_sp_en_display_name" t-esc="props.displayName"/>
-      <div class="o-button-link o_sp_en_rename" t-on-click="rename">
-        <i class="fa fa-pencil me-1"/>
-        Rename
-      </div>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-PivotDeferUpdate">
     <Section
       class="'align-items-center border-top d-flex flex-row justify-content-between py-1 pivot-defer-update'">
@@ -4990,9 +4947,9 @@
             t-if="props.onNameUpdated"
             value="props.dimension.displayName"
             onChange.bind="updateName"
-            class="'fw-bold'"
+            class="'o-fw-bold'"
           />
-          <span t-else="1" class="fw-bold" t-esc="props.dimension.displayName"/>
+          <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
         </div>
         <div class="d-flex flex-rows">
           <t t-slot="upper-right-icons"/>
@@ -5050,9 +5007,9 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotLayoutConfigurator">
-    <div class="o_side_panel_section pivot-dimensions o-section" t-ref="pivot-dimensions">
+    <div class="pivot-dimensions o-section" t-ref="pivot-dimensions">
       <div
-        class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
+        class="o-fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Columns
         <AddDimensionButton
           onFieldPicked.bind="addColumnDimension"
@@ -5077,7 +5034,7 @@
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
+        class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
         t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
         Rows
         <AddDimensionButton
@@ -5103,7 +5060,7 @@
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
+        class="o-fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
         Measures
         <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields">
           <div
@@ -5185,8 +5142,7 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
-    <Section>
-      <t t-set-slot="title">Show measure as:</t>
+    <Section title.translate="Show measure as:">
       <select
         class="o-pivot-measure-display-type o-input"
         t-on-change="(ev) => this.store.updateMeasureDisplayType(ev.target.value)">
@@ -5204,8 +5160,7 @@
       />
     </Section>
 
-    <Section t-if="store.doesDisplayNeedsField">
-      <t t-set-slot="title">Base field:</t>
+    <Section t-if="store.doesDisplayNeedsField" title.translate="Base field:">
       <div class="o-pivot-measure-display-field w-100 py-1 px-3">
         <t t-if="store.fields.length">
           <RadioSelection
@@ -5223,8 +5178,7 @@
     </Section>
 
     <t t-set="values" t-value="store.values"/>
-    <Section t-if="store.doesDisplayNeedsValue and values.length">
-      <t t-set-slot="title">Base item:</t>
+    <Section t-if="store.doesDisplayNeedsValue and values.length" title.translate="Base item:">
       <div class="o-pivot-measure-display-value w-100 py-1 px-3">
         <RadioSelection
           choices="values"
@@ -5252,8 +5206,7 @@
     <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
       <div class="h-100 position-relative overflow-x-hidden overflow-y-auto">
         <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
-        <Section>
-          <t t-set-slot="title">Range</t>
+        <Section title.translate="Range">
           <SelectionInput
             ranges="ranges"
             required="true"
@@ -5318,8 +5271,7 @@
         />
       </Section>
 
-      <Section class="'pt-0'">
-        <t t-set-slot="title">Columns to analyze</t>
+      <Section class="'pt-0'" title.translate="Columns to analyze">
         <div class="o-checkbox-selection overflow-auto">
           <t t-set="selectAllLabel">Select all</t>
           <Checkbox
@@ -5373,8 +5325,7 @@
 
   <t t-name="o-spreadsheet-SettingsPanel">
     <div class="o-settings-panel">
-      <Section>
-        <t t-set-slot="title">Locale</t>
+      <Section title.translate="Locale">
         <select class="o-input" t-on-change="(ev) => this.onLocaleChange(ev.target.value)">
           <option
             t-foreach="supportedLocales"
@@ -5387,19 +5338,19 @@
         </select>
         <div class="o-locale-preview mt-4 p-3 rounded">
           <div>
-            <span class="fw-bold me-1">Number:</span>
+            <span class="o-fw-bold me-1">Number:</span>
             <span t-esc="numberFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">Date:</span>
+            <span class="o-fw-bold me-1">Date:</span>
             <span t-esc="dateFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">Date time:</span>
+            <span class="o-fw-bold me-1">Date time:</span>
             <span t-esc="dateTimeFormatPreview"/>
           </div>
           <div>
-            <span class="fw-bold me-1">First day of week:</span>
+            <span class="o-fw-bold me-1">First day of week:</span>
             <span t-esc="firstDayOfWeek"/>
           </div>
         </div>
@@ -5414,7 +5365,7 @@
   <t t-name="o-spreadsheet-SidePanel">
     <div class="o-sidePanel" t-if="sidePanelStore.isOpen">
       <div class="o-sidePanelHeader">
-        <div class="o-sidePanelTitle o-heading-3" t-esc="getTitle()"/>
+        <div class="o-sidePanelTitle o-fw-bold" t-esc="getTitle()"/>
         <div class="o-sidePanelClose" t-on-click="close">✕</div>
       </div>
       <div class="o-sidePanelBody-container d-flex flex-grow-1 ">
@@ -5447,8 +5398,7 @@
 
   <t t-name="o-spreadsheet-SplitIntoColumnsPanel">
     <div class="o-split-to-cols-panel">
-      <Section>
-        <t t-set-slot="title">Separator</t>
+      <Section title.translate="Separator">
         <select class="o-input mb-3" t-on-change="(ev) => this.onSeparatorChange(ev.target.value)">
           <option
             t-foreach="separators"
@@ -5495,8 +5445,7 @@
 
   <t t-name="o-spreadsheet-TablePanel">
     <div class="o-table-panel">
-      <Section>
-        <t t-set-slot="title">Style options</t>
+      <Section title.translate="Style options">
         <div class="d-flex flex-row">
           <div class="w-50">
             <div class="d-flex align-items-center">
@@ -5560,8 +5509,7 @@
       <Section>
         <TableStylePicker table="props.table"/>
       </Section>
-      <Section>
-        <t t-set-slot="title">Data range</t>
+      <Section title.translate="Data range">
         <SelectionInput
           t-key="props.table.type"
           ranges="[this.state.tableXc]"
@@ -5609,16 +5557,13 @@
 
   <t t-name="o-spreadsheet-TableStyleEditorPanel">
     <div class="o-table-style-editor-panel">
-      <Section>
-        <t t-set-slot="title">Style name</t>
+      <Section title.translate="Style name">
         <input type="text" class="o-input" t-model="state.styleName"/>
       </Section>
-      <Section class="'pt-1'">
-        <t t-set-slot="title">Style color</t>
+      <Section class="'pt-1'" title.translate="Style color">
         <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
       </Section>
-      <Section class="'pt-1'">
-        <t t-set-slot="title">Style template</t>
+      <Section class="'pt-1'" title.translate="Style template">
         <div class="d-flex flex-wrap">
           <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
             <TableStylePreview
@@ -5647,11 +5592,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Spreadsheet">
-    <div
-      class="o-spreadsheet"
-      t-on-keydown="(ev) => !env.isDashboard() and this.onKeydown(ev)"
-      t-ref="spreadsheet"
-      t-att-style="getStyle()">
+    <div class="o-spreadsheet" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
       </t>