@odoo/o-spreadsheet 17.3.0-alpha.0 → 17.3.0-alpha.10

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.0
- @date 2024-03-20T13:43:11.141Z
- @hash 073e154
+ @version 17.3.0-alpha.10
+ @date 2024-05-29T15:28:51.457Z
+ @hash f95d4f5
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -18,7 +18,7 @@
         <t t-call="{{iconTitle}}"/>
       </span>
       <t t-if="props.hasTriangleDownIcon">
-        <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+        <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
       </t>
     </span>
   </t>
@@ -103,7 +103,7 @@
               dropdownMaxHeight="this.props.dropdownMaxHeight"
               class="'o-dropdown-button o-border-picker-button'"
             />
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
           </div>
           <div
             class="o-border-style-tool d-flex align-items-center justify-content-center o-hoverable-button"
@@ -111,7 +111,7 @@
             t-ref="lineStyleButton"
             t-on-click.stop="(ev) => this.toggleDropdownTool('borderTypeTool')">
             <t t-call="o-spreadsheet-Icon.BORDER_TYPE"/>
-            <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
             <Popover
               t-props="lineStylePickerPopoverProps"
               t-if="state.activeTool === 'borderTypeTool'">
@@ -276,24 +276,24 @@
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
-          t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
+          t-att-contenteditable="state.isEditing ? 'true': 'false'"
         />
         <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
-          <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
     </Ripple>
   </t>
 
-  <t t-name="o-spreadsheet-BottomBarStatisic">
+  <t t-name="o-spreadsheet-BottomBarStatistic">
     <t t-set="selectedStatistic" t-value="getSelectedStatistic()"/>
     <Ripple class="'ms-auto'" t-if="selectedStatistic !== undefined">
       <div
-        class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow"
+        class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
         t-on-click="listSelectionStatistics">
         <t t-esc="selectedStatistic"/>
         <span class="ms-2">
-          <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
     </Ripple>
@@ -365,7 +365,7 @@
           <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
             <div class="o-hue-picker" t-on-click.stop=""/>
             <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
+              <t t-call="o-spreadsheet-Icon.CARET_UP"/>
             </div>
           </div>
           <div class="o-custom-input-preview">
@@ -471,6 +471,7 @@
         t-on-compositionstart="onCompositionStart"
         t-on-compositionend="onCompositionEnd"
         t-on-dblclick="onDblClick"
+        t-on-contextmenu="onContextMenu"
       />
 
       <div
@@ -507,7 +508,7 @@
           }">
       <t t-set="context" t-value="getContext()"/>
       <div
-        class="o-formula-assistant bg-white"
+        class="o-formula-assistant"
         t-if="context.functionName"
         t-on-pointermove="onMouseMove"
         t-att-class="{'opacity-25': assistantState.allowCellSelectionBehind}">
@@ -515,7 +516,7 @@
           <span t-esc="context.functionName"/>
           (
           <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-            <span t-if="arg_index > '0'">,&#xA0;</span>
+            <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
             <span t-att-class="{ 'o-formula-assistant-focus': context.argToFocus === arg_index }">
               <span>
                 <span t-if="arg.optional || arg.repeating || arg.default">[</span>
@@ -574,16 +575,17 @@
       class="o-topbar-composer bg-white user-select-text"
       t-on-click.stop=""
       t-att-style="containerStyle">
-      <Composer focus="focus" inputStyle="composerStyle" onComposerContentFocused.bind="onFocus"/>
+      <Composer
+        focus="focus"
+        inputStyle="composerStyle"
+        onComposerContentFocused.bind="onFocus"
+        delimitation="delimitation"
+      />
     </div>
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div
-      class="o-grid o-two-columns"
-      tabindex="-1"
-      t-on-wheel="onMouseWheel"
-      t-on-click="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"
@@ -600,13 +602,12 @@
         <div
           t-foreach="getClickableCells()"
           t-as="clickableCell"
-          t-key="clickableCell.tKey"
+          t-key="clickableCell_index"
           class="o-dashboard-clickable-cell"
           t-on-click="() => this.selectClickableCell(clickableCell)"
           t-on-contextmenu.prevent=""
           t-att-style="getCellClickableStyle(clickableCell.coordinates)"
         />
-        <FilterIconsOverlay/>
       </div>
       <VerticalScrollBar/>
       <HorizontalScrollBar/>
@@ -806,7 +807,7 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterIcon">
-    <div class="o-filter-icon" t-att-class="iconClass" t-on-click.stop="onClick">
+    <div class="o-filter-icon" t-att-class="iconClass" t-on-click="onClick">
       <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
       <t t-else="" t-call="o-spreadsheet-Icon.FILTER_ICON"/>
     </div>
@@ -817,7 +818,7 @@
       t-foreach="getFilterHeadersPositions()"
       t-as="position"
       t-key="'filter'+position.col + '_' + position.row">
-      <GridCellIcon cellPosition="position" offset="props.gridPosition" horizontalAlign="'right'">
+      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
         <FilterIcon cellPosition="position"/>
       </GridCellIcon>
     </t>
@@ -825,15 +826,17 @@
 
   <t t-name="o-spreadsheet-FilterMenu">
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
-      <div t-if="!isReadonly">
-        <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('ascending')">
-          Sort ascending (A ⟶ Z)
-        </div>
-        <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('descending')">
-          Sort descending (Z ⟶ A)
+      <t t-if="isSortable">
+        <div>
+          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('ascending')">
+            Sort ascending (A ⟶ Z)
+          </div>
+          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('descending')">
+            Sort descending (Z ⟶ A)
+          </div>
         </div>
-      </div>
-      <div class="o-separator" t-if="!isReadonly"/>
+        <div class="o-separator"/>
+      </t>
       <div class="o-filter-menu-actions">
         <div class="o-filter-menu-action-text" t-on-click="selectAll">Select all</div>
         <div class="o-filter-menu-action-text" t-on-click="clearAll">Clear</div>
@@ -922,7 +925,7 @@
           t-ref="inputFontSize"
         />
         <span>
-          <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
       <div
@@ -947,8 +950,7 @@
       tabindex="-1"
       t-on-click="focusDefaultElement"
       t-on-keydown="onKeydown"
-      t-on-wheel="onMouseWheel"
-      t-on-contextmenu="onInputContextMenu"
+      t-on-wheel.prevent="onMouseWheel"
       t-ref="grid">
       <GridOverlay
         onCellClicked.bind="onCellClicked"
@@ -961,7 +963,10 @@
         onFigureDeleted.bind="focusDefaultElement"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
-      <GridComposer gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"/>
+      <GridComposer
+        gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"
+        onInputContextMenu.bind="onInputContextMenu"
+      />
       <canvas t-ref="canvas"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
@@ -996,7 +1001,9 @@
         position="menuState.position"
         onClose="() => this.closeMenu()"
       />
-      <FilterIconsOverlay gridPosition="{ x: HEADER_WIDTH, y : HEADER_HEIGHT }"/>
+      <t t-foreach="staticTables" t-as="table" t-key="table.id">
+        <TableResizer table="table"/>
+      </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
       <HorizontalScrollBar leftOffset="HEADER_WIDTH"/>
       <div class="o-scrollbar corner"/>
@@ -1008,7 +1015,12 @@
       class="o-grid-add-rows mt-2 ms-2 w-100 d-flex position-relative align-items-center"
       t-att-style="addRowsPosition"
       t-on-pointerdown.stop.prevent="">
-      <button t-on-click="onConfirm" t-att-disabled="state.errorFlag" class="o-button">Add</button>
+      <button
+        t-on-click="onConfirm"
+        t-att-disabled="state.errorFlag"
+        class="o-button o-button-grey">
+        Add
+      </button>
       <input
         type="text"
         class="o-grid-add-rows-input o-input mt-0 me-2"
@@ -1044,6 +1056,7 @@
       t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
+      <FilterIconsOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -1204,25 +1217,22 @@
         t-as="hiddenItem"
         t-key="hiddenItem_index">
         <div
-          class="o-unhide-buttons position-relative float-end"
+          class="position-absolute end-0 translate-middle-y"
           t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <t t-if="!hiddenItem.includes(0)">
-            <div
-              class="o-unhide rounded mb-1"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
-            </div>
-          </t>
-          <t
-            t-if="!hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-            </div>
-          </t>
+          <div
+            class="o-unhide rounded mb-1"
+            t-att-class="{'invisible': hiddenItem.includes(0)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_UP"/>
+          </div>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </div>
         </div>
       </t>
     </div>
@@ -1263,25 +1273,22 @@
         t-as="hiddenItem"
         t-key="hiddenItem_index">
         <div
-          class="o-unhide-buttons position-relative h-100 d-flex align-items-center"
+          class="position-absolute h-100 d-flex align-items-center translate-middle-x gap-2"
           t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <t t-if="!hiddenItem.includes(0)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
-            </div>
-          </t>
-          <t
-            t-if="!hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
-            </div>
-          </t>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(0)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_LEFT"/>
+          </div>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
+          </div>
         </div>
       </t>
     </div>
@@ -1429,12 +1436,9 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.COPY">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M14.5 15.23v1.5H3a1 1 0 0 1-1-1V3.23h1.5v11a1 1 0 0 0 1 1h10m0-3.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6.5a1 1 0 0 1 1 1m-9-2.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1H15a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-clone"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CUT">
     <svg class="o-icon">
@@ -1452,22 +1456,6 @@
       />
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.FIND_AND_REPLACE">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M10.75 11.25c-1 .75-2.25 1.25-3.5 1.25-3 0-5.5-2.5-5.5-5.5s2.5-5.5 5.5-5.5 5.5 2.5 5.5 5.5c0 1.25-.5 2.5-1.25 3.5l.25.25h.75l4 4-1.5 1.5-4-4v-.75l-.25-.25ZM7.25 11c2.25 0 4-1.75 4-4s-1.75-4-4-4-4 1.75-4 4 1.75 4 4 4"
-      />
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.DELETE">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M12 1.75v-1H6v1H1.5v2h1v12a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-12h1v-2M4 15.75v-12h10v12Zm2-10.5h2v9H6Zm4 0h2v9h-2"
-      />
-    </svg>
-  </t>
   <t t-name="o-spreadsheet-Icon.CLEAR">
     <svg class="o-icon">
       <path
@@ -1493,12 +1481,9 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.SHOW">
-    <svg class="o-icon" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
-      <path stroke-width="1.35" d="M1,12 S11.5,0 23,12 M1,12 S11.5,24 23,12"/>
-      <path d="M1.26,11.7 A .4 .3 1 0 0 1.2,12.3"/>
-      <path d="M22.8,11.7 A .4 .3 1 0 1 22.75,12.3"/>
-      <circle stroke-width="1.35" stroke="currentcolor" cx="12" cy="12" r="3"/>
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-eye"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FORMULA">
     <svg class="o-icon">
@@ -1613,34 +1598,24 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHART">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m1.5 12.5h2v-7h-2m3 7h2v-10h-2m3 10h2v-5h-2m3 5h2v-11h-2M2 14.5h14v1H2"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-bar-chart"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_IMAGE">
-    <svg class="o-icon" fill="currentColor">
-      <path
-        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m10 4.5L10 11 8.5 9.5l-2 2.5L5 10.5l-2 3h12M3.5,5a1.5,1.5,0,0,1,3,0a1.5,1.5,0,0,1,-3,0"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-file-image-o"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_LINK">
-    <svg class="o-icon" fill="currentColor">
-      <path
-        d="M6.88 13.69c.19-.19.41-.28.68-.28.27 0 .51.09.72.28.43.45.43.92 0 1.4l-.84.8c-.75.75-1.63 1.12-2.64 1.12-1.04 0-1.93-.37-2.68-1.12C1.37 15.14 1 14.26 1 13.25c0-1.04.37-1.93 1.12-2.68l2.96-2.96c.93-.9 1.89-1.42 2.88-1.54.98-.12 1.84.17 2.56.86.21.21.32.45.32.72 0 .26-.1.51-.32.72-.48.43-.95.43-1.4 0-.67-.64-1.55-.41-2.67.68l-2.93 2.92c-.35.35-.52.77-.52 1.28s.17.92.52 1.24c.35.35.76.52 1.26.52.49 0 .91-.17 1.26-.52l.84-.8m9-11.48c.75.75 1.12 1.63 1.12 2.64 0 1.04-.37 1.94-1.12 2.68l-3.16 3.16c-.99.96-1.99 1.44-3 1.44-.83 0-1.57-.33-2.24-1a.913.913 0 0 1-.28-.68c0-.27.09-.5.27-.72.19-.19.43-.28.71-.28.28 0 .51.09.7.28.66.64 1.48.48 2.44-.48l3.16-3.12c.37-.37.56-.8.56-1.28 0-.51-.19-.92-.56-1.24-.32-.35-.7-.56-1.12-.62-.43-.07-.83.07-1.2.42l-1 1c-.22.19-.45.28-.72.28-.26 0-.5-.09-.68-.28-.46-.45-.46-.92 0-1.4l1-1c.72-.72 1.56-1.06 2.54-1.02.97.04 1.83.45 2.58 1.22"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-link"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
-    <svg class="o-icon">
-      <path
-        fill="currentColor"
-        d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2m13 4-1.4-1.4L7 11.2 4.4 8.6 3 10l4 4z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-check-square-o"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
     <svg class="o-icon">
@@ -1682,26 +1657,6 @@
       />
     </svg>
   </t>
-  <t t-name="o-spreadsheet-Icon.TRIANGLE_DOWN">
-    <svg class="o-icon" viewBox="0 0 18 18">
-      <polygon fill="currentColor" points="5 7 9 11 13 7"/>
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.TRIANGLE_UP">
-    <svg class="o-icon" transform="rotate(180)">
-      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.TRIANGLE_RIGHT">
-    <svg class="o-icon" transform="rotate(-90)">
-      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-    </svg>
-  </t>
-  <t t-name="o-spreadsheet-Icon.TRIANGLE_LEFT">
-    <svg class="o-icon" transform="rotate(90)" viewBox="0 0 18 18">
-      <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-    </svg>
-  </t>
   <t t-name="o-spreadsheet-Icon.BOLD">
     <svg class="o-icon">
       <path
@@ -1944,70 +1899,44 @@
   </t>
 
   <t t-name="o-spreadsheet-Icon.EDIT">
-    <svg class="o-icon" viewBox="0 0 576 512">
-      <path
-        fill="currentColor"
-        d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-pencil-square-o"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
-    <svg class="o-icon" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M304.083 405.907c4.686 4.686 4.686 12.284 0 16.971l-44.674 44.674c-59.263 59.262-155.693 59.266-214.961 0-59.264-59.265-59.264-155.696 0-214.96l44.675-44.675c4.686-4.686 12.284-4.686 16.971 0l39.598 39.598c4.686 4.686 4.686 12.284 0 16.971l-44.675 44.674c-28.072 28.073-28.072 73.75 0 101.823 28.072 28.072 73.75 28.073 101.824 0l44.674-44.674c4.686-4.686 12.284-4.686 16.971 0l39.597 39.598zm-56.568-260.216c4.686 4.686 12.284 4.686 16.971 0l44.674-44.674c28.072-28.075 73.75-28.073 101.824 0 28.072 28.073 28.072 73.75 0 101.823l-44.675 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.598 39.598c4.686 4.686 12.284 4.686 16.971 0l44.675-44.675c59.265-59.265 59.265-155.695 0-214.96-59.266-59.264-155.695-59.264-214.961 0l-44.674 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.597 39.598zm234.828 359.28l22.627-22.627c9.373-9.373 9.373-24.569 0-33.941L63.598 7.029c-9.373-9.373-24.569-9.373-33.941 0L7.029 29.657c-9.373 9.373-9.373 24.569 0 33.941l441.373 441.373c9.373 9.372 24.569 9.372 33.941 0z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-chain-broken"/>
+    </div>
   </t>
-  <!-- Font Awesome by Dave Gandy
-http://fontawesome.io/
-https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-Icon.CARET_UP">
-    <svg class="caret-up" viewBox="0 0 320 512">
-      <path
-        fill="currentColor"
-        d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"
-      />
-    </svg>
+    <div class="o-icon fa-small">
+      <i class="fa fa-caret-up"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_DOWN">
-    <svg class="caret-down" viewBox="0 0 320 512">
-      <path
-        fill="currentColor"
-        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-      />
-    </svg>
+    <div class="o-icon fa-small">
+      <i class="fa fa-caret-down"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_RIGHT">
-    <svg class="o-icon caret-right" viewBox="0 0 192 512">
-      <path
-        d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
-      />
-    </svg>
+    <div class="o-icon fa-small">
+      <i class="fa fa-caret-right"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_LEFT">
-    <svg class="o-icon caret-left" viewBox="0 0 192 512">
-      <path
-        d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"
-      />
-    </svg>
+    <div class="o-icon fa-small">
+      <i class="fa fa-caret-left"/>
+    </div>
   </t>
-
   <t t-name="o-spreadsheet-Icon.TRASH">
-    <svg class="o-cf-icon trash" viewBox="0 0 448 512">
-      <path
-        fill="currentColor"
-        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-trash-o"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.REFRESH">
-    <svg class="o-cf-icon refresh" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-refresh"/>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-Icon.ARROW_DOWN">
@@ -2110,25 +2039,19 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_ASCENDING">
-    <svg class="o-icon" fill="currentColor">
-      <path d="m3 13-1-1-1 1 3 3 3-3-1-1-1 1V0H3"/>
-      <text x="9" y="7" class="small-text">A</text>
-      <text x="9.3" y="15" class="small-text">Z</text>
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-sort-alpha-asc"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_DESCENDING">
-    <svg class="o-icon" fill="currentColor">
-      <path d="m3 13.9-1-1-1 1 3 3 3-3-1-1-1 1V.9H3"/>
-      <text x="9.3" y="7.9" class="small-text">Z</text>
-      <text x="9" y="15.9" class="small-text">A</text>
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-sort-alpha-desc"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DATA_CLEANUP">
-    <svg class="o-icon" fill="currentColor">
-      <path
-        d="m13.6 6.4-2.1-2.1c-.4-.4-1-.4-1.4 0l-8.8 8.9c-.4.4-.4 1 0 1.4l2.1 2.1c.4.4 1 .4 1.4 0l8.8-8.9c.4-.4.4-1 0-1.4M8 8.5 10.5 6l1.4 1.4-2.5 2.5m3-7 1.8.8.8 1.8.8-1.8 1.8-.8-1.8-.8L14.9.4l-.8 1.8M3.5 4l1.7.7.8 1.8.8-1.8 1.8-.8-1.8-.8-.8-1.8-.8 1.8zm13.5 7.7-1.8-.8-.8-1.8-.8 1.8-1.8.8 1.8.8.8 1.8.7-1.8"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-magic"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON">
     <svg class="o-cf-icon filter-icon" viewBox="0 0 850 850">
@@ -2139,26 +2062,20 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
-    <svg class="o-cf-icon filter-icon-active" viewBox="0 0 18 18">
-      <path
-        fill="currentColor"
-        d="M16.6.5H1.29C.59.5.23 1.35.73 1.85l6.1 6.1v6.8c0 .26.13.5.34.65l2.64 1.85a.79.79 0 0 0 1.25-.65V7.96l6.1-6.1A.79.79 0 0 0 16.6.51"
-      />
-    </svg>
+    <div class="o-icon filter-icon-active">
+      <i class="fa fa-filter"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SEARCH">
-    <svg class="search-icon" width="10" height="10" focusable="false" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-search"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
     <svg class="o-icon" viewBox="0 0 24 24">
       <path
         fill="currentColor"
-        d="M18.707 7.293a1 1 0 0 1 0 1.414L11.414 16a2 2 0 0 1-2.828 0l-3.293-3.293a1 1 0 1 1 1.414-1.414L10 14.586l7.293-7.293a1 1 0 0 1 1.414 0z"
+        d="M18.707 7.293a1 1 0 0 1 0 1.414L11.414 16a1.8 2 0 0 1-2.828 0l-3.293-3.293a1 1 0 1 1 1.414-1.414L10 14.586l7.293-7.293a1 1 0 0 1 1.414 0z"
       />
     </svg>
   </t>
@@ -2185,12 +2102,9 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION">
-    <svg class="o-icon" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
-      />
-    </svg>
+    <div class="o-icon fa-small">
+      <i class="fa fa-exclamation-triangle"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
     <svg class="o-icon">
@@ -2201,12 +2115,9 @@ https://fontawesome.com/license -->
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ERROR">
-    <svg class="error-icon" width="14" height="14" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-      />
-    </svg>
+    <div class="o-icon">
+      <i class="fa fa-exclamation-circle"/>
+    </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
     <svg class="o-icon" width="18" height="18">
@@ -2312,6 +2223,27 @@ https://fontawesome.com/license -->
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.CIRCLE_INFO">
+    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        d="M9 .55a8.4 8.4 0 1 0 8.4 8.4A8.4 8.4 0 0 0 9 .55M7.6 4.155a1.4 1.4 0 1 1 1.4 1.4 1.4 1.4 0 0 1-1.4-1.4m4.9 8.995a.7.7 0 0 1-.7.7H6.9a.7.7 0 1 1 0-1.4h1.4v-4.2h-.7a.7.7 0 0 1 0-1.4h2.8v5.6h1.4a.7.7 0 0 1 .7.7"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.PIVOT">
+    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.UNUSED_PIVOT_WARNING">
+    <div class="o-unused-pivot-icon text-warning" title="This pivot is not used">
+      <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
     <div class="o-link-tool d-flex align-items-center">
@@ -2394,8 +2326,8 @@ https://fontawesome.com/license -->
         onClose="() => this.menu.isOpen=false"
       />
       <div class="o-buttons">
-        <button t-on-click="cancel" class="o-button o-cancel">Cancel</button>
-        <button t-on-click="save" class="o-button o-save" t-att-disabled="!link.url">
+        <button t-on-click="cancel" class="o-button o-button-grey o-cancel">Cancel</button>
+        <button t-on-click="save" class="o-button o-button-grey o-save" t-att-disabled="!link.url">
           Confirm
         </button>
       </div>
@@ -2428,7 +2360,9 @@ https://fontawesome.com/license -->
               t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': isActive(menuItem)}"
               t-att-style="getColor(menuItem)">
               <div class="d-flex w-100">
-                <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle">
+                <div
+                  t-if="childrenHaveIcon"
+                  class="o-menu-item-icon d-flex align-items-center flex-shrink-0">
                   <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
                 </div>
                 <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
@@ -2442,7 +2376,7 @@ https://fontawesome.com/license -->
                 <div
                   t-if="isMenuRoot"
                   class="o-menu-item-root align-middle ms-auto"
-                  t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"
+                  t-call="o-spreadsheet-Icon.CARET_RIGHT"
                 />
                 <div
                   t-elif="secondaryIcon"
@@ -2601,66 +2535,41 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-BarChartDesignPanel">
-    <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
-      <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.ChartColor">
-    <Section class="'o-chart-background-color'">
-      <t t-set-slot="title">Background color</t>
-      <div class="d-flex align-items-center">
-        <span class="pe-1">Select a color...</span>
-        <t t-set="background_color">Background color</t>
-        <ColorPickerWidget
-          currentColor="props.currentColor"
-          showColorPicker="state.pickerOpened"
-          toggleColorPicker.bind="togglePicker"
-          onColorPicked="props.onColorPicked"
-          title="background_color"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
-      </div>
+  <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"
+          />
+        </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>
@@ -2671,6 +2580,62 @@ https://fontawesome.com/license -->
     </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"/>
@@ -2694,9 +2659,12 @@ https://fontawesome.com/license -->
   </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"
@@ -2704,13 +2672,196 @@ https://fontawesome.com/license -->
         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-GaugeChartConfigPanel">
-    <div>
-      <ChartDataSeries
-        ranges="[this.getDataRange()]"
+  <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">Serie 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">Serie 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
+        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 py-0'" 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-GaugeChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="[this.getDataRange()]"
         onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
         onSelectionConfirmed="() => this.updateDataRange()"
         hasSingleRange="true"
@@ -2724,45 +2875,48 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
-    <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
-      <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">
@@ -2793,12 +2947,9 @@ https://fontawesome.com/license -->
 
         <tr>
           <td>
-            <ColorPickerWidget
+            <RoundColorPicker
               currentColor="sectionRule.colors.upperColor"
-              toggleColorPicker="(ev) => this.toggleMenu('sectionColor-upperColor', ev)"
-              showColorPicker="state.openedMenu === 'sectionColor-upperColor'"
               onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
-              icon="'o-spreadsheet-Icon.FILL_COLOR'"
             />
           </td>
           <td>Else</td>
@@ -2813,12 +2964,9 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-GaugeChartColorSectionTemplateRow">
     <tr>
       <td>
-        <ColorPickerWidget
+        <RoundColorPicker
           currentColor="sectionColor"
-          toggleColorPicker="(ev) => this.toggleMenu('sectionColor-'+sectionType, ev)"
-          showColorPicker="state.openedMenu === 'sectionColor-'+sectionType"
           onColorPicked="(color) => this.updateSectionColor(sectionType, color)"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
         />
       </td>
       <td>When value is below</td>
@@ -2846,56 +2994,6 @@ https://fontawesome.com/license -->
     </tr>
   </t>
 
-  <t t-name="o-spreadsheet-LineBarPieConfigPanel">
-    <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-LineBarPieDesignPanel">
-    <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
-      <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'">
@@ -2937,39 +3035,6 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-LineChartDesignPanel">
-    <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
-      <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">
@@ -3029,6 +3094,29 @@ https://fontawesome.com/license -->
     </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
@@ -3088,6 +3176,7 @@ https://fontawesome.com/license -->
           <option value="text">Absolute value</option>
           <option value="difference">Value change from key value</option>
           <option value="percentage">Percentage change from key value</option>
+          <option value="progress">Progress bar</option>
         </select>
       </Section>
 
@@ -3098,54 +3187,160 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-ScorecardChartDesignPanel">
     <t t-set="color_up">Color Up</t>
     <t t-set="color_down">Color Down</t>
-    <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
-      />
-      <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">Baseline color</t>
-      <div class="d-flex align-items-center">
-        <span class="pe-1">Color on value increase</span>
-        <ColorPickerWidget
-          currentColor="props.definition.baselineColorUp"
-          toggleColorPicker="() => this.toggleColorPicker('baselineColorUp')"
-          showColorPicker="state.openedColorPicker === 'baselineColorUp'"
-          onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
-          title="color_up"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
-      </div>
-      <div class="d-flex align-items-center">
-        <span class="pe-1">Color on value decrease</span>
-        <ColorPickerWidget
-          currentColor="props.definition.baselineColorDown"
-          toggleColorPicker="() => this.toggleColorPicker('baselineColorDown')"
-          showColorPicker="state.openedColorPicker === 'baselineColorDown'"
-          onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
-          title="color_down"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
+    <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"
+          />
+        </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">
+    <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"
+          />
+          <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)"
+            />
+            <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"
         />
-      </div>
-    </Section>
+      </t>
+    </SidePanelCollapsible>
   </t>
 
   <t t-name="o-spreadsheet.Checkbox">
     <label
       class="o-checkbox"
       t-att-title="props.title"
-      t-att-class="{'text-muted': props.disabled }">
+      t-att-class="{'text-muted': props.disabled }"
+      t-attf-class="{{props.className}}">
       <input
         type="checkbox"
         t-att-disabled="props.disabled"
@@ -3158,6 +3353,43 @@ https://fontawesome.com/license -->
     </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"
+      t-ref="colorPickerButton"
+      t-on-click.stop="togglePicker"
+      t-att-title="props.title"
+      t-att-style="buttonStyle"
+    />
+    <ColorPicker
+      t-if="state.pickerOpened"
+      anchorRect="colorPickerAnchorRect"
+      onColorPicked.bind="onColorPicked"
+      currentColor="props.currentColor"
+    />
+  </t>
+
   <t t-name="o_spreadsheet.Section">
     <div class="o-section" t-att-class="props.class">
       <t t-if="props.slots.title">
@@ -3340,8 +3572,12 @@ https://fontawesome.com/license -->
           <t t-set="rule" t-value="state.rules.iconSet"/>
         </t>
         <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.onExitEdition" class="o-button o-button-grey o-cf-cancel">
+            Cancel
+          </button>
+          <button
+            t-on-click="saveConditionalFormat"
+            class="o-button o-button-grey primary o-cf-save">
             Save
           </button>
         </div>
@@ -3388,19 +3624,22 @@ https://fontawesome.com/license -->
         type="text"
         class="o-input o-threshold-value o-required"
         t-model="rule[thresholdType].value"
-        t-att-class="{ 'o-invalid': isValueInvalid(thresholdType) }"
+        t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         t-if="threshold !== undefined and threshold.type !== 'value'"
       />
-      <input type="text" class="o-input o-threshold-value" t-else="" disabled="1"/>
-      <ColorPickerWidget
-        currentColor="getThresholdColor(threshold)"
-        toggleColorPicker="(ev) => this.toggleMenu('colorScale-'+thresholdType+'Color', ev)"
-        showColorPicker="state.openedMenu === 'colorScale-'+thresholdType+'Color'"
-        onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
-        title="fill_color"
-        icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        disabled="threshold === undefined"
+      <input
+        type="text"
+        t-attf-class="o-input o-threshold-value {{ threshold === undefined ? 'invisible' : ''}}"
+        t-else=""
+        disabled="1"
       />
+      <div t-attf-class="flex-shrink-0 ms-1 {{ threshold === undefined ? 'invisible' : ''}}">
+        <RoundColorPicker
+          currentColor="getThresholdColor(threshold)"
+          onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
+          title="fill_color"
+        />
+      </div>
     </div>
   </t>
 
@@ -3685,7 +3924,7 @@ https://fontawesome.com/license -->
       </Section>
       <div class="o-sidePanelButtons">
         <button
-          class="o-button"
+          class="o-button o-button-grey"
           t-on-click="() => this.apply()"
           t-att-disabled="!formatProposals.length || isSameFormat">
           Apply
@@ -3804,7 +4043,7 @@ https://fontawesome.com/license -->
       </div>
       <div class="mb-2"/>
     </t>
-    <button class="o-dv-list-add-value o-button mb-3" t-on-click="onAddAnotherValue">
+    <button class="o-dv-list-add-value o-button o-button-grey mb-3" t-on-click="onAddAnotherValue">
       Add another item
     </button>
 
@@ -3871,10 +4110,10 @@ https://fontawesome.com/license -->
       </Section>
 
       <div class="o-sidePanelButtons">
-        <button t-on-click="props.onExit" class="o-dv-cancel o-button">Cancel</button>
+        <button t-on-click="props.onExit" class="o-dv-cancel o-button o-button-grey">Cancel</button>
         <button
           t-on-click="onSave"
-          class="o-dv-save o-button primary"
+          class="o-dv-save o-button o-button-grey primary"
           t-att-class="{'o-disabled': !canSave }">
           Save
         </button>
@@ -3973,13 +4212,13 @@ https://fontawesome.com/license -->
         <button
           t-att-disabled="!hasSearchResult"
           t-on-click="() => store.selectPreviousMatch()"
-          class="o-button">
+          class="o-button o-button-grey">
           Previous
         </button>
         <button
           t-att-disabled="!hasSearchResult"
           t-on-click="() => store.selectNextMatch()"
-          class="o-button">
+          class="o-button o-button-grey">
           Next
         </button>
       </div>
@@ -3999,13 +4238,13 @@ https://fontawesome.com/license -->
         <button
           t-att-disabled="store.selectedMatchIndex === null"
           t-on-click="() => store.replace()"
-          class="o-button">
+          class="o-button o-button-grey">
           Replace
         </button>
         <button
           t-att-disabled="store.selectedMatchIndex === null"
           t-on-click="() => store.replaceAll()"
-          class="o-button">
+          class="o-button o-button-grey">
           Replace all
         </button>
       </div>
@@ -4029,6 +4268,285 @@ https://fontawesome.com/license -->
     </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="btn btn-link o_sp_en_save" t-on-click="save">Save</div>
+      <br/>
+    </t>
+    <t t-else="">
+      <div class="o_sp_en_display_name" t-esc="props.displayName"/>
+      <div class="btn btn-link o_sp_en_rename" t-on-click="rename">
+        <i class="fa fa-pencil me-1"/>
+        Rename
+      </div>
+      <br/>
+    </t>
+  </t>
+
+  <t t-name="o-spreadsheet-AddDimensionButton">
+    <span class="btn btn-sm btn-link add-dimension" t-on-click="togglePopover" t-ref="button">
+      Add
+    </span>
+    <Popover t-if="popover.isOpen" t-props="popoverProps">
+      <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-on-input="(ev) => this.updateSearch(ev.target.value)"
+          t-on-keydown="onKeyDown"
+          class="border-0 w-100 pivot-dimension-search-field"
+          t-ref="autofocus"
+        />
+      </div>
+      <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"
+      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
+          class="btn fa fa-times pe-0"
+          t-if="props.onRemoved"
+          t-on-click="() => props.onRemoved(props.dimension)"
+        />
+      </div>
+      <t t-slot="default"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotDimensionGranularity">
+    <div class="d-flex flex-row">
+      <div class="d-flex flex-row py-1 px-2 w-100 small">
+        <t t-set="granularity" t-value="props.dimension.granularity"/>
+        <div class="flex-basis-50">Granularity</div>
+        <select
+          class="o_input flex-basis-50"
+          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
+          <option
+            t-foreach="props.allGranularities"
+            t-as="granularity"
+            t-key="granularity"
+            t-if="props.availableGranularities.has(granularity) || granularity === props.dimension.granularity"
+            t-att-value="granularity"
+            t-esc="periods[granularity]"
+            t-att-selected="granularity === props.dimension.granularity or (granularity === 'month' and !props.dimension.granularity)"
+          />
+        </select>
+      </div>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotDimensionOrder">
+    <div class="d-flex">
+      <div class="d-flex py-1 px-2 w-100 small">
+        <div class="flex-basis-50">Order by</div>
+        <select
+          class="o_input flex-basis-50"
+          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
+          <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-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"
+          fields="props.unusedGroupableFields"
+        />
+      </div>
+      <t t-foreach="props.definition.columns" t-as="col" t-key="col.nameWithGranularity">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDrop(col, ev)"
+          t-att-style="dragAndDrop.itemsStyle[col.nameWithGranularity]"
+          class="pt-1">
+          <PivotDimension dimension="col" onRemoved.bind="removeDimension">
+            <PivotDimensionGranularity
+              t-if="isDateField(col)"
+              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 o-section-title"
+        t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
+        Rows
+        <AddDimensionButton
+          onFieldPicked.bind="addRowDimension"
+          fields="props.unusedGroupableFields"
+        />
+      </div>
+      <t t-foreach="props.definition.rows" t-as="row" t-key="row.nameWithGranularity">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDrop(row, ev)"
+          t-att-style="dragAndDrop.itemsStyle[row.nameWithGranularity]"
+          class="pt-1">
+          <PivotDimension dimension="row" onRemoved.bind="removeDimension">
+            <PivotDimensionGranularity
+              t-if="isDateField(row)"
+              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 o-section-title">
+        Measures
+        <AddDimensionButton
+          onFieldPicked.bind="addMeasureDimension"
+          fields="props.unusedMeasureFields"
+        />
+      </div>
+      <t t-foreach="props.definition.measures" t-as="measure" t-key="measure.nameWithAggregator">
+        <div
+          t-on-pointerdown="(ev) => this.startDragAndDropMeasures(measure, ev)"
+          t-att-style="dragAndDrop.itemsStyle[measure.name]"
+          class="pt-1 pivot-measure">
+          <PivotDimension dimension="measure" onRemoved.bind="removeMeasureDimension">
+            <div class="d-flex flex-row small">
+              <div class="d-flex flex-row py-1 px-2 w-100">
+                <div class="flex-basis-50">Aggregated by</div>
+                <select
+                  class="o_input flex-basis-50"
+                  t-on-change="(ev) => this.updateAggregator(measure, ev.target.value)">
+                  <option
+                    t-foreach="Object.keys(AGGREGATORS[measure.type])"
+                    t-as="agg"
+                    t-key="agg"
+                    t-att-value="agg"
+                    t-att-selected="agg === measure.aggregator"
+                    t-esc="AGGREGATORS[measure.type][agg]"
+                  />
+                </select>
+              </div>
+            </div>
+          </PivotDimension>
+        </div>
+      </t>
+    </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>
@@ -4063,7 +4581,7 @@ https://fontawesome.com/license -->
 
       <div class="o-sidePanelButtons">
         <button
-          class="o-button"
+          class="o-button o-button-grey"
           t-att-class="{'o-disabled': !canConfirm}"
           t-on-click="onRemoveDuplicates">
           Remove duplicates
@@ -4181,7 +4699,7 @@ https://fontawesome.com/license -->
 
         <div class="o-sidePanelButtons">
           <button
-            class="o-button"
+            class="o-button o-button-grey"
             t-att-class="{'o-disabled': isConfirmDisabled}"
             t-on-click="confirm">
             Confirm
@@ -4264,7 +4782,7 @@ https://fontawesome.com/license -->
       <Section>
         <t t-set-slot="title">Data range</t>
         <SelectionInput
-          t-key="props.table.id"
+          t-key="props.table.type"
           ranges="[this.state.tableXc]"
           hasSingleRange="true"
           onSelectionChanged="(ranges) => this.onRangeChanged(ranges)"
@@ -4277,6 +4795,20 @@ https://fontawesome.com/license -->
           value="tableConfig.automaticAutofill"
           onChange="(val) => this.updateTableConfig('automaticAutofill', val)"
         />
+        <div class="d-flex flex-row align-items-center">
+          <Checkbox
+            label="getCheckboxLabel('isDynamic')"
+            name="'isDynamic'"
+            value="props.table.type === 'dynamic'"
+            onChange.bind="this.updateTableIsDynamic"
+            disabled="!this.canBeDynamic"
+          />
+          <div
+            class="o-info-icon d-flex flex-row align-items-center text-muted ps-1"
+            t-att-title="dynamicTableTooltip">
+            <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
+          </div>
+        </div>
       </Section>
       <div class="o-sidePanelButtons">
         <button t-on-click="deleteTable" class="o-table-delete o-button">Delete table</button>
@@ -4284,6 +4816,48 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-TableStyleEditorPanel">
+    <div class="o-table-style-editor-panel">
+      <Section>
+        <t t-set-slot="title">Style name</t>
+        <input type="text" class="o-input o-optional" t-model="state.styleName"/>
+      </Section>
+      <Section class="'pt-1'">
+        <t t-set-slot="title">Style color</t>
+        <div class="d-flex align-items-center">
+          <span class="pe-2">Primary table style color</span>
+          <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
+        </div>
+      </Section>
+      <Section class="'pt-1'">
+        <t t-set-slot="title">Style template</t>
+        <div class="d-flex flex-wrap">
+          <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
+            <TableStylePreview
+              class="'o-table-style-edit-template-preview'"
+              selected="templateName === state.selectedTemplateName"
+              tableConfig="previewTableConfig"
+              tableStyle="computeTableStyle(templateName)"
+              onClick="() => this.onTemplatePicked(templateName)"
+            />
+          </t>
+        </div>
+        <div class="o-sidePanelButtons">
+          <button
+            t-if="props.styleId"
+            t-on-click="onDelete"
+            class="o-delete o-button o-button-grey danger">
+            Delete
+          </button>
+          <button t-on-click="onCancel" class="o-cancel o-button o-button-grey">Cancel</button>
+          <button t-on-click="onConfirm" class="o-confirm o-button o-button-grey primary">
+            Confirm
+          </button>
+        </div>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Spreadsheet">
     <div
       class="o-spreadsheet"
@@ -4334,26 +4908,32 @@ https://fontawesome.com/license -->
     />
   </t>
 
+  <t t-name="o-spreadsheet-TableResizer">
+    <div
+      class="o-table-resizer position-absolute"
+      t-att-style="containerStyle"
+      t-on-pointerdown="onMouseDown"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-TableStylePicker">
     <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
       <div class="d-flex flex-row overflow-hidden">
-        <div
-          class="o-table-style-list-item"
-          t-att-class="{ 'selected': styleId === props.table.config.styleId }"
-          t-foreach="getDisplayedTableStyles()"
-          t-as="styleId"
-          t-key="styleId"
-          t-att-title="getStyleName(styleId)"
-          t-on-click="() => this.onStylePicked(styleId)">
-          <div class="o-table-style-picker-preview">
-            <TableStylePreview tableConfig="getTableConfig(styleId)"/>
-          </div>
-        </div>
+        <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
+          <TableStylePreview
+            class="'o-table-style-picker-preview'"
+            selected="styleId === props.table.config.styleId"
+            tableConfig="props.table.config"
+            tableStyle="env.model.getters.getTableStyle(styleId)"
+            styleId="styleId"
+            onClick="() => this.onStylePicked(styleId)"
+          />
+        </t>
       </div>
       <div
         class="o-table-style-picker-arrow d-flex align-items-center px-1"
         t-on-click.stop="onArrowButtonClick">
-        <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+        <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
       </div>
     </div>
     <TableStylesPopover
@@ -4366,31 +4946,77 @@ https://fontawesome.com/license -->
   </t>
 
   <t t-name="o-spreadsheet-TableStylePreview">
-    <canvas t-ref="canvas" class="w-100 h-100"/>
+    <div
+      class="o-table-style-list-item position-relative"
+      t-att-class="{ 'selected': props.selected }"
+      t-att-data-id="props.styleId"
+      t-att-title="styleName"
+      t-on-click="props.onClick"
+      t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
+      <div t-att-class="props.class">
+        <canvas t-ref="canvas" class="w-100 h-100"/>
+      </div>
+      <div
+        class="o-table-style-edit-button position-absolute d-none"
+        t-if="isStyleEditable"
+        t-on-click="this.editTableStyle"
+        title="Edit custom table style">
+        <t t-call="o-spreadsheet-Icon.EDIT"/>
+      </div>
+    </div>
+    <Menu
+      t-if="menu.isOpen"
+      menuItems="menu.menuItems"
+      position="menu.position"
+      onClose.bind="this.closeMenu"
+    />
   </t>
 
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
-      <div class="o-table-style-popover d-flex flex-column px-4 py-1" t-ref="tableStyleList">
-        <div t-foreach="categories" t-as="category" t-key="category">
-          <div class="mt-2 mb-1">
-            <b t-esc="category_value"/>
+      <div
+        class="o-table-style-popover d-flex flex-column px-4 py-3"
+        t-ref="tableStyleList"
+        t-on-contextmenu.prevent="">
+        <div class="d-flex">
+          <div
+            t-foreach="Object.keys(categories)"
+            t-as="category"
+            t-key="category"
+            class="form-check d-flex align-items-center">
+            <input
+              class="form-check-input me-1"
+              type="radio"
+              t-att-id="category_value"
+              t-att-value="category_value"
+              name="category"
+              t-model="state.selectedCategory"
+            />
+            <label
+              class="form-check-label pe-4"
+              t-att-for="category_value"
+              t-esc="categories[category_value]"
+            />
           </div>
-          <div class="d-flex flex-wrap">
-            <div
-              class="o-table-style-list-item"
-              t-att-class="{ 'selected': styleId === props.selectedStyleId }"
-              t-foreach="getPresetsByCategory(category)"
-              t-as="styleId"
-              t-key="styleId"
-              t-att-title="getStyleName(styleId)"
-              t-on-click="() => this.props.onStylePicked(styleId)">
-              <div class="o-table-style-popover-preview">
-                <TableStylePreview tableConfig="getTableConfig(styleId)"/>
-              </div>
-            </div>
+        </div>
+        <hr class="hr my-2"/>
+        <div class="d-flex flex-wrap">
+          <t t-foreach="displayedStyles" t-as="styleId" t-key="styleId">
+            <TableStylePreview
+              class="'o-table-style-popover-preview'"
+              styleId="styleId"
+              selected="styleId === props.selectedStyleId"
+              tableConfig="props.tableConfig"
+              tableStyle="env.model.getters.getTableStyle(styleId)"
+              onClick="() => this.props.onStylePicked(styleId)"
+            />
+          </t>
+          <div
+            t-if="state.selectedCategory === 'custom'"
+            class="o-new-table-style o-table-style-list-item o-table-style-popover-preview d-flex justify-content-center align-items-center"
+            t-on-click="newTableStyle">
+            +
           </div>
-          <hr t-if="!category_last" class="hr mt-2 mb-0"/>
         </div>
       </div>
     </Popover>