@odoo/o-spreadsheet 17.3.0-alpha.7 → 17.3.0

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 17.3.0-alpha.7
- @date 2024-05-07T10:43:31.043Z
- @hash 853c266
+ @version 17.3.0
+ @date 2024-05-31T14:22:11.907Z
+ @hash 271202e
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -585,11 +585,7 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div
-      class="o-grid o-two-columns"
-      tabindex="-1"
-      t-on-wheel="onMouseWheel"
-      t-on-pointerdown="onClosePopover">
+    <div class="o-grid o-two-columns" tabindex="-1" t-on-wheel="onMouseWheel">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onCellHovered.bind="onCellHovered"
@@ -818,16 +814,14 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterIconsOverlay">
-    <div t-on-pointerdown.stop="this.props.onMouseDown">
-      <t
-        t-foreach="getFilterHeadersPositions()"
-        t-as="position"
-        t-key="'filter'+position.col + '_' + position.row">
-        <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-          <FilterIcon cellPosition="position"/>
-        </GridCellIcon>
-      </t>
-    </div>
+    <t
+      t-foreach="getFilterHeadersPositions()"
+      t-as="position"
+      t-key="'filter'+position.col + '_' + position.row">
+      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
+        <FilterIcon cellPosition="position"/>
+      </GridCellIcon>
+    </t>
   </t>
 
   <t t-name="o-spreadsheet-FilterMenu">
@@ -956,7 +950,7 @@
       tabindex="-1"
       t-on-click="focusDefaultElement"
       t-on-keydown="onKeydown"
-      t-on-wheel="onMouseWheel"
+      t-on-wheel.prevent="onMouseWheel"
       t-ref="grid">
       <GridOverlay
         onCellClicked.bind="onCellClicked"
@@ -1062,7 +1056,7 @@
       t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
-      <FilterIconsOverlay onMouseDown="(ev) => this.onMouseDown(ev, {closePopover: false})"/>
+      <FilterIconsOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -2541,55 +2535,41 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-BarChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked.bind="updateBackgroundColor"
-            title="backgroundColorTitle"
+  <t t-name="o-spreadsheet-AxisDesignEditor">
+    <t t-set="editor_label">Axis title</t>
+    <Section class="'py-0'">
+      <select class="o-input o-axis-selector" t-on-change="this.updateAxisEditor">
+        <t t-foreach="props.axesList" t-as="axis" t-key="axis.id">
+          <option
+            t-att-value="axis.id"
+            t-att-selected="state.currentAxis === axis.id"
+            t-esc="axis.name"
           />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Vertical axis position</t>
-        <select
-          t-att-value="props.definition.verticalAxisPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-        </select>
-      </Section>
-      <Section>
-        <t t-set-slot="title">Legend position</t>
-        <select
-          t-att-value="props.definition.legendPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('legendPosition', 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>
-    </div>
+        </t>
+      </select>
+    </Section>
+    <ChartTitle
+      title="this.getAxisTitle()"
+      updateTitle.bind="updateAxisTitle"
+      name="editor_label"
+      toggleItalic.bind="toggleItalicAxisTitle"
+      toggleBold.bind="toggleBoldAxisTitle"
+      updateAlignment.bind="updateAxisTitleAlignment"
+      updateColor.bind="updateAxisTitleColor"
+      style="axisTitleStyle"
+    />
   </t>
 
   <t t-name="o-spreadsheet.ChartDataSeries">
     <Section class="'o-data-series'">
       <t t-set-slot="title" t-esc="title"/>
       <SelectionInput
-        ranges="props.ranges"
+        ranges="ranges"
         required="true"
         hasSingleRange="props.hasSingleRange"
         onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
         onSelectionConfirmed="() => props.onSelectionConfirmed()"
+        colors="colors"
       />
     </Section>
   </t>
@@ -2600,6 +2580,62 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-GeneralDesignEditor">
+    <t t-set="chart_title">Chart title</t>
+    <SidePanelCollapsible collapsedAtInit="false">
+      <t t-set-slot="title">General</t>
+      <t t-set-slot="content">
+        <Section class="'o-chart-background-color pt-0 pb-0'">
+          <div class="d-flex align-items-center mt-0">
+            <span class="o-section-title mb-0 pe-2">Background color</span>
+            <RoundColorPicker
+              currentColor="props.definition.background"
+              onColorPicked.bind="updateBackgroundColor"
+            />
+          </div>
+        </Section>
+        <ChartTitle
+          title="title.text"
+          updateTitle.bind="updateTitle"
+          name="chart_title"
+          toggleItalic.bind="toggleItalicChartTitle"
+          toggleBold.bind="toggleBoldChartTitle"
+          updateAlignment.bind="updateChartTitleAlignment"
+          updateColor.bind="updateChartTitleColor"
+          style="titleStyle"
+        />
+        <t t-slot="general-extension"/>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-GenericChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
+        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
+        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
+        options="this.getLabelRangeOptions()"
+      />
+      <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
+        <Checkbox
+          name="'dataSetsHaveTitle'"
+          label="dataSetsHaveTitleLabel"
+          value="props.definition.dataSetsHaveTitle"
+          onChange.bind="onUpdateDataSetsHaveTitle"
+        />
+      </Section>
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet.ChartLabelRange">
     <Section class="'o-data-labels'">
       <t t-set-slot="title" t-esc="props.title"/>
@@ -2623,9 +2659,12 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <t t-set="placeholder">New Chart</t>
-    <Section class="'o-chart-title'">
-      <t t-set-slot="title">Title</t>
+    <t t-set="placeholder">Add a title</t>
+    <Section class="'o-chart-title pb-0'">
+      <t t-set-slot="title">
+        <t t-if="props.name" t-esc="props.name"/>
+        <t t-else="">Title</t>
+      </t>
       <input
         type="text"
         class="o-input o-optional"
@@ -2633,9 +2672,165 @@
         t-on-change="updateTitle"
         t-att-placeholder="placeholder"
       />
+      <Section class="'pt-0 px-0'">
+        <div class="o-chart-title-designer position-relative d-flex align-items-center">
+          <span
+            class="o-menu-item-button o-hoverable-button"
+            title="Bold"
+            t-att-class="{active: props.style.bold}"
+            t-on-click="(ev) => this.props.toggleBold()">
+            <span>
+              <t t-call="o-spreadsheet-Icon.BOLD"/>
+            </span>
+          </span>
+          <span
+            class="o-menu-item-button o-hoverable-button"
+            title="Italic"
+            t-att-class="{active: props.style.italic}"
+            t-on-click="(ev) => this.props.toggleItalic()">
+            <span>
+              <t t-call="o-spreadsheet-Icon.ITALIC"/>
+            </span>
+          </span>
+          <span
+            class="o-menu-item-button o-hoverable-button"
+            title="Horizontal alignment"
+            t-on-click="(ev) => this.toggleDropdownTool('horizontalChartAlignTool', ev)">
+            <span>
+              <t t-if="props.style.align === 'center'" t-call="o-spreadsheet-Icon.ALIGN_CENTER"/>
+              <t t-elif="props.style.align === 'right'" t-call="o-spreadsheet-Icon.ALIGN_RIGHT"/>
+              <t t-else="" t-call="o-spreadsheet-Icon.ALIGN_LEFT"/>
+            </span>
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </span>
+          <div
+            class="o-dropdown-content position-absolute top-100 start-0 bg-white"
+            t-if="state.activeTool === 'horizontalChartAlignTool'"
+            t-on-click.stop="">
+            <div class="o-dropdown-line d-flex">
+              <span
+                class="o-menu-item-button o-hoverable-button"
+                t-att-class="{active: props.style.align === 'left'}"
+                title="Left"
+                t-on-click="(ev) => this.updateAlignment('left')">
+                <span>
+                  <t t-call="o-spreadsheet-Icon.ALIGN_LEFT"/>
+                </span>
+              </span>
+              <span
+                class="o-menu-item-button o-hoverable-button"
+                t-att-class="{active: props.style.align === 'center'}"
+                title="Center"
+                t-on-click="(ev) => this.updateAlignment('center')">
+                <span>
+                  <t t-call="o-spreadsheet-Icon.ALIGN_CENTER"/>
+                </span>
+              </span>
+              <span
+                class="o-menu-item-button o-hoverable-button"
+                t-att-class="{active: props.style.align === 'right'}"
+                title="Right"
+                t-on-click="(ev) => this.updateAlignment('right')">
+                <span>
+                  <t t-call="o-spreadsheet-Icon.ALIGN_RIGHT"/>
+                </span>
+              </span>
+            </div>
+          </div>
+          <ColorPickerWidget
+            currentColor="props.style.color"
+            toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
+            showColorPicker="state.activeTool === 'fillChartColorTool'"
+            onColorPicked.bind="onColorPicked"
+            title="fill_color"
+            icon="'o-spreadsheet-Icon.TEXT_COLOR'"
+            class="'o-hoverable-button o-menu-item-button'"
+          />
+        </div>
+      </Section>
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartWithAxisDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      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>
+      </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" t-index="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'">
+            <t t-set-slot="title">Vertical axis</t>
+            <select
+              t-att-value="getDataSerieAxis()"
+              class="o-input o-vertical-axis-selection"
+              t-on-change="(ev) => this.updateDataSeriesAxis(ev)">
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+            </select>
+          </Section>
+          <Section class="'pt-0 px-0'">
+            <t t-set-slot="title">Series name</t>
+            <input
+              class="o-input o-serie-label-editor"
+              t-att-value="getDataSerieLabel()"
+              t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
+            />
+          </Section>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+    <SidePanelCollapsible collapsedAtInit="true">
+      <t t-set-slot="title">Axis</t>
+      <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-ComboChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -2650,14 +2845,6 @@
         onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
         options="this.getLabelRangeOptions()"
       />
-      <Section class="'o-use-right-axis py-0'">
-        <Checkbox
-          name="'shouldUseRightAxis'"
-          label="shouldUseRightAxis"
-          value="props.definition.useBothYAxis"
-          onChange.bind="onUpdateUseRightAxis"
-        />
-      </Section>
       <Section class="'o-use-row-as-headers py-0'" t-if="calculateHeaderPosition()">
         <Checkbox
           name="'dataSetsHaveTitle'"
@@ -2671,46 +2858,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-ComboChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked.bind="updateBackgroundColor"
-            title="backgroundColorTitle"
-          />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section t-if="!props.definition.useBothYAxis">
-        <t t-set-slot="title">Vertical axis position</t>
-        <select
-          t-att-value="props.definition.verticalAxisPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-        </select>
-      </Section>
-      <Section>
-        <t t-set-slot="title">Legend position</t>
-        <select
-          t-att-value="props.definition.legendPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('legendPosition', 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>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -2728,52 +2875,48 @@
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked.bind="updateBackgroundColor"
-            title="backgroundColorTitle"
-          />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Range</t>
-        <div class="o-subsection-left">
-          <input
-            type="text"
-            t-model="state.sectionRule.rangeMin"
-            t-on-change="() => this.updateSectionRule(state.sectionRule)"
-            t-on-input="() => this.canUpdateSectionRule(state.sectionRule)"
-            class="o-input o-data-range-min"
-            t-att-class="{ 'o-invalid': isRangeMinInvalid() }"
-          />
-        </div>
-        <div class="o-subsection-right">
-          <input
-            type="text"
-            t-model="state.sectionRule.rangeMax"
-            t-on-change="() => this.updateSectionRule(state.sectionRule)"
-            t-on-input="() => this.canUpdateSectionRule(state.sectionRule)"
-            class="o-input o-data-range-max"
-            t-att-class="{ 'o-invalid': isRangeMaxInvalid() }"
-          />
-        </div>
-      </Section>
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart"
+    />
+    <SidePanelCollapsible collapsedAtInit="true">
+      <t t-set-slot="title">Gauge Design</t>
+      <t t-set-slot="content">
+        <Section class="'pt-0'">
+          <t t-set-slot="title">Range</t>
+          <div class="o-subsection-left">
+            <input
+              type="text"
+              t-model="state.sectionRule.rangeMin"
+              t-on-change="() => this.updateSectionRule(state.sectionRule)"
+              t-on-input="() => this.canUpdateSectionRule(state.sectionRule)"
+              class="o-input o-data-range-min"
+              t-att-class="{ 'o-invalid': isRangeMinInvalid() }"
+            />
+          </div>
+          <div class="o-subsection-right">
+            <input
+              type="text"
+              t-model="state.sectionRule.rangeMax"
+              t-on-change="() => this.updateSectionRule(state.sectionRule)"
+              t-on-input="() => this.canUpdateSectionRule(state.sectionRule)"
+              class="o-input o-data-range-max"
+              t-att-class="{ 'o-invalid': isRangeMaxInvalid() }"
+            />
+          </div>
+        </Section>
 
-      <Section>
-        <t t-set-slot="title">Thresholds</t>
-        <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
-          <t t-set="sectionRule" t-value="state.sectionRule"/>
-        </t>
-      </Section>
+        <Section>
+          <t t-set-slot="title">Thresholds</t>
+          <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
+            <t t-set="sectionRule" t-value="state.sectionRule"/>
+          </t>
+        </Section>
 
-      <ChartErrorSection t-if="designErrorMessages.length" messages="designErrorMessages"/>
-    </div>
+        <ChartErrorSection t-if="designErrorMessages.length" messages="designErrorMessages"/>
+      </t>
+    </SidePanelCollapsible>
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartColorSectionTemplate">
@@ -2851,63 +2994,6 @@
     </tr>
   </t>
 
-  <t t-name="o-spreadsheet-GenericChartConfigPanel">
-    <div>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
-        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
-        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
-        options="this.getLabelRangeOptions()"
-      />
-      <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
-        <Checkbox
-          name="'dataSetsHaveTitle'"
-          label="dataSetsHaveTitleLabel"
-          value="props.definition.dataSetsHaveTitle"
-          onChange.bind="onUpdateDataSetsHaveTitle"
-        />
-      </Section>
-
-      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-GenericChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked.bind="updateBackgroundColor"
-            title="backgroundColorTitle"
-          />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Legend position</t>
-        <select
-          t-att-value="props.definition.legendPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('legendPosition', 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>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-LineConfigPanel">
     <div>
       <Section class="'pt-0'">
@@ -2949,46 +3035,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-LineChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked.bind="updateBackgroundColor"
-            title="backgroundColorTitle"
-          />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Vertical axis position</t>
-        <select
-          t-att-value="props.definition.verticalAxisPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-        </select>
-      </Section>
-      <Section>
-        <t t-set-slot="title">Legend position</t>
-        <select
-          t-att-value="props.definition.legendPosition"
-          class="o-input"
-          t-on-change="(ev) => this.updateSelect('legendPosition', 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>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ChartPanel">
     <div class="o-chart" t-if="figureId">
       <div class="o-panel">
@@ -3048,6 +3094,29 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PieChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      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>
+      </t>
+    </GeneralDesignEditor>
+  </t>
+
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
       <ChartDataSeries
@@ -3118,144 +3187,152 @@
   <t t-name="o-spreadsheet-ScorecardChartDesignPanel">
     <t t-set="color_up">Color Up</t>
     <t t-set="color_down">Color Down</t>
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
-            title="backgroundColorTitle"
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-1'">
+          <t t-set-slot="title">Number formatting</t>
+          <Checkbox
+            name="'humanizeNumbers'"
+            label="humanizeNumbersLabel"
+            value="props.definition.humanize"
+            onChange.bind="updateHumanizeNumbers"
           />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Baseline description</t>
-        <input
-          type="text"
-          t-att-value="translate(props.definition.baselineDescr)"
-          t-on-change="updateBaselineDescr"
-          class="o-input o-optional"
-        />
-      </Section>
-    </div>
-    <Section class="'o-chart-baseline-color'">
-      <t t-set-slot="title" t-esc="colorsSectionTitle"/>
-      <div class="d-flex align-items-center mb-2">
-        <RoundColorPicker
-          currentColor="props.definition.baselineColorUp"
-          onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
-          title="color_up"
-        />
-        <span class="ps-2">Color on value increase</span>
-      </div>
-      <div class="d-flex align-items-center">
-        <RoundColorPicker
-          currentColor="props.definition.baselineColorDown"
-          onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
-          title="color_down"
-        />
-        <span class="ps-2">Color on value decrease</span>
-      </div>
-    </Section>
-    <Section class="'pt-1'">
-      <t t-set-slot="title">Number formatting</t>
-      <Checkbox
-        name="'humanizeNumbers'"
-        label="humanizeNumbersLabel"
-        value="props.definition.humanize"
-        onChange.bind="updateHumanizeNumbers"
-      />
-    </Section>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SidePanelCollapsible collapsedAtInit="true">
+      <t t-set-slot="title">Baseline</t>
+      <t t-set-slot="content">
+        <Section>
+          <t t-set-slot="title">Baseline description</t>
+          <input
+            type="text"
+            t-att-value="translate(props.definition.baselineDescr)"
+            t-on-change="updateBaselineDescr"
+            class="o-input o-optional"
+          />
+        </Section>
+        <Section class="'o-chart-baseline-color'">
+          <t t-set-slot="title" t-esc="colorsSectionTitle"/>
+          <div class="d-flex align-items-center mb-2">
+            <RoundColorPicker
+              currentColor="props.definition.baselineColorUp"
+              onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
+              title="color_up"
+            />
+            <span class="ps-2">Color on value increase</span>
+          </div>
+          <div class="d-flex align-items-center">
+            <RoundColorPicker
+              currentColor="props.definition.baselineColorDown"
+              onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
+              title="color_down"
+            />
+            <span class="ps-2">Color on value decrease</span>
+          </div>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
   </t>
 
   <t t-name="o-spreadsheet-WaterfallChartDesignPanel">
-    <div>
-      <Section class="'o-chart-background-color'">
-        <t t-set-slot="title">Background color</t>
-        <div class="d-flex align-items-center">
-          <span class="me-2">Select a color...</span>
-          <RoundColorPicker
-            currentColor="props.definition.background"
-            onColorPicked="(color) => this.updateColor('background', color)"
-          />
-        </div>
-      </Section>
-      <ChartTitle title="title" update.bind="updateTitle"/>
-      <Section>
-        <t t-set-slot="title">Vertical axis position</t>
-        <select
-          t-att-value="props.definition.verticalAxisPosition"
-          class="o-input o-chart-vertical-axis-position"
-          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-        </select>
-      </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.updateSelect('legendPosition', 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">Waterfall options</t>
-        <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
-        <Checkbox
-          name="'firstValueAsSubtotal'"
-          label="firstValueAsSubtotal"
-          value="props.definition.firstValueAsSubtotal"
-          onChange.bind="onUpdateFirstValueAsSubtotal"
-        />
-        <t t-set="showSubTotalsLabel">Show subtotals at the end of series</t>
-        <Checkbox
-          name="'showSubTotals'"
-          label="showSubTotalsLabel"
-          value="props.definition.showSubTotals"
-          onChange.bind="onUpdateShowSubTotals"
-        />
-        <t t-set="showConnectorLinesLabel">Show connector lines</t>
-        <Checkbox
-          name="'showConnectorLines'"
-          label="showConnectorLinesLabel"
-          value="props.definition.showConnectorLines"
-          onChange.bind="onUpdateShowConnectorLines"
-        />
-      </Section>
-      <Section>
-        <t t-set-slot="title">Waterfall colors</t>
-        <div class="o-waterfall-positive-color d-flex align-items-center mb-1">
-          <RoundColorPicker
-            currentColor="positiveValuesColor"
-            onColorPicked="(color) => this.updateColor('positiveValuesColor', color)"
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section>
+          <t t-set-slot="title">Vertical axis position</t>
+          <select
+            t-att-value="props.definition.verticalAxisPosition"
+            class="o-input o-chart-vertical-axis-position"
+            t-on-change="(ev) => this.updateVerticalAxisPosition(ev)">
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+          </select>
+        </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>
+      </t>
+    </GeneralDesignEditor>
+    <SidePanelCollapsible collapsedAtInit="true">
+      <t t-set-slot="title">Waterfall design</t>
+      <t t-set-slot="content">
+        <Section class="'pt-0'">
+          <t t-set-slot="title">Waterfall options</t>
+          <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
+          <Checkbox
+            name="'firstValueAsSubtotal'"
+            label="firstValueAsSubtotal"
+            value="props.definition.firstValueAsSubtotal"
+            onChange.bind="onUpdateFirstValueAsSubtotal"
           />
-          <span class="ps-2">Color of positive values</span>
-        </div>
-        <div class="o-waterfall-negative-color d-flex align-items-center mb-1">
-          <RoundColorPicker
-            currentColor="negativeValuesColor"
-            onColorPicked="(color) => this.updateColor('negativeValuesColor', color)"
+          <t t-set="showSubTotalsLabel">Show subtotals at the end of series</t>
+          <Checkbox
+            name="'showSubTotals'"
+            label="showSubTotalsLabel"
+            value="props.definition.showSubTotals"
+            onChange.bind="onUpdateShowSubTotals"
           />
-          <span class="ps-2">Color of negative values</span>
-        </div>
-        <div class="o-waterfall-subtotal-color d-flex align-items-center">
-          <RoundColorPicker
-            currentColor="subTotalValuesColor"
-            onColorPicked="(color) => this.updateColor('subTotalValuesColor', color)"
+          <t t-set="showConnectorLinesLabel">Show connector lines</t>
+          <Checkbox
+            name="'showConnectorLines'"
+            label="showConnectorLinesLabel"
+            value="props.definition.showConnectorLines"
+            onChange.bind="onUpdateShowConnectorLines"
           />
-          <span class="ps-2">Color of subtotals</span>
-        </div>
-      </Section>
-    </div>
+        </Section>
+        <Section>
+          <t t-set-slot="title">Waterfall colors</t>
+          <div class="o-waterfall-positive-color d-flex align-items-center mb-1">
+            <RoundColorPicker
+              currentColor="positiveValuesColor"
+              onColorPicked="(color) => this.updateColor('positiveValuesColor', color)"
+            />
+            <span class="ps-2">Color of positive values</span>
+          </div>
+          <div class="o-waterfall-negative-color d-flex align-items-center mb-1">
+            <RoundColorPicker
+              currentColor="negativeValuesColor"
+              onColorPicked="(color) => this.updateColor('negativeValuesColor', color)"
+            />
+            <span class="ps-2">Color of negative values</span>
+          </div>
+          <div class="o-waterfall-subtotal-color d-flex align-items-center">
+            <RoundColorPicker
+              currentColor="subTotalValuesColor"
+              onColorPicked="(color) => this.updateColor('subTotalValuesColor', color)"
+            />
+            <span class="ps-2">Color of subtotals</span>
+          </div>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+    <SidePanelCollapsible collapsedAtInit="true">
+      <t t-set-slot="title">Axis title</t>
+      <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.Checkbox">
@@ -3276,6 +3353,27 @@
     </label>
   </t>
 
+  <t t-name="o-spreadsheet-SidePanelCollapsible">
+    <div class="p-1 m-1" t-att-class="props.class">
+      <div class="o_side_panel_collapsible_title d-flex align-items-center">
+        <span
+          t-att-id="'btn-collapse-'+currentId"
+          t-att-class="{ 'collapsed': props.collapsedAtInit }"
+          class="collapsor w-100"
+          data-bs-toggle="collapse"
+          t-att-data-bs-target="'#box-collapse-'+currentId">
+          <t t-slot="title"/>
+        </span>
+      </div>
+      <div
+        t-att-id="'box-collapse-'+currentId"
+        t-att-class="{'show': !props.collapsedAtInit}"
+        class="collapsible_section collapse">
+        <t t-slot="content"/>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet.RoundColorPicker">
     <div
       class="o-round-color-picker-button rounded-circle"
@@ -4170,18 +4268,6 @@
     </div>
   </t>
 
-  <div t-name="o-spreadsheet-AllPivotsSidePanel" class="o_spreadsheet_pivot_side_panel">
-    <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
-      <PivotPreview pivotId="pivotId"/>
-    </t>
-  </div>
-
-  <t t-name="o-spreadsheet-PivotPreview">
-    <div class="o_side_panel_select" t-ref="pivotPreview" t-on-click="this.selectPivot">
-      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-EditableName">
     <t t-if="state.isEditing">
       <div>
@@ -4205,32 +4291,31 @@
       Add
     </span>
     <Popover t-if="popover.isOpen" t-props="popoverProps">
-      <div class="p-2 bg-white border-bottom d-flex align-items-baseline pivot-dimension-search">
+      <div
+        class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search">
         <i class="pe-1 pivot-dimension-search-field-icon">
           <t t-call="o-spreadsheet-Icon.SEARCH"/>
         </i>
         <input
-          t-model="search.input"
+          t-on-input="(ev) => this.updateSearch(ev.target.value)"
           t-on-keydown="onKeyDown"
           class="border-0 w-100 pivot-dimension-search-field"
-          autofocus="1"
+          t-ref="autofocus"
         />
       </div>
-      <div
-        t-foreach="filteredFields"
-        t-as="field"
-        t-key="field.name"
-        t-esc="field.string"
-        t-att-title="field.help"
-        t-on-click="() => this.pickField(field)"
-        class="p-1 px-2 pivot-dimension-field"
-        role="button"
+      <TextValueProvider
+        proposals="autoComplete.provider.proposals"
+        selectedIndex="autoComplete.selectedIndex"
+        onValueSelected="autoComplete.provider.selectProposal"
+        onValueHovered="() => {}"
       />
     </Popover>
   </t>
 
   <t t-name="o-spreadsheet-PivotDimension">
-    <div class="border py-1 px-2 d-flex flex-column shadow-sm pivot-dimension">
+    <div
+      class="border py-1 px-2 d-flex flex-column shadow-sm pivot-dimension"
+      t-att-class="{'bg-danger': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
         <span class="fw-bold" t-esc="props.dimension.displayName"/>
         <i
@@ -4252,7 +4337,7 @@
           class="o_input flex-basis-50"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
           <option
-            t-foreach="allGranularities"
+            t-foreach="props.allGranularities"
             t-as="granularity"
             t-key="granularity"
             t-if="props.availableGranularities.has(granularity) || granularity === props.dimension.granularity"
@@ -4272,17 +4357,23 @@
         <select
           class="o_input flex-basis-50"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option value="" t-att-selected="props.dimension.order === undefined">Automatic</option>
           <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
           <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
+          <option
+            t-if="props.dimension.type !== 'date'"
+            value=""
+            t-att-selected="props.dimension.order === undefined">
+            Unsorted
+          </option>
         </select>
       </div>
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-PivotDimensions">
-    <div class="o_side_panel_section pivot-dimensions" t-ref="pivot-dimensions">
-      <div class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center">
+  <t t-name="o-spreadsheet-PivotLayoutConfigurator">
+    <div class="o_side_panel_section 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">
         Columns
         <AddDimensionButton
           onFieldPicked.bind="addColumnDimension"
@@ -4300,13 +4391,14 @@
               dimension="col"
               onUpdated.bind="this.updateGranularity"
               availableGranularities="props.unusedDateTimeGranularities[col.name]"
+              allGranularities="props.allGranularities"
             />
             <PivotDimensionOrder dimension="col" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center"
+        class="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
@@ -4325,12 +4417,14 @@
               dimension="row"
               onUpdated.bind="this.updateGranularity"
               availableGranularities="props.unusedDateTimeGranularities[row.name]"
+              allGranularities="props.allGranularities"
             />
             <PivotDimensionOrder dimension="row" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
         </div>
       </t>
-      <div class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center">
+      <div
+        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Measures
         <AddDimensionButton
           onFieldPicked.bind="addMeasureDimension"
@@ -4366,6 +4460,93 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotListItem">
+    <div
+      class="o_pivot_list_item p-4 border-bottom"
+      t-ref="pivotListItem"
+      t-on-click="this.selectPivot">
+      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotSidePanel">
+    <t t-if="props.pivotId" t-component="sidePanelEditor" t-props="props"/>
+    <t t-else="">
+      <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
+        <PivotListItem pivotId="pivotId"/>
+      </t>
+    </t>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
+    <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
+      <div class="h-100 overflow-auto">
+        <Section>
+          <t t-set-slot="title">Name</t>
+          <EditableName name="name" displayName="displayName" onChanged.bind="onNameChanged"/>
+          <div class="btn btn-link o_duplicate_pivot" t-on-click="duplicatePivot">
+            <i class="fa fa-solid fa-copy me-1"/>
+            Duplicate Pivot
+          </div>
+        </Section>
+        <Section>
+          <t t-set-slot="title">Range</t>
+          <SelectionInput
+            ranges="ranges"
+            required="true"
+            isInvalid="shouldDisplayInvalidRangeError"
+            hasSingleRange="true"
+            onSelectionChanged="(ranges) => this.onSelectionChanged(ranges)"
+            onSelectionConfirmed="() => this.onSelectionConfirmed()"
+          />
+          <span
+            class="text-danger sp_range_error_message"
+            t-if="shouldDisplayInvalidRangeError"
+            t-esc="pivot.invalidRangeMessage"
+          />
+        </Section>
+
+        <PivotLayoutConfigurator
+          t-if="!pivot.isInvalidRange"
+          unusedGroupableFields="store.unusedGroupableFields"
+          unusedMeasureFields="store.unusedMeasureFields"
+          unusedDateTimeGranularities="store.unusedDateTimeGranularities"
+          allGranularities="store.allGranularities"
+          definition="definition"
+          onDimensionsUpdated.bind="onDimensionsUpdated"
+        />
+        <Section>
+          <button class="btn btn-link sp_back" t-on-click="back">Back</button>
+          <button class="btn btn-link sp_delete" t-on-click="delete">Delete</button>
+        </Section>
+      </div>
+      <Section
+        class="'align-items-center border-top d-flex flex-row justify-content-between py-1 pivot-defer-update'">
+        <Checkbox
+          label="deferUpdatesLabel"
+          title="deferUpdatesTooltip"
+          value="store.updatesAreDeferred"
+          onChange="(value) => store.deferUpdates(value)"
+        />
+        <div>
+          <i
+            t-if="store.isDirty"
+            class="btn btn-sm pe-0 fa fa-undo"
+            title="Discard all changes"
+            t-on-click="() => store.discardPendingUpdate()"
+          />
+          <span
+            t-if="store.isDirty"
+            class="btn btm-sm btn-link sp_apply_update"
+            title="Apply all changes"
+            t-on-click="() => store.applyUpdate()">
+            Update
+          </span>
+        </div>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>