@odoo/o-spreadsheet 19.1.0-alpha.12 → 19.1.0-alpha.14

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.1.0-alpha.12
- @date 2025-11-12T14:18:00.954Z
- @hash 6fefc9c
+ @version 19.1.0-alpha.14
+ @date 2025-12-02T05:35:39.337Z
+ @hash 04cf666
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -31,7 +31,7 @@
     <div
       class="o-spreadsheet-topbar d-flex flex-column user-select-none bg-white"
       t-on-click="props.onClick">
-      <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between">
+      <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between border-bottom">
         <!-- Menus -->
         <div class="o-topbar-topleft d-flex">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
@@ -82,7 +82,7 @@
                 t-key="toolbarAction_index">
                 <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
               </t>
-              <div t-if="showDivider(category_index)" class="o-topbar-divider"/>
+              <div t-if="showDivider(category_index)" class="o-topbar-divider border-end"/>
             </div>
             <div
               t-ref="moreToolsContainer"
@@ -100,7 +100,7 @@
       </div>
       <div
         t-if="this.fingerprints.isEnabled"
-        class="topbar-banner irregularity-map d-flex align-items-center justify-content-between">
+        class="topbar-banner irregularity-map d-flex align-items-center justify-content-between border-top">
         <div
           t-on-click="() => this.fingerprints.disable()"
           role="button"
@@ -146,7 +146,7 @@
           </t>
           <div
             t-if="category_index &lt; state.invisibleToolsCategories.length-1"
-            class="o-topbar-divider"
+            class="o-topbar-divider border-end"
           />
         </t>
       </div>
@@ -231,18 +231,26 @@
   </t>
 
   <t t-name="o-spreadsheet-TextInput">
-    <input
-      type="text"
-      t-ref="{{refName}}"
-      t-att-class="inputClass"
-      t-att-id="props.id"
-      t-att-placeholder="props.placeholder"
-      t-on-change="save"
-      t-on-blur="save"
-      t-on-pointerdown="onMouseDown"
-      t-on-pointerup="onMouseUp"
-      t-on-keydown="onKeyDown"
-    />
+    <div class="position-relative">
+      <input
+        type="text"
+        t-ref="{{refName}}"
+        t-att-class="inputClass"
+        t-att-id="props.id"
+        t-att-placeholder="props.placeholder"
+        t-on-change="save"
+        t-on-blur="save"
+        t-on-pointerdown="onMouseDown"
+        t-on-pointerup="onMouseUp"
+        t-on-keydown="onKeyDown"
+      />
+      <span
+        t-if="props.errorMessage"
+        class="os-input-error-icon text-danger position-absolute d-flex align-items-center"
+        t-att-title="props.errorMessage">
+        <t t-call="o-spreadsheet-Icon.ERROR"/>
+      </span>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-TableStylesPopover">
@@ -256,7 +264,7 @@
             t-foreach="Object.keys(categories)"
             t-as="category"
             t-key="category"
-            class="o-notebook-tab d-flex align-items-center"
+            class="o-notebook-tab d-flex align-items-center border"
             t-att-class="{ 'selected': state.selectedCategory === category }"
             t-on-click="() => state.selectedCategory = category"
             t-att-data-id="category"
@@ -297,7 +305,7 @@
         <canvas t-ref="canvas" class="w-100 h-100"/>
       </div>
       <div
-        class="o-table-style-edit-button position-absolute d-none bg-white"
+        class="o-table-style-edit-button position-absolute d-none bg-white border"
         t-if="isStyleEditable"
         t-on-click="this.editTableStyle"
         title="Edit custom table style">
@@ -313,7 +321,7 @@
   </t>
 
   <t t-name="o-spreadsheet-TableStylePicker">
-    <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
+    <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">
         <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
           <TableStylePreview
@@ -327,7 +335,7 @@
         </t>
       </div>
       <div
-        class="o-table-style-picker-arrow d-flex align-items-center px-1"
+        class="o-table-style-picker-arrow d-flex align-items-center px-1 border-start"
         t-on-click.stop="onArrowButtonClick">
         <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
       </div>
@@ -411,7 +419,7 @@
         <RibbonMenu onClose="() => this.menuState.isOpen=false"/>
       </t>
       <t t-else="">
-        <div class="o-small-composer px-2 py-2 position-relative bg-white">
+        <div class="o-small-composer px-2 py-2 position-relative bg-white border">
           <div class="w-100" t-ref="bottombarComposer">
             <Composer t-props="composerProps"/>
             <span
@@ -443,7 +451,7 @@
             composerFocusableElement="true"
           />
         </div>
-        <div class="d-flex flex-fill align-items-center bottom-bar-menu">
+        <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
           <Ripple>
             <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="toggleRibbon">
               <i class="o-icon fa fa-cog"/>
@@ -690,8 +698,9 @@
   </t>
 
   <t t-name="o-spreadsheet-SidePanelExtended">
-    <div class="o-sidePanel h-100 bg-white">
-      <div class="o-sidePanelHeader d-flex align-items-center justify-content-between">
+    <div class="o-sidePanel h-100 bg-white border-top border-start">
+      <div
+        class="o-sidePanelHeader d-flex align-items-center justify-content-between border-bottom">
         <div
           t-if="props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded"
@@ -776,7 +785,7 @@
             t-att-selected="currentLocale.code === locale.code"
           />
         </select>
-        <div class="o-locale-preview mt-4 p-3 rounded">
+        <div class="o-locale-preview mt-4 p-3 rounded border">
           <div>
             <span class="o-fw-bold me-1">Number:</span>
             <span t-esc="numberFormatPreview"/>
@@ -1042,13 +1051,13 @@
         </t>
       </select>
       <div
-        class="o-pivot-measure-display-description mt-3 ps-3"
+        class="o-pivot-measure-display-description mt-3 ps-3 border-start"
         t-esc="measureDisplayDescription[store.measureDisplay.type]"
       />
     </Section>
 
     <Section t-if="store.doesDisplayNeedsField" title.translate="Base field:">
-      <div class="o-pivot-measure-display-field w-100 py-1 px-3">
+      <div class="o-pivot-measure-display-field w-100 py-1 px-3 border">
         <t t-if="store.fields.length">
           <RadioSelection
             choices="fieldChoices"
@@ -1066,7 +1075,7 @@
 
     <t t-set="values" t-value="store.values"/>
     <Section t-if="store.doesDisplayNeedsValue and values.length" title.translate="Base item:">
-      <div class="o-pivot-measure-display-value w-100 py-1 px-3">
+      <div class="o-pivot-measure-display-value w-100 py-1 px-3 border">
         <RadioSelection
           choices="values"
           selectedValue="store.measureDisplay.value"
@@ -1209,7 +1218,7 @@
       <div t-esc="sortDescription" class="pb-2"/>
       <div class="d-flex flex-column gap-2">
         <t t-foreach="sortValuesAndFields" t-as="valueAndField" t-key="valueAndField_index">
-          <div class="o-sort-card d-flex gap-1 px-2">
+          <div class="o-sort-card d-flex gap-1 px-2 border">
             <t t-if="valueAndField.field">
               <span class="fw-bolder" t-esc="valueAndField.field"/>
               =
@@ -1321,7 +1330,7 @@
 
   <t t-name="o-spreadsheet-PivotDimension">
     <div
-      class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension bg-white"
+      class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension border rounded"
       t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
         <div class="d-flex align-items-center overflow-hidden text-nowrap">
@@ -1439,21 +1448,97 @@
 
   <t t-name="o-spreadsheet-MoreFormatsPanel">
     <div class="o-more-formats-panel">
-      <div
-        t-foreach="dateFormatsActions"
-        t-as="action"
-        t-key="action.name(env)"
-        t-att-data-name="action.name(env)"
-        t-on-click="() => action.execute(env)"
-        class="w-100 d-flex align-items-center border-bottom format-preview bg-white">
-        <span class="ms-3 check-icon">
-          <t t-if="action.isActive(env)" t-call="o-spreadsheet-Icon.CHECK"/>
-        </span>
-        <span t-out="action.description(env)"/>
-      </div>
+      <Section title.translate="Format type">
+        <BadgeSelection
+          choices="store.categories"
+          onChange.bind="(category) => store.changeCategory(category)"
+          selectedValue="store.category"
+        />
+      </Section>
+      <t t-if="store.category === 'currency'" t-call="o-spreadsheet-CustomCurrencySection"/>
+      <t t-set="proposals" t-value="store.formatProposals"/>
+      <Section title.translate="Type" t-if="proposals.length">
+        <div class="o-format-proposals overflow-auto border">
+          <div
+            t-foreach="proposals"
+            t-as="proposal"
+            t-key="proposal.format"
+            t-att-data-name="proposal.format"
+            t-on-click="() => this.store.updateFormat(proposal.format)"
+            class="w-100 d-flex align-items-center format-preview px-2 py-1"
+            t-att-class="{'active': (proposal.format || '') === (store.currentFormat || '')}">
+            <span t-out="proposal.label"/>
+          </div>
+        </div>
+      </Section>
+
+      <Section title.translate="Format" class="'o-custom-format-section'">
+        <TextInput
+          value="store.currentFormat || ''"
+          onChange="(format) => this.store.updateFormat(format)"
+          placeholder.translate="Format code"
+          alwaysShowBorder="true"
+          errorMessage="store.invalidFormatMessage"
+        />
+        <t t-set="examples" t-value="store.formatExamples"/>
+        <div class="o-format-examples mt-4 p-2 rounded border" t-if="examples.length">
+          <table class="w-100">
+            <t t-foreach="examples" t-as="example" t-key="example_index">
+              <tr>
+                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
+                <td class="w-75 text-truncate" t-esc="example.value"/>
+              </tr>
+            </t>
+          </table>
+        </div>
+      </Section>
     </div>
   </t>
 
+  <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>
+    </Section>
+    <Section>
+      <div class="o-subsection-left">
+        <div class="o-section-title">Code</div>
+        <TextInput
+          value="store.currencyCode"
+          placeholder.translate="code"
+          onChange="(code) => this.store.changeCurrencyCode(code)"
+          alwaysShowBorder="true"
+        />
+      </div>
+      <div class="o-subsection-right">
+        <div class="o-section-title">Symbol</div>
+        <TextInput
+          value="store.currencySymbol"
+          placeholder.translate="symbol"
+          onChange="(symbol) => this.store.changeCurrencySymbol(symbol)"
+          alwaysShowBorder="true"
+        />
+      </div>
+      <Checkbox
+        name="'accountingFormat'"
+        className="'pt-2'"
+        label.translate="Accounting format"
+        value="store.isAccountingFormat"
+        onChange="() => store.toggleAccountingFormat()"
+      />
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-FindAndReplacePanel">
     <div class="o-find-and-replace">
       <Section title.translate="Search">
@@ -1583,7 +1668,7 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationPreview">
-    <div class="o-dv-preview p-3" t-on-click="props.onClick" t-ref="dvPreview">
+    <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"/>
@@ -1646,87 +1731,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-CustomCurrencyPanel">
-    <div class="o-custom-currency">
-      <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 === state.selectedCurrencyIndex"
-            />
-          </t>
-        </select>
-      </Section>
-      <Section>
-        <div class="o-subsection-left">
-          <div class="o-section-title">Code</div>
-          <input
-            type="text"
-            class="o-input"
-            t-model="state.currencyCode"
-            placeholder="code"
-            t-on-input="(ev) => this.updateCode(ev)"
-          />
-        </div>
-        <div class="o-subsection-right">
-          <div class="o-section-title">Symbol</div>
-          <input
-            type="text"
-            class="o-input"
-            placeholder="symbol"
-            t-model="state.currencySymbol"
-            t-on-input="(ev) => this.updateSymbol(ev)"
-          />
-        </div>
-      </Section>
-      <Section title.translate="Format">
-        <select
-          class="o-input o-format-proposals mb-1"
-          t-on-change="(ev) => this.updateSelectFormat(ev)"
-          t-att-disabled="!formatProposals.length">
-          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
-            <option
-              t-att-value="proposal_index"
-              t-esc="proposal.example"
-              t-att-selected="proposal_index === state.selectedFormatIndex"
-            />
-          </t>
-        </select>
-        <t t-set="accounting_format_label">Accounting format</t>
-        <Checkbox
-          name="'accountingFormat'"
-          label="accounting_format_label"
-          value="state.isAccountingFormat"
-          onChange.bind="toggleAccountingFormat"
-        />
-        <div class="o-format-examples mt-4" t-if="selectedFormat">
-          <table class="w-100">
-            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
-              <tr>
-                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
-                <td class="w-75 text-truncate" t-esc="example.value"/>
-              </tr>
-            </t>
-          </table>
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons">
-          <button
-            class="o-button primary"
-            t-on-click="() => this.apply()"
-            t-att-disabled="!formatProposals.length || isSameFormat">
-            Apply
-          </button>
-        </div>
-      </Section>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[props.criterion.values[0] || '']"
@@ -1920,7 +1924,7 @@
   <t t-name="o-spreadsheet-ConditionalFormatPreview">
     <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview w-100"
+      class="o-cf-preview w-100 border-bottom"
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
@@ -1933,7 +1937,7 @@
         </div>
         <t t-if="cf.rule.type==='IconSetRule'">
           <div
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 bg-white">
+            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 bg-white border">
             <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
             <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
             <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
@@ -1942,7 +1946,7 @@
         <t t-else="">
           <div
             t-att-style="getPreviewImageStyle(cf.rule)"
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 bg-white">
+            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2 border">
             123
           </div>
         </t>
@@ -1971,7 +1975,7 @@
       <div class="o-section-subtitle">Icons</div>
       <div class="o-cf-iconsets d-flex flex-row">
         <div
-          class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between"
+          class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between border rounded"
           t-foreach="['arrows', 'smiley', 'dots']"
           t-as="iconSet"
           t-key="iconSet"
@@ -1994,7 +1998,7 @@
     <tr>
       <td>
         <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-'+icon+'Icon', ev)">
-          <div class="o-cf-icon-button o-cf-clickable-icon me-3">
+          <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>
@@ -2077,7 +2081,7 @@
         <tr>
           <td>
             <div t-on-click.stop="(ev) => this.toggleMenu('iconSet-lowerIcon', ev)">
-              <div class="o-cf-icon-button o-cf-clickable-icon me-3">
+              <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>
@@ -2271,7 +2275,7 @@
 
   <t t-name="o-spreadsheet-CellIsRuleEditorPreview">
     <div
-      class="o-cf-preview-display"
+      class="o-cf-preview-display border"
       t-attf-style="font-weight:{{currentStyle.bold ?'bold':'normal'}};
                        text-decoration:{{getTextDecoration(currentStyle)}};
                        font-style:{{currentStyle.italic?'italic':'normal'}};
@@ -2345,7 +2349,7 @@
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
         />
-        <div class="o-divider"/>
+        <div class="o-divider border-end"/>
         <ColorPickerWidget
           currentColor="rule.style.fillColor"
           toggleColorPicker="(ev) => this.toggleMenu('cellIsRule-fillColor', ev)"
@@ -2373,7 +2377,7 @@
 
   <t t-name="o-spreadsheet.RoundColorPicker">
     <div
-      class="o-round-color-picker-button rounded-circle"
+      class="o-round-color-picker-button rounded-circle border"
       t-ref="colorPickerButton"
       t-on-click.stop="togglePicker"
       t-att-title="props.title"
@@ -2397,6 +2401,7 @@
       <t t-foreach="props.choices" t-as="choice" t-key="choice.value">
         <label class="o-radio d-flex align-items-center me-4">
           <input
+            class="border rounded-circle"
             t-att-class="{
               'me-1': props.direction === 'horizontal',
               'me-2': props.direction === 'vertical'}"
@@ -2464,7 +2469,7 @@
       t-att-class="{'text-muted': props.disabled }"
       t-attf-class="{{props.className}}">
       <input
-        class="me-2 flex-shrink-0"
+        class="me-2 flex-shrink-0 border"
         type="checkbox"
         t-att-disabled="props.disabled"
         t-att-name="props.name"
@@ -2965,7 +2970,7 @@
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
-      <div class="o-panel-content overflow-y-auto" t-ref="panelContent">
+      <div class="o-panel-content" t-ref="panelContent">
         <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
           <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
           <t
@@ -3125,45 +3130,10 @@
 
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Geo chart options">
       <t t-set-slot="content">
-        <Section class="'pt-0 o-color-scale'" title.translate="Color Scale">
-          <select class="o-input" t-on-change="this.updateColorScaleType">
-            <option value="custom">Custom</option>
-            <hr/>
-            <t t-foreach="colorScalesChoices" t-as="colorScale" t-key="colorScale">
-              <option
-                t-att-value="colorScale"
-                t-esc="colorScale_value"
-                t-att-selected="colorScale === selectedColorScale"
-              />
-            </t>
-          </select>
-
-          <t t-if="customColorScale">
-            <div class="o-min-color d-flex align-items-center mb-2 mt-4">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('minColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('minColor', color)"
-                disableNoColor="true"
-              />
-              <span class="ps-2">Color of minimum values</span>
-            </div>
-            <div class="o-mid-color d-flex align-items-center mb-2">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('midColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('midColor', color)"
-              />
-              <span class="ps-2">Color of middle values</span>
-            </div>
-            <div class="o-max-color d-flex align-items-center">
-              <RoundColorPicker
-                currentColor="getCustomColorScaleColor('maxColor')"
-                onColorPicked="(color) => this.setCustomColorScaleColor('maxColor', color)"
-                disableNoColor="true"
-              />
-              <span class="ps-2">Color of maximum values</span>
-            </div>
-          </t>
-        </Section>
+        <ColorScalePicker
+          definition="props.definition"
+          onUpdateColorScale.bind="this.updateColorScale"
+        />
 
         <Section class="'pt-0 o-missing-value'" title.translate="Countries without value">
           <RoundColorPicker
@@ -3874,6 +3844,120 @@
       <path fill="var(--os-chart-preview-orange-fill)" d="M32,17 h13 v25 h-13"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.CALENDAR_CHART">
+    <svg class="o-chart-preview" viewBox="0 0 48 48">
+      <path fill="#444" d="M3 3h42v42H3zh1v41h40V4H4"/>
+      <path
+        fill="#eb6d00"
+        d="M7 7h7v7H7m0 2h7v7H7m0 2h7v7H7m0 2h7v7H7m9-34h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m9-34h7v7h-7m0 11h7v7h-7m0 2h7v7h-7m9-34h7v7h-7m0 2h7v7h-7m0 2h7v7h-7m0 2h7v7h-7"
+      />
+      <path fill="#ffe1c8" d="M8 8h5v5H8m0 13h5v5H8m9 4h5v5h-5m18-5h5v5h-5"/>
+      <path
+        fill="#FFA85C"
+        d="M8 17h5v5H8m9-14h5v5h-5m0 13h5v5h-5m9 4h5v5h-5m9-32h5v5h-5m0 13h5v5h-5"
+      />
+      <path fill="#fff" d="M8 35h5v5H8"/>
+      <path fill="#A34C00" d="M25 16h7v7h-7"/>
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet-CalendarChartDesignPanel">
+    <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>
+        </Section>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Calendar chart options">
+      <t t-set-slot="content">
+        <ColorScalePicker definition="props.definition" onUpdateColorScale.bind="onColormapChange"/>
+        <Section class="'pt-0 o-missing-value'" title.translate="Missing value color">
+          <RoundColorPicker
+            currentColor="selectedMissingValueColor"
+            onColorPicked.bind="updateMissingValueColor"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          chartId="props.chartId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-CalendarChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="1"
+        canChangeDatasetOrientation="false"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        options="this.getLabelRangeOptions()"
+        title.translate="Date range"
+      />
+
+      <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>
+        </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>
+        </div>
+      </Section>
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet.TextStyler">
     <div
@@ -3881,7 +3965,10 @@
       t-att-class="props.class">
       <ActionButton action="boldButtonAction" class="'o-hoverable-button'"/>
       <ActionButton action="italicButtonAction" class="'o-hoverable-button'"/>
-      <div class="o-divider" t-if="props.hasHorizontalAlign || props.hasVerticalAlign"/>
+      <div
+        class="o-divider border-start"
+        t-if="props.hasHorizontalAlign || props.hasVerticalAlign"
+      />
       <div class="o-dropdown position-relative" t-if="props.hasHorizontalAlign">
         <ActionButton
           action="horizontalAlignButtonAction"
@@ -3920,13 +4007,13 @@
           </div>
         </div>
       </div>
-      <div class="o-divider"/>
+      <div class="o-divider border-start"/>
       <FontSizeEditor
         currentFontSize="currentFontSize"
         onFontSizeChanged.bind="this.updateFontSize"
         class="'o-hoverable-button'"
       />
-      <div class="o-divider"/>
+      <div class="o-divider border-start"/>
       <ColorPickerWidget
         currentColor="props.style.color ?? props.defaultStyle?.color"
         toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
@@ -4251,6 +4338,85 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ColorScalePicker">
+    <Section class="'pt-0 o-color-scale'" title.translate="Color Scale">
+      <div class="w-100" style="position:relative">
+        <div
+          class="color-scale-container d-flex justify-content-end"
+          t-on-click.stop="onPointerDown">
+          <span class="color-scale-label">
+            <t t-esc="currentColorScaleLabel"/>
+          </span>
+          <div
+            class="color-scale-preview w-100"
+            t-att-data-test-colorscale="selectedColorScale"
+            t-att-style="currentColorScaleStyle"
+          />
+          <span class="ms-1">
+            <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+          </span>
+        </div>
+        <Popover t-if="state.popoverProps" t-props="state.popoverProps">
+          <table t-ref="popoverRef" class="bg-white" t-att-style="state.popoverStyle">
+            <tr
+              class="color-scale-container custom-color-scale-container"
+              t-on-click="() => this.onColorScaleChange('custom')">
+              <td class="p-1 text-end">Custom</td>
+              <td class="w-100 p-1">
+                <div
+                  class="color-scale-preview o-checkers-background"
+                  data-test-id="custom-color-scale"
+                />
+              </td>
+            </tr>
+            <t t-foreach="colorScales" t-as="colorScale" t-key="colorScale.value">
+              <tr
+                class="color-scale-container"
+                t-on-click="() => this.onColorScaleChange(colorScale.value)"
+                t-att-title="colorScale.label">
+                <td class="p-1 text-end">
+                  <t t-esc="colorScale.label"/>
+                </td>
+                <td class="w-100 p-1">
+                  <div
+                    class="color-scale-preview"
+                    t-att-data-test-id="colorScale.className"
+                    t-att-style="colorScalePreviewStyle(colorScale.value)"
+                  />
+                </td>
+              </tr>
+            </t>
+          </table>
+        </Popover>
+      </div>
+      <div class="ps-3 mt-2">
+        <div class="o-min-color d-flex align-items-center mb-2">
+          <RoundColorPicker
+            currentColor="currentColorScale.minColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('minColor', color)"
+            disableNoColor="true"
+          />
+          <span class="ps-2">Color of minimum values</span>
+        </div>
+        <div class="o-mid-color d-flex align-items-center mb-2">
+          <RoundColorPicker
+            currentColor="currentColorScale.midColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('midColor', color)"
+          />
+          <span class="ps-2">Color of middle values</span>
+        </div>
+        <div class="o-max-color d-flex align-items-center">
+          <RoundColorPicker
+            currentColor="currentColorScale.maxColor"
+            onColorPicked="(color) => this.setCustomColorScaleColor('maxColor', color)"
+            disableNoColor="true"
+          />
+          <span class="ps-2">Color of maximum values</span>
+        </div>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet.ChartTitle">
     <Section class="'o-chart-title'" title="props.name">
       <TextInput
@@ -4574,7 +4740,7 @@
         class="o-number-editor d-flex align-items-center"
         t-att-class="props.class"
         t-att-title="props.title"
-        t-on-click="this.toggleList">
+        t-on-click.stop="this.toggleList">
         <input
           type="number"
           t-att-min="props.min"
@@ -4640,7 +4806,7 @@
       t-on-click.stop=""
       t-on-contextmenu.prevent="">
       <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
-        <div t-if="menuItem === 'separator'" class="o-separator"/>
+        <div t-if="menuItem === 'separator'" class="o-separator border-bottom"/>
         <t t-else="">
           <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
           <t t-set="isMenuEnabled" t-value="isEnabled(menuItem)"/>
@@ -4689,7 +4855,7 @@
 
   <t t-name="o-spreadsheet-LinkEditor">
     <div
-      class="o-link-editor bg-white"
+      class="o-link-editor bg-white rounded"
       t-on-click.stop="() => this.menu.isOpen=false"
       t-on-keydown="onKeyDown">
       <div class="o-section">
@@ -4754,7 +4920,7 @@
   </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
-    <div class="o-link-tool d-flex align-items-center bg-white">
+    <div class="o-link-tool d-flex align-items-center bg-white rounded">
       <!-- t-key to prevent owl from re-using the previous img element when the link changes.
     The wrong/previous image would be displayed while the new one loads -->
       <img
@@ -5856,6 +6022,52 @@
       <i class="fa fa-moon-o"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-0">
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      transform="rotate(270)"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-45">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m1.95 6.879.707-.707 8.485 8.485 1.06-1.06v2.828H9.375l1.061-1.061m.706-7.778.707-.707 3.536 3.535 1.06-1.06v2.828h-2.828l1.06-1.06M4.071 4.757l6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-90">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet-Icon.ROTATION-270">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13 16h-1V4h-1.5l2-2 2 2H13M7 9H6V4H4.5l2-2 2 2H7m3 12-7-2.8V12l7-2.8.43 1.12-1.9.7v3.18l1.9.7-.43 1.12m-2.7-2.25v-2.3l-2.8 1.1z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ROTATION-315">
+    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m6.879 16.55-.707-.707 8.485-8.485-1.06-1.06h2.828v2.828l-1.061-1.061m-7.778-.707-.707-.707 3.535-3.536-1.06-1.06h2.828v2.828l-1.06-1.06M4.757 14.429l-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -6024,7 +6236,6 @@
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving}">
       <div
@@ -6068,7 +6279,6 @@
       t-on-mouseleave="onMouseLeave"
       t-on-pointerdown.self.prevent="select"
       t-on-click="onClick"
-      t-on-pointerup.self="onMouseUp"
       t-on-contextmenu.self="onContextMenu"
       t-att-class="{'o-grab': state.waitingForMove, 'o-dragging': state.isMoving, }">
       <div
@@ -6246,7 +6456,8 @@
       <button
         t-on-click="onConfirm"
         t-att-disabled="state.errorFlag"
-        class="o-button flex-grow-0 me-2">
+        class="o-button flex-grow-0 me-2"
+        tabindex="-1">
         Add
       </button>
       <input
@@ -6258,6 +6469,7 @@
         t-on-keydown.stop="onKeydown"
         t-on-pointerdown.stop=""
         t-on-input.stop="onInput"
+        tabindex="-1"
       />
       <span>more rows at the bottom</span>
       <ValidationMessages t-if="state.errorFlag" messages="errorMessages" msgType="'error'"/>
@@ -6329,7 +6541,7 @@
       </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
       <HorizontalScrollBar leftOffset="HEADER_WIDTH"/>
-      <div class="o-scrollbar corner"/>
+      <div class="o-scrollbar corner border-top border-start"/>
     </div>
   </t>
 
@@ -6399,7 +6611,7 @@
       </i>
     </div>
     <div
-      class="o-filter-menu-list d-flex flex-column"
+      class="o-filter-menu-list d-flex flex-column border"
       t-ref="filterValueList"
       t-on-click="this.clearScrolledToValue"
       t-on-scroll="this.clearScrolledToValue">
@@ -6484,7 +6696,7 @@
         </div>
       </t>
       <div class="o-filter-menu-content">
-        <div class="o-separator"/>
+        <div class="o-separator border-bottom"/>
         <SidePanelCollapsible
           isInitiallyCollapsed="filterValueType !== 'criterion'"
           title.translate="Filter by criterion">
@@ -6910,7 +7122,7 @@
   <t t-name="o-spreadsheet-TopBarComposer">
     <div class="o-topbar-composer-container w-100">
       <div
-        class="o-topbar-composer position-relative bg-white user-select-text d-flex"
+        class="o-topbar-composer position-relative bg-white user-select-text d-flex border"
         t-att-class="{
           'o-topbar-composer-readonly': env.model.getters.isReadonly(),
           'o-topbar-composer-active': focus !== 'inactive',
@@ -6933,7 +7145,7 @@
 
   <t t-name="o-spreadsheet-StandaloneComposer">
     <div
-      class="o-standalone-composer"
+      class="o-standalone-composer border-bottom"
       t-on-click.stop=""
       t-att-class="containerClass"
       t-att-title="props.title">
@@ -6950,7 +7162,7 @@
 
   <t t-name="o-spreadsheet-SpeechBubble">
     <t t-portal="'.o-spreadsheet'">
-      <div class="o-speech-bubble position-absolute px-3" t-ref="bubble">
+      <div class="o-speech-bubble position-absolute px-3 border" t-ref="bubble">
         <div class="o-speech-content text-truncate pb-1" t-esc="props.content"/>
       </div>
     </t>
@@ -6958,7 +7170,7 @@
 
   <t t-name="o-spreadsheet-GridComposer">
     <div
-      class="o-cell-reference"
+      class="o-cell-reference rounded"
       t-if="shouldDisplayCellReference"
       t-att-style="cellReferenceStyle"
       t-esc="cellReference"
@@ -6969,7 +7181,13 @@
   </t>
 
   <t t-name="o-spreadsheet-FunctionDescriptionProvider">
-    <div class="o-formula-assistant-container user-select-none shadow">
+    <div
+      class="o-formula-assistant-container shadow"
+      tabindex="-1"
+      t-on-pointerdown=""
+      t-on-pointerup.stop=""
+      t-on-keydown.stop=""
+      t-on-click.stop="">
       <t t-set="context" t-value="getContext()"/>
       <div class="o-formula-assistant bg-white" t-if="context.functionDescription.name">
         <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
@@ -6984,6 +7202,7 @@
           <div
             class="collapsor px-2 d-flex align-items-center rounded"
             t-att-class="state.isCollapsed ? 'collapsed' : ''"
+            t-on-pointerdown.prevent=""
             t-on-click="() => this.toggle()">
             <span class="collapsor-arrow d-inline-block">
               <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
@@ -6992,7 +7211,7 @@
         </div>
 
         <Collapse isCollapsed="state.isCollapsed">
-          <div class="o-formula-assistant-core pb-3 m-3">
+          <div class="o-formula-assistant-core pb-3 m-3 border-bottom">
             <div class="o-formula-assistant-gray">ABOUT</div>
             <div t-esc="context.functionDescription.description"/>
           </div>
@@ -7030,7 +7249,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Composer">
-    <div class="o-composer-container w-100 h-100">
+    <div class="o-composer-container w-100 h-100" t-ref="composerContainer">
       <t t-set="autoCompleteProposals" t-value="props.composerStore.autoCompleteProposals"/>
       <t t-set="canBeToggled" t-value="props.composerStore.canBeToggled"/>
       <t
@@ -7042,10 +7261,9 @@
           t-if="props.focus !== 'inactive' and assistantIsAvailable and canBeToggled and assistant.forcedClosed"
           role="button"
           title="Show formula help"
-          t-on-click="openAssistant"
+          t-on-click.stop="openAssistant"
           t-on-pointerdown.prevent.stop=""
-          t-on-click.prevent.stop=""
-          t-on-pointerup.prevent.stop=""
+          t-on-pointerup.stop=""
           class="fa-stack position-absolute translate-middle force-open-assistant fs-4">
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-question-circle fa-stack-1x"/>
@@ -7081,13 +7299,14 @@
         t-att-style="assistantContainerStyle"
         t-if="props.focus !== 'inactive' and assistantIsAvailable and !(canBeToggled and assistant.forcedClosed)"
         t-on-wheel.stop=""
-        t-on-pointerdown.prevent.stop=""
-        t-on-pointerup.prevent.stop=""
-        t-on-click.prevent.stop="">
+        t-on-pointerdown.stop=""
+        t-on-pointerup.stop=""
+        t-on-click.stop="">
         <span
           t-if="canBeToggled and !assistant.forcedClosed"
           role="button"
           t-on-click="closeAssistant"
+          t-on-pointerdown.prevent.stop=""
           class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-times-circle fa-stack-1x"/>
@@ -7123,6 +7342,7 @@
   <t t-name="o-spreadsheet-TextValueProvider">
     <div
       t-ref="autoCompleteList"
+      t-on-pointerdown.prevent=""
       t-att-class="{
           'o-autocomplete-dropdown bg-white': props.proposals.length}">
       <t t-foreach="props.proposals" t-as="proposal" t-key="proposal.text + proposal_index">
@@ -7196,7 +7416,7 @@
             </div>
           </div>
         </div>
-        <div class="o-separator"/>
+        <div class="o-separator border-bottom"/>
         <div
           class="o-color-picker-section-name o-color-picker-toggler"
           t-on-click="toggleColorPicker">
@@ -7235,7 +7455,7 @@
             <div class="magnifier pe-none" t-att-style="pointerStyle"/>
           </div>
           <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
-            <div class="o-hue-picker" t-on-click.stop=""/>
+            <div class="o-hue-picker border rounded" t-on-click.stop=""/>
             <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
               <t t-call="o-spreadsheet-Icon.CARET_UP"/>
             </div>
@@ -7243,16 +7463,17 @@
           <div class="o-custom-input-preview">
             <input
               type="text"
+              class="border rounded"
               t-att-class="{'o-wrong-color': !isHexColorInputValid }"
               t-on-click.stop=""
               t-att-value="state.customHexColor"
               t-on-input="setHexColor"
             />
-            <div class="o-color-preview" t-att-style="colorPreviewStyle"/>
+            <div class="o-color-preview border rounded" t-att-style="colorPreviewStyle"/>
           </div>
           <div class="o-custom-input-buttons">
             <button
-              class="o-add-button"
+              class="o-add-button border rounded"
               t-att-class="{'o-disabled': !state.customHexColor or !isHexColorInputValid}"
               t-on-click.stop="addCustomColor">
               Add
@@ -7260,9 +7481,9 @@
           </div>
         </div>
         <t t-if="!props.disableNoColor">
-          <div class="o-separator"/>
+          <div class="o-separator border-bottom"/>
           <div class="o-buttons">
-            <button t-on-click="resetColor" class="o-cancel">No Color</button>
+            <button t-on-click="resetColor" class="o-cancel border rounded">No Color</button>
           </div>
         </t>
       </div>
@@ -7275,7 +7496,7 @@
 
   <t t-name="o-spreadsheet-BottomBar">
     <div
-      class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden"
+      class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden border-top"
       t-on-click="props.onClick"
       t-ref="bottomBar"
       t-on-contextmenu.prevent="">
@@ -7387,13 +7608,14 @@
   <t t-name="o-spreadsheet-BottomBarSheet">
     <Ripple>
       <div
-        class="o-sheet d-flex align-items-center user-select-none text-nowrap "
+        class="o-sheet d-flex align-items-center user-select-none text-nowrap border-start border-end"
         tabindex="-1"
         composerFocusableElement="true"
         t-on-pointerdown="(ev) => this.onMouseDown(ev)"
         t-on-click="onClick"
         t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
+        t-key="sheetName"
         t-att-style="props.style"
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"
@@ -7481,7 +7703,7 @@
             </span>
           </div>
         </div>
-        <div class="o-divider"/>
+        <div class="o-divider border-end"/>
         <div class="o-border-selector-section">
           <div
             class="m-0 p-0 d-flex align-items-center justify-content-center o-with-color o-hoverable-button"