@odoo/o-spreadsheet 17.5.0-alpha.7 → 18.1.0-alpha.0

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 17.5.0-alpha.7
- @date 2024-08-26T13:50:08.744Z
- @hash f8d3f23
+ @version 18.1.0-alpha.0
+ @date 2024-09-25T13:18:46.133Z
+ @hash 288f0b7
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -189,7 +189,7 @@
           t-if="state.isSheetListScrollableLeft"
         />
         <div
-          class="o-sheet-list d-flex w-100 overflow-hidden px-1"
+          class="o-sheet-list d-flex w-100 px-1"
           t-ref="sheetList"
           t-on-wheel="onWheel"
           t-on-scroll="onScroll">
@@ -284,8 +284,19 @@
         <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
+        <div
+          t-if="sheetColorStyle"
+          class="o-sheet-color position-absolute"
+          t-att-style="sheetColorStyle"
+        />
       </div>
     </Ripple>
+    <ColorPicker
+      t-if="state.pickerOpened"
+      anchorRect="colorPickerAnchorRect"
+      onColorPicked.bind="onColorPicked"
+      currentColor="props.currentColor"
+    />
   </t>
 
   <t t-name="o-spreadsheet-BottomBarStatistic">
@@ -456,37 +467,71 @@
 
   <t t-name="o-spreadsheet-Composer">
     <div class="o-composer-container w-100 h-100">
-      <div
-        class="o-composer w-100 text-start"
-        t-att-class="{ 'text-muted': env.model.getters.isReadonly(), 'active': props.focus !== 'inactive' }"
-        t-att-style="props.inputStyle"
-        t-ref="o_composer"
-        tabindex="1"
-        t-att-contenteditable="env.model.getters.isReadonly() ? 'false' : 'true'"
-        t-att-placeHolder="props.placeholder"
-        spellcheck="false"
-        t-on-keydown="onKeydown"
-        t-on-mousewheel.stop=""
-        t-on-input="onInput"
-        t-on-pointerdown="onMousedown"
-        t-on-click="onClick"
-        t-on-keyup="onKeyup"
-        t-on-paste="onPaste"
-        t-on-compositionstart="onCompositionStart"
-        t-on-compositionend="onCompositionEnd"
-        t-on-dblclick="onDblClick"
-        t-on-contextmenu="onContextMenu"
-        t-on-blur="onBlur"
+      <t
+        t-set="assistantIsAvailable"
+        t-value="autoCompleteState.provider or functionDescriptionState.showDescription"
       />
-
+      <div class="d-flex flex-row position-relative">
+        <span
+          t-if="props.focus !== 'inactive' and assistantIsAvailable and assistant.forcedClosed"
+          role="button"
+          title="Show formula help"
+          t-on-click="openAssistant"
+          t-on-pointerdown.prevent.stop=""
+          t-on-click.prevent.stop=""
+          t-on-pointerup.prevent.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"/>
+        </span>
+        <div
+          class="o-composer w-100 text-start"
+          t-att-class="{ 'text-muted': env.model.getters.isReadonly(), 'active': props.focus !== 'inactive' }"
+          t-att-style="props.inputStyle"
+          t-ref="o_composer"
+          tabindex="1"
+          t-att-contenteditable="env.model.getters.isReadonly() ? 'false' : 'true'"
+          t-att-placeHolder="props.placeholder"
+          spellcheck="false"
+          t-on-keydown="onKeydown"
+          t-on-mousewheel.stop=""
+          t-on-input="onInput"
+          t-on-pointerdown="onMousedown"
+          t-on-click="onClick"
+          t-on-keyup="onKeyup"
+          t-on-paste="onPaste"
+          t-on-compositionstart="onCompositionStart"
+          t-on-compositionend="onCompositionEnd"
+          t-on-dblclick="onDblClick"
+          t-on-contextmenu="onContextMenu"
+          t-on-blur="onBlur"
+        />
+      </div>
       <div
-        t-if="props.focus !== 'inactive' and (autoCompleteState.provider or functionDescriptionState.showDescription)"
+        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable"
         class="o-composer-assistant shadow"
         t-att-style="assistantStyle"
         t-on-wheel.stop=""
         t-on-pointerdown.prevent.stop=""
         t-on-click.prevent.stop=""
         t-on-pointerup.prevent.stop="">
+        <span
+          role="button"
+          t-on-click="closeAssistant"
+          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 text-muted"/>
+        </span>
+        <FunctionDescriptionProvider
+          t-if="functionDescriptionState.showDescription"
+          functionName="functionDescriptionState.functionName"
+          functionDescription="functionDescriptionState.functionDescription"
+          argToFocus="functionDescriptionState.argToFocus"
+        />
+        <div
+          t-if="functionDescriptionState.showDescription and autoCompleteState.provider"
+          class="border-top"
+        />
         <TextValueProvider
           t-if="autoCompleteState.provider"
           proposals="autoCompleteState.provider.proposals"
@@ -494,71 +539,65 @@
           onValueSelected.bind="this.autoComplete"
           onValueHovered.bind="this.updateAutoCompleteIndex"
         />
-        <FunctionDescriptionProvider
-          t-if="functionDescriptionState.showDescription"
-          functionName="functionDescriptionState.functionName"
-          functionDescription="functionDescriptionState.functionDescription"
-          argToFocus="functionDescriptionState.argToFocus"
-        />
       </div>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-FunctionDescriptionProvider">
-    <div
-      class="o-formula-assistant-container user-select-none shadow"
-      t-att-class="{
-          'pe-none': assistantState.allowCellSelectionBehind,
-          'pe-auto': !assistantState.allowCellSelectionBehind
-          }">
+    <div class="o-formula-assistant-container user-select-none shadow">
       <t t-set="context" t-value="getContext()"/>
-      <div
-        class="o-formula-assistant"
-        t-if="context.functionName"
-        t-on-pointermove="onMouseMove"
-        t-att-class="{'opacity-25': assistantState.allowCellSelectionBehind}">
-        <div class="o-formula-assistant-head">
-          <span t-esc="context.functionName"/>
-          (
-          <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-            <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
-            <span t-att-class="{ 'o-formula-assistant-focus': context.argToFocus === arg_index }">
-              <span>
-                <span t-if="arg.optional || arg.repeating || arg.default">[</span>
-                <span t-esc="arg.name"/>
-                <span t-if="arg.repeating">, ...</span>
-                <span t-if="arg.optional || arg.repeating || arg.default">]</span>
+      <div class="o-formula-assistant" t-if="context.functionName">
+        <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
+          <div>
+            <span t-esc="context.functionName"/>
+            (
+            <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
+              <span t-if="arg_index > '0'" t-esc="formulaArgSeparator"/>
+              <span t-att-class="{ 'o-formula-assistant-focus': context.argToFocus === arg_index }">
+                <span>
+                  <span t-if="arg.optional || arg.repeating || arg.default">[</span>
+                  <span t-esc="arg.name"/>
+                  <span t-if="arg.repeating">, ...</span>
+                  <span t-if="arg.optional || arg.repeating || arg.default">]</span>
+                </span>
               </span>
-            </span>
-          </t>
-          )
+            </t>
+            )
+          </div>
+          <i
+            class="fa fa-caret-up px-2 align-self-start collapsed"
+            data-bs-toggle="collapse"
+            data-bs-target="#formula-assistant-details"
+          />
         </div>
 
-        <div class="o-formula-assistant-core pb-3 m-3">
-          <div class="o-formula-assistant-gray">ABOUT</div>
-          <div t-esc="context.functionDescription.description"/>
-        </div>
+        <div id="formula-assistant-details" class="collapse">
+          <div class="o-formula-assistant-core pb-3 m-3">
+            <div class="o-formula-assistant-gray">ABOUT</div>
+            <div t-esc="context.functionDescription.description"/>
+          </div>
 
-        <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
-          <div
-            class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
-            t-att-class="{
-                'o-formula-assistant-gray': context.argToFocus >= '0',
-                'o-formula-assistant-focus': context.argToFocus === arg_index,
-              }">
-            <div>
-              <span t-esc="arg.name"/>
-              <span
-                t-if="arg.optional || arg.repeating || arg.default ">&#xA0;- [optional]&#xA0;</span>
-              <span t-if="arg.default">
-                <span>default:&#xA0;</span>
-                <t t-esc="arg.defaultValue"/>
-              </span>
-              <span t-if="arg.repeating">repeatable</span>
+          <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
+            <div
+              class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
+              t-att-class="{
+                  'o-formula-assistant-gray': context.argToFocus >= '0',
+                  'o-formula-assistant-focus': context.argToFocus === arg_index,
+                }">
+              <div>
+                <span t-esc="arg.name"/>
+                <span
+                  t-if="arg.optional || arg.repeating || arg.default ">&#xA0;- [optional]&#xA0;</span>
+                <span t-if="arg.default">
+                  <span>default:&#xA0;</span>
+                  <t t-esc="arg.defaultValue"/>
+                </span>
+                <span t-if="arg.repeating">repeatable</span>
+              </div>
+              <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
             </div>
-            <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
-          </div>
-        </t>
+          </t>
+        </div>
       </div>
     </div>
   </t>
@@ -684,11 +723,15 @@
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartComponent">
-    <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer"/>
+    <canvas class="o-figure-canvas o-gauge-chart w-100 h-100" t-ref="chartContainer"/>
   </t>
 
   <t t-name="o-spreadsheet-ScorecardChart">
-    <canvas class="o-figure-canvas w-100 h-100" t-ref="chartContainer" t-att-title="title"/>
+    <canvas
+      class="o-figure-canvas o-scorecard w-100 h-100"
+      t-ref="chartContainer"
+      t-att-title="title"
+    />
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
@@ -2054,6 +2097,11 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.SMALL_DOT_RIGHT_ALIGN">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+      <circle fill="currentColor" cx="14" cy="9" r="4"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.SORT_RANGE">
     <svg class="o-icon">
       <path
@@ -2412,8 +2460,10 @@
               disabled="1"
             />
           </t>
-          <button t-if="link.url" t-on-click="removeLink" class="o-remove-url">✖</button>
-          <button t-if="!link.url" t-on-click.stop="openMenu" class="o-special-link">
+          <button t-if="link.url" t-on-click="removeLink" class="o-remove-url o-button-icon">
+            ✖
+          </button>
+          <button t-if="!link.url" t-on-click.stop="openMenu" class="o-special-link o-button-icon">
             <t t-call="o-spreadsheet-Icon.LIST"/>
           </button>
         </div>
@@ -2463,7 +2513,8 @@
               <div class="d-flex w-100">
                 <div
                   t-if="childrenHaveIcon"
-                  class="o-menu-item-icon d-flex align-items-center flex-shrink-0">
+                  class="o-menu-item-icon d-flex align-items-center flex-shrink-0"
+                  t-att-style="getIconColor(menuItem)">
                   <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
                 </div>
                 <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
@@ -2559,7 +2610,7 @@
             t-att-class="{
               'o-focused' : range.isFocused,
               'o-invalid border-danger position-relative': isInvalid || !range.isValidRange,
-              'text-decoration-underline': range.isFocused and state.mode === 'select-range'
+              'text-decoration-underline': range.xc and range.isFocused and state.mode === 'select-range'
             }"
             t-ref="{{range.isFocused ? 'focusedInput' : 'unfocusedInput' + range_index}}"
           />
@@ -2571,7 +2622,7 @@
           </span>
         </div>
         <button
-          class="o-btn border-0 bg-transparent fw-bold o-remove-selection o-text-muted pe-0"
+          class="border-0 bg-transparent fw-bold o-remove-selection o-button-icon pe-0"
           t-if="ranges.length > 1"
           t-on-click="() => this.removeInput(range.id)">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
@@ -3108,7 +3159,7 @@
           <t t-set-slot="title">Values</t>
           <Checkbox
             name="'showValues'"
-            label="showValuesLabel"
+            label.translate="Show values"
             value="props.definition.showValues"
             onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
           />
@@ -3263,7 +3314,7 @@
       definition="props.definition"
       updateChart="props.updateChart"
     />
-    <SidePanelCollapsible collapsedAtInit="true">
+    <SidePanelCollapsible collapsedAtInit="false">
       <t t-set-slot="title">Gauge Design</t>
       <t t-set-slot="content">
         <Section class="'pt-0'">
@@ -3308,6 +3359,7 @@
         <tr>
           <th class="o-gauge-color-set-colorPicker"/>
           <th class="o-gauge-color-set-text"/>
+          <th class="o-gauge-color-set-operator"/>
           <th class="o-gauge-color-set-value">Value</th>
           <th class="o-gauge-color-set-type">Type</th>
         </tr>
@@ -3352,7 +3404,20 @@
           onColorPicked="(color) => this.updateSectionColor(sectionType, color)"
         />
       </td>
-      <td>When value is below</td>
+      <td>When value is</td>
+      <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>
+      </td>
       <td class="pe-2">
         <input
           type="text"
@@ -3478,7 +3543,7 @@
           <t t-set-slot="title">Values</t>
           <Checkbox
             name="'showValues'"
-            label="showValuesLabel"
+            label.translate="Show values"
             value="props.definition.showValues"
             onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
           />
@@ -3564,7 +3629,7 @@
         </Section>
       </t>
     </GeneralDesignEditor>
-    <SidePanelCollapsible collapsedAtInit="true">
+    <SidePanelCollapsible collapsedAtInit="false">
       <t t-set-slot="title">Baseline</t>
       <t t-set-slot="content">
         <Section class="'pt-0'">
@@ -3632,7 +3697,7 @@
           <t t-set-slot="title">Values</t>
           <Checkbox
             name="'showValues'"
-            label="showValuesLabel"
+            label.translate="Show values"
             value="props.definition.showValues"
             onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
           />
@@ -3741,7 +3806,7 @@
 
   <t t-name="o-spreadsheet-CogWheelMenu">
     <span
-      class="fa fa-cog o-text-muted os-cog-wheel-menu-icon"
+      class="fa fa-cog os-cog-wheel-menu-icon o-button-icon"
       t-on-click="toggleMenu"
       t-ref="button"
     />
@@ -3784,16 +3849,22 @@
   </t>
 
   <t t-name="o-spreadsheet.RadioSelection">
-    <div class="d-flex flex-row">
+    <div
+      class="d-flex"
+      t-att-class="{
+            'flex-row': props.direction === 'horizontal',
+            'flex-column': props.direction === 'vertical'}">
       <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="me-1"
+            t-att-class="{
+              'me-1': props.direction === 'horizontal',
+              'me-2': props.direction === 'vertical'}"
             type="radio"
             t-att-name="props.name"
             t-att-value="choice.value"
             t-att-checked="choice.value === props.selectedValue"
-            t-on-change="onChange"
+            t-on-change="() => props.onChange(choice.value)"
           />
           <t t-esc="choice.label"/>
         </label>
@@ -3954,6 +4025,9 @@
         <t t-if="state.currentCFType === 'IconSetRule'" t-call="o-spreadsheet-IconSetEditor">
           <t t-set="rule" t-value="state.rules.iconSet"/>
         </t>
+        <t t-if="state.currentCFType === 'DataBarRule'" t-call="o-spreadsheet-DataBarEditor">
+          <t t-set="rule" t-value="state.rules.dataBar"/>
+        </t>
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
@@ -4046,6 +4120,25 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-DataBarEditor">
+    <div class="o-cf-data-bar-editor">
+      <div class="o-section-subtitle">Color</div>
+      <RoundColorPicker
+        currentColor="colorNumberString(rule.color)"
+        onColorPicked.bind="updateDataBarColor"
+      />
+      <div class="o-section-subtitle">Range of values</div>
+      <SelectionInput
+        ranges="getRangeValues()"
+        class="'o-range'"
+        isInvalid="false"
+        hasSingleRange="true"
+        onSelectionChanged="(ranges) => this.onDataBarRangeUpdate(ranges)"
+        required="false"
+      />
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-IconSets">
     <div class="pb-2">
       <div class="o-section-subtitle">Icons</div>
@@ -4163,11 +4256,13 @@
     <div class="o-cf-iconset-rule">
       <t t-call="o-spreadsheet-IconSets"/>
       <t t-call="o-spreadsheet-IconSetInflexionPoints"/>
-      <div
-        class="btn btn-link ps-0 o-cf-iconset-reverse d-flex flex-row align-items-center"
-        t-on-click="reverseIcons">
-        <t t-call="o-spreadsheet-Icon.REFRESH"/>
-        <div class="ms-1">Reverse icons</div>
+      <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 t-call="o-spreadsheet-Icon.REFRESH"/>
+          <div class="ms-1">Reverse icons</div>
+        </div>
       </div>
     </div>
   </t>
@@ -4182,7 +4277,8 @@
       t-on-click="props.onPreviewClick"
       t-on-pointerdown="(ev) => this.onMouseDown(ev)">
       <div class="position-relative h-100 w-100 d-flex align-items-center">
-        <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
+        <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>
         <t t-if="cf.rule.type==='IconSetRule'">
@@ -4209,10 +4305,10 @@
         </div>
         <div class="o-cf-delete">
           <div
-            class="o-cf-delete-button text-muted"
+            class="o-cf-delete-button o-button-icon"
             t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
             title="Remove rule">
-            <t t-call="o-spreadsheet-Icon.TRASH"/>
+            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
           </div>
         </div>
       </div>
@@ -4234,7 +4330,7 @@
         </div>
       </t>
       <div
-        class="btn btn-link o-sidePanel-btn-link o-cf-add float-end"
+        class="o-button-link p-4 o-cf-add float-end"
         t-on-click.prevent.stop="props.onAddConditionalFormat">
         + Add another rule
       </div>
@@ -4297,7 +4393,7 @@
       <Section>
         <t t-set-slot="title">Format</t>
         <select
-          class="o-input o-format-proposals"
+          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">
@@ -4308,6 +4404,23 @@
             />
           </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>
+            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
+              <tr>
+                <td class="pe-3 fw-bolder" t-esc="example.label"/>
+                <td t-esc="example.value"/>
+              </tr>
+            </t>
+          </table>
+        </div>
       </Section>
       <Section>
         <div class="o-sidePanelButtons">
@@ -4333,9 +4446,7 @@
             />
           </t>
         </div>
-        <div
-          class="o-dv-add btn btn-link o-sidePanel-btn-link float-end"
-          t-on-click="addDataValidationRule">
+        <div class="o-dv-add o-button-link p-4 float-end" t-on-click="addDataValidationRule">
           + Add another rule
         </div>
       </t>
@@ -4425,9 +4536,9 @@
           onBlur.bind="onBlurInput"
         />
         <div
-          class="o-dv-list-item-delete ms-2 me-1"
+          class="o-dv-list-item-delete ms-2 o-button-icon"
           t-on-click="() => this.removeItem(value_index)">
-          <t t-call="o-spreadsheet-Icon.TRASH"/>
+          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
       <div class="mb-2"/>
@@ -4521,9 +4632,9 @@
           <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
         </div>
         <div
-          class="o-dv-preview-delete d-flex align-items-center text-muted px-3"
+          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"/>
+          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
     </div>
@@ -4660,16 +4771,14 @@
       <div>
         <input type="text" class="o-input o_sp_en_name" t-model="state.name"/>
       </div>
-      <div class="btn btn-link o_sp_en_save" t-on-click="save">Save</div>
-      <br/>
+      <div class="o-button-link o_sp_en_save" t-on-click="save">Save</div>
     </t>
     <t t-else="">
       <div class="o_sp_en_display_name" t-esc="props.displayName"/>
-      <div class="btn btn-link o_sp_en_rename" t-on-click="rename">
+      <div class="o-button-link o_sp_en_rename" t-on-click="rename">
         <i class="fa fa-pencil me-1"/>
         Rename
       </div>
-      <br/>
     </t>
   </t>
 
@@ -4682,14 +4791,14 @@
         value="props.deferUpdate"
         onChange="(value) => props.toggleDeferUpdate(value)"
       />
-      <div t-if="props.isDirty">
+      <div t-if="props.isDirty" class="d-flex align-items-center">
         <i
-          class="btn btn-sm pe-0 fa fa-undo"
+          class="o-button-icon pe-0 fa fa-undo"
           title="Discard all changes"
           t-on-click="() => props.discard()"
         />
         <span
-          class="btn btm-sm btn-link sp_apply_update"
+          class="o-button-link sp_apply_update small ps-2"
           title="Apply all changes"
           t-on-click="() => props.apply()">
           Update
@@ -4703,7 +4812,7 @@
     <Popover t-if="popover.isOpen" t-props="popoverProps">
       <div
         class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search">
-        <i class="pe-1 pivot-dimension-search-field-icon">
+        <i class="pe-1 pivot-dimension-search-field-icon text-muted">
           <t t-call="o-spreadsheet-Icon.SEARCH"/>
         </i>
         <input
@@ -4719,6 +4828,7 @@
         onValueSelected="autoComplete.provider.selectProposal"
         onValueHovered="() => {}"
       />
+      <t t-slot="default" t-on-click="togglePopover"/>
     </Popover>
   </t>
 
@@ -4739,11 +4849,14 @@
           />
           <span t-else="1" class="fw-bold" t-esc="props.dimension.displayName"/>
         </div>
-        <i
-          class="btn fa fa-trash o-text-muted pe-0 ms-auto"
-          t-if="props.onRemoved"
-          t-on-click="() => props.onRemoved(props.dimension)"
-        />
+        <div class="d-flex flex-rows">
+          <t t-slot="upper-right-icons"/>
+          <i
+            class="o-button-icon fa fa-trash pe-1 ps-2"
+            t-if="props.onRemoved"
+            t-on-click="() => props.onRemoved(props.dimension)"
+          />
+        </div>
       </div>
       <t t-slot="default"/>
     </div>
@@ -4808,11 +4921,11 @@
           class="pt-1">
           <PivotDimension dimension="col" onRemoved.bind="removeDimension">
             <PivotDimensionGranularity
-              t-if="isDateField(col)"
+              t-if="isDateOrDatetimeField(col)"
               dimension="col"
               onUpdated.bind="this.updateGranularity"
-              availableGranularities="props.unusedDateTimeGranularities[col.fieldName]"
-              allGranularities="props.allGranularities"
+              availableGranularities="props.unusedGranularities[col.fieldName]"
+              allGranularities="getGranularitiesFor(col)"
             />
             <PivotDimensionOrder dimension="col" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
@@ -4834,11 +4947,11 @@
           class="pt-1">
           <PivotDimension dimension="row" onRemoved.bind="removeDimension">
             <PivotDimensionGranularity
-              t-if="isDateField(row)"
+              t-if="isDateOrDatetimeField(row)"
               dimension="row"
               onUpdated.bind="this.updateGranularity"
-              availableGranularities="props.unusedDateTimeGranularities[row.fieldName]"
-              allGranularities="props.allGranularities"
+              availableGranularities="props.unusedGranularities[row.fieldName]"
+              allGranularities="getGranularitiesFor(row)"
             />
             <PivotDimensionOrder dimension="row" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
@@ -4847,47 +4960,152 @@
       <div
         class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title o-pivot-measure">
         Measures
-        <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields"/>
+        <AddDimensionButton onFieldPicked.bind="addMeasureDimension" fields="props.measureFields">
+          <div
+            t-on-click="addCalculatedMeasure"
+            class="p-2 bg-white border-top d-flex align-items-center sticky-bottom add-calculated-measure">
+            <i class="pe-1">
+              <t t-call="o-spreadsheet-Icon.FORMULA"/>
+            </i>
+            Add calculated measure
+          </div>
+        </AddDimensionButton>
       </div>
       <t t-foreach="props.definition.measures" t-as="measure" t-key="measure.id">
         <div
           t-on-pointerdown="(ev) => this.startDragAndDropMeasures(measure, ev)"
           t-att-style="dragAndDrop.itemsStyle[measure.id]"
+          t-att-class="measure.isHidden ? 'opacity-50' : ''"
           class="pt-1 pivot-measure">
-          <PivotDimension
-            dimension="measure"
-            onRemoved.bind="removeMeasureDimension"
-            onNameUpdated.bind="onMeasureNameUpdated">
-            <div class="d-flex flex-column small">
-              <div class="d-flex py-1 px-2 w-100">
-                <div class="pivot-dim-operator-label">Aggregated by</div>
-                <select
-                  class="o-input flex-grow-1 me-3"
-                  t-on-change="(ev) => this.updateAggregator(measure, ev.target.value)">
-                  <option
-                    t-foreach="Object.keys(AGGREGATORS[measure.type])"
-                    t-as="agg"
-                    t-key="agg"
-                    t-att-value="agg"
-                    t-att-selected="agg === measure.aggregator"
-                    t-esc="AGGREGATORS[measure.type][agg]"
-                  />
-                </select>
-              </div>
-            </div>
-          </PivotDimension>
+          <PivotMeasureEditor
+            pivotId="props.pivotId"
+            definition="props.definition"
+            measure="measure"
+            aggregators="AGGREGATORS"
+            onRemoved="() => this.removeMeasureDimension(measure)"
+            onMeasureUpdated="(newMeasure) => this.updateMeasure(measure, newMeasure)"
+            generateMeasureId.bind="getMeasureId"
+          />
         </div>
       </t>
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotMeasureEditor">
+    <t t-set="measure" t-value="props.measure"/>
+    <PivotDimension dimension="measure" onRemoved="props.onRemoved" onNameUpdated.bind="updateName">
+      <t t-set-slot="upper-right-icons">
+        <t t-if="measure.isHidden" t-set="hideTitle">Show</t>
+        <t t-else="" t-set="hideTitle">Hide</t>
+        <i
+          t-att-class="measure.isHidden ? 'fa fa-eye-slash': 'fa fa-eye'"
+          t-att-title="hideTitle"
+          class="o-button-icon pe-1 ps-2"
+          t-on-click="toggleMeasureVisibility"
+        />
+        <i
+          class="o-button-icon pe-1 ps-2 fa fa-cog"
+          title="Show values as"
+          t-on-click="openShowValuesAs"
+        />
+      </t>
+      <div t-if="measure.computedBy" class="d-flex flex-row small">
+        <div class="d-flex flex-column py-2 px-2 w-100">
+          <StandaloneComposer
+            onConfirm.bind="updateMeasureFormula"
+            composerContent="measure.computedBy.formula"
+            defaultRangeSheetId="measure.computedBy.sheetId"
+            contextualAutocomplete="getMeasureAutocomplete()"
+          />
+        </div>
+      </div>
+      <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]"
+            />
+          </select>
+        </div>
+      </div>
+    </PivotDimension>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
+    <Section>
+      <t t-set-slot="title">Show measure as:</t>
+      <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>
+      <div
+        class="o-pivot-measure-display-description mt-3 ps-3"
+        t-esc="measureDisplayDescription[store.measureDisplay.type]"
+      />
+    </Section>
+
+    <Section t-if="store.doesDisplayNeedsField">
+      <t t-set-slot="title">Base field:</t>
+      <div class="o-pivot-measure-display-field w-100 py-1 px-3">
+        <t t-if="store.fields.length">
+          <RadioSelection
+            choices="fieldChoices"
+            selectedValue="store.measureDisplay.fieldNameWithGranularity"
+            name="'baseField'"
+            onChange.bind="(val) => store.updateMeasureDisplayField(val)"
+            direction="'vertical'"
+          />
+        </t>
+        <t t-else="">
+          <div class="text-muted text-center my-3">No active dimension in the pivot</div>
+        </t>
+      </div>
+    </Section>
+
+    <t t-set="values" t-value="store.values"/>
+    <Section t-if="store.doesDisplayNeedsValue and values.length">
+      <t t-set-slot="title">Base item:</t>
+      <div class="o-pivot-measure-display-value w-100 py-1 px-3">
+        <RadioSelection
+          choices="values"
+          selectedValue="store.measureDisplay.value"
+          name="'baseValue'"
+          onChange.bind="(val) => store.updateMeasureDisplayValue(val)"
+          direction="'vertical'"
+        />
+      </div>
+    </Section>
+
+    <Section>
+      <div class="o-sidePanelButtons">
+        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Cancel</button>
+        <button t-on-click="onSave" class="o-pivot-measure-save o-button primary">Save</button>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-PivotSidePanel">
     <t t-component="sidePanelEditor" t-props="props"/>
   </t>
 
   <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
     <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
-      <div class="h-100 overflow-auto">
+      <div class="h-100 position-relative overflow-x-hidden overflow-y-auto">
         <PivotTitleSection pivotId="props.pivotId" flipAxis.bind="flipAxis"/>
         <Section>
           <t t-set-slot="title">Range</t>
@@ -4910,10 +5128,12 @@
           t-if="!pivot.isInvalidRange"
           unusedGroupableFields="store.unusedGroupableFields"
           measureFields="store.measureFields"
-          unusedDateTimeGranularities="store.unusedDateTimeGranularities"
-          allGranularities="store.allGranularities"
+          unusedGranularities="store.unusedGranularities"
+          dateGranularities="store.dateGranularities"
+          datetimeGranularities="store.datetimeGranularities"
           definition="definition"
           onDimensionsUpdated.bind="onDimensionsUpdated"
+          pivotId="props.pivotId"
         />
       </div>
       <PivotDeferUpdate
@@ -5033,6 +5253,10 @@
             <span class="fw-bold me-1">Date time:</span>
             <span t-esc="dateTimeFormatPreview"/>
           </div>
+          <div>
+            <span class="fw-bold me-1">First day of week:</span>
+            <span t-esc="firstDayOfWeek"/>
+          </div>
         </div>
       </Section>
       <Section class="'pt-0'">
@@ -5440,7 +5664,11 @@
       t-att-id="props.id"
       t-att-placeholder="props.placeholder"
       t-att-value="props.value"
-      t-on-change="onChange"
+      t-on-change="save"
+      t-on-focus="focusInputAndSelectContent"
+      t-on-blur="save"
+      t-on-mouseup.prevent.stop=""
+      t-on-keydown="onKeyDown"
     />
   </div>