@odoo/o-spreadsheet 19.5.0-alpha.2 → 19.5.0-alpha.20

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.2
- @date 2026-07-13T06:26:21.365Z
- @hash a4d2f90
+ @version 19.5.0-alpha.20
+ @date 2026-09-16T08:02:12.495Z
+ @hash 4784627
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -16,7 +16,7 @@
               <t t-else="" t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
             </div>
             <div class="d-flex flex-column overflow-hidden">
-              <span class="ps-2 text-truncate" t-out="msg"/>
+              <span class="ps-2" t-out="msg"/>
             </div>
           </div>
         </div>
@@ -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>
@@ -432,14 +434,59 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-StandaloneViewport">
+    <div
+      class="o-standalone-viewport h-100 w-100 overflow-hidden d-flex"
+      t-on-wheel="this.onMouseWheel">
+      <div
+        class="o-standalone-viewport-content position-relative flex-grow-1 overflow-hidden"
+        t-ref="this.containerRef">
+        <GridOverlay
+          onCellDoubleClicked.bind="this.onCellDoubleClicked"
+          onGridResized="() => {}"
+          hasFooter="false"
+          gridOverlayDimensions="this.gridOverlayDimensions">
+          <div
+            t-if="this.props.canResizeColumns"
+            t-foreach="this.colResizers"
+            t-as="colResizer"
+            t-key="colResizer_index"
+            class="o-col-resizer h-100"
+            t-att-class="{ 'dragging': this.dndState.col === colResizer.col }"
+            t-att-style="colResizer.style"
+            t-on-pointerdown.stop="(ev) => this.onResizerPointerDown(ev, colResizer)"
+            t-on-dblclick.stop="(ev) => this.onResizerDoubleClick(ev, colResizer)">
+            <div class="o-col-resizer-handle position-absolute h-100"/>
+          </div>
+
+          <ClickableCellsOverlay t-if="this.env.model.getters.isDashboard()"/>
+        </GridOverlay>
+        <GridPopover
+          gridRect="this.getGridRect()"
+          onMouseWheel.bind="this.onMouseWheel"
+          onClosePopover="() => this.cellPopoverStore.close()"
+        />
+        <canvas class="" t-ref="this.canvasRef"/>
+      </div>
+      <div
+        class="position-relative"
+        t-if="this.hasVerticalScrollBar"
+        t-att-style="this.scrollBarContainerStyle">
+        <VerticalScrollBar hasFooter="false"/>
+      </div>
+    </div>
+  </t>
+
   <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">
     <div class="o-spreadsheet-print d-flex flex-column h-100 w-100">
       <t t-set="pages" t-value="this.printStore.printPages"/>
-      <div class="o-print-header flex-shrink-0 d-flex align-items-center d-print-none">
+      <div class="o-print-header flex-shrink-0 d-flex align-items-center">
         <h3 class="m-0 p-3 ps-4 text-white">Print Preview</h3>
         <span class="text-white">
           <t t-out="pages.length"/>
@@ -451,30 +498,8 @@
         <button class="o-button primary flex-grow-0 me-4" t-on-click="this.onPrint">Next</button>
       </div>
       <div class="o-print-container d-flex flex-grow-1 overflow-hidden">
-        <div class="o-print-preview w-100 overflow-auto d-flex flex-column">
-          <div class="mx-auto">
-            <div
-              t-if="pages.length === 0"
-              class="o-print-page o-empty-print-page m-4 shadow d-flex flex-column align-items-center justify-content-center flex-shrink-0"
-              t-att-style="this.pageStyle">
-              <h4 class="fst-italic text-muted">No content to print</h4>
-            </div>
-            <div
-              t-else=""
-              t-foreach="pages"
-              t-as="page"
-              t-key="page_index"
-              class="o-print-page m-4 shadow d-flex justify-content-center flex-shrink-0"
-              t-att-style="this.pageStyle">
-              <StandaloneGridCanvas
-                sheetId="page.sheetId"
-                zone="page.zone"
-                renderingCtx="page.renderingCtx"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start d-print-none">
+        <iframe class="o-print-preview" t-ref="this.iframeRef" title="Print preview"/>
+        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start">
           <div class="o-sidePanelBody pt-4">
             <Section t-if="!this.env.model.getters.isDashboard()">
               <div class="o-section-title">Print content</div>
@@ -528,6 +553,16 @@
           </div>
         </div>
       </div>
+
+      <t t-foreach="pages" t-as="page" t-key="page_index">
+        <StandaloneGridCanvas
+          t-if="this.printIframe.canvases()[page_index]"
+          canvas="this.printIframe.canvases()[page_index]"
+          sheetId="page.sheetId"
+          zone="page.zone"
+          renderingCtx="page.renderingCtx"
+        />
+      </t>
     </div>
   </t>
 
@@ -617,7 +652,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_f"/>
             </div>
           </Ripple>
           <BottomBar onClick="this.props.onClick"/>
@@ -633,7 +668,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>
@@ -649,7 +684,11 @@
   <t t-name="o-spreadsheet-TableStyleEditorPanel">
     <div class="o-table-style-editor-panel">
       <Section title.translate="Style name">
-        <input type="text" class="o-input" t-custom-model="this.state.styleName"/>
+        <TextInput
+          value="this.state.styleName"
+          onChange="(value) => this.state.styleName = value"
+          alwaysShowBorder="true"
+        />
       </Section>
       <Section class="'pt-1'" title.translate="Style color">
         <RoundColorPicker
@@ -810,22 +849,22 @@
         <Select
           class="'mb-3'"
           values="this.separators"
-          selectedValue="this.state.separatorValue"
+          selectedValue="this.store.separatorValue"
           onChange.bind="this.onSeparatorChange"
         />
 
         <input
           class="o-input mb-3"
           type="text"
-          t-if="this.state.separatorValue === 'custom'"
-          t-att-value="this.state.customSeparator"
+          t-if="this.store.separatorValue === 'custom'"
+          t-att-value="this.store.customSeparator"
           t-on-input="this.updateCustomSeparator"
           placeholder="Add any characters or symbol"
         />
 
         <t t-set="addColumnsLabel">Add new columns to avoid overwriting cells</t>
         <Checkbox
-          value="this.state.addNewColumns"
+          value="this.store.addNewColumns"
           label="addColumnsLabel"
           onChange.bind="this.updateAddNewColumnsCheckbox"
         />
@@ -870,14 +909,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="push_pin"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded"
@@ -916,13 +955,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="push_pin"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded mb-1"
@@ -979,7 +1018,7 @@
         <t t-set="dataHasHeaderLabel">Data has header row</t>
         <Checkbox
           name="'dataHasHeader'"
-          value="this.state.hasHeader"
+          value="this.dataCleanupSore.hasHeader"
           label="dataHasHeaderLabel"
           onChange.bind="this.toggleHasHeader"
         />
@@ -994,9 +1033,9 @@
             onChange.bind="this.toggleAllColumns"
           />
 
-          <t t-foreach="Object.keys(this.state.columns)" t-as="colIndex" t-key="colIndex">
+          <t t-foreach="Object.keys(this.dataCleanupSore.columns)" t-as="colIndex" t-key="colIndex">
             <Checkbox
-              value="this.state.columns[colIndex]"
+              value="this.dataCleanupSore.columns[colIndex]"
               label="this.getColLabel(colIndex)"
               onChange="() => this.toggleColumn(colIndex)"
             />
@@ -1041,17 +1080,17 @@
     <div class="o-pivot-panel d-flex flex-column h-100">
       <div class="o-panel d-flex">
         <div
-          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-configuration d-flex flex-grow-1 justify-content-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-2" data-icon="tune"/>
           Configuration
         </div>
         <div
-          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-design d-flex flex-grow-1 justify-content-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-2" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -1329,7 +1368,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>
@@ -1370,7 +1410,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>
@@ -1461,19 +1502,20 @@
         <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_f' : 'visibility_f'"
           t-att-title="hideTitle"
-          class="o-button-icon pe-1 ps-2"
+          class="o-button-icon pe-1 ps-1 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-1 oi oi-filled"
+          data-icon="settings_f"
           title="Show values as"
           t-on-click="this.openShowValuesAs"
         />
       </t>
       <div t-if="measure.computedBy" class="d-flex flex-row small">
-        <div class="d-flex flex-column py-2 px-2 w-100" t-on-pointerdown.stop="">
+        <div class="d-flex flex-column py-2 px-2 w-100">
           <StandaloneComposer
             onConfirm.bind="this.updateMeasureFormula"
             composerContent="measure.computedBy.formula"
@@ -1552,10 +1594,11 @@
           />
           <span t-else="1" class="o-fw-bold text-truncate" t-out="this.dimensionDisplayName"/>
         </div>
-        <div class="d-flex flex-rows" t-on-pointerdown.stop="">
+        <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-1"
+            data-icon="delete_f"
             t-if="this.props.onRemoved"
             t-on-click="() => this.props.onRemoved(this.props.dimension)"
           />
@@ -1635,7 +1678,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()"
         />
@@ -1661,16 +1705,15 @@
             t-as="group"
             t-key="group_index"
             class="o-pivot-custom-group pb-1">
-            <div
-              class="d-flex align-items-center justify-content-between small"
-              t-on-pointerdown.stop="">
+            <div class="d-flex align-items-center justify-content-between small">
               <TextInput
                 value="group.name"
                 onChange="(newName) => this.onRenameGroup(group_index, newName)"
                 selectContentOnFocus="true"
               />
               <i
-                class="o-button-icon ps-3 fa fa-trash"
+                class="o-button-icon ps-3 oi oi-filled"
+                data-icon="delete_f"
                 t-on-click="() => this.onDeleteGroup(group_index)"
               />
             </div>
@@ -1705,8 +1748,10 @@
           <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"/>
-                Re-analyze
+                <div class="d-flex justify-content-center align-content-center">
+                  <i class="oi me-1" data-icon="refresh"/>
+                  Re-analyze
+                </div>
               </button>
             </div>
             <div class="d-flex justify-content-between">
@@ -2018,7 +2063,8 @@
               type="text"
               class="o-input o-input-without-count o-replace"
               t-on-keydown="this.onKeydownReplace"
-              t-custom-model="this.store.toReplace"
+              t-att-value="this.store.toReplace"
+              t-on-input="this.onReplaceInput"
               placeholder="e.g. 'replace me'"
             />
           </div>
@@ -2124,6 +2170,70 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-DataSourcesCleanup">
+    <div class="o-data-source-cleanup">
+      <Section
+        t-foreach="this.store.unusedDataSourcesCategories"
+        t-as="category"
+        t-key="category.type"
+        title="category.label">
+        <t t-foreach="category.dataSources" t-as="dataSource" t-key="dataSource_index">
+          <Checkbox
+            name="dataSource.id"
+            label="dataSource.label"
+            value="this.isDataSourceChecked(category.type, dataSource.id)"
+            onChange="(checked) => this.onToggleDataSource(category.type, dataSource.id, checked)"
+            className="'mb-2'"
+          />
+        </t>
+        <div t-if="!category.dataSources.length" class="w-100 d-flex fst-italic text-muted">
+          No unused data source in this category.
+        </div>
+      </Section>
+      <Section t-if="this.dataSourcesToDelete.length" class="'pt-0'">
+        <button class="o-button o-button-danger" t-on-click="this.onRemoveUnusedDataSources">
+          Delete selected items
+        </button>
+      </Section>
+    </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. Note that the order of selected
+        columns can impact chart suggestions.
+        </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] || '']"
@@ -2312,7 +2422,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"
@@ -2826,17 +2937,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">
@@ -2854,7 +2965,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_f"
       t-on-click="this.toggleMenu"
       t-ref="this.buttonRef"
     />
@@ -3321,19 +3433,21 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <ChartTitle
-      title="this.props.definition.keyDescr?.text ?? ''"
-      updateTitle="(text) => this.setKeyText(text)"
-      name.translate="Key Value Style"
-      placeholder.translate="Add a key value description"
-      updateStyle.bind="this.updateKeyStyle"
-      style="this.keyStyle"
-    />
-    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Scorecard Design">
       <t t-set-slot="content">
         <ChartTitle
+          class="'pt-0'"
+          title="this.props.definition.keyDescr?.text ?? ''"
+          updateTitle.bind="this.setKeyText"
+          name.translate="Key Value Style"
+          placeholder.translate="Add a key value description"
+          updateStyle.bind="this.updateKeyStyle"
+          style="this.keyStyle"
+        />
+        <ChartTitle
+          class="'pt-0'"
           title="this.props.definition.baselineDescr?.text ?? ''"
-          updateTitle="(text) => this.setBaselineText(text)"
+          updateTitle.bind="this.setBaselineText"
           name.translate="Baseline Style"
           placeholder.translate="Add a baseline description"
           updateStyle.bind="this.updateBaselineStyle"
@@ -3365,23 +3479,22 @@
   <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
     <div>
       <Section class="'o-data-series'" title.translate="Key value">
-        <SelectionInput
-          ranges="[this.getKeyValueRange()]"
-          isInvalid="this.isKeyValueInvalid"
-          hasSingleRange="true"
-          required="true"
-          onSelectionChanged="(ranges) => this.onKeyValueRangeChanged(ranges)"
-          onSelectionConfirmed="() => this.updateKeyValueRange()"
+        <StandaloneComposer
+          placeholder.translate="Formula"
+          title.translate=""
+          composerContent="this.getKeyValue()"
+          defaultRangeSheetId="this.env.model.getters.getActiveSheetId()"
+          onConfirm.bind="this.onConfirmKeyValue"
         />
       </Section>
       <Section class="'o-data-labels'" title.translate="Baseline configuration">
         <div class="o-section-subtitle">Value</div>
-        <SelectionInput
-          ranges="[this.getBaselineRange()]"
-          isInvalid="this.isBaselineInvalid"
-          hasSingleRange="true"
-          onSelectionChanged="(ranges) => this.onBaselineRangeChanged(ranges)"
-          onSelectionConfirmed="() => this.updateBaselineRange()"
+        <StandaloneComposer
+          placeholder.translate="Formula"
+          title.translate=""
+          composerContent="this.getBaseline()"
+          defaultRangeSheetId="this.env.model.getters.getActiveSheetId()"
+          onConfirm.bind="this.onConfirmBaseline"
         />
         <div class="o-section-subtitle">Format</div>
         <Select
@@ -3473,17 +3586,17 @@
     <div class="o-chart d-flex flex-column h-100" t-if="this.chartId">
       <div class="o-panel d-flex">
         <div
-          class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-configuration d-flex flex-grow-1 justify-content-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-2" data-icon="tune"/>
           Configuration
         </div>
         <div
-          class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
+          class="o-sidePanel-tab o-panel-design d-flex flex-grow-1 justify-content-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-2" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -3593,7 +3706,7 @@
         updateChart="this.props.updateChart"
         canUpdateChart="this.props.canUpdateChart"
         onErrorMessagesChanged.bind="this.onErrorMessagesChanged"
-        getLabelRangeOptions.bind="this.getLabelRangeOptions"
+        getLabelRangeOptions="() => []"
         dataSeriesTitle.translate="Hierarchy"
         labelRangeTitle.translate="Values"
       />
@@ -3921,26 +4034,12 @@
     <ChartAnnotation t-props="this.props"/>
   </t>
 
-  <t t-name="o-spreadsheet-ChartTypePicker">
-    <t t-set="selectedChartProperties" t-value="this.getSelectedChartSubtypeProperties()"/>
-    <Section title.translate="Chart type">
-      <div class="position-relative">
-        <div
-          class="o-select o-input o-type-selector"
-          t-ref="this.selectRef"
-          t-on-pointerdown.prevent="this.onPointerDown">
-          <t t-out="selectedChartProperties.displayName"/>
-        </div>
-        <div class="o-type-selector-preview position-absolute">
-          <t t-call="{{selectedChartProperties.preview}}"/>
-        </div>
-      </div>
-    </Section>
-    <Popover t-if="this.state.popoverProps" t-props="this.state.popoverProps">
+  <t t-name="o-spreadsheet-ChartTypePickerPopover">
+    <Popover t-props="this.props.popoverProps">
       <div
         t-ref="this.popoverRef"
         class="o-chart-select-popover px-3 pb-4"
-        t-att-style="this.state.popoverStyle">
+        t-att-style="this.popoverStyle">
         <t t-foreach="this.categories" t-as="category" t-key="category">
           <t t-if="this.chartTypeByCategories[category]">
             <h5 class="my-3" t-out="category_value"/>
@@ -3954,7 +4053,7 @@
                   t-att-title="properties.displayName"
                   t-on-click="() => this.onTypeChange(properties.chartSubtype)"
                   t-att-data-id="properties.chartSubtype"
-                  t-att-class="{'selected': properties === selectedChartProperties}">
+                  t-att-class="{'selected': properties.chartSubtype === this.props.selectedChartSubType}">
                   <t t-call="{{properties.preview}}"/>
                 </div>
               </t>
@@ -3965,6 +4064,32 @@
     </Popover>
   </t>
 
+  <t t-name="o-spreadsheet-ChartTypePicker">
+    <t t-set="selectedChartProperties" t-value="this.getSelectedChartSubtypeProperties()"/>
+    <Section title.translate="Chart type">
+      <div class="position-relative">
+        <div
+          class="o-select o-input o-type-selector"
+          t-ref="this.selectRef"
+          t-on-pointerdown.prevent="this.onPointerDown">
+          <t t-out="selectedChartProperties.displayName"/>
+        </div>
+        <div class="o-type-selector-preview position-absolute">
+          <t t-call="{{selectedChartProperties.preview}}"/>
+        </div>
+      </div>
+    </Section>
+    <ChartTypePickerPopover
+      t-if="this.state.popoverProps"
+      popoverProps="this.state.popoverProps"
+      onClose.bind="this.closePopover"
+      onSelectSubType.bind="this.onTypeChange"
+      parentRef="this.selectRef"
+      supportedTypes="this.getSupportedChartTypes()"
+      selectedChartSubType="selectedChartProperties.chartSubtype"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-ChartPreview.LINE_CHART">
     <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
       <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
@@ -4453,7 +4578,7 @@
         updateChart="this.props.updateChart"
         canUpdateChart="this.props.canUpdateChart"
         onErrorMessagesChanged.bind="this.onErrorMessagesChanged"
-        getLabelRangeOptions.bind="this.getLabelRangeOptions"
+        getLabelRangeOptions="() => []"
         labelRangeTitle.translate="Date range"
       />
 
@@ -4462,7 +4587,7 @@
           <span class="w-100">Horizontal axis</span>
           <Select
             selectedValue="this.getGroupByType('horizontal') || ''"
-            values="this.getGroupByOptions()"
+            values="this.groupByChoices"
             class="'o-horizontal-group-by'"
             onChange="(value) => this.updateGroupBy('horizontal', value)"
           />
@@ -4471,7 +4596,7 @@
           <span class="w-100">Vertical axis</span>
           <Select
             selectedValue="this.getGroupByType('vertical') || ''"
-            values="this.getGroupByOptions()"
+            values="this.groupByChoices"
             class="'o-vertical-group-by'"
             onChange="(value) => this.updateGroupBy('vertical', value)"
           />
@@ -4943,7 +5068,7 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <Section class="'o-chart-title'" title="this.props.name">
+    <Section class="'o-chart-title ' + (this.props.class ?? '')" title="this.props.name">
       <TextInput
         value="this.props.title"
         onChange.bind="this.updateTitle"
@@ -5248,7 +5373,7 @@
       <div class="o-carousel-preview-list overflow-auto bg-white" t-ref="this.previewListRef">
         <t t-foreach="this.carouselItems" t-as="item" t-key="this.getItemId(item)">
           <div
-            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex align-items-center"
+            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex flex-column"
             t-att-class="{
               'o-dragging border-top': this.dragAndDrop.draggedItemId === this.getItemId(item),
               'o-selected': this.isCarouselItemActive(item)
@@ -5259,38 +5384,61 @@
               t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
               <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
             </div>
-            <div
-              class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
-              <t t-call="{{this.getItemPreview(item)}}"/>
+            <div class="d-flex o-preview-content align-items-center justify-content-center">
+              <div
+                class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
+                <t t-call="{{this.getItemPreview(item)}}"/>
+              </div>
+              <div class="o-carousel-preview-title text-truncate ms-2">
+                <TextInput
+                  value="this.getItemTitle(item)"
+                  onChange="(newName) => this.renameCarouselItem(item, newName)"
+                  selectContentOnFocus="true"
+                />
+              </div>
+              <div class="ms-auto"/>
+              <div class="flex-shrink-0 d-flex me-1">
+                <CogWheelMenu items="this.getCogWheelMenuItems(item)"/>
+              </div>
             </div>
-            <div class="o-carousel-preview-title text-truncate ms-2">
-              <TextInput
-                value="this.getItemTitle(item)"
-                onChange="(newName) => this.renameCarouselItem(item, newName)"
-                selectContentOnFocus="true"
+            <div class="ms-4 mb-2" t-if="item.type === 'carouselDataView'">
+              <SelectionInput
+                ranges="[this.getItemRangeString(item)]"
+                hasSingleRange="true"
+                required="true"
+                onSelectionChanged.bind="this.onSelectionInputChanged"
+                onSelectionConfirmed.bind="this.onSelectionInputConfirmed"
               />
             </div>
-            <div class="ms-auto"/>
-            <div class="flex-shrink-0 d-flex me-1">
-              <CogWheelMenu items="this.getCogWheelMenuItems(item)"/>
-            </div>
           </div>
         </t>
       </div>
-      <div
-        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center py-4 pe-4 gap-2"
-        t-on-click="this.addNewChartToCarousel"
-        t-att-title="this.carouselAddChartInfoMessage">
-        + Add chart
-      </div>
-      <div
-        t-if="!this.hasDataView"
-        class="o-button-link o-carousel-add-data-view float-end py-4 pe-4"
-        t-on-click="this.addDataViewToCarousel"
-        t-att-title="this.carouselDataViewMessage">
-        + Add data view
-      </div>
+      <Section class="'pt-0'">
+        <div>
+          <div
+            class="o-button-link o-carousel-add-chart float-end d-flex align-items-center my-4"
+            t-on-click="this.addNewChartToCarousel"
+            t-ref="this.addChartButton"
+            t-att-title="this.carouselAddChartInfoMessage">
+            + Add chart
+          </div>
+          <div
+            t-if="!this.hasDataView"
+            class="o-button-link o-carousel-add-data-view float-end my-4 me-4"
+            t-on-click="this.addDataViewToCarousel">
+            + Add data view
+          </div>
+        </div>
+      </Section>
     </div>
+    <ChartTypePickerPopover
+      t-if="this.state.popoverProps"
+      popoverProps="this.state.popoverProps"
+      onClose.bind="this.closePopover"
+      onSelectSubType.bind="this.onSelectChartType"
+      parentRef="this.addChartButton"
+      supportedTypes="this.supportedChartTypes"
+    />
   </t>
 
   <t t-name="o-spreadsheet-SelectionInput">
@@ -5439,7 +5587,7 @@
   </t>
 
   <t t-name="o_spreadsheet.PivotHTMLRenderer">
-    <div class="o_pivot_html_renderer">
+    <div class="w-100">
       <Checkbox
         name="'missing_values'"
         label.translate="Display missing cells only"
@@ -5663,11 +5811,9 @@
                 class="o-menu-item-description ms-auto text-truncate"
                 t-out="description"
               />
-              <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(this.env)"/>
               <div
-                t-if="isMenuRoot || secondaryIcon"
+                t-if="isMenuRoot"
                 class="o-menu-item-root ms-auto align-items-center d-flex gap-1">
-                <t t-if="secondaryIcon" t-call="{{secondaryIcon}}"/>
                 <t t-if="isMenuRoot" t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
               </div>
             </div>
@@ -5691,7 +5837,8 @@
             title="Link label"
             placeholder="e.g. 'Link label'"
             class="o-input"
-            t-custom-model="this.state.label"
+            t-att-value="this.state.label"
+            t-on-input="(ev) => this.state.label = ev.target.value"
           />
         </div>
 
@@ -5708,8 +5855,8 @@
               placeholder="e.g. 'http://www.odoo.com'"
               title="Link URL"
               t-ref="this.urlInput"
-              t-custom-model="this.state.url"
-              t-on-input="this.computeLinks"
+              t-att-value="this.state.url"
+              t-on-input="this.onLinkUrlInput"
             />
           </t>
           <t t-else="">
@@ -5726,7 +5873,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>
@@ -5903,12 +6050,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">
@@ -5966,7 +6113,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">
@@ -6099,22 +6246,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">
@@ -6222,7 +6369,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">
@@ -6405,67 +6552,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="expand_content"/>
     </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_f"/>
     </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">
@@ -6568,17 +6715,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">
@@ -6591,17 +6738,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_f"/>
     </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">
@@ -6635,8 +6782,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">
@@ -6649,7 +6796,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">
@@ -6787,7 +6934,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">
@@ -6798,11 +6945,6 @@
       />
     </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-Icon.ANGLE_DOWN">
     <div class="o-icon">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
@@ -6882,12 +7024,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">
@@ -6932,7 +7074,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">
@@ -6978,26 +7120,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_f"/>
     </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_f"/>
     </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"
@@ -7054,7 +7196,26 @@
   </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-Icon.MORE_MENU">
+    <div class="o-icon">
+      <i class="oi" data-icon="more_vert"/>
     </div>
   </t>
 
@@ -7397,7 +7558,6 @@
       maxHeight="this.cellPopover.Component.size and this.cellPopover.Component.size.maxHeight"
       maxWidth="this.cellPopover.Component.size and this.cellPopover.Component.size.maxWidth"
       anchorRect="this.cellPopover.anchorRect"
-      containerRect="this.env.getPopoverContainerRect()"
       onMouseWheel="this.props.onMouseWheel"
       class="'o-popover-grid-index'">
       <t
@@ -7408,9 +7568,6 @@
   </t>
 
   <t t-name="o-spreadsheet-GridOverlay">
-    <div class="position-absolute" t-att-style="this.style">
-      <FiguresContainer/>
-    </div>
     <div
       t-ref="this.gridOverlayRef"
       class="o-grid-overlay overflow-hidden o-zoomable"
@@ -7421,10 +7578,7 @@
       t-on-click="this.onClick"
       t-on-dblclick.self="this.onDoubleClick"
       t-on-contextmenu.stop.prevent="this.onContextMenu">
-      <GridAddRowsFooter
-        t-if="!this.env.model.getters.isReadonly()"
-        t-key="this.env.model.getters.getActiveSheetId()"
-      />
+      <GridAddRowsFooter t-if="this.isFooterVisible" t-key="this.viewStore.displayedSheetId"/>
       <t t-call-slot="default"/>
     </div>
   </t>
@@ -7470,6 +7624,9 @@
       t-on-keydown="this.onKeydown"
       t-on-wheel.prevent="this.onMouseWheel"
       t-ref="this.gridRef">
+      <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
+        <FiguresContainer/>
+      </div>
       <GridOverlay
         onCellClicked.bind="this.onCellClicked"
         onCellDoubleClicked.bind="this.onCellDoubleClicked"
@@ -7479,15 +7636,14 @@
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
-        gridDims="this.env.model.getters.getSheetViewDimensionWithHeaders()"
+        gridDims="this.viewStore.viewports.getSheetViewDimensionWithHeaders()"
         onInputContextMenu.bind="this.onInputContextMenu"
       />
-      <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
+      <div class="os-canvas-background">
+        <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
+      </div>
       <t t-set="focused" t-value="this.focusedClients"/>
-      <t
-        t-foreach="this.env.model.getters.getClientsToDisplay()"
-        t-as="client"
-        t-key="this.getClientPositionKey(client)">
+      <t t-foreach="this.clientsToDisplay" t-as="client" t-key="this.getClientPositionKey(client)">
         <ClientTag
           name="client.name"
           color="client.color"
@@ -7519,7 +7675,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">
@@ -7547,13 +7703,14 @@
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-figure os-theme-dependant o-figure position-relative border rounded shadow"
+          class="o-fullscreen-figure o-figure-rounded overflow-hidden os-theme-dependant o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="this.fullScreenFigureRef"
           t-on-click.stop=""
           t-on-keydown="(ev) => this.onKeyDown(ev)">
           <t>
             <t
+              t-if="this.figureUI.width and this.figureUI.height"
               t-component="this.figureComponent"
               figureUI="this.figureUI"
               isFullScreen="true"
@@ -7757,13 +7914,14 @@
 
   <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"
-        t-on-click="this.showMenu"
+        class="o-figure-menu-item d-flex align-items-center justify-content-center rounded p-1"
         t-ref="this.menuButtonRef"
-        t-on-contextmenu.prevent.stop="this.showMenu">
-        <t t-call="o-spreadsheet-Icon.LIST"/>
+        t-on-click="this.showMenu">
+        <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
       </div>
     </div>
   </t>
@@ -7790,7 +7948,7 @@
                 style="this.getFigureStyle(figureUI)"
                 class="this.getFigureClass(figureUI)"
                 onMouseDown="(ev) => this.startDraggingFigure(figureUI, ev)"
-                onClickAnchor="(dirX, dirY, ev) => this.startResize(figureUI, dirX, dirY, ev)"
+                onClickAnchor.bind="this.resizeAllSelectedFigures"
               />
             </t>
           </div>
@@ -7829,15 +7987,12 @@
 
   <t t-name="o-spreadsheet-CarouselFigure">
     <div
-      class="o-carousel w-100 h-100 d-flex flex-column"
+      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 pe-1 pe-auto"
-        t-att-class="{
-          'border-bottom': this.env.model.getters.isDashboard(),
-          'o-carousel-header-floating': !this.env.model.getters.isDashboard() and selectedItem?.type === 'carouselDataView',
-         }"
+        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"
@@ -7848,9 +8003,13 @@
         <div
           class="o-carousel-tabs d-flex flex-fill justify-content-end"
           t-ref="this.carouselTabsRef">
-          <t t-foreach="this.visibleCarouselItems" t-as="item" t-key="item_index">
+          <t
+            t-foreach="this.carousel.items"
+            t-as="item"
+            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)"
@@ -7859,11 +8018,13 @@
           </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="o-icon">
+            <i class="oi" data-icon="keyboard_arrow_down"/>
+          </div>
           <MenuPopover
             t-if="this.menuState.isOpen"
             menuId="this.menuId"
@@ -7876,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,
-            'invisible': this.selectedCarouselItem?.type !== 'chart',
-          }"
+          class="o-carousel-full-screen-button oi o-carousel-button rounded p-1 ms-1"
+          t-att-data-icon="this.props.isFullScreen ? 'close_fullscreen' : 'expand_content'"
           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">
+          <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
+        </div>
       </div>
+      <div
+        t-if="this.separatorStyle"
+        class="o-carousel-separator position-absolute"
+        t-att-style="this.separatorStyle"
+      />
       <div
         t-if="!selectedItem"
-        class="o-carousel-empty 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">
@@ -7915,23 +8080,34 @@
           t-key="selectedItem.chartId"
         />
       </div>
+      <div
+        t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
+        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>
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
     <div
-      class="o-figure-wrapper os-theme-dependant"
-      t-att-class="{'o-figure-selected': this.isSelected}"
-      t-att-style="this.wrapperStyle"
-      t-ref="this.figureWrapperRef">
+      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"
-        t-att-class="this.props.class"
+        class="o-figure w-100 h-100 overflow-hidden"
+        t-att-class="this.figureClass"
         t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
         t-on-click="this.onClick"
         t-on-contextmenu.prevent.stop="(ev) => !this.env.model.getters.isReadonly() and this.onContextMenu(ev)"
         t-ref="this.figureRef"
-        t-att-style="this.props.style"
+        t-att-style="this.figureStyle"
         t-att-data-id="this.props.figureUI.id"
         tabindex="0"
         t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
@@ -7940,7 +8116,6 @@
           t-component="this.figureRegistry.get(this.props.figureUI.tag).Component"
           t-key="this.props.figureUI.id"
           figureUI="this.props.figureUI"
-          editFigureStyle.bind="this.editWrapperStyle"
           openContextMenu.bind="this.openContextMenu"
         />
         <MenuPopover
@@ -7951,31 +8126,11 @@
           onClose="() => this.menuState.isOpen=false"
           popoverPositioning="'bottom-left'"
         />
-        <div
-          t-if="!this.env.model.getters.isDashboard()"
-          class="position-absolute top-0 start-0 pe-none w-100 h-100">
-          <div
-            class="o-figure-border pe-auto w-100 h-0 position-absolute pb-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('top')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('left')"
-          />
-          <div
-            class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('bottom')"
-          />
-          <div
-            class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
-            t-att-class="{'o-selected': this.isSelected}"
-            t-att-style="this.getBorderStyle('right')"
-          />
-        </div>
       </div>
+      <div
+        t-if="this.isSelected"
+        class="o-figure-selection-border position-absolute pe-none w-100 h-100"
+      />
       <t t-if="this.isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
@@ -8036,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'"
@@ -8047,7 +8202,7 @@
         </t>
         <t t-foreach="this.getMenuItems()" t-as="item" t-key="item.id">
           <div
-            class="o-chart-menu-item border-0 lh-1 p-1 d-flex align-items-center justify-content-center rounded"
+            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
             t-att-title="item.label"
             t-on-click="item.onClick"
             t-att-data-id="item.id">
@@ -8055,10 +8210,11 @@
           </div>
         </t>
         <t t-if="this.isMenuAvailable()">
-          <button
-            class="o-chart-menu-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
-            t-on-click="this.openContextMenu"
-          />
+          <div
+            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
+            t-on-click="this.openContextMenu">
+            <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
+          </div>
         </t>
       </div>
       <InfoPopover
@@ -8156,10 +8312,12 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div
-      class="o-dashboard-background position-absolute w-100 h-100 z-0 os-theme-dependant"
-      t-att-style="this.backgroundStyle"
-    />
+    <div class="o-dashboard-background os-canvas-background position-absolute w-100 h-100 z-0">
+      <div
+        class="o-dashboard-sheet-background w-100 h-100 os-theme-dependant"
+        t-att-style="this.backgroundStyle"
+      />
+    </div>
     <div
       class="o-grid o-dashboard-grid o-two-columns o-zoomable z-1"
       tabindex="-1"
@@ -8169,24 +8327,13 @@
         class="mx-auto h-100 position-relative"
         t-ref="this.gridRef"
         t-att-style="this.gridContainer">
+        <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
+          <FiguresContainer/>
+        </div>
         <GridOverlay
           onGridResized.bind="this.onGridResized"
           gridOverlayDimensions="this.gridOverlayDimensions">
-          <div
-            t-foreach="this.getClickableCells()"
-            t-as="clickableCell"
-            t-key="clickableCell_index"
-            class="o-dashboard-clickable-cell"
-            t-att-title="clickableCell.title"
-            t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
-            t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
-            t-att-style="this.getCellClickableStyle(clickableCell.coordinates)">
-            <t
-              t-if="clickableCell.component"
-              t-component="clickableCell.component"
-              t-props="clickableCell.componentProps"
-            />
-          </div>
+          <ClickableCellsOverlay/>
         </GridOverlay>
         <canvas t-ref="this.canvasRef" class="os-theme-dependant"/>
         <GridPopover
@@ -8361,9 +8508,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_f"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="help_f"/>
         </span>
         <div
           class="o-composer w-100 text-start"
@@ -8404,9 +8551,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_f"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="cancel_f"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="this.assistantStyle">
           <FunctionDescriptionProvider
@@ -8553,7 +8700,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">
@@ -8614,6 +8761,24 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-ClickableCellsOverlay">
+    <div
+      t-foreach="this.getClickableCells()"
+      t-as="clickableCell"
+      t-key="clickableCell_index"
+      class="o-dashboard-clickable-cell"
+      t-att-title="clickableCell.title"
+      t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
+      t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
+      t-att-style="this.getCellClickableStyle(clickableCell.coordinates)">
+      <t
+        t-if="clickableCell.component"
+        t-component="clickableCell.component"
+        t-props="clickableCell.componentProps"
+      />
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-BottomBar">
     <div
       class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden border-top"
@@ -8712,16 +8877,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">
@@ -8739,7 +8912,7 @@
         t-att-title="this.sheetName"
         t-att-data-id="this.props.sheetId"
         t-att-class="{active: this.isSheetActive}">
-        <span t-if="this.isSheetLocked" class="me-1">
+        <span t-if="this.isSheetLocked" class="me-1 lock-icon">
           <t t-call="o-spreadsheet-Icon.LOCK"/>
         </span>
         <span