@odoo/o-spreadsheet 18.1.0-alpha.0 → 18.1.0-alpha.2

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.0
- @date 2024-09-25T13:18:46.133Z
- @hash 288f0b7
+ @version 18.1.0-alpha.2
+ @date 2024-10-24T08:54:19.283Z
+ @hash 2a01250
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -688,12 +688,11 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationCheckbox">
-    <input
-      type="checkbox"
-      class="o-dv-checkbox"
-      t-att-class="{'pe-none': isDisabled}"
-      t-on-change="onCheckboxChange"
-      t-att-checked="checkBoxValue"
+    <Checkbox
+      name="'data-validation-checkbox'"
+      value="checkBoxValue"
+      onChange.bind="onCheckboxChange"
+      className="isDisabled ? 'pe-none o-dv-checkbox' : 'o-dv-checkbox'"
     />
   </t>
 
@@ -2698,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"
@@ -2719,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"
@@ -2764,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"
@@ -2785,13 +2780,140 @@
     </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>
+                  <input
+                    t-att-value="trend.order"
+                    type="number"
+                    class="w-100 o-input trend-order-input"
+                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)"
+                    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(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"
@@ -3087,11 +3209,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"
@@ -3142,8 +3289,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
+        <Section class="'pt-0'" title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition ?? 'top'"
             class="o-input"
@@ -3155,8 +3301,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Values</t>
+        <Section class="'pt-0'" title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3166,102 +3311,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"
@@ -3292,6 +3343,59 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ComboChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-0'" title.translate="Legend position">
+          <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'" title.translate="Values">
+          <Checkbox
+            name="'showValues'"
+            label="showValuesLabel"
+            value="props.definition.showValues"
+            onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
+          />
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <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>
+    </SeriesWithAxisDesignEditor>
+    <SidePanelCollapsible collapsedAtInit="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -3314,11 +3418,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"
@@ -3341,8 +3443,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>
@@ -3526,8 +3627,7 @@
       definition="props.definition"
       updateChart="props.updateChart">
       <t t-set-slot="general-extension">
-        <Section class="'pt-0'">
-          <t t-set-slot="title">Legend position</t>
+        <Section class="'pt-0'" title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition ?? 'top'"
             class="o-input"
@@ -3539,8 +3639,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section>
-          <t t-set-slot="title">Values</t>
+        <Section title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3552,6 +3651,29 @@
     </GeneralDesignEditor>
   </t>
 
+  <t t-name="o-spreadsheet-RadarChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-0'" title.translate="Legend Position">
+          <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>
+      </t>
+    </GeneralDesignEditor>
+    <SeriesDesignEditor t-props="props"/>
+  </t>
+
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
       <ChartDataSeries
@@ -3573,8 +3695,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"
@@ -3584,8 +3705,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()]"
@@ -3618,8 +3738,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"
@@ -3629,11 +3748,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)"
@@ -3642,8 +3759,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'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="props.definition.baselineColorUp"
@@ -3671,8 +3787,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'" title.translate="Vertical axis position">
           <RadioSelection
             choices="axisChoices"
             selectedValue="props.definition.verticalAxisPosition"
@@ -3680,8 +3795,7 @@
             onChange.bind="updateVerticalAxisPosition"
           />
         </Section>
-        <Section>
-          <t t-set-slot="title">Legend position</t>
+        <Section title.translate="Legend position">
           <select
             t-att-value="props.definition.legendPosition"
             class="o-input o-chart-legend-position"
@@ -3693,8 +3807,7 @@
             <option value="right">Right</option>
           </select>
         </Section>
-        <Section>
-          <t t-set-slot="title">Values</t>
+        <Section title.translate="Values">
           <Checkbox
             name="'showValues'"
             label.translate="Show values"
@@ -3704,11 +3817,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'"
@@ -3733,8 +3844,7 @@
             onChange.bind="onUpdateShowConnectorLines"
           />
         </Section>
-        <Section>
-          <t t-set-slot="title">Colors</t>
+        <Section title.translate="Colors">
           <div class="o-waterfall-positive-color d-flex align-items-center mb-2">
             <RoundColorPicker
               currentColor="positiveValuesColor"
@@ -3759,8 +3869,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"
@@ -3822,7 +3931,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 }"
@@ -3832,9 +3941,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
@@ -3890,8 +3997,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>
@@ -3991,8 +4099,7 @@
 
   <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"
@@ -4003,8 +4110,7 @@
           />
         </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"
@@ -4297,7 +4403,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>
@@ -4354,8 +4460,7 @@
 
   <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)">
@@ -4390,8 +4495,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)"
@@ -4415,7 +4519,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>
@@ -4575,8 +4679,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)"
@@ -4602,8 +4705,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>
@@ -4628,7 +4730,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
@@ -4642,8 +4744,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"
@@ -4718,8 +4819,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"
@@ -4766,22 +4866,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'">
@@ -4845,9 +4929,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"/>
@@ -4905,9 +4989,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"
@@ -4932,7 +5016,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
@@ -4958,7 +5042,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
@@ -5040,8 +5124,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)">
@@ -5059,8 +5142,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
@@ -5078,8 +5160,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"
@@ -5107,8 +5188,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"
@@ -5173,8 +5253,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
@@ -5228,8 +5307,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"
@@ -5242,19 +5320,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>
@@ -5269,7 +5347,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 ">
@@ -5302,8 +5380,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"
@@ -5350,8 +5427,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">
@@ -5415,8 +5491,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]"
@@ -5464,16 +5539,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
@@ -5502,11 +5574,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>