@odoo/o-spreadsheet 19.2.0-alpha.2 → 19.2.0-alpha.4

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.2
- @date 2026-01-07T16:22:28.451Z
- @hash ac2fa3e
+ @version 19.2.0-alpha.4
+ @date 2026-01-21T11:09:20.618Z
+ @hash fa080c2
 -->
 <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
@@ -638,16 +651,12 @@
   <t t-name="o-spreadsheet-SplitIntoColumnsPanel">
     <div class="o-split-to-cols-panel">
       <Section title.translate="Separator">
-        <select class="o-input mb-3" t-on-change="(ev) => this.onSeparatorChange(ev.target.value)">
-          <option
-            t-foreach="separators"
-            t-as="separator"
-            t-key="separator.value"
-            t-att-value="separator.value"
-            t-esc="separator.name"
-            t-att-selected="state.separatorValue === separator.value"
-          />
-        </select>
+        <Select
+          class="'mb-3'"
+          values="separators"
+          selectedValue="state.separatorValue"
+          onChange.bind="onSeparatorChange"
+        />
 
         <input
           class="o-input mb-3"
@@ -709,11 +718,9 @@
         </div>
         <div class="o-sidePanelTitle o-fw-bold ms-2" t-esc="getTitle()"/>
         <div
-          t-if="props.onTogglePinPanel"
-          class="o-pin-panel o-sidePanelAction ms-auto rounded"
-          t-att-class="{'active': props.isPinned}"
-          t-on-click="props.onTogglePinPanel"
-          t-att-title="pinInfoMessage">
+          t-if="props.isPinned"
+          class="o-pin-panel o-sidePanelAction ms-auto rounded active"
+          t-on-click="props.onTogglePinPanel">
           <i class="fa fa-thumb-tack"/>
         </div>
         <div class="o-sidePanelClose o-sidePanelAction rounded" t-on-click="props.onCloseSidePanel">
@@ -754,11 +761,9 @@
           <i class="fa fa-angle-double-left"/>
         </div>
         <div
-          t-if="props.onTogglePinPanel"
-          class="o-pin-panel o-sidePanelAction rounded mb-1"
-          t-att-class="{'active': props.isPinned}"
-          t-on-click.stop="props.onTogglePinPanel"
-          t-att-title="pinInfoMessage">
+          t-if="props.isPinned"
+          class="o-pin-panel o-sidePanelAction ms-auto rounded active"
+          t-on-click="props.onTogglePinPanel">
           <i class="fa fa-thumb-tack"/>
         </div>
         <div
@@ -775,16 +780,11 @@
   <t t-name="o-spreadsheet-SettingsPanel">
     <div class="o-settings-panel">
       <Section title.translate="Locale">
-        <select class="o-input" t-on-change="(ev) => this.onLocaleChange(ev.target.value)">
-          <option
-            t-foreach="supportedLocales"
-            t-as="locale"
-            t-key="locale.code"
-            t-att-value="locale.code"
-            t-esc="locale.name"
-            t-att-selected="currentLocale.code === locale.code"
-          />
-        </select>
+        <Select
+          selectedValue="currentLocale.code"
+          values="selectOptions"
+          onChange="(value) => this.onLocaleChange(value)"
+        />
         <div class="o-locale-preview mt-4 p-3 rounded border">
           <div>
             <span class="o-fw-bold me-1">Number:</span>
@@ -812,24 +812,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-SelectMenu">
-    <select
-      t-att-class="props.class"
-      t-ref="select"
-      t-on-pointerdown.stop.prevent=""
-      t-on-click="onClick">
-      <option selected="true" t-esc="props.selectedValue"/>
-    </select>
-    <MenuPopover
-      t-if="state.isMenuOpen"
-      menuItems="props.menuItems"
-      anchorRect="menuAnchorRect"
-      onClose.bind="onMenuClosed"
-      menuId="menuId"
-      popoverPositioning="'bottom-left'"
-    />
-  </t>
-
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -898,7 +880,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 +900,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,21 +1021,57 @@
         </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">
     <Section title.translate="Show measure as:">
-      <select
-        class="o-pivot-measure-display-type o-input"
-        t-on-change="(ev) => this.store.updateMeasureDisplayType(ev.target.value)">
-        <t t-foreach="measureDisplayTypeLabels" t-as="measureType" t-key="measureType">
-          <option
-            t-att-value="measureType"
-            t-att-selected="measureType === store.measureDisplay.type"
-            t-esc="measureType_value"
-          />
-        </t>
-      </select>
+      <Select
+        class="'o-pivot-measure-display-type'"
+        values="measureDisplayTypeOptions"
+        selectedValue="store.measureDisplay.type"
+        onChange="(value) => this.store.updateMeasureDisplayType(value)"
+      />
       <div
         class="o-pivot-measure-display-description mt-3 ps-3 border-start"
         t-esc="measureDisplayDescription[store.measureDisplay.type]"
@@ -1263,24 +1285,12 @@
       <div class="d-flex flex-row">
         <div class="d-flex py-1 px-2 w-100 small">
           <div class="pivot-dim-operator-label">Aggregated by</div>
-          <select
-            class="o-input flex-grow-1"
-            t-on-change="(ev) => this.updateAggregator(ev.target.value)">
-            <option
-              t-foreach="Object.keys(props.aggregators[measure.type])"
-              t-as="agg"
-              t-key="agg"
-              t-att-value="agg"
-              t-att-selected="agg === measure.aggregator"
-              t-esc="props.aggregators[measure.type][agg]"
-            />
-            <option
-              t-if="measure.computedBy"
-              t-att-value="''"
-              t-att-selected="'' === measure.aggregator">
-              Compute from totals
-            </option>
-          </select>
+          <Select
+            class="'flex-grow-1'"
+            values="aggregatorOptions"
+            selectedValue="props.measure.aggregator"
+            onChange.bind="updateAggregator"
+          />
         </div>
       </div>
     </PivotDimension>
@@ -1290,18 +1300,12 @@
     <div class="d-flex">
       <div class="d-flex py-1 px-2 w-100 small">
         <div class="pivot-dim-operator-label">Order by</div>
-        <select
-          class="o-input flex-grow-1"
-          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
-          <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
-          <option
-            t-if="props.dimension.type !== 'date'"
-            value=""
-            t-att-selected="props.dimension.order === undefined">
-            Unsorted
-          </option>
-        </select>
+        <Select
+          class="'flex-grow-1'"
+          values="orderSelectOptions"
+          selectedValue="props.dimension.order || ''"
+          onChange="(value) => props.onUpdated(props.dimension, value)"
+        />
       </div>
     </div>
   </t>
@@ -1311,19 +1315,12 @@
       <div class="d-flex flex-row py-1 px-2 w-100 small">
         <t t-set="granularityProps" t-value="props.dimension.granularity || 'month'"/>
         <div class="pivot-dim-operator-label">Granularity</div>
-        <select
-          class="o-input flex-grow-1"
-          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option
-            t-foreach="props.allGranularities"
-            t-as="granularity"
-            t-key="granularity"
-            t-if="props.availableGranularities.has(granularity) || granularity === granularityProps"
-            t-att-value="granularity"
-            t-esc="periods[granularity]"
-            t-att-selected="granularity === granularityProps or (granularity === 'month' and !granularityProps)"
-          />
-        </select>
+        <Select
+          class="'flex-grow-1'"
+          values="granularityOptions"
+          selectedValue="props.dimension.granularity || 'month'"
+          onChange="(value) => props.onUpdated(props.dimension, value)"
+        />
       </div>
     </div>
   </t>
@@ -1498,17 +1495,12 @@
   <t t-name="o-spreadsheet-CustomCurrencySection">
     <t t-set="availableCurrencies" t-value="store.availableCurrencies"/>
     <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
-      <select
-        class="o-input o-available-currencies"
-        t-on-change="(ev) => this.updateSelectCurrency(ev)">
-        <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
-          <option
-            t-att-value="currency_index"
-            t-esc="currencyDisplayName(currency)"
-            t-att-selected="currency_index === store.selectedCurrencyIndex"
-          />
-        </t>
-      </select>
+      <Select
+        class="'o-available-currencies'"
+        values="availableCurrenciesOptions"
+        selectedValue="store.selectedCurrencyIndex.toString()"
+        onChange.bind="updateSelectCurrency"
+      />
     </Section>
     <Section>
       <div class="o-subsection-left">
@@ -1573,17 +1565,17 @@
             </button>
           </div>
         </div>
-        <select
-          class="o-input o-type-range-selector mt-3 mb-3"
-          t-on-change="changeSearchScope"
-          t-att-value="searchOptions.searchScope">
-          <option value="allSheets">All sheets</option>
-          <option value="activeSheet">Current sheet</option>
-          <option value="specificRange">Specific range</option>
-        </select>
+        <Select
+          class="'o-type-range-selector mt-3 mb-3'"
+          values="searchScopeOptions"
+          selectedValue="searchOptions.searchScope"
+          onChange.bind="changeSearchScope"
+        />
+
         <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"
@@ -1686,12 +1678,12 @@
       <Section class="'pt-0'">
         <div class="o-subsection o-dv-settings">
           <div class="o-section-title">Criteria</div>
-          <SelectMenu
-            class="'o-dv-type o-input mb-2'"
-            menuItems="dvCriterionMenuItems"
-            selectedValue="selectedCriterionName"
+          <Select
+            class="'o-dv-type mb-2'"
+            values="dvCriterionOptions"
+            selectedValue="state.rule.criterion.type"
+            onChange.bind="onCriterionTypeChanged"
           />
-
           <t
             t-if="criterionComponent"
             t-component="criterionComponent"
@@ -1704,10 +1696,12 @@
       </Section>
 
       <Section class="'o-dv-invalid-option pt-0'" title.translate="If the data is invalid">
-        <select class="o-dv-reject-input o-input" t-on-change="changeRuleIsBlocking">
-          <option t-att-selected="!state.rule.isBlocking" value="false">Show a warning</option>
-          <option t-att-selected="state.rule.isBlocking" value="true">Reject the input</option>
-        </select>
+        <Select
+          class="'o-dv-reject-input pt-0'"
+          values="isRuleBlockingSelectOptions"
+          selectedValue="state.rule.isBlocking ? 'true' : 'false'"
+          onChange.bind="changeRuleIsBlocking"
+        />
       </Section>
 
       <Section>
@@ -1743,13 +1737,12 @@
     </t>
 
     <div class="o-section-subtitle mt-4">Display style</div>
-    <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
-      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
-      <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
-      <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
-        Plain text
-      </option>
-    </select>
+    <Select
+      class="'o-dv-display-style'"
+      values="displayTypeOptions"
+      selectedValue="props.criterion.displayStyle"
+      onChange.bind="onChangedDisplayStyle"
+    />
   </t>
 
   <t t-name="o-spreadsheet-ListCriterionForm">
@@ -1783,21 +1776,22 @@
     </button>
 
     <div class="o-section-subtitle">Display style</div>
-    <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
-      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
-      <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
-      <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
-        Plain text
-      </option>
-    </select>
+    <Select
+      class="'o-dv-display-style'"
+      values="displayTypeOptions"
+      selectedValue="props.criterion.displayStyle"
+      onChange.bind="onChangedDisplayStyle"
+    />
   </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>
+      <Select
+        class="'o-top-10-select-values flex-shrink-0'"
+        values="isBottomSelectOptions"
+        selectedValue="props.criterion.isBottom ? 'bottom' : 'top'"
+        onChange.bind="updateIsBottom"
+      />
       <CriterionInput
         value="props.criterion.values[0]"
         onValueChanged.bind="onValueChanged"
@@ -1805,10 +1799,12 @@
         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>
+      <Select
+        class="'o-top-10-select-mode flex-shrink-0'"
+        values="isPercentSelectOptions"
+        selectedValue="props.criterion.isPercent ? 'percent' : 'values'"
+        onChange.bind="updateIsPercent"
+      />
     </div>
   </t>
 
@@ -1839,16 +1835,12 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationDateCriterion">
-    <select class="o-dv-date-value o-input mb-4" t-on-change="onDateValueChanged">
-      <option
-        t-foreach="dateValues"
-        t-as="dateValue"
-        t-key="dateValue.value"
-        t-att-value="dateValue.value"
-        t-esc="dateValue.title"
-        t-att-selected="dateValue.value === currentDateValue"
-      />
-    </select>
+    <Select
+      class="'o-dv-date-value mb-4'"
+      values="dateValues"
+      selectedValue="currentDateValue"
+      onChange.bind="onDateValueChanged"
+    />
 
     <CriterionInput
       t-if="currentDateValue === 'exactDate'"
@@ -1996,17 +1988,12 @@
       </td>
       <td>When value is</td>
       <td>
-        <select
-          class="o-input"
-          name="valueType"
-          t-on-change="(ev) => store.setInflectionOperator(inflectionPoint, ev.target.value)">
-          <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
-            <span>&#62;</span>
-          </option>
-          <option value="ge" t-att-selected="inflectionPointValue.operator === 'ge'">
-            <span>&#8805;</span>
-          </option>
-        </select>
+        <Select
+          selectedValue="inflectionPointValue.operator"
+          name="'valueType'"
+          values="getIconSetOperatorSelectOptions()"
+          onChange.bind="(value) => store.setInflectionOperator(inflectionPoint, value)"
+        />
       </td>
       <td>
         <div class="ms-2 me-2">
@@ -2022,23 +2009,13 @@
         </div>
       </td>
       <td>
-        <select
-          class="o-input"
-          name="valueType"
-          t-on-change="(ev) => store.setInflectionType(inflectionPoint, ev.target.value)">
-          <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
-            Number
-          </option>
-          <option value="percentage" t-att-selected="inflectionPointValue.type === 'percentage'">
-            Percentage
-          </option>
-          <option value="percentile" t-att-selected="inflectionPointValue.type === 'percentile'">
-            Percentile
-          </option>
-          <option value="formula" t-att-selected="inflectionPointValue.type === 'formula'">
-            Formula
-          </option>
-        </select>
+        <Select
+          selectedValue="inflectionPointValue.type"
+          popoverClass="'o-icon-set-type-select-dropdown'"
+          name="'valueType'"
+          values="getThresholdTypeSelectOptions('iconSet')"
+          onChange.bind="(value) => store.setInflectionType(inflectionPoint, value)"
+        />
       </td>
     </tr>
   </t>
@@ -2128,37 +2105,22 @@
     <div
       t-attf-class="o-threshold o-threshold-{{thresholdType}} d-flex align-items-center flex-row">
       <t t-if="thresholdType === 'midpoint'">
-        <t t-set="type" t-value="threshold and threshold.type"/>
-        <select
-          class="o-input me-2"
-          name="valueType"
-          t-on-change="(ev) => store.onMidpointChange(ev.target.value)"
-          t-att-class="{ 'o-select-with-input': threshold and threshold.type !== 'value' }"
-          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>
-          <option value="percentile" t-att-selected="type === 'percentile'">Percentile</option>
-          <option value="formula" t-att-selected="type === 'formula'">Formula</option>
-        </select>
+        <Select
+          selectedValue="threshold?.type || 'none'"
+          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          name="'valueType'"
+          values="getThresholdTypeSelectOptions(thresholdType)"
+          onChange.bind="(value) => store.onMidpointChange(value)"
+        />
       </t>
       <t t-else="">
-        <select
-          class="o-input me-2"
-          name="valueType"
-          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>
-          <option value="percentage" t-att-selected="threshold.type === 'percentage'">
-            Percentage
-          </option>
-          <option value="percentile" t-att-selected="threshold.type === 'percentile'">
-            Percentile
-          </option>
-          <option value="formula" t-att-selected="threshold.type === 'formula'">Formula</option>
-        </select>
+        <Select
+          selectedValue="threshold?.type || 'none'"
+          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          name="'valueType'"
+          values="getThresholdTypeSelectOptions(thresholdType)"
+          onChange.bind="(value) => store.updateThresholdType(thresholdType, value)"
+        />
       </t>
       <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
         <input
@@ -2282,10 +2244,11 @@
     <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="store.cfCriterionMenuItems"
-        selectedValue="store.selectedCriterionName"
+      <Select
+        class="'o-cell-is-operator mb-2'"
+        values="store.cfCriterions"
+        selectedValue="state.rules.cellIs.operator"
+        onChange="(operator) => store.editOperator(operator)"
       />
 
       <t
@@ -2867,15 +2830,11 @@
           onSelectionConfirmed="() => this.updateBaselineRange()"
         />
         <div class="o-section-subtitle">Format</div>
-        <select
-          t-att-value="props.definition.baselineMode"
-          class="o-input"
-          t-on-change="(ev) => this.updateBaselineMode(ev)">
-          <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>
+        <Select
+          selectedValue="props.definition.baselineMode"
+          values="baselineModeOptions"
+          onChange.bind="this.updateBaselineMode"
+        />
       </Section>
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -3086,15 +3045,11 @@
 
   <t t-name="o-spreadsheet-GeoChartRegionSelectSection">
     <Section class="'o-geo-region'" title.translate="Region">
-      <select class="o-input" t-on-change="this.updateSelectedRegion">
-        <t t-foreach="availableRegions" t-as="region" t-key="region.id">
-          <option
-            t-att-value="region.id"
-            t-esc="region.label"
-            t-att-selected="region.id === selectedRegion"
-          />
-        </t>
-      </select>
+      <Select
+        selectedValue="selectedRegion"
+        values="regionOptions"
+        onChange.bind="this.updateSelectedRegion"
+      />
     </Section>
   </t>
 
@@ -3102,16 +3057,12 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
-            class="o-input o-chart-legend-position"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top left</option>
-            <option value="right">Top right</option>
-            <option value="bottom">Bottom right</option>
-            <option value="left">Bottom left</option>
-          </select>
+          <Select
+            selectedValue="props.definition.legendPosition ?? 'bottom'"
+            values="legendValues"
+            class="'o-chart-legend-position'"
+            onChange.bind="this.updateLegendPosition"
+          />
         </Section>
         <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
@@ -3228,7 +3179,7 @@
         <t t-call="o-spreadsheet-GaugeChartColorSectionTemplateRow">
           <t t-set="sectionColor" t-value="sectionRule.colors.lowerColor"/>
           <t t-set="sectionType" t-value="'lowerColor'"/>
-          <t t-set="inflectionPoint" t-value="sectionRule.lowerInflectionPoint"/>
+          <t t-set="inflectionPoint" t-value="'lowerInflectionPoint'"/>
           <t t-set="isInvalid" t-value="isLowerInflectionPointInvalid"/>
           <t t-set="inflectionPointName" t-value="'lowerInflectionPoint'"/>
         </t>
@@ -3236,7 +3187,7 @@
         <t t-call="o-spreadsheet-GaugeChartColorSectionTemplateRow">
           <t t-set="sectionColor" t-value="sectionRule.colors.middleColor"/>
           <t t-set="sectionType" t-value="'middleColor'"/>
-          <t t-set="inflectionPoint" t-value="sectionRule.upperInflectionPoint"/>
+          <t t-set="inflectionPoint" t-value="'upperInflectionPoint'"/>
           <t t-set="isInvalid" t-value="isUpperInflectionPointInvalid"/>
           <t t-set="inflectionPointName" t-value="'upperInflectionPoint'"/>
         </t>
@@ -3269,28 +3220,23 @@
       <td class="pe-2">
         <t t-set="below">below</t>
         <t t-set="belowOrEqualTo">below or equal to</t>
-        <select
-          class="o-input"
-          name="operatorType"
-          t-att-title="inflectionPoint.operator === '&lt;' ? below : belowOrEqualTo"
-          t-model="inflectionPoint.operator"
-          t-on-change="() => this.updateSectionRule(state.sectionRule)">
-          <option title="below" value="&lt;">&lt;</option>
-          <option title="below or equal to" value="&lt;=">&lt;=</option>
-        </select>
+        <Select
+          selectedValue="sectionRule[inflectionPoint].operator"
+          name="'operatorType'"
+          values="inflectionPointOperators"
+          onChange.bind="(value) => this.updateSectionRuleOperator(inflectionPoint, value)"
+        />
       </td>
       <td class="pe-2">
         <StandaloneComposer t-props="getGaugeInflectionComposerProps(sectionType)"/>
       </td>
       <td>
-        <select
-          class="o-input"
-          name="valueType"
-          t-model="inflectionPoint.type"
-          t-on-change="(ev) => this.updateSectionRule(state.sectionRule)">
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-        </select>
+        <Select
+          selectedValue="sectionRule[inflectionPoint].type"
+          name="'valueType'"
+          values="inflectionPointTypes"
+          onChange.bind="(value) => this.updateSectionRulePointType(inflectionPoint, value)"
+        />
       </td>
     </tr>
   </t>
@@ -3859,14 +3805,12 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
-            class="o-input o-chart-legend-position"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="right">Right</option>
-            <option value="left">Left</option>
-          </select>
+          <Select
+            selectedValue="props.definition.legendPosition ?? 'left'"
+            values="legendValues"
+            class="'o-chart-legend-position'"
+            onChange.bind="this.updateLegendPosition"
+          />
         </Section>
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
@@ -3919,33 +3863,21 @@
       <Section title.translate="Fields to group by">
         <div class="d-flex">
           <span class="w-100">Horizontal axis</span>
-          <select
-            t-att-value="getGroupByType('horizontal')"
-            class="o-input o-horizontal-group-by"
-            t-on-change="ev => this.updateGroupBy('horizontal', ev.target.value)">
-            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
-              <option
-                t-att-selected="getGroupByType('horizontal') === groupBy.value"
-                t-att-value="groupBy.value">
-                <t t-esc="groupBy.label"/>
-              </option>
-            </t>
-          </select>
+          <Select
+            selectedValue="getGroupByType('horizontal') || ''"
+            values="getGroupByOptions()"
+            class="'o-horizontal-group-by'"
+            onChange="(value) => this.updateGroupBy('horizontal', value)"
+          />
         </div>
         <div class="d-flex">
           <span class="w-100">Vertical axis</span>
-          <select
-            t-att-value="getGroupByType('vertical')"
-            class="o-input o-vertical-group-by"
-            t-on-change="ev => this.updateGroupBy('vertical', ev.target.value)">
-            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
-              <option
-                t-att-selected="getGroupByType('vertical') === groupBy.value"
-                t-att-value="groupBy.value">
-                <t t-esc="groupBy.label"/>
-              </option>
-            </t>
-          </select>
+          <Select
+            selectedValue="getGroupByType('vertical') || ''"
+            values="getGroupByOptions()"
+            class="'o-vertical-group-by'"
+            onChange="(value) => this.updateGroupBy('vertical', value)"
+          />
         </div>
       </Section>
 
@@ -4082,25 +4014,12 @@
               <div class="d-flex py-2">
                 <div class="w-100">
                   <span class="o-section-subtitle">Type</span>
-                  <select
-                    class="o-input trend-type-selector"
-                    t-on-change="(ev) => this.onChangeTrendType(index, ev)">
-                    <option value="linear" t-att-selected="trendType === 'linear'">Linear</option>
-                    <option value="exponential" t-att-selected="trendType === 'exponential'">
-                      Exponential
-                    </option>
-                    <option value="polynomial" t-att-selected="trendType === 'polynomial'">
-                      Polynomial
-                    </option>
-                    <option value="logarithmic" t-att-selected="trendType === 'logarithmic'">
-                      Logarithmic
-                    </option>
-                    <option
-                      value="trailingMovingAverage"
-                      t-att-selected="trendType === 'trailingMovingAverage'">
-                      Trailing moving average
-                    </option>
-                  </select>
+                  <Select
+                    selectedValue="trendType"
+                    values="trendOptions"
+                    class="'trend-type-selector'"
+                    onChange="(value) => this.onChangeTrendType(index, value)"
+                  />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'trailingMovingAverage'">
                   <span class="o-section-subtitle">Window</span>
@@ -4113,16 +4032,12 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
-                  <select
-                    t-att-value="trend.order"
-                    class="o-input trend-order-input"
-                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)">
-                    <t t-foreach="getPolynomialDegrees(index)" t-as="degree" t-key="degree">
-                      <option t-att-value="degree">
-                        <t t-esc="degree"/>
-                      </option>
-                    </t>
-                  </select>
+                  <Select
+                    selectedValue="trend.order.toString()"
+                    values="getPolynomialDegrees(index)"
+                    class="'trend-order-input'"
+                    onChange="(value) => this.onChangePolynomialDegree(index, value)"
+                  />
                 </div>
               </div>
               <div class="d-flex align-items-center">
@@ -4143,18 +4058,12 @@
     <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Data Series">
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
-          <select
-            class="o-input data-series-selector"
-            t-model="state.label"
-            t-on-change="(ev) => this.updateEditedSeries(ev)">
-            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
-              <option
-                t-att-value="serie"
-                t-att-selected="state.index === serie_index"
-                t-esc="serie"
-              />
-            </t>
-          </select>
+          <Select
+            selectedValue="state.index.toString()"
+            values="selectOptions"
+            class="'data-series-selector'"
+            onChange.bind="this.updateEditedSeries"
+          />
           <Section class="'px-0'">
             <div class="d-flex align-items-center">
               <span class="o-section-title mb-0 pe-2">Series color</span>
@@ -4195,16 +4104,12 @@
 
   <t t-name="o-spreadsheet-ChartLegend">
     <Section class="'pt-0'" title.translate="Legend position">
-      <select
-        t-att-value="props.definition.legendPosition ?? 'top'"
-        class="o-input o-chart-legend-position"
-        t-on-change="this.updateLegendPosition">
-        <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>
+      <Select
+        selectedValue="props.definition.legendPosition ?? 'top'"
+        values="legendValues"
+        class="'o-chart-legend-position'"
+        onChange.bind="this.updateLegendPosition"
+      />
     </Section>
   </t>
 
@@ -4661,6 +4566,41 @@
     <Highlight t-props="highlightProps"/>
   </t>
 
+  <t t-name="o-spreadsheet-Select">
+    <div
+      tabIndex="0"
+      t-ref="selectRef"
+      class="o-input o-select"
+      t-att-class="props.class"
+      t-att-name="props.name"
+      t-on-pointerdown="onMouseDown"
+      t-on-keydown="onKeyDown"
+      t-esc="selectedLabel"
+    />
+
+    <Popover t-if="state.isPopoverOpen" t-props="popoverProps">
+      <div
+        class="o-select-dropdown bg-white overflow-hidden py-2"
+        t-att-class="props.popoverClass"
+        t-ref="dropdownRef">
+        <t t-foreach="props.values" t-as="value" t-key="value_index">
+          <div
+            class="o-select-option"
+            t-att-class="{
+              'o-active': value.value === activeValue
+            }"
+            t-att-data-id="value.value"
+            t-esc="value.label"
+            t-att-title="value.label"
+            t-on-click="() => this.onOptionClick(value.value)"
+            t-on-mouseenter="() => this.onOptionHover(value.value)"
+          />
+          <div t-if="value.separator and !value_last" class="o-separator border-bottom"/>
+        </t>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-ScrollBar">
     <div class="o-scrollbar" t-on-scroll="onScroll" t-ref="scrollbar" t-att-style="positionCss">
       <div t-att-style="sizeCss"/>
@@ -6096,6 +6036,11 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.THUMB_TACK">
+    <div class="o-icon">
+      <i class="fa fa-thumb-tack"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -6686,10 +6631,11 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterMenuCriterion">
-    <SelectMenu
-      class="'o-filter-criterion-type o-input m-1 mb-2'"
-      menuItems="criterionMenuItems"
-      selectedValue="selectedCriterionName"
+    <Select
+      class="'o-filter-criterion-type m-1 mb-2'"
+      values="criterionOptions"
+      selectedValue="state.criterion.type"
+      onChange.bind="onCriterionTypeChange"
     />
 
     <t
@@ -6833,6 +6779,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)"
             />