@odoo/o-spreadsheet 17.3.0-alpha.1 → 17.3.0-alpha.3

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 17.3.0-alpha.1
- @date 2024-03-25T09:44:13.802Z
- @hash 4095c41
+ @version 17.3.0-alpha.3
+ @date 2024-04-10T12:29:04.461Z
+ @hash 80b5056
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -276,7 +276,7 @@
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
-          t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
+          t-att-contenteditable="state.isEditing ? 'true': 'false'"
         />
         <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
@@ -285,7 +285,7 @@
     </Ripple>
   </t>
 
-  <t t-name="o-spreadsheet-BottomBarStatisic">
+  <t t-name="o-spreadsheet-BottomBarStatistic">
     <t t-set="selectedStatistic" t-value="getSelectedStatistic()"/>
     <Ripple class="'ms-auto'" t-if="selectedStatistic !== undefined">
       <div
@@ -471,6 +471,7 @@
         t-on-compositionstart="onCompositionStart"
         t-on-compositionend="onCompositionEnd"
         t-on-dblclick="onDblClick"
+        t-on-contextmenu="onContextMenu"
       />
 
       <div
@@ -515,7 +516,7 @@
           <span t-esc="context.functionName"/>
           (
           <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-            <span t-if="arg_index > '0'">,&#xA0;</span>
+            <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
             <span t-att-class="{ 'o-formula-assistant-focus': context.argToFocus === arg_index }">
               <span>
                 <span t-if="arg.optional || arg.repeating || arg.default">[</span>
@@ -574,7 +575,12 @@
       class="o-topbar-composer bg-white user-select-text"
       t-on-click.stop=""
       t-att-style="containerStyle">
-      <Composer focus="focus" inputStyle="composerStyle" onComposerContentFocused.bind="onFocus"/>
+      <Composer
+        focus="focus"
+        inputStyle="composerStyle"
+        onComposerContentFocused.bind="onFocus"
+        delimitation="delimitation"
+      />
     </div>
   </t>
 
@@ -583,7 +589,7 @@
       class="o-grid o-two-columns"
       tabindex="-1"
       t-on-wheel="onMouseWheel"
-      t-on-click="onClosePopover">
+      t-on-pointerdown="onClosePopover">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onCellHovered.bind="onCellHovered"
@@ -606,7 +612,6 @@
           t-on-contextmenu.prevent=""
           t-att-style="getCellClickableStyle(clickableCell.coordinates)"
         />
-        <FilterIconsOverlay/>
       </div>
       <VerticalScrollBar/>
       <HorizontalScrollBar/>
@@ -806,21 +811,23 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterIcon">
-    <div class="o-filter-icon" t-att-class="iconClass" t-on-click.stop="onClick">
+    <div class="o-filter-icon" t-att-class="iconClass" t-on-click="onClick">
       <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
       <t t-else="" t-call="o-spreadsheet-Icon.FILTER_ICON"/>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-FilterIconsOverlay">
-    <t
-      t-foreach="getFilterHeadersPositions()"
-      t-as="position"
-      t-key="'filter'+position.col + '_' + position.row">
-      <GridCellIcon cellPosition="position" offset="props.gridPosition" horizontalAlign="'right'">
-        <FilterIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
+    <div t-on-pointerdown.stop="this.props.onMouseDown">
+      <t
+        t-foreach="getFilterHeadersPositions()"
+        t-as="position"
+        t-key="'filter'+position.col + '_' + position.row">
+        <GridCellIcon cellPosition="position" horizontalAlign="'right'">
+          <FilterIcon cellPosition="position"/>
+        </GridCellIcon>
+      </t>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-FilterMenu">
@@ -948,7 +955,6 @@
       t-on-click="focusDefaultElement"
       t-on-keydown="onKeydown"
       t-on-wheel="onMouseWheel"
-      t-on-contextmenu="onInputContextMenu"
       t-ref="grid">
       <GridOverlay
         onCellClicked.bind="onCellClicked"
@@ -961,7 +967,10 @@
         onFigureDeleted.bind="focusDefaultElement"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
-      <GridComposer gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"/>
+      <GridComposer
+        gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"
+        onInputContextMenu.bind="onInputContextMenu"
+      />
       <canvas t-ref="canvas"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
@@ -996,7 +1005,6 @@
         position="menuState.position"
         onClose="() => this.closeMenu()"
       />
-      <FilterIconsOverlay gridPosition="{ x: HEADER_WIDTH, y : HEADER_HEIGHT }"/>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
       <HorizontalScrollBar leftOffset="HEADER_WIDTH"/>
       <div class="o-scrollbar corner"/>
@@ -1049,6 +1057,7 @@
       t-on-contextmenu.stop.prevent="onContextMenu">
       <FiguresContainer onFigureDeleted="props.onFigureDeleted"/>
       <DataValidationOverlay/>
+      <FilterIconsOverlay onMouseDown="(ev) => this.onMouseDown(ev, {closePopover: false})"/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -1209,25 +1218,22 @@
         t-as="hiddenItem"
         t-key="hiddenItem_index">
         <div
-          class="o-unhide-buttons position-relative float-end"
+          class="position-absolute end-0 translate-middle-y"
           t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <t t-if="!hiddenItem.includes(0)">
-            <div
-              class="o-unhide rounded mb-1"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
-            </div>
-          </t>
-          <t
-            t-if="!hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
-            </div>
-          </t>
+          <div
+            class="o-unhide rounded mb-1"
+            t-att-class="{'invisible': hiddenItem.includes(0)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.TRIANGLE_UP"/>
+          </div>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberRows(env.model.getters.getActiveSheetId())-1)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>
+          </div>
         </div>
       </t>
     </div>
@@ -1268,25 +1274,22 @@
         t-as="hiddenItem"
         t-key="hiddenItem_index">
         <div
-          class="o-unhide-buttons position-relative h-100 d-flex align-items-center"
+          class="position-absolute h-100 d-flex align-items-center translate-middle-x gap-2"
           t-att-style="getUnhideButtonStyle(hiddenItem[0])">
-          <t t-if="!hiddenItem.includes(0)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
-            </div>
-          </t>
-          <t
-            t-if="!hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)">
-            <div
-              class="o-unhide rounded"
-              t-att-data-index="hiddenItem_index"
-              t-on-click="() => this.unhide(hiddenItem)">
-              <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
-            </div>
-          </t>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(0)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.TRIANGLE_LEFT"/>
+          </div>
+          <div
+            class="o-unhide rounded"
+            t-att-class="{'invisible': hiddenItem.includes(env.model.getters.getNumberCols(env.model.getters.getActiveSheetId())-1)}"
+            t-att-data-index="hiddenItem_index"
+            t-on-click="() => this.unhide(hiddenItem)">
+            <t t-call="o-spreadsheet-Icon.TRIANGLE_RIGHT"/>
+          </div>
         </div>
       </t>
     </div>
@@ -2441,7 +2444,7 @@ https://fontawesome.com/license -->
               t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': isActive(menuItem)}"
               t-att-style="getColor(menuItem)">
               <div class="d-flex w-100">
-                <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle">
+                <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle flex-shrink-0">
                   <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
                 </div>
                 <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
@@ -2616,10 +2619,17 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-BarChartDesignPanel">
     <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked.bind="updateBackgroundColor"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
       <ChartTitle title="title" update.bind="updateTitle"/>
       <Section>
         <t t-set-slot="title">Vertical axis position</t>
@@ -2647,24 +2657,6 @@ https://fontawesome.com/license -->
     </div>
   </t>
 
-  <t t-name="o-spreadsheet.ChartColor">
-    <Section class="'o-chart-background-color'">
-      <t t-set-slot="title">Background color</t>
-      <div class="d-flex align-items-center">
-        <span class="pe-1">Select a color...</span>
-        <t t-set="background_color">Background color</t>
-        <ColorPickerWidget
-          currentColor="props.currentColor"
-          showColorPicker="state.pickerOpened"
-          toggleColorPicker.bind="togglePicker"
-          onColorPicked="props.onColorPicked"
-          title="background_color"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        />
-      </div>
-    </Section>
-  </t>
-
   <t t-name="o-spreadsheet.ChartDataSeries">
     <Section class="'o-data-series'">
       <t t-set-slot="title" t-esc="title"/>
@@ -2720,6 +2712,81 @@ https://fontawesome.com/license -->
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ComboChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
+        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
+        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
+        options="this.getLabelRangeOptions()"
+      />
+      <Section class="'o-use-right-axis py-0'">
+        <Checkbox
+          name="'shouldUseRightAxis'"
+          label="shouldUseRightAxis"
+          value="props.definition.useBothYAxis"
+          onChange.bind="onUpdateUseRightAxis"
+        />
+      </Section>
+      <Section class="'o-use-row-as-headers py-0'" t-if="calculateHeaderPosition()">
+        <Checkbox
+          name="'dataSetsHaveTitle'"
+          label="dataSetsHaveTitleLabel"
+          value="props.definition.dataSetsHaveTitle"
+          onChange.bind="onUpdateDataSetsHaveTitle"
+        />
+      </Section>
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-ComboChartDesignPanel">
+    <div>
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked.bind="updateBackgroundColor"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
+      <ChartTitle title="title" update.bind="updateTitle"/>
+      <Section t-if="!props.definition.useBothYAxis">
+        <t t-set-slot="title">Vertical axis position</t>
+        <select
+          t-att-value="props.definition.verticalAxisPosition"
+          class="o-input"
+          t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </Section>
+      <Section>
+        <t t-set-slot="title">Legend position</t>
+        <select
+          t-att-value="props.definition.legendPosition"
+          class="o-input"
+          t-on-change="(ev) => this.updateSelect('legendPosition', ev)">
+          <option value="none">None</option>
+          <option value="top">Top</option>
+          <option value="bottom">Bottom</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
@@ -2738,10 +2805,17 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
     <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked.bind="updateBackgroundColor"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
       <ChartTitle title="title" update.bind="updateTitle"/>
       <Section>
         <t t-set-slot="title">Range</t>
@@ -2806,12 +2880,9 @@ https://fontawesome.com/license -->
 
         <tr>
           <td>
-            <ColorPickerWidget
+            <RoundColorPicker
               currentColor="sectionRule.colors.upperColor"
-              toggleColorPicker="(ev) => this.toggleMenu('sectionColor-upperColor', ev)"
-              showColorPicker="state.openedMenu === 'sectionColor-upperColor'"
               onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
-              icon="'o-spreadsheet-Icon.FILL_COLOR'"
             />
           </td>
           <td>Else</td>
@@ -2826,12 +2897,9 @@ https://fontawesome.com/license -->
   <t t-name="o-spreadsheet-GaugeChartColorSectionTemplateRow">
     <tr>
       <td>
-        <ColorPickerWidget
+        <RoundColorPicker
           currentColor="sectionColor"
-          toggleColorPicker="(ev) => this.toggleMenu('sectionColor-'+sectionType, ev)"
-          showColorPicker="state.openedMenu === 'sectionColor-'+sectionType"
           onColorPicked="(color) => this.updateSectionColor(sectionType, color)"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
         />
       </td>
       <td>When value is below</td>
@@ -2888,10 +2956,17 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-LineBarPieDesignPanel">
     <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked.bind="updateBackgroundColor"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
       <ChartTitle title="title" update.bind="updateTitle"/>
       <Section>
         <t t-set-slot="title">Legend position</t>
@@ -2952,10 +3027,17 @@ https://fontawesome.com/license -->
 
   <t t-name="o-spreadsheet-LineChartDesignPanel">
     <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked.bind="updateBackgroundColor"
-      />
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked.bind="updateBackgroundColor"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
       <ChartTitle title="title" update.bind="updateTitle"/>
       <Section>
         <t t-set-slot="title">Vertical axis position</t>
@@ -3101,6 +3183,7 @@ https://fontawesome.com/license -->
           <option value="text">Absolute value</option>
           <option value="difference">Value change from key value</option>
           <option value="percentage">Percentage change from key value</option>
+          <option value="progress">Progress bar</option>
         </select>
       </Section>
 
@@ -3112,10 +3195,17 @@ https://fontawesome.com/license -->
     <t t-set="color_up">Color Up</t>
     <t t-set="color_down">Color Down</t>
     <div>
-      <ChartColor
-        currentColor="props.definition.background"
-        onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
-      />
+      <Section class="'o-chart-background-color'">
+        <t t-set-slot="title">Background color</t>
+        <div class="d-flex align-items-center">
+          <span class="me-2">Select a color...</span>
+          <RoundColorPicker
+            currentColor="props.definition.background"
+            onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
+            title="backgroundColorTitle"
+          />
+        </div>
+      </Section>
       <ChartTitle title="title" update.bind="updateTitle"/>
       <Section>
         <t t-set-slot="title">Baseline description</t>
@@ -3128,37 +3218,41 @@ https://fontawesome.com/license -->
       </Section>
     </div>
     <Section class="'o-chart-baseline-color'">
-      <t t-set-slot="title">Baseline color</t>
-      <div class="d-flex align-items-center">
-        <span class="pe-1">Color on value increase</span>
-        <ColorPickerWidget
+      <t t-set-slot="title" t-esc="colorsSectionTitle"/>
+      <div class="d-flex align-items-center mb-2">
+        <RoundColorPicker
           currentColor="props.definition.baselineColorUp"
-          toggleColorPicker="() => this.toggleColorPicker('baselineColorUp')"
-          showColorPicker="state.openedColorPicker === 'baselineColorUp'"
           onColorPicked="(color) => this.setColor(color, 'baselineColorUp')"
           title="color_up"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
         />
+        <span class="ps-2">Color on value increase</span>
       </div>
       <div class="d-flex align-items-center">
-        <span class="pe-1">Color on value decrease</span>
-        <ColorPickerWidget
+        <RoundColorPicker
           currentColor="props.definition.baselineColorDown"
-          toggleColorPicker="() => this.toggleColorPicker('baselineColorDown')"
-          showColorPicker="state.openedColorPicker === 'baselineColorDown'"
           onColorPicked="(color) => this.setColor(color, 'baselineColorDown')"
           title="color_down"
-          icon="'o-spreadsheet-Icon.FILL_COLOR'"
         />
+        <span class="ps-2">Color on value decrease</span>
       </div>
     </Section>
+    <Section class="'pt-1'">
+      <t t-set-slot="title">Number formatting</t>
+      <Checkbox
+        name="'humanizeNumbers'"
+        label="humanizeNumbersLabel"
+        value="props.definition.humanize"
+        onChange.bind="updateHumanizeNumbers"
+      />
+    </Section>
   </t>
 
   <t t-name="o-spreadsheet.Checkbox">
     <label
       class="o-checkbox"
       t-att-title="props.title"
-      t-att-class="{'text-muted': props.disabled }">
+      t-att-class="{'text-muted': props.disabled }"
+      t-attf-class="{{props.className}}">
       <input
         type="checkbox"
         t-att-disabled="props.disabled"
@@ -3171,6 +3265,22 @@ https://fontawesome.com/license -->
     </label>
   </t>
 
+  <t t-name="o-spreadsheet.RoundColorPicker">
+    <div
+      class="o-round-color-picker-button rounded-circle"
+      t-ref="colorPickerButton"
+      t-on-click.stop="togglePicker"
+      t-att-title="props.title"
+      t-att-style="buttonStyle"
+    />
+    <ColorPicker
+      t-if="state.pickerOpened"
+      anchorRect="colorPickerAnchorRect"
+      onColorPicked.bind="onColorPicked"
+      currentColor="props.currentColor"
+    />
+  </t>
+
   <t t-name="o_spreadsheet.Section">
     <div class="o-section" t-att-class="props.class">
       <t t-if="props.slots.title">
@@ -3405,19 +3515,22 @@ https://fontawesome.com/license -->
         type="text"
         class="o-input o-threshold-value o-required"
         t-model="rule[thresholdType].value"
-        t-att-class="{ 'o-invalid': isValueInvalid(thresholdType) }"
+        t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         t-if="threshold !== undefined and threshold.type !== 'value'"
       />
-      <input type="text" class="o-input o-threshold-value" t-else="" disabled="1"/>
-      <ColorPickerWidget
-        currentColor="getThresholdColor(threshold)"
-        toggleColorPicker="(ev) => this.toggleMenu('colorScale-'+thresholdType+'Color', ev)"
-        showColorPicker="state.openedMenu === 'colorScale-'+thresholdType+'Color'"
-        onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
-        title="fill_color"
-        icon="'o-spreadsheet-Icon.FILL_COLOR'"
-        disabled="threshold === undefined"
+      <input
+        type="text"
+        t-attf-class="o-input o-threshold-value {{ threshold === undefined ? 'invisible' : ''}}"
+        t-else=""
+        disabled="1"
       />
+      <div t-attf-class="flex-shrink-0 ms-1 {{ threshold === undefined ? 'invisible' : ''}}">
+        <RoundColorPicker
+          currentColor="getThresholdColor(threshold)"
+          onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
+          title="fill_color"
+        />
+      </div>
     </div>
   </t>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.3.0-alpha.1",
+  "version": "17.3.0-alpha.3",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -88,9 +88,9 @@
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-typescript2": "^0.35.0",
     "ts-jest": "^29.1.0",
-    "typedoc": "0.24.8",
-    "typedoc-plugin-markdown": "3.11.1",
-    "typescript": "^5.1.6",
+    "typedoc": "0.25.12",
+    "typedoc-plugin-markdown": "3.17.1",
+    "typescript": "^5.4.3",
     "xml-formatter": "^2.4.0"
   },
   "prettier": {
@@ -100,7 +100,7 @@
     "xmlSelfClosingSpace": false
   },
   "dependencies": {
-    "@odoo/owl": "2.2.7",
+    "@odoo/owl": "2.2.10",
     "bootstrap": "^5.1.3",
     "rbush": "^3.0.1"
   },