@odoo/o-spreadsheet 18.5.0-alpha.1 → 18.5.0-alpha.11

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 18.5.0-alpha.1
- @date 2025-06-27T09:13:39.263Z
- @hash 756e75b
+ @version 18.5.0-alpha.11
+ @date 2025-08-26T10:14:56.034Z
+ @hash b913e49
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -215,7 +215,7 @@
       t-ref="input"
       class="os-input w-100"
       type="text"
-      t-att-class="props.class"
+      t-att-class="inputClass"
       t-att-id="props.id"
       t-att-placeholder="props.placeholder"
       t-att-value="props.value"
@@ -981,6 +981,15 @@
           t-att-style="dragAndDrop.itemsStyle[col.nameWithGranularity]"
           class="pt-1">
           <PivotDimension dimension="col" onRemoved.bind="removeDimension">
+            <t t-set-slot="upper-right-icons">
+              <t t-set="errorMessage" t-value="getHugeDimensionErrorMessage(col)"/>
+              <i
+                t-if="errorMessage"
+                class="text-warning fa fa-exclamation-triangle"
+                t-att-title="errorMessage"
+              />
+            </t>
+
             <PivotDimensionGranularity
               t-if="isDateOrDatetimeField(col)"
               dimension="col"
@@ -989,6 +998,12 @@
               allGranularities="getGranularitiesFor(col)"
             />
             <PivotDimensionOrder dimension="col" onUpdated.bind="this.updateOrder"/>
+            <PivotCustomGroupsCollapsible
+              t-if="col.isCustomField"
+              pivotId="props.pivotId"
+              customField="getCustomField(col)"
+              onCustomFieldUpdated="props.onDimensionsUpdated"
+            />
           </PivotDimension>
         </div>
       </t>
@@ -1007,6 +1022,15 @@
           t-att-style="dragAndDrop.itemsStyle[row.nameWithGranularity]"
           class="pt-1">
           <PivotDimension dimension="row" onRemoved.bind="removeDimension">
+            <t t-set-slot="upper-right-icons">
+              <t t-set="errorMessage" t-value="getHugeDimensionErrorMessage(row)"/>
+              <i
+                t-if="errorMessage"
+                class="text-warning fa fa-exclamation-triangle"
+                t-att-title="errorMessage"
+              />
+            </t>
+
             <PivotDimensionGranularity
               t-if="isDateOrDatetimeField(row)"
               dimension="row"
@@ -1015,6 +1039,12 @@
               allGranularities="getGranularitiesFor(row)"
             />
             <PivotDimensionOrder dimension="row" onUpdated.bind="this.updateOrder"/>
+            <PivotCustomGroupsCollapsible
+              t-if="row.isCustomField"
+              pivotId="props.pivotId"
+              customField="getCustomField(row)"
+              onCustomFieldUpdated="props.onDimensionsUpdated"
+            />
           </PivotDimension>
         </div>
       </t>
@@ -1243,6 +1273,42 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-PivotCustomGroupsCollapsible">
+    <SidePanelCollapsible
+      class="'o-pivot-custom-groups'"
+      isInitiallyCollapsed="true"
+      title.translate="Groups">
+      <t t-set-slot="content">
+        <div class="ps-4">
+          <div
+            t-foreach="groups"
+            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="">
+              <TextInput
+                value="group.name"
+                onChange="(newName) => this.onRenameGroup(group_index, newName)"
+              />
+              <i
+                class="o-button-icon ps-3 fa fa-trash"
+                t-on-click="() => this.onDeleteGroup(group_index)"
+              />
+            </div>
+          </div>
+          <div
+            t-if="!hasOthersGroup"
+            class="o-button-link o-add-others-group small pb-1"
+            t-on-click="() => this.addOthersGroup()">
+            <span>+ &quot;Others&quot; group</span>
+          </div>
+        </div>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-MoreFormatsPanel">
     <div class="o-more-formats-panel">
       <div
@@ -1543,11 +1609,11 @@
       <div class="o-dv-list-values p-1 d-flex align-items-center">
         <div class="me-2">
           <RoundColorPicker
-            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
-            onColorPicked="(c) => this.onColorChanged(c, value)"
+            currentColor="props.criterion.colors?.[value.value] || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(c, value.value)"
           />
         </div>
-        <input type="text" class="o-input" t-att-value="value" disabled="1"/>
+        <input type="text" class="o-input" t-att-value="value.label" disabled="1"/>
       </div>
     </t>
 
@@ -1688,8 +1754,9 @@
       <t t-if="state.mode === 'edit'">
         <ConditionalFormattingEditor
           editedCf="editedCF"
-          onSave.bind="switchToList"
+          onExit.bind="switchToList"
           onCancel.bind="cancelEdition"
+          isNewCf="originalEditedCf === undefined"
         />
       </t>
     </div>
@@ -1912,7 +1979,7 @@
     <div class="o-cf-data-bar-editor">
       <div class="o-section-subtitle">Color</div>
       <RoundColorPicker
-        currentColor="colorNumberString(rule.color)"
+        currentColor="colorNumberToHex(rule.color)"
         onColorPicked.bind="updateDataBarColor"
         disableNoColor="true"
       />
@@ -2053,7 +2120,7 @@
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="props.onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button t-on-click="onCancel" class="o-button o-cf-cancel">Cancel</button>
           <button
             t-on-click="onSave"
             class="o-button primary o-cf-save"
@@ -2212,11 +2279,12 @@
 
   <t t-name="o-spreadsheet-SidePanelCollapsible">
     <div class="" t-att-class="props.class">
-      <div class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center">
+      <div
+        class="o_side_panel_collapsible_title o-fw-bold d-flex align-items-center"
+        t-on-click="() => this.toggle()">
         <div
           class="collapsor w-100 d-flex align-items-center ps-1"
-          t-att-class="state.isCollapsed ? 'collapsed' : ''"
-          t-on-click="() => this.toggle()">
+          t-att-class="state.isCollapsed ? 'collapsed' : ''">
           <span class="collapsor-arrow">
             <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
           </span>
@@ -2273,6 +2341,30 @@
     </label>
   </t>
 
+  <t t-name="o-spreadsheet-CarouselItemTitleCollapsible">
+    <SidePanelCollapsible
+      class="'o-carousel-item-title'"
+      isInitiallyCollapsed="true"
+      title.translate="Carousel Title">
+      <t t-set-slot="content">
+        <div class="ps-4">
+          <TextInput
+            value="title"
+            onChange.bind="updateTitle"
+            placeholder.translate="Title"
+            alwaysShowBorder="true"
+          />
+          <TextStyler
+            style="style"
+            updateStyle.bind="updateStyle"
+            defaultStyle="defaultStyle"
+            hasHorizontalAlign="false"
+          />
+        </div>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet.BadgeSelection">
     <div class="d-flex w-100 o-badge-selection">
       <t t-foreach="props.choices" t-as="choice" t-key="choice.value">
@@ -2287,6 +2379,37 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-GenericZoomableChartDesignPanel">
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+        </Section>
+        <Section class="'pt-0'" title.translate="Zoom">
+          <Checkbox
+            name="'zoomable'"
+            label.translate="Show slicer"
+            value="props.definition.zoomable"
+            onChange.bind="onToggleZoom"
+            className="'mb-2'"
+          />
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SeriesWithAxisDesignEditor t-props="props"/>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          chartId="props.chartId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-WaterfallChartDesignPanel">
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
@@ -2302,6 +2425,18 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-0'" title.translate="Zoom">
+          <Checkbox
+            name="'zoomable'"
+            label.translate="Show slicer"
+            value="props.definition.zoomable"
+            onChange.bind="onToggleZoom"
+            className="'mb-2'"
+          />
+        </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Waterfall design">
@@ -2360,7 +2495,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -2382,14 +2517,14 @@
 
           <t t-if="coloringOptions.type === 'categoryColor'">
             <TreeMapCategoryColors
-              figureId="props.figureId"
+              chartId="props.chartId"
               definition="props.definition"
               onColorChanged.bind="onCategoryColorChange"
             />
           </t>
           <t t-else="">
             <TreeMapColorScale
-              figureId="props.figureId"
+              chartId="props.chartId"
               definition="props.definition"
               onColorChanged.bind="onColorScaleChange"
             />
@@ -2405,13 +2540,13 @@
             name="'showHeaders'"
             label.translate="Show headers"
             value="showHeaders"
-            onChange="(showHeaders) => props.updateChart(this.props.figureId, { showHeaders })"
+            onChange="(showHeaders) => props.updateChart(this.props.chartId, { showHeaders })"
           />
         </Section>
         <Section class="'pt-0'" t-if="showHeaders">
           <TextStyler
             class="'pt-0 o-header-style'"
-            updateStyle="(headerDesign) => props.updateChart(this.props.figureId, { headerDesign })"
+            updateStyle="(headerDesign) => props.updateChart(this.props.chartId, { headerDesign })"
             style="props.definition.headerDesign || {}"
             defaultStyle="defaults.headerDesign"
             hasBackgroundColor="true"
@@ -2424,7 +2559,7 @@
               name="'showLabels'"
               label.translate="Show labels"
               value="showLabels"
-              onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
+              onChange="(showLabels) => props.updateChart(this.props.chartId, { showLabels })"
             />
             <ChartShowValues t-props="props" defaultValue="defaults.showValues"/>
           </div>
@@ -2432,7 +2567,7 @@
         <Section class="'pt-0'" t-if="showValues || showLabels">
           <TextStyler
             class="'pt-0 o-values-style'"
-            updateStyle="(valuesDesign) => props.updateChart(this.props.figureId, { valuesDesign })"
+            updateStyle="(valuesDesign) => props.updateChart(this.props.chartId, { valuesDesign })"
             style="props.definition.valuesDesign || {}"
             defaultStyle="defaults.valuesDesign"
             hasVerticalAlign="true"
@@ -2523,7 +2658,7 @@
               name="'showLabels'"
               label.translate="Show labels"
               value="showLabels"
-              onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
+              onChange="(showLabels) => props.updateChart(this.props.chartId, { showLabels })"
             />
             <ChartShowValues t-props="props" defaultValue="defaults.showValues"/>
           </div>
@@ -2531,7 +2666,7 @@
         <Section class="'pt-0'" t-if="showValues || showLabels">
           <TextStyler
             class="'o-values-style'"
-            updateStyle="(valuesDesign) => props.updateChart(this.props.figureId, { valuesDesign })"
+            updateStyle="(valuesDesign) => props.updateChart(this.props.chartId, { valuesDesign })"
             style="props.definition.valuesDesign || {}"
             defaultStyle="defaults.valuesDesign"
           />
@@ -2550,12 +2685,7 @@
     <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
         <Section class="'pt-1'" title.translate="Number formatting">
-          <Checkbox
-            name="'humanizeNumbers'"
-            label="humanizeNumbersLabel"
-            value="props.definition.humanize"
-            onChange.bind="updateHumanizeNumbers"
-          />
+          <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -2668,6 +2798,9 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesDesignEditor t-props="props"/>
@@ -2680,9 +2813,12 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
         <PieHoleSize
           t-if="props.definition.isDoughnut"
-          value="props.definition.pieHolePercentage ?? 50"
+          value="props.definition.pieHolePercentage ?? this.defaultHoleSize"
           onValueChange.bind="onPieHoleSizeChange"
         />
       </t>
@@ -2690,46 +2826,48 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartPanel">
-    <div class="o-chart" t-if="figureId">
+    <div class="o-chart d-flex flex-column h-100" t-if="chartId">
       <div class="o-panel">
         <div
           class="o-panel-element o-panel-configuration"
           t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
-          t-on-click="() => this.store.activatePanel('configuration')">
+          t-on-click="switchPanel.bind(this, 'configuration')">
           <i class="fa fa-sliders"/>
           Configuration
         </div>
         <div
           class="o-panel-element o-panel-design"
           t-att-class="store.panel !== 'design' ? 'inactive' : ''"
-          t-on-click="() => this.store.activatePanel('design')">
+          t-on-click="switchPanel.bind(this, 'design')">
           <i class="fa fa-paint-brush"/>
           Design
         </div>
       </div>
 
-      <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
-      <t t-if="store.panel === 'configuration'">
-        <ChartTypePicker figureId="props.figureId" chartPanelStore="store"/>
-        <t
-          t-component="chartPanel.configuration"
-          definition="definition"
-          figureId="figureId"
-          updateChart.bind="updateChart"
-          canUpdateChart.bind="canUpdateChart"
-          t-key="figureId + definition.type"
-        />
-      </t>
-      <t t-else="">
-        <t
-          t-component="chartPanel.design"
-          definition="definition"
-          figureId="figureId"
-          updateChart.bind="updateChart"
-          canUpdateChart.bind="canUpdateChart"
-          t-key="figureId + definition.type"
-        />
-      </t>
+      <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
+      <div class="o-panel-content overflow-y-auto" t-ref="panelContent">
+        <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
+          <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
+          <t
+            t-component="chartPanel.configuration"
+            definition="definition"
+            chartId="chartId"
+            updateChart.bind="updateChart"
+            canUpdateChart.bind="canUpdateChart"
+            t-key="chartId + definition.type"
+          />
+        </div>
+        <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
+          <t
+            t-component="chartPanel.design"
+            definition="definition"
+            chartId="chartId"
+            updateChart.bind="updateChart"
+            canUpdateChart.bind="canUpdateChart"
+            t-key="chartId + definition.type"
+          />
+        </div>
+      </div>
     </div>
   </t>
 
@@ -2741,6 +2879,18 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
+        <Section class="'pt-0'" title.translate="Zoom">
+          <Checkbox
+            name="'zoomable'"
+            label.translate="Show slicer"
+            value="props.definition.zoomable"
+            onChange.bind="onToggleZoom"
+            className="'mb-2'"
+          />
+        </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -2748,7 +2898,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -2847,6 +2997,9 @@
             <option value="left">Bottom left</option>
           </select>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -2905,7 +3058,7 @@
   <t t-name="o-spreadsheet-GeoChartConfigPanel">
     <div>
       <GeoChartRegionSelectSection
-        figureId="props.figureId"
+        chartId="props.chartId"
         definition="props.definition"
         updateChart="props.updateChart"
       />
@@ -2935,7 +3088,13 @@
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
-    <GeneralDesignEditor t-props="props"/>
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Gauge Design">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Range">
@@ -3077,6 +3236,9 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 
@@ -3105,6 +3267,18 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
+        <Section class="'pt-0'" title.translate="Zoom">
+          <Checkbox
+            name="'zoomable'"
+            label.translate="Show slicer"
+            value="props.definition.zoomable"
+            onChange.bind="onToggleZoom"
+            className="'mb-2'"
+          />
+        </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props">
@@ -3124,7 +3298,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -3139,6 +3313,9 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
+        <Section class="'pt-1'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -3146,7 +3323,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -3580,7 +3757,7 @@
       name="'showValues'"
       label.translate="Show values"
       value="props.definition.showValues ?? props.defaultValue"
-      onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
+      onChange="(showValues) => props.updateChart(this.props.chartId, { showValues })"
     />
   </t>
 
@@ -3589,7 +3766,7 @@
       name="'showDataMarkers'"
       label.translate="Show data markers"
       value="!props.definition.hideDataMarkers"
-      onChange="(showDataMarkers) => props.updateChart(this.props.figureId, { hideDataMarkers: !showDataMarkers })"
+      onChange="(showDataMarkers) => props.updateChart(this.props.chartId, { hideDataMarkers: !showDataMarkers })"
     />
   </t>
 
@@ -3776,6 +3953,15 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartHumanizeNumbers">
+    <Checkbox
+      name="'humanizeNumbers'"
+      label.translate="Make numbers human-readable"
+      value="props.definition.humanize ?? true"
+      onChange="(humanize) => props.updateChart(this.props.chartId, { humanize })"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-GenericChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -3937,6 +4123,73 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-CarouselPanel">
+    <div class="o-carousel-panel h-100 overflow-auto">
+      <div class="o-carousel-preview-list overflow-auto" t-ref="previewList">
+        <div
+          t-foreach="carouselItems"
+          t-as="item"
+          t-key="getItemId(item)"
+          class="o-carousel-preview position-relative d-flex align-items-center border-bottom ps-1 pe-2 pt-3 pb-2 w-100"
+          t-att-class="{ 'o-dragging': dragAndDrop.draggedItemId === getItemId(item) }"
+          t-att-style="getPreviewDivStyle(item)">
+          <div
+            class="o-drag-handle position-absolute ps-1 flex-shrink-0"
+            t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
+            <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+          </div>
+          <div class="flex-grow-1">
+            <div class="d-flex align-items-center">
+              <div
+                class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
+                <t t-call="{{getItemPreview(item)}}"/>
+              </div>
+              <div class="o-carousel-preview-title text-truncate ms-2">
+                <TextInput
+                  value="getItemTitle(item)"
+                  onChange="(newName) => this.renameCarouselItem(item, newName)"
+                />
+              </div>
+              <div class="ms-auto"/>
+              <div
+                t-if="item.type === 'chart'"
+                class="o-edit-button o-button-icon pe-2 ps-1 flex-shrink-0 fa fa-pencil"
+                t-on-click.stop="(ev) => this.editCarouselItem(item, ev)"
+                title="Edit chart"
+              />
+              <div
+                class="o-delete-button o-button-icon pe-2 ps-1 flex-shrink-0"
+                t-on-click.stop="(ev) => this.deleteCarouselItem(item, ev)"
+                title="Remove chart">
+                <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+              </div>
+            </div>
+            <div class="ms-3">
+              <CarouselItemTitleCollapsible
+                carouselTitle="item.carouselTitle"
+                onUpdateCarouselTitle="(style) => this.onUpdateCarouselTitle(item_index, style)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center pt-4 pe-4 gap-2"
+        t-on-click="addNewChartToCarousel">
+        + Add chart
+        <span t-att-title="carouselAddChartInfoMessage">
+          <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
+        </span>
+      </div>
+      <div
+        t-if="!hasDataView"
+        class="o-button-link o-carousel-add-data-view float-end pt-4 pe-4"
+        t-on-click="addDataViewToCarousel">
+        + Add data view
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-SelectionInput">
     <div class="o-selection" t-ref="o-selection">
       <div
@@ -4155,7 +4408,10 @@
                 t-att-style="getIconColor(menuItem)">
                 <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
               </div>
-              <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
+              <div
+                class="o-menu-item-name align-middle text-truncate align-items-center d-flex"
+                t-esc="getName(menuItem)"
+              />
               <t t-set="description" t-value="menuItem.description(env)"/>
               <div
                 t-if="description"
@@ -4165,12 +4421,12 @@
               <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
               <div
                 t-if="isMenuRoot"
-                class="o-menu-item-root align-middle ms-auto"
+                class="o-menu-item-root ms-auto align-items-center d-flex"
                 t-call="o-spreadsheet-Icon.CARET_RIGHT"
               />
               <div
                 t-elif="secondaryIcon"
-                class="o-menu-item-root align-middle ms-auto"
+                class="o-menu-item-root ms-auto align-items-center d-flex"
                 t-call="{{secondaryIcon}}"
               />
             </div>
@@ -5099,12 +5355,26 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PLUS_IN_BOX">
-    <svg
-      class="o-icon"
-      width="18"
-      height="18"
-      style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5">
-      <path stroke="currentColor" d="M1.5,1.5h15v15h-15v-15M9,5v8M5,9h8"/>
+    <svg class="o-icon" width="18" height="18" style="">
+      <path
+        fill="currentColor"
+        d="
+        M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2
+        M4,9.5 h10 v-1.5 h-10
+        M8.25,3.75 v10 h1.5 v-10
+        "
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.MINUS_IN_BOX">
+    <svg class="o-icon" width="18" height="18" style="">
+      <path
+        fill="currentColor"
+        d="
+        M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2
+        M4,9.5 h10 v-1.5 h-10
+        "
+      />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.GROUP_ROWS">
@@ -5279,6 +5549,14 @@
       <i class="fa fa-download"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.CAROUSEL">
+    <svg class="o-icon" viewBox="0 0 122.88 99.75">
+      <path
+        fill="currentColor"
+        d="M29.09,0h64.7A5.21,5.21,0,0,1,99,5.18v89.4a5.19,5.19,0,0,1-5.18,5.17H29.09a5.19,5.19,0,0,1-5.17-5.18V5.18A5.21,5.21,0,0,1,29.09,0Zm78.52,12.46,10.59-1.52a4.71,4.71,0,0,1,4.68,4.69v68.5a4.71,4.71,0,0,1-4.68,4.68L107.77,88a1.35,1.35,0,0,1-1.31-1.34V83.14a1.34,1.34,0,0,1,1.44-1.23l8.91.73V17.22l-9,1.34a1.34,1.34,0,0,1-1.34-1.34V13.78a1.34,1.34,0,0,1,1.15-1.32ZM5,11l10.31,1.49a1.33,1.33,0,0,1,1.14,1.32v3.44a1.34,1.34,0,0,1-1.34,1.34l-9-1.34V82.64L15,81.91a1.33,1.33,0,0,1,1.43,1.23v3.49A1.35,1.35,0,0,1,15.11,88l-10.43.84A4.71,4.71,0,0,1,0,84.13V15.63a4.73,4.73,0,0,1,4.68-4.69L5,11Zm87.93-4.9H30v87.6h62.9V6.07Z"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker">
@@ -5759,28 +6037,23 @@
   <t t-name="o-spreadsheet-FullScreenChart">
     <div
       class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
-      t-if="figureUI"
+      t-if="chartId"
       t-on-click="exitFullScreen">
       <button
-        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1 shadow"
         t-on-click="exitFullScreen">
         Exit fullscreen
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-chart o-figure position-relative"
+          class="o-fullscreen-chart o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="fullScreenChart"
           t-on-click.stop=""
           t-on-keydown="(ev) => this.onKeyDown(ev)">
-          <t
-            t-component="chartComponent"
-            figureUI="this.figureUI"
-            isFullScreen="true"
-            t-key="this.figureUI.id"
-          />
+          <t t-component="chartComponent" chartId="chartId" isFullScreen="true" t-key="chartId"/>
           <div class="position-absolute top-0 end-0">
-            <ChartDashboardMenu figureUI="figureUI"/>
+            <ChartDashboardMenu chartId="chartId"/>
           </div>
         </div>
       </div>
@@ -5981,6 +6254,7 @@
                 onFigureDeleted="this.props.onFigureDeleted"
                 figureUI="figureUI"
                 style="getFigureStyle(figureUI)"
+                class="getFigureClass(figureUI)"
                 onMouseDown="(ev) => this.startDraggingFigure(figureUI, ev)"
                 onClickAnchor="(dirX, dirY, ev) => this.startResize(figureUI, dirX, dirY, ev)"
               />
@@ -6007,21 +6281,60 @@
 
   <t t-name="o-spreadsheet-ChartFigure">
     <div class="o-chart-container w-100 h-100" t-on-dblclick="onDoubleClick">
-      <t
-        t-component="chartComponent"
-        figureUI="this.props.figureUI"
-        t-key="this.props.figureUI.id"
-      />
+      <t t-component="chartComponent" chartId="chartId" t-key="chartId"/>
     </div>
     <div t-if="env.isDashboard()" class="position-absolute top-0 end-0">
-      <ChartDashboardMenu figureUI="props.figureUI"/>
+      <ChartDashboardMenu chartId="chartId"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-CarouselFigure">
+    <div class="o-carousel w-100 h-100 d-flex flex-column" t-on-dblclick="onCarouselDoubleClick">
+      <t t-set="selectedItem" t-value="selectedCarouselItem"/>
+      <div
+        class="o-carousel-header d-flex flex-shrink-0 pe-1 rounded pe-auto"
+        t-att-class="{
+          'o-carousel-header-floating': !env.isDashboard() and selectedItem?.type === 'carouselDataView',
+         }"
+        t-att-style="headerStyle">
+        <div
+          class="o-carousel-title d-flex align-items-center"
+          t-esc="title"
+          t-att-style="titleStyle"
+        />
+        <div class="ms-auto d-flex">
+          <t t-foreach="carousel.items" t-as="item" t-key="item_index">
+            <div
+              class="o-carousel-tab text-truncate px-2 mt-1 mb-1 flex-shrink-0"
+              t-att-class="{ 'selected': isItemSelected(item) }"
+              t-esc="getItemTitle(item)"
+              t-on-click.stop="() => this.onCarouselTabClick(item)"
+            />
+          </t>
+        </div>
+      </div>
+      <div
+        t-if="!selectedItem"
+        class="o-carousel-empty w-100 flex-fill d-flex align-items-center justify-content-center">
+        <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
+      </div>
+      <div t-elif="selectedItem.type === 'chart'" class="o-carousel-content w-100 flex-fill">
+        <div class="o-chart-container w-100 h-100">
+          <t
+            t-component="chartComponent"
+            chartId="selectedItem.chartId"
+            t-key="selectedItem.chartId"
+          />
+        </div>
+      </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
-    <div class="o-figure-wrapper pe-auto" t-att-style="wrapperStyle">
+    <div class="o-figure-wrapper" t-att-style="wrapperStyle" t-ref="figureWrapper">
       <div
         class="o-figure w-100 h-100"
+        t-att-class="props.class"
         t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
         t-on-click="onClick"
         t-on-contextmenu.prevent.stop="(ev) => !env.model.getters.isReadonly() and this.onContextMenu(ev)"
@@ -6036,11 +6349,12 @@
           t-key="props.figureUI.id"
           onFigureDeleted="props.onFigureDeleted"
           figureUI="props.figureUI"
+          editFigureStyle.bind="editWrapperStyle"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
           <div
-            class="o-figure-menu-item"
-            t-if="!env.model.getters.isReadonly()"
+            class="o-figure-menu-item d-flex-align-items-center"
+            t-if="!env.model.getters.isReadonly() and props.figureUI.tag !== 'carousel'"
             t-on-click="showMenu"
             t-ref="menuButton"
             t-on-contextmenu.prevent.stop="showMenu">
@@ -6053,46 +6367,63 @@
             onClose="() => this.menuState.isOpen=false"
           />
         </div>
+        <div t-if="!env.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-style="getBorderStyle('top')"
+          />
+          <div
+            class="o-figure-border pe-auto h-100 position-absolute start-0 ps-2"
+            t-att-style="getBorderStyle('left')"
+          />
+          <div
+            class="o-figure-border pe-auto w-100 position-absolute bottom-0 pt-2"
+            t-att-style="getBorderStyle('bottom')"
+          />
+          <div
+            class="o-figure-border pe-auto h-100 position-absolute end-0 pe-2"
+            t-att-style="getBorderStyle('right')"
+          />
+        </div>
       </div>
-      <div class="o-figure-border w-100 h-100 position-absolute pe-none" t-att-style="borderStyle"/>
       <t t-if="isSelected and !env.isMobile()">
         <div
-          class="o-fig-anchor o-top"
+          class="o-fig-anchor o-top pe-auto"
           t-att-style="this.getResizerPosition('top')"
           t-on-pointerdown="(ev) => this.clickAnchor(0,-1, ev)"
         />
         <div
-          class="o-fig-anchor o-topRight"
+          class="o-fig-anchor o-topRight pe-auto"
           t-att-style="this.getResizerPosition('top right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,-1, ev)"
         />
         <div
-          class="o-fig-anchor o-right"
+          class="o-fig-anchor o-right pe-auto"
           t-att-style="this.getResizerPosition('right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,0, ev)"
         />
         <div
-          class="o-fig-anchor o-bottomRight"
+          class="o-fig-anchor o-bottomRight pe-auto"
           t-att-style="this.getResizerPosition('bottom right')"
           t-on-pointerdown="(ev) => this.clickAnchor(1,1, ev)"
         />
         <div
-          class="o-fig-anchor o-bottom"
+          class="o-fig-anchor o-bottom pe-auto"
           t-att-style="this.getResizerPosition('bottom')"
           t-on-pointerdown="(ev) => this.clickAnchor(0,1, ev)"
         />
         <div
-          class="o-fig-anchor o-bottomLeft"
+          class="o-fig-anchor o-bottomLeft pe-auto"
           t-att-style="this.getResizerPosition('bottom left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,1, ev)"
         />
         <div
-          class="o-fig-anchor o-left"
+          class="o-fig-anchor o-left pe-auto"
           t-att-style="this.getResizerPosition('left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,0, ev)"
         />
         <div
-          class="o-fig-anchor o-topLeft"
+          class="o-fig-anchor o-topLeft pe-auto"
           t-att-style="this.getResizerPosition('top left')"
           t-on-pointerdown="(ev) => this.clickAnchor(-1,-1, ev)"
         />
@@ -6112,20 +6443,21 @@
     <canvas class="o-figure-canvas o-gauge-chart w-100 h-100 d-block" t-ref="chartContainer"/>
   </t>
 
-  <t t-name="spreadsheet.ChartDashboardMenu">
+  <t t-name="o-spreadsheet-ChartDashboardMenu">
     <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
-      <div class="d-flex flex-row px-1" t-att-style="backgroundColor">
+      <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
         <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
-          <button
-            t-attf-class=" {{item.iconClass}} {{item.isSelected ? 'active' : ''}}"
-            class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
+          <div
+            t-attf-class=" {{item.class}}"
+            class="o-chart-dashboard-item btn border-0 lh-1 p-1 d-flex align-items-center justify-content-center"
             t-att-title="item.label"
             t-on-click="item.onClick"
-            t-att-data-id="item.id"
-          />
+            t-att-data-id="item.id">
+            <t t-if="item.preview" t-call="{{item.preview}}"/>
+          </div>
         </t>
         <button
-          class="o-chart-dashboard-item btn mt-1 p-1 fa fa-ellipsis-v"
+          class="o-chart-dashboard-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
           t-on-click="openContextMenu"
         />
       </div>
@@ -6142,6 +6474,24 @@
     <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
   </t>
 
+  <t t-name="o-spreadsheet-ZoomableChartJsComponent">
+    <div class="w-100 h-100" t-att-style="canvasStyle">
+      <div t-att-style="containerStyle">
+        <canvas class="o-figure-canvas w-100 h-100" t-ref="graphContainer"/>
+      </div>
+      <div t-if="sliceable" class="o-master-chart-container m-0">
+        <canvas
+          class="o-figure-canvas o-master-chart-canvas w-100 h-100"
+          t-ref="masterChartCanvas"
+          t-on-dblclick="onDoubleClickInMasterChart"
+          t-on-pointerdown="onPointerDownInMasterChart"
+          t-on-pointermove="onPointerMoveInMasterChart"
+          t-on-mouseleave="onMouseLeaveMasterChart"
+        />
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ErrorToolTip">
     <div class="o-error-tooltip">
       <t t-if="evaluationError">
@@ -6280,11 +6630,14 @@
             </t>
             )
           </div>
-          <i
-            class="fa fa-caret-up px-2 align-self-start"
+          <div
+            class="collapsor px-2 d-flex align-items-center rounded"
             t-att-class="state.isCollapsed ? 'collapsed' : ''"
-            t-on-click="() => this.toggle()"
-          />
+            t-on-click="() => this.toggle()">
+            <span class="collapsor-arrow d-inline-block">
+              <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
+            </span>
+          </div>
         </div>
 
         <Collapse isCollapsed="state.isCollapsed">
@@ -6321,13 +6674,14 @@
   <t t-name="o-spreadsheet-Composer">
     <div class="o-composer-container w-100 h-100">
       <t t-set="autoCompleteProposals" t-value="props.composerStore.autoCompleteProposals"/>
+      <t t-set="canBeToggled" t-value="props.composerStore.canBeToggled"/>
       <t
         t-set="assistantIsAvailable"
         t-value="props.showAssistant and (autoCompleteProposals.length or functionDescriptionState.showDescription)"
       />
       <div class="d-flex flex-row position-relative">
         <span
-          t-if="props.focus !== 'inactive' and assistantIsAvailable and assistant.forcedClosed"
+          t-if="props.focus !== 'inactive' and assistantIsAvailable and canBeToggled and assistant.forcedClosed"
           role="button"
           title="Show formula help"
           t-on-click="openAssistant"
@@ -6344,7 +6698,7 @@
           t-att-style="props.inputStyle"
           t-ref="o_composer"
           tabindex="1"
-          t-att-contenteditable="env.model.getters.isReadonly() ? 'false' : 'true'"
+          t-att-contenteditable="env.model.getters.isReadonly() ? 'false' : 'plaintext-only'"
           t-att-placeHolder="props.placeholder"
           t-att-inputmode="props.inputMode"
           spellcheck="false"
@@ -6367,12 +6721,13 @@
       <div
         class="o-composer-assistant-container shadow position-absolute z-1"
         t-att-style="assistantContainerStyle"
-        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable"
+        t-if="props.focus !== 'inactive' and assistantIsAvailable and !(canBeToggled and assistant.forcedClosed)"
         t-on-wheel.stop=""
         t-on-pointerdown.prevent.stop=""
         t-on-pointerup.prevent.stop=""
         t-on-click.prevent.stop="">
         <span
+          t-if="canBeToggled and !assistant.forcedClosed"
           role="button"
           t-on-click="closeAssistant"
           class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
@@ -6693,7 +7048,7 @@
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
-          t-att-contenteditable="state.isEditing ? 'true': 'false'"
+          t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
         />
         <span
           class="o-sheet-icon ms-1"