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

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.11
- @date 2025-08-26T10:14:56.034Z
- @hash b913e49
+ @version 18.5.0-alpha.13
+ @date 2025-09-05T07:42:22.231Z
+ @hash ae74b5b
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -53,8 +53,13 @@
         </div>
       </div>
       <!-- Toolbar and Cell Content -->
-      <div class="d-flex o-topbar-responsive" t-ref="toolBarContainer">
-        <div class="o-topbar-toolbar d-flex">
+      <div
+        class="d-flex o-topbar-responsive"
+        t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
+        t-ref="toolBarContainer">
+        <div
+          class="o-topbar-toolbar d-flex"
+          t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
@@ -2341,30 +2346,6 @@
     </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">
@@ -4125,66 +4106,65 @@
 
   <t t-name="o-spreadsheet-CarouselPanel">
     <div class="o-carousel-panel h-100 overflow-auto">
+      <Section title.translate="Carousel Title" class="'o-carousel-title'">
+        <TextInput
+          value="title?.text ?? ''"
+          onChange.bind="updateTitleText"
+          placeholder.translate="Add a Title"
+          alwaysShowBorder="true"
+        />
+        <TextStyler
+          style="title ?? {}"
+          updateStyle.bind="updateTitleStyle"
+          defaultStyle="DEFAULT_CAROUSEL_TITLE_STYLE"
+          hasHorizontalAlign="false"
+        />
+      </Section>
+      <div class="o-section pb-1 pt-0">
+        <div class="o-section-title">Carousel Sections</div>
+      </div>
       <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)">
+        <t t-foreach="carouselItems" t-as="item" t-key="getItemId(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>
+            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),
+              'o-selected': isCarouselItemActive(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="ms-3">
-              <CarouselItemTitleCollapsible
-                carouselTitle="item.carouselTitle"
-                onUpdateCarouselTitle="(style) => this.onUpdateCarouselTitle(item_index, style)"
+            <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 class="flex-shrink-0 d-flex align-self-start me-1">
+              <CogWheelMenu items="getCogWheelMenuItems(item)"/>
+            </div>
           </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">
+        class="o-button-link o-carousel-add-chart float-end d-flex align-items-center py-4 pe-4 gap-2"
+        t-on-click="addNewChartToCarousel"
+        t-att-title="carouselAddChartInfoMessage">
         + 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">
+        class="o-button-link o-carousel-add-data-view float-end py-4 pe-4"
+        t-on-click="addDataViewToCarousel"
+        t-att-title="carouselDataViewMessage">
         + Add data view
       </div>
     </div>
@@ -5117,6 +5097,11 @@
       <i class="fa fa-pencil-square-o"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.EXTERNAL">
+    <div class="o-icon">
+      <i class="fa fa-external-link"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
     <div class="o-icon">
       <i class="fa fa-chain-broken"/>
@@ -5557,6 +5542,14 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.DATA">
+    <svg class="o-icon" viewBox="0 0 18 18">
+      <path
+        fill="currentColor"
+        d="M.5 1.5a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1zM6 6V1.5H1.5V6m10 0V1.5h-5V6m10 0V1.5H12V6m-6 5.5v-5H1.5v5m10 0v-5h-5v5m10 0v-5H12v5m-6 5V12H1.5v4.5m10 0V12h-5v4.5m10 0V12H12v4.5"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker">
@@ -6035,10 +6028,12 @@
   </t>
 
   <t t-name="o-spreadsheet-FullScreenChart">
-    <div
-      class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
-      t-if="chartId"
-      t-on-click="exitFullScreen">
+    <div class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex" t-if="chartId">
+      <div
+        class="position-absolute top-0 start-0 end-0 bottom-0"
+        t-on-click="exitFullScreen"
+        aria-hidden="true"
+      />
       <button
         class="o-exit top-0 end-0 position-absolute o-button primary m-1 shadow"
         t-on-click="exitFullScreen">
@@ -6292,20 +6287,17 @@
     <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"
+        class="o-carousel-header d-flex align-items-baseline flex-shrink-0 pe-1 pe-auto"
         t-att-class="{
+          'border-bottom': env.isDashboard(),
           '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="o-carousel-title text-truncate" 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"
+              class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': isItemSelected(item) }"
               t-esc="getItemTitle(item)"
               t-on-click.stop="() => this.onCarouselTabClick(item)"
@@ -6318,7 +6310,9 @@
         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
+        t-elif="selectedItem.type === 'chart'"
+        class="o-carousel-content w-100 flex-fill position-relative">
         <div class="o-chart-container w-100 h-100">
           <t
             t-component="chartComponent"
@@ -6326,6 +6320,11 @@
             t-key="selectedItem.chartId"
           />
         </div>
+        <ChartDashboardMenu
+          t-if="env.isDashboard()"
+          chartId="selectedItem.chartId"
+          t-key="selectedItem.chartId"
+        />
       </div>
     </div>
   </t>
@@ -6535,8 +6534,13 @@
             t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
             t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
             t-on-contextmenu.prevent=""
-            t-att-style="getCellClickableStyle(clickableCell.coordinates)"
-          />
+            t-att-style="getCellClickableStyle(clickableCell.coordinates)">
+            <t
+              t-if="clickableCell.component"
+              t-component="clickableCell.component"
+              t-props="clickableCell.componentProps"
+            />
+          </div>
         </GridOverlay>
         <canvas t-ref="canvas"/>
         <GridPopover
@@ -6551,6 +6555,14 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ClickableCellSortIcon">
+    <div class="w-100 h-100 d-flex flex-column align-items-end justify-content-end">
+      <span class="o-icon h-100 sorting-icon pb-1" t-att-style="style">
+        <i class="fa fa-small" t-att-class="icon"/>
+      </span>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-TopBarComposer">
     <div class="o-topbar-composer-container w-100">
       <div

package/package.json

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