@odoo/o-spreadsheet 18.5.0-alpha.7 → 18.5.0-alpha.9

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.7
- @date 2025-08-08T11:01:32.306Z
- @hash 1019d55
+ @version 18.5.0-alpha.9
+ @date 2025-08-19T16:55:34.562Z
+ @hash 0e0d850
 -->
 <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"
@@ -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"
@@ -2323,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">
@@ -2337,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">
@@ -2352,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">
@@ -2600,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>
@@ -2718,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"/>
@@ -2730,6 +2813,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>
         <PieHoleSize
           t-if="props.definition.isDoughnut"
           value="props.definition.pieHolePercentage ?? this.defaultHoleSize"
@@ -2793,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"/>
@@ -2899,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>
 
@@ -2987,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">
@@ -3129,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>
 
@@ -3157,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">
@@ -3191,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"/>
@@ -3828,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
@@ -3992,41 +4126,52 @@
   <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
+          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-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)"
+            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-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 class="ms-3">
+              <CarouselItemTitleCollapsible
+                carouselTitle="item.carouselTitle"
+                onUpdateCarouselTitle="(style) => this.onUpdateCarouselTitle(item_index, style)"
+              />
             </div>
           </div>
-        </t>
+        </div>
       </div>
       <div
         class="o-button-link o-carousel-add-chart float-end d-flex align-items-center pt-4 pe-4 gap-2"
@@ -6141,30 +6286,36 @@
   </t>
 
   <t t-name="o-spreadsheet-CarouselFigure">
-    <div class="o-carousel w-100 h-100" t-on-dblclick="onCarouselDoubleClick">
+    <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 position-absolute end-0 top-0 d-flex pe-1 rounded pe-auto"
+        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"
-        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>
+        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 h-100 d-flex align-items-center justify-content-center">
+        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 h-100">
+      <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"
@@ -6302,6 +6453,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.7",
+  "version": "18.5.0-alpha.9",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",