@odoo/o-spreadsheet 19.2.0-alpha.1 → 19.2.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 19.2.0-alpha.1
- @date 2025-12-26T10:21:23.225Z
- @hash 3296c7e
+ @version 19.2.0-alpha.3
+ @date 2026-01-14T10:03:04.642Z
+ @hash e5cbf18
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -271,15 +271,17 @@
             t-esc="categories[category_value]"
           />
         </div>
-        <div class="d-flex flex-wrap px-4">
+        <div
+          class="d-flex flex-wrap px-4"
+          t-att-class="props.type === 'pivot' ? 'o-pivot-previews' : 'o-table-previews'">
           <t t-foreach="displayedStyles" t-as="styleId" t-key="styleId">
             <TableStylePreview
-              class="'o-table-style-popover-preview'"
               styleId="styleId"
               selected="styleId === props.selectedStyleId"
               tableConfig="props.tableConfig"
-              tableStyle="env.model.getters.getTableStyle(styleId)"
+              tableStyle="props.tableStyles[styleId]"
               onClick="() => this.props.onStylePicked(styleId)"
+              type="props.type"
             />
           </t>
           <div
@@ -301,7 +303,7 @@
       t-att-title="styleName"
       t-on-click="props.onClick"
       t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
-      <div t-att-class="props.class">
+      <div class="o-table-preview">
         <canvas t-ref="canvas" class="w-100 h-100"/>
       </div>
       <div
@@ -322,15 +324,17 @@
 
   <t t-name="o-spreadsheet-TableStylePicker">
     <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1 border rounded">
-      <div class="d-flex flex-row overflow-hidden ps-2">
+      <div
+        class="d-flex flex-row overflow-hidden"
+        t-att-class="props.type === 'pivot' ? 'o-pivot-previews' : 'o-table-previews ps-2'">
         <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
           <TableStylePreview
-            class="'o-table-style-picker-preview'"
-            selected="styleId === props.table.config.styleId"
-            tableConfig="props.table.config"
-            tableStyle="env.model.getters.getTableStyle(styleId)"
+            selected="styleId === props.tableConfig.styleId"
+            tableConfig="props.tableConfig"
+            tableStyle="props.tableStyles[styleId]"
             styleId="styleId"
             onClick="() => this.onStylePicked(styleId)"
+            type="props.type"
           />
         </t>
       </div>
@@ -341,11 +345,13 @@
       </div>
     </div>
     <TableStylesPopover
-      tableConfig="props.table.config"
-      selectedStyleId="props.table.config.styleId"
+      tableConfig="props.tableConfig"
+      selectedStyleId="props.tableConfig.styleId"
       onStylePicked.bind="onStylePicked"
       popoverProps="state.popoverProps"
       closePopover.bind="closePopover"
+      tableStyles="props.tableStyles"
+      type="props.type"
     />
   </t>
 
@@ -371,6 +377,8 @@
       onStylePicked.bind="onStylePicked"
       popoverProps="state.popoverProps"
       closePopover.bind="closePopover"
+      tableStyles="tableStyles"
+      type="'table'"
     />
   </t>
 
@@ -499,11 +507,11 @@
         <div class="d-flex flex-wrap">
           <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
             <TableStylePreview
-              class="'o-table-style-edit-template-preview'"
               selected="templateName === state.selectedTemplateName"
               tableConfig="previewTableConfig"
               tableStyle="computeTableStyle(templateName)"
               onClick="() => this.onTemplatePicked(templateName)"
+              type="'table'"
             />
           </t>
         </div>
@@ -587,7 +595,12 @@
         </div>
       </Section>
       <Section>
-        <TableStylePicker table="props.table"/>
+        <TableStylePicker
+          tableConfig="props.table.config"
+          onStylePicked.bind="onStylePicked"
+          tableStyles="env.model.getters.getTableStyles()"
+          type="'table'"
+        />
       </Section>
       <Section title.translate="Data range">
         <SelectionInput
@@ -898,7 +911,7 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotSidePanel">
-    <div class="d-flex flex-column h-100">
+    <div class="o-pivot-panel d-flex flex-column h-100">
       <div class="o-panel d-flex">
         <div
           class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
@@ -918,7 +931,11 @@
 
       <div class="o-panel-content overflow-y-auto h-100" t-ref="panelContent">
         <div class="h-100" t-att-class="{ 'd-none': state.panel !== 'configuration' }">
-          <t t-component="sidePanelEditor" t-props="props"/>
+          <t
+            t-component="sidePanelEditor"
+            pivotId="props.pivotId"
+            onCloseSidePanel="props.onCloseSidePanel"
+          />
         </div>
         <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
           <PivotDesignPanel pivotId="props.pivotId"/>
@@ -1035,6 +1052,47 @@
         </div>
       </div>
     </Section>
+
+    <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
+      <div class="row mb-2 align-items-center pt-2">
+        <div class="col-6">Banded rows:</div>
+        <div class="col-6 d-flex align-items-center">
+          <Checkbox
+            name="'bandedRows'"
+            value="pivotStyle.bandedRows ?? defaultStyle.bandedRows"
+            onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
+          />
+        </div>
+      </div>
+      <div class="row mb-2 align-items-center">
+        <div class="col-6">Banded columns</div>
+        <div class="col-6 d-flex align-items-center">
+          <Checkbox
+            name="'bandedColumns'"
+            value="pivotStyle.bandedColumns ?? defaultStyle.bandedColumns"
+            onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
+          />
+        </div>
+      </div>
+      <div class="row mb-2 align-items-center">
+        <div class="col-6">Filter button</div>
+        <div class="col-6 d-flex align-items-center">
+          <Checkbox
+            name="'hasFilters'"
+            value="pivotStyle.hasFilters ?? defaultStyle.hasFilters"
+            onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
+          />
+        </div>
+      </div>
+      <div class="mt-4">
+        <TableStylePicker
+          tableConfig="tableConfig"
+          onStylePicked.bind="onStylePicked"
+          tableStyles="tableStyles"
+          type="'pivot'"
+        />
+      </div>
+    </Section>
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
@@ -1583,7 +1641,8 @@
         </select>
         <div t-if="searchOptions.searchScope === 'specificRange'">
           <SelectionInput
-            ranges="[this.state.dataRange]"
+            t-key="selectionInputKey"
+            ranges="[specificRange]"
             onSelectionChanged="(ranges) => this.onSearchRangeChanged(ranges)"
             onSelectionConfirmed.bind="updateDataRange"
             hasSingleRange="true"
@@ -1647,38 +1706,29 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPanel">
-    <div class="o-data-validation">
-      <t t-if="state.mode === 'list'">
-        <div class="o-dv-preview-list">
-          <t t-foreach="validationRules" t-as="rule" t-key="rule.id">
-            <DataValidationPreview
-              rule="localizeDVRule(rule)"
-              onClick="() => this.onPreviewClick(rule.id)"
-            />
-          </t>
-        </div>
-        <div class="o-dv-add o-button-link p-4 float-end" t-on-click="addDataValidationRule">
-          + Add another rule
-        </div>
-      </t>
-      <t t-else="">
-        <DataValidationEditor rule="localizeDVRule(state.activeRule)" onExit.bind="onExitEditMode"/>
+    <div class="o-dv">
+      <t t-foreach="validationRules" t-as="rule" t-key="rule.id">
+        <DataValidationPreview rule="localizeDVRule(rule)"/>
       </t>
+      <div class="o-dv-add o-button-link p-4 float-end" t-on-click="addDataValidationRule">
+        + Add another rule
+      </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3 border-bottom" t-on-click="props.onClick" t-ref="dvPreview">
-      <div class="d-flex justify-content-between">
-        <div class="o-dv-container d-flex flex-column">
-          <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
-          <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
-        </div>
-        <div
-          class="o-dv-preview-delete d-flex align-items-center o-button-icon px-3"
-          t-on-click.stop="deleteDataValidation">
-          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
-        </div>
+    <div
+      class="o-dv-preview d-flex justify-content-between p-3 border-bottom"
+      t-on-click="onPreviewClick"
+      t-ref="dvPreview">
+      <div>
+        <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
+        <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
+      </div>
+      <div
+        class="o-dv-delete-button d-flex align-items-center o-button-icon px-3"
+        t-on-click.stop="deleteDataValidation">
+        <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
       </div>
     </div>
   </t>
@@ -1721,7 +1771,7 @@
 
       <Section>
         <div class="o-sidePanelButtons">
-          <button t-on-click="props.onExit" class="o-dv-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-dv-cancel o-button">Cancel</button>
           <button t-on-click="onSave" class="o-dv-save o-button primary">Save</button>
         </div>
       </Section>
@@ -1801,6 +1851,26 @@
     </select>
   </t>
 
+  <t t-name="o-spreadsheet-Top10CriterionForm">
+    <div class="o-top-10-criterion d-flex flex-row align-items-center gap-2 w-100 mt-2">
+      <select class="o-top-10-select-values o-input flex-shrink-0" t-on-change="updateIsBottom">
+        <option value="top" t-att-selected="!props.criterion.isBottom">Top</option>
+        <option value="bottom" t-att-selected="props.criterion.isBottom">Bottom</option>
+      </select>
+      <CriterionInput
+        value="props.criterion.values[0]"
+        onValueChanged.bind="onValueChanged"
+        criterionType="props.criterion.type"
+        disableFormulas="true"
+        focused="props.autofocus"
+      />
+      <select class="o-top-10-select-mode o-input flex-shrink-0" t-on-change="updateIsPercent">
+        <option value="values" t-att-selected="!props.criterion.isPercent">Values</option>
+        <option value="percent" t-att-selected="props.criterion.isPercent">Percent</option>
+      </select>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-SingleInputCriterionForm">
     <CriterionInput
       value="props.criterion.values[0]"
@@ -1879,29 +1949,9 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-ConditionalFormattingPanel">
-    <div class="o-cf h-100">
-      <t t-if="state.mode === 'list'">
-        <ConditionalFormatPreviewList
-          conditionalFormats="conditionalFormats"
-          onPreviewClick.bind="editConditionalFormat"
-          onAddConditionalFormat.bind="addConditionalFormat"
-        />
-      </t>
-      <t t-if="state.mode === 'edit'">
-        <ConditionalFormattingEditor
-          editedCf="editedCF"
-          onExit.bind="switchToList"
-          onCancel.bind="cancelEdition"
-          isNewCf="originalEditedCf === undefined"
-        />
-      </t>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ConditionalFormatPreviewList">
     <div class="o-cf-preview-list h-100 overflow-auto" t-ref="cfList">
-      <t t-foreach="props.conditionalFormats" t-as="cf" t-key="cf.id">
+      <t t-foreach="conditionalFormats" t-as="cf" t-key="cf.id">
         <div
           class="o-cf-preview-container d-flex position-relative"
           t-att-style="getPreviewDivStyle(cf)">
@@ -1909,13 +1959,12 @@
             conditionalFormat="cf"
             class="dragAndDrop.draggedItemId === cf.id ? 'o-cf-dragging' : ''"
             onMouseDown="(ev) => this.onPreviewMouseDown(cf, ev)"
-            onPreviewClick="() => props.onPreviewClick(cf)"
           />
         </div>
       </t>
       <div
         class="o-button-link p-4 o-cf-add float-end"
-        t-on-click.prevent.stop="props.onAddConditionalFormat">
+        t-on-click.prevent.stop="onAddConditionalFormat">
         + Add another rule
       </div>
     </div>
@@ -1928,8 +1977,8 @@
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
-      t-on-click="props.onPreviewClick"
-      t-on-pointerdown="(ev) => this.onMouseDown(ev)">
+      t-on-click="editConditionalFormat"
+      t-on-pointerdown="(ev) => props.onMouseDown(ev)">
       <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
         <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
       </div>
@@ -1943,7 +1992,7 @@
       </t>
       <t t-else="">
         <div
-          t-att-style="getPreviewImageStyle(cf.rule)"
+          t-att-style="previewImageStyle"
           class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0 border">
           123
         </div>
@@ -1951,7 +2000,7 @@
       <div class="o-cf-preview-description me-3 overflow-auto">
         <div class="o-cf-preview-ruletype">
           <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
-            <t t-esc="getDescription(cf)"/>
+            <t t-esc="description"/>
           </div>
         </div>
         <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
@@ -1959,7 +2008,7 @@
       <div class="o-cf-delete ms-auto">
         <div
           class="o-cf-delete-button o-button-icon"
-          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          t-on-click.stop="deleteConditionalFormat"
           title="Remove rule">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
@@ -1976,7 +2025,7 @@
           t-foreach="['arrows', 'smiley', 'dots']"
           t-as="iconSet"
           t-key="iconSet"
-          t-on-click="(ev) => this.setIconSet(iconSet, ev)">
+          t-on-click="() => store.setIconSet(iconSet)">
           <div>
             <t t-call="o-spreadsheet-Icon.{{icons[iconSets[iconSet].good].template}}"/>
           </div>
@@ -1994,14 +2043,14 @@
   <t t-name="o-spreadsheet-IconSetInflexionPointRow">
     <tr>
       <td>
-        <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-'+icon+'Icon', ev)">
+        <div t-on-click.stop="() => store.toggleMenu('iconSet-'+icon+'Icon')">
           <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
             <t t-call="o-spreadsheet-Icon.{{icons[iconValue].template}}"/>
           </div>
         </div>
         <IconPicker
-          t-if="state.openedMenu === 'iconSet-'+icon+'Icon'"
-          onIconPicked="(i) => this.setIcon(icon, i)"
+          t-if="store.state.openedMenu === 'iconSet-'+icon+'Icon'"
+          onIconPicked="(i) => store.setIcon(icon, i)"
         />
       </td>
       <td>When value is</td>
@@ -2009,7 +2058,7 @@
         <select
           class="o-input"
           name="valueType"
-          t-on-change="(ev) => this.setInflectionOperator(inflectionPoint, ev.target.value)">
+          t-on-change="(ev) => store.setInflectionOperator(inflectionPoint, ev.target.value)">
           <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
             <span>&#62;</span>
           </option>
@@ -2026,7 +2075,7 @@
             class="o-input"
             t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
             t-att-value="rule[inflectionPoint].value"
-            t-on-change="(ev) => this.setInflectionValue(inflectionPoint, ev.target.value)"
+            t-on-change="(ev) => store.setInflectionValue(inflectionPoint, ev.target.value)"
           />
           <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
         </div>
@@ -2035,7 +2084,7 @@
         <select
           class="o-input"
           name="valueType"
-          t-on-change="(ev) => this.setInflectionType(inflectionPoint, ev.target.value, ev)">
+          t-on-change="(ev) => store.setInflectionType(inflectionPoint, ev.target.value)">
           <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
             Number
           </option>
@@ -2077,14 +2126,14 @@
         </t>
         <tr>
           <td>
-            <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-lowerIcon', ev)">
+            <div t-on-click.stop="() => store.toggleMenu('iconSet-lowerIcon')">
               <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
                 <t t-call="o-spreadsheet-Icon.{{icons[rule.icons.lower].template}}"/>
               </div>
             </div>
             <IconPicker
-              t-if="state.openedMenu === 'iconSet-lowerIcon'"
-              onIconPicked="(icon) => this.setIcon('lower', icon)"
+              t-if="store.state.openedMenu === 'iconSet-lowerIcon'"
+              onIconPicked="(icon) => store.setIcon('lower', icon)"
             />
           </td>
           <td>Else</td>
@@ -2097,12 +2146,14 @@
   </t>
   <t t-name="o-spreadsheet-IconSetEditor">
     <div class="o-cf-iconset-rule">
+      <t t-set="icons" t-value="store.icons"/>
+      <t t-set="iconSets" t-value="store.iconSets"/>
       <t t-call="o-spreadsheet-IconSets"/>
       <t t-call="o-spreadsheet-IconSetInflexionPoints"/>
       <div class="d-flex flex-row">
         <div
           class="o-button-link py-1 ps-0 o-cf-iconset-reverse d-flex align-items-center"
-          t-on-click="reverseIcons">
+          t-on-click="() => store.reverseIcons()">
           <t t-call="o-spreadsheet-Icon.REFRESH"/>
           <div class="ms-1">Reverse icons</div>
         </div>
@@ -2115,17 +2166,17 @@
       <div class="o-section-subtitle">Color</div>
       <RoundColorPicker
         currentColor="colorNumberToHex(rule.color)"
-        onColorPicked.bind="updateDataBarColor"
+        onColorPicked="(color) => store.updateDataBarColor(color)"
         disableNoColor="true"
       />
       <div class="o-section-subtitle">Range of values</div>
       <SelectionInput
-        ranges="getRangeValues()"
+        ranges="store.rangeValues"
         class="'o-range'"
         isInvalid="false"
         hasSingleRange="true"
-        onSelectionChanged.bind="onDataBarRangeUpdate"
-        onSelectionConfirmed.bind="onDataBarRangeChange"
+        onSelectionChanged="(ranges) => store.onDataBarRangeUpdate(ranges)"
+        onSelectionConfirmed="() => store.onDataBarRangeChange()"
         required="false"
       />
     </div>
@@ -2140,9 +2191,9 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-on-change="onMidpointChange"
+          t-on-change="(ev) => store.onMidpointChange(ev.target.value)"
           t-att-class="{ 'o-select-with-input': threshold and threshold.type !== 'value' }"
-          t-on-click="closeMenus">
+          t-on-click="() => store.closeMenus()">
           <option value="none" t-att-selected="threshold === undefined">None</option>
           <option value="number" t-att-selected="type === 'number'">Fixed Number</option>
           <option value="percentage" t-att-selected="type === 'percentage'">Percentage</option>
@@ -2154,8 +2205,8 @@
         <select
           class="o-input me-2"
           name="valueType"
-          t-on-change="(ev) => this.updateThresholdType(thresholdType, ev.target.value)"
-          t-on-click="closeMenus"
+          t-on-change="(ev) => store.updateThresholdType(thresholdType, ev.target.value)"
+          t-on-click="() => store.closeMenus()"
           t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
           <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
           <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
@@ -2174,7 +2225,7 @@
           type="text"
           class="o-input"
           t-att-value="threshold.value"
-          t-on-change="(ev) => this.updateThresholdValue(thresholdType, ev.target.value)"
+          t-on-change="(ev) => store.updateThresholdValue(thresholdType, ev.target.value)"
           t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
         />
         <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
@@ -2182,7 +2233,7 @@
       <div t-attf-class="flex-shrink-0 ms-1 {{ threshold === undefined ? 'invisible' : ''}}">
         <RoundColorPicker
           currentColor="getThresholdColor(threshold)"
-          onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
+          onColorPicked="(color) => store.setColorScaleColor(thresholdType, color)"
           title="fill_color"
           disableNoColor="true"
         />
@@ -2193,7 +2244,7 @@
   <t t-name="o-spreadsheet-ColorScaleRuleEditor">
     <div class="o-cf-color-scale-editor">
       <div class="o-section-subtitle">Preview</div>
-      <div class="o-cf-preview-display mb-4" t-attf-style="{{getColorScalePreviewStyle()}}">
+      <div class="o-cf-preview-display mb-4" t-attf-style="{{store.previewGradient}}">
         Preview text
       </div>
       <div class="o-section-subtitle">Minpoint</div>
@@ -2215,15 +2266,16 @@
   </t>
 
   <t t-name="o-spreadsheet-ConditionalFormattingEditor">
-    <div class="o-cf-ruleEditor">
+    <div class="o-cf-editor">
+      <t t-set="state" t-value="store.state"/>
       <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
         <div class="o-selection-cf">
           <SelectionInput
             ranges="state.ranges"
             class="'o-range'"
-            isInvalid="isRangeValid"
-            onSelectionChanged.bind="onRangeUpdate"
-            onSelectionConfirmed.bind="onRangeConfirmed"
+            isInvalid="store.isRangeValid"
+            onSelectionChanged="(ranges) => store.onRangeUpdate(ranges)"
+            onSelectionConfirmed="() => store.onRangeConfirmed()"
             required="true"
           />
         </div>
@@ -2232,12 +2284,12 @@
         <div class="o-cf-type-selector">
           <BadgeSelection
             choices="cfTypesValues"
-            onChange.bind="changeRuleType"
+            onChange="(ruleType) => store.changeRuleType(ruleType)"
             selectedValue="state.currentCFType"
           />
         </div>
       </Section>
-      <Section class="'o-cf-editor'">
+      <Section>
         <t t-if="state.currentCFType === 'CellIsRule'" t-call="o-spreadsheet-CellIsRuleEditor">
           <t t-set="rule" t-value="state.rules.cellIs"/>
         </t>
@@ -2265,7 +2317,7 @@
         </div>
       </Section>
       <Section>
-        <ValidationMessages messages="errorMessages" msgType="'error'"/>
+        <ValidationMessages messages="store.errorMessages" msgType="'error'"/>
       </Section>
     </div>
   </t>
@@ -2286,21 +2338,22 @@
   <t t-name="o-spreadsheet-CellIsRuleEditor">
     <t t-set="fill_color">Fill Color</t>
     <t t-set="text_color">Text Color</t>
+    <t t-set="state" t-value="store.state"/>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
       <SelectMenu
         class="'o-cell-is-operator o-input mb-2'"
-        menuItems="cfCriterionMenuItems"
-        selectedValue="selectedCriterionName"
+        menuItems="store.cfCriterionMenuItems"
+        selectedValue="store.selectedCriterionName"
       />
 
       <t
-        t-if="criterionComponent"
-        t-component="criterionComponent"
+        t-if="store.criterionComponent"
+        t-component="store.criterionComponent"
         t-key="state.rules.cellIs.operator"
-        criterion="genericCriterion"
-        onCriterionChanged.bind="onRuleValuesChanged"
-        autofocus="this.state.hasEditedCf"
+        criterion="store.genericCriterion"
+        onCriterionChanged="(rule) => store.onRuleValuesChanged(rule)"
+        autofocus="store.state.hasEditedCf"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
@@ -2313,35 +2366,35 @@
           class="o-hoverable-button o-menu-item-button"
           title="Bold"
           t-att-class="{active:rule.style.bold}"
-          t-on-click="() => this.toggleStyle('bold')">
+          t-on-click="() => store.toggleStyle('bold')">
           <t t-call="o-spreadsheet-Icon.BOLD"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Italic"
           t-att-class="{active:rule.style.italic}"
-          t-on-click="() => this.toggleStyle('italic')">
+          t-on-click="() => store.toggleStyle('italic')">
           <t t-call="o-spreadsheet-Icon.ITALIC"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Underline"
           t-att-class="{active:rule.style.underline}"
-          t-on-click="(ev) => this.toggleStyle('underline', ev)">
+          t-on-click="(ev) => store.toggleStyle('underline', ev)">
           <t t-call="o-spreadsheet-Icon.UNDERLINE"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Strikethrough"
           t-att-class="{active:rule.style.strikethrough}"
-          t-on-click="(ev) => this.toggleStyle('strikethrough', ev)">
+          t-on-click="(ev) => store.toggleStyle('strikethrough', ev)">
           <t t-call="o-spreadsheet-Icon.STRIKE"/>
         </div>
         <ColorPickerWidget
           currentColor="rule.style.textColor || '#000000'"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-textColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-textColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-textColor'"
-          onColorPicked="(color) => this.setColor('textColor', color)"
+          onColorPicked="(color) => store.setColor('textColor', color)"
           title="text_color"
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
@@ -2349,9 +2402,9 @@
         <div class="o-divider border-end"/>
         <ColorPickerWidget
           currentColor="rule.style.fillColor"
-          toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-fillColor', ev)"
+          toggleColorPicker="() => store.toggleMenu('cellIsRule-fillColor')"
           showColorPicker="state.openedMenu === 'cellIsRule-fillColor'"
-          onColorPicked="(color) => this.setColor('fillColor', color)"
+          onColorPicked="(color) => store.setColor('fillColor', color)"
           title="fill_color"
           icon="'o-spreadsheet-Icon.FILL_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
@@ -6525,7 +6578,6 @@
         onGridResized.bind="onGridResized"
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
-        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer
@@ -6840,6 +6892,7 @@
             <div
               class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': isItemSelected(item) }"
+              t-att-data-type="item.type"
               t-esc="getItemTitle(item)"
               t-on-click.stop="() => this.onCarouselTabClick(item)"
             />
@@ -7108,8 +7161,7 @@
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions"
-          getGridSize="props.getGridSize">
+          gridOverlayDimensions="gridOverlayDimensions">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"