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

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.4
- @date 2026-01-21T11:09:20.618Z
- @hash fa080c2
+ @version 19.2.12
+ @date 2026-05-12T12:20:56.636Z
+ @hash 5282e3c
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -58,12 +58,12 @@
         t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
         t-ref="toolBarContainer">
         <div
-          class="o-topbar-toolbar d-flex"
+          class="o-topbar-toolbar d-flex flex-grow-1"
           t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
-            class="o-readonly-toolbar d-flex align-items-center text-muted">
+            class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
               <i class="fa fa-eye"/>
               Readonly Access
@@ -188,7 +188,7 @@
     <FontSizeEditor
       currentFontSize="currentFontSize"
       onFontSizeChanged.bind="this.setFontSize"
-      class="props.class"
+      class="class"
       onToggle.bind="this.onToggle"
       onFocusInput.bind="this.onFocusInput"
     />
@@ -217,7 +217,9 @@
   </div>
 
   <t t-name="o-spreadsheet-ColorEditor">
-    <div class="d-flex align-items-center">
+    <div
+      class="d-flex align-items-center"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked() }">
       <ColorPickerWidget
         currentColor="currentColor"
         toggleColorPicker.bind="onClick"
@@ -364,12 +366,12 @@
   </t>
 
   <t t-name="o-spreadsheet-TableDropdownButton">
-    <div class="o-table-widget d-flex align-item-center" t-att-class="props.class">
+    <div class="o-table-widget d-flex align-item-center" t-att-class="class">
       <ActionButton
         action="action"
         hasTriangleDownIcon="true"
         t-on-click="onClick"
-        class="'o-hoverable-button'"
+        class="'opacity-100'"
       />
     </div>
     <TableStylesPopover
@@ -524,7 +526,7 @@
             class="o-delete o-button-danger o-button">
             Delete
           </button>
-          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-cancel o-button">Discard</button>
           <button t-on-click="onConfirm" class="o-confirm o-button primary">Confirm</button>
         </div>
       </Section>
@@ -898,15 +900,15 @@
         </div>
       </div>
 
-      <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' }">
+      <div class="o-panel-content overflow-hidden h-100">
+        <div class="h-100" t-att-class="state.panel !== 'configuration' ? 'd-none' : ''">
           <t
             t-component="sidePanelEditor"
             pivotId="props.pivotId"
             onCloseSidePanel="props.onCloseSidePanel"
           />
         </div>
-        <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
+        <div class="h-100" t-att-class="state.panel !== 'design' ? 'd-none' : ''">
           <PivotDesignPanel pivotId="props.pivotId"/>
         </div>
       </div>
@@ -963,105 +965,107 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotDesignPanel">
-    <Section class="'o-pivot-design'" title.translate="Display options">
-      <div>
-        <div class="container-fluid p-0 pt-2">
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max rows:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfRows ?? ''"
-                class="'o-pivot-n-of-rows'"
-                placeholder.translate="e.g. 10"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
-              />
+    <div class="h-100 overflow-y-auto">
+      <Section class="'o-pivot-design'" title.translate="Display options">
+        <div>
+          <div class="container-fluid p-0 pt-2">
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max rows:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfRows ?? ''"
+                  class="'o-pivot-n-of-rows'"
+                  placeholder.translate="e.g. 10"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max columns:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfColumns ?? ''"
-                class="'o-pivot-n-of-columns'"
-                placeholder.translate="e.g. 5"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max columns:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfColumns ?? ''"
+                  class="'o-pivot-n-of-columns'"
+                  placeholder.translate="e.g. 5"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show totals:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayTotals'"
-                value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
-                onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show totals:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayTotals'"
+                  value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
+                  onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show column titles:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayColumnHeaders'"
-                value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
-                onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show column titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayColumnHeaders'"
+                  value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
+                  onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show measure titles:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayMeasuresRow'"
-                value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
-                onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show measure titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayMeasuresRow'"
+                  value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
+                  onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </Section>
+      </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)"
-          />
+      <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>
-      <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 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>
-      <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 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>
-      </div>
-      <div class="mt-4">
-        <TableStylePicker
-          tableConfig="tableConfig"
-          onStylePicked.bind="onStylePicked"
-          tableStyles="tableStyles"
-          type="'pivot'"
-        />
-      </div>
-    </Section>
+      </Section>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
@@ -1110,7 +1114,7 @@
 
     <Section>
       <div class="o-sidePanelButtons">
-        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Cancel</button>
+        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Discard</button>
         <button t-on-click="onSave" class="o-pivot-measure-save o-button primary">Save</button>
       </div>
     </Section>
@@ -1293,6 +1297,11 @@
           />
         </div>
       </div>
+      <div class="d-flex flex-row">
+        <div class="d-flex py-1 px-2 w-100 small text-muted o-measure-description">
+          <i t-esc="getMeasureDescription(measure)"/>
+        </div>
+      </div>
     </PivotDimension>
   </t>
 
@@ -1330,7 +1339,9 @@
       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">
+        <div
+          class="d-flex align-items-center overflow-hidden text-nowrap"
+          t-att-title="props.dimension.displayName">
           <span class="text-danger me-1" t-if="!props.dimension.isValid">
             <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
           </span>
@@ -1341,7 +1352,7 @@
             class="'o-fw-bold'"
             selectContentOnFocus="true"
           />
-          <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
+          <span t-else="1" class="o-fw-bold text-truncate" t-esc="dimensionDisplayName"/>
         </div>
         <div class="d-flex flex-rows" t-on-pointerdown.stop="">
           <t t-slot="upper-right-icons"/>
@@ -1532,7 +1543,7 @@
   </t>
 
   <t t-name="o-spreadsheet-FindAndReplacePanel">
-    <div class="o-find-and-replace">
+    <div class="o-find-and-replace" t-on-keydown="onKeydownPanel">
       <Section title.translate="Search">
         <div class="o-input-search-container">
           <input
@@ -1608,33 +1619,35 @@
           <ValidationMessages msgType="'info'" messages="searchInfo" singleBox="true"/>
         </div>
       </Section>
-      <Section class="'pt-0'" t-if="!env.model.getters.isReadonly()" title.translate="Replace">
-        <div class="o-input-search-container">
-          <input
-            type="text"
-            class="o-input o-input-without-count o-replace"
-            t-on-keydown="onKeydownReplace"
-            t-model="store.toReplace"
-            placeholder="e.g. 'replace me'"
-          />
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replace()"
-            class="o-button o-replace">
-            Replace
-          </button>
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replaceAll()"
-            class="o-button o-replace-all">
-            Replace all
-          </button>
-        </div>
-      </Section>
+      <t t-if="!env.model.getters.isReadonly()">
+        <Section class="'pt-0'" title.translate="Replace">
+          <div class="o-input-search-container">
+            <input
+              type="text"
+              class="o-input o-input-without-count o-replace"
+              t-on-keydown="onKeydownReplace"
+              t-model="store.toReplace"
+              placeholder="e.g. 'replace me'"
+            />
+          </div>
+        </Section>
+        <Section>
+          <div class="o-sidePanelButtons">
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replace()"
+              class="o-button o-replace">
+              Replace
+            </button>
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replaceAll()"
+              class="o-button o-replace-all">
+              Replace all
+            </button>
+          </div>
+        </Section>
+      </t>
     </div>
   </t>
 
@@ -1706,7 +1719,7 @@
 
       <Section>
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-dv-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-dv-cancel o-button">Discard</button>
           <button t-on-click="onSave" class="o-dv-save o-button primary">Save</button>
         </div>
       </Section>
@@ -1746,26 +1759,26 @@
   </t>
 
   <t t-name="o-spreadsheet-ListCriterionForm">
-    <t t-foreach="displayedValues" t-as="value" t-key="value_index">
+    <t t-foreach="this.state.items" t-as="item" t-key="item_index">
       <div class="o-dv-list-values d-flex align-items-center">
         <div class="me-1">
           <RoundColorPicker
-            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
-            onColorPicked="(c) => this.onColorChanged(c, value)"
+            currentColor="item.color || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(item_index, c)"
           />
         </div>
         <CriterionInput
-          value="props.criterion.values[value_index]"
-          onValueChanged="(v) => this.onValueChanged(v, value_index)"
+          value="item.value"
+          onValueChanged="(v) => this.onValueChanged(item_index, v)"
           criterionType="props.criterion.type"
-          onKeyDown="(ev) => this.onKeyDown(ev, value_index)"
-          focused="value_index === state.focusedValueIndex"
+          onKeyDown="(ev) => this.onKeyDown(ev, item_index)"
+          focused="item_index === this.state.focusedValueIndex"
           onBlur.bind="onBlurInput"
           disableFormulas="props.disableFormulas"
         />
         <div
           class="o-dv-list-item-delete ms-2 o-button-icon"
-          t-on-click="() => this.removeItem(value_index)">
+          t-on-click="() => this.removeItem(item_index)">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
@@ -2210,7 +2223,7 @@
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button t-on-click="onCancel" class="o-button o-cf-cancel">Discard</button>
           <button
             t-on-click="onSave"
             class="o-button primary o-cf-save"
@@ -2920,27 +2933,31 @@
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
-      <div class="o-panel-content" t-ref="panelContent">
-        <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
-          <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
-          <t
-            t-component="chartPanel.configuration"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+      <div class="o-panel-content h-100 overflow-y-hidden">
+        <div class="h-100" t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
+            <t
+              t-component="chartPanel.configuration"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
-        <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
-          <t
-            t-component="chartPanel.design"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+        <div class="h-100" t-att-class="store.panel !== 'design' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <t
+              t-component="chartPanel.design"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -4509,7 +4526,7 @@
             spellcheck="false"
             placeholder="e.g. A1:A2"
             t-on-input="(ev) => this.onInputChanged(range.id, ev)"
-            t-on-focus="() => this.focus(range.id)"
+            t-on-click="() => this.focus(range.id)"
             t-on-keydown="onKeydown"
             t-att-value="range.xc"
             t-att-style="getColor(range)"
@@ -4518,7 +4535,7 @@
               'o-disabled-ranges' : range.disabled and !range.isFocused,
               'o-focused' : range.isFocused,
               'o-invalid border-danger position-relative': isInvalid || !range.isValidRange,
-              'text-decoration-underline': range.xc and range.isFocused and state.mode === 'select-range'
+              'text-decoration-underline': range.xc and range.isFocused and store.mode === 'select-range'
             }"
             t-ref="{{range.isFocused ? 'focusedInput' : 'unfocusedInput' + range_index}}"
           />
@@ -4546,13 +4563,12 @@
         <button class="o-button o-add-selection" t-if="canAddRange" t-on-click="addEmptyInput">
           Add range
         </button>
-        <div class="ms-auto" t-if="store.hasFocus">
+        <div class="ms-auto" t-if="store.hasFocus or isResettable">
           <button class="o-button o-selection-ko" t-if="isResettable" t-on-click="reset">
             Reset
           </button>
           <button
             class="o-button primary ms-2 o-selection-ok"
-            t-if="store.hasFocus"
             t-att-disabled="!isConfirmable"
             t-on-click="confirm">
             Confirm
@@ -4675,7 +4691,7 @@
     <span
       class="o-menu-item-button"
       title="Paint Format"
-      t-att-class="{active: isActive}"
+      t-att-class="{'active': isActive, 'o-disabled': env.model.getters.isCurrentSheetLocked()}"
       t-attf-class="{{props.class}}"
       t-on-click="togglePaintFormat"
       t-on-dblclick="onDblClick">
@@ -4740,7 +4756,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Menu-Popover">
-    <Popover t-if="props.menuItems" t-props="popoverProps">
+    <Popover t-if="menuItems.length" t-props="popoverProps">
       <div
         t-ref="menu"
         class="o-menu-wrapper bg-white"
@@ -4773,7 +4789,7 @@
       t-on-pointerdown.prevent=""
       t-on-click.stop=""
       t-on-contextmenu.prevent="">
-      <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
+      <t t-foreach="props.menuItems" t-as="menuItem" t-key="menuItem_index">
         <div t-if="menuItem === 'separator'" class="o-separator border-bottom"/>
         <t t-else="">
           <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
@@ -4797,7 +4813,7 @@
                 <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
               </div>
               <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
-              <t t-set="description" t-value="menuItem.description(env)"/>
+              <t t-set="description" t-value="menuItem.description(env) or menuItem.shortcut"/>
               <div
                 t-if="description"
                 class="o-menu-item-description ms-auto text-truncate"
@@ -4879,7 +4895,7 @@
         onClose="() => this.menu.isOpen=false"
       />
       <div class="o-buttons">
-        <button t-on-click="cancel" class="o-button o-cancel me-2">Cancel</button>
+        <button t-on-click="cancel" class="o-button o-cancel me-2">Discard</button>
         <button t-on-click="save" class="o-button primary o-save" t-att-disabled="!link.url">
           Confirm
         </button>
@@ -5637,6 +5653,11 @@
       <circle fill="currentColor" cx="14" cy="9" r="4"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.CARET_SORT">
+    <svg class="o-icon" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M40 240 h320 l-160 -160 M40 280 h320 l-160 160"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.SORT_RANGE">
     <svg class="o-icon">
       <path
@@ -5865,10 +5886,10 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
-    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon">
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        d="M15.5 2A1.5 1.5 0 0 1 17 3.5V14a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 1 14V7.5A1.5 1.5 0 0 1 2.5 6H5V3.5A1.5 1.5 0 0 1 6.5 2H17m-1.5 1.5h-9V6h9m-13 1.5V10H5V7.5m-2.5 4V14H5v-2.5m1.5-4V10h9V7.5m-9 4V14h9v-2.5"
       />
     </svg>
   </t>
@@ -5898,7 +5919,7 @@
       </defs>
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        d="M15.5 2A1.5 1.5 0 0 1 17 3.5V14a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 1 14V7.5A1.5 1.5 0 0 1 2.5 6H5V3.5A1.5 1.5 0 0 1 6.5 2H17m-1.5 1.5h-9V6h9m-13 1.5V10H5V7.5m-2.5 4V14H5v-2.5m1.5-4V10h9V7.5m-9 4V14h9v-2.5"
         mask="url(#a)"
       />
       <path
@@ -5949,7 +5970,7 @@
     <svg class="o-icon" viewBox="0 0 122.88 99.75">
       <path
         fill="currentColor"
-        d="M29.09,0h64.7A5.21,5.21,0,0,1,99,5.18v89.4a5.19,5.19,0,0,1-5.18,5.17H29.09a5.19,5.19,0,0,1-5.17-5.18V5.18A5.21,5.21,0,0,1,29.09,0Zm78.52,12.46,10.59-1.52a4.71,4.71,0,0,1,4.68,4.69v68.5a4.71,4.71,0,0,1-4.68,4.68L107.77,88a1.35,1.35,0,0,1-1.31-1.34V83.14a1.34,1.34,0,0,1,1.44-1.23l8.91.73V17.22l-9,1.34a1.34,1.34,0,0,1-1.34-1.34V13.78a1.34,1.34,0,0,1,1.15-1.32ZM5,11l10.31,1.49a1.33,1.33,0,0,1,1.14,1.32v3.44a1.34,1.34,0,0,1-1.34,1.34l-9-1.34V82.64L15,81.91a1.33,1.33,0,0,1,1.43,1.23v3.49A1.35,1.35,0,0,1,15.11,88l-10.43.84A4.71,4.71,0,0,1,0,84.13V15.63a4.73,4.73,0,0,1,4.68-4.69L5,11Zm87.93-4.9H30v87.6h62.9V6.07Z"
+        d="M29.09 0h65.7A5.2 5.2 0 0 1 99 5.2v89.4a5.2 5.2 0 0 1-5.2 5.2H29.1a5.2 5.2 0 0 1-5.2-5.2V5.2A5.2 5.2 0 0 1 29.1 0m89 9a4.7 4.7 0 0 1 4.7 4.7v71a4.7 4.7 0 0 1-4.7 4.7L106.8 91a1.4 1.35 0 0 1-1.3-1.3V81a1.3 1.3 0 0 1 1.4-1.2l6.9.7V17.2l-7 1a1.3 1.3 0 0 1-1.3-1.3V9a1.3 1.3 0 0 1 1.2-1.3ZM5 9l11.3-1a1.3 1.3 0 0 1 1.1 1.3v7.4a1.3 1.3 0 0 1-1.3 1.3l-7-1v64l6.9-1a1.3 1.3 0 0 1 1.4 1.2v9.5a1.4 1.4 0 0 1-2.3.3L4.7 89.2a4.7 4.7 0 0 1-4.7-5V13.7A4.7 4.7 0 0 1 4.7 9zm83 1H35v78h53Z"
       />
     </svg>
   </t>
@@ -5991,47 +6012,42 @@
     </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">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <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"
+        d="M1.5 14v-2h11v-2l4 3-4 3v-2m-4-8V4h4V2l4 3-4 3V6m-11 3 2.8-7h1.2l2.8 7-1.12.43-.7-1.9H3.3l-.7 1.9L1.48 9m2.25-2.7h2.3l-1.1-2.8z"
         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">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <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"
+        d="m.743 7.086 1.414-1.414 7.778 7.778 1.414-1.414.707 4.95-4.95-.708 1.415-1.414m2.121-7.778 1.414-1.414L14.885 8.5l1.414-1.414.707 4.95-4.95-.708 1.415-1.414m-9.9-5.657 6.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">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <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"
+        d="M4 1.5h2v11h2l-3 4-3-4h2m8-4h2v4h2l-3 4-3-4h2m-3-11 7 2.8v1.2L9 8.3l-.43-1.12 1.9-.7V3.3l-1.9-.7L9 1.48m2.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">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <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"
+        d="M14 16.5h-2v-11h-2l3-4 3 4h-2m-8 4H4v-4H2l3-4 3 4H6m3 11-7-2.8v-1.2l7-2.8.43 1.12-1.9.7v3.18l1.9.7L9 16.52m-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">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <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"
+        d="m6.836 17.257-1.414-1.414L13.2 8.065l-1.414-1.414 4.95-.707-.708 4.95-1.414-1.415M6.836 7.358 5.422 5.944 8.25 3.115 6.836 1.701l4.95-.707-.708 4.95-1.414-1.415m-5.657 9.9-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>
@@ -6041,6 +6057,16 @@
       <i class="fa fa-thumb-tack"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.LOCK">
+    <div class="o-icon">
+      <i class="fa fa-lock"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.UNLOCK">
+    <div class="o-icon">
+      <i class="fa fa-unlock"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -6095,7 +6121,7 @@
   <t t-name="o-spreadsheet-Corner">
     <div
       class="o-corner d-flex justify-content-center align-items-center"
-      t-on-pointerdown.prevent="onMouseDown"
+      t-on-pointerdown.prevent.stop="onMouseDown"
       t-on-touchstart.prevent.stop=""
       t-att-style="handlerStyle">
       <div
@@ -6506,7 +6532,11 @@
         anchorRect="menuState.anchorRect"
         onClose="() => this.closeMenu()"
       />
-      <t t-foreach="staticTables" t-as="table" t-key="table.id">
+      <t
+        t-if="!env.model.getters.isReadonly()"
+        t-foreach="staticTables"
+        t-as="table"
+        t-key="table.id">
         <TableResizer table="table"/>
       </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
@@ -6563,8 +6593,8 @@
 
   <t t-name="o-spreadsheet-FilterMenuValueList">
     <div class="o-filter-menu-actions d-flex">
-      <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
-      <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
+      <div class="o-button-link me-4" t-on-click="this.selectAll">Select all</div>
+      <div class="o-button-link me-4" t-on-click="this.clearAll">Clear</div>
     </div>
     <div class="position-relative">
       <input
@@ -6692,7 +6722,7 @@
         </SidePanelCollapsible>
 
         <div class="o-filter-menu-buttons d-flex justify-content-end">
-          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Discard</button>
           <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
             Confirm
           </button>
@@ -6859,7 +6889,7 @@
         t-att-style="props.style"
         t-att-data-id="props.figureUI.id"
         tabindex="0"
-        t-on-keydown="(ev) => this.onKeyDown(ev)"
+        t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
         t-on-keyup.stop="">
         <t
           t-component="figureRegistry.get(props.figureUI.tag).Component"
@@ -6907,7 +6937,7 @@
           />
         </div>
       </div>
-      <t t-if="isSelected and !env.isMobile()">
+      <t t-if="isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
           t-att-style="this.getResizerPosition('top')"
@@ -6992,7 +7022,7 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartJsComponent">
-    <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
+    <canvas class="o-figure-canvas w-100 h-100" t-ref="graphContainer"/>
   </t>
 
   <t t-name="o-spreadsheet-ZoomableChartJsComponent">
@@ -7009,7 +7039,7 @@
           t-ref="masterChartCanvas"
           t-on-dblclick="onMasterChartDoubleClick"
           t-on-pointerdown="onMasterChartPointerDown"
-          t-on-pointermove="onMasterChartPointerMove"
+          t-on-pointermove="updateMasterChartCursor"
           t-on-mouseleave="onMasterChartMouseLeave"
         />
       </div>
@@ -7043,7 +7073,12 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
+    <div
+      class="o-grid o-two-columns o-zoomable"
+      t-ref="dashboard"
+      tabindex="-1"
+      t-on-wheel="onMouseWheel"
+      t-att-style="dashboardStyle">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onGridResized.bind="onGridResized"
@@ -7083,9 +7118,9 @@
     <div class="w-100 h-100 d-flex flex-column align-items-end" t-att-class="verticalJustifyClass">
       <span
         t-if="props.sortDirection === 'none'"
-        class="o-icon sorting-icon pb-1"
+        class="o-icon sorting-icon mb-1"
         t-att-style="style">
-        <i class="fa fa-small fa-sort"/>
+        <t t-call="o-spreadsheet-Icon.CARET_SORT"/>
       </span>
     </div>
   </t>
@@ -7591,6 +7626,9 @@
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"
         t-att-class="{active: isSheetActive}">
+        <span t-if="isSheetLocked" class="me-1">
+          <t t-call="o-spreadsheet-Icon.LOCK"/>
+        </span>
         <span
           class="o-sheet-name"
           t-att-class="{'o-sheet-name-editable': state.isEditing }"
@@ -7604,8 +7642,9 @@
           t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
         />
         <span
-          class="o-sheet-icon ms-1"
+          class="o-sheet-icon ms-1 rounded"
           tabindex="-1"
+          t-ref="icon"
           t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
@@ -7625,7 +7664,10 @@
   </t>
 
   <t t-name="o-spreadsheet-BorderEditorWidget">
-    <div class="d-flex position-relative" title="Borders">
+    <div
+      class="d-flex position-relative"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked()}"
+      title="Borders">
       <span
         t-ref="borderEditorButton"
         t-on-click.stop="toggleBorderEditor"