@odoo/o-spreadsheet 18.5.0-alpha.6 → 18.5.0-alpha.8

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.6
- @date 2025-08-05T06:28:37.212Z
- @hash 67e091f
+ @version 18.5.0-alpha.8
+ @date 2025-08-18T08:18:48.925Z
+ @hash 994f1cb
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -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"
@@ -1013,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"
@@ -2337,6 +2355,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">
@@ -2352,6 +2401,15 @@
         <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>
     <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Waterfall design">
@@ -2410,7 +2468,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -2432,14 +2490,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"
             />
@@ -2455,13 +2513,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"
@@ -2474,7 +2532,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>
@@ -2482,7 +2540,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"
@@ -2573,7 +2631,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>
@@ -2581,7 +2639,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"
           />
@@ -2740,7 +2798,7 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartPanel">
-    <div class="o-chart d-flex flex-column h-100" 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"
@@ -2758,27 +2816,27 @@
         </div>
       </div>
 
-      <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
+      <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 figureId="props.figureId" chartPanelStore="store"/>
+          <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
           <t
             t-component="chartPanel.configuration"
             definition="definition"
-            figureId="figureId"
+            chartId="chartId"
             updateChart.bind="updateChart"
             canUpdateChart.bind="canUpdateChart"
-            t-key="figureId + definition.type"
+            t-key="chartId + definition.type"
           />
         </div>
         <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
           <t
             t-component="chartPanel.design"
             definition="definition"
-            figureId="figureId"
+            chartId="chartId"
             updateChart.bind="updateChart"
             canUpdateChart.bind="canUpdateChart"
-            t-key="figureId + definition.type"
+            t-key="chartId + definition.type"
           />
         </div>
       </div>
@@ -2793,6 +2851,15 @@
           <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>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>
@@ -2800,7 +2867,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -2957,7 +3024,7 @@
   <t t-name="o-spreadsheet-GeoChartConfigPanel">
     <div>
       <GeoChartRegionSelectSection
-        figureId="props.figureId"
+        chartId="props.chartId"
         definition="props.definition"
         updateChart="props.updateChart"
       />
@@ -3157,6 +3224,15 @@
           <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>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props">
@@ -3176,7 +3252,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -3198,7 +3274,7 @@
       <t t-set-slot="content">
         <AxisDesignEditor
           axesList="axesList"
-          figureId="props.figureId"
+          chartId="props.chartId"
           definition="props.definition"
           updateChart="props.updateChart"
         />
@@ -3632,7 +3708,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>
 
@@ -3641,7 +3717,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>
 
@@ -3989,6 +4065,62 @@
     </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">
+        <t t-foreach="carouselItems" t-as="item" t-key="getItemId(item)">
+          <div
+            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex align-items-center"
+            t-att-class="{ 'o-dragging': dragAndDrop.draggedItemId === getItemId(item) }"
+            t-att-style="getPreviewDivStyle(item)">
+            <div
+              class="o-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon 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="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>
+        </t>
+      </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
@@ -5345,6 +5477,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">
@@ -5825,7 +5965,7 @@
   <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"
@@ -5839,14 +5979,9 @@
           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>
@@ -6047,6 +6182,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)"
               />
@@ -6073,21 +6209,54 @@
 
   <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" t-on-dblclick="onCarouselDoubleClick">
+      <t t-set="selectedItem" t-value="selectedCarouselItem"/>
+      <div
+        class="o-carousel-header position-absolute end-0 top-0 d-flex pe-1 rounded pe-auto"
+        t-att-class="{
+          'o-carousel-header-floating': !env.isDashboard() and selectedItem?.type === 'carouselDataView',
+         }"
+        t-att-style="headerStyle"
+        t-on-pointerdown.stop="">
+        <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
+        t-if="!selectedItem"
+        class="o-carousel-empty w-100 h-100 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 h-100">
+        <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)"
@@ -6102,11 +6271,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()"
+            t-if="!env.model.getters.isReadonly() and props.figureUI.tag !== 'carousel'"
             t-on-click="showMenu"
             t-ref="menuButton"
             t-on-contextmenu.prevent.stop="showMenu">
@@ -6208,6 +6378,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">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "18.5.0-alpha.6",
+  "version": "18.5.0-alpha.8",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",