@odoo/o-spreadsheet 19.5.0-alpha.11 → 19.5.0-alpha.12

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 19.5.0-alpha.11
- @date 2026-08-12T09:17:25.295Z
- @hash bc056d7
+ @version 19.5.0-alpha.12
+ @date 2026-08-19T09:47:04.804Z
+ @hash 68ca68e
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -77,7 +77,7 @@
             t-if="this.env.model.getters.isReadonly()"
             class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
-              <i class="fa fa-eye"/>
+              <i class="oi" data-icon="visibility"/>
               Readonly Access
             </span>
           </div>
@@ -122,23 +122,25 @@
       </div>
       <div
         t-if="this.fingerprints.isEnabled"
-        class="topbar-banner irregularity-map d-flex align-items-center justify-content-between border-top">
+        class="topbar-banner irregularity-map d-flex align-items-stretch justify-content-between border-top">
         <div
           t-on-click="() => this.fingerprints.disable()"
           role="button"
           title="This tool analyzes spreadsheet formulas for patterns and highlights inconsistencies. Irregularities may indicate potential errors in formula structures, references, or arguments. (Click to turn off)"
-          class="h-100 d-flex align-items-center text-info px-3">
-          <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
+          class="d-flex align-items-center text-info px-3 text-nowrap">
+          <span class="pe-2">
+            <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
+          </span>
           Irregularity map
         </div>
         <div
-          class="ps-3 h-100 flex-fill d-flex justify-content-between rounded-0 alert alert-info ps-0 py-0 my-0">
+          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-info ps-0 py-1 my-0">
           <span class="d-flex align-items-center">
             This tool analyzes formulas for patterns and highlights inconsistencies. Irregularities
             may indicate potential errors in formula structures, references or arguments.
           </span>
           <div
-            class="ps-3 btn o-button-link flex-shrink-0"
+            class="ps-3 btn o-button-link flex-shrink-0 py-0"
             t-on-click="() => this.fingerprints.disable()">
             Turn off
           </div>
@@ -146,18 +148,18 @@
       </div>
       <div
         t-if="!this.env.model.getters.isAutomaticEvaluationEnabled()"
-        class="topbar-banner manual-evaluation d-flex align-items-center justify-content-between border-top">
-        <div class="h-100 d-flex align-items-center text-warning px-3">
-          <i class="fa fa-pause-circle me-1"/>
+        class="topbar-banner manual-evaluation d-flex align-items-stretch justify-content-between border-top">
+        <div class="d-flex align-items-center text-warning px-3 text-nowrap">
+          <i class="oi me-2" data-icon="pause_circle"/>
           Manual calculation
         </div>
         <div
-          class="ps-3 h-100 flex-fill d-flex justify-content-between rounded-0 alert alert-warning ps-0 py-0 my-0">
+          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-warning ps-0 py-1 my-0">
           <span class="d-flex align-items-center">
             Automatic evaluation is disabled. Press F9 to recalculate.
           </span>
           <div
-            class="ps-3 btn o-button-link flex-shrink-0"
+            class="ps-3 btn o-button-link flex-shrink-0 py-0"
             t-on-click="() => this.env.model.dispatch('SET_AUTOMATIC_EVALUATION', { enabled: true })">
             Re-enable
           </div>
@@ -477,6 +479,9 @@
 
   <t t-name="o-spreadsheet-StandaloneGridCanvas">
     <canvas t-ref="this.canvasRef"/>
+    <t t-foreach="this.carouselDataViews" t-as="carouselDataView" t-key="carouselDataView_index">
+      <CarouselDataViewPrint t-props="carouselDataView"/>
+    </t>
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetPrint">
@@ -660,7 +665,7 @@
         <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
           <Ripple>
             <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="this.toggleRibbon">
-              <i class="o-icon fa fa-cog"/>
+              <i class="o-icon oi oi-filled" data-icon="settings"/>
             </div>
           </Ripple>
           <BottomBar onClick="this.props.onClick"/>
@@ -676,7 +681,7 @@
           class="o-previous-button px-3 py-1 mx-2 rounded"
           t-on-click="this.onClickBack"
           t-att-title="this.backTitle">
-          <i class="fa fa-angle-left"/>
+          <i class="oi" data-icon="keyboard_arrow_left"/>
         </div>
         <span class="d-flex align-items-center" t-out="this.state.title"/>
       </div>
@@ -913,14 +918,14 @@
           t-if="this.props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded"
           t-on-click="this.props.onToggleCollapsePanel">
-          <i class="fa fa-angle-double-right"/>
+          <i class="oi" data-icon="keyboard_double_arrow_right"/>
         </div>
         <div class="o-sidePanelTitle o-fw-bold ms-2" t-out="this.getTitle()"/>
         <div
           t-if="this.props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="this.props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="keep"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded"
@@ -959,13 +964,13 @@
         <div
           t-if="this.props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded mb-1">
-          <i class="fa fa-angle-double-left"/>
+          <i class="oi" data-icon="keyboard_double_arrow_left"/>
         </div>
         <div
           t-if="this.props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="this.props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="keep"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded mb-1"
@@ -1087,14 +1092,14 @@
           class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="this.state.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-1" data-icon="tune"/>
           Configuration
         </div>
         <div
           class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="this.state.panel !== 'design' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-1" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -1372,7 +1377,8 @@
               <t t-set="errorMessage" t-value="this.getHugeDimensionErrorMessage(col)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="text-warning oi"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1413,7 +1419,8 @@
               <t t-set="errorMessage" t-value="this.getHugeDimensionErrorMessage(row)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="text-warning oi"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1504,13 +1511,14 @@
         <t t-if="measure.isHidden" t-set="hideTitle">Show</t>
         <t t-else="" t-set="hideTitle">Hide</t>
         <i
-          t-att-class="measure.isHidden ? 'fa fa-eye-slash': 'fa fa-eye'"
+          t-att-data-icon="measure.isHidden ? 'visibility_off' : 'visibility'"
           t-att-title="hideTitle"
-          class="o-button-icon pe-1 ps-2"
+          class="o-button-icon pe-1 ps-2 oi"
           t-on-click="this.toggleMeasureVisibility"
         />
         <i
-          class="o-button-icon pe-1 ps-2 fa fa-cog"
+          class="o-button-icon pe-1 ps-2 oi oi-filled"
+          data-icon="settings"
           title="Show values as"
           t-on-click="this.openShowValuesAs"
         />
@@ -1598,7 +1606,8 @@
         <div class="d-flex flex-rows">
           <t t-call-slot="upper-right-icons"/>
           <i
-            class="o-button-icon fa fa-trash pe-1 ps-2"
+            class="o-button-icon oi oi-filled pe-1 ps-2"
+            data-icon="delete"
             t-if="this.props.onRemoved"
             t-on-click="() => this.props.onRemoved(this.props.dimension)"
           />
@@ -1678,7 +1687,8 @@
       />
       <div t-if="this.props.isDirty" class="d-flex align-items-center">
         <i
-          class="o-button-icon pe-0 fa fa-undo"
+          class="o-button-icon pe-0 oi"
+          data-icon="undo"
           title="Discard all changes"
           t-on-click="() => this.props.discard()"
         />
@@ -1711,7 +1721,8 @@
                 selectContentOnFocus="true"
               />
               <i
-                class="o-button-icon ps-3 fa fa-trash"
+                class="o-button-icon ps-3 oi oi-filled"
+                data-icon="delete"
                 t-on-click="() => this.onDeleteGroup(group_index)"
               />
             </div>
@@ -1746,7 +1757,7 @@
           <div class="d-flex flex-column gap-1">
             <div class="d-flex justify-content-center mb-3">
               <button class="o-button" t-on-click="this.startProfiling">
-                <i class="fa fa-refresh me-1"/>
+                <i class="oi me-1" data-icon="refresh"/>
                 Re-analyze
               </button>
             </div>
@@ -2193,6 +2204,41 @@
     </div>
   </t>
 
+  <div t-name="o-spreadsheet-DataAnalysisPanel" class="o-data-analysis-panel">
+    <Section title.translate="Suggested charts">
+      <div t-if="this.store.hasData" class="px-2 pb-2">
+        <div t-if="this.store.chartSuggestions.length" class="o-chart-suggestions-grid">
+          <t t-foreach="this.store.chartSuggestions" t-as="suggestion" t-key="suggestion_index">
+            <ChartSuggestionPreview
+              definition="suggestion.definition"
+              description="suggestion.description"
+              onPointerDown="(ev) => this.onStartChartSuggestionDrag(suggestion.definition, ev)"
+            />
+          </t>
+        </div>
+        <div t-else="" class="o-data-analysis-empty text-muted p-3 text-center">
+          No chart suggestions available for the selected data.
+        </div>
+      </div>
+      <div t-else="" class="o-data-analysis-empty text-muted p-3 text-center">
+        Select cells containing data to see chart suggestions. Note that the order of selected
+        columns can impact chart suggestions.
+      </div>
+    </Section>
+  </div>
+
+  <t t-name="o-spreadsheet-ChartSuggestionPreview">
+    <div
+      class="o-suggestion-canvas-wrap os-theme-dependant overflow-hidden position-relative border rounded"
+      t-on-pointerdown="(ev) => this.props.onPointerDown(ev)"
+      t-att-title="this.props.description">
+      <canvas class="w-100 h-100" t-ref="this.chartCanvasRef"/>
+      <div class="o-suggestion-insert-icon d-flex align-items-center justify-content-center">
+        <t t-call="o-spreadsheet-Icon.INSERT_CHART_SUGGESTION"/>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[this.props.criterion.values[0] || '']"
@@ -2381,7 +2427,8 @@
   <t t-name="o-spreadsheet-CalendarButton">
     <div class="o-calendar-button ms-1">
       <button type="button" class="o-button btn" t-on-click="this.openCalendar">
-        <i class="fa fa-calendar"/>
+        <!-- TODORAR  see how we can make filled versions -->
+        <i class="oi oi-filled" data-icon="calendar_today"/>
       </button>
       <input
         type="date"
@@ -2895,17 +2942,17 @@
 
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="" t-att-class="this.props.class">
-      <div
-        class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center"
-        t-on-click="() => this.toggle()">
+      <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
         <div
           class="collapsor w-100 d-flex align-items-center ps-1"
-          t-att-class="this.state.isCollapsed ? 'collapsed' : ''">
+          t-att-class="this.state.isCollapsed ? 'collapsed' : ''"
+          t-on-click="() => this.toggle()">
           <span class="collapsor-arrow">
             <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
           </span>
           <div class="ps-2" t-out="this.props.title"/>
         </div>
+        <t t-call-slot="titleButton"/>
       </div>
       <Collapse isCollapsed="this.state.isCollapsed">
         <div class="pt-2">
@@ -2923,7 +2970,8 @@
 
   <t t-name="o-spreadsheet-CogWheelMenu">
     <span
-      class="fa fa-cog os-cog-wheel-menu-icon o-button-icon"
+      class="oi oi-filled os-cog-wheel-menu-icon o-button-icon"
+      data-icon="settings"
       t-on-click="this.toggleMenu"
       t-ref="this.buttonRef"
     />
@@ -3547,14 +3595,14 @@
           class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="this.store.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-1" data-icon="tune"/>
           Configuration
         </div>
         <div
           class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="this.store.panel !== 'design' ? 'inactive' : ''"
           t-on-click="this.switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-1" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -5830,7 +5878,7 @@
             t-on-click="this.removeLink"
             class="o-remove-url o-button-icon"
             t-translation="off">
-            <i class="fa fa-times"/>
+            <i class="oi" data-icon="close"/>
           </button>
         </div>
       </div>
@@ -6007,12 +6055,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.CLIPBOARD">
     <div class="o-icon">
-      <i class="fa fa-clipboard"/>
+      <i class="oi" data-icon="assignment"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.COPY">
     <div class="o-icon">
-      <i class="fa fa-clone"/>
+      <i class="oi" data-icon="content_copy"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CUT">
@@ -6070,7 +6118,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SHOW">
     <div class="o-icon">
-      <i class="fa fa-eye"/>
+      <i class="oi" data-icon="visibility"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FORMULA">
@@ -6203,22 +6251,22 @@
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHART">
     <div class="o-icon">
-      <i class="fa fa-bar-chart"/>
+      <i class="oi" data-icon="bar_chart"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_IMAGE">
     <div class="o-icon">
-      <i class="fa fa-file-image-o"/>
+      <i class="oi" data-icon="image"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_LINK">
     <div class="o-icon">
-      <i class="fa fa-link"/>
+      <i class="oi" data-icon="link"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
     <div class="o-icon">
-      <i class="fa fa-check-square-o"/>
+      <i class="oi" data-icon="check_box"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
@@ -6326,7 +6374,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.IRREGULARITY_MAP">
     <div class="o-icon">
-      <i class="fa fa-align-center fa-rotate-270"/>
+      <i class="oi oi-rotate-270" data-icon="format_align_center"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_RIGHT">
@@ -6509,67 +6557,67 @@
 
   <t t-name="o-spreadsheet-Icon.FULLSCREEN_OUT">
     <div class="o-icon">
-      <i class="fa fa-compress"/>
+      <i class="oi" data-icon="close_fullscreen"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FULLSCREEN_IN">
     <div class="o-icon">
-      <i class="fa fa-expand"/>
+      <i class="oi" data-icon="open_in_full"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EDIT">
     <div class="o-icon">
-      <i class="fa fa-pencil-square-o"/>
+      <i class="oi" data-icon="edit_square"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXTERNAL">
     <div class="o-icon">
-      <i class="fa fa-external-link"/>
+      <i class="oi" data-icon="open_in_new"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
     <div class="o-icon">
-      <i class="fa fa-chain-broken"/>
+      <i class="oi" data-icon="link_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_UP">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-up"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_drop_up"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_DOWN">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-down"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_drop_down"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_RIGHT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-right"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_right"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_LEFT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-left"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="arrow_left"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH">
     <div class="o-icon">
-      <i class="fa fa-trash-o"/>
+      <i class="oi" data-icon="delete"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH_FILLED">
     <div class="o-icon">
-      <i class="fa fa-trash"/>
+      <i class="oi oi-filled" data-icon="delete"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.REFRESH">
     <div class="o-icon">
-      <i class="fa fa-refresh"/>
+      <i class="oi" data-icon="refresh"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXCHANGE">
     <div class="o-icon">
-      <i class="fa fa-exchange"/>
+      <i class="oi" data-icon="swap_horiz"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ARROW_DOWN">
@@ -6672,17 +6720,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_ASCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-asc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_DESCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-desc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DATA_CLEANUP">
     <div class="o-icon">
-      <i class="fa fa-magic"/>
+      <i class="oi" data-icon="wand_stars"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON">
@@ -6695,17 +6743,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
     <div class="o-icon filter-icon-active">
-      <i class="fa fa-filter"/>
+      <i class="oi oi-filled" data-icon="filter_alt"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SEARCH">
     <div class="o-icon">
-      <i class="fa fa-search"/>
+      <i class="oi" data-icon="search"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ZOOM">
     <div class="o-icon">
-      <i class="fa fa-search-plus"/>
+      <i class="oi" data-icon="zoom_in"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
@@ -6739,8 +6787,8 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION">
-    <div class="o-icon fa-small">
-      <i class="fa fa-exclamation-triangle"/>
+    <div class="o-icon">
+      <i class="oi" data-icon="warning"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
@@ -6753,7 +6801,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.ERROR">
     <div class="o-icon">
-      <i class="fa fa-exclamation-circle"/>
+      <i class="oi" data-icon="error"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
@@ -6891,7 +6939,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.INFO">
     <div class="o-icon">
-      <i class="fa fa-info"/>
+      <i class="oi" data-icon="info"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
@@ -6981,12 +7029,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.HIDE_SHEET">
     <div class="o-icon">
-      <i class="fa fa-eye-slash"/>
+      <i class="oi" data-icon="visibility_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DOWNLOAD">
     <div class="o-icon">
-      <i class="fa fa-download"/>
+      <i class="oi" data-icon="download"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CAROUSEL">
@@ -7031,7 +7079,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.DARK_MODE">
     <div class="o-icon">
-      <i class="fa fa-moon-o"/>
+      <i class="oi" data-icon="dark_mode"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-0">
@@ -7077,26 +7125,26 @@
   </t>
   <t t-name="o-spreadsheet-Icon.THUMB_TACK">
     <div class="o-icon">
-      <i class="fa fa-thumb-tack"/>
+      <i class="oi" data-icon="push_pin"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.LOCK">
     <div class="o-icon">
-      <i class="fa fa-lock"/>
+      <i class="oi" data-icon="lock"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLOCK">
     <div class="o-icon">
-      <i class="fa fa-unlock"/>
+      <i class="oi" data-icon="lock_open"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.PRINT">
     <div class="o-icon">
-      <i class="fa fa-print"/>
+      <i class="oi" data-icon="print"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.COLUMN_STATS">
-    <svg width="18px" height="18px" viewBox="0 0 512 512">
+    <svg class="o-icon" viewBox="0 0 512 512">
       <path
         d="M319 174c71 0 129 58 129 129 0 27-8 52-23 73l66 66-33 33-66-66c-21 14-46 23-73 23-71 0-129-58-129-129s57-129 129-129m0 47c-45 0-82 37-82 82s36 82 82 82 82-37 82-82-37-82-82-82m-152 70a155 155 0 0 0 0 12c0 12 1 24 4 35H25v-47zM119 33v235H49V33zm94 94v66c-21 20-36 46-43 75h-28V127zm94-47v71a152 152 0 0 0-70 24V80zm94 23v71a152 152 0 0 0-70-24v-47z"
         fill="currentColor"
@@ -7153,9 +7201,23 @@
   </t>
   <t t-name="o-spreadsheet-Icon.CALCULATOR">
     <div class="o-icon">
-      <i class="fa fa-calculator"/>
+      <i class="oi" data-icon="calculate"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.INSERT_CHART_SUGGESTION">
+    <svg
+      class="o-icon"
+      fill="currentColor"
+      viewBox="0 -960 960 960"
+      xmlns="http://www.w3.org/2000/svg">
+      <!-- Material icon add_chart.
+      TODO remove when we use Material icons directly -->
+      <path
+        xmlns="http://www.w3.org/2000/svg"
+        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm80-160h80v-280h-80v280Zm160 0h80v-400h-80v400Zm160 0h80v-160h-80v160Zm80-320v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM480-480Z"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -7615,7 +7677,7 @@
         onClose="() => this.closeMenu()"
       />
       <t
-        t-if="!this.env.model.getters.isReadonly()"
+        t-if="this.displayTableResizer"
         t-foreach="this.staticTables"
         t-as="table"
         t-key="table.id">
@@ -7853,14 +7915,16 @@
 
   <t t-name="o-spreadsheet-ImageFigure">
     <img t-att-src="this.getImagePath" class="w-100 h-100"/>
-    <div class="o-figure-menu position-absolute m-2" t-if="this.shouldShowMenuButton">
+    <div
+      class="o-figure-menu position-absolute m-2 align-items-center"
+      t-if="this.shouldShowMenuButton">
       <div
-        class="o-figure-menu-item d-flex-align-items-center"
+        class="o-figure-menu-item btn oi rounded p-1"
+        data-icon="more_vert"
         t-on-click="this.showMenu"
         t-ref="this.menuButtonRef"
-        t-on-contextmenu.prevent.stop="this.showMenu">
-        <t t-call="o-spreadsheet-Icon.LIST"/>
-      </div>
+        t-on-contextmenu.prevent.stop="this.showMenu"
+      />
     </div>
   </t>
 
@@ -7925,11 +7989,13 @@
 
   <t t-name="o-spreadsheet-CarouselFigure">
     <div
-      class="o-carousel w-100 h-100 d-flex flex-column px-4 py-2"
+      class="o-carousel w-100 h-100 position-relative"
       t-att-style="this.carouselStyle"
       t-on-dblclick="this.onCarouselDoubleClick">
       <t t-set="selectedItem" t-value="this.selectedCarouselItem"/>
-      <div class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pt-1 pe-auto">
+      <div
+        class="o-carousel-header d-flex align-items-baseline position-absolute"
+        t-att-style="this.headerStyle">
         <div
           class="o-carousel-title text-truncate flex-shrink-0 pe-2"
           t-out="this.title"
@@ -7945,7 +8011,7 @@
             t-key="item_index"
             t-if="this.carousel.items.length > 1">
             <div
-              class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
+              class="o-carousel-tab text-truncate px-2 flex-shrink-0"
               t-att-class="{ 'selected': this.isItemSelected(item) }"
               t-att-data-type="item.type"
               t-out="this.getItemTitle(item)"
@@ -7954,11 +8020,11 @@
           </t>
         </div>
         <div
-          class="o-carousel-tabs-dropdown o-carousel-button flex-shrink-0 rounded p-1"
+          class="o-carousel-button o-carousel-tabs-dropdown flex-shrink-0 rounded"
           t-att-class="{'active': this.menuState.isOpen}"
           t-ref="this.carouselTabsDropdownRef"
           t-on-click="this.toggleMenu">
-          <div class="fa fa-angle-down"/>
+          <div class="oi" data-icon="keyboard_arrow_down"/>
           <MenuPopover
             t-if="this.menuState.isOpen"
             menuId="this.menuId"
@@ -7971,28 +8037,32 @@
         <div
           t-if="this.env.model.getters.isDashboard()"
           t-att-title="this.fullScreenButtonTitle"
-          class="o-carousel-full-screen-button fa o-carousel-button rounded p-1 ms-1"
-          t-att-class="{
-            'fa-compress': this.props.isFullScreen,
-            'fa-expand': !this.props.isFullScreen,
-          }"
+          class="o-carousel-full-screen-button oi o-carousel-button rounded p-1 ms-1"
+          t-att-data-icon="this.props.isFullScreen ? 'close_fullscreen' : 'open_in_full'"
           t-on-click="this.toggleFullScreen"
         />
         <div
           t-if="!this.env.model.getters.isDashboard()"
-          class="o-carousel-menu-button o-carousel-button fa fa-ellipsis-v rounded ms-1"
-          t-on-click="this.openContextMenu"
-        />
+          class="o-carousel-menu-button o-carousel-button rounded ms-1"
+          t-on-click="this.openContextMenu">
+          <div class="oi" data-icon="more_vert"/>
+        </div>
       </div>
-      <div t-if="this.title" class="w-100 mt-2 border-bottom"/>
+      <div
+        t-if="this.separatorStyle"
+        class="o-carousel-separator position-absolute"
+        t-att-style="this.separatorStyle"
+      />
       <div
         t-if="!selectedItem"
-        class="o-carousel-empty o-carousel-content w-100 flex-fill d-flex align-items-center justify-content-center">
+        class="o-carousel-empty o-carousel-content position-absolute d-flex align-items-center justify-content-center"
+        t-att-style="this.contentStyle">
         <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
       </div>
       <div
         t-elif="selectedItem.type === 'chart'"
-        class="o-carousel-content w-100 flex-fill position-relative">
+        class="o-carousel-content position-absolute"
+        t-att-style="this.contentStyle">
         <div
           class="o-chart-container w-100 h-100"
           t-on-dblclick.stop="this.onCarouselChartDoubleClick">
@@ -8012,12 +8082,14 @@
       </div>
       <div
         t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
-        class="o-carousel-content mb-2 mt-3 h-100 w-100 overflow-hidden">
+        class="o-carousel-content position-absolute overflow-hidden"
+        t-att-style="this.contentStyle">
         <StandaloneViewport
           range="this.removeEmptyHeadersFromRange(selectedItem.range)"
           columnWeights="selectedItem.columnWeights"
           canResizeColumns="this.canResizeDataViewColumns"
           onResizeColumns.bind="this.onResizeColumns"
+          size="this.carouselLayout.contentRect"
         />
       </div>
     </div>
@@ -8025,8 +8097,8 @@
 
   <t t-name="o-spreadsheet-FigureComponent">
     <div
-      class="o-figure-wrapper os-theme-dependant"
-      t-att-class="{'o-figure-selected': this.isSelected}"
+      class="o-figure-wrapper"
+      t-att-class="{'o-figure-selected': this.isSelected, 'os-theme-dependant': this.isThemeDependant}"
       t-att-style="this.wrapperStyle">
       <div
         class="o-figure w-100 h-100 overflow-hidden"
@@ -8119,7 +8191,7 @@
   <t t-name="o-spreadsheet-ChartMenu">
     <div class="o-chart-menu position-absolute top-0 end-0" t-on-click.stop="">
       <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
-        <t t-if="this.regionOptions.length > 1">
+        <t t-if="this.env.model.getters.isDashboard() and this.regionOptions.length > 1">
           <Select
             class="'o-chart-menu-item w-auto py-0 px-1 text-muted text-nowrap rounded border-0'"
             popoverClass="'w-auto'"
@@ -8139,7 +8211,8 @@
         </t>
         <t t-if="this.isMenuAvailable()">
           <button
-            class="o-chart-menu-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
+            class="o-chart-menu-item btn text-muted lh-1 p-1 oi"
+            data-icon="more_vert"
             t-on-click="this.openContextMenu"
           />
         </t>
@@ -8433,9 +8506,9 @@
           t-on-click.stop="this.openAssistant"
           t-on-pointerdown.prevent.stop=""
           t-on-pointerup.stop=""
-          class="fa-stack position-absolute translate-middle force-open-assistant fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-question-circle fa-stack-1x"/>
+          class="oi-stack position-absolute translate-middle force-open-assistant fs-4">
+          <i class="oi oi-filled oi-stack-1x o-composer-assistant-icon-bg" data-icon="circle"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="help"/>
         </span>
         <div
           class="o-composer w-100 text-start"
@@ -8476,9 +8549,9 @@
           role="button"
           t-on-click="this.closeAssistant"
           t-on-pointerdown.prevent.stop=""
-          class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-times-circle fa-stack-1x"/>
+          class="oi-stack position-absolute top-0 start-100 translate-middle fs-4">
+          <i class="oi oi-filled oi-stack-1x o-composer-assistant-icon-bg" data-icon="circle"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="cancel"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="this.assistantStyle">
           <FunctionDescriptionProvider
@@ -8625,7 +8698,7 @@
             class="eyedropper d-flex align-items-center justify-content-center rounded-circle"
             t-if="this.canUseEyeDropper"
             t-on-click.stop="this.activateEyedropper">
-            <i class="fa fa-eyedropper"/>
+            <i class="oi" data-icon="colorize"/>
           </div>
         </div>
         <div t-if="this.state.showGradient" class="o-custom-selector">
@@ -8802,16 +8875,24 @@
 
   <t t-name="o-spreadsheet-BottomBarStatistic">
     <t t-set="selectedStatistic" t-value="this.getSelectedStatistic()"/>
-    <Ripple class="'ms-auto bottom-statistics'" t-if="selectedStatistic !== undefined">
-      <div
-        class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
-        t-on-click="this.listSelectionStatistics">
-        <t t-out="selectedStatistic"/>
-        <span class="ms-2">
-          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
-        </span>
-      </div>
-    </Ripple>
+    <div class="ms-auto d-flex o-bottom-bar-statistic">
+      <Ripple t-if="selectedStatistic !== undefined">
+        <div
+          class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
+          t-on-click="this.listSelectionStatistics">
+          <t t-out="selectedStatistic"/>
+          <span class="ms-2">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </span>
+        </div>
+      </Ripple>
+      <span
+        class="o-data-analysis-button me-4 rounded"
+        t-att-class="{ 'active': this.isDataAnalysisOpen }"
+        t-on-click="this.toggleDataAnalysisPanel">
+        <t t-call="o-spreadsheet-Icon.COLUMN_STATS"/>
+      </span>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-BottomBarSheet">