@odoo/o-spreadsheet 17.3.0-alpha.4 → 17.3.0-alpha.6

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.4
- @date 2024-04-15T11:03:33.066Z
- @hash a32a1df
+ @version 17.3.0-alpha.6
+ @date 2024-04-26T07:40:36.934Z
+ @hash f58a0d5
 -->
 <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'">
@@ -279,7 +279,7 @@
           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>
@@ -289,11 +289,11 @@
     <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">
@@ -606,7 +606,7 @@
         <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=""
@@ -832,15 +832,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>
@@ -929,7 +931,7 @@
           t-ref="inputFontSize"
         />
         <span>
-          <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
       <div
@@ -1228,14 +1230,14 @@
             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.TRIANGLE_UP"/>
+            <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.TRIANGLE_DOWN"/>
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
           </div>
         </div>
       </t>
@@ -1284,14 +1286,14 @@
             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.TRIANGLE_LEFT"/>
+            <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.TRIANGLE_RIGHT"/>
+            <t t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
           </div>
         </div>
       </t>
@@ -1440,12 +1442,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">
@@ -1463,22 +1462,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
@@ -1504,12 +1487,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">
@@ -1624,34 +1604,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">
@@ -1693,26 +1663,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
@@ -1955,70 +1905,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">
@@ -2121,25 +2045,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">
@@ -2150,20 +2068,14 @@ 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">
@@ -2196,12 +2108,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">
@@ -2212,12 +2121,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">
@@ -2331,6 +2237,19 @@ https://fontawesome.com/license -->
       />
     </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">
@@ -2447,7 +2366,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 flex-shrink-0">
+                <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)"/>
@@ -2461,7 +2382,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"
@@ -4249,6 +4170,202 @@ https://fontawesome.com/license -->
     </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>
+        <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 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-keydown="onKeyDown"
+          class="border-0 w-100 pivot-dimension-search-field"
+          autofocus="1"
+        />
+      </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"
+      />
+    </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="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="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="" 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>
+        </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">
+        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]"
+            />
+            <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"
+        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]"
+            />
+            <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">
+        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-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -4518,6 +4635,56 @@ 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">
+          <div
+            class="o-color-preview"
+            t-att-style="colorPreviewStyle"
+            t-on-click.stop="togglePicker"
+          />
+          <span class="pe-1">Primary table style color</span>
+          <ColorPickerWidget
+            currentColor="state.primaryColor"
+            showColorPicker="state.pickerOpened"
+            toggleColorPicker.bind="togglePicker"
+            onColorPicked.bind="onColorPicked"
+            icon="'o-spreadsheet-Icon.FILL_COLOR'"
+          />
+        </div>
+      </Section>
+      <Section class="'pt-1'">
+        <t t-set-slot="title">Style template</t>
+        <div class="d-flex flex-wrap">
+          <div
+            class="o-table-style-list-item"
+            t-foreach="tableTemplates"
+            t-as="templateName"
+            t-key="templateName"
+            t-att-class="{ 'selected': templateName === state.selectedTemplateName }"
+            t-on-click="() => this.onTemplatePicked(templateName)">
+            <div class="o-table-style-edit-template-preview">
+              <TableStylePreview
+                tableConfig="previewTableConfig"
+                tableStyle="computeTableStyle(templateName)"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="o-sidePanelButtons">
+          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
+          <button t-on-click="onConfirm" class="o-confirm o-button">Confirm</button>
+        </div>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Spreadsheet">
     <div
       class="o-spreadsheet"
@@ -4586,16 +4753,21 @@ https://fontawesome.com/license -->
           t-as="styleId"
           t-key="styleId"
           t-att-title="getStyleName(styleId)"
-          t-on-click="() => this.onStylePicked(styleId)">
+          t-att-data-id="styleId"
+          t-on-click="() => this.onStylePicked(styleId)"
+          t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
           <div class="o-table-style-picker-preview">
-            <TableStylePreview tableConfig="getTableConfig(styleId)"/>
+            <TableStylePreview
+              tableConfig="props.table.config"
+              tableStyle="env.model.getters.getTableStyle(styleId)"
+            />
           </div>
         </div>
       </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
@@ -4605,6 +4777,12 @@ https://fontawesome.com/license -->
       popoverProps="state.popoverProps"
       closePopover.bind="closePopover"
     />
+    <Menu
+      t-if="menu.isOpen"
+      menuItems="menu.menuItems"
+      position="menu.position"
+      onClose.bind="this.closeMenu"
+    />
   </t>
 
   <t t-name="o-spreadsheet-TableStylePreview">
@@ -4613,28 +4791,63 @@ https://fontawesome.com/license -->
 
   <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>
+        <hr class="hr my-2"/>
+        <div class="d-flex flex-wrap">
+          <div
+            class="o-table-style-list-item"
+            t-att-class="{ 'selected': styleId === props.selectedStyleId }"
+            t-foreach="displayedStyles"
+            t-as="styleId"
+            t-key="styleId"
+            t-att-title="getStyleName(styleId)"
+            t-on-click="() => this.props.onStylePicked(styleId)"
+            t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
+            <div class="o-table-style-popover-preview">
+              <TableStylePreview
+                tableConfig="props.tableConfig"
+                tableStyle="env.model.getters.getTableStyle(styleId)"
+              />
             </div>
           </div>
-          <hr t-if="!category_last" class="hr mt-2 mb-0"/>
+          <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>
         </div>
       </div>
+      <Menu
+        t-if="menu.isOpen"
+        menuItems="menu.menuItems"
+        position="menu.position"
+        onClose.bind="this.closeMenu"
+      />
     </Popover>
   </t>